@spectrum-web-components/overlay 1.1.0-beta.2 → 1.1.0-beta.21
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/overlay",
|
|
3
|
-
"version": "1.1.0-beta.
|
|
3
|
+
"version": "1.1.0-beta.21",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -160,11 +160,11 @@
|
|
|
160
160
|
"dependencies": {
|
|
161
161
|
"@floating-ui/dom": "^1.6.1",
|
|
162
162
|
"@floating-ui/utils": "^0.2.1",
|
|
163
|
-
"@spectrum-web-components/action-button": "^1.1.0-beta.
|
|
164
|
-
"@spectrum-web-components/base": "^1.1.0-beta.
|
|
165
|
-
"@spectrum-web-components/reactive-controllers": "^1.1.0-beta.
|
|
166
|
-
"@spectrum-web-components/shared": "^1.1.0-beta.
|
|
167
|
-
"@spectrum-web-components/theme": "^1.1.0-beta.
|
|
163
|
+
"@spectrum-web-components/action-button": "^1.1.0-beta.21",
|
|
164
|
+
"@spectrum-web-components/base": "^1.1.0-beta.21",
|
|
165
|
+
"@spectrum-web-components/reactive-controllers": "^1.1.0-beta.21",
|
|
166
|
+
"@spectrum-web-components/shared": "^1.1.0-beta.21",
|
|
167
|
+
"@spectrum-web-components/theme": "^1.1.0-beta.21"
|
|
168
168
|
},
|
|
169
169
|
"types": "./src/index.d.ts",
|
|
170
170
|
"customElements": "custom-elements.json",
|
|
@@ -176,5 +176,5 @@
|
|
|
176
176
|
"./stories/overlay-story-components.js",
|
|
177
177
|
"./**/*.dev.js"
|
|
178
178
|
],
|
|
179
|
-
"gitHead": "
|
|
179
|
+
"gitHead": "ad9ae8ce3792bdcf6fc50998e839840f334d1e72"
|
|
180
180
|
}
|
package/src/OverlayDialog.dev.js
CHANGED
|
@@ -15,6 +15,7 @@ export function OverlayDialog(constructor) {
|
|
|
15
15
|
class OverlayWithDialog extends constructor {
|
|
16
16
|
async manageDialogOpen() {
|
|
17
17
|
const targetOpenState = this.open;
|
|
18
|
+
await nextFrame();
|
|
18
19
|
await this.managePosition();
|
|
19
20
|
if (this.open !== targetOpenState) {
|
|
20
21
|
return;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayDialog.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*/\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { Constructor, OpenableElement } from './overlay-types.dev.js'\nimport { guaranteedAllTransitionend, nextFrame } from './AbstractOverlay.dev.js'\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.dev.js'\nimport type { AbstractOverlay } from './AbstractOverlay.dev.js'\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nexport function OverlayDialog<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithDialog extends constructor {\n protected override async manageDialogOpen(): Promise<void> {\n const targetOpenState = this.open;\n await this.managePosition();\n if (this.open !== targetOpenState) {\n return;\n }\n const focusEl = await this.dialogMakeTransition(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.dialogApplyFocus(targetOpenState, focusEl);\n }\n\n protected async dialogMakeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n let focusEl = null as HTMLElement | null;\n const start =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n el.open = targetOpenState;\n if (!targetOpenState) {\n const close = (): void => {\n el.removeEventListener('close', close);\n finish(el, index);\n };\n el.addEventListener('close', close);\n }\n if (index > 0) {\n // Announce workflow on the first element _only_.\n return;\n }\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n if (!targetOpenState) {\n // Show/focus workflow when opening _only_.\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (!focusEl) {\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n }\n if (!this.isConnected || this.dialogEl.open) {\n // In both of these cases the browser will error.\n // You can neither \"reopen\" a <dialog> or open one that is not on the DOM.\n return;\n }\n this.dialogEl.showModal();\n };\n const finish = (el: OpenableElement, index: number) => (): void => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n if (!this.isConnected || targetOpenState !== this.open) {\n // Don't lead into the `.close()` workflow if not connected to the DOM.\n // The browser will error in this case.\n return;\n }\n const reportChange = async (): Promise<void> => {\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (!targetOpenState && this.dialogEl.open) {\n this.dialogEl.addEventListener(\n 'close',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.close();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n\n protected async dialogApplyFocus(\n targetOpenState: boolean,\n focusEl: HTMLElement | null\n ): Promise<void> {\n /**\n * Focus should be handled natively in `<dialog>` elements when leveraging `.showModal()`, but it's NOT.\n * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507\n * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398\n **/\n this.applyFocus(targetOpenState, focusEl);\n }\n }\n return OverlayWithDialog;\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*/\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { Constructor, OpenableElement } from './overlay-types.dev.js'\nimport { guaranteedAllTransitionend, nextFrame } from './AbstractOverlay.dev.js'\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.dev.js'\nimport type { AbstractOverlay } from './AbstractOverlay.dev.js'\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nexport function OverlayDialog<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithDialog extends constructor {\n protected override async manageDialogOpen(): Promise<void> {\n const targetOpenState = this.open;\n await nextFrame();\n await this.managePosition();\n if (this.open !== targetOpenState) {\n return;\n }\n const focusEl = await this.dialogMakeTransition(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.dialogApplyFocus(targetOpenState, focusEl);\n }\n\n protected async dialogMakeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n let focusEl = null as HTMLElement | null;\n const start =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n el.open = targetOpenState;\n if (!targetOpenState) {\n const close = (): void => {\n el.removeEventListener('close', close);\n finish(el, index);\n };\n el.addEventListener('close', close);\n }\n if (index > 0) {\n // Announce workflow on the first element _only_.\n return;\n }\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n if (!targetOpenState) {\n // Show/focus workflow when opening _only_.\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (!focusEl) {\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n }\n if (!this.isConnected || this.dialogEl.open) {\n // In both of these cases the browser will error.\n // You can neither \"reopen\" a <dialog> or open one that is not on the DOM.\n return;\n }\n this.dialogEl.showModal();\n };\n const finish = (el: OpenableElement, index: number) => (): void => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n if (!this.isConnected || targetOpenState !== this.open) {\n // Don't lead into the `.close()` workflow if not connected to the DOM.\n // The browser will error in this case.\n return;\n }\n const reportChange = async (): Promise<void> => {\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (!targetOpenState && this.dialogEl.open) {\n this.dialogEl.addEventListener(\n 'close',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.close();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n\n protected async dialogApplyFocus(\n targetOpenState: boolean,\n focusEl: HTMLElement | null\n ): Promise<void> {\n /**\n * Focus should be handled natively in `<dialog>` elements when leveraging `.showModal()`, but it's NOT.\n * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507\n * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398\n **/\n this.applyFocus(targetOpenState, focusEl);\n }\n }\n return OverlayWithDialog;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/OverlayDialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{firstFocusableIn as u,firstFocusableSlottedIn as d}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{VirtualTrigger as f}from"./VirtualTrigger.js";import{guaranteedAllTransitionend as E,nextFrame as
|
|
1
|
+
"use strict";import{firstFocusableIn as u,firstFocusableSlottedIn as d}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{VirtualTrigger as f}from"./VirtualTrigger.js";import{guaranteedAllTransitionend as E,nextFrame as a}from"./AbstractOverlay.js";import{BeforetoggleClosedEvent as v,BeforetoggleOpenEvent as g,OverlayStateEvent as l}from"./events.js";import{userFocusableSelector as y}from"@spectrum-web-components/shared";export function OverlayDialog(h){class p extends h{async manageDialogOpen(){const e=this.open;if(await a(),await this.managePosition(),this.open!==e)return;const i=await this.dialogMakeTransition(e);this.open===e&&await this.dialogApplyFocus(e,i)}async dialogMakeTransition(e){let i=null;const m=(t,s)=>async()=>{if(t.open=e,!e){const n=()=>{t.removeEventListener("close",n),c(t,s)};t.addEventListener("close",n)}if(s>0)return;const o=e?g:v;this.dispatchEvent(new o),e&&(t.matches(y)&&(i=t),i=i||u(t),i||t.querySelectorAll("slot").forEach(r=>{i||(i=d(r))}),!(!this.isConnected||this.dialogEl.open)&&this.dialogEl.showModal())},c=(t,s)=>()=>{if(this.open!==e)return;const o=e?"sp-opened":"sp-closed";if(s>0){t.dispatchEvent(new l(o,this,{interaction:this.type,publish:!1}));return}if(!this.isConnected||e!==this.open)return;const n=async()=>{const r=this.triggerElement instanceof f;this.dispatchEvent(new l(o,this,{interaction:this.type,publish:r})),t.dispatchEvent(new l(o,this,{interaction:this.type,publish:!1})),this.triggerElement&&!r&&this.triggerElement.dispatchEvent(new l(o,this,{interaction:this.type,publish:!0})),this.state=e?"opened":"closed",this.returnFocus(),await a(),await a(),e===this.open&&e===!1&&this.requestSlottable()};!e&&this.dialogEl.open?(this.dialogEl.addEventListener("close",()=>{n()},{once:!0}),this.dialogEl.close()):n()};return this.elements.forEach((t,s)=>{E(t,m(t,s),c(t,s))}),i}async dialogApplyFocus(e,i){this.applyFocus(e,i)}}return p}
|
|
2
2
|
//# sourceMappingURL=OverlayDialog.js.map
|
package/src/OverlayDialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayDialog.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*/\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport { Constructor, OpenableElement } from './overlay-types.js';\nimport { guaranteedAllTransitionend, nextFrame } from './AbstractOverlay.js';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.js';\nimport type { AbstractOverlay } from './AbstractOverlay.js';\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nexport function OverlayDialog<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithDialog extends constructor {\n protected override async manageDialogOpen(): Promise<void> {\n const targetOpenState = this.open;\n await this.managePosition();\n if (this.open !== targetOpenState) {\n return;\n }\n const focusEl = await this.dialogMakeTransition(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.dialogApplyFocus(targetOpenState, focusEl);\n }\n\n protected async dialogMakeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n let focusEl = null as HTMLElement | null;\n const start =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n el.open = targetOpenState;\n if (!targetOpenState) {\n const close = (): void => {\n el.removeEventListener('close', close);\n finish(el, index);\n };\n el.addEventListener('close', close);\n }\n if (index > 0) {\n // Announce workflow on the first element _only_.\n return;\n }\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n if (!targetOpenState) {\n // Show/focus workflow when opening _only_.\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (!focusEl) {\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n }\n if (!this.isConnected || this.dialogEl.open) {\n // In both of these cases the browser will error.\n // You can neither \"reopen\" a <dialog> or open one that is not on the DOM.\n return;\n }\n this.dialogEl.showModal();\n };\n const finish = (el: OpenableElement, index: number) => (): void => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n if (!this.isConnected || targetOpenState !== this.open) {\n // Don't lead into the `.close()` workflow if not connected to the DOM.\n // The browser will error in this case.\n return;\n }\n const reportChange = async (): Promise<void> => {\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (!targetOpenState && this.dialogEl.open) {\n this.dialogEl.addEventListener(\n 'close',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.close();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n\n protected async dialogApplyFocus(\n targetOpenState: boolean,\n focusEl: HTMLElement | null\n ): Promise<void> {\n /**\n * Focus should be handled natively in `<dialog>` elements when leveraging `.showModal()`, but it's NOT.\n * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507\n * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398\n **/\n this.applyFocus(targetOpenState, focusEl);\n }\n }\n return OverlayWithDialog;\n}\n"],
|
|
5
|
-
"mappings": "aAYA,OACI,oBAAAA,EACA,2BAAAC,MACG,4DACP,OAAS,kBAAAC,MAAsB,sBAE/B,OAAS,8BAAAC,EAA4B,aAAAC,MAAiB,uBACtD,OACI,2BAAAC,EACA,yBAAAC,EACA,qBAAAC,MACG,cAEP,OAAS,yBAAAC,MAA6B,kCAE/B,gBAAS,cACZC,EACgC,CAChC,MAAMC,UAA0BD,CAAY,CACxC,MAAyB,kBAAkC,CACvD,MAAME,EAAkB,KAAK,
|
|
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*/\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport { Constructor, OpenableElement } from './overlay-types.js';\nimport { guaranteedAllTransitionend, nextFrame } from './AbstractOverlay.js';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.js';\nimport type { AbstractOverlay } from './AbstractOverlay.js';\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nexport function OverlayDialog<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithDialog extends constructor {\n protected override async manageDialogOpen(): Promise<void> {\n const targetOpenState = this.open;\n await nextFrame();\n await this.managePosition();\n if (this.open !== targetOpenState) {\n return;\n }\n const focusEl = await this.dialogMakeTransition(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.dialogApplyFocus(targetOpenState, focusEl);\n }\n\n protected async dialogMakeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n let focusEl = null as HTMLElement | null;\n const start =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n el.open = targetOpenState;\n if (!targetOpenState) {\n const close = (): void => {\n el.removeEventListener('close', close);\n finish(el, index);\n };\n el.addEventListener('close', close);\n }\n if (index > 0) {\n // Announce workflow on the first element _only_.\n return;\n }\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n if (!targetOpenState) {\n // Show/focus workflow when opening _only_.\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (!focusEl) {\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n }\n if (!this.isConnected || this.dialogEl.open) {\n // In both of these cases the browser will error.\n // You can neither \"reopen\" a <dialog> or open one that is not on the DOM.\n return;\n }\n this.dialogEl.showModal();\n };\n const finish = (el: OpenableElement, index: number) => (): void => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n if (!this.isConnected || targetOpenState !== this.open) {\n // Don't lead into the `.close()` workflow if not connected to the DOM.\n // The browser will error in this case.\n return;\n }\n const reportChange = async (): Promise<void> => {\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (!targetOpenState && this.dialogEl.open) {\n this.dialogEl.addEventListener(\n 'close',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.close();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n\n protected async dialogApplyFocus(\n targetOpenState: boolean,\n focusEl: HTMLElement | null\n ): Promise<void> {\n /**\n * Focus should be handled natively in `<dialog>` elements when leveraging `.showModal()`, but it's NOT.\n * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507\n * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398\n **/\n this.applyFocus(targetOpenState, focusEl);\n }\n }\n return OverlayWithDialog;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["firstFocusableIn", "firstFocusableSlottedIn", "VirtualTrigger", "guaranteedAllTransitionend", "nextFrame", "BeforetoggleClosedEvent", "BeforetoggleOpenEvent", "OverlayStateEvent", "userFocusableSelector", "constructor", "OverlayWithDialog", "targetOpenState", "focusEl", "start", "el", "index", "close", "finish", "event", "slot", "eventName", "reportChange", "hasVirtualTrigger"]
|
|
7
7
|
}
|