@spectrum-web-components/picker 0.34.1-rc.0 → 0.35.1-rc.15

package/custom-elements.json

@@ -53,15 +53,6 @@
               },
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "target",
-              "type": {
-                "text": "HTMLButtonElement | this"
-              },
-              "privacy": "public",
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -151,7 +142,7 @@
               "type": {
                 "text": "MenuItem[]"
               },
-              "privacy": "public",
+              "privacy": "protected",
               "readonly": true
             },
             {
@@ -160,13 +151,13 @@
               "type": {
                 "text": "Menu"
               },
-              "privacy": "public"
+              "privacy": "protected"
             },
             {
               "kind": "field",
               "name": "placement",
               "type": {
-                "text": "\"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\""
+                "text": "\"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\""
               },
               "privacy": "public",
               "default": "'bottom-start'",
@@ -247,7 +238,7 @@
             },
             {
               "kind": "method",
-              "name": "onButtonBlur",
+              "name": "handleButtonBlur",
               "privacy": "public",
               "return": {
                 "type": {
@@ -276,7 +267,7 @@
             },
             {
               "kind": "method",
-              "name": "onButtonClick",
+              "name": "handleButtonClick",
               "privacy": "protected",
               "return": {
                 "type": {
@@ -305,17 +296,7 @@
             },
             {
               "kind": "method",
-              "name": "onHelperFocus",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "onButtonFocus",
+              "name": "handleHelperFocus",
               "privacy": "public",
               "return": {
                 "type": {
@@ -343,13 +324,13 @@
             },
             {
               "kind": "field",
-              "name": "onKeydown",
+              "name": "handleKeydown",
               "privacy": "protected"
             },
             {
               "kind": "method",
               "name": "setValueFromItem",
-              "privacy": "public",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "Promise<void>"
@@ -488,6 +469,16 @@
               "privacy": "protected",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "bindButtonKeydownListener",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "dismissHelper",
@@ -585,6 +576,20 @@
               },
               "privacy": "private",
               "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "enterKeydownOn",
+              "type": {
+                "text": "EventTarget | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "handleEnterKeydown",
+              "privacy": "protected"
             }
           ],
           "events": [
@@ -599,7 +604,7 @@
             {
               "name": "placement",
               "type": {
-                "text": "\"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\""
+                "text": "\"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\""
               },
               "default": "'bottom-start'",
               "fieldName": "placement",
@@ -717,7 +722,7 @@
             },
             {
               "kind": "field",
-              "name": "onKeydown",
+              "name": "handleKeydown",
               "privacy": "protected",
               "inheritedFrom": {
                 "name": "PickerBase",
@@ -757,19 +762,6 @@
                 "module": "src/Picker.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "target",
-              "type": {
-                "text": "HTMLButtonElement | this"
-              },
-              "privacy": "public",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "PickerBase",
-                "module": "src/Picker.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -891,7 +883,7 @@
               "type": {
                 "text": "MenuItem[]"
               },
-              "privacy": "public",
+              "privacy": "protected",
               "readonly": true,
               "inheritedFrom": {
                 "name": "PickerBase",
@@ -904,7 +896,7 @@
               "type": {
                 "text": "Menu"
               },
-              "privacy": "public",
+              "privacy": "protected",
               "inheritedFrom": {
                 "name": "PickerBase",
                 "module": "src/Picker.ts"
@@ -914,7 +906,7 @@
               "kind": "field",
               "name": "placement",
               "type": {
-                "text": "\"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\""
+                "text": "\"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\""
               },
               "privacy": "public",
               "default": "'bottom-start'",
@@ -1031,7 +1023,7 @@
             },
             {
               "kind": "method",
-              "name": "onButtonBlur",
+              "name": "handleButtonBlur",
               "privacy": "public",
               "return": {
                 "type": {
@@ -1072,7 +1064,7 @@
             },
             {
               "kind": "method",
-              "name": "onButtonClick",
+              "name": "handleButtonClick",
               "privacy": "protected",
               "return": {
                 "type": {
@@ -1109,21 +1101,7 @@
             },
             {
               "kind": "method",
-              "name": "onHelperFocus",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "PickerBase",
-                "module": "src/Picker.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "onButtonFocus",
+              "name": "handleHelperFocus",
               "privacy": "public",
               "return": {
                 "type": {
@@ -1160,7 +1138,7 @@
             {
               "kind": "method",
               "name": "setValueFromItem",
-              "privacy": "public",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "Promise<void>"
@@ -1330,6 +1308,20 @@
                 "module": "src/Picker.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "bindButtonKeydownListener",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "PickerBase",
+                "module": "src/Picker.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "dismissHelper",
@@ -1467,6 +1459,28 @@
                 "name": "PickerBase",
                 "module": "src/Picker.ts"
               }
+            },
+            {
+              "kind": "field",
+              "name": "enterKeydownOn",
+              "type": {
+                "text": "EventTarget | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "PickerBase",
+                "module": "src/Picker.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleEnterKeydown",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "PickerBase",
+                "module": "src/Picker.ts"
+              }
             }
           ],
           "events": [
@@ -1500,7 +1514,7 @@
             {
               "name": "placement",
               "type": {
-                "text": "\"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\""
+                "text": "\"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\""
               },
               "default": "'bottom-start'",
               "fieldName": "placement",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/picker",
-    "version": "0.34.1-rc.0+1647bfed5",
+    "version": "0.35.1-rc.15+9b76319e4",
     "publishConfig": {
         "access": "public"
     },
@@ -65,20 +65,20 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/button": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/icon": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/icons-ui": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/icons-workflow": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/menu": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/overlay": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/popover": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/reactive-controllers": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/shared": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/tray": "^0.34.1-rc.0+1647bfed5"
+        "@spectrum-web-components/base": "^0.35.1-rc.15+9b76319e4",
+        "@spectrum-web-components/button": "^0.35.1-rc.15+9b76319e4",
+        "@spectrum-web-components/icon": "^0.35.1-rc.15+9b76319e4",
+        "@spectrum-web-components/icons-ui": "^0.35.1-rc.15+9b76319e4",
+        "@spectrum-web-components/icons-workflow": "^0.35.1-rc.15+9b76319e4",
+        "@spectrum-web-components/menu": "^0.35.1-rc.15+9b76319e4",
+        "@spectrum-web-components/overlay": "^0.35.1-rc.15+9b76319e4",
+        "@spectrum-web-components/popover": "^0.35.1-rc.15+9b76319e4",
+        "@spectrum-web-components/reactive-controllers": "^0.35.1-rc.15+9b76319e4",
+        "@spectrum-web-components/shared": "^0.35.1-rc.15+9b76319e4",
+        "@spectrum-web-components/tray": "^0.35.1-rc.15+9b76319e4"
     },
     "devDependencies": {
-        "@spectrum-css/picker": "^4.0.15"
+        "@spectrum-css/picker": "^4.0.21"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -88,5 +88,5 @@
         "./sync/index.js",
         "./sync/sp-*.js"
     ],
-    "gitHead": "1647bfed54cb29f3513343cd0d2c2d9e73e1c508"
+    "gitHead": "9b76319e4f1cc7cb0dd03e9d9debf544e5bed4e9"
 }

package/src/Picker.d.ts

@@ -18,7 +18,6 @@ export declare class PickerBase extends PickerBase_base {
     protected isMobile: MatchMediaController;
     appliedLabel?: string;
     button: HTMLButtonElement;
-    get target(): HTMLButtonElement | this;
     disabled: boolean;
     focused: boolean;
     icons?: 'only' | 'none';
@@ -27,10 +26,10 @@ export declare class PickerBase extends PickerBase_base {
     open: boolean;
     readonly: boolean;
     selects: undefined | 'single';
-    get menuItems(): MenuItem[];
-    optionsMenu: Menu;
+    protected get menuItems(): MenuItem[];
+    protected 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"}
+     * @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" }
      * @attr
      */
     placement: Placement;
@@ -44,16 +43,15 @@ export declare class PickerBase extends PickerBase_base {
     constructor();
     get focusElement(): HTMLElement;
     forceFocusVisible(): void;
-    onButtonBlur(): void;
+    handleButtonBlur(): void;
     private preventNextToggle;
     protected handlePointerdown(): void;
-    protected onButtonClick(): void;
+    protected handleButtonClick(): void;
     focus(options?: FocusOptions): void;
-    onHelperFocus(): void;
-    onButtonFocus(): void;
+    handleHelperFocus(): void;
     handleChange(event: Event): void;
-    protected onKeydown: (event: KeyboardEvent) => void;
-    setValueFromItem(item: MenuItem, menuChangeEvent?: Event): Promise<void>;
+    protected handleKeydown: (event: KeyboardEvent) => void;
+    protected setValueFromItem(item: MenuItem, menuChangeEvent?: Event): Promise<void>;
     protected setMenuItemSelected(item: MenuItem, value: boolean): void;
     toggle(target?: boolean): void;
     close(): void;
@@ -67,6 +65,8 @@ export declare class PickerBase extends PickerBase_base {
     protected get renderOverlay(): TemplateResult;
     protected render(): TemplateResult;
     protected update(changes: PropertyValues<this>): void;
+    protected bindButtonKeydownListener(): void;
+    protected firstUpdated(changes: PropertyValues<this>): void;
     protected get dismissHelper(): TemplateResult;
     protected get renderContainer(): TemplateResult;
     private willManageSelection;
@@ -77,6 +77,8 @@ export declare class PickerBase extends PickerBase_base {
     private selectionResolver;
     protected getUpdateComplete(): Promise<boolean>;
     private recentlyConnected;
+    private enterKeydownOn;
+    protected handleEnterKeydown: (event: KeyboardEvent) => void;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
@@ -92,6 +94,6 @@ 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;
+    protected handleKeydown: (event: KeyboardEvent) => void;
 }
 export {};

package/src/Picker.dev.js

@@ -60,7 +60,7 @@ export class PickerBase extends SizedMixin(Focusable) {
     this.listRole = "listbox";
     this.itemRole = "option";
     this.preventNextToggle = false;
-    this.onKeydown = (event) => {
+    this.handleKeydown = (event) => {
       this.focused = true;
       if (event.code !== "ArrowDown" && event.code !== "ArrowUp") {
         return;
@@ -74,7 +74,28 @@ export class PickerBase extends SizedMixin(Focusable) {
     this.willManageSelection = false;
     this.selectionPromise = Promise.resolve();
     this.recentlyConnected = false;
-    this.onKeydown = this.onKeydown.bind(this);
+    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;
@@ -82,9 +103,6 @@ export class PickerBase extends SizedMixin(Focusable) {
       this.open = false;
     });
   }
-  get target() {
-    return this.button;
-  }
   get menuItems() {
     return this.optionsMenu.childItems;
   }
@@ -108,17 +126,16 @@ export class PickerBase extends SizedMixin(Focusable) {
   forceFocusVisible() {
     this.focused = true;
   }
-  onButtonBlur() {
+  handleButtonBlur() {
     this.focused = false;
-    this.target.removeEventListener(
-      "keydown",
-      this.onKeydown
-    );
   }
   handlePointerdown() {
     this.preventNextToggle = this.open;
   }
-  onButtonClick() {
+  handleButtonClick() {
+    if (this.enterKeydownOn && this.enterKeydownOn !== this.button) {
+      return;
+    }
     if (!this.preventNextToggle) {
       this.toggle();
     }
@@ -130,16 +147,10 @@ export class PickerBase extends SizedMixin(Focusable) {
       this.focused = this.hasVisibleFocusInTree();
     }
   }
-  onHelperFocus() {
+  handleHelperFocus() {
     this.focused = true;
     this.button.focus();
   }
-  onButtonFocus() {
-    this.target.addEventListener(
-      "keydown",
-      this.onKeydown
-    );
-  }
   handleChange(event) {
     const target = event.target;
     const [selected] = target.selectedItems;
@@ -154,14 +165,13 @@ export class PickerBase extends SizedMixin(Focusable) {
     this.open = false;
     const oldSelectedItem = this.selectedItem;
     const oldValue = this.value;
-    if (this.selects) {
-      this.selectedItem = item;
-      this.value = item.value;
-      await this.updateComplete;
-    }
+    this.selectedItem = item;
+    this.value = item.value;
+    await this.updateComplete;
     const applyDefault = this.dispatchEvent(
       new Event("change", {
         bubbles: true,
+        // Allow it to be prevented.
         cancelable: true,
         composed: true
       })
@@ -178,6 +188,10 @@ 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);
@@ -306,7 +320,7 @@ export class PickerBase extends SizedMixin(Focusable) {
             <span
                 id="focus-helper"
                 tabindex="${this.focused || this.open ? "-1" : "0"}"
-                @focus=${this.onHelperFocus}
+                @focus=${this.handleHelperFocus}
             ></span>
             <button
                 aria-haspopup="true"
@@ -315,9 +329,12 @@ export class PickerBase extends SizedMixin(Focusable) {
                 aria-labelledby="icon label applied-label"
                 id="button"
                 class="button"
-                @blur=${this.onButtonBlur}
-                @click=${this.onButtonClick}
-                @focus=${this.onButtonFocus}
+                @blur=${this.handleButtonBlur}
+                @click=${this.handleButtonClick}
+                @keydown=${{
+      handleEvent: this.handleEnterKeydown,
+      capture: true
+    }}
                 @pointerdown=${this.handlePointerdown}
                 ?disabled=${this.disabled}
                 tabindex="-1"
@@ -354,6 +371,13 @@ 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">
@@ -375,6 +399,10 @@ export class PickerBase extends SizedMixin(Focusable) {
                 .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>
@@ -514,9 +542,13 @@ __decorateClass([
 export class Picker extends PickerBase {
   constructor() {
     super(...arguments);
-    this.onKeydown = (event) => {
+    this.handleKeydown = (event) => {
       const { code } = event;
       this.focused = true;
+      if (code === "ArrowUp" || code === "ArrowDown") {
+        this.toggle(true);
+        return;
+      }
       if (!code.startsWith("Arrow") || this.readonly) {
         return;
       }