@spectrum-web-components/picker 1.3.1-beta.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -7
- package/custom-elements.json +52 -7
- package/package.json +15 -15
- package/src/InteractionController.dev.js +3 -0
- package/src/InteractionController.dev.js.map +2 -2
- package/src/InteractionController.js +1 -1
- package/src/InteractionController.js.map +2 -2
- package/src/Picker.d.ts +9 -0
- package/src/Picker.dev.js +17 -10
- package/src/Picker.dev.js.map +2 -2
- package/src/Picker.js +10 -10
- package/src/Picker.js.map +3 -3
package/README.md
CHANGED
|
@@ -137,7 +137,7 @@ When using `<sp-menu-item>` elements without text content, be sure to use the `v
|
|
|
137
137
|
</sp-picker>
|
|
138
138
|
```
|
|
139
139
|
|
|
140
|
-
|
|
140
|
+
#### Advanced icon management
|
|
141
141
|
|
|
142
142
|
The `icons` attribute manages how the selected item will appear. Set `icons="only"` to display only the selected item's icon in the `<sp-picker>` element, or `icons="none"` to display the selected item text without the icon `<sp-picker>`.
|
|
143
143
|
|
|
@@ -564,11 +564,11 @@ While in pending state, `<sp-picker>` elements will not respond to click events
|
|
|
564
564
|
</sp-tab-panel>
|
|
565
565
|
</sp-tabs>
|
|
566
566
|
|
|
567
|
-
|
|
567
|
+
### Behaviors
|
|
568
568
|
|
|
569
569
|
#### Force Popover on Mobile Devices
|
|
570
570
|
|
|
571
|
-
On mobile, the menu can be exposed in either a `sp-popover` or `sp-tray`. By default, `sp-picker` will render an `sp-tray`. If you would like to render `sp-popover` on mobile, add the attribute `
|
|
571
|
+
On mobile, the menu can be exposed in either a `sp-popover` or `sp-tray`. By default, `sp-picker` will render an `sp-tray`. If you would like to render `sp-popover` on mobile, add the attribute `force-popover` to the `sp-picker`.
|
|
572
572
|
|
|
573
573
|
Usage Guidance:
|
|
574
574
|
|
|
@@ -589,15 +589,12 @@ To see this functionality in action, load this page from your mobile device or u
|
|
|
589
589
|
<sp-field-label for="picker-popover">
|
|
590
590
|
Do you want to see a popover menu?
|
|
591
591
|
</sp-field-label>
|
|
592
|
-
<sp-picker id="picker-popover" label="Select an option"
|
|
592
|
+
<sp-picker id="picker-popover" label="Select an option" force-popover>
|
|
593
593
|
<sp-menu-item value="option-1">Yes</sp-menu-item>
|
|
594
594
|
<sp-menu-item value="option-2">No</sp-menu-item>
|
|
595
595
|
</sp-picker>
|
|
596
596
|
```
|
|
597
597
|
|
|
598
|
-
</sp-tab-panel>
|
|
599
|
-
</sp-tabs>
|
|
600
|
-
|
|
601
598
|
### Accessibility
|
|
602
599
|
|
|
603
600
|
#### Include a visible label
|
package/custom-elements.json
CHANGED
|
@@ -1055,6 +1055,24 @@
|
|
|
1055
1055
|
"kind": "class",
|
|
1056
1056
|
"description": "",
|
|
1057
1057
|
"name": "PickerBase",
|
|
1058
|
+
"slots": [
|
|
1059
|
+
{
|
|
1060
|
+
"description": "The placeholder content for the Picker",
|
|
1061
|
+
"name": "label"
|
|
1062
|
+
},
|
|
1063
|
+
{
|
|
1064
|
+
"description": "The description content for the Picker",
|
|
1065
|
+
"name": "description"
|
|
1066
|
+
},
|
|
1067
|
+
{
|
|
1068
|
+
"description": "Tooltip to to be applied to the the Picker Button",
|
|
1069
|
+
"name": "tooltip"
|
|
1070
|
+
},
|
|
1071
|
+
{
|
|
1072
|
+
"description": "menu items to be listed in the Picker",
|
|
1073
|
+
"name": ""
|
|
1074
|
+
}
|
|
1075
|
+
],
|
|
1058
1076
|
"members": [
|
|
1059
1077
|
{
|
|
1060
1078
|
"kind": "field",
|
|
@@ -1878,13 +1896,18 @@
|
|
|
1878
1896
|
"name": "change",
|
|
1879
1897
|
"type": {
|
|
1880
1898
|
"text": "Event"
|
|
1881
|
-
}
|
|
1899
|
+
},
|
|
1900
|
+
"description": "Announces that the `value` of the element has changed"
|
|
1882
1901
|
},
|
|
1883
1902
|
{
|
|
1884
1903
|
"name": "scroll",
|
|
1885
1904
|
"type": {
|
|
1886
1905
|
"text": "Event"
|
|
1887
1906
|
}
|
|
1907
|
+
},
|
|
1908
|
+
{
|
|
1909
|
+
"description": "Announces that the overlay has been opened",
|
|
1910
|
+
"name": "sp-opened"
|
|
1888
1911
|
}
|
|
1889
1912
|
],
|
|
1890
1913
|
"attributes": [
|
|
@@ -2004,7 +2027,9 @@
|
|
|
2004
2027
|
"superclass": {
|
|
2005
2028
|
"name": "SpectrumElement",
|
|
2006
2029
|
"package": "@spectrum-web-components/base"
|
|
2007
|
-
}
|
|
2030
|
+
},
|
|
2031
|
+
"tagName": "sp-picker",
|
|
2032
|
+
"customElement": true
|
|
2008
2033
|
},
|
|
2009
2034
|
{
|
|
2010
2035
|
"kind": "class",
|
|
@@ -2013,19 +2038,35 @@
|
|
|
2013
2038
|
"slots": [
|
|
2014
2039
|
{
|
|
2015
2040
|
"description": "The placeholder content for the Picker",
|
|
2016
|
-
"name": "label"
|
|
2041
|
+
"name": "label",
|
|
2042
|
+
"inheritedFrom": {
|
|
2043
|
+
"name": "PickerBase",
|
|
2044
|
+
"module": "src/Picker.ts"
|
|
2045
|
+
}
|
|
2017
2046
|
},
|
|
2018
2047
|
{
|
|
2019
2048
|
"description": "The description content for the Picker",
|
|
2020
|
-
"name": "description"
|
|
2049
|
+
"name": "description",
|
|
2050
|
+
"inheritedFrom": {
|
|
2051
|
+
"name": "PickerBase",
|
|
2052
|
+
"module": "src/Picker.ts"
|
|
2053
|
+
}
|
|
2021
2054
|
},
|
|
2022
2055
|
{
|
|
2023
2056
|
"description": "Tooltip to to be applied to the the Picker Button",
|
|
2024
|
-
"name": "tooltip"
|
|
2057
|
+
"name": "tooltip",
|
|
2058
|
+
"inheritedFrom": {
|
|
2059
|
+
"name": "PickerBase",
|
|
2060
|
+
"module": "src/Picker.ts"
|
|
2061
|
+
}
|
|
2025
2062
|
},
|
|
2026
2063
|
{
|
|
2027
2064
|
"description": "menu items to be listed in the Picker",
|
|
2028
|
-
"name": ""
|
|
2065
|
+
"name": "",
|
|
2066
|
+
"inheritedFrom": {
|
|
2067
|
+
"name": "PickerBase",
|
|
2068
|
+
"module": "src/Picker.ts"
|
|
2069
|
+
}
|
|
2029
2070
|
}
|
|
2030
2071
|
],
|
|
2031
2072
|
"members": [
|
|
@@ -3172,7 +3213,11 @@
|
|
|
3172
3213
|
},
|
|
3173
3214
|
{
|
|
3174
3215
|
"description": "Announces that the overlay has been opened",
|
|
3175
|
-
"name": "sp-opened"
|
|
3216
|
+
"name": "sp-opened",
|
|
3217
|
+
"inheritedFrom": {
|
|
3218
|
+
"name": "PickerBase",
|
|
3219
|
+
"module": "src/Picker.ts"
|
|
3220
|
+
}
|
|
3176
3221
|
},
|
|
3177
3222
|
{
|
|
3178
3223
|
"description": "Announces that the overlay has been closed",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/picker",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -82,20 +82,20 @@
|
|
|
82
82
|
"lit-html"
|
|
83
83
|
],
|
|
84
84
|
"dependencies": {
|
|
85
|
-
"@spectrum-web-components/base": "1.
|
|
86
|
-
"@spectrum-web-components/button": "1.
|
|
87
|
-
"@spectrum-web-components/field-label": "1.
|
|
88
|
-
"@spectrum-web-components/icon": "1.
|
|
89
|
-
"@spectrum-web-components/icons-ui": "1.
|
|
90
|
-
"@spectrum-web-components/icons-workflow": "1.
|
|
91
|
-
"@spectrum-web-components/menu": "1.
|
|
92
|
-
"@spectrum-web-components/overlay": "1.
|
|
93
|
-
"@spectrum-web-components/popover": "1.
|
|
94
|
-
"@spectrum-web-components/progress-circle": "1.
|
|
95
|
-
"@spectrum-web-components/reactive-controllers": "1.
|
|
96
|
-
"@spectrum-web-components/shared": "1.
|
|
97
|
-
"@spectrum-web-components/tooltip": "1.
|
|
98
|
-
"@spectrum-web-components/tray": "1.
|
|
85
|
+
"@spectrum-web-components/base": "1.4.0",
|
|
86
|
+
"@spectrum-web-components/button": "1.4.0",
|
|
87
|
+
"@spectrum-web-components/field-label": "1.4.0",
|
|
88
|
+
"@spectrum-web-components/icon": "1.4.0",
|
|
89
|
+
"@spectrum-web-components/icons-ui": "1.4.0",
|
|
90
|
+
"@spectrum-web-components/icons-workflow": "1.4.0",
|
|
91
|
+
"@spectrum-web-components/menu": "1.4.0",
|
|
92
|
+
"@spectrum-web-components/overlay": "1.4.0",
|
|
93
|
+
"@spectrum-web-components/popover": "1.4.0",
|
|
94
|
+
"@spectrum-web-components/progress-circle": "1.4.0",
|
|
95
|
+
"@spectrum-web-components/reactive-controllers": "1.4.0",
|
|
96
|
+
"@spectrum-web-components/shared": "1.4.0",
|
|
97
|
+
"@spectrum-web-components/tooltip": "1.4.0",
|
|
98
|
+
"@spectrum-web-components/tray": "1.4.0"
|
|
99
99
|
},
|
|
100
100
|
"devDependencies": {
|
|
101
101
|
"@spectrum-css/picker": "9.1.4"
|
|
@@ -108,6 +108,9 @@ export class InteractionController {
|
|
|
108
108
|
}
|
|
109
109
|
hostConnected() {
|
|
110
110
|
this.init();
|
|
111
|
+
this.host.addEventListener("sp-opened", () => {
|
|
112
|
+
this.host.optionsMenu.shouldSupportDragAndSelect = !this.host.isMobile.matches;
|
|
113
|
+
});
|
|
111
114
|
this.host.addEventListener("sp-closed", () => {
|
|
112
115
|
if (!this.open && this.host.optionsMenu.matches(":focus-within") && !this.host.button.matches(":focus")) {
|
|
113
116
|
this.host.button.focus();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["InteractionController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n ReactiveController,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport { PickerBase } from './Picker.dev.js'\n\nexport enum InteractionTypes {\n 'desktop',\n 'mobile',\n}\nexport const SAFARI_FOCUS_RING_CLASS = 'remove-focus-ring-safari-hack';\n\nexport class InteractionController implements ReactiveController {\n abortController!: AbortController;\n\n public preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n public pointerdownState = false;\n public enterKeydownOn: EventTarget | null = null;\n\n public container!: TemplateResult;\n\n get activelyOpening(): boolean {\n return false;\n }\n\n private _open = false;\n\n public get open(): boolean {\n return this._open;\n }\n\n /**\n * Set `open`\n */\n public set open(open: boolean) {\n if (this._open === open) return;\n this._open = open;\n\n if (this.overlay) {\n this.host.open = open;\n return;\n }\n\n // When there is no Overlay and `open` is moving to `true`, lazily import/create\n // an Overlay and apply that state to it.\n customElements\n .whenDefined('sp-overlay')\n .then(async (): Promise<void> => {\n const { Overlay } = await import(\n '@spectrum-web-components/overlay/src/Overlay.js'\n );\n this.overlay = new Overlay();\n this.host.open = true;\n this.host.requestUpdate();\n });\n import('@spectrum-web-components/overlay/sp-overlay.js');\n }\n\n private _overlay!: AbstractOverlay;\n\n public get overlay(): AbstractOverlay {\n return this._overlay;\n }\n\n public set overlay(overlay: AbstractOverlay | undefined) {\n if (!overlay) return;\n if (this.overlay === overlay) return;\n this._overlay = overlay;\n this.initOverlay();\n }\n\n type!: InteractionTypes;\n\n constructor(\n public target: HTMLElement,\n public host: PickerBase\n ) {\n this.target = target;\n this.host = host;\n this.host.addController(this);\n this.init();\n }\n\n releaseDescription(): void {}\n\n protected handleBeforetoggle(\n event: Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }\n ): void {\n if (event.composedPath()[0] !== event.target) {\n return;\n }\n if (event.newState === 'closed') {\n if (this.preventNextToggle === 'no') {\n this.open = false;\n } else if (!this.pointerdownState) {\n // Prevent browser driven closure while opening the Picker\n // and the expected event series has not completed.\n this.overlay?.manuallyKeepOpen();\n }\n }\n if (!this.open) {\n this.host.optionsMenu.updateSelectedItemIndex();\n this.host.optionsMenu.closeDescendentOverlays();\n }\n }\n\n initOverlay(): void {\n if (this.overlay) {\n this.overlay.addEventListener('beforetoggle', (event: Event) => {\n this.handleBeforetoggle(\n event as Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }\n );\n });\n this.overlay.type = this.host.isMobile.matches ? 'modal' : 'auto';\n this.overlay.triggerElement = this.host as HTMLElement;\n this.overlay.placement =\n this.host.isMobile.matches && !this.host.forcePopover\n ? undefined\n : this.host.placement;\n // We should not be applying open is set programmatically via the picker's open.property.\n // Focus should only be applied if a user action causes the menu to open. Otherwise,\n // we could be pulling focus from a user when an picker with an open menu loads.\n this.overlay.receivesFocus = 'false';\n this.overlay.willPreventClose =\n this.preventNextToggle !== 'no' && this.open;\n this.overlay.addEventListener(\n 'slottable-request',\n this.host.handleSlottableRequest\n );\n }\n }\n\n public handlePointerdown(_event: PointerEvent): void {}\n\n public handleButtonFocus(event: FocusEvent): void {\n // When focus comes from a pointer event, and the related target is the Menu,\n // we don't want to reopen the Menu.\n if (\n this.preventNextToggle === 'maybe' &&\n event.relatedTarget === this.host.optionsMenu\n ) {\n this.preventNextToggle = 'yes';\n }\n if (this.preventNextToggle === 'no') this.host.close();\n }\n\n public handleActivate(_event: Event): void {}\n\n /* c8 ignore next 3 */\n init(): void {}\n\n abort(): void {\n this.releaseDescription();\n this.abortController?.abort();\n }\n\n hostConnected(): void {\n this.init();\n this.host.addEventListener('sp-closed', ()=> {\n if(!this.open
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n ReactiveController,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport { PickerBase } from './Picker.dev.js'\n\nexport enum InteractionTypes {\n 'desktop',\n 'mobile',\n}\nexport const SAFARI_FOCUS_RING_CLASS = 'remove-focus-ring-safari-hack';\n\nexport class InteractionController implements ReactiveController {\n abortController!: AbortController;\n\n public preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n public pointerdownState = false;\n public enterKeydownOn: EventTarget | null = null;\n\n public container!: TemplateResult;\n\n get activelyOpening(): boolean {\n return false;\n }\n\n private _open = false;\n\n public get open(): boolean {\n return this._open;\n }\n\n /**\n * Set `open`\n */\n public set open(open: boolean) {\n if (this._open === open) return;\n this._open = open;\n\n if (this.overlay) {\n this.host.open = open;\n return;\n }\n\n // When there is no Overlay and `open` is moving to `true`, lazily import/create\n // an Overlay and apply that state to it.\n customElements\n .whenDefined('sp-overlay')\n .then(async (): Promise<void> => {\n const { Overlay } = await import(\n '@spectrum-web-components/overlay/src/Overlay.js'\n );\n this.overlay = new Overlay();\n this.host.open = true;\n this.host.requestUpdate();\n });\n import('@spectrum-web-components/overlay/sp-overlay.js');\n }\n\n private _overlay!: AbstractOverlay;\n\n public get overlay(): AbstractOverlay {\n return this._overlay;\n }\n\n public set overlay(overlay: AbstractOverlay | undefined) {\n if (!overlay) return;\n if (this.overlay === overlay) return;\n this._overlay = overlay;\n this.initOverlay();\n }\n\n type!: InteractionTypes;\n\n constructor(\n public target: HTMLElement,\n public host: PickerBase\n ) {\n this.target = target;\n this.host = host;\n this.host.addController(this);\n this.init();\n }\n\n releaseDescription(): void {}\n\n protected handleBeforetoggle(\n event: Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }\n ): void {\n if (event.composedPath()[0] !== event.target) {\n return;\n }\n if (event.newState === 'closed') {\n if (this.preventNextToggle === 'no') {\n this.open = false;\n } else if (!this.pointerdownState) {\n // Prevent browser driven closure while opening the Picker\n // and the expected event series has not completed.\n this.overlay?.manuallyKeepOpen();\n }\n }\n if (!this.open) {\n this.host.optionsMenu.updateSelectedItemIndex();\n this.host.optionsMenu.closeDescendentOverlays();\n }\n }\n\n initOverlay(): void {\n if (this.overlay) {\n this.overlay.addEventListener('beforetoggle', (event: Event) => {\n this.handleBeforetoggle(\n event as Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }\n );\n });\n this.overlay.type = this.host.isMobile.matches ? 'modal' : 'auto';\n this.overlay.triggerElement = this.host as HTMLElement;\n this.overlay.placement =\n this.host.isMobile.matches && !this.host.forcePopover\n ? undefined\n : this.host.placement;\n // We should not be applying open is set programmatically via the picker's open.property.\n // Focus should only be applied if a user action causes the menu to open. Otherwise,\n // we could be pulling focus from a user when an picker with an open menu loads.\n this.overlay.receivesFocus = 'false';\n this.overlay.willPreventClose =\n this.preventNextToggle !== 'no' && this.open;\n this.overlay.addEventListener(\n 'slottable-request',\n this.host.handleSlottableRequest\n );\n }\n }\n\n public handlePointerdown(_event: PointerEvent): void {}\n\n public handleButtonFocus(event: FocusEvent): void {\n // When focus comes from a pointer event, and the related target is the Menu,\n // we don't want to reopen the Menu.\n if (\n this.preventNextToggle === 'maybe' &&\n event.relatedTarget === this.host.optionsMenu\n ) {\n this.preventNextToggle = 'yes';\n }\n if (this.preventNextToggle === 'no') this.host.close();\n }\n\n public handleActivate(_event: Event): void {}\n\n /* c8 ignore next 3 */\n init(): void {}\n\n abort(): void {\n this.releaseDescription();\n this.abortController?.abort();\n }\n\n hostConnected(): void {\n this.init();\n this.host.addEventListener('sp-opened', () => {\n /**\n * set shouldSupportDragAndSelect to false for mobile\n * to prevent click event being captured behind the menu-tray\n * we do this here because the menu gets reinitialized on overlay open\n */\n this.host.optionsMenu.shouldSupportDragAndSelect =\n !this.host.isMobile.matches;\n });\n this.host.addEventListener('sp-closed', () => {\n if (\n !this.open &&\n this.host.optionsMenu.matches(':focus-within') &&\n !this.host.button.matches(':focus')\n ) {\n this.host.button.focus();\n }\n });\n }\n\n hostDisconnected(): void {\n this.abortController?.abort();\n }\n\n public hostUpdated(): void {\n if (\n this.overlay &&\n this.host.dependencyManager.loaded &&\n this.host.open !== this.overlay.open\n ) {\n this.overlay.willPreventClose = this.preventNextToggle !== 'no';\n this.overlay.open = this.host.open;\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["InteractionTypes", "Overlay"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";export var InteractionTypes=(t=>(t[t.desktop=0]="desktop",t[t.mobile=1]="mobile",t))(InteractionTypes||{});export const SAFARI_FOCUS_RING_CLASS="remove-focus-ring-safari-hack";export class InteractionController{constructor(e,t){this.target=e;this.host=t;this.preventNextToggle="no";this.pointerdownState=!1;this.enterKeydownOn=null;this._open=!1;this.target=e,this.host=t,this.host.addController(this),this.init()}get activelyOpening(){return!1}get open(){return this._open}set open(e){if(this._open!==e){if(this._open=e,this.overlay){this.host.open=e;return}customElements.whenDefined("sp-overlay").then(async()=>{const{Overlay:t}=await import("@spectrum-web-components/overlay/src/Overlay.js");this.overlay=new t,this.host.open=!0,this.host.requestUpdate()}),import("@spectrum-web-components/overlay/sp-overlay.js")}}get overlay(){return this._overlay}set overlay(e){e&&this.overlay!==e&&(this._overlay=e,this.initOverlay())}releaseDescription(){}handleBeforetoggle(e){var t;e.composedPath()[0]===e.target&&(e.newState==="closed"&&(this.preventNextToggle==="no"?this.open=!1:this.pointerdownState||(t=this.overlay)==null||t.manuallyKeepOpen()),this.open||(this.host.optionsMenu.updateSelectedItemIndex(),this.host.optionsMenu.closeDescendentOverlays()))}initOverlay(){this.overlay&&(this.overlay.addEventListener("beforetoggle",e=>{this.handleBeforetoggle(e)}),this.overlay.type=this.host.isMobile.matches?"modal":"auto",this.overlay.triggerElement=this.host,this.overlay.placement=this.host.isMobile.matches&&!this.host.forcePopover?void 0:this.host.placement,this.overlay.receivesFocus="false",this.overlay.willPreventClose=this.preventNextToggle!=="no"&&this.open,this.overlay.addEventListener("slottable-request",this.host.handleSlottableRequest))}handlePointerdown(e){}handleButtonFocus(e){this.preventNextToggle==="maybe"&&e.relatedTarget===this.host.optionsMenu&&(this.preventNextToggle="yes"),this.preventNextToggle==="no"&&this.host.close()}handleActivate(e){}init(){}abort(){var e;this.releaseDescription(),(e=this.abortController)==null||e.abort()}hostConnected(){this.init(),this.host.addEventListener("sp-closed",()=>{!this.open&&this.host.optionsMenu.matches(":focus-within")&&!this.host.button.matches(":focus")&&this.host.button.focus()})}hostDisconnected(){var e;(e=this.abortController)==null||e.abort()}hostUpdated(){this.overlay&&this.host.dependencyManager.loaded&&this.host.open!==this.overlay.open&&(this.overlay.willPreventClose=this.preventNextToggle!=="no",this.overlay.open=this.host.open)}}
|
|
1
|
+
"use strict";export var InteractionTypes=(t=>(t[t.desktop=0]="desktop",t[t.mobile=1]="mobile",t))(InteractionTypes||{});export const SAFARI_FOCUS_RING_CLASS="remove-focus-ring-safari-hack";export class InteractionController{constructor(e,t){this.target=e;this.host=t;this.preventNextToggle="no";this.pointerdownState=!1;this.enterKeydownOn=null;this._open=!1;this.target=e,this.host=t,this.host.addController(this),this.init()}get activelyOpening(){return!1}get open(){return this._open}set open(e){if(this._open!==e){if(this._open=e,this.overlay){this.host.open=e;return}customElements.whenDefined("sp-overlay").then(async()=>{const{Overlay:t}=await import("@spectrum-web-components/overlay/src/Overlay.js");this.overlay=new t,this.host.open=!0,this.host.requestUpdate()}),import("@spectrum-web-components/overlay/sp-overlay.js")}}get overlay(){return this._overlay}set overlay(e){e&&this.overlay!==e&&(this._overlay=e,this.initOverlay())}releaseDescription(){}handleBeforetoggle(e){var t;e.composedPath()[0]===e.target&&(e.newState==="closed"&&(this.preventNextToggle==="no"?this.open=!1:this.pointerdownState||(t=this.overlay)==null||t.manuallyKeepOpen()),this.open||(this.host.optionsMenu.updateSelectedItemIndex(),this.host.optionsMenu.closeDescendentOverlays()))}initOverlay(){this.overlay&&(this.overlay.addEventListener("beforetoggle",e=>{this.handleBeforetoggle(e)}),this.overlay.type=this.host.isMobile.matches?"modal":"auto",this.overlay.triggerElement=this.host,this.overlay.placement=this.host.isMobile.matches&&!this.host.forcePopover?void 0:this.host.placement,this.overlay.receivesFocus="false",this.overlay.willPreventClose=this.preventNextToggle!=="no"&&this.open,this.overlay.addEventListener("slottable-request",this.host.handleSlottableRequest))}handlePointerdown(e){}handleButtonFocus(e){this.preventNextToggle==="maybe"&&e.relatedTarget===this.host.optionsMenu&&(this.preventNextToggle="yes"),this.preventNextToggle==="no"&&this.host.close()}handleActivate(e){}init(){}abort(){var e;this.releaseDescription(),(e=this.abortController)==null||e.abort()}hostConnected(){this.init(),this.host.addEventListener("sp-opened",()=>{this.host.optionsMenu.shouldSupportDragAndSelect=!this.host.isMobile.matches}),this.host.addEventListener("sp-closed",()=>{!this.open&&this.host.optionsMenu.matches(":focus-within")&&!this.host.button.matches(":focus")&&this.host.button.focus()})}hostDisconnected(){var e;(e=this.abortController)==null||e.abort()}hostUpdated(){this.overlay&&this.host.dependencyManager.loaded&&this.host.open!==this.overlay.open&&(this.overlay.willPreventClose=this.preventNextToggle!=="no",this.overlay.open=this.host.open)}}
|
|
2
2
|
//# sourceMappingURL=InteractionController.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["InteractionController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n ReactiveController,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport { PickerBase } from './Picker.js';\n\nexport enum InteractionTypes {\n 'desktop',\n 'mobile',\n}\nexport const SAFARI_FOCUS_RING_CLASS = 'remove-focus-ring-safari-hack';\n\nexport class InteractionController implements ReactiveController {\n abortController!: AbortController;\n\n public preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n public pointerdownState = false;\n public enterKeydownOn: EventTarget | null = null;\n\n public container!: TemplateResult;\n\n get activelyOpening(): boolean {\n return false;\n }\n\n private _open = false;\n\n public get open(): boolean {\n return this._open;\n }\n\n /**\n * Set `open`\n */\n public set open(open: boolean) {\n if (this._open === open) return;\n this._open = open;\n\n if (this.overlay) {\n this.host.open = open;\n return;\n }\n\n // When there is no Overlay and `open` is moving to `true`, lazily import/create\n // an Overlay and apply that state to it.\n customElements\n .whenDefined('sp-overlay')\n .then(async (): Promise<void> => {\n const { Overlay } = await import(\n '@spectrum-web-components/overlay/src/Overlay.js'\n );\n this.overlay = new Overlay();\n this.host.open = true;\n this.host.requestUpdate();\n });\n import('@spectrum-web-components/overlay/sp-overlay.js');\n }\n\n private _overlay!: AbstractOverlay;\n\n public get overlay(): AbstractOverlay {\n return this._overlay;\n }\n\n public set overlay(overlay: AbstractOverlay | undefined) {\n if (!overlay) return;\n if (this.overlay === overlay) return;\n this._overlay = overlay;\n this.initOverlay();\n }\n\n type!: InteractionTypes;\n\n constructor(\n public target: HTMLElement,\n public host: PickerBase\n ) {\n this.target = target;\n this.host = host;\n this.host.addController(this);\n this.init();\n }\n\n releaseDescription(): void {}\n\n protected handleBeforetoggle(\n event: Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }\n ): void {\n if (event.composedPath()[0] !== event.target) {\n return;\n }\n if (event.newState === 'closed') {\n if (this.preventNextToggle === 'no') {\n this.open = false;\n } else if (!this.pointerdownState) {\n // Prevent browser driven closure while opening the Picker\n // and the expected event series has not completed.\n this.overlay?.manuallyKeepOpen();\n }\n }\n if (!this.open) {\n this.host.optionsMenu.updateSelectedItemIndex();\n this.host.optionsMenu.closeDescendentOverlays();\n }\n }\n\n initOverlay(): void {\n if (this.overlay) {\n this.overlay.addEventListener('beforetoggle', (event: Event) => {\n this.handleBeforetoggle(\n event as Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }\n );\n });\n this.overlay.type = this.host.isMobile.matches ? 'modal' : 'auto';\n this.overlay.triggerElement = this.host as HTMLElement;\n this.overlay.placement =\n this.host.isMobile.matches && !this.host.forcePopover\n ? undefined\n : this.host.placement;\n // We should not be applying open is set programmatically via the picker's open.property.\n // Focus should only be applied if a user action causes the menu to open. Otherwise,\n // we could be pulling focus from a user when an picker with an open menu loads.\n this.overlay.receivesFocus = 'false';\n this.overlay.willPreventClose =\n this.preventNextToggle !== 'no' && this.open;\n this.overlay.addEventListener(\n 'slottable-request',\n this.host.handleSlottableRequest\n );\n }\n }\n\n public handlePointerdown(_event: PointerEvent): void {}\n\n public handleButtonFocus(event: FocusEvent): void {\n // When focus comes from a pointer event, and the related target is the Menu,\n // we don't want to reopen the Menu.\n if (\n this.preventNextToggle === 'maybe' &&\n event.relatedTarget === this.host.optionsMenu\n ) {\n this.preventNextToggle = 'yes';\n }\n if (this.preventNextToggle === 'no') this.host.close();\n }\n\n public handleActivate(_event: Event): void {}\n\n /* c8 ignore next 3 */\n init(): void {}\n\n abort(): void {\n this.releaseDescription();\n this.abortController?.abort();\n }\n\n hostConnected(): void {\n this.init();\n this.host.addEventListener('sp-closed', ()=> {\n if(!this.open
|
|
5
|
-
"mappings": "aAoBO,WAAK,kBAAAA,IACRA,IAAA,qBACAA,IAAA,mBAFQA,IAAA,sBAIL,aAAM,wBAA0B,gCAEhC,aAAM,qBAAoD,CA6D7D,YACWC,EACAC,EACT,CAFS,YAAAD,EACA,UAAAC,EA5DX,KAAO,kBAA4C,KACnD,KAAO,iBAAmB,GAC1B,KAAO,eAAqC,KAQ5C,KAAQ,MAAQ,GAoDZ,KAAK,OAASD,EACd,KAAK,KAAOC,EACZ,KAAK,KAAK,cAAc,IAAI,EAC5B,KAAK,KAAK,CACd,CA5DA,IAAI,iBAA2B,CAC3B,MAAO,EACX,CAIA,IAAW,MAAgB,CACvB,OAAO,KAAK,KAChB,CAKA,IAAW,KAAKC,EAAe,CAC3B,GAAI,KAAK,QAAUA,EAGnB,IAFA,KAAK,MAAQA,EAET,KAAK,QAAS,CACd,KAAK,KAAK,KAAOA,EACjB,MACJ,CAIA,eACK,YAAY,YAAY,EACxB,KAAK,SAA2B,CAC7B,KAAM,CAAE,QAAAC,CAAQ,EAAI,KAAM,QACtB,iDACJ,EACA,KAAK,QAAU,IAAIA,EACnB,KAAK,KAAK,KAAO,GACjB,KAAK,KAAK,cAAc,CAC5B,CAAC,EACL,OAAO,gDAAgD,EAC3D,CAIA,IAAW,SAA2B,CAClC,OAAO,KAAK,QAChB,CAEA,IAAW,QAAQC,EAAsC,CAChDA,GACD,KAAK,UAAYA,IACrB,KAAK,SAAWA,EAChB,KAAK,YAAY,EACrB,CAcA,oBAA2B,CAAC,CAElB,mBACNC,EAII,CAxGZ,IAAAC,EAyGYD,EAAM,aAAa,EAAE,CAAC,IAAMA,EAAM,SAGlCA,EAAM,WAAa,WACf,KAAK,oBAAsB,KAC3B,KAAK,KAAO,GACJ,KAAK,mBAGbC,EAAA,KAAK,UAAL,MAAAA,EAAc,oBAGjB,KAAK,OACN,KAAK,KAAK,YAAY,wBAAwB,EAC9C,KAAK,KAAK,YAAY,wBAAwB,GAEtD,CAEA,aAAoB,CACZ,KAAK,UACL,KAAK,QAAQ,iBAAiB,eAAiBD,GAAiB,CAC5D,KAAK,mBACDA,CAIJ,CACJ,CAAC,EACD,KAAK,QAAQ,KAAO,KAAK,KAAK,SAAS,QAAU,QAAU,OAC3D,KAAK,QAAQ,eAAiB,KAAK,KACnC,KAAK,QAAQ,UACT,KAAK,KAAK,SAAS,SAAW,CAAC,KAAK,KAAK,aACnC,OACA,KAAK,KAAK,UAIpB,KAAK,QAAQ,cAAgB,QAC7B,KAAK,QAAQ,iBACT,KAAK,oBAAsB,MAAQ,KAAK,KAC5C,KAAK,QAAQ,iBACT,oBACA,KAAK,KAAK,sBACd,EAER,CAEO,kBAAkBE,EAA4B,CAAC,CAE/C,kBAAkBF,EAAyB,CAI1C,KAAK,oBAAsB,SAC3BA,EAAM,gBAAkB,KAAK,KAAK,cAElC,KAAK,kBAAoB,OAEzB,KAAK,oBAAsB,MAAM,KAAK,KAAK,MAAM,CACzD,CAEO,eAAeE,EAAqB,CAAC,CAG5C,MAAa,CAAC,CAEd,OAAc,CA3KlB,IAAAD,EA4KQ,KAAK,mBAAmB,GACxBA,EAAA,KAAK,kBAAL,MAAAA,EAAsB,OAC1B,CAEA,eAAsB,CAClB,KAAK,KAAK,EACV,KAAK,KAAK,iBAAiB,YAAa,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n ReactiveController,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport { PickerBase } from './Picker.js';\n\nexport enum InteractionTypes {\n 'desktop',\n 'mobile',\n}\nexport const SAFARI_FOCUS_RING_CLASS = 'remove-focus-ring-safari-hack';\n\nexport class InteractionController implements ReactiveController {\n abortController!: AbortController;\n\n public preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n public pointerdownState = false;\n public enterKeydownOn: EventTarget | null = null;\n\n public container!: TemplateResult;\n\n get activelyOpening(): boolean {\n return false;\n }\n\n private _open = false;\n\n public get open(): boolean {\n return this._open;\n }\n\n /**\n * Set `open`\n */\n public set open(open: boolean) {\n if (this._open === open) return;\n this._open = open;\n\n if (this.overlay) {\n this.host.open = open;\n return;\n }\n\n // When there is no Overlay and `open` is moving to `true`, lazily import/create\n // an Overlay and apply that state to it.\n customElements\n .whenDefined('sp-overlay')\n .then(async (): Promise<void> => {\n const { Overlay } = await import(\n '@spectrum-web-components/overlay/src/Overlay.js'\n );\n this.overlay = new Overlay();\n this.host.open = true;\n this.host.requestUpdate();\n });\n import('@spectrum-web-components/overlay/sp-overlay.js');\n }\n\n private _overlay!: AbstractOverlay;\n\n public get overlay(): AbstractOverlay {\n return this._overlay;\n }\n\n public set overlay(overlay: AbstractOverlay | undefined) {\n if (!overlay) return;\n if (this.overlay === overlay) return;\n this._overlay = overlay;\n this.initOverlay();\n }\n\n type!: InteractionTypes;\n\n constructor(\n public target: HTMLElement,\n public host: PickerBase\n ) {\n this.target = target;\n this.host = host;\n this.host.addController(this);\n this.init();\n }\n\n releaseDescription(): void {}\n\n protected handleBeforetoggle(\n event: Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }\n ): void {\n if (event.composedPath()[0] !== event.target) {\n return;\n }\n if (event.newState === 'closed') {\n if (this.preventNextToggle === 'no') {\n this.open = false;\n } else if (!this.pointerdownState) {\n // Prevent browser driven closure while opening the Picker\n // and the expected event series has not completed.\n this.overlay?.manuallyKeepOpen();\n }\n }\n if (!this.open) {\n this.host.optionsMenu.updateSelectedItemIndex();\n this.host.optionsMenu.closeDescendentOverlays();\n }\n }\n\n initOverlay(): void {\n if (this.overlay) {\n this.overlay.addEventListener('beforetoggle', (event: Event) => {\n this.handleBeforetoggle(\n event as Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }\n );\n });\n this.overlay.type = this.host.isMobile.matches ? 'modal' : 'auto';\n this.overlay.triggerElement = this.host as HTMLElement;\n this.overlay.placement =\n this.host.isMobile.matches && !this.host.forcePopover\n ? undefined\n : this.host.placement;\n // We should not be applying open is set programmatically via the picker's open.property.\n // Focus should only be applied if a user action causes the menu to open. Otherwise,\n // we could be pulling focus from a user when an picker with an open menu loads.\n this.overlay.receivesFocus = 'false';\n this.overlay.willPreventClose =\n this.preventNextToggle !== 'no' && this.open;\n this.overlay.addEventListener(\n 'slottable-request',\n this.host.handleSlottableRequest\n );\n }\n }\n\n public handlePointerdown(_event: PointerEvent): void {}\n\n public handleButtonFocus(event: FocusEvent): void {\n // When focus comes from a pointer event, and the related target is the Menu,\n // we don't want to reopen the Menu.\n if (\n this.preventNextToggle === 'maybe' &&\n event.relatedTarget === this.host.optionsMenu\n ) {\n this.preventNextToggle = 'yes';\n }\n if (this.preventNextToggle === 'no') this.host.close();\n }\n\n public handleActivate(_event: Event): void {}\n\n /* c8 ignore next 3 */\n init(): void {}\n\n abort(): void {\n this.releaseDescription();\n this.abortController?.abort();\n }\n\n hostConnected(): void {\n this.init();\n this.host.addEventListener('sp-opened', () => {\n /**\n * set shouldSupportDragAndSelect to false for mobile\n * to prevent click event being captured behind the menu-tray\n * we do this here because the menu gets reinitialized on overlay open\n */\n this.host.optionsMenu.shouldSupportDragAndSelect =\n !this.host.isMobile.matches;\n });\n this.host.addEventListener('sp-closed', () => {\n if (\n !this.open &&\n this.host.optionsMenu.matches(':focus-within') &&\n !this.host.button.matches(':focus')\n ) {\n this.host.button.focus();\n }\n });\n }\n\n hostDisconnected(): void {\n this.abortController?.abort();\n }\n\n public hostUpdated(): void {\n if (\n this.overlay &&\n this.host.dependencyManager.loaded &&\n this.host.open !== this.overlay.open\n ) {\n this.overlay.willPreventClose = this.preventNextToggle !== 'no';\n this.overlay.open = this.host.open;\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["InteractionTypes", "target", "host", "open", "Overlay", "overlay", "event", "_a", "_event"]
|
|
7
7
|
}
|
package/src/Picker.d.ts
CHANGED
|
@@ -20,6 +20,15 @@ declare const PickerBase_base: typeof SpectrumElement & {
|
|
|
20
20
|
new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
|
|
21
21
|
prototype: import("@spectrum-web-components/base").SizedElementInterface;
|
|
22
22
|
};
|
|
23
|
+
/**
|
|
24
|
+
* @element sp-picker
|
|
25
|
+
* @slot label - The placeholder content for the Picker
|
|
26
|
+
* @slot description - The description content for the Picker
|
|
27
|
+
* @slot tooltip - Tooltip to to be applied to the the Picker Button
|
|
28
|
+
* @slot - menu items to be listed in the Picker
|
|
29
|
+
* @fires change - Announces that the `value` of the element has changed
|
|
30
|
+
* @fires sp-opened - Announces that the overlay has been opened
|
|
31
|
+
*/
|
|
23
32
|
export declare class PickerBase extends PickerBase_base {
|
|
24
33
|
static shadowRootOptions: {
|
|
25
34
|
delegatesFocus: boolean;
|
package/src/Picker.dev.js
CHANGED
|
@@ -221,9 +221,6 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
|
|
|
221
221
|
async setValueFromItem(item, menuChangeEvent) {
|
|
222
222
|
var _a;
|
|
223
223
|
this.open = false;
|
|
224
|
-
if (this.strategy) {
|
|
225
|
-
this.strategy.open = false;
|
|
226
|
-
}
|
|
227
224
|
const oldSelectedItem = this.selectedItem;
|
|
228
225
|
const oldValue = this.value;
|
|
229
226
|
this.selectedItem = item;
|
|
@@ -373,13 +370,6 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
|
|
|
373
370
|
<sp-icon-chevron100
|
|
374
371
|
class="picker ${chevronClass[this.size]}"
|
|
375
372
|
></sp-icon-chevron100>
|
|
376
|
-
<slot
|
|
377
|
-
aria-hidden="true"
|
|
378
|
-
name="tooltip"
|
|
379
|
-
id="tooltip"
|
|
380
|
-
@keydown=${this.handleKeydown}
|
|
381
|
-
@slotchange=${this.handleTooltipSlotchange}
|
|
382
|
-
></slot>
|
|
383
373
|
`
|
|
384
374
|
];
|
|
385
375
|
}
|
|
@@ -449,6 +439,13 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
|
|
|
449
439
|
>
|
|
450
440
|
${this.buttonContent}
|
|
451
441
|
</button>
|
|
442
|
+
<slot
|
|
443
|
+
aria-hidden="true"
|
|
444
|
+
name="tooltip"
|
|
445
|
+
id="tooltip"
|
|
446
|
+
@keydown=${this.handleKeydown}
|
|
447
|
+
@slotchange=${this.handleTooltipSlotchange}
|
|
448
|
+
></slot>
|
|
452
449
|
${this.renderMenu} ${this.renderDescriptionSlot}
|
|
453
450
|
`;
|
|
454
451
|
}
|
|
@@ -666,6 +663,16 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
|
|
|
666
663
|
}
|
|
667
664
|
connectedCallback() {
|
|
668
665
|
super.connectedCallback();
|
|
666
|
+
this.updateComplete.then(() => {
|
|
667
|
+
var _a;
|
|
668
|
+
if (!((_a = this.tooltipEl) == null ? void 0 : _a.selfManaged)) {
|
|
669
|
+
return;
|
|
670
|
+
}
|
|
671
|
+
const overlayElement = this.tooltipEl.overlayElement;
|
|
672
|
+
if (overlayElement) {
|
|
673
|
+
overlayElement.triggerElement = this.button;
|
|
674
|
+
}
|
|
675
|
+
});
|
|
669
676
|
this.recentlyConnected = this.hasUpdated;
|
|
670
677
|
this.addEventListener("focus", this.handleFocus);
|
|
671
678
|
}
|
package/src/Picker.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Picker.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n nothing,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport type { Tooltip } from '@spectrum-web-components/tooltip';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemChildren,\n} from '@spectrum-web-components/menu';\n\nimport type { MenuItemKeydownEvent } from '@spectrum-web-components/menu';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';\nimport { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport type { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\nimport type { FieldLabel } from '@spectrum-web-components/field-label';\n\nimport { DesktopController } from './DesktopController.dev.js'\nimport { MobileController } from './MobileController.dev.js'\nimport { strategies } from './strategies.dev.js'\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport const DESCRIPTION_ID = 'option-picker';\nexport class PickerBase extends SizedMixin(SpectrumElement, {\n noDefaultSize: true,\n}) {\n static override shadowRootOptions = {\n ...SpectrumElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n public isMobile = new MatchMediaController(this, IS_MOBILE);\n\n public strategy!: DesktopController | MobileController;\n\n @state()\n appliedLabel?: string;\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public dependencyManager = new DependencyManagerController(this);\n\n private deprecatedMenu: Menu | null = null;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n /**\n * Forces the Picker to render as a popover on mobile instead of a tray.\n *\n * @memberof PickerBase\n */\n @property({ type: Boolean, reflect: true, attribute: 'force-popover' })\n public forcePopover = false;\n\n /** Whether the items are currently loading. */\n @property({ type: Boolean, reflect: true })\n public pending = false;\n\n /** Defines a string value that labels the Picker while it is in pending state. */\n @property({ type: String, attribute: 'pending-label' })\n public pendingLabel = 'Pending';\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public selects: undefined | 'single' = 'single';\n\n @state()\n public labelAlignment?: 'inline';\n\n protected get menuItems(): MenuItem[] {\n return this.optionsMenu.childItems;\n }\n\n @query('sp-menu')\n public optionsMenu!: Menu;\n\n /**\n * @deprecated\n * */\n public get selfManageFocusElement(): boolean {\n return true;\n }\n\n @query('sp-overlay')\n public overlayElement!: Overlay;\n\n protected tooltipEl?: Tooltip;\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public get selectedItem(): MenuItem | undefined {\n return this._selectedItem;\n }\n\n public pendingStateController: PendingStateController<this>;\n\n /**\n * Initializes the `PendingStateController` for the Picker component.\n * The `PendingStateController` manages the pending state of the Picker.\n */\n constructor() {\n super();\n this.pendingStateController = new PendingStateController(this);\n }\n\n public set selectedItem(selectedItem: MenuItem | undefined) {\n this.selectedItemContent = selectedItem\n ? selectedItem.itemChildren\n : undefined;\n\n if (selectedItem === this.selectedItem) return;\n const oldSelectedItem = this.selectedItem;\n this._selectedItem = selectedItem;\n this.requestUpdate('selectedItem', oldSelectedItem);\n }\n\n _selectedItem?: MenuItem;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n if (this.disabled) {\n return;\n }\n\n this.focused = true;\n }\n\n // handled by interaction controller, desktop or mobile; this is only called with a programmatic this.click()\n public override click(): void {\n this.toggle();\n }\n\n // pointer events handled by interaction controller, desktop or mobile; this is only called with a programmatic this.button.click()\n public handleButtonClick(): void {\n if (this.disabled) {\n return;\n }\n this.toggle();\n }\n\n public handleButtonBlur(): void {\n this.focused = false;\n }\n\n public override focus(options?: FocusOptions): void {\n this.focusElement?.focus(options);\n }\n /**\n * @deprecated - Use `focus` instead.\n */\n public handleHelperFocus(): void {\n // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public handleFocus(): void {\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public handleChange(event: Event): void {\n if (this.strategy) {\n this.strategy.preventNextToggle = 'no';\n }\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n event.stopPropagation();\n if (event.cancelable) {\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n if (this.strategy) {\n this.strategy.open = false;\n }\n }\n }\n\n public handleButtonFocus(event: FocusEvent): void {\n this.strategy?.handleButtonFocus(event);\n }\n\n protected handleEscape = (\n event: MenuItemKeydownEvent | KeyboardEvent\n ): void => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n event.preventDefault();\n this.toggle(false);\n }\n };\n\n protected handleKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (\n !['ArrowUp', 'ArrowDown', 'Enter', ' ', 'Escape'].includes(\n event.key\n )\n ) {\n return;\n }\n if (event.key === 'Escape') {\n this.handleEscape(event);\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n this.keyboardOpen();\n };\n\n protected async keyboardOpen(): Promise<void> {\n this.toggle(true);\n }\n\n protected async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n this.open = false;\n // should always close when \"setting\" a value\n if (this.strategy) {\n this.strategy.open = false;\n }\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n\n // Set a value.\n this.selectedItem = item;\n this.value = item?.value ?? '';\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n // Allow it to be prevented.\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault && this.selects) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n if (this.strategy) {\n this.strategy.open = true;\n }\n return;\n } else if (!this.selects) {\n // Unset the value if not carrying a selection\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly || this.pending || this.disabled) {\n return;\n }\n const open = typeof target !== 'undefined' ? target : !this.open;\n if (open && !this.open)\n this.addEventListener(\n 'sp-opened',\n () => this.optionsMenu?.focusOnFirstSelectedItem(),\n {\n once: true,\n }\n );\n\n this.open = open;\n if (this.strategy) {\n this.strategy.open = this.open;\n }\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n if (this.strategy) {\n this.open = false;\n this.strategy.open = false;\n }\n }\n\n protected get containerStyles(): StyleInfo {\n // @todo: test in mobile\n /* c8 ignore next 5 */\n if (this.isMobile.matches) {\n return {\n '--swc-menu-width': '100%',\n };\n }\n return {};\n }\n\n @state()\n protected get selectedItemContent(): MenuItemChildren {\n return this._selectedItemContent || { icon: [], content: [] };\n }\n\n protected set selectedItemContent(\n selectedItemContent: MenuItemChildren | undefined\n ) {\n if (selectedItemContent === this.selectedItemContent) return;\n\n const oldContent = this.selectedItemContent;\n this._selectedItemContent = selectedItemContent;\n this.requestUpdate('selectedItemContent', oldContent);\n }\n\n _selectedItemContent?: MenuItemChildren;\n\n protected handleTooltipSlotchange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.tooltipEl = event.target.assignedElements()[0] as\n | Tooltip\n | undefined;\n }\n\n public handleSlottableRequest = (_event: SlottableRequestEvent): void => {};\n\n protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n if (this.value && this.selectedItem) {\n return content;\n }\n return html`\n <slot name=\"label\" id=\"label\">\n <span\n aria-hidden=${ifDefined(\n this.appliedLabel ? undefined : 'true'\n )}\n >\n ${this.label}\n </span>\n </slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n label: true,\n };\n const appliedLabel = this.appliedLabel || this.label;\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span\n id=${ifDefined(\n this.value && this.selectedItem ? 'label' : undefined\n )}\n class=${classMap(labelClasses)}\n >\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.value && this.selectedItem\n ? html`\n <span\n aria-hidden=\"true\"\n class=\"visually-hidden\"\n id=\"applied-label\"\n >\n ${appliedLabel}\n <slot name=\"label\"></slot>\n </span>\n `\n : html`\n <span hidden id=\"applied-label\">${appliedLabel}</span>\n `}\n ${this.invalid && !this.pending\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n ${this.pendingStateController.renderPendingState()}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n <slot\n aria-hidden=\"true\"\n name=\"tooltip\"\n id=\"tooltip\"\n @keydown=${this.handleKeydown}\n @slotchange=${this.handleTooltipSlotchange}\n ></slot>\n `,\n ];\n }\n\n applyFocusElementLabel = (\n value: string,\n labelElement: FieldLabel\n ): void => {\n this.appliedLabel = value;\n this.labelAlignment = labelElement.sideAligned ? 'inline' : undefined;\n };\n\n protected hasAccessibleLabel(): boolean {\n const slotContent =\n this.querySelector('[slot=\"label\"]')?.textContent &&\n this.querySelector('[slot=\"label\"]')?.textContent?.trim() !== '';\n const slotAlt =\n this.querySelector('[slot=\"label\"]')?.getAttribute('alt')?.trim() &&\n this.querySelector('[slot=\"label\"]')\n ?.getAttribute('alt')\n ?.trim() !== '';\n return (\n !!this.label ||\n !!this.getAttribute('aria-label') ||\n !!this.getAttribute('aria-labelledby') ||\n !!this.appliedLabel ||\n !!slotContent ||\n !!slotAlt\n );\n }\n\n protected warnNoLabel(): void {\n window.__swc.warn(\n this,\n `<${this.localName}> needs one of the following to be accessible:`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility',\n {\n type: 'accessibility',\n issues: [\n `an <sp-field-label> element with a \\`for\\` attribute referencing the \\`id\\` of the \\`<${this.localName}>\\`, or`,\n 'value supplied to the \"label\" attribute, which will be displayed visually as placeholder text, or',\n 'text content supplied in a <span> with slot=\"label\", which will also be displayed visually as placeholder text.',\n ],\n }\n );\n }\n\n protected renderOverlay(menu: TemplateResult): TemplateResult {\n if (this.strategy?.overlay === undefined) {\n return menu;\n }\n const container = this.renderContainer(menu);\n render(container, this.strategy?.overlay as unknown as HTMLElement, {\n host: this,\n });\n return this.strategy?.overlay as unknown as TemplateResult;\n }\n\n protected get renderDescriptionSlot(): TemplateResult {\n return html`\n <div id=${DESCRIPTION_ID}>\n <slot name=\"description\"></slot>\n </div>\n `;\n }\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n if (this.tooltipEl) {\n this.tooltipEl.disabled = this.open;\n }\n return html`\n <button\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-describedby=\"tooltip ${DESCRIPTION_ID}\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"true\"\n aria-labelledby=\"loader icon label applied-label\"\n id=\"button\"\n class=${ifDefined(\n this.labelAlignment\n ? `label-${this.labelAlignment}`\n : undefined\n )}\n @focus=${this.handleButtonFocus}\n @blur=${this.handleButtonBlur}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </button>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n super.willUpdate(changes);\n if (changes.has('tabIndex') && !!this.tabIndex) {\n this.button.tabIndex = this.tabIndex;\n this.removeAttribute('tabindex');\n }\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n /**\n * Always force `selects` to \"single\" when set.\n *\n * @todo: Add support functionally and visually for \"multiple\"\n */\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n this.close();\n }\n if (changes.has('pending') && this.pending) {\n this.close();\n }\n if (changes.has('value')) {\n // MenuItems update a frame late for <slot> management,\n // await the same here.\n this.shouldScheduleManageSelection();\n }\n // Maybe it's finally time to remove this support?s\n if (!this.hasUpdated) {\n this.deprecatedMenu = this.querySelector(':scope > sp-menu');\n this.deprecatedMenu?.toggleAttribute('ignore', true);\n this.deprecatedMenu?.setAttribute('selects', 'inherit');\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n this.updateComplete.then(async () => {\n // Attributes should be user supplied, making them available before first update.\n // However, `appliesLabel` is applied by external elements that must be update complete as well to be bound appropriately.\n await new Promise((res) => requestAnimationFrame(res));\n await new Promise((res) => requestAnimationFrame(res));\n if (!this.hasAccessibleLabel()) {\n this.warnNoLabel();\n }\n });\n }\n super.update(changes);\n }\n\n protected bindButtonKeydownListener(): void {\n this.button.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (changes.has('open')) {\n this.strategy.open = this.open;\n }\n }\n\n protected override firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n this.bindButtonKeydownListener();\n this.bindEvents();\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n aria-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected renderContainer(menu: TemplateResult): TemplateResult {\n const accessibleMenu = html`\n ${this.dismissHelper} ${menu} ${this.dismissHelper}\n `;\n // @todo: test in mobile\n if (this.isMobile.matches && !this.forcePopover) {\n this.dependencyManager.add('sp-tray');\n import('@spectrum-web-components/tray/sp-tray.js');\n return html`\n <sp-tray\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n >\n ${accessibleMenu}\n </sp-tray>\n `;\n }\n this.dependencyManager.add('sp-popover');\n import('@spectrum-web-components/popover/sp-popover.js');\n return html`\n <sp-popover\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n placement=${this.placement}\n >\n ${accessibleMenu}\n </sp-popover>\n `;\n }\n\n protected hasRenderedOverlay = false;\n\n private onScroll(): void {\n this.dispatchEvent(\n new Event('scroll', {\n cancelable: true,\n composed: true,\n })\n );\n }\n\n protected get renderMenu(): TemplateResult {\n const menu = html`\n <sp-menu\n aria-labelledby=\"applied-label\"\n @change=${this.handleChange}\n id=\"menu\"\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n @scroll=${this.onScroll}\n role=${this.listRole}\n .selects=${this.selects}\n .selected=${this.value ? [this.value] : []}\n size=${this.size}\n @sp-menu-item-keydown=${this.handleEscape}\n @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n >\n <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n </sp-menu>\n `;\n this.hasRenderedOverlay =\n this.hasRenderedOverlay ||\n this.focused ||\n this.open ||\n !!this.deprecatedMenu;\n if (this.hasRenderedOverlay) {\n if (this.dependencyManager.loaded) {\n this.dependencyManager.add('sp-overlay');\n }\n return this.renderOverlay(menu);\n }\n return menu;\n }\n\n /**\n * whether a selection change is already scheduled\n */\n public willManageSelection = false;\n\n /**\n * when the value changes or the menu slot changes, manage the selection on the next frame, if not already scheduled\n * @param event\n */\n protected shouldScheduleManageSelection(event?: Event): void {\n if (\n !this.willManageSelection &&\n (!event ||\n ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n .host === this)\n ) {\n //s set a flag to manage selection on the next frame\n this.willManageSelection = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.manageSelection();\n });\n });\n }\n }\n\n /**\n * when an item is added or updated, manage the selection, if it's not already scheduled\n */\n protected shouldManageSelection(): void {\n if (this.willManageSelection) {\n return;\n }\n this.willManageSelection = true;\n this.manageSelection();\n }\n\n /**\n * updates menu selection based on value\n */\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n await this.optionsMenu.updateComplete;\n if (this.recentlyConnected) {\n // Work around for attach timing differences in Safari and Firefox.\n // Remove when refactoring to Menu passthrough wrapper.\n await new Promise((res) => requestAnimationFrame(() => res(true)));\n this.recentlyConnected = false;\n }\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n this.willManageSelection = false;\n }\n\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.selectionPromise;\n // if (this.overlayElement) {\n // await this.overlayElement.updateComplete;\n // }\n return complete;\n }\n\n private recentlyConnected = false;\n\n private enterKeydownOn: EventTarget | null = null;\n\n protected handleEnterKeydown = (event: KeyboardEvent): void => {\n if (event.key !== 'Enter') {\n return;\n }\n const target = event?.target as MenuItem;\n if (!target.open && target.hasSubmenu) {\n event.preventDefault();\n return;\n }\n\n if (this.enterKeydownOn) {\n event.preventDefault();\n return;\n }\n this.enterKeydownOn = event.target;\n this.addEventListener(\n 'keyup',\n async (keyupEvent: KeyboardEvent) => {\n if (keyupEvent.key !== 'Enter') {\n return;\n }\n this.enterKeydownOn = null;\n },\n { once: true }\n );\n };\n\n public bindEvents(): void {\n this.strategy?.abort();\n if (this.isMobile.matches) {\n this.strategy = new strategies['mobile'](this.button, this);\n } else {\n this.strategy = new strategies['desktop'](this.button, this);\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.recentlyConnected = this.hasUpdated;\n this.addEventListener('focus', this.handleFocus);\n }\n\n public override disconnectedCallback(): void {\n this.close();\n this.strategy?.releaseDescription();\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot description - The description content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override get containerStyles(): StyleInfo {\n const styles = super.containerStyles;\n if (!this.quiet) {\n styles['min-width'] = `${this.offsetWidth}px`;\n }\n return styles;\n }\n\n protected override handleKeydown = (event: KeyboardEvent): void => {\n const { key } = event;\n const handledKeys = [\n 'ArrowUp',\n 'ArrowDown',\n 'ArrowLeft',\n 'ArrowRight',\n 'Enter',\n ' ',\n 'Escape',\n ].includes(key);\n const openKeys = ['ArrowUp', 'ArrowDown', 'Enter', ' '].includes(key);\n this.focused = true;\n if ('Escape' === key) {\n this.handleEscape(event);\n return;\n }\n if (!handledKeys || this.readonly || this.pending) {\n return;\n }\n if (openKeys) {\n this.keyboardOpen();\n event.preventDefault();\n return;\n }\n event.preventDefault();\n const nextItem = this.optionsMenu?.getNeighboringFocusableElement(\n this.selectedItem,\n key === 'ArrowLeft'\n );\n if (!this.value || nextItem !== this.selectedItem) {\n // updates picker text but does not fire change event until action is completed\n if (!!nextItem) this.setValueFromItem(nextItem as MenuItem);\n }\n };\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n nothing,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport type { Tooltip } from '@spectrum-web-components/tooltip';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemChildren,\n} from '@spectrum-web-components/menu';\n\nimport type { MenuItemKeydownEvent } from '@spectrum-web-components/menu';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';\nimport { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport type { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\nimport type { FieldLabel } from '@spectrum-web-components/field-label';\n\nimport { DesktopController } from './DesktopController.dev.js'\nimport { MobileController } from './MobileController.dev.js'\nimport { strategies } from './strategies.dev.js'\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport const DESCRIPTION_ID = 'option-picker';\n\n/**\n * @element sp-picker\n * @slot label - The placeholder content for the Picker\n * @slot description - The description content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n */\nexport class PickerBase extends SizedMixin(SpectrumElement, {\n noDefaultSize: true,\n}) {\n static override shadowRootOptions = {\n ...SpectrumElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n public isMobile = new MatchMediaController(this, IS_MOBILE);\n\n public strategy!: DesktopController | MobileController;\n\n @state()\n appliedLabel?: string;\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public dependencyManager = new DependencyManagerController(this);\n\n private deprecatedMenu: Menu | null = null;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n /**\n * Forces the Picker to render as a popover on mobile instead of a tray.\n *\n * @memberof PickerBase\n */\n @property({ type: Boolean, reflect: true, attribute: 'force-popover' })\n public forcePopover = false;\n\n /** Whether the items are currently loading. */\n @property({ type: Boolean, reflect: true })\n public pending = false;\n\n /** Defines a string value that labels the Picker while it is in pending state. */\n @property({ type: String, attribute: 'pending-label' })\n public pendingLabel = 'Pending';\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public selects: undefined | 'single' = 'single';\n\n @state()\n public labelAlignment?: 'inline';\n\n protected get menuItems(): MenuItem[] {\n return this.optionsMenu.childItems;\n }\n\n @query('sp-menu')\n public optionsMenu!: Menu;\n\n /**\n * @deprecated\n * */\n public get selfManageFocusElement(): boolean {\n return true;\n }\n\n @query('sp-overlay')\n public overlayElement!: Overlay;\n\n protected tooltipEl?: Tooltip;\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public get selectedItem(): MenuItem | undefined {\n return this._selectedItem;\n }\n\n public pendingStateController: PendingStateController<this>;\n\n /**\n * Initializes the `PendingStateController` for the Picker component.\n * The `PendingStateController` manages the pending state of the Picker.\n */\n constructor() {\n super();\n this.pendingStateController = new PendingStateController(this);\n }\n\n public set selectedItem(selectedItem: MenuItem | undefined) {\n this.selectedItemContent = selectedItem\n ? selectedItem.itemChildren\n : undefined;\n\n if (selectedItem === this.selectedItem) return;\n const oldSelectedItem = this.selectedItem;\n this._selectedItem = selectedItem;\n this.requestUpdate('selectedItem', oldSelectedItem);\n }\n\n _selectedItem?: MenuItem;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n if (this.disabled) {\n return;\n }\n\n this.focused = true;\n }\n\n // handled by interaction controller, desktop or mobile; this is only called with a programmatic this.click()\n public override click(): void {\n this.toggle();\n }\n\n // pointer events handled by interaction controller, desktop or mobile; this is only called with a programmatic this.button.click()\n public handleButtonClick(): void {\n if (this.disabled) {\n return;\n }\n this.toggle();\n }\n\n public handleButtonBlur(): void {\n this.focused = false;\n }\n\n public override focus(options?: FocusOptions): void {\n this.focusElement?.focus(options);\n }\n /**\n * @deprecated - Use `focus` instead.\n */\n public handleHelperFocus(): void {\n // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public handleFocus(): void {\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public handleChange(event: Event): void {\n if (this.strategy) {\n this.strategy.preventNextToggle = 'no';\n }\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n event.stopPropagation();\n if (event.cancelable) {\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n if (this.strategy) {\n this.strategy.open = false;\n }\n }\n }\n\n public handleButtonFocus(event: FocusEvent): void {\n this.strategy?.handleButtonFocus(event);\n }\n\n protected handleEscape = (\n event: MenuItemKeydownEvent | KeyboardEvent\n ): void => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n event.preventDefault();\n this.toggle(false);\n }\n };\n\n protected handleKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (\n !['ArrowUp', 'ArrowDown', 'Enter', ' ', 'Escape'].includes(\n event.key\n )\n ) {\n return;\n }\n if (event.key === 'Escape') {\n this.handleEscape(event);\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n this.keyboardOpen();\n };\n\n protected async keyboardOpen(): Promise<void> {\n this.toggle(true);\n }\n\n protected async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n this.open = false;\n // should always close when \"setting\" a value\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n\n // Set a value.\n this.selectedItem = item;\n this.value = item?.value ?? '';\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n // Allow it to be prevented.\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault && this.selects) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n if (this.strategy) {\n this.strategy.open = true;\n }\n return;\n } else if (!this.selects) {\n // Unset the value if not carrying a selection\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly || this.pending || this.disabled) {\n return;\n }\n const open = typeof target !== 'undefined' ? target : !this.open;\n if (open && !this.open)\n this.addEventListener(\n 'sp-opened',\n () => this.optionsMenu?.focusOnFirstSelectedItem(),\n {\n once: true,\n }\n );\n\n this.open = open;\n if (this.strategy) {\n this.strategy.open = this.open;\n }\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n if (this.strategy) {\n this.open = false;\n this.strategy.open = false;\n }\n }\n\n protected get containerStyles(): StyleInfo {\n // @todo: test in mobile\n /* c8 ignore next 5 */\n if (this.isMobile.matches) {\n return {\n '--swc-menu-width': '100%',\n };\n }\n return {};\n }\n\n @state()\n protected get selectedItemContent(): MenuItemChildren {\n return this._selectedItemContent || { icon: [], content: [] };\n }\n\n protected set selectedItemContent(\n selectedItemContent: MenuItemChildren | undefined\n ) {\n if (selectedItemContent === this.selectedItemContent) return;\n\n const oldContent = this.selectedItemContent;\n this._selectedItemContent = selectedItemContent;\n this.requestUpdate('selectedItemContent', oldContent);\n }\n\n _selectedItemContent?: MenuItemChildren;\n\n protected handleTooltipSlotchange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.tooltipEl = event.target.assignedElements()[0] as\n | Tooltip\n | undefined;\n }\n\n public handleSlottableRequest = (_event: SlottableRequestEvent): void => {};\n\n protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n if (this.value && this.selectedItem) {\n return content;\n }\n return html`\n <slot name=\"label\" id=\"label\">\n <span\n aria-hidden=${ifDefined(\n this.appliedLabel ? undefined : 'true'\n )}\n >\n ${this.label}\n </span>\n </slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n label: true,\n };\n const appliedLabel = this.appliedLabel || this.label;\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span\n id=${ifDefined(\n this.value && this.selectedItem ? 'label' : undefined\n )}\n class=${classMap(labelClasses)}\n >\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.value && this.selectedItem\n ? html`\n <span\n aria-hidden=\"true\"\n class=\"visually-hidden\"\n id=\"applied-label\"\n >\n ${appliedLabel}\n <slot name=\"label\"></slot>\n </span>\n `\n : html`\n <span hidden id=\"applied-label\">${appliedLabel}</span>\n `}\n ${this.invalid && !this.pending\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n ${this.pendingStateController.renderPendingState()}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n `,\n ];\n }\n\n applyFocusElementLabel = (\n value: string,\n labelElement: FieldLabel\n ): void => {\n this.appliedLabel = value;\n this.labelAlignment = labelElement.sideAligned ? 'inline' : undefined;\n };\n\n protected hasAccessibleLabel(): boolean {\n const slotContent =\n this.querySelector('[slot=\"label\"]')?.textContent &&\n this.querySelector('[slot=\"label\"]')?.textContent?.trim() !== '';\n const slotAlt =\n this.querySelector('[slot=\"label\"]')?.getAttribute('alt')?.trim() &&\n this.querySelector('[slot=\"label\"]')\n ?.getAttribute('alt')\n ?.trim() !== '';\n return (\n !!this.label ||\n !!this.getAttribute('aria-label') ||\n !!this.getAttribute('aria-labelledby') ||\n !!this.appliedLabel ||\n !!slotContent ||\n !!slotAlt\n );\n }\n\n protected warnNoLabel(): void {\n window.__swc.warn(\n this,\n `<${this.localName}> needs one of the following to be accessible:`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility',\n {\n type: 'accessibility',\n issues: [\n `an <sp-field-label> element with a \\`for\\` attribute referencing the \\`id\\` of the \\`<${this.localName}>\\`, or`,\n 'value supplied to the \"label\" attribute, which will be displayed visually as placeholder text, or',\n 'text content supplied in a <span> with slot=\"label\", which will also be displayed visually as placeholder text.',\n ],\n }\n );\n }\n\n protected renderOverlay(menu: TemplateResult): TemplateResult {\n if (this.strategy?.overlay === undefined) {\n return menu;\n }\n const container = this.renderContainer(menu);\n render(container, this.strategy?.overlay as unknown as HTMLElement, {\n host: this,\n });\n return this.strategy?.overlay as unknown as TemplateResult;\n }\n\n protected get renderDescriptionSlot(): TemplateResult {\n return html`\n <div id=${DESCRIPTION_ID}>\n <slot name=\"description\"></slot>\n </div>\n `;\n }\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n if (this.tooltipEl) {\n this.tooltipEl.disabled = this.open;\n }\n return html`\n <button\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-describedby=\"tooltip ${DESCRIPTION_ID}\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"true\"\n aria-labelledby=\"loader icon label applied-label\"\n id=\"button\"\n class=${ifDefined(\n this.labelAlignment\n ? `label-${this.labelAlignment}`\n : undefined\n )}\n @focus=${this.handleButtonFocus}\n @blur=${this.handleButtonBlur}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </button>\n <slot\n aria-hidden=\"true\"\n name=\"tooltip\"\n id=\"tooltip\"\n @keydown=${this.handleKeydown}\n @slotchange=${this.handleTooltipSlotchange}\n ></slot>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n super.willUpdate(changes);\n if (changes.has('tabIndex') && !!this.tabIndex) {\n this.button.tabIndex = this.tabIndex;\n this.removeAttribute('tabindex');\n }\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n /**\n * Always force `selects` to \"single\" when set.\n *\n * @todo: Add support functionally and visually for \"multiple\"\n */\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n this.close();\n }\n if (changes.has('pending') && this.pending) {\n this.close();\n }\n if (changes.has('value')) {\n // MenuItems update a frame late for <slot> management,\n // await the same here.\n this.shouldScheduleManageSelection();\n }\n // Maybe it's finally time to remove this support?s\n if (!this.hasUpdated) {\n this.deprecatedMenu = this.querySelector(':scope > sp-menu');\n this.deprecatedMenu?.toggleAttribute('ignore', true);\n this.deprecatedMenu?.setAttribute('selects', 'inherit');\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n this.updateComplete.then(async () => {\n // Attributes should be user supplied, making them available before first update.\n // However, `appliesLabel` is applied by external elements that must be update complete as well to be bound appropriately.\n await new Promise((res) => requestAnimationFrame(res));\n await new Promise((res) => requestAnimationFrame(res));\n if (!this.hasAccessibleLabel()) {\n this.warnNoLabel();\n }\n });\n }\n super.update(changes);\n }\n\n protected bindButtonKeydownListener(): void {\n this.button.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (changes.has('open')) {\n this.strategy.open = this.open;\n }\n }\n\n protected override firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n this.bindButtonKeydownListener();\n this.bindEvents();\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n aria-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected renderContainer(menu: TemplateResult): TemplateResult {\n const accessibleMenu = html`\n ${this.dismissHelper} ${menu} ${this.dismissHelper}\n `;\n // @todo: test in mobile\n if (this.isMobile.matches && !this.forcePopover) {\n this.dependencyManager.add('sp-tray');\n import('@spectrum-web-components/tray/sp-tray.js');\n return html`\n <sp-tray\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n >\n ${accessibleMenu}\n </sp-tray>\n `;\n }\n this.dependencyManager.add('sp-popover');\n import('@spectrum-web-components/popover/sp-popover.js');\n return html`\n <sp-popover\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n placement=${this.placement}\n >\n ${accessibleMenu}\n </sp-popover>\n `;\n }\n\n protected hasRenderedOverlay = false;\n\n private onScroll(): void {\n this.dispatchEvent(\n new Event('scroll', {\n cancelable: true,\n composed: true,\n })\n );\n }\n\n protected get renderMenu(): TemplateResult {\n const menu = html`\n <sp-menu\n aria-labelledby=\"applied-label\"\n @change=${this.handleChange}\n id=\"menu\"\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n @scroll=${this.onScroll}\n role=${this.listRole}\n .selects=${this.selects}\n .selected=${this.value ? [this.value] : []}\n size=${this.size}\n @sp-menu-item-keydown=${this.handleEscape}\n @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n >\n <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n </sp-menu>\n `;\n this.hasRenderedOverlay =\n this.hasRenderedOverlay ||\n this.focused ||\n this.open ||\n !!this.deprecatedMenu;\n if (this.hasRenderedOverlay) {\n if (this.dependencyManager.loaded) {\n this.dependencyManager.add('sp-overlay');\n }\n return this.renderOverlay(menu);\n }\n return menu;\n }\n\n /**\n * whether a selection change is already scheduled\n */\n public willManageSelection = false;\n\n /**\n * when the value changes or the menu slot changes, manage the selection on the next frame, if not already scheduled\n * @param event\n */\n protected shouldScheduleManageSelection(event?: Event): void {\n if (\n !this.willManageSelection &&\n (!event ||\n ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n .host === this)\n ) {\n //s set a flag to manage selection on the next frame\n this.willManageSelection = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.manageSelection();\n });\n });\n }\n }\n\n /**\n * when an item is added or updated, manage the selection, if it's not already scheduled\n */\n protected shouldManageSelection(): void {\n if (this.willManageSelection) {\n return;\n }\n this.willManageSelection = true;\n this.manageSelection();\n }\n\n /**\n * updates menu selection based on value\n */\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n await this.optionsMenu.updateComplete;\n if (this.recentlyConnected) {\n // Work around for attach timing differences in Safari and Firefox.\n // Remove when refactoring to Menu passthrough wrapper.\n await new Promise((res) => requestAnimationFrame(() => res(true)));\n this.recentlyConnected = false;\n }\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n this.willManageSelection = false;\n }\n\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.selectionPromise;\n // if (this.overlayElement) {\n // await this.overlayElement.updateComplete;\n // }\n return complete;\n }\n\n private recentlyConnected = false;\n\n private enterKeydownOn: EventTarget | null = null;\n\n protected handleEnterKeydown = (event: KeyboardEvent): void => {\n if (event.key !== 'Enter') {\n return;\n }\n const target = event?.target as MenuItem;\n if (!target.open && target.hasSubmenu) {\n event.preventDefault();\n return;\n }\n\n if (this.enterKeydownOn) {\n event.preventDefault();\n return;\n }\n this.enterKeydownOn = event.target;\n this.addEventListener(\n 'keyup',\n async (keyupEvent: KeyboardEvent) => {\n if (keyupEvent.key !== 'Enter') {\n return;\n }\n this.enterKeydownOn = null;\n },\n { once: true }\n );\n };\n\n public bindEvents(): void {\n this.strategy?.abort();\n if (this.isMobile.matches) {\n this.strategy = new strategies['mobile'](this.button, this);\n } else {\n this.strategy = new strategies['desktop'](this.button, this);\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.updateComplete.then(() => {\n if (!this.tooltipEl?.selfManaged) {\n return;\n }\n const overlayElement = this.tooltipEl.overlayElement;\n if (overlayElement) {\n overlayElement.triggerElement = this.button;\n }\n });\n\n this.recentlyConnected = this.hasUpdated;\n this.addEventListener('focus', this.handleFocus);\n }\n\n public override disconnectedCallback(): void {\n this.close();\n this.strategy?.releaseDescription();\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot description - The description content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override get containerStyles(): StyleInfo {\n const styles = super.containerStyles;\n if (!this.quiet) {\n styles['min-width'] = `${this.offsetWidth}px`;\n }\n return styles;\n }\n\n protected override handleKeydown = (event: KeyboardEvent): void => {\n const { key } = event;\n const handledKeys = [\n 'ArrowUp',\n 'ArrowDown',\n 'ArrowLeft',\n 'ArrowRight',\n 'Enter',\n ' ',\n 'Escape',\n ].includes(key);\n const openKeys = ['ArrowUp', 'ArrowDown', 'Enter', ' '].includes(key);\n this.focused = true;\n if ('Escape' === key) {\n this.handleEscape(event);\n return;\n }\n if (!handledKeys || this.readonly || this.pending) {\n return;\n }\n if (openKeys) {\n this.keyboardOpen();\n event.preventDefault();\n return;\n }\n event.preventDefault();\n const nextItem = this.optionsMenu?.getNeighboringFocusableElement(\n this.selectedItem,\n key === 'ArrowLeft'\n );\n if (!this.value || nextItem !== this.selectedItem) {\n // updates picker text but does not fire change event until action is completed\n if (!!nextItem) this.setValueFromItem(nextItem as MenuItem);\n }\n };\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Picker.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var w=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var i=(p,d,e,t)=>{for(var s=t>1?void 0:t?I(d,e):d,n=p.length-1,
|
|
1
|
+
"use strict";var w=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var i=(p,d,e,t)=>{for(var s=t>1?void 0:t?I(d,e):d,n=p.length-1,l;n>=0;n--)(l=p[n])&&(s=(t?l(d,e,s):l(s))||s);return t&&s&&w(d,e,s),s};import{html as r,nothing as M,render as S,SizedMixin as E,SpectrumElement as y}from"@spectrum-web-components/base";import{classMap as C,ifDefined as u,styleMap as v}from"@spectrum-web-components/base/src/directives.js";import{property as o,query as c,state as h}from"@spectrum-web-components/base/src/decorators.js";import $ from"./picker.css.js";import R from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.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";import{IS_MOBILE as A,MatchMediaController as D}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";import{DependencyManagerController as L}from"@spectrum-web-components/reactive-controllers/src/DependencyManger.js";import{PendingStateController as T}from"@spectrum-web-components/reactive-controllers/src/PendingState.js";import{strategies as g}from"./strategies.js";const x={s:"spectrum-UIIcon-ChevronDown75",m:"spectrum-UIIcon-ChevronDown100",l:"spectrum-UIIcon-ChevronDown200",xl:"spectrum-UIIcon-ChevronDown300"};export const DESCRIPTION_ID="option-picker";export class PickerBase extends E(y,{noDefaultSize:!0}){constructor(){super();this.isMobile=new D(this,A);this.dependencyManager=new L(this);this.deprecatedMenu=null;this.disabled=!1;this.focused=!1;this.invalid=!1;this.forcePopover=!1;this.pending=!1;this.pendingLabel="Pending";this.open=!1;this.readonly=!1;this.selects="single";this.placement="bottom-start";this.quiet=!1;this.value="";this.listRole="listbox";this.itemRole="option";this.handleEscape=e=>{e.key==="Escape"&&(e.stopPropagation(),e.preventDefault(),this.toggle(!1))};this.handleKeydown=e=>{if(this.focused=!0,!!["ArrowUp","ArrowDown","Enter"," ","Escape"].includes(e.key)){if(e.key==="Escape"){this.handleEscape(e);return}e.stopPropagation(),e.preventDefault(),this.keyboardOpen()}};this.handleSlottableRequest=e=>{};this.applyFocusElementLabel=(e,t)=>{this.appliedLabel=e,this.labelAlignment=t.sideAligned?"inline":void 0};this.hasRenderedOverlay=!1;this.willManageSelection=!1;this.selectionPromise=Promise.resolve();this.recentlyConnected=!1;this.enterKeydownOn=null;this.handleEnterKeydown=e=>{if(e.key!=="Enter")return;const t=e==null?void 0:e.target;if(!t.open&&t.hasSubmenu){e.preventDefault();return}if(this.enterKeydownOn){e.preventDefault();return}this.enterKeydownOn=e.target,this.addEventListener("keyup",async s=>{s.key==="Enter"&&(this.enterKeydownOn=null)},{once:!0})};this.pendingStateController=new T(this)}get menuItems(){return this.optionsMenu.childItems}get selfManageFocusElement(){return!0}get selectedItem(){return this._selectedItem}set selectedItem(e){if(this.selectedItemContent=e?e.itemChildren:void 0,e===this.selectedItem)return;const t=this.selectedItem;this._selectedItem=e,this.requestUpdate("selectedItem",t)}get focusElement(){return this.open?this.optionsMenu:this.button}forceFocusVisible(){this.disabled||(this.focused=!0)}click(){this.toggle()}handleButtonClick(){this.disabled||this.toggle()}handleButtonBlur(){this.focused=!1}focus(e){var t;(t=this.focusElement)==null||t.focus(e)}handleHelperFocus(){this.focused=!0,this.button.focus()}handleFocus(){!this.disabled&&this.focusElement&&(this.focused=this.hasVisibleFocusInTree())}handleChange(e){this.strategy&&(this.strategy.preventNextToggle="no");const t=e.target,[s]=t.selectedItems;e.stopPropagation(),e.cancelable?this.setValueFromItem(s,e):(this.open=!1,this.strategy&&(this.strategy.open=!1))}handleButtonFocus(e){var t;(t=this.strategy)==null||t.handleButtonFocus(e)}async keyboardOpen(){this.toggle(!0)}async setValueFromItem(e,t){var a;this.open=!1;const s=this.selectedItem,n=this.value;if(this.selectedItem=e,this.value=(a=e==null?void 0:e.value)!=null?a:"",await this.updateComplete,!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))&&this.selects){t&&t.preventDefault(),this.setMenuItemSelected(this.selectedItem,!1),s&&this.setMenuItemSelected(s,!0),this.selectedItem=s,this.value=n,this.open=!0,this.strategy&&(this.strategy.open=!0);return}else if(!this.selects){this.selectedItem=s,this.value=n;return}s&&this.setMenuItemSelected(s,!1),this.setMenuItemSelected(e,!!this.selects)}setMenuItemSelected(e,t){this.selects!=null&&(e.selected=t)}toggle(e){if(this.readonly||this.pending||this.disabled)return;const t=typeof e!="undefined"?e:!this.open;t&&!this.open&&this.addEventListener("sp-opened",()=>{var s;return(s=this.optionsMenu)==null?void 0:s.focusOnFirstSelectedItem()},{once:!0}),this.open=t,this.strategy&&(this.strategy.open=this.open)}close(){this.readonly||this.strategy&&(this.open=!1,this.strategy.open=!1)}get containerStyles(){return this.isMobile.matches?{"--swc-menu-width":"100%"}:{}}get selectedItemContent(){return this._selectedItemContent||{icon:[],content:[]}}set selectedItemContent(e){if(e===this.selectedItemContent)return;const t=this.selectedItemContent;this._selectedItemContent=e,this.requestUpdate("selectedItemContent",t)}handleTooltipSlotchange(e){this.tooltipEl=e.target.assignedElements()[0]}renderLabelContent(e){return this.value&&this.selectedItem?e:r`
|
|
2
2
|
<slot name="label" id="label">
|
|
3
3
|
<span
|
|
4
4
|
aria-hidden=${u(this.appliedLabel?void 0:"true")}
|
|
@@ -37,14 +37,7 @@
|
|
|
37
37
|
<sp-icon-chevron100
|
|
38
38
|
class="picker ${x[this.size]}"
|
|
39
39
|
></sp-icon-chevron100>
|
|
40
|
-
|
|
41
|
-
aria-hidden="true"
|
|
42
|
-
name="tooltip"
|
|
43
|
-
id="tooltip"
|
|
44
|
-
@keydown=${this.handleKeydown}
|
|
45
|
-
@slotchange=${this.handleTooltipSlotchange}
|
|
46
|
-
></slot>
|
|
47
|
-
`]}hasAccessibleLabel(){var s,n,o,a,m,b,f;const e=((s=this.querySelector('[slot="label"]'))==null?void 0:s.textContent)&&((o=(n=this.querySelector('[slot="label"]'))==null?void 0:n.textContent)==null?void 0:o.trim())!=="",t=((m=(a=this.querySelector('[slot="label"]'))==null?void 0:a.getAttribute("alt"))==null?void 0:m.trim())&&((f=(b=this.querySelector('[slot="label"]'))==null?void 0:b.getAttribute("alt"))==null?void 0:f.trim())!=="";return!!this.label||!!this.getAttribute("aria-label")||!!this.getAttribute("aria-labelledby")||!!this.appliedLabel||!!e||!!t}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(e){var s,n,o;if(((s=this.strategy)==null?void 0:s.overlay)===void 0)return e;const t=this.renderContainer(e);return S(t,(n=this.strategy)==null?void 0:n.overlay,{host:this}),(o=this.strategy)==null?void 0:o.overlay}get renderDescriptionSlot(){return r`
|
|
40
|
+
`]}hasAccessibleLabel(){var s,n,l,a,m,b,f;const e=((s=this.querySelector('[slot="label"]'))==null?void 0:s.textContent)&&((l=(n=this.querySelector('[slot="label"]'))==null?void 0:n.textContent)==null?void 0:l.trim())!=="",t=((m=(a=this.querySelector('[slot="label"]'))==null?void 0:a.getAttribute("alt"))==null?void 0:m.trim())&&((f=(b=this.querySelector('[slot="label"]'))==null?void 0:b.getAttribute("alt"))==null?void 0:f.trim())!=="";return!!this.label||!!this.getAttribute("aria-label")||!!this.getAttribute("aria-labelledby")||!!this.appliedLabel||!!e||!!t}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(e){var s,n,l;if(((s=this.strategy)==null?void 0:s.overlay)===void 0)return e;const t=this.renderContainer(e);return S(t,(n=this.strategy)==null?void 0:n.overlay,{host:this}),(l=this.strategy)==null?void 0:l.overlay}get renderDescriptionSlot(){return r`
|
|
48
41
|
<div id=${DESCRIPTION_ID}>
|
|
49
42
|
<slot name="description"></slot>
|
|
50
43
|
</div>
|
|
@@ -64,6 +57,13 @@
|
|
|
64
57
|
>
|
|
65
58
|
${this.buttonContent}
|
|
66
59
|
</button>
|
|
60
|
+
<slot
|
|
61
|
+
aria-hidden="true"
|
|
62
|
+
name="tooltip"
|
|
63
|
+
id="tooltip"
|
|
64
|
+
@keydown=${this.handleKeydown}
|
|
65
|
+
@slotchange=${this.handleTooltipSlotchange}
|
|
66
|
+
></slot>
|
|
67
67
|
${this.renderMenu} ${this.renderDescriptionSlot}
|
|
68
68
|
`}willUpdate(e){super.willUpdate(e),e.has("tabIndex")&&this.tabIndex&&(this.button.tabIndex=this.tabIndex,this.removeAttribute("tabindex"))}update(e){var t,s;this.selects&&(this.selects="single"),e.has("disabled")&&this.disabled&&this.close(),e.has("pending")&&this.pending&&this.close(),e.has("value")&&this.shouldScheduleManageSelection(),this.hasUpdated||(this.deprecatedMenu=this.querySelector(":scope > sp-menu"),(t=this.deprecatedMenu)==null||t.toggleAttribute("ignore",!0),(s=this.deprecatedMenu)==null||s.setAttribute("selects","inherit")),super.update(e)}bindButtonKeydownListener(){this.button.addEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("open")&&(this.strategy.open=this.open)}firstUpdated(e){super.firstUpdated(e),this.bindButtonKeydownListener(),this.bindEvents()}get dismissHelper(){return r`
|
|
69
69
|
<div class="visually-hidden">
|
|
@@ -108,5 +108,5 @@
|
|
|
108
108
|
>
|
|
109
109
|
<slot @slotchange=${this.shouldScheduleManageSelection}></slot>
|
|
110
110
|
</sp-menu>
|
|
111
|
-
`;return this.hasRenderedOverlay=this.hasRenderedOverlay||this.focused||this.open||!!this.deprecatedMenu,this.hasRenderedOverlay?(this.dependencyManager.loaded&&this.dependencyManager.add("sp-overlay"),this.renderOverlay(e)):e}shouldScheduleManageSelection(e){!this.willManageSelection&&(!e||e.target.getRootNode().host===this)&&(this.willManageSelection=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.manageSelection()})}))}shouldManageSelection(){this.willManageSelection||(this.willManageSelection=!0,this.manageSelection())}async manageSelection(){if(this.selects==null)return;this.selectionPromise=new Promise(t=>this.selectionResolver=t);let e;await this.optionsMenu.updateComplete,this.recentlyConnected&&(await new Promise(t=>requestAnimationFrame(()=>t(!0))),this.recentlyConnected=!1),this.menuItems.forEach(t=>{this.value===t.value&&!t.disabled?e=t:t.selected=!1}),e?(e.selected=!!this.selects,this.selectedItem=e):(this.value="",this.selectedItem=void 0),this.open&&(await this.optionsMenu.updateComplete,this.optionsMenu.updateSelectedItemIndex()),this.selectionResolver(),this.willManageSelection=!1}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.selectionPromise,e}bindEvents(){var e;(e=this.strategy)==null||e.abort(),this.isMobile.matches?this.strategy=new g.mobile(this.button,this):this.strategy=new g.desktop(this.button,this)}connectedCallback(){super.connectedCallback(),this.recentlyConnected=this.hasUpdated,this.addEventListener("focus",this.handleFocus)}disconnectedCallback(){var e;this.close(),(e=this.strategy)==null||e.releaseDescription(),super.disconnectedCallback()}}PickerBase.shadowRootOptions={...y.shadowRootOptions,delegatesFocus:!0},i([h()],PickerBase.prototype,"appliedLabel",2),i([c("#button")],PickerBase.prototype,"button",2),i([
|
|
111
|
+
`;return this.hasRenderedOverlay=this.hasRenderedOverlay||this.focused||this.open||!!this.deprecatedMenu,this.hasRenderedOverlay?(this.dependencyManager.loaded&&this.dependencyManager.add("sp-overlay"),this.renderOverlay(e)):e}shouldScheduleManageSelection(e){!this.willManageSelection&&(!e||e.target.getRootNode().host===this)&&(this.willManageSelection=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.manageSelection()})}))}shouldManageSelection(){this.willManageSelection||(this.willManageSelection=!0,this.manageSelection())}async manageSelection(){if(this.selects==null)return;this.selectionPromise=new Promise(t=>this.selectionResolver=t);let e;await this.optionsMenu.updateComplete,this.recentlyConnected&&(await new Promise(t=>requestAnimationFrame(()=>t(!0))),this.recentlyConnected=!1),this.menuItems.forEach(t=>{this.value===t.value&&!t.disabled?e=t:t.selected=!1}),e?(e.selected=!!this.selects,this.selectedItem=e):(this.value="",this.selectedItem=void 0),this.open&&(await this.optionsMenu.updateComplete,this.optionsMenu.updateSelectedItemIndex()),this.selectionResolver(),this.willManageSelection=!1}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.selectionPromise,e}bindEvents(){var e;(e=this.strategy)==null||e.abort(),this.isMobile.matches?this.strategy=new g.mobile(this.button,this):this.strategy=new g.desktop(this.button,this)}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{var t;if(!((t=this.tooltipEl)!=null&&t.selfManaged))return;const e=this.tooltipEl.overlayElement;e&&(e.triggerElement=this.button)}),this.recentlyConnected=this.hasUpdated,this.addEventListener("focus",this.handleFocus)}disconnectedCallback(){var e;this.close(),(e=this.strategy)==null||e.releaseDescription(),super.disconnectedCallback()}}PickerBase.shadowRootOptions={...y.shadowRootOptions,delegatesFocus:!0},i([h()],PickerBase.prototype,"appliedLabel",2),i([c("#button")],PickerBase.prototype,"button",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"disabled",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"focused",2),i([o({type:String,reflect:!0})],PickerBase.prototype,"icons",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"invalid",2),i([o({type:Boolean,reflect:!0,attribute:"force-popover"})],PickerBase.prototype,"forcePopover",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"pending",2),i([o({type:String,attribute:"pending-label"})],PickerBase.prototype,"pendingLabel",2),i([o()],PickerBase.prototype,"label",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"open",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"readonly",2),i([h()],PickerBase.prototype,"labelAlignment",2),i([c("sp-menu")],PickerBase.prototype,"optionsMenu",2),i([c("sp-overlay")],PickerBase.prototype,"overlayElement",2),i([o()],PickerBase.prototype,"placement",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"quiet",2),i([o({type:String})],PickerBase.prototype,"value",2),i([o({attribute:!1})],PickerBase.prototype,"selectedItem",1),i([h()],PickerBase.prototype,"selectedItemContent",1);export class Picker extends PickerBase{constructor(){super(...arguments);this.handleKeydown=e=>{var a;const{key:t}=e,s=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Enter"," ","Escape"].includes(t),n=["ArrowUp","ArrowDown","Enter"," "].includes(t);if(this.focused=!0,t==="Escape"){this.handleEscape(e);return}if(!s||this.readonly||this.pending)return;if(n){this.keyboardOpen(),e.preventDefault();return}e.preventDefault();const l=(a=this.optionsMenu)==null?void 0:a.getNeighboringFocusableElement(this.selectedItem,t==="ArrowLeft");(!this.value||l!==this.selectedItem)&&l&&this.setValueFromItem(l)}}static get styles(){return[$,R]}get containerStyles(){const e=super.containerStyles;return this.quiet||(e["min-width"]=`${this.offsetWidth}px`),e}}
|
|
112
112
|
//# sourceMappingURL=Picker.js.map
|
package/src/Picker.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Picker.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n nothing,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport type { Tooltip } from '@spectrum-web-components/tooltip';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemChildren,\n} from '@spectrum-web-components/menu';\n\nimport type { MenuItemKeydownEvent } from '@spectrum-web-components/menu';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';\nimport { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport type { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\nimport type { FieldLabel } from '@spectrum-web-components/field-label';\n\nimport { DesktopController } from './DesktopController.js';\nimport { MobileController } from './MobileController.js';\nimport { strategies } from './strategies.js';\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport const DESCRIPTION_ID = 'option-picker';\nexport class PickerBase extends SizedMixin(SpectrumElement, {\n noDefaultSize: true,\n}) {\n static override shadowRootOptions = {\n ...SpectrumElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n public isMobile = new MatchMediaController(this, IS_MOBILE);\n\n public strategy!: DesktopController | MobileController;\n\n @state()\n appliedLabel?: string;\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public dependencyManager = new DependencyManagerController(this);\n\n private deprecatedMenu: Menu | null = null;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n /**\n * Forces the Picker to render as a popover on mobile instead of a tray.\n *\n * @memberof PickerBase\n */\n @property({ type: Boolean, reflect: true, attribute: 'force-popover' })\n public forcePopover = false;\n\n /** Whether the items are currently loading. */\n @property({ type: Boolean, reflect: true })\n public pending = false;\n\n /** Defines a string value that labels the Picker while it is in pending state. */\n @property({ type: String, attribute: 'pending-label' })\n public pendingLabel = 'Pending';\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public selects: undefined | 'single' = 'single';\n\n @state()\n public labelAlignment?: 'inline';\n\n protected get menuItems(): MenuItem[] {\n return this.optionsMenu.childItems;\n }\n\n @query('sp-menu')\n public optionsMenu!: Menu;\n\n /**\n * @deprecated\n * */\n public get selfManageFocusElement(): boolean {\n return true;\n }\n\n @query('sp-overlay')\n public overlayElement!: Overlay;\n\n protected tooltipEl?: Tooltip;\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public get selectedItem(): MenuItem | undefined {\n return this._selectedItem;\n }\n\n public pendingStateController: PendingStateController<this>;\n\n /**\n * Initializes the `PendingStateController` for the Picker component.\n * The `PendingStateController` manages the pending state of the Picker.\n */\n constructor() {\n super();\n this.pendingStateController = new PendingStateController(this);\n }\n\n public set selectedItem(selectedItem: MenuItem | undefined) {\n this.selectedItemContent = selectedItem\n ? selectedItem.itemChildren\n : undefined;\n\n if (selectedItem === this.selectedItem) return;\n const oldSelectedItem = this.selectedItem;\n this._selectedItem = selectedItem;\n this.requestUpdate('selectedItem', oldSelectedItem);\n }\n\n _selectedItem?: MenuItem;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n if (this.disabled) {\n return;\n }\n\n this.focused = true;\n }\n\n // handled by interaction controller, desktop or mobile; this is only called with a programmatic this.click()\n public override click(): void {\n this.toggle();\n }\n\n // pointer events handled by interaction controller, desktop or mobile; this is only called with a programmatic this.button.click()\n public handleButtonClick(): void {\n if (this.disabled) {\n return;\n }\n this.toggle();\n }\n\n public handleButtonBlur(): void {\n this.focused = false;\n }\n\n public override focus(options?: FocusOptions): void {\n this.focusElement?.focus(options);\n }\n /**\n * @deprecated - Use `focus` instead.\n */\n public handleHelperFocus(): void {\n // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public handleFocus(): void {\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public handleChange(event: Event): void {\n if (this.strategy) {\n this.strategy.preventNextToggle = 'no';\n }\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n event.stopPropagation();\n if (event.cancelable) {\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n if (this.strategy) {\n this.strategy.open = false;\n }\n }\n }\n\n public handleButtonFocus(event: FocusEvent): void {\n this.strategy?.handleButtonFocus(event);\n }\n\n protected handleEscape = (\n event: MenuItemKeydownEvent | KeyboardEvent\n ): void => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n event.preventDefault();\n this.toggle(false);\n }\n };\n\n protected handleKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (\n !['ArrowUp', 'ArrowDown', 'Enter', ' ', 'Escape'].includes(\n event.key\n )\n ) {\n return;\n }\n if (event.key === 'Escape') {\n this.handleEscape(event);\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n this.keyboardOpen();\n };\n\n protected async keyboardOpen(): Promise<void> {\n this.toggle(true);\n }\n\n protected async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n this.open = false;\n // should always close when \"setting\" a value\n if (this.strategy) {\n this.strategy.open = false;\n }\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n\n // Set a value.\n this.selectedItem = item;\n this.value = item?.value ?? '';\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n // Allow it to be prevented.\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault && this.selects) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n if (this.strategy) {\n this.strategy.open = true;\n }\n return;\n } else if (!this.selects) {\n // Unset the value if not carrying a selection\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly || this.pending || this.disabled) {\n return;\n }\n const open = typeof target !== 'undefined' ? target : !this.open;\n if (open && !this.open)\n this.addEventListener(\n 'sp-opened',\n () => this.optionsMenu?.focusOnFirstSelectedItem(),\n {\n once: true,\n }\n );\n\n this.open = open;\n if (this.strategy) {\n this.strategy.open = this.open;\n }\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n if (this.strategy) {\n this.open = false;\n this.strategy.open = false;\n }\n }\n\n protected get containerStyles(): StyleInfo {\n // @todo: test in mobile\n /* c8 ignore next 5 */\n if (this.isMobile.matches) {\n return {\n '--swc-menu-width': '100%',\n };\n }\n return {};\n }\n\n @state()\n protected get selectedItemContent(): MenuItemChildren {\n return this._selectedItemContent || { icon: [], content: [] };\n }\n\n protected set selectedItemContent(\n selectedItemContent: MenuItemChildren | undefined\n ) {\n if (selectedItemContent === this.selectedItemContent) return;\n\n const oldContent = this.selectedItemContent;\n this._selectedItemContent = selectedItemContent;\n this.requestUpdate('selectedItemContent', oldContent);\n }\n\n _selectedItemContent?: MenuItemChildren;\n\n protected handleTooltipSlotchange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.tooltipEl = event.target.assignedElements()[0] as\n | Tooltip\n | undefined;\n }\n\n public handleSlottableRequest = (_event: SlottableRequestEvent): void => {};\n\n protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n if (this.value && this.selectedItem) {\n return content;\n }\n return html`\n <slot name=\"label\" id=\"label\">\n <span\n aria-hidden=${ifDefined(\n this.appliedLabel ? undefined : 'true'\n )}\n >\n ${this.label}\n </span>\n </slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n label: true,\n };\n const appliedLabel = this.appliedLabel || this.label;\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span\n id=${ifDefined(\n this.value && this.selectedItem ? 'label' : undefined\n )}\n class=${classMap(labelClasses)}\n >\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.value && this.selectedItem\n ? html`\n <span\n aria-hidden=\"true\"\n class=\"visually-hidden\"\n id=\"applied-label\"\n >\n ${appliedLabel}\n <slot name=\"label\"></slot>\n </span>\n `\n : html`\n <span hidden id=\"applied-label\">${appliedLabel}</span>\n `}\n ${this.invalid && !this.pending\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n ${this.pendingStateController.renderPendingState()}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n <slot\n aria-hidden=\"true\"\n name=\"tooltip\"\n id=\"tooltip\"\n @keydown=${this.handleKeydown}\n @slotchange=${this.handleTooltipSlotchange}\n ></slot>\n `,\n ];\n }\n\n applyFocusElementLabel = (\n value: string,\n labelElement: FieldLabel\n ): void => {\n this.appliedLabel = value;\n this.labelAlignment = labelElement.sideAligned ? 'inline' : undefined;\n };\n\n protected hasAccessibleLabel(): boolean {\n const slotContent =\n this.querySelector('[slot=\"label\"]')?.textContent &&\n this.querySelector('[slot=\"label\"]')?.textContent?.trim() !== '';\n const slotAlt =\n this.querySelector('[slot=\"label\"]')?.getAttribute('alt')?.trim() &&\n this.querySelector('[slot=\"label\"]')\n ?.getAttribute('alt')\n ?.trim() !== '';\n return (\n !!this.label ||\n !!this.getAttribute('aria-label') ||\n !!this.getAttribute('aria-labelledby') ||\n !!this.appliedLabel ||\n !!slotContent ||\n !!slotAlt\n );\n }\n\n protected warnNoLabel(): void {\n window.__swc.warn(\n this,\n `<${this.localName}> needs one of the following to be accessible:`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility',\n {\n type: 'accessibility',\n issues: [\n `an <sp-field-label> element with a \\`for\\` attribute referencing the \\`id\\` of the \\`<${this.localName}>\\`, or`,\n 'value supplied to the \"label\" attribute, which will be displayed visually as placeholder text, or',\n 'text content supplied in a <span> with slot=\"label\", which will also be displayed visually as placeholder text.',\n ],\n }\n );\n }\n\n protected renderOverlay(menu: TemplateResult): TemplateResult {\n if (this.strategy?.overlay === undefined) {\n return menu;\n }\n const container = this.renderContainer(menu);\n render(container, this.strategy?.overlay as unknown as HTMLElement, {\n host: this,\n });\n return this.strategy?.overlay as unknown as TemplateResult;\n }\n\n protected get renderDescriptionSlot(): TemplateResult {\n return html`\n <div id=${DESCRIPTION_ID}>\n <slot name=\"description\"></slot>\n </div>\n `;\n }\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n if (this.tooltipEl) {\n this.tooltipEl.disabled = this.open;\n }\n return html`\n <button\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-describedby=\"tooltip ${DESCRIPTION_ID}\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"true\"\n aria-labelledby=\"loader icon label applied-label\"\n id=\"button\"\n class=${ifDefined(\n this.labelAlignment\n ? `label-${this.labelAlignment}`\n : undefined\n )}\n @focus=${this.handleButtonFocus}\n @blur=${this.handleButtonBlur}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </button>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n super.willUpdate(changes);\n if (changes.has('tabIndex') && !!this.tabIndex) {\n this.button.tabIndex = this.tabIndex;\n this.removeAttribute('tabindex');\n }\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n /**\n * Always force `selects` to \"single\" when set.\n *\n * @todo: Add support functionally and visually for \"multiple\"\n */\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n this.close();\n }\n if (changes.has('pending') && this.pending) {\n this.close();\n }\n if (changes.has('value')) {\n // MenuItems update a frame late for <slot> management,\n // await the same here.\n this.shouldScheduleManageSelection();\n }\n // Maybe it's finally time to remove this support?s\n if (!this.hasUpdated) {\n this.deprecatedMenu = this.querySelector(':scope > sp-menu');\n this.deprecatedMenu?.toggleAttribute('ignore', true);\n this.deprecatedMenu?.setAttribute('selects', 'inherit');\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n this.updateComplete.then(async () => {\n // Attributes should be user supplied, making them available before first update.\n // However, `appliesLabel` is applied by external elements that must be update complete as well to be bound appropriately.\n await new Promise((res) => requestAnimationFrame(res));\n await new Promise((res) => requestAnimationFrame(res));\n if (!this.hasAccessibleLabel()) {\n this.warnNoLabel();\n }\n });\n }\n super.update(changes);\n }\n\n protected bindButtonKeydownListener(): void {\n this.button.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (changes.has('open')) {\n this.strategy.open = this.open;\n }\n }\n\n protected override firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n this.bindButtonKeydownListener();\n this.bindEvents();\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n aria-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected renderContainer(menu: TemplateResult): TemplateResult {\n const accessibleMenu = html`\n ${this.dismissHelper} ${menu} ${this.dismissHelper}\n `;\n // @todo: test in mobile\n if (this.isMobile.matches && !this.forcePopover) {\n this.dependencyManager.add('sp-tray');\n import('@spectrum-web-components/tray/sp-tray.js');\n return html`\n <sp-tray\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n >\n ${accessibleMenu}\n </sp-tray>\n `;\n }\n this.dependencyManager.add('sp-popover');\n import('@spectrum-web-components/popover/sp-popover.js');\n return html`\n <sp-popover\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n placement=${this.placement}\n >\n ${accessibleMenu}\n </sp-popover>\n `;\n }\n\n protected hasRenderedOverlay = false;\n\n private onScroll(): void {\n this.dispatchEvent(\n new Event('scroll', {\n cancelable: true,\n composed: true,\n })\n );\n }\n\n protected get renderMenu(): TemplateResult {\n const menu = html`\n <sp-menu\n aria-labelledby=\"applied-label\"\n @change=${this.handleChange}\n id=\"menu\"\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n @scroll=${this.onScroll}\n role=${this.listRole}\n .selects=${this.selects}\n .selected=${this.value ? [this.value] : []}\n size=${this.size}\n @sp-menu-item-keydown=${this.handleEscape}\n @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n >\n <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n </sp-menu>\n `;\n this.hasRenderedOverlay =\n this.hasRenderedOverlay ||\n this.focused ||\n this.open ||\n !!this.deprecatedMenu;\n if (this.hasRenderedOverlay) {\n if (this.dependencyManager.loaded) {\n this.dependencyManager.add('sp-overlay');\n }\n return this.renderOverlay(menu);\n }\n return menu;\n }\n\n /**\n * whether a selection change is already scheduled\n */\n public willManageSelection = false;\n\n /**\n * when the value changes or the menu slot changes, manage the selection on the next frame, if not already scheduled\n * @param event\n */\n protected shouldScheduleManageSelection(event?: Event): void {\n if (\n !this.willManageSelection &&\n (!event ||\n ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n .host === this)\n ) {\n //s set a flag to manage selection on the next frame\n this.willManageSelection = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.manageSelection();\n });\n });\n }\n }\n\n /**\n * when an item is added or updated, manage the selection, if it's not already scheduled\n */\n protected shouldManageSelection(): void {\n if (this.willManageSelection) {\n return;\n }\n this.willManageSelection = true;\n this.manageSelection();\n }\n\n /**\n * updates menu selection based on value\n */\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n await this.optionsMenu.updateComplete;\n if (this.recentlyConnected) {\n // Work around for attach timing differences in Safari and Firefox.\n // Remove when refactoring to Menu passthrough wrapper.\n await new Promise((res) => requestAnimationFrame(() => res(true)));\n this.recentlyConnected = false;\n }\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n this.willManageSelection = false;\n }\n\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.selectionPromise;\n // if (this.overlayElement) {\n // await this.overlayElement.updateComplete;\n // }\n return complete;\n }\n\n private recentlyConnected = false;\n\n private enterKeydownOn: EventTarget | null = null;\n\n protected handleEnterKeydown = (event: KeyboardEvent): void => {\n if (event.key !== 'Enter') {\n return;\n }\n const target = event?.target as MenuItem;\n if (!target.open && target.hasSubmenu) {\n event.preventDefault();\n return;\n }\n\n if (this.enterKeydownOn) {\n event.preventDefault();\n return;\n }\n this.enterKeydownOn = event.target;\n this.addEventListener(\n 'keyup',\n async (keyupEvent: KeyboardEvent) => {\n if (keyupEvent.key !== 'Enter') {\n return;\n }\n this.enterKeydownOn = null;\n },\n { once: true }\n );\n };\n\n public bindEvents(): void {\n this.strategy?.abort();\n if (this.isMobile.matches) {\n this.strategy = new strategies['mobile'](this.button, this);\n } else {\n this.strategy = new strategies['desktop'](this.button, this);\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.recentlyConnected = this.hasUpdated;\n this.addEventListener('focus', this.handleFocus);\n }\n\n public override disconnectedCallback(): void {\n this.close();\n this.strategy?.releaseDescription();\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot description - The description content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override get containerStyles(): StyleInfo {\n const styles = super.containerStyles;\n if (!this.quiet) {\n styles['min-width'] = `${this.offsetWidth}px`;\n }\n return styles;\n }\n\n protected override handleKeydown = (event: KeyboardEvent): void => {\n const { key } = event;\n const handledKeys = [\n 'ArrowUp',\n 'ArrowDown',\n 'ArrowLeft',\n 'ArrowRight',\n 'Enter',\n ' ',\n 'Escape',\n ].includes(key);\n const openKeys = ['ArrowUp', 'ArrowDown', 'Enter', ' '].includes(key);\n this.focused = true;\n if ('Escape' === key) {\n this.handleEscape(event);\n return;\n }\n if (!handledKeys || this.readonly || this.pending) {\n return;\n }\n if (openKeys) {\n this.keyboardOpen();\n event.preventDefault();\n return;\n }\n event.preventDefault();\n const nextItem = this.optionsMenu?.getNeighboringFocusableElement(\n this.selectedItem,\n key === 'ArrowLeft'\n );\n if (!this.value || nextItem !== this.selectedItem) {\n // updates picker text but does not fire change event until action is completed\n if (!!nextItem) this.setValueFromItem(nextItem as MenuItem);\n }\n };\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["html", "nothing", "render", "SizedMixin", "SpectrumElement", "classMap", "ifDefined", "styleMap", "property", "query", "state", "pickerStyles", "chevronStyles", "IS_MOBILE", "MatchMediaController", "DependencyManagerController", "PendingStateController", "strategies", "chevronClass", "event", "_event", "value", "labelElement", "target", "keyupEvent", "selectedItem", "oldSelectedItem", "options", "_a", "selected", "item", "menuChangeEvent", "oldValue", "open", "selectedItemContent", "oldContent", "content", "labelClasses", "appliedLabel", "_b", "_c", "_d", "_e", "_f", "_g", "slotContent", "slotAlt", "menu", "container", "changes", "accessibleMenu", "res", "complete", "__decorateClass", "key", "handledKeys", "openKeys", "nextItem", "styles"]
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n nothing,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport type { Tooltip } from '@spectrum-web-components/tooltip';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemChildren,\n} from '@spectrum-web-components/menu';\n\nimport type { MenuItemKeydownEvent } from '@spectrum-web-components/menu';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';\nimport { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport type { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\nimport type { FieldLabel } from '@spectrum-web-components/field-label';\n\nimport { DesktopController } from './DesktopController.js';\nimport { MobileController } from './MobileController.js';\nimport { strategies } from './strategies.js';\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport const DESCRIPTION_ID = 'option-picker';\n\n/**\n * @element sp-picker\n * @slot label - The placeholder content for the Picker\n * @slot description - The description content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n */\nexport class PickerBase extends SizedMixin(SpectrumElement, {\n noDefaultSize: true,\n}) {\n static override shadowRootOptions = {\n ...SpectrumElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n public isMobile = new MatchMediaController(this, IS_MOBILE);\n\n public strategy!: DesktopController | MobileController;\n\n @state()\n appliedLabel?: string;\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public dependencyManager = new DependencyManagerController(this);\n\n private deprecatedMenu: Menu | null = null;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n /**\n * Forces the Picker to render as a popover on mobile instead of a tray.\n *\n * @memberof PickerBase\n */\n @property({ type: Boolean, reflect: true, attribute: 'force-popover' })\n public forcePopover = false;\n\n /** Whether the items are currently loading. */\n @property({ type: Boolean, reflect: true })\n public pending = false;\n\n /** Defines a string value that labels the Picker while it is in pending state. */\n @property({ type: String, attribute: 'pending-label' })\n public pendingLabel = 'Pending';\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public selects: undefined | 'single' = 'single';\n\n @state()\n public labelAlignment?: 'inline';\n\n protected get menuItems(): MenuItem[] {\n return this.optionsMenu.childItems;\n }\n\n @query('sp-menu')\n public optionsMenu!: Menu;\n\n /**\n * @deprecated\n * */\n public get selfManageFocusElement(): boolean {\n return true;\n }\n\n @query('sp-overlay')\n public overlayElement!: Overlay;\n\n protected tooltipEl?: Tooltip;\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public get selectedItem(): MenuItem | undefined {\n return this._selectedItem;\n }\n\n public pendingStateController: PendingStateController<this>;\n\n /**\n * Initializes the `PendingStateController` for the Picker component.\n * The `PendingStateController` manages the pending state of the Picker.\n */\n constructor() {\n super();\n this.pendingStateController = new PendingStateController(this);\n }\n\n public set selectedItem(selectedItem: MenuItem | undefined) {\n this.selectedItemContent = selectedItem\n ? selectedItem.itemChildren\n : undefined;\n\n if (selectedItem === this.selectedItem) return;\n const oldSelectedItem = this.selectedItem;\n this._selectedItem = selectedItem;\n this.requestUpdate('selectedItem', oldSelectedItem);\n }\n\n _selectedItem?: MenuItem;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n if (this.disabled) {\n return;\n }\n\n this.focused = true;\n }\n\n // handled by interaction controller, desktop or mobile; this is only called with a programmatic this.click()\n public override click(): void {\n this.toggle();\n }\n\n // pointer events handled by interaction controller, desktop or mobile; this is only called with a programmatic this.button.click()\n public handleButtonClick(): void {\n if (this.disabled) {\n return;\n }\n this.toggle();\n }\n\n public handleButtonBlur(): void {\n this.focused = false;\n }\n\n public override focus(options?: FocusOptions): void {\n this.focusElement?.focus(options);\n }\n /**\n * @deprecated - Use `focus` instead.\n */\n public handleHelperFocus(): void {\n // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public handleFocus(): void {\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public handleChange(event: Event): void {\n if (this.strategy) {\n this.strategy.preventNextToggle = 'no';\n }\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n event.stopPropagation();\n if (event.cancelable) {\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n if (this.strategy) {\n this.strategy.open = false;\n }\n }\n }\n\n public handleButtonFocus(event: FocusEvent): void {\n this.strategy?.handleButtonFocus(event);\n }\n\n protected handleEscape = (\n event: MenuItemKeydownEvent | KeyboardEvent\n ): void => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n event.preventDefault();\n this.toggle(false);\n }\n };\n\n protected handleKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (\n !['ArrowUp', 'ArrowDown', 'Enter', ' ', 'Escape'].includes(\n event.key\n )\n ) {\n return;\n }\n if (event.key === 'Escape') {\n this.handleEscape(event);\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n this.keyboardOpen();\n };\n\n protected async keyboardOpen(): Promise<void> {\n this.toggle(true);\n }\n\n protected async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n this.open = false;\n // should always close when \"setting\" a value\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n\n // Set a value.\n this.selectedItem = item;\n this.value = item?.value ?? '';\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n // Allow it to be prevented.\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault && this.selects) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n if (this.strategy) {\n this.strategy.open = true;\n }\n return;\n } else if (!this.selects) {\n // Unset the value if not carrying a selection\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly || this.pending || this.disabled) {\n return;\n }\n const open = typeof target !== 'undefined' ? target : !this.open;\n if (open && !this.open)\n this.addEventListener(\n 'sp-opened',\n () => this.optionsMenu?.focusOnFirstSelectedItem(),\n {\n once: true,\n }\n );\n\n this.open = open;\n if (this.strategy) {\n this.strategy.open = this.open;\n }\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n if (this.strategy) {\n this.open = false;\n this.strategy.open = false;\n }\n }\n\n protected get containerStyles(): StyleInfo {\n // @todo: test in mobile\n /* c8 ignore next 5 */\n if (this.isMobile.matches) {\n return {\n '--swc-menu-width': '100%',\n };\n }\n return {};\n }\n\n @state()\n protected get selectedItemContent(): MenuItemChildren {\n return this._selectedItemContent || { icon: [], content: [] };\n }\n\n protected set selectedItemContent(\n selectedItemContent: MenuItemChildren | undefined\n ) {\n if (selectedItemContent === this.selectedItemContent) return;\n\n const oldContent = this.selectedItemContent;\n this._selectedItemContent = selectedItemContent;\n this.requestUpdate('selectedItemContent', oldContent);\n }\n\n _selectedItemContent?: MenuItemChildren;\n\n protected handleTooltipSlotchange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.tooltipEl = event.target.assignedElements()[0] as\n | Tooltip\n | undefined;\n }\n\n public handleSlottableRequest = (_event: SlottableRequestEvent): void => {};\n\n protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n if (this.value && this.selectedItem) {\n return content;\n }\n return html`\n <slot name=\"label\" id=\"label\">\n <span\n aria-hidden=${ifDefined(\n this.appliedLabel ? undefined : 'true'\n )}\n >\n ${this.label}\n </span>\n </slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n label: true,\n };\n const appliedLabel = this.appliedLabel || this.label;\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span\n id=${ifDefined(\n this.value && this.selectedItem ? 'label' : undefined\n )}\n class=${classMap(labelClasses)}\n >\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.value && this.selectedItem\n ? html`\n <span\n aria-hidden=\"true\"\n class=\"visually-hidden\"\n id=\"applied-label\"\n >\n ${appliedLabel}\n <slot name=\"label\"></slot>\n </span>\n `\n : html`\n <span hidden id=\"applied-label\">${appliedLabel}</span>\n `}\n ${this.invalid && !this.pending\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n ${this.pendingStateController.renderPendingState()}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n `,\n ];\n }\n\n applyFocusElementLabel = (\n value: string,\n labelElement: FieldLabel\n ): void => {\n this.appliedLabel = value;\n this.labelAlignment = labelElement.sideAligned ? 'inline' : undefined;\n };\n\n protected hasAccessibleLabel(): boolean {\n const slotContent =\n this.querySelector('[slot=\"label\"]')?.textContent &&\n this.querySelector('[slot=\"label\"]')?.textContent?.trim() !== '';\n const slotAlt =\n this.querySelector('[slot=\"label\"]')?.getAttribute('alt')?.trim() &&\n this.querySelector('[slot=\"label\"]')\n ?.getAttribute('alt')\n ?.trim() !== '';\n return (\n !!this.label ||\n !!this.getAttribute('aria-label') ||\n !!this.getAttribute('aria-labelledby') ||\n !!this.appliedLabel ||\n !!slotContent ||\n !!slotAlt\n );\n }\n\n protected warnNoLabel(): void {\n window.__swc.warn(\n this,\n `<${this.localName}> needs one of the following to be accessible:`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility',\n {\n type: 'accessibility',\n issues: [\n `an <sp-field-label> element with a \\`for\\` attribute referencing the \\`id\\` of the \\`<${this.localName}>\\`, or`,\n 'value supplied to the \"label\" attribute, which will be displayed visually as placeholder text, or',\n 'text content supplied in a <span> with slot=\"label\", which will also be displayed visually as placeholder text.',\n ],\n }\n );\n }\n\n protected renderOverlay(menu: TemplateResult): TemplateResult {\n if (this.strategy?.overlay === undefined) {\n return menu;\n }\n const container = this.renderContainer(menu);\n render(container, this.strategy?.overlay as unknown as HTMLElement, {\n host: this,\n });\n return this.strategy?.overlay as unknown as TemplateResult;\n }\n\n protected get renderDescriptionSlot(): TemplateResult {\n return html`\n <div id=${DESCRIPTION_ID}>\n <slot name=\"description\"></slot>\n </div>\n `;\n }\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n if (this.tooltipEl) {\n this.tooltipEl.disabled = this.open;\n }\n return html`\n <button\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-describedby=\"tooltip ${DESCRIPTION_ID}\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"true\"\n aria-labelledby=\"loader icon label applied-label\"\n id=\"button\"\n class=${ifDefined(\n this.labelAlignment\n ? `label-${this.labelAlignment}`\n : undefined\n )}\n @focus=${this.handleButtonFocus}\n @blur=${this.handleButtonBlur}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </button>\n <slot\n aria-hidden=\"true\"\n name=\"tooltip\"\n id=\"tooltip\"\n @keydown=${this.handleKeydown}\n @slotchange=${this.handleTooltipSlotchange}\n ></slot>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n super.willUpdate(changes);\n if (changes.has('tabIndex') && !!this.tabIndex) {\n this.button.tabIndex = this.tabIndex;\n this.removeAttribute('tabindex');\n }\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n /**\n * Always force `selects` to \"single\" when set.\n *\n * @todo: Add support functionally and visually for \"multiple\"\n */\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n this.close();\n }\n if (changes.has('pending') && this.pending) {\n this.close();\n }\n if (changes.has('value')) {\n // MenuItems update a frame late for <slot> management,\n // await the same here.\n this.shouldScheduleManageSelection();\n }\n // Maybe it's finally time to remove this support?s\n if (!this.hasUpdated) {\n this.deprecatedMenu = this.querySelector(':scope > sp-menu');\n this.deprecatedMenu?.toggleAttribute('ignore', true);\n this.deprecatedMenu?.setAttribute('selects', 'inherit');\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n this.updateComplete.then(async () => {\n // Attributes should be user supplied, making them available before first update.\n // However, `appliesLabel` is applied by external elements that must be update complete as well to be bound appropriately.\n await new Promise((res) => requestAnimationFrame(res));\n await new Promise((res) => requestAnimationFrame(res));\n if (!this.hasAccessibleLabel()) {\n this.warnNoLabel();\n }\n });\n }\n super.update(changes);\n }\n\n protected bindButtonKeydownListener(): void {\n this.button.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (changes.has('open')) {\n this.strategy.open = this.open;\n }\n }\n\n protected override firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n this.bindButtonKeydownListener();\n this.bindEvents();\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n aria-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected renderContainer(menu: TemplateResult): TemplateResult {\n const accessibleMenu = html`\n ${this.dismissHelper} ${menu} ${this.dismissHelper}\n `;\n // @todo: test in mobile\n if (this.isMobile.matches && !this.forcePopover) {\n this.dependencyManager.add('sp-tray');\n import('@spectrum-web-components/tray/sp-tray.js');\n return html`\n <sp-tray\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n >\n ${accessibleMenu}\n </sp-tray>\n `;\n }\n this.dependencyManager.add('sp-popover');\n import('@spectrum-web-components/popover/sp-popover.js');\n return html`\n <sp-popover\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n placement=${this.placement}\n >\n ${accessibleMenu}\n </sp-popover>\n `;\n }\n\n protected hasRenderedOverlay = false;\n\n private onScroll(): void {\n this.dispatchEvent(\n new Event('scroll', {\n cancelable: true,\n composed: true,\n })\n );\n }\n\n protected get renderMenu(): TemplateResult {\n const menu = html`\n <sp-menu\n aria-labelledby=\"applied-label\"\n @change=${this.handleChange}\n id=\"menu\"\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n @scroll=${this.onScroll}\n role=${this.listRole}\n .selects=${this.selects}\n .selected=${this.value ? [this.value] : []}\n size=${this.size}\n @sp-menu-item-keydown=${this.handleEscape}\n @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n >\n <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n </sp-menu>\n `;\n this.hasRenderedOverlay =\n this.hasRenderedOverlay ||\n this.focused ||\n this.open ||\n !!this.deprecatedMenu;\n if (this.hasRenderedOverlay) {\n if (this.dependencyManager.loaded) {\n this.dependencyManager.add('sp-overlay');\n }\n return this.renderOverlay(menu);\n }\n return menu;\n }\n\n /**\n * whether a selection change is already scheduled\n */\n public willManageSelection = false;\n\n /**\n * when the value changes or the menu slot changes, manage the selection on the next frame, if not already scheduled\n * @param event\n */\n protected shouldScheduleManageSelection(event?: Event): void {\n if (\n !this.willManageSelection &&\n (!event ||\n ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n .host === this)\n ) {\n //s set a flag to manage selection on the next frame\n this.willManageSelection = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.manageSelection();\n });\n });\n }\n }\n\n /**\n * when an item is added or updated, manage the selection, if it's not already scheduled\n */\n protected shouldManageSelection(): void {\n if (this.willManageSelection) {\n return;\n }\n this.willManageSelection = true;\n this.manageSelection();\n }\n\n /**\n * updates menu selection based on value\n */\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n await this.optionsMenu.updateComplete;\n if (this.recentlyConnected) {\n // Work around for attach timing differences in Safari and Firefox.\n // Remove when refactoring to Menu passthrough wrapper.\n await new Promise((res) => requestAnimationFrame(() => res(true)));\n this.recentlyConnected = false;\n }\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n this.willManageSelection = false;\n }\n\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.selectionPromise;\n // if (this.overlayElement) {\n // await this.overlayElement.updateComplete;\n // }\n return complete;\n }\n\n private recentlyConnected = false;\n\n private enterKeydownOn: EventTarget | null = null;\n\n protected handleEnterKeydown = (event: KeyboardEvent): void => {\n if (event.key !== 'Enter') {\n return;\n }\n const target = event?.target as MenuItem;\n if (!target.open && target.hasSubmenu) {\n event.preventDefault();\n return;\n }\n\n if (this.enterKeydownOn) {\n event.preventDefault();\n return;\n }\n this.enterKeydownOn = event.target;\n this.addEventListener(\n 'keyup',\n async (keyupEvent: KeyboardEvent) => {\n if (keyupEvent.key !== 'Enter') {\n return;\n }\n this.enterKeydownOn = null;\n },\n { once: true }\n );\n };\n\n public bindEvents(): void {\n this.strategy?.abort();\n if (this.isMobile.matches) {\n this.strategy = new strategies['mobile'](this.button, this);\n } else {\n this.strategy = new strategies['desktop'](this.button, this);\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.updateComplete.then(() => {\n if (!this.tooltipEl?.selfManaged) {\n return;\n }\n const overlayElement = this.tooltipEl.overlayElement;\n if (overlayElement) {\n overlayElement.triggerElement = this.button;\n }\n });\n\n this.recentlyConnected = this.hasUpdated;\n this.addEventListener('focus', this.handleFocus);\n }\n\n public override disconnectedCallback(): void {\n this.close();\n this.strategy?.releaseDescription();\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot description - The description content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override get containerStyles(): StyleInfo {\n const styles = super.containerStyles;\n if (!this.quiet) {\n styles['min-width'] = `${this.offsetWidth}px`;\n }\n return styles;\n }\n\n protected override handleKeydown = (event: KeyboardEvent): void => {\n const { key } = event;\n const handledKeys = [\n 'ArrowUp',\n 'ArrowDown',\n 'ArrowLeft',\n 'ArrowRight',\n 'Enter',\n ' ',\n 'Escape',\n ].includes(key);\n const openKeys = ['ArrowUp', 'ArrowDown', 'Enter', ' '].includes(key);\n this.focused = true;\n if ('Escape' === key) {\n this.handleEscape(event);\n return;\n }\n if (!handledKeys || this.readonly || this.pending) {\n return;\n }\n if (openKeys) {\n this.keyboardOpen();\n event.preventDefault();\n return;\n }\n event.preventDefault();\n const nextItem = this.optionsMenu?.getNeighboringFocusableElement(\n this.selectedItem,\n key === 'ArrowLeft'\n );\n if (!this.value || nextItem !== this.selectedItem) {\n // updates picker text but does not fire change event until action is completed\n if (!!nextItem) this.setValueFromItem(nextItem as MenuItem);\n }\n };\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["html", "nothing", "render", "SizedMixin", "SpectrumElement", "classMap", "ifDefined", "styleMap", "property", "query", "state", "pickerStyles", "chevronStyles", "IS_MOBILE", "MatchMediaController", "DependencyManagerController", "PendingStateController", "strategies", "chevronClass", "event", "_event", "value", "labelElement", "target", "keyupEvent", "selectedItem", "oldSelectedItem", "options", "_a", "selected", "item", "menuChangeEvent", "oldValue", "open", "selectedItemContent", "oldContent", "content", "labelClasses", "appliedLabel", "_b", "_c", "_d", "_e", "_f", "_g", "slotContent", "slotAlt", "menu", "container", "changes", "accessibleMenu", "res", "complete", "overlayElement", "__decorateClass", "key", "handledKeys", "openKeys", "nextItem", "styles"]
|
|
7
7
|
}
|