@spectrum-web-components/picker 1.1.0-beta.9 → 1.1.1
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 +33 -4
- package/package.json +17 -17
- package/src/DesktopController.dev.js +1 -1
- package/src/DesktopController.dev.js.map +2 -2
- package/src/DesktopController.js +1 -1
- package/src/DesktopController.js.map +2 -2
- package/src/InteractionController.d.ts +1 -0
- package/src/InteractionController.dev.js +2 -1
- package/src/InteractionController.dev.js.map +2 -2
- package/src/InteractionController.js +1 -1
- package/src/InteractionController.js.map +2 -2
- package/src/MobileController.d.ts +0 -1
- package/src/MobileController.dev.js +2 -2
- package/src/MobileController.dev.js.map +2 -2
- package/src/MobileController.js +1 -1
- package/src/MobileController.js.map +3 -3
- package/src/Picker.d.ts +6 -0
- package/src/Picker.dev.js +5 -1
- package/src/Picker.dev.js.map +2 -2
- package/src/Picker.js +3 -3
- package/src/Picker.js.map +2 -2
- package/src/picker-overrides.css.dev.js.map +1 -1
- package/src/picker-overrides.css.js.map +1 -1
- package/src/picker.css.dev.js.map +1 -1
- package/src/picker.css.js.map +1 -1
- package/src/spectrum-picker.css.dev.js.map +1 -1
- package/src/spectrum-picker.css.js.map +1 -1
- package/stories/picker.stories.js +67 -9
- package/stories/picker.stories.js.map +2 -2
- package/test/index.js +1 -1
- package/test/index.js.map +1 -1
- package/test/picker-responsive.test.js +53 -3
- package/test/picker-responsive.test.js.map +2 -2
package/README.md
CHANGED
|
@@ -8,25 +8,25 @@ An `<sp-picker>` is an alternative to HTML's `<select>` element. Use `<sp-menu-i
|
|
|
8
8
|
[](https://bundlephobia.com/result?p=@spectrum-web-components/picker)
|
|
9
9
|
[](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/guTpKeAjgecibF150Qbg/src/index.ts)
|
|
10
10
|
|
|
11
|
-
```
|
|
11
|
+
```bash
|
|
12
12
|
yarn add @spectrum-web-components/picker
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
Import the side effectful registration of `<sp-picker>` via:
|
|
16
16
|
|
|
17
|
-
```
|
|
17
|
+
```bash
|
|
18
18
|
import '@spectrum-web-components/picker/sp-picker.js';
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
The default of `<sp-picker>` will load dependencies in `@spectrum-web-components/overlay` asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of `<sp-picker>` as follows:
|
|
22
22
|
|
|
23
|
-
```
|
|
23
|
+
```bash
|
|
24
24
|
import '@spectrum-web-components/picker/sync/sp-picker.js';
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
When looking to leverage the `Picker` base class as a type and/or for extension purposes, do so via:
|
|
28
28
|
|
|
29
|
-
```
|
|
29
|
+
```bash
|
|
30
30
|
import { Picker } from '@spectrum-web-components/picker';
|
|
31
31
|
```
|
|
32
32
|
|
|
@@ -459,6 +459,35 @@ When in pending state, `<sp-picker>` elements will not respond to click events a
|
|
|
459
459
|
</sp-picker>
|
|
460
460
|
```
|
|
461
461
|
|
|
462
|
+
## Force Popover on Mobile Devices
|
|
463
|
+
|
|
464
|
+
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 `forcePopover` to the `sp-picker`.
|
|
465
|
+
|
|
466
|
+
Usage Guidance:
|
|
467
|
+
|
|
468
|
+
- Use a tray when a menu’s proximity to its trigger is considered to be less important to the experience, or for showing a volume of content that is too overwhelming for a popover.
|
|
469
|
+
- Use a popover when a menu’s proximity to its trigger is considered to be important to the experience, or for showing a volume of content that is manageable for a popover.
|
|
470
|
+
|
|
471
|
+
To see this functionality in action, load this page from your mobile device or use Chrome DevTools (or equivalent) and select a mobile device once the Device Toolbar (the phone/tablet icon) is active.
|
|
472
|
+
|
|
473
|
+
```html
|
|
474
|
+
<sp-field-label for="picker-tray">
|
|
475
|
+
Do you want to see a tray menu?
|
|
476
|
+
</sp-field-label>
|
|
477
|
+
<sp-picker id="picker-tray" label="Select an option">
|
|
478
|
+
<sp-menu-item value="option-1">Yes</sp-menu-item>
|
|
479
|
+
<sp-menu-item value="option-2">No</sp-menu-item>
|
|
480
|
+
</sp-picker>
|
|
481
|
+
<br />
|
|
482
|
+
<sp-field-label for="picker-popover">
|
|
483
|
+
Do you want to see a popover menu?
|
|
484
|
+
</sp-field-label>
|
|
485
|
+
<sp-picker id="picker-popover" label="Select an option" forcePopover>
|
|
486
|
+
<sp-menu-item value="option-1">Yes</sp-menu-item>
|
|
487
|
+
<sp-menu-item value="option-2">No</sp-menu-item>
|
|
488
|
+
</sp-picker>
|
|
489
|
+
```
|
|
490
|
+
|
|
462
491
|
## Accessibility
|
|
463
492
|
|
|
464
493
|
To render accessibly, an `<sp-picker>` element should be paired with an `<sp-field-label>` element that has a `for` attribute referencing the `id` of the `<sp-picker>` element. For an accessible label that renders within the bounds of the picker itself, but still fulfills the accessibility contract, use the `label` attribute or a `<span slot="label">` as a child element of `<sp-picker>`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/picker",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -82,23 +82,23 @@
|
|
|
82
82
|
"lit-html"
|
|
83
83
|
],
|
|
84
84
|
"dependencies": {
|
|
85
|
-
"@spectrum-web-components/base": "^1.1.
|
|
86
|
-
"@spectrum-web-components/button": "^1.1.
|
|
87
|
-
"@spectrum-web-components/field-label": "^1.1.
|
|
88
|
-
"@spectrum-web-components/icon": "^1.1.
|
|
89
|
-
"@spectrum-web-components/icons-ui": "^1.1.
|
|
90
|
-
"@spectrum-web-components/icons-workflow": "^1.1.
|
|
91
|
-
"@spectrum-web-components/menu": "^1.1.
|
|
92
|
-
"@spectrum-web-components/overlay": "^1.1.
|
|
93
|
-
"@spectrum-web-components/popover": "^1.1.
|
|
94
|
-
"@spectrum-web-components/progress-circle": "^1.1.
|
|
95
|
-
"@spectrum-web-components/reactive-controllers": "^1.1.
|
|
96
|
-
"@spectrum-web-components/shared": "^1.1.
|
|
97
|
-
"@spectrum-web-components/tooltip": "^1.1.
|
|
98
|
-
"@spectrum-web-components/tray": "^1.1.
|
|
85
|
+
"@spectrum-web-components/base": "^1.1.1",
|
|
86
|
+
"@spectrum-web-components/button": "^1.1.1",
|
|
87
|
+
"@spectrum-web-components/field-label": "^1.1.1",
|
|
88
|
+
"@spectrum-web-components/icon": "^1.1.1",
|
|
89
|
+
"@spectrum-web-components/icons-ui": "^1.1.1",
|
|
90
|
+
"@spectrum-web-components/icons-workflow": "^1.1.1",
|
|
91
|
+
"@spectrum-web-components/menu": "^1.1.1",
|
|
92
|
+
"@spectrum-web-components/overlay": "^1.1.1",
|
|
93
|
+
"@spectrum-web-components/popover": "^1.1.1",
|
|
94
|
+
"@spectrum-web-components/progress-circle": "^1.1.1",
|
|
95
|
+
"@spectrum-web-components/reactive-controllers": "^1.1.1",
|
|
96
|
+
"@spectrum-web-components/shared": "^1.1.1",
|
|
97
|
+
"@spectrum-web-components/tooltip": "^1.1.1",
|
|
98
|
+
"@spectrum-web-components/tray": "^1.1.1"
|
|
99
99
|
},
|
|
100
100
|
"devDependencies": {
|
|
101
|
-
"@spectrum-css/picker": "
|
|
101
|
+
"@spectrum-css/picker": "9.0.0-s2-foundations.15"
|
|
102
102
|
},
|
|
103
103
|
"types": "./src/index.d.ts",
|
|
104
104
|
"customElements": "custom-elements.json",
|
|
@@ -108,5 +108,5 @@
|
|
|
108
108
|
"./sync/index.js",
|
|
109
109
|
"./sync/sp-*.js"
|
|
110
110
|
],
|
|
111
|
-
"gitHead": "
|
|
111
|
+
"gitHead": "44870aa95001c1b995456d994ae31bbe7277fac9"
|
|
112
112
|
}
|
|
@@ -9,7 +9,7 @@ export class DesktopController extends InteractionController {
|
|
|
9
9
|
this.type = InteractionTypes.desktop;
|
|
10
10
|
}
|
|
11
11
|
handlePointerdown(event) {
|
|
12
|
-
if (event.button !== 0) {
|
|
12
|
+
if (event.button !== 0 || event.pointerType === "touch") {
|
|
13
13
|
return;
|
|
14
14
|
}
|
|
15
15
|
this.pointerdownState = this.open;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["DesktopController.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 InteractionController,\n InteractionTypes,\n} from './InteractionController.dev.js'\n\nexport class DesktopController extends InteractionController {\n override type = InteractionTypes.desktop;\n\n public override handlePointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n return;\n }\n this.pointerdownState = this.open;\n this.preventNextToggle = 'maybe';\n let cleanupAction = 0;\n const cleanup = (): void => {\n cancelAnimationFrame(cleanupAction);\n cleanupAction = requestAnimationFrame(async () => {\n document.removeEventListener('pointerup', cleanup);\n document.removeEventListener('pointercancel', cleanup);\n this.target.removeEventListener('click', cleanup);\n requestAnimationFrame(() => {\n // Complete cleanup on the second animation frame so that `click` can go first.\n this.preventNextToggle = 'no';\n });\n });\n };\n // Ensure that however the pointer goes up we do `cleanup()`.\n document.addEventListener('pointerup', cleanup);\n document.addEventListener('pointercancel', cleanup);\n this.target.addEventListener('click', cleanup);\n this.handleActivate();\n }\n\n public override handleActivate(event?: Event): void {\n if (this.enterKeydownOn && this.enterKeydownOn !== this.target) {\n return;\n }\n if (this.preventNextToggle === 'yes') {\n return;\n }\n if (event?.type === 'click' && this.open !== this.pointerdownState) {\n // When activation comes from a `click` event ensure that the `pointerup`\n // event didn't already toggle the Picker state before doing so.\n return;\n }\n this.host.toggle();\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener(\n 'click',\n (event: Event) => this.handleActivate(event),\n {\n signal,\n }\n );\n this.target.addEventListener(\n 'pointerdown',\n (event: PointerEvent) => this.handlePointerdown(event),\n { signal }\n );\n this.target.addEventListener(\n 'focus',\n (event: FocusEvent) => this.handleButtonFocus(event),\n {\n signal,\n }\n );\n }\n}\n"],
|
|
5
|
-
"mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEA,aAAM,0BAA0B,sBAAsB;AAAA,EAAtD;AAAA;AACH,SAAS,OAAO,iBAAiB;AAAA;AAAA,EAEjB,kBAAkB,OAA2B;AACzD,QAAI,MAAM,WAAW,
|
|
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 InteractionController,\n InteractionTypes,\n} from './InteractionController.dev.js'\n\nexport class DesktopController extends InteractionController {\n override type = InteractionTypes.desktop;\n\n public override handlePointerdown(event: PointerEvent): void {\n if (event.button !== 0 || event.pointerType === 'touch') {\n return;\n }\n this.pointerdownState = this.open;\n this.preventNextToggle = 'maybe';\n let cleanupAction = 0;\n const cleanup = (): void => {\n cancelAnimationFrame(cleanupAction);\n cleanupAction = requestAnimationFrame(async () => {\n document.removeEventListener('pointerup', cleanup);\n document.removeEventListener('pointercancel', cleanup);\n this.target.removeEventListener('click', cleanup);\n requestAnimationFrame(() => {\n // Complete cleanup on the second animation frame so that `click` can go first.\n this.preventNextToggle = 'no';\n });\n });\n };\n // Ensure that however the pointer goes up we do `cleanup()`.\n document.addEventListener('pointerup', cleanup);\n document.addEventListener('pointercancel', cleanup);\n this.target.addEventListener('click', cleanup);\n this.handleActivate();\n }\n\n public override handleActivate(event?: Event): void {\n if (this.enterKeydownOn && this.enterKeydownOn !== this.target) {\n return;\n }\n if (this.preventNextToggle === 'yes') {\n return;\n }\n if (event?.type === 'click' && this.open !== this.pointerdownState) {\n // When activation comes from a `click` event ensure that the `pointerup`\n // event didn't already toggle the Picker state before doing so.\n return;\n }\n this.host.toggle();\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener(\n 'click',\n (event: Event) => this.handleActivate(event),\n {\n signal,\n }\n );\n this.target.addEventListener(\n 'pointerdown',\n (event: PointerEvent) => this.handlePointerdown(event),\n { signal }\n );\n this.target.addEventListener(\n 'focus',\n (event: FocusEvent) => this.handleButtonFocus(event),\n {\n signal,\n }\n );\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEA,aAAM,0BAA0B,sBAAsB;AAAA,EAAtD;AAAA;AACH,SAAS,OAAO,iBAAiB;AAAA;AAAA,EAEjB,kBAAkB,OAA2B;AACzD,QAAI,MAAM,WAAW,KAAK,MAAM,gBAAgB,SAAS;AACrD;AAAA,IACJ;AACA,SAAK,mBAAmB,KAAK;AAC7B,SAAK,oBAAoB;AACzB,QAAI,gBAAgB;AACpB,UAAM,UAAU,MAAY;AACxB,2BAAqB,aAAa;AAClC,sBAAgB,sBAAsB,YAAY;AAC9C,iBAAS,oBAAoB,aAAa,OAAO;AACjD,iBAAS,oBAAoB,iBAAiB,OAAO;AACrD,aAAK,OAAO,oBAAoB,SAAS,OAAO;AAChD,8BAAsB,MAAM;AAExB,eAAK,oBAAoB;AAAA,QAC7B,CAAC;AAAA,MACL,CAAC;AAAA,IACL;AAEA,aAAS,iBAAiB,aAAa,OAAO;AAC9C,aAAS,iBAAiB,iBAAiB,OAAO;AAClD,SAAK,OAAO,iBAAiB,SAAS,OAAO;AAC7C,SAAK,eAAe;AAAA,EACxB;AAAA,EAEgB,eAAe,OAAqB;AAChD,QAAI,KAAK,kBAAkB,KAAK,mBAAmB,KAAK,QAAQ;AAC5D;AAAA,IACJ;AACA,QAAI,KAAK,sBAAsB,OAAO;AAClC;AAAA,IACJ;AACA,SAAI,+BAAO,UAAS,WAAW,KAAK,SAAS,KAAK,kBAAkB;AAGhE;AAAA,IACJ;AACA,SAAK,KAAK,OAAO;AAAA,EACrB;AAAA,EAES,OAAa;AA7D1B;AA+DQ,eAAK,oBAAL,mBAAsB;AACtB,SAAK,kBAAkB,IAAI,gBAAgB;AAC3C,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,SAAK,OAAO;AAAA,MACR;AAAA,MACA,CAAC,UAAiB,KAAK,eAAe,KAAK;AAAA,MAC3C;AAAA,QACI;AAAA,MACJ;AAAA,IACJ;AACA,SAAK,OAAO;AAAA,MACR;AAAA,MACA,CAAC,UAAwB,KAAK,kBAAkB,KAAK;AAAA,MACrD,EAAE,OAAO;AAAA,IACb;AACA,SAAK,OAAO;AAAA,MACR;AAAA,MACA,CAAC,UAAsB,KAAK,kBAAkB,KAAK;AAAA,MACnD;AAAA,QACI;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/DesktopController.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{InteractionController as i,InteractionTypes as
|
|
1
|
+
"use strict";import{InteractionController as i,InteractionTypes as o}from"./InteractionController.js";export class DesktopController extends i{constructor(){super(...arguments);this.type=o.desktop}handlePointerdown(e){if(e.button!==0||e.pointerType==="touch")return;this.pointerdownState=this.open,this.preventNextToggle="maybe";let n=0;const t=()=>{cancelAnimationFrame(n),n=requestAnimationFrame(async()=>{document.removeEventListener("pointerup",t),document.removeEventListener("pointercancel",t),this.target.removeEventListener("click",t),requestAnimationFrame(()=>{this.preventNextToggle="no"})})};document.addEventListener("pointerup",t),document.addEventListener("pointercancel",t),this.target.addEventListener("click",t),this.handleActivate()}handleActivate(e){this.enterKeydownOn&&this.enterKeydownOn!==this.target||this.preventNextToggle!=="yes"&&((e==null?void 0:e.type)==="click"&&this.open!==this.pointerdownState||this.host.toggle())}init(){var n;(n=this.abortController)==null||n.abort(),this.abortController=new AbortController;const{signal:e}=this.abortController;this.target.addEventListener("click",t=>this.handleActivate(t),{signal:e}),this.target.addEventListener("pointerdown",t=>this.handlePointerdown(t),{signal:e}),this.target.addEventListener("focus",t=>this.handleButtonFocus(t),{signal:e})}}
|
|
2
2
|
//# sourceMappingURL=DesktopController.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["DesktopController.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 InteractionController,\n InteractionTypes,\n} from './InteractionController.js';\n\nexport class DesktopController extends InteractionController {\n override type = InteractionTypes.desktop;\n\n public override handlePointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n return;\n }\n this.pointerdownState = this.open;\n this.preventNextToggle = 'maybe';\n let cleanupAction = 0;\n const cleanup = (): void => {\n cancelAnimationFrame(cleanupAction);\n cleanupAction = requestAnimationFrame(async () => {\n document.removeEventListener('pointerup', cleanup);\n document.removeEventListener('pointercancel', cleanup);\n this.target.removeEventListener('click', cleanup);\n requestAnimationFrame(() => {\n // Complete cleanup on the second animation frame so that `click` can go first.\n this.preventNextToggle = 'no';\n });\n });\n };\n // Ensure that however the pointer goes up we do `cleanup()`.\n document.addEventListener('pointerup', cleanup);\n document.addEventListener('pointercancel', cleanup);\n this.target.addEventListener('click', cleanup);\n this.handleActivate();\n }\n\n public override handleActivate(event?: Event): void {\n if (this.enterKeydownOn && this.enterKeydownOn !== this.target) {\n return;\n }\n if (this.preventNextToggle === 'yes') {\n return;\n }\n if (event?.type === 'click' && this.open !== this.pointerdownState) {\n // When activation comes from a `click` event ensure that the `pointerup`\n // event didn't already toggle the Picker state before doing so.\n return;\n }\n this.host.toggle();\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener(\n 'click',\n (event: Event) => this.handleActivate(event),\n {\n signal,\n }\n );\n this.target.addEventListener(\n 'pointerdown',\n (event: PointerEvent) => this.handlePointerdown(event),\n { signal }\n );\n this.target.addEventListener(\n 'focus',\n (event: FocusEvent) => this.handleButtonFocus(event),\n {\n signal,\n }\n );\n }\n}\n"],
|
|
5
|
-
"mappings": "aAYA,OACI,yBAAAA,EACA,oBAAAC,MACG,6BAEA,aAAM,0BAA0BD,CAAsB,CAAtD,kCACH,KAAS,KAAOC,EAAiB,QAEjB,kBAAkBC,EAA2B,CACzD,GAAIA,EAAM,SAAW,
|
|
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 InteractionController,\n InteractionTypes,\n} from './InteractionController.js';\n\nexport class DesktopController extends InteractionController {\n override type = InteractionTypes.desktop;\n\n public override handlePointerdown(event: PointerEvent): void {\n if (event.button !== 0 || event.pointerType === 'touch') {\n return;\n }\n this.pointerdownState = this.open;\n this.preventNextToggle = 'maybe';\n let cleanupAction = 0;\n const cleanup = (): void => {\n cancelAnimationFrame(cleanupAction);\n cleanupAction = requestAnimationFrame(async () => {\n document.removeEventListener('pointerup', cleanup);\n document.removeEventListener('pointercancel', cleanup);\n this.target.removeEventListener('click', cleanup);\n requestAnimationFrame(() => {\n // Complete cleanup on the second animation frame so that `click` can go first.\n this.preventNextToggle = 'no';\n });\n });\n };\n // Ensure that however the pointer goes up we do `cleanup()`.\n document.addEventListener('pointerup', cleanup);\n document.addEventListener('pointercancel', cleanup);\n this.target.addEventListener('click', cleanup);\n this.handleActivate();\n }\n\n public override handleActivate(event?: Event): void {\n if (this.enterKeydownOn && this.enterKeydownOn !== this.target) {\n return;\n }\n if (this.preventNextToggle === 'yes') {\n return;\n }\n if (event?.type === 'click' && this.open !== this.pointerdownState) {\n // When activation comes from a `click` event ensure that the `pointerup`\n // event didn't already toggle the Picker state before doing so.\n return;\n }\n this.host.toggle();\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener(\n 'click',\n (event: Event) => this.handleActivate(event),\n {\n signal,\n }\n );\n this.target.addEventListener(\n 'pointerdown',\n (event: PointerEvent) => this.handlePointerdown(event),\n { signal }\n );\n this.target.addEventListener(\n 'focus',\n (event: FocusEvent) => this.handleButtonFocus(event),\n {\n signal,\n }\n );\n }\n}\n"],
|
|
5
|
+
"mappings": "aAYA,OACI,yBAAAA,EACA,oBAAAC,MACG,6BAEA,aAAM,0BAA0BD,CAAsB,CAAtD,kCACH,KAAS,KAAOC,EAAiB,QAEjB,kBAAkBC,EAA2B,CACzD,GAAIA,EAAM,SAAW,GAAKA,EAAM,cAAgB,QAC5C,OAEJ,KAAK,iBAAmB,KAAK,KAC7B,KAAK,kBAAoB,QACzB,IAAIC,EAAgB,EACpB,MAAMC,EAAU,IAAY,CACxB,qBAAqBD,CAAa,EAClCA,EAAgB,sBAAsB,SAAY,CAC9C,SAAS,oBAAoB,YAAaC,CAAO,EACjD,SAAS,oBAAoB,gBAAiBA,CAAO,EACrD,KAAK,OAAO,oBAAoB,QAASA,CAAO,EAChD,sBAAsB,IAAM,CAExB,KAAK,kBAAoB,IAC7B,CAAC,CACL,CAAC,CACL,EAEA,SAAS,iBAAiB,YAAaA,CAAO,EAC9C,SAAS,iBAAiB,gBAAiBA,CAAO,EAClD,KAAK,OAAO,iBAAiB,QAASA,CAAO,EAC7C,KAAK,eAAe,CACxB,CAEgB,eAAeF,EAAqB,CAC5C,KAAK,gBAAkB,KAAK,iBAAmB,KAAK,QAGpD,KAAK,oBAAsB,SAG3BA,GAAA,YAAAA,EAAO,QAAS,SAAW,KAAK,OAAS,KAAK,kBAKlD,KAAK,KAAK,OAAO,EACrB,CAES,MAAa,CA7D1B,IAAAG,GA+DQA,EAAA,KAAK,kBAAL,MAAAA,EAAsB,QACtB,KAAK,gBAAkB,IAAI,gBAC3B,KAAM,CAAE,OAAAC,CAAO,EAAI,KAAK,gBACxB,KAAK,OAAO,iBACR,QACCJ,GAAiB,KAAK,eAAeA,CAAK,EAC3C,CACI,OAAAI,CACJ,CACJ,EACA,KAAK,OAAO,iBACR,cACCJ,GAAwB,KAAK,kBAAkBA,CAAK,EACrD,CAAE,OAAAI,CAAO,CACb,EACA,KAAK,OAAO,iBACR,QACCJ,GAAsB,KAAK,kBAAkBA,CAAK,EACnD,CACI,OAAAI,CACJ,CACJ,CACJ,CACJ",
|
|
6
6
|
"names": ["InteractionController", "InteractionTypes", "event", "cleanupAction", "cleanup", "_a", "signal"]
|
|
7
7
|
}
|
|
@@ -6,6 +6,7 @@ export declare enum InteractionTypes {
|
|
|
6
6
|
'desktop' = 0,
|
|
7
7
|
'mobile' = 1
|
|
8
8
|
}
|
|
9
|
+
export declare const SAFARI_FOCUS_RING_CLASS = "remove-focus-ring-safari-hack";
|
|
9
10
|
export declare class InteractionController implements ReactiveController {
|
|
10
11
|
target: HTMLElement;
|
|
11
12
|
host: PickerBase;
|
|
@@ -4,6 +4,7 @@ export var InteractionTypes = /* @__PURE__ */ ((InteractionTypes2) => {
|
|
|
4
4
|
InteractionTypes2[InteractionTypes2["mobile"] = 1] = "mobile";
|
|
5
5
|
return InteractionTypes2;
|
|
6
6
|
})(InteractionTypes || {});
|
|
7
|
+
export const SAFARI_FOCUS_RING_CLASS = "remove-focus-ring-safari-hack";
|
|
7
8
|
export class InteractionController {
|
|
8
9
|
constructor(target, host) {
|
|
9
10
|
this.target = target;
|
|
@@ -78,7 +79,7 @@ export class InteractionController {
|
|
|
78
79
|
});
|
|
79
80
|
this.overlay.type = this.host.isMobile.matches ? "modal" : "auto";
|
|
80
81
|
this.overlay.triggerElement = this.host;
|
|
81
|
-
this.overlay.placement = this.host.isMobile.matches ? void 0 :
|
|
82
|
+
this.overlay.placement = this.host.isMobile.matches && !this.host.forcePopover ? void 0 : "bottom";
|
|
82
83
|
this.overlay.receivesFocus = "true";
|
|
83
84
|
this.overlay.willPreventClose = this.preventNextToggle !== "no" && this.open;
|
|
84
85
|
this.overlay.addEventListener(
|
|
@@ -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}\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
|
|
5
|
-
"mappings": ";AAoBO,WAAK,mBAAL,kBAAKA,sBAAL;AACH,EAAAA,oCAAA;AACA,EAAAA,oCAAA;AAFQ,SAAAA;AAAA,GAAA;
|
|
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 : 'bottom';\n this.overlay.receivesFocus = 'true';\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 }\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 }\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": ";AAoBO,WAAK,mBAAL,kBAAKA,sBAAL;AACH,EAAAA,oCAAA;AACA,EAAAA,oCAAA;AAFQ,SAAAA;AAAA,GAAA;AAIL,aAAM,0BAA0B;AAEhC,aAAM,sBAAoD;AAAA,EA6D7D,YACW,QACA,MACT;AAFS;AACA;AA5DX,SAAO,oBAA4C;AACnD,SAAO,mBAAmB;AAC1B,SAAO,iBAAqC;AAQ5C,SAAQ,QAAQ;AAoDZ,SAAK,SAAS;AACd,SAAK,OAAO;AACZ,SAAK,KAAK,cAAc,IAAI;AAC5B,SAAK,KAAK;AAAA,EACd;AAAA,EA5DA,IAAI,kBAA2B;AAC3B,WAAO;AAAA,EACX;AAAA,EAIA,IAAW,OAAgB;AACvB,WAAO,KAAK;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAW,KAAK,MAAe;AAC3B,QAAI,KAAK,UAAU,KAAM;AACzB,SAAK,QAAQ;AAEb,QAAI,KAAK,SAAS;AACd,WAAK,KAAK,OAAO;AACjB;AAAA,IACJ;AAIA,mBACK,YAAY,YAAY,EACxB,KAAK,YAA2B;AAC7B,YAAM,EAAE,SAAAC,SAAQ,IAAI,MAAM,OACtB,iDACJ;AACA,WAAK,UAAU,IAAIA,SAAQ;AAC3B,WAAK,KAAK,OAAO;AACjB,WAAK,KAAK,cAAc;AAAA,IAC5B,CAAC;AACL,WAAO,gDAAgD;AAAA,EAC3D;AAAA,EAIA,IAAW,UAA2B;AAClC,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAW,QAAQ,SAAsC;AACrD,QAAI,CAAC,QAAS;AACd,QAAI,KAAK,YAAY,QAAS;AAC9B,SAAK,WAAW;AAChB,SAAK,YAAY;AAAA,EACrB;AAAA,EAcA,qBAA2B;AAAA,EAAC;AAAA,EAElB,mBACN,OAII;AAxGZ;AAyGQ,QAAI,MAAM,aAAa,EAAE,CAAC,MAAM,MAAM,QAAQ;AAC1C;AAAA,IACJ;AACA,QAAI,MAAM,aAAa,UAAU;AAC7B,UAAI,KAAK,sBAAsB,MAAM;AACjC,aAAK,OAAO;AAAA,MAChB,WAAW,CAAC,KAAK,kBAAkB;AAG/B,mBAAK,YAAL,mBAAc;AAAA,MAClB;AAAA,IACJ;AACA,QAAI,CAAC,KAAK,MAAM;AACZ,WAAK,KAAK,YAAY,wBAAwB;AAC9C,WAAK,KAAK,YAAY,wBAAwB;AAAA,IAClD;AAAA,EACJ;AAAA,EAEA,cAAoB;AAChB,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,iBAAiB,gBAAgB,CAAC,UAAiB;AAC5D,aAAK;AAAA,UACD;AAAA,QAIJ;AAAA,MACJ,CAAC;AACD,WAAK,QAAQ,OAAO,KAAK,KAAK,SAAS,UAAU,UAAU;AAC3D,WAAK,QAAQ,iBAAiB,KAAK;AACnC,WAAK,QAAQ,YACT,KAAK,KAAK,SAAS,WAAW,CAAC,KAAK,KAAK,eACnC,SACA;AACV,WAAK,QAAQ,gBAAgB;AAC7B,WAAK,QAAQ,mBACT,KAAK,sBAAsB,QAAQ,KAAK;AAC5C,WAAK,QAAQ;AAAA,QACT;AAAA,QACA,KAAK,KAAK;AAAA,MACd;AAAA,IACJ;AAAA,EACJ;AAAA,EAEO,kBAAkB,QAA4B;AAAA,EAAC;AAAA,EAE/C,kBAAkB,OAAyB;AAG9C,QACI,KAAK,sBAAsB,WAC3B,MAAM,kBAAkB,KAAK,KAAK,aACpC;AACE,WAAK,oBAAoB;AAAA,IAC7B;AAAA,EACJ;AAAA,EAEO,eAAe,QAAqB;AAAA,EAAC;AAAA;AAAA,EAG5C,OAAa;AAAA,EAAC;AAAA,EAEd,QAAc;AAvKlB;AAwKQ,SAAK,mBAAmB;AACxB,eAAK,oBAAL,mBAAsB;AAAA,EAC1B;AAAA,EAEA,gBAAsB;AAClB,SAAK,KAAK;AAAA,EACd;AAAA,EAEA,mBAAyB;AAhL7B;AAiLQ,eAAK,oBAAL,mBAAsB;AAAA,EAC1B;AAAA,EAEO,cAAoB;AACvB,QACI,KAAK,WACL,KAAK,KAAK,kBAAkB,UAC5B,KAAK,KAAK,SAAS,KAAK,QAAQ,MAClC;AACE,WAAK,QAAQ,mBAAmB,KAAK,sBAAsB;AAC3D,WAAK,QAAQ,OAAO,KAAK,KAAK;AAAA,IAClC;AAAA,EACJ;AACJ;",
|
|
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 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?void 0:
|
|
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:"bottom",this.overlay.receivesFocus="true",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")}handleActivate(e){}init(){}abort(){var e;this.releaseDescription(),(e=this.abortController)==null||e.abort()}hostConnected(){this.init()}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}\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
|
|
5
|
-
"mappings": "aAoBO,WAAK,kBAAAA,IACRA,IAAA,qBACAA,IAAA,mBAFQA,IAAA,
|
|
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 : 'bottom';\n this.overlay.receivesFocus = 'true';\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 }\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 }\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": "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,SACV,KAAK,QAAQ,cAAgB,OAC7B,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,MAEjC,CAEO,eAAeE,EAAqB,CAAC,CAG5C,MAAa,CAAC,CAEd,OAAc,CAvKlB,IAAAD,EAwKQ,KAAK,mBAAmB,GACxBA,EAAA,KAAK,kBAAL,MAAAA,EAAsB,OAC1B,CAEA,eAAsB,CAClB,KAAK,KAAK,CACd,CAEA,kBAAyB,CAhL7B,IAAAA,GAiLQA,EAAA,KAAK,kBAAL,MAAAA,EAAsB,OAC1B,CAEO,aAAoB,CAEnB,KAAK,SACL,KAAK,KAAK,kBAAkB,QAC5B,KAAK,KAAK,OAAS,KAAK,QAAQ,OAEhC,KAAK,QAAQ,iBAAmB,KAAK,oBAAsB,KAC3D,KAAK,QAAQ,KAAO,KAAK,KAAK,KAEtC,CACJ",
|
|
6
6
|
"names": ["InteractionTypes", "target", "host", "open", "Overlay", "overlay", "event", "_a", "_event"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { InteractionController, InteractionTypes } from './InteractionController.js';
|
|
2
|
-
export declare const SAFARI_FOCUS_RING_CLASS = "remove-focus-ring-safari-hack";
|
|
3
2
|
export declare class MobileController extends InteractionController {
|
|
4
3
|
type: InteractionTypes;
|
|
5
4
|
handleClick(): void;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import {
|
|
3
3
|
InteractionController,
|
|
4
|
-
InteractionTypes
|
|
4
|
+
InteractionTypes,
|
|
5
|
+
SAFARI_FOCUS_RING_CLASS
|
|
5
6
|
} from "./InteractionController.dev.js";
|
|
6
7
|
import { isWebKit } from "@spectrum-web-components/shared";
|
|
7
|
-
export const SAFARI_FOCUS_RING_CLASS = "remove-focus-ring-safari-hack";
|
|
8
8
|
export class MobileController extends InteractionController {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["MobileController.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\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 InteractionController,\n InteractionTypes,\n} from './InteractionController.dev.js'\nimport { isWebKit } from '@spectrum-web-components/shared';\n\nexport
|
|
5
|
-
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,gBAAgB;AAElB,aAAM,
|
|
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\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 InteractionController,\n InteractionTypes,\n SAFARI_FOCUS_RING_CLASS,\n} from './InteractionController.dev.js'\nimport { isWebKit } from '@spectrum-web-components/shared';\n\nexport class MobileController extends InteractionController {\n override type = InteractionTypes.mobile;\n\n handleClick(): void {\n if (this.preventNextToggle == 'no') {\n this.open = !this.open;\n }\n this.preventNextToggle = 'no';\n }\n\n public override handlePointerdown(): void {\n this.preventNextToggle = this.open ? 'yes' : 'no';\n if (isWebKit()) {\n this.target.classList.add(SAFARI_FOCUS_RING_CLASS);\n }\n }\n\n private handleFocusOut(): void {\n if (this.host.open) {\n return;\n }\n if (\n isWebKit() &&\n this.target.classList.contains(SAFARI_FOCUS_RING_CLASS)\n ) {\n this.target.classList.remove(SAFARI_FOCUS_RING_CLASS);\n }\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener('click', () => this.handleClick(), {\n signal,\n });\n this.target.addEventListener(\n 'pointerdown',\n () => this.handlePointerdown(),\n { signal }\n );\n this.target.addEventListener('focusout', () => this.handleFocusOut(), {\n signal,\n });\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,gBAAgB;AAElB,aAAM,yBAAyB,sBAAsB;AAAA,EAArD;AAAA;AACH,SAAS,OAAO,iBAAiB;AAAA;AAAA,EAEjC,cAAoB;AAChB,QAAI,KAAK,qBAAqB,MAAM;AAChC,WAAK,OAAO,CAAC,KAAK;AAAA,IACtB;AACA,SAAK,oBAAoB;AAAA,EAC7B;AAAA,EAEgB,oBAA0B;AACtC,SAAK,oBAAoB,KAAK,OAAO,QAAQ;AAC7C,QAAI,SAAS,GAAG;AACZ,WAAK,OAAO,UAAU,IAAI,uBAAuB;AAAA,IACrD;AAAA,EACJ;AAAA,EAEQ,iBAAuB;AAC3B,QAAI,KAAK,KAAK,MAAM;AAChB;AAAA,IACJ;AACA,QACI,SAAS,KACT,KAAK,OAAO,UAAU,SAAS,uBAAuB,GACxD;AACE,WAAK,OAAO,UAAU,OAAO,uBAAuB;AAAA,IACxD;AAAA,EACJ;AAAA,EAES,OAAa;AA/C1B;AAiDQ,eAAK,oBAAL,mBAAsB;AACtB,SAAK,kBAAkB,IAAI,gBAAgB;AAC3C,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,SAAK,OAAO,iBAAiB,SAAS,MAAM,KAAK,YAAY,GAAG;AAAA,MAC5D;AAAA,IACJ,CAAC;AACD,SAAK,OAAO;AAAA,MACR;AAAA,MACA,MAAM,KAAK,kBAAkB;AAAA,MAC7B,EAAE,OAAO;AAAA,IACb;AACA,SAAK,OAAO,iBAAiB,YAAY,MAAM,KAAK,eAAe,GAAG;AAAA,MAClE;AAAA,IACJ,CAAC;AAAA,EACL;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/MobileController.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{InteractionController as
|
|
1
|
+
"use strict";import{InteractionController as r,InteractionTypes as n,SAFARI_FOCUS_RING_CLASS as e}from"./InteractionController.js";import{isWebKit as i}from"@spectrum-web-components/shared";export class MobileController extends r{constructor(){super(...arguments);this.type=n.mobile}handleClick(){this.preventNextToggle=="no"&&(this.open=!this.open),this.preventNextToggle="no"}handlePointerdown(){this.preventNextToggle=this.open?"yes":"no",i()&&this.target.classList.add(e)}handleFocusOut(){this.host.open||i()&&this.target.classList.contains(e)&&this.target.classList.remove(e)}init(){var o;(o=this.abortController)==null||o.abort(),this.abortController=new AbortController;const{signal:t}=this.abortController;this.target.addEventListener("click",()=>this.handleClick(),{signal:t}),this.target.addEventListener("pointerdown",()=>this.handlePointerdown(),{signal:t}),this.target.addEventListener("focusout",()=>this.handleFocusOut(),{signal:t})}}
|
|
2
2
|
//# sourceMappingURL=MobileController.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["MobileController.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\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 InteractionController,\n InteractionTypes,\n} from './InteractionController.js';\nimport { isWebKit } from '@spectrum-web-components/shared';\n\nexport
|
|
5
|
-
"mappings": "aAWA,OACI,yBAAAA,EACA,oBAAAC,MACG,6BACP,OAAS,YAAAC,MAAgB,kCAElB,aAAM,
|
|
6
|
-
"names": ["InteractionController", "InteractionTypes", "isWebKit", "_a", "signal"]
|
|
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\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 InteractionController,\n InteractionTypes,\n SAFARI_FOCUS_RING_CLASS,\n} from './InteractionController.js';\nimport { isWebKit } from '@spectrum-web-components/shared';\n\nexport class MobileController extends InteractionController {\n override type = InteractionTypes.mobile;\n\n handleClick(): void {\n if (this.preventNextToggle == 'no') {\n this.open = !this.open;\n }\n this.preventNextToggle = 'no';\n }\n\n public override handlePointerdown(): void {\n this.preventNextToggle = this.open ? 'yes' : 'no';\n if (isWebKit()) {\n this.target.classList.add(SAFARI_FOCUS_RING_CLASS);\n }\n }\n\n private handleFocusOut(): void {\n if (this.host.open) {\n return;\n }\n if (\n isWebKit() &&\n this.target.classList.contains(SAFARI_FOCUS_RING_CLASS)\n ) {\n this.target.classList.remove(SAFARI_FOCUS_RING_CLASS);\n }\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener('click', () => this.handleClick(), {\n signal,\n });\n this.target.addEventListener(\n 'pointerdown',\n () => this.handlePointerdown(),\n { signal }\n );\n this.target.addEventListener('focusout', () => this.handleFocusOut(), {\n signal,\n });\n }\n}\n"],
|
|
5
|
+
"mappings": "aAWA,OACI,yBAAAA,EACA,oBAAAC,EACA,2BAAAC,MACG,6BACP,OAAS,YAAAC,MAAgB,kCAElB,aAAM,yBAAyBH,CAAsB,CAArD,kCACH,KAAS,KAAOC,EAAiB,OAEjC,aAAoB,CACZ,KAAK,mBAAqB,OAC1B,KAAK,KAAO,CAAC,KAAK,MAEtB,KAAK,kBAAoB,IAC7B,CAEgB,mBAA0B,CACtC,KAAK,kBAAoB,KAAK,KAAO,MAAQ,KACzCE,EAAS,GACT,KAAK,OAAO,UAAU,IAAID,CAAuB,CAEzD,CAEQ,gBAAuB,CACvB,KAAK,KAAK,MAIVC,EAAS,GACT,KAAK,OAAO,UAAU,SAASD,CAAuB,GAEtD,KAAK,OAAO,UAAU,OAAOA,CAAuB,CAE5D,CAES,MAAa,CA/C1B,IAAAE,GAiDQA,EAAA,KAAK,kBAAL,MAAAA,EAAsB,QACtB,KAAK,gBAAkB,IAAI,gBAC3B,KAAM,CAAE,OAAAC,CAAO,EAAI,KAAK,gBACxB,KAAK,OAAO,iBAAiB,QAAS,IAAM,KAAK,YAAY,EAAG,CAC5D,OAAAA,CACJ,CAAC,EACD,KAAK,OAAO,iBACR,cACA,IAAM,KAAK,kBAAkB,EAC7B,CAAE,OAAAA,CAAO,CACb,EACA,KAAK,OAAO,iBAAiB,WAAY,IAAM,KAAK,eAAe,EAAG,CAClE,OAAAA,CACJ,CAAC,CACL,CACJ",
|
|
6
|
+
"names": ["InteractionController", "InteractionTypes", "SAFARI_FOCUS_RING_CLASS", "isWebKit", "_a", "signal"]
|
|
7
7
|
}
|
package/src/Picker.d.ts
CHANGED
|
@@ -31,6 +31,12 @@ export declare class PickerBase extends PickerBase_base {
|
|
|
31
31
|
focused: boolean;
|
|
32
32
|
icons?: 'only' | 'none';
|
|
33
33
|
invalid: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Forces the Picker to render as a popover on mobile instead of a tray.
|
|
36
|
+
*
|
|
37
|
+
* @memberof PickerBase
|
|
38
|
+
*/
|
|
39
|
+
forcePopover: boolean;
|
|
34
40
|
/** Whether the items are currently loading. */
|
|
35
41
|
pending: boolean;
|
|
36
42
|
/** Defines a string value that labels the Picker while it is in pending state. */
|
package/src/Picker.dev.js
CHANGED
|
@@ -59,6 +59,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
|
|
|
59
59
|
this.disabled = false;
|
|
60
60
|
this.focused = false;
|
|
61
61
|
this.invalid = false;
|
|
62
|
+
this.forcePopover = false;
|
|
62
63
|
this.pending = false;
|
|
63
64
|
this.pendingLabel = "Pending";
|
|
64
65
|
this.open = false;
|
|
@@ -476,7 +477,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
|
|
|
476
477
|
const accessibleMenu = html`
|
|
477
478
|
${this.dismissHelper} ${menu} ${this.dismissHelper}
|
|
478
479
|
`;
|
|
479
|
-
if (this.isMobile.matches) {
|
|
480
|
+
if (this.isMobile.matches && !this.forcePopover) {
|
|
480
481
|
this.dependencyManager.add("sp-tray");
|
|
481
482
|
import("@spectrum-web-components/tray/sp-tray.js");
|
|
482
483
|
return html`
|
|
@@ -631,6 +632,9 @@ __decorateClass([
|
|
|
631
632
|
__decorateClass([
|
|
632
633
|
property({ type: Boolean, reflect: true })
|
|
633
634
|
], PickerBase.prototype, "invalid", 2);
|
|
635
|
+
__decorateClass([
|
|
636
|
+
property({ type: Boolean, reflect: true })
|
|
637
|
+
], PickerBase.prototype, "forcePopover", 2);
|
|
634
638
|
__decorateClass([
|
|
635
639
|
property({ type: Boolean, reflect: true })
|
|
636
640
|
], PickerBase.prototype, "pending", 2);
|