@spectrum-web-components/picker 0.40.2 → 0.40.4

package/README.md

@@ -395,4 +395,4 @@ When the `value` of an `<sp-picker>` matches the `value` attribute or the trimme
 
 ## Accessibility
 
-To render accessibly, an `<sp-picker>` element should be paired with an `<sp-field-label>` element that has a `for` attribute referencing the `id` of the `<sp-picker>` element.
+To render accessibly, an `<sp-picker>` element should be paired with an `<sp-field-label>` element that has a `for` attribute referencing the `id` of the `<sp-picker>` element. For an accessible label that renders within the bounds of the picker itself, but still fulfills the accessibility contract, use the `label` attribute or a `<span slot="label">` as a child element of `<sp-picker>`.

package/custom-elements.json

@@ -178,6 +178,14 @@
               },
               "privacy": "protected"
             },
+            {
+              "kind": "field",
+              "name": "tooltipEl",
+              "type": {
+                "text": "Tooltip | undefined"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
               "name": "placement",
@@ -261,6 +269,16 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "click",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "handleButtonBlur",
@@ -280,6 +298,15 @@
               "privacy": "protected",
               "default": "'no'"
             },
+            {
+              "kind": "field",
+              "name": "pointerdownState",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "method",
               "name": "handleButtonPointerdown",
@@ -288,7 +315,15 @@
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -310,13 +345,22 @@
             },
             {
               "kind": "method",
-              "name": "handleButtonClick",
+              "name": "handleActivate",
               "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "optional": true,
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -472,6 +516,24 @@
                 "text": "MenuItemChildren | undefined"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleTooltipSlotchange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event & { target: HTMLSlotElement }"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "renderLabelContent",
@@ -549,6 +611,49 @@
               "privacy": "protected",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "dependenciesLoaded",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "dependenciesToLoad",
+              "type": {
+                "text": "Record<string, boolean>"
+              },
+              "privacy": "private",
+              "default": "{}"
+            },
+            {
+              "kind": "method",
+              "name": "trackDependency",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "dependency",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "flag",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "renderContainer",
@@ -1023,6 +1128,18 @@
                 "module": "src/Picker.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "tooltipEl",
+              "type": {
+                "text": "Tooltip | undefined"
+              },
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "PickerBase",
+                "module": "src/Picker.js"
+              }
+            },
             {
               "kind": "field",
               "name": "placement",
@@ -1142,6 +1259,20 @@
                 "module": "src/Picker.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "click",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "PickerBase",
+                "module": "src/Picker.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleButtonBlur",
@@ -1169,6 +1300,19 @@
                 "module": "src/Picker.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "pointerdownState",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "PickerBase",
+                "module": "src/Picker.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleButtonPointerdown",
@@ -1178,6 +1322,14 @@
                   "text": "void"
                 }
               },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "PickerBase",
                 "module": "src/Picker.js"
@@ -1207,13 +1359,22 @@
             },
             {
               "kind": "method",
-              "name": "handleButtonClick",
+              "name": "handleActivate",
               "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
+              "parameters": [
+                {
+                  "name": "event",
+                  "optional": true,
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "PickerBase",
                 "module": "src/Picker.js"
@@ -1395,6 +1556,28 @@
                 "module": "src/Picker.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleTooltipSlotchange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event & { target: HTMLSlotElement }"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "PickerBase",
+                "module": "src/Picker.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderLabelContent",
@@ -1500,6 +1683,61 @@
                 "module": "src/Picker.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "dependenciesLoaded",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "PickerBase",
+                "module": "src/Picker.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dependenciesToLoad",
+              "type": {
+                "text": "Record<string, boolean>"
+              },
+              "privacy": "private",
+              "default": "{}",
+              "inheritedFrom": {
+                "name": "PickerBase",
+                "module": "src/Picker.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "trackDependency",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "dependency",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "flag",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "PickerBase",
+                "module": "src/Picker.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderContainer",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/picker",
-    "version": "0.40.2",
+    "version": "0.40.4",
     "publishConfig": {
         "access": "public"
     },
@@ -65,20 +65,21 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.40.2",
-        "@spectrum-web-components/button": "^0.40.2",
-        "@spectrum-web-components/icon": "^0.40.2",
-        "@spectrum-web-components/icons-ui": "^0.40.2",
-        "@spectrum-web-components/icons-workflow": "^0.40.2",
-        "@spectrum-web-components/menu": "^0.40.2",
-        "@spectrum-web-components/overlay": "^0.40.2",
-        "@spectrum-web-components/popover": "^0.40.2",
-        "@spectrum-web-components/reactive-controllers": "^0.40.2",
-        "@spectrum-web-components/shared": "^0.40.2",
-        "@spectrum-web-components/tray": "^0.40.2"
+        "@spectrum-web-components/base": "^0.40.4",
+        "@spectrum-web-components/button": "^0.40.4",
+        "@spectrum-web-components/icon": "^0.40.4",
+        "@spectrum-web-components/icons-ui": "^0.40.4",
+        "@spectrum-web-components/icons-workflow": "^0.40.4",
+        "@spectrum-web-components/menu": "^0.40.4",
+        "@spectrum-web-components/overlay": "^0.40.4",
+        "@spectrum-web-components/popover": "^0.40.4",
+        "@spectrum-web-components/reactive-controllers": "^0.40.4",
+        "@spectrum-web-components/shared": "^0.40.4",
+        "@spectrum-web-components/tooltip": "^0.40.4",
+        "@spectrum-web-components/tray": "^0.40.4"
     },
     "devDependencies": {
-        "@spectrum-css/picker": "^7.0.8"
+        "@spectrum-css/picker": "7.0.18"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -88,5 +89,5 @@
         "./sync/index.js",
         "./sync/sp-*.js"
     ],
-    "gitHead": "e5fd35c7a98569150ca695ec0e0e7411c9c64c28"
+    "gitHead": "e7bca020d0da71c4d92e95044bf58780d2e8e603"
 }

package/src/Picker.d.ts

@@ -1,6 +1,7 @@
 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 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';
@@ -29,6 +30,7 @@ export declare class PickerBase extends PickerBase_base {
     protected get menuItems(): MenuItem[];
     protected optionsMenu: Menu;
     protected overlayElement: Overlay;
+    protected tooltipEl?: Tooltip;
     /**
      * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
      * @attr
@@ -43,11 +45,13 @@ export declare class PickerBase extends PickerBase_base {
     protected itemRole: string;
     get focusElement(): HTMLElement;
     forceFocusVisible(): void;
+    click(): void;
     handleButtonBlur(): void;
     protected preventNextToggle: 'no' | 'maybe' | 'yes';
-    protected handleButtonPointerdown(): void;
+    private pointerdownState;
+    protected handleButtonPointerdown(event: PointerEvent): void;
     protected handleButtonFocus(event: FocusEvent): void;
-    protected handleButtonClick(): void;
+    protected handleActivate(event?: Event): void;
     focus(options?: FocusOptions): void;
     handleHelperFocus(): void;
     handleChange(event: Event): void;
@@ -60,6 +64,9 @@ export declare class PickerBase extends PickerBase_base {
     protected get selectedItemContent(): MenuItemChildren;
     protected set selectedItemContent(selectedItemContent: MenuItemChildren | undefined);
     _selectedItemContent?: MenuItemChildren;
+    protected handleTooltipSlotchange(event: Event & {
+        target: HTMLSlotElement;
+    }): void;
     protected renderLabelContent(content: Node[]): TemplateResult | Node[];
     protected get buttonContent(): TemplateResult[];
     applyFocusElementLabel: (value?: string) => void;
@@ -70,6 +77,9 @@ export declare class PickerBase extends PickerBase_base {
     protected bindButtonKeydownListener(): void;
     protected firstUpdated(changes: PropertyValues<this>): void;
     protected get dismissHelper(): TemplateResult;
+    private dependenciesLoaded;
+    private dependenciesToLoad;
+    private trackDependency;
     protected renderContainer(menu: TemplateResult): TemplateResult;
     protected hasRenderedOverlay: boolean;
     protected get renderMenu(): TemplateResult;