@spectrum-web-components/picker 1.2.0-beta.9 → 1.3.0-beta.0

package/src/Picker.d.ts

@@ -1,11 +1,11 @@
-import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
+import { CSSResultArray, PropertyValues, SpectrumElement, 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 type { Tooltip } from '@spectrum-web-components/tooltip';
 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 type { Menu, MenuItem, MenuItemChildren } from '@spectrum-web-components/menu';
+import type { MenuItemKeydownEvent } from '@spectrum-web-components/menu';
 import { Placement } from '@spectrum-web-components/overlay';
 import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
 import { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';
@@ -16,11 +16,16 @@ import type { FieldLabel } from '@spectrum-web-components/field-label';
 import { DesktopController } from './DesktopController.js';
 import { MobileController } from './MobileController.js';
 export declare const DESCRIPTION_ID = "option-picker";
-declare const PickerBase_base: typeof Focusable & {
+declare const PickerBase_base: typeof SpectrumElement & {
     new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
     prototype: import("@spectrum-web-components/base").SizedElementInterface;
 };
 export declare class PickerBase extends PickerBase_base {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
     isMobile: MatchMediaController;
     strategy: DesktopController | MobileController;
     appliedLabel?: string;
@@ -48,7 +53,9 @@ export declare class PickerBase extends PickerBase_base {
     labelAlignment?: 'inline';
     protected get menuItems(): MenuItem[];
     optionsMenu: Menu;
-    private _selfManageFocusElement;
+    /**
+     * @deprecated
+     * */
     get selfManageFocusElement(): boolean;
     overlayElement: Overlay;
     protected tooltipEl?: Tooltip;
@@ -73,12 +80,19 @@ export declare class PickerBase extends PickerBase_base {
     get focusElement(): HTMLElement;
     forceFocusVisible(): void;
     click(): void;
+    handleButtonClick(): void;
     handleButtonBlur(): void;
     focus(options?: FocusOptions): void;
+    /**
+     * @deprecated - Use `focus` instead.
+     */
     handleHelperFocus(): void;
+    handleFocus(): void;
     handleChange(event: Event): void;
     handleButtonFocus(event: FocusEvent): void;
+    protected handleEscape: (event: MenuItemKeydownEvent | KeyboardEvent) => void;
     protected handleKeydown: (event: KeyboardEvent) => void;
+    protected keyboardOpen(): Promise<void>;
     protected setValueFromItem(item: MenuItem, menuChangeEvent?: Event): Promise<void>;
     protected setMenuItemSelected(item: MenuItem, value: boolean): void;
     toggle(target?: boolean): void;
@@ -94,9 +108,12 @@ export declare class PickerBase extends PickerBase_base {
     protected renderLabelContent(content: Node[]): TemplateResult | Node[];
     protected get buttonContent(): TemplateResult[];
     applyFocusElementLabel: (value: string, labelElement: FieldLabel) => void;
+    protected hasAccessibleLabel(): boolean;
+    protected warnNoLabel(): void;
     protected renderOverlay(menu: TemplateResult): TemplateResult;
     protected get renderDescriptionSlot(): TemplateResult;
     protected render(): TemplateResult;
+    protected willUpdate(changes: PropertyValues<this>): void;
     protected update(changes: PropertyValues<this>): void;
     protected bindButtonKeydownListener(): void;
     protected updated(changes: PropertyValues<this>): void;
@@ -106,9 +123,22 @@ export declare class PickerBase extends PickerBase_base {
     protected hasRenderedOverlay: boolean;
     private onScroll;
     protected get renderMenu(): TemplateResult;
-    private willManageSelection;
+    /**
+     * whether a selection change is already scheduled
+     */
+    willManageSelection: boolean;
+    /**
+     * when the value changes or the menu slot changes, manage the selection on the next frame, if not already scheduled
+     * @param event
+     */
     protected shouldScheduleManageSelection(event?: Event): void;
+    /**
+     * when an item is added or updated, manage the selection, if it's not already scheduled
+     */
     protected shouldManageSelection(): void;
+    /**
+     * updates menu selection based on value
+     */
     protected manageSelection(): Promise<void>;
     private selectionPromise;
     private selectionResolver;

package/src/Picker.dev.js

@@ -13,7 +13,8 @@ import {
   html,
   nothing,
   render,
-  SizedMixin
+  SizedMixin,
+  SpectrumElement
 } from "@spectrum-web-components/base";
 import {
   classMap,
@@ -27,8 +28,6 @@ import {
 } 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 chevronIconOverrides from "@spectrum-web-components/icon/src/icon-chevron-overrides.css.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/menu/sp-menu.js";
@@ -46,7 +45,9 @@ const chevronClass = {
   xl: "spectrum-UIIcon-ChevronDown300"
 };
 export const DESCRIPTION_ID = "option-picker";
-export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
+export class PickerBase extends SizedMixin(SpectrumElement, {
+  noDefaultSize: true
+}) {
   /**
    * Initializes the `PendingStateController` for the Picker component.
    * The `PendingStateController` manages the pending state of the Picker.
@@ -65,20 +66,32 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     this.open = false;
     this.readonly = false;
     this.selects = "single";
-    this._selfManageFocusElement = false;
     this.placement = "bottom-start";
     this.quiet = false;
     this.value = "";
     this.listRole = "listbox";
     this.itemRole = "option";
+    this.handleEscape = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        event.preventDefault();
+        this.toggle(false);
+      }
+    };
     this.handleKeydown = (event) => {
       this.focused = true;
-      if (event.code !== "ArrowDown" && event.code !== "ArrowUp") {
+      if (!["ArrowUp", "ArrowDown", "Enter", " ", "Escape"].includes(
+        event.key
+      )) {
+        return;
+      }
+      if (event.key === "Escape") {
+        this.handleEscape(event);
         return;
       }
       event.stopPropagation();
       event.preventDefault();
-      this.toggle(true);
+      this.keyboardOpen();
     };
     this.handleSlottableRequest = (_event) => {
     };
@@ -87,12 +100,20 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
       this.labelAlignment = labelElement.sideAligned ? "inline" : void 0;
     };
     this.hasRenderedOverlay = false;
+    /**
+     * whether a selection change is already scheduled
+     */
     this.willManageSelection = false;
     this.selectionPromise = Promise.resolve();
     this.recentlyConnected = false;
     this.enterKeydownOn = null;
     this.handleEnterKeydown = (event) => {
-      if (event.code !== "Enter") {
+      if (event.key !== "Enter") {
+        return;
+      }
+      const target = event == null ? void 0 : event.target;
+      if (!target.open && target.hasSubmenu) {
+        event.preventDefault();
         return;
       }
       if (this.enterKeydownOn) {
@@ -103,7 +124,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
       this.addEventListener(
         "keyup",
         async (keyupEvent) => {
-          if (keyupEvent.code !== "Enter") {
+          if (keyupEvent.key !== "Enter") {
             return;
           }
           this.enterKeydownOn = null;
@@ -116,8 +137,11 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
   get menuItems() {
     return this.optionsMenu.childItems;
   }
+  /**
+   * @deprecated
+   * */
   get selfManageFocusElement() {
-    return this._selfManageFocusElement;
+    return true;
   }
   get selectedItem() {
     return this._selectedItem;
@@ -141,7 +165,12 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     }
     this.focused = true;
   }
+  // handled by interaction controller, desktop or mobile; this is only called with a programmatic this.click()
   click() {
+    this.toggle();
+  }
+  // pointer events handled by interaction controller, desktop or mobile; this is only called with a programmatic this.button.click()
+  handleButtonClick() {
     if (this.disabled) {
       return;
     }
@@ -151,15 +180,21 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     this.focused = false;
   }
   focus(options) {
-    super.focus(options);
-    if (!this.disabled && this.focusElement) {
-      this.focused = this.hasVisibleFocusInTree();
-    }
+    var _a;
+    (_a = this.focusElement) == null ? void 0 : _a.focus(options);
   }
+  /**
+   * @deprecated - Use `focus` instead.
+   */
   handleHelperFocus() {
     this.focused = true;
     this.button.focus();
   }
+  handleFocus() {
+    if (!this.disabled && this.focusElement) {
+      this.focused = this.hasVisibleFocusInTree();
+    }
+  }
   handleChange(event) {
     if (this.strategy) {
       this.strategy.preventNextToggle = "no";
@@ -180,6 +215,9 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     var _a;
     (_a = this.strategy) == null ? void 0 : _a.handleButtonFocus(event);
   }
+  async keyboardOpen() {
+    this.toggle(true);
+  }
   async setValueFromItem(item, menuChangeEvent) {
     var _a;
     this.open = false;
@@ -229,18 +267,25 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     item.selected = value;
   }
   toggle(target) {
-    if (this.readonly || this.pending) {
+    if (this.readonly || this.pending || this.disabled) {
       return;
     }
-    this.open = typeof target !== "undefined" ? target : !this.open;
+    const open = typeof target !== "undefined" ? target : !this.open;
+    if (open && !this.open)
+      this.addEventListener(
+        "sp-opened",
+        () => {
+          var _a;
+          return (_a = this.optionsMenu) == null ? void 0 : _a.focusOnFirstSelectedItem();
+        },
+        {
+          once: true
+        }
+      );
+    this.open = open;
     if (this.strategy) {
       this.strategy.open = this.open;
     }
-    if (this.open) {
-      this._selfManageFocusElement = true;
-    } else {
-      this._selfManageFocusElement = false;
-    }
   }
   close() {
     if (this.readonly) {
@@ -332,11 +377,33 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
                     aria-hidden="true"
                     name="tooltip"
                     id="tooltip"
+                    @keydown=${this.handleKeydown}
                     @slotchange=${this.handleTooltipSlotchange}
                 ></slot>
             `
     ];
   }
+  hasAccessibleLabel() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const slotContent = ((_a = this.querySelector('[slot="label"]')) == null ? void 0 : _a.textContent) && ((_c = (_b = this.querySelector('[slot="label"]')) == null ? void 0 : _b.textContent) == null ? void 0 : _c.trim()) !== "";
+    const slotAlt = ((_e = (_d = this.querySelector('[slot="label"]')) == null ? void 0 : _d.getAttribute("alt")) == null ? void 0 : _e.trim()) && ((_g = (_f = this.querySelector('[slot="label"]')) == null ? void 0 : _f.getAttribute("alt")) == null ? void 0 : _g.trim()) !== "";
+    return !!this.label || !!this.getAttribute("aria-label") || !!this.getAttribute("aria-labelledby") || !!this.appliedLabel || !!slotContent || !!slotAlt;
+  }
+  warnNoLabel() {
+    window.__swc.warn(
+      this,
+      `<${this.localName}> needs one of the following to be accessible:`,
+      "https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility",
+      {
+        type: "accessibility",
+        issues: [
+          `an <sp-field-label> element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,
+          'value supplied to the "label" attribute, which will be displayed visually as placeholder text, or',
+          'text content supplied in a <span> with slot="label", which will also be displayed visually as placeholder text.'
+        ]
+      }
+    );
+  }
   renderOverlay(menu) {
     var _a, _b, _c;
     if (((_a = this.strategy) == null ? void 0 : _a.overlay) === void 0) {
@@ -362,15 +429,9 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
       this.tooltipEl.disabled = this.open;
     }
     return html`
-            <span
-                id="focus-helper"
-                tabindex="${this.focused || this.open ? "-1" : "0"}"
-                @focus=${this.handleHelperFocus}
-                aria-describedby=${DESCRIPTION_ID}
-            ></span>
             <button
                 aria-controls=${ifDefined(this.open ? "menu" : void 0)}
-                aria-describedby="tooltip"
+                aria-describedby="tooltip ${DESCRIPTION_ID}"
                 aria-expanded=${this.open ? "true" : "false"}
                 aria-haspopup="true"
                 aria-labelledby="loader icon label applied-label"
@@ -378,35 +439,36 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
                 class=${ifDefined(
       this.labelAlignment ? `label-${this.labelAlignment}` : void 0
     )}
+                @focus=${this.handleButtonFocus}
                 @blur=${this.handleButtonBlur}
                 @keydown=${{
       handleEvent: this.handleEnterKeydown,
       capture: true
     }}
                 ?disabled=${this.disabled}
-                tabindex="-1"
             >
                 ${this.buttonContent}
             </button>
             ${this.renderMenu} ${this.renderDescriptionSlot}
         `;
   }
+  willUpdate(changes) {
+    super.willUpdate(changes);
+    if (changes.has("tabIndex") && !!this.tabIndex) {
+      this.button.tabIndex = this.tabIndex;
+      this.removeAttribute("tabindex");
+    }
+  }
   update(changes) {
     var _a, _b;
     if (this.selects) {
       this.selects = "single";
     }
     if (changes.has("disabled") && this.disabled) {
-      if (this.strategy) {
-        this.open = false;
-        this.strategy.open = false;
-      }
+      this.close();
     }
     if (changes.has("pending") && this.pending) {
-      if (this.strategy) {
-        this.open = false;
-        this.strategy.open = false;
-      }
+      this.close();
     }
     if (changes.has("value")) {
       this.shouldScheduleManageSelection();
@@ -429,20 +491,8 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
       this.updateComplete.then(async () => {
         await new Promise((res) => requestAnimationFrame(res));
         await new Promise((res) => requestAnimationFrame(res));
-        if (!this.label && !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby") && !this.appliedLabel) {
-          window.__swc.warn(
-            this,
-            `<${this.localName}> needs one of the following to be accessible:`,
-            "https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility",
-            {
-              type: "accessibility",
-              issues: [
-                `an <sp-field-label> element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,
-                'value supplied to the "label" attribute, which will be displayed visually as placeholder text, or',
-                'text content supplied in a <span> with slot="label", which will also be displayed visually as placeholder text.'
-              ]
-            }
-          );
+        if (!this.hasAccessibleLabel()) {
+          this.warnNoLabel();
         }
       });
     }
@@ -526,6 +576,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
                 .selects=${this.selects}
                 .selected=${this.value ? [this.value] : []}
                 size=${this.size}
+                @sp-menu-item-keydown=${this.handleEscape}
                 @sp-menu-item-added-or-updated=${this.shouldManageSelection}
             >
                 <slot @slotchange=${this.shouldScheduleManageSelection}></slot>
@@ -540,6 +591,10 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     }
     return menu;
   }
+  /**
+   * when the value changes or the menu slot changes, manage the selection on the next frame, if not already scheduled
+   * @param event
+   */
   shouldScheduleManageSelection(event) {
     if (!this.willManageSelection && (!event || event.target.getRootNode().host === this)) {
       this.willManageSelection = true;
@@ -550,6 +605,9 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
       });
     }
   }
+  /**
+   * when an item is added or updated, manage the selection, if it's not already scheduled
+   */
   shouldManageSelection() {
     if (this.willManageSelection) {
       return;
@@ -557,6 +615,9 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     this.willManageSelection = true;
     this.manageSelection();
   }
+  /**
+   * updates menu selection based on value
+   */
   async manageSelection() {
     if (this.selects == null) return;
     this.selectionPromise = new Promise(
@@ -606,6 +667,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
   connectedCallback() {
     super.connectedCallback();
     this.recentlyConnected = this.hasUpdated;
+    this.addEventListener("focus", this.handleFocus);
   }
   disconnectedCallback() {
     var _a;
@@ -614,6 +676,10 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     super.disconnectedCallback();
   }
 }
+PickerBase.shadowRootOptions = {
+  ...SpectrumElement.shadowRootOptions,
+  delegatesFocus: true
+};
 __decorateClass([
   state()
 ], PickerBase.prototype, "appliedLabel", 2);
@@ -678,33 +744,43 @@ export class Picker extends PickerBase {
   constructor() {
     super(...arguments);
     this.handleKeydown = (event) => {
-      const { code } = event;
+      var _a;
+      const { key } = event;
+      const handledKeys = [
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "Enter",
+        " ",
+        "Escape"
+      ].includes(key);
+      const openKeys = ["ArrowUp", "ArrowDown", "Enter", " "].includes(key);
       this.focused = true;
-      if (!code.startsWith("Arrow") || this.readonly || this.pending) {
+      if ("Escape" === key) {
+        this.handleEscape(event);
         return;
       }
-      if (code === "ArrowUp" || code === "ArrowDown") {
-        this.toggle(true);
-        event.preventDefault();
+      if (!handledKeys || this.readonly || this.pending) {
         return;
       }
-      event.preventDefault();
-      const selectedIndex = this.selectedItem ? this.menuItems.indexOf(this.selectedItem) : -1;
-      const nextOffset = selectedIndex < 0 || 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) {
+      if (openKeys) {
+        this.keyboardOpen();
+        event.preventDefault();
         return;
       }
-      if (!this.value || nextIndex !== selectedIndex) {
-        this.setValueFromItem(this.menuItems[nextIndex]);
+      event.preventDefault();
+      const nextItem = (_a = this.optionsMenu) == null ? void 0 : _a.getNeighboringFocusableElement(
+        this.selectedItem,
+        key === "ArrowLeft"
+      );
+      if (!this.value || nextItem !== this.selectedItem) {
+        if (!!nextItem) this.setValueFromItem(nextItem);
       }
     };
   }
   static get styles() {
-    return [pickerStyles, chevronStyles, chevronIconOverrides];
+    return [pickerStyles, chevronStyles];
   }
   get containerStyles() {
     const styles = super.containerStyles;