@spectrum-web-components/overlay 1.1.1 → 1.1.2
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 +7 -7
- package/src/AbstractOverlay.d.ts +4 -0
- package/src/AbstractOverlay.dev.js +28 -0
- package/src/AbstractOverlay.dev.js.map +2 -2
- package/src/AbstractOverlay.js +1 -1
- package/src/AbstractOverlay.js.map +2 -2
- package/src/OverlayDialog.dev.js +2 -0
- package/src/OverlayDialog.dev.js.map +2 -2
- package/src/OverlayDialog.js +1 -1
- package/src/OverlayDialog.js.map +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/overlay",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
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.
|
|
164
|
-
"@spectrum-web-components/base": "^1.1.
|
|
165
|
-
"@spectrum-web-components/reactive-controllers": "^1.1.
|
|
166
|
-
"@spectrum-web-components/shared": "^1.1.
|
|
167
|
-
"@spectrum-web-components/theme": "^1.1.
|
|
163
|
+
"@spectrum-web-components/action-button": "^1.1.2",
|
|
164
|
+
"@spectrum-web-components/base": "^1.1.2",
|
|
165
|
+
"@spectrum-web-components/reactive-controllers": "^1.1.2",
|
|
166
|
+
"@spectrum-web-components/shared": "^1.1.2",
|
|
167
|
+
"@spectrum-web-components/theme": "^1.1.2"
|
|
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": "9ee45f2dfd3ac1939072726d00195c6c05d9a562"
|
|
180
180
|
}
|
package/src/AbstractOverlay.d.ts
CHANGED
|
@@ -69,4 +69,8 @@ export declare class AbstractOverlay extends SpectrumElement {
|
|
|
69
69
|
static open(trigger: HTMLElement, interaction: TriggerInteractionsV1, content: HTMLElement, optionsV1: OverlayOptionsV1): Promise<() => void>;
|
|
70
70
|
static open(content: HTMLElement, options?: OverlayOptions): Promise<Overlay>;
|
|
71
71
|
static applyOptions(overlay: AbstractOverlay, options: OverlayOptions): void;
|
|
72
|
+
private iosEventPropagationController?;
|
|
73
|
+
protected setupIOSEventManagement(): void;
|
|
74
|
+
protected cleanupIOSEventManagement(): void;
|
|
75
|
+
disconnectedCallback(): void;
|
|
72
76
|
}
|
|
@@ -230,5 +230,33 @@ export class AbstractOverlay extends SpectrumElement {
|
|
|
230
230
|
overlay.placement = options.placement;
|
|
231
231
|
overlay.willPreventClose = !!options.notImmediatelyClosable;
|
|
232
232
|
}
|
|
233
|
+
setupIOSEventManagement() {
|
|
234
|
+
this.iosEventPropagationController = new AbortController();
|
|
235
|
+
this.dialogEl.addEventListener(
|
|
236
|
+
"pointerup",
|
|
237
|
+
(event) => event.stopPropagation(),
|
|
238
|
+
{
|
|
239
|
+
capture: true,
|
|
240
|
+
signal: this.iosEventPropagationController.signal
|
|
241
|
+
}
|
|
242
|
+
);
|
|
243
|
+
this.dialogEl.addEventListener(
|
|
244
|
+
"touchend",
|
|
245
|
+
(event) => event.stopPropagation(),
|
|
246
|
+
{
|
|
247
|
+
capture: true,
|
|
248
|
+
signal: this.iosEventPropagationController.signal
|
|
249
|
+
}
|
|
250
|
+
);
|
|
251
|
+
}
|
|
252
|
+
cleanupIOSEventManagement() {
|
|
253
|
+
var _a;
|
|
254
|
+
(_a = this.iosEventPropagationController) == null ? void 0 : _a.abort();
|
|
255
|
+
this.iosEventPropagationController = void 0;
|
|
256
|
+
}
|
|
257
|
+
disconnectedCallback() {
|
|
258
|
+
this.cleanupIOSEventManagement();
|
|
259
|
+
super.disconnectedCallback();
|
|
260
|
+
}
|
|
233
261
|
}
|
|
234
262
|
//# sourceMappingURL=AbstractOverlay.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["AbstractOverlay.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 { SpectrumElement } from '@spectrum-web-components/base';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\n\nimport type {\n OpenableElement,\n OverlayOptions,\n OverlayOptionsV1,\n OverlayState,\n OverlayTypes,\n Placement,\n TriggerInteractionsV1,\n} from './overlay-types.dev.js'\nimport type { Overlay } from './Overlay.dev.js'\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { OverlayTimer } from './overlay-timer.dev.js'\nimport type { PlacementController } from './PlacementController.dev.js'\nimport type { ElementResolutionController } from '@spectrum-web-components/reactive-controllers/src/ElementResolution.js';\n\nexport const overlayTimer = new OverlayTimer();\n\nexport const noop = (): void => {\n return;\n};\n\n/**\n * Apply a \"transitionend\" listener to an element that may not transition but\n * guarantee the callback will be fired either way.\n *\n * @param el {HTMLElement} - Target of the \"transition\" listeners.\n * @param action {Function} - Method to trigger the \"transition\".\n * @param cb {Function} - Callback to trigger when the \"transition\" has ended.\n */\nexport const guaranteedAllTransitionend = (\n el: HTMLElement,\n action: () => void,\n cb: () => void\n): void => {\n const abortController = new AbortController();\n const runningTransitions = new Map<string, number>();\n const cleanup = (): void => {\n abortController.abort();\n cb();\n };\n let guarantee2: number;\n let guarantee3: number;\n // WebKit fires `transitionrun` a little earlier, the multiple guarantees here\n // allow WebKit to be caught, but doesn't remove the animation listener until\n // after it would have fired in Chromium.\n const guarantee1 = requestAnimationFrame(() => {\n guarantee2 = requestAnimationFrame(() => {\n guarantee3 = requestAnimationFrame(() => {\n cleanup();\n });\n });\n });\n const handleTransitionend = (event: TransitionEvent): void => {\n if (event.target !== el) {\n return;\n }\n runningTransitions.set(\n event.propertyName,\n (runningTransitions.get(event.propertyName) as number) - 1\n );\n if (!runningTransitions.get(event.propertyName)) {\n runningTransitions.delete(event.propertyName);\n }\n if (runningTransitions.size === 0) {\n cleanup();\n }\n };\n const handleTransitionrun = (event: TransitionEvent): void => {\n if (event.target !== el) {\n return;\n }\n if (!runningTransitions.has(event.propertyName)) {\n runningTransitions.set(event.propertyName, 0);\n }\n runningTransitions.set(\n event.propertyName,\n (runningTransitions.get(event.propertyName) as number) + 1\n );\n cancelAnimationFrame(guarantee1);\n cancelAnimationFrame(guarantee2);\n cancelAnimationFrame(guarantee3);\n };\n el.addEventListener('transitionrun', handleTransitionrun, {\n signal: abortController.signal,\n });\n el.addEventListener('transitionend', handleTransitionend, {\n signal: abortController.signal,\n });\n el.addEventListener('transitioncancel', handleTransitionend, {\n signal: abortController.signal,\n });\n action();\n};\n\nexport function nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\n/**\n * Abstract Overlay base class so that property tyings and imperative API\n * interfaces can be held separate from the actual class definition.\n */\nexport class AbstractOverlay extends SpectrumElement {\n protected async applyFocus(\n _targetOpenState: boolean,\n _focusEl: HTMLElement | null\n ): Promise<void> {\n return;\n }\n /* c8 ignore next 6 */\n get delayed(): boolean {\n return false;\n }\n set delayed(_delayed: boolean) {\n return;\n }\n dialogEl!: HTMLDialogElement & {\n showPopover(): void;\n hidePopover(): void;\n };\n /* c8 ignore next 6 */\n get disabled(): boolean {\n return false;\n }\n set disabled(_disabled: boolean) {\n return;\n }\n dispose = noop;\n protected get elementResolver(): ElementResolutionController {\n return this._elementResolver;\n }\n protected set elementResolver(controller) {\n this._elementResolver = controller;\n }\n protected _elementResolver!: ElementResolutionController;\n /* c8 ignore next 3 */\n protected async ensureOnDOM(_targetOpenState: boolean): Promise<void> {\n return;\n }\n elements!: OpenableElement[];\n /* c8 ignore next 5 */\n protected async makeTransition(\n _targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n return null;\n }\n protected async manageDelay(_targetOpenState: boolean): Promise<void> {\n return;\n }\n /* c8 ignore next 3 */\n protected async manageDialogOpen(): Promise<void> {\n return;\n }\n /* c8 ignore next 3 */\n protected async managePopoverOpen(): Promise<void> {\n return;\n }\n /* c8 ignore next 3 */\n protected managePosition(): void {\n return;\n }\n protected offset: number | [number, number] = 0;\n /* c8 ignore next 6 */\n get open(): boolean {\n return false;\n }\n set open(_open: boolean) {\n return;\n }\n placement?: Placement;\n protected get placementController(): PlacementController {\n return this._placementController;\n }\n protected set placementController(controller) {\n this._placementController = controller;\n }\n protected _placementController!: PlacementController;\n receivesFocus!: 'true' | 'false' | 'auto';\n protected requestSlottable(): void {}\n protected returnFocus(): void {\n return;\n }\n /* c8 ignore next 6 */\n get state(): OverlayState {\n return 'closed';\n }\n set state(_state: OverlayState) {\n return;\n }\n protected _state!: OverlayState;\n triggerElement!: HTMLElement | VirtualTrigger | null;\n type!: OverlayTypes;\n willPreventClose = false;\n /* c8 ignore next 3 */\n public manuallyKeepOpen(): void {\n return;\n }\n\n public static update(): void {\n const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n document.dispatchEvent(overlayUpdateEvent);\n }\n\n /**\n * Overloaded imperative API entry point that allows for both the pre-0.37.0\n * argument signature as well as the post-0.37.0 signature. This allows for\n * consumers to continue to leverage it as they had been in previous releases\n * while also surfacing the more feature-rich API that has been made available.\n */\n public static async open(\n trigger: HTMLElement,\n interaction: TriggerInteractionsV1,\n content: HTMLElement,\n optionsV1: OverlayOptionsV1\n ): Promise<() => void>;\n public static async open(\n content: HTMLElement,\n options?: OverlayOptions\n ): Promise<Overlay>;\n public static async open(\n triggerOrContent: HTMLElement,\n interactionOrOptions:\n | TriggerInteractionsV1\n | OverlayOptions\n | undefined,\n content?: HTMLElement,\n optionsV1?: OverlayOptionsV1\n ): Promise<Overlay | (() => void)> {\n await import('@spectrum-web-components/overlay/sp-overlay.js');\n const v2 = arguments.length === 2;\n const overlayContent = content || triggerOrContent;\n // Use the `this` from the `static` method context rather than a\n // specific imported constructor to prevent opening a circular dependency.\n const overlay = new this() as Overlay;\n let restored = false;\n overlay.dispose = () => {\n overlay.addEventListener('sp-closed', () => {\n if (!restored) {\n restoreContent();\n restored = true;\n }\n requestAnimationFrame(() => {\n overlay.remove();\n });\n });\n overlay.open = false;\n overlay.dispose = noop;\n };\n /**\n * Since content must exist in an <sp-overlay>, we need a way to get it there.\n * The best & most-direct way is to declaratively use an <sp-overlay> element,\n * but for imperative users, we'll reparent content into an overlay that we've created for them.\n **/\n const restoreContent = reparentChildren([overlayContent], overlay, {\n position: 'beforeend',\n prepareCallback: (el) => {\n // Ensure that content to be overlaid is no longer targetted to a specific `slot`.\n // This allow for it to be visible in the overlaid context.\n const slot = el.slot;\n el.removeAttribute('slot');\n return () => {\n el.slot = slot;\n };\n },\n });\n\n const v1 = !v2 && overlayContent && optionsV1;\n if (v1) {\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n overlay,\n `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/overlay/',\n { level: 'deprecation' }\n );\n }\n const trigger = triggerOrContent;\n const interaction = interactionOrOptions;\n const options = optionsV1;\n AbstractOverlay.applyOptions(overlay, {\n ...options,\n delayed:\n options.delayed || overlayContent.hasAttribute('delayed'),\n trigger: options.virtualTrigger || trigger,\n type:\n interaction === 'modal'\n ? 'modal'\n : interaction === 'hover'\n ? 'hint'\n : 'auto',\n });\n trigger.insertAdjacentElement('afterend', overlay);\n await overlay.updateComplete;\n overlay.open = true;\n return overlay.dispose;\n }\n\n const options = interactionOrOptions as OverlayOptions;\n overlay.append(overlayContent);\n AbstractOverlay.applyOptions(overlay, {\n ...options,\n delayed: options.delayed || overlayContent.hasAttribute('delayed'),\n });\n overlay.updateComplete.then(() => {\n // Do we want to \"open\" this path, or leave that to the consumer?\n overlay.open = true;\n });\n return overlay;\n }\n\n static applyOptions(\n overlay: AbstractOverlay,\n options: OverlayOptions\n ): void {\n overlay.delayed = !!options.delayed;\n overlay.receivesFocus = options.receivesFocus ?? 'auto';\n overlay.triggerElement = options.trigger || null;\n overlay.type = options.type || 'modal';\n overlay.offset = options.offset ?? 0;\n overlay.placement = options.placement;\n overlay.willPreventClose = !!options.notImmediatelyClosable;\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*/\nimport { SpectrumElement } from '@spectrum-web-components/base';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\n\nimport type {\n OpenableElement,\n OverlayOptions,\n OverlayOptionsV1,\n OverlayState,\n OverlayTypes,\n Placement,\n TriggerInteractionsV1,\n} from './overlay-types.dev.js'\nimport type { Overlay } from './Overlay.dev.js'\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { OverlayTimer } from './overlay-timer.dev.js'\nimport type { PlacementController } from './PlacementController.dev.js'\nimport type { ElementResolutionController } from '@spectrum-web-components/reactive-controllers/src/ElementResolution.js';\n\nexport const overlayTimer = new OverlayTimer();\n\nexport const noop = (): void => {\n return;\n};\n\n/**\n * Apply a \"transitionend\" listener to an element that may not transition but\n * guarantee the callback will be fired either way.\n *\n * @param el {HTMLElement} - Target of the \"transition\" listeners.\n * @param action {Function} - Method to trigger the \"transition\".\n * @param cb {Function} - Callback to trigger when the \"transition\" has ended.\n */\nexport const guaranteedAllTransitionend = (\n el: HTMLElement,\n action: () => void,\n cb: () => void\n): void => {\n const abortController = new AbortController();\n const runningTransitions = new Map<string, number>();\n const cleanup = (): void => {\n abortController.abort();\n cb();\n };\n let guarantee2: number;\n let guarantee3: number;\n // WebKit fires `transitionrun` a little earlier, the multiple guarantees here\n // allow WebKit to be caught, but doesn't remove the animation listener until\n // after it would have fired in Chromium.\n const guarantee1 = requestAnimationFrame(() => {\n guarantee2 = requestAnimationFrame(() => {\n guarantee3 = requestAnimationFrame(() => {\n cleanup();\n });\n });\n });\n const handleTransitionend = (event: TransitionEvent): void => {\n if (event.target !== el) {\n return;\n }\n runningTransitions.set(\n event.propertyName,\n (runningTransitions.get(event.propertyName) as number) - 1\n );\n if (!runningTransitions.get(event.propertyName)) {\n runningTransitions.delete(event.propertyName);\n }\n if (runningTransitions.size === 0) {\n cleanup();\n }\n };\n const handleTransitionrun = (event: TransitionEvent): void => {\n if (event.target !== el) {\n return;\n }\n if (!runningTransitions.has(event.propertyName)) {\n runningTransitions.set(event.propertyName, 0);\n }\n runningTransitions.set(\n event.propertyName,\n (runningTransitions.get(event.propertyName) as number) + 1\n );\n cancelAnimationFrame(guarantee1);\n cancelAnimationFrame(guarantee2);\n cancelAnimationFrame(guarantee3);\n };\n el.addEventListener('transitionrun', handleTransitionrun, {\n signal: abortController.signal,\n });\n el.addEventListener('transitionend', handleTransitionend, {\n signal: abortController.signal,\n });\n el.addEventListener('transitioncancel', handleTransitionend, {\n signal: abortController.signal,\n });\n action();\n};\n\nexport function nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\n/**\n * Abstract Overlay base class so that property tyings and imperative API\n * interfaces can be held separate from the actual class definition.\n */\nexport class AbstractOverlay extends SpectrumElement {\n protected async applyFocus(\n _targetOpenState: boolean,\n _focusEl: HTMLElement | null\n ): Promise<void> {\n return;\n }\n /* c8 ignore next 6 */\n get delayed(): boolean {\n return false;\n }\n set delayed(_delayed: boolean) {\n return;\n }\n dialogEl!: HTMLDialogElement & {\n showPopover(): void;\n hidePopover(): void;\n };\n /* c8 ignore next 6 */\n get disabled(): boolean {\n return false;\n }\n set disabled(_disabled: boolean) {\n return;\n }\n dispose = noop;\n protected get elementResolver(): ElementResolutionController {\n return this._elementResolver;\n }\n protected set elementResolver(controller) {\n this._elementResolver = controller;\n }\n protected _elementResolver!: ElementResolutionController;\n /* c8 ignore next 3 */\n protected async ensureOnDOM(_targetOpenState: boolean): Promise<void> {\n return;\n }\n elements!: OpenableElement[];\n /* c8 ignore next 5 */\n protected async makeTransition(\n _targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n return null;\n }\n protected async manageDelay(_targetOpenState: boolean): Promise<void> {\n return;\n }\n /* c8 ignore next 3 */\n protected async manageDialogOpen(): Promise<void> {\n return;\n }\n /* c8 ignore next 3 */\n protected async managePopoverOpen(): Promise<void> {\n return;\n }\n /* c8 ignore next 3 */\n protected managePosition(): void {\n return;\n }\n protected offset: number | [number, number] = 0;\n /* c8 ignore next 6 */\n get open(): boolean {\n return false;\n }\n set open(_open: boolean) {\n return;\n }\n placement?: Placement;\n protected get placementController(): PlacementController {\n return this._placementController;\n }\n protected set placementController(controller) {\n this._placementController = controller;\n }\n protected _placementController!: PlacementController;\n receivesFocus!: 'true' | 'false' | 'auto';\n protected requestSlottable(): void {}\n protected returnFocus(): void {\n return;\n }\n /* c8 ignore next 6 */\n get state(): OverlayState {\n return 'closed';\n }\n set state(_state: OverlayState) {\n return;\n }\n protected _state!: OverlayState;\n triggerElement!: HTMLElement | VirtualTrigger | null;\n type!: OverlayTypes;\n willPreventClose = false;\n /* c8 ignore next 3 */\n public manuallyKeepOpen(): void {\n return;\n }\n\n public static update(): void {\n const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n document.dispatchEvent(overlayUpdateEvent);\n }\n\n /**\n * Overloaded imperative API entry point that allows for both the pre-0.37.0\n * argument signature as well as the post-0.37.0 signature. This allows for\n * consumers to continue to leverage it as they had been in previous releases\n * while also surfacing the more feature-rich API that has been made available.\n */\n public static async open(\n trigger: HTMLElement,\n interaction: TriggerInteractionsV1,\n content: HTMLElement,\n optionsV1: OverlayOptionsV1\n ): Promise<() => void>;\n public static async open(\n content: HTMLElement,\n options?: OverlayOptions\n ): Promise<Overlay>;\n public static async open(\n triggerOrContent: HTMLElement,\n interactionOrOptions:\n | TriggerInteractionsV1\n | OverlayOptions\n | undefined,\n content?: HTMLElement,\n optionsV1?: OverlayOptionsV1\n ): Promise<Overlay | (() => void)> {\n await import('@spectrum-web-components/overlay/sp-overlay.js');\n const v2 = arguments.length === 2;\n const overlayContent = content || triggerOrContent;\n // Use the `this` from the `static` method context rather than a\n // specific imported constructor to prevent opening a circular dependency.\n const overlay = new this() as Overlay;\n let restored = false;\n overlay.dispose = () => {\n overlay.addEventListener('sp-closed', () => {\n if (!restored) {\n restoreContent();\n restored = true;\n }\n requestAnimationFrame(() => {\n overlay.remove();\n });\n });\n overlay.open = false;\n overlay.dispose = noop;\n };\n /**\n * Since content must exist in an <sp-overlay>, we need a way to get it there.\n * The best & most-direct way is to declaratively use an <sp-overlay> element,\n * but for imperative users, we'll reparent content into an overlay that we've created for them.\n **/\n const restoreContent = reparentChildren([overlayContent], overlay, {\n position: 'beforeend',\n prepareCallback: (el) => {\n // Ensure that content to be overlaid is no longer targetted to a specific `slot`.\n // This allow for it to be visible in the overlaid context.\n const slot = el.slot;\n el.removeAttribute('slot');\n return () => {\n el.slot = slot;\n };\n },\n });\n\n const v1 = !v2 && overlayContent && optionsV1;\n if (v1) {\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n overlay,\n `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/overlay/',\n { level: 'deprecation' }\n );\n }\n const trigger = triggerOrContent;\n const interaction = interactionOrOptions;\n const options = optionsV1;\n AbstractOverlay.applyOptions(overlay, {\n ...options,\n delayed:\n options.delayed || overlayContent.hasAttribute('delayed'),\n trigger: options.virtualTrigger || trigger,\n type:\n interaction === 'modal'\n ? 'modal'\n : interaction === 'hover'\n ? 'hint'\n : 'auto',\n });\n trigger.insertAdjacentElement('afterend', overlay);\n await overlay.updateComplete;\n overlay.open = true;\n return overlay.dispose;\n }\n\n const options = interactionOrOptions as OverlayOptions;\n overlay.append(overlayContent);\n AbstractOverlay.applyOptions(overlay, {\n ...options,\n delayed: options.delayed || overlayContent.hasAttribute('delayed'),\n });\n overlay.updateComplete.then(() => {\n // Do we want to \"open\" this path, or leave that to the consumer?\n overlay.open = true;\n });\n return overlay;\n }\n\n static applyOptions(\n overlay: AbstractOverlay,\n options: OverlayOptions\n ): void {\n overlay.delayed = !!options.delayed;\n overlay.receivesFocus = options.receivesFocus ?? 'auto';\n overlay.triggerElement = options.trigger || null;\n overlay.type = options.type || 'modal';\n overlay.offset = options.offset ?? 0;\n overlay.placement = options.placement;\n overlay.willPreventClose = !!options.notImmediatelyClosable;\n }\n\n private iosEventPropagationController?: AbortController;\n\n protected setupIOSEventManagement(): void {\n // This is a workaround for a bug in iOS <17 where the event leaks out of the dialog to the element below it.\n // Issue - https://github.com/adobe/spectrum-web-components/issues/5042\n this.iosEventPropagationController = new AbortController();\n this.dialogEl.addEventListener(\n 'pointerup',\n (event) => event.stopPropagation(),\n {\n capture: true,\n signal: this.iosEventPropagationController.signal,\n }\n );\n this.dialogEl.addEventListener(\n 'touchend',\n (event) => event.stopPropagation(),\n {\n capture: true,\n signal: this.iosEventPropagationController.signal,\n }\n );\n }\n\n protected cleanupIOSEventManagement(): void {\n this.iosEventPropagationController?.abort();\n this.iosEventPropagationController = undefined;\n }\n\n override disconnectedCallback(): void {\n this.cleanupIOSEventManagement();\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["options"]
|
|
7
7
|
}
|
package/src/AbstractOverlay.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{SpectrumElement as
|
|
1
|
+
"use strict";import{SpectrumElement as y}from"@spectrum-web-components/base";import{reparentChildren as b}from"@spectrum-web-components/shared/src/reparent-children.js";import{OverlayTimer as E}from"./overlay-timer.js";export const overlayTimer=new E,noop=()=>{},guaranteedAllTransitionend=(i,v,e)=>{const r=new AbortController,n=new Map,a=()=>{r.abort(),e()};let d,l;const t=requestAnimationFrame(()=>{d=requestAnimationFrame(()=>{l=requestAnimationFrame(()=>{a()})})}),p=o=>{o.target===i&&(n.set(o.propertyName,n.get(o.propertyName)-1),n.get(o.propertyName)||n.delete(o.propertyName),n.size===0&&a())},m=o=>{o.target===i&&(n.has(o.propertyName)||n.set(o.propertyName,0),n.set(o.propertyName,n.get(o.propertyName)+1),cancelAnimationFrame(t),cancelAnimationFrame(d),cancelAnimationFrame(l))};i.addEventListener("transitionrun",m,{signal:r.signal}),i.addEventListener("transitionend",p,{signal:r.signal}),i.addEventListener("transitioncancel",p,{signal:r.signal}),v()};export function nextFrame(){return new Promise(i=>requestAnimationFrame(()=>i()))}export class AbstractOverlay extends y{constructor(){super(...arguments);this.dispose=noop;this.offset=0;this.willPreventClose=!1}async applyFocus(e,r){}get delayed(){return!1}set delayed(e){}get disabled(){return!1}set disabled(e){}get elementResolver(){return this._elementResolver}set elementResolver(e){this._elementResolver=e}async ensureOnDOM(e){}async makeTransition(e){return null}async manageDelay(e){}async manageDialogOpen(){}async managePopoverOpen(){}managePosition(){}get open(){return!1}set open(e){}get placementController(){return this._placementController}set placementController(e){this._placementController=e}requestSlottable(){}returnFocus(){}get state(){return"closed"}set state(e){}manuallyKeepOpen(){}static update(){const e=new CustomEvent("sp-update-overlays",{bubbles:!0,composed:!0,cancelable:!0});document.dispatchEvent(e)}static async open(e,r,n,a){await import("@spectrum-web-components/overlay/sp-overlay.js");const d=arguments.length===2,l=n||e,t=new this;let p=!1;t.dispose=()=>{t.addEventListener("sp-closed",()=>{p||(m(),p=!0),requestAnimationFrame(()=>{t.remove()})}),t.open=!1,t.dispose=noop};const m=b([l],t,{position:"beforeend",prepareCallback:s=>{const c=s.slot;return s.removeAttribute("slot"),()=>{s.slot=c}}});if(!d&&l&&a){const s=e,c=r,u=a;return AbstractOverlay.applyOptions(t,{...u,delayed:u.delayed||l.hasAttribute("delayed"),trigger:u.virtualTrigger||s,type:c==="modal"?"modal":c==="hover"?"hint":"auto"}),s.insertAdjacentElement("afterend",t),await t.updateComplete,t.open=!0,t.dispose}const g=r;return t.append(l),AbstractOverlay.applyOptions(t,{...g,delayed:g.delayed||l.hasAttribute("delayed")}),t.updateComplete.then(()=>{t.open=!0}),t}static applyOptions(e,r){var n,a;e.delayed=!!r.delayed,e.receivesFocus=(n=r.receivesFocus)!=null?n:"auto",e.triggerElement=r.trigger||null,e.type=r.type||"modal",e.offset=(a=r.offset)!=null?a:0,e.placement=r.placement,e.willPreventClose=!!r.notImmediatelyClosable}setupIOSEventManagement(){this.iosEventPropagationController=new AbortController,this.dialogEl.addEventListener("pointerup",e=>e.stopPropagation(),{capture:!0,signal:this.iosEventPropagationController.signal}),this.dialogEl.addEventListener("touchend",e=>e.stopPropagation(),{capture:!0,signal:this.iosEventPropagationController.signal})}cleanupIOSEventManagement(){var e;(e=this.iosEventPropagationController)==null||e.abort(),this.iosEventPropagationController=void 0}disconnectedCallback(){this.cleanupIOSEventManagement(),super.disconnectedCallback()}}
|
|
2
2
|
//# sourceMappingURL=AbstractOverlay.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["AbstractOverlay.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 { SpectrumElement } from '@spectrum-web-components/base';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\n\nimport type {\n OpenableElement,\n OverlayOptions,\n OverlayOptionsV1,\n OverlayState,\n OverlayTypes,\n Placement,\n TriggerInteractionsV1,\n} from './overlay-types.js';\nimport type { Overlay } from './Overlay.js';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\nimport { OverlayTimer } from './overlay-timer.js';\nimport type { PlacementController } from './PlacementController.js';\nimport type { ElementResolutionController } from '@spectrum-web-components/reactive-controllers/src/ElementResolution.js';\n\nexport const overlayTimer = new OverlayTimer();\n\nexport const noop = (): void => {\n return;\n};\n\n/**\n * Apply a \"transitionend\" listener to an element that may not transition but\n * guarantee the callback will be fired either way.\n *\n * @param el {HTMLElement} - Target of the \"transition\" listeners.\n * @param action {Function} - Method to trigger the \"transition\".\n * @param cb {Function} - Callback to trigger when the \"transition\" has ended.\n */\nexport const guaranteedAllTransitionend = (\n el: HTMLElement,\n action: () => void,\n cb: () => void\n): void => {\n const abortController = new AbortController();\n const runningTransitions = new Map<string, number>();\n const cleanup = (): void => {\n abortController.abort();\n cb();\n };\n let guarantee2: number;\n let guarantee3: number;\n // WebKit fires `transitionrun` a little earlier, the multiple guarantees here\n // allow WebKit to be caught, but doesn't remove the animation listener until\n // after it would have fired in Chromium.\n const guarantee1 = requestAnimationFrame(() => {\n guarantee2 = requestAnimationFrame(() => {\n guarantee3 = requestAnimationFrame(() => {\n cleanup();\n });\n });\n });\n const handleTransitionend = (event: TransitionEvent): void => {\n if (event.target !== el) {\n return;\n }\n runningTransitions.set(\n event.propertyName,\n (runningTransitions.get(event.propertyName) as number) - 1\n );\n if (!runningTransitions.get(event.propertyName)) {\n runningTransitions.delete(event.propertyName);\n }\n if (runningTransitions.size === 0) {\n cleanup();\n }\n };\n const handleTransitionrun = (event: TransitionEvent): void => {\n if (event.target !== el) {\n return;\n }\n if (!runningTransitions.has(event.propertyName)) {\n runningTransitions.set(event.propertyName, 0);\n }\n runningTransitions.set(\n event.propertyName,\n (runningTransitions.get(event.propertyName) as number) + 1\n );\n cancelAnimationFrame(guarantee1);\n cancelAnimationFrame(guarantee2);\n cancelAnimationFrame(guarantee3);\n };\n el.addEventListener('transitionrun', handleTransitionrun, {\n signal: abortController.signal,\n });\n el.addEventListener('transitionend', handleTransitionend, {\n signal: abortController.signal,\n });\n el.addEventListener('transitioncancel', handleTransitionend, {\n signal: abortController.signal,\n });\n action();\n};\n\nexport function nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\n/**\n * Abstract Overlay base class so that property tyings and imperative API\n * interfaces can be held separate from the actual class definition.\n */\nexport class AbstractOverlay extends SpectrumElement {\n protected async applyFocus(\n _targetOpenState: boolean,\n _focusEl: HTMLElement | null\n ): Promise<void> {\n return;\n }\n /* c8 ignore next 6 */\n get delayed(): boolean {\n return false;\n }\n set delayed(_delayed: boolean) {\n return;\n }\n dialogEl!: HTMLDialogElement & {\n showPopover(): void;\n hidePopover(): void;\n };\n /* c8 ignore next 6 */\n get disabled(): boolean {\n return false;\n }\n set disabled(_disabled: boolean) {\n return;\n }\n dispose = noop;\n protected get elementResolver(): ElementResolutionController {\n return this._elementResolver;\n }\n protected set elementResolver(controller) {\n this._elementResolver = controller;\n }\n protected _elementResolver!: ElementResolutionController;\n /* c8 ignore next 3 */\n protected async ensureOnDOM(_targetOpenState: boolean): Promise<void> {\n return;\n }\n elements!: OpenableElement[];\n /* c8 ignore next 5 */\n protected async makeTransition(\n _targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n return null;\n }\n protected async manageDelay(_targetOpenState: boolean): Promise<void> {\n return;\n }\n /* c8 ignore next 3 */\n protected async manageDialogOpen(): Promise<void> {\n return;\n }\n /* c8 ignore next 3 */\n protected async managePopoverOpen(): Promise<void> {\n return;\n }\n /* c8 ignore next 3 */\n protected managePosition(): void {\n return;\n }\n protected offset: number | [number, number] = 0;\n /* c8 ignore next 6 */\n get open(): boolean {\n return false;\n }\n set open(_open: boolean) {\n return;\n }\n placement?: Placement;\n protected get placementController(): PlacementController {\n return this._placementController;\n }\n protected set placementController(controller) {\n this._placementController = controller;\n }\n protected _placementController!: PlacementController;\n receivesFocus!: 'true' | 'false' | 'auto';\n protected requestSlottable(): void {}\n protected returnFocus(): void {\n return;\n }\n /* c8 ignore next 6 */\n get state(): OverlayState {\n return 'closed';\n }\n set state(_state: OverlayState) {\n return;\n }\n protected _state!: OverlayState;\n triggerElement!: HTMLElement | VirtualTrigger | null;\n type!: OverlayTypes;\n willPreventClose = false;\n /* c8 ignore next 3 */\n public manuallyKeepOpen(): void {\n return;\n }\n\n public static update(): void {\n const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n document.dispatchEvent(overlayUpdateEvent);\n }\n\n /**\n * Overloaded imperative API entry point that allows for both the pre-0.37.0\n * argument signature as well as the post-0.37.0 signature. This allows for\n * consumers to continue to leverage it as they had been in previous releases\n * while also surfacing the more feature-rich API that has been made available.\n */\n public static async open(\n trigger: HTMLElement,\n interaction: TriggerInteractionsV1,\n content: HTMLElement,\n optionsV1: OverlayOptionsV1\n ): Promise<() => void>;\n public static async open(\n content: HTMLElement,\n options?: OverlayOptions\n ): Promise<Overlay>;\n public static async open(\n triggerOrContent: HTMLElement,\n interactionOrOptions:\n | TriggerInteractionsV1\n | OverlayOptions\n | undefined,\n content?: HTMLElement,\n optionsV1?: OverlayOptionsV1\n ): Promise<Overlay | (() => void)> {\n await import('@spectrum-web-components/overlay/sp-overlay.js');\n const v2 = arguments.length === 2;\n const overlayContent = content || triggerOrContent;\n // Use the `this` from the `static` method context rather than a\n // specific imported constructor to prevent opening a circular dependency.\n const overlay = new this() as Overlay;\n let restored = false;\n overlay.dispose = () => {\n overlay.addEventListener('sp-closed', () => {\n if (!restored) {\n restoreContent();\n restored = true;\n }\n requestAnimationFrame(() => {\n overlay.remove();\n });\n });\n overlay.open = false;\n overlay.dispose = noop;\n };\n /**\n * Since content must exist in an <sp-overlay>, we need a way to get it there.\n * The best & most-direct way is to declaratively use an <sp-overlay> element,\n * but for imperative users, we'll reparent content into an overlay that we've created for them.\n **/\n const restoreContent = reparentChildren([overlayContent], overlay, {\n position: 'beforeend',\n prepareCallback: (el) => {\n // Ensure that content to be overlaid is no longer targetted to a specific `slot`.\n // This allow for it to be visible in the overlaid context.\n const slot = el.slot;\n el.removeAttribute('slot');\n return () => {\n el.slot = slot;\n };\n },\n });\n\n const v1 = !v2 && overlayContent && optionsV1;\n if (v1) {\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n overlay,\n `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/overlay/',\n { level: 'deprecation' }\n );\n }\n const trigger = triggerOrContent;\n const interaction = interactionOrOptions;\n const options = optionsV1;\n AbstractOverlay.applyOptions(overlay, {\n ...options,\n delayed:\n options.delayed || overlayContent.hasAttribute('delayed'),\n trigger: options.virtualTrigger || trigger,\n type:\n interaction === 'modal'\n ? 'modal'\n : interaction === 'hover'\n ? 'hint'\n : 'auto',\n });\n trigger.insertAdjacentElement('afterend', overlay);\n await overlay.updateComplete;\n overlay.open = true;\n return overlay.dispose;\n }\n\n const options = interactionOrOptions as OverlayOptions;\n overlay.append(overlayContent);\n AbstractOverlay.applyOptions(overlay, {\n ...options,\n delayed: options.delayed || overlayContent.hasAttribute('delayed'),\n });\n overlay.updateComplete.then(() => {\n // Do we want to \"open\" this path, or leave that to the consumer?\n overlay.open = true;\n });\n return overlay;\n }\n\n static applyOptions(\n overlay: AbstractOverlay,\n options: OverlayOptions\n ): void {\n overlay.delayed = !!options.delayed;\n overlay.receivesFocus = options.receivesFocus ?? 'auto';\n overlay.triggerElement = options.trigger || null;\n overlay.type = options.type || 'modal';\n overlay.offset = options.offset ?? 0;\n overlay.placement = options.placement;\n overlay.willPreventClose = !!options.notImmediatelyClosable;\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*/\nimport { SpectrumElement } from '@spectrum-web-components/base';\nimport { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';\n\nimport type {\n OpenableElement,\n OverlayOptions,\n OverlayOptionsV1,\n OverlayState,\n OverlayTypes,\n Placement,\n TriggerInteractionsV1,\n} from './overlay-types.js';\nimport type { Overlay } from './Overlay.js';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\nimport { OverlayTimer } from './overlay-timer.js';\nimport type { PlacementController } from './PlacementController.js';\nimport type { ElementResolutionController } from '@spectrum-web-components/reactive-controllers/src/ElementResolution.js';\n\nexport const overlayTimer = new OverlayTimer();\n\nexport const noop = (): void => {\n return;\n};\n\n/**\n * Apply a \"transitionend\" listener to an element that may not transition but\n * guarantee the callback will be fired either way.\n *\n * @param el {HTMLElement} - Target of the \"transition\" listeners.\n * @param action {Function} - Method to trigger the \"transition\".\n * @param cb {Function} - Callback to trigger when the \"transition\" has ended.\n */\nexport const guaranteedAllTransitionend = (\n el: HTMLElement,\n action: () => void,\n cb: () => void\n): void => {\n const abortController = new AbortController();\n const runningTransitions = new Map<string, number>();\n const cleanup = (): void => {\n abortController.abort();\n cb();\n };\n let guarantee2: number;\n let guarantee3: number;\n // WebKit fires `transitionrun` a little earlier, the multiple guarantees here\n // allow WebKit to be caught, but doesn't remove the animation listener until\n // after it would have fired in Chromium.\n const guarantee1 = requestAnimationFrame(() => {\n guarantee2 = requestAnimationFrame(() => {\n guarantee3 = requestAnimationFrame(() => {\n cleanup();\n });\n });\n });\n const handleTransitionend = (event: TransitionEvent): void => {\n if (event.target !== el) {\n return;\n }\n runningTransitions.set(\n event.propertyName,\n (runningTransitions.get(event.propertyName) as number) - 1\n );\n if (!runningTransitions.get(event.propertyName)) {\n runningTransitions.delete(event.propertyName);\n }\n if (runningTransitions.size === 0) {\n cleanup();\n }\n };\n const handleTransitionrun = (event: TransitionEvent): void => {\n if (event.target !== el) {\n return;\n }\n if (!runningTransitions.has(event.propertyName)) {\n runningTransitions.set(event.propertyName, 0);\n }\n runningTransitions.set(\n event.propertyName,\n (runningTransitions.get(event.propertyName) as number) + 1\n );\n cancelAnimationFrame(guarantee1);\n cancelAnimationFrame(guarantee2);\n cancelAnimationFrame(guarantee3);\n };\n el.addEventListener('transitionrun', handleTransitionrun, {\n signal: abortController.signal,\n });\n el.addEventListener('transitionend', handleTransitionend, {\n signal: abortController.signal,\n });\n el.addEventListener('transitioncancel', handleTransitionend, {\n signal: abortController.signal,\n });\n action();\n};\n\nexport function nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\n/**\n * Abstract Overlay base class so that property tyings and imperative API\n * interfaces can be held separate from the actual class definition.\n */\nexport class AbstractOverlay extends SpectrumElement {\n protected async applyFocus(\n _targetOpenState: boolean,\n _focusEl: HTMLElement | null\n ): Promise<void> {\n return;\n }\n /* c8 ignore next 6 */\n get delayed(): boolean {\n return false;\n }\n set delayed(_delayed: boolean) {\n return;\n }\n dialogEl!: HTMLDialogElement & {\n showPopover(): void;\n hidePopover(): void;\n };\n /* c8 ignore next 6 */\n get disabled(): boolean {\n return false;\n }\n set disabled(_disabled: boolean) {\n return;\n }\n dispose = noop;\n protected get elementResolver(): ElementResolutionController {\n return this._elementResolver;\n }\n protected set elementResolver(controller) {\n this._elementResolver = controller;\n }\n protected _elementResolver!: ElementResolutionController;\n /* c8 ignore next 3 */\n protected async ensureOnDOM(_targetOpenState: boolean): Promise<void> {\n return;\n }\n elements!: OpenableElement[];\n /* c8 ignore next 5 */\n protected async makeTransition(\n _targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n return null;\n }\n protected async manageDelay(_targetOpenState: boolean): Promise<void> {\n return;\n }\n /* c8 ignore next 3 */\n protected async manageDialogOpen(): Promise<void> {\n return;\n }\n /* c8 ignore next 3 */\n protected async managePopoverOpen(): Promise<void> {\n return;\n }\n /* c8 ignore next 3 */\n protected managePosition(): void {\n return;\n }\n protected offset: number | [number, number] = 0;\n /* c8 ignore next 6 */\n get open(): boolean {\n return false;\n }\n set open(_open: boolean) {\n return;\n }\n placement?: Placement;\n protected get placementController(): PlacementController {\n return this._placementController;\n }\n protected set placementController(controller) {\n this._placementController = controller;\n }\n protected _placementController!: PlacementController;\n receivesFocus!: 'true' | 'false' | 'auto';\n protected requestSlottable(): void {}\n protected returnFocus(): void {\n return;\n }\n /* c8 ignore next 6 */\n get state(): OverlayState {\n return 'closed';\n }\n set state(_state: OverlayState) {\n return;\n }\n protected _state!: OverlayState;\n triggerElement!: HTMLElement | VirtualTrigger | null;\n type!: OverlayTypes;\n willPreventClose = false;\n /* c8 ignore next 3 */\n public manuallyKeepOpen(): void {\n return;\n }\n\n public static update(): void {\n const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n document.dispatchEvent(overlayUpdateEvent);\n }\n\n /**\n * Overloaded imperative API entry point that allows for both the pre-0.37.0\n * argument signature as well as the post-0.37.0 signature. This allows for\n * consumers to continue to leverage it as they had been in previous releases\n * while also surfacing the more feature-rich API that has been made available.\n */\n public static async open(\n trigger: HTMLElement,\n interaction: TriggerInteractionsV1,\n content: HTMLElement,\n optionsV1: OverlayOptionsV1\n ): Promise<() => void>;\n public static async open(\n content: HTMLElement,\n options?: OverlayOptions\n ): Promise<Overlay>;\n public static async open(\n triggerOrContent: HTMLElement,\n interactionOrOptions:\n | TriggerInteractionsV1\n | OverlayOptions\n | undefined,\n content?: HTMLElement,\n optionsV1?: OverlayOptionsV1\n ): Promise<Overlay | (() => void)> {\n await import('@spectrum-web-components/overlay/sp-overlay.js');\n const v2 = arguments.length === 2;\n const overlayContent = content || triggerOrContent;\n // Use the `this` from the `static` method context rather than a\n // specific imported constructor to prevent opening a circular dependency.\n const overlay = new this() as Overlay;\n let restored = false;\n overlay.dispose = () => {\n overlay.addEventListener('sp-closed', () => {\n if (!restored) {\n restoreContent();\n restored = true;\n }\n requestAnimationFrame(() => {\n overlay.remove();\n });\n });\n overlay.open = false;\n overlay.dispose = noop;\n };\n /**\n * Since content must exist in an <sp-overlay>, we need a way to get it there.\n * The best & most-direct way is to declaratively use an <sp-overlay> element,\n * but for imperative users, we'll reparent content into an overlay that we've created for them.\n **/\n const restoreContent = reparentChildren([overlayContent], overlay, {\n position: 'beforeend',\n prepareCallback: (el) => {\n // Ensure that content to be overlaid is no longer targetted to a specific `slot`.\n // This allow for it to be visible in the overlaid context.\n const slot = el.slot;\n el.removeAttribute('slot');\n return () => {\n el.slot = slot;\n };\n },\n });\n\n const v1 = !v2 && overlayContent && optionsV1;\n if (v1) {\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n overlay,\n `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/overlay/',\n { level: 'deprecation' }\n );\n }\n const trigger = triggerOrContent;\n const interaction = interactionOrOptions;\n const options = optionsV1;\n AbstractOverlay.applyOptions(overlay, {\n ...options,\n delayed:\n options.delayed || overlayContent.hasAttribute('delayed'),\n trigger: options.virtualTrigger || trigger,\n type:\n interaction === 'modal'\n ? 'modal'\n : interaction === 'hover'\n ? 'hint'\n : 'auto',\n });\n trigger.insertAdjacentElement('afterend', overlay);\n await overlay.updateComplete;\n overlay.open = true;\n return overlay.dispose;\n }\n\n const options = interactionOrOptions as OverlayOptions;\n overlay.append(overlayContent);\n AbstractOverlay.applyOptions(overlay, {\n ...options,\n delayed: options.delayed || overlayContent.hasAttribute('delayed'),\n });\n overlay.updateComplete.then(() => {\n // Do we want to \"open\" this path, or leave that to the consumer?\n overlay.open = true;\n });\n return overlay;\n }\n\n static applyOptions(\n overlay: AbstractOverlay,\n options: OverlayOptions\n ): void {\n overlay.delayed = !!options.delayed;\n overlay.receivesFocus = options.receivesFocus ?? 'auto';\n overlay.triggerElement = options.trigger || null;\n overlay.type = options.type || 'modal';\n overlay.offset = options.offset ?? 0;\n overlay.placement = options.placement;\n overlay.willPreventClose = !!options.notImmediatelyClosable;\n }\n\n private iosEventPropagationController?: AbortController;\n\n protected setupIOSEventManagement(): void {\n // This is a workaround for a bug in iOS <17 where the event leaks out of the dialog to the element below it.\n // Issue - https://github.com/adobe/spectrum-web-components/issues/5042\n this.iosEventPropagationController = new AbortController();\n this.dialogEl.addEventListener(\n 'pointerup',\n (event) => event.stopPropagation(),\n {\n capture: true,\n signal: this.iosEventPropagationController.signal,\n }\n );\n this.dialogEl.addEventListener(\n 'touchend',\n (event) => event.stopPropagation(),\n {\n capture: true,\n signal: this.iosEventPropagationController.signal,\n }\n );\n }\n\n protected cleanupIOSEventManagement(): void {\n this.iosEventPropagationController?.abort();\n this.iosEventPropagationController = undefined;\n }\n\n override disconnectedCallback(): void {\n this.cleanupIOSEventManagement();\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["SpectrumElement", "reparentChildren", "OverlayTimer", "el", "action", "cb", "abortController", "runningTransitions", "cleanup", "guarantee2", "guarantee3", "guarantee1", "handleTransitionend", "event", "handleTransitionrun", "res", "_targetOpenState", "_focusEl", "_delayed", "_disabled", "controller", "_open", "_state", "overlayUpdateEvent", "triggerOrContent", "interactionOrOptions", "content", "optionsV1", "v2", "overlayContent", "overlay", "restored", "restoreContent", "slot", "trigger", "interaction", "options", "_a", "_b"]
|
|
7
7
|
}
|
package/src/OverlayDialog.dev.js
CHANGED
|
@@ -33,6 +33,7 @@ export function OverlayDialog(constructor) {
|
|
|
33
33
|
if (!targetOpenState) {
|
|
34
34
|
const close = () => {
|
|
35
35
|
el.removeEventListener("close", close);
|
|
36
|
+
this.cleanupIOSEventManagement();
|
|
36
37
|
finish(el, index);
|
|
37
38
|
};
|
|
38
39
|
el.addEventListener("close", close);
|
|
@@ -61,6 +62,7 @@ export function OverlayDialog(constructor) {
|
|
|
61
62
|
return;
|
|
62
63
|
}
|
|
63
64
|
this.dialogEl.showModal();
|
|
65
|
+
this.setupIOSEventManagement();
|
|
64
66
|
};
|
|
65
67
|
const finish = (el, index) => () => {
|
|
66
68
|
if (this.open !== targetOpenState) {
|
|
@@ -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 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": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,sBAAsB;AAE/B,SAAS,4BAA4B,iBAAiB;AACtD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,SAAS,6BAA6B;AAE/B,gBAAS,cACZ,aACgC;AAAA,EAChC,MAAM,0BAA0B,YAAY;AAAA,IACxC,MAAyB,mBAAkC;AACvD,YAAM,kBAAkB,KAAK;AAC7B,YAAM,UAAU;AAChB,YAAM,KAAK,eAAe;AAC1B,UAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,MACJ;AACA,YAAM,UAAU,MAAM,KAAK,qBAAqB,eAAe;AAC/D,UAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,MACJ;AACA,YAAM,KAAK,iBAAiB,iBAAiB,OAAO;AAAA,IACxD;AAAA,IAEA,MAAgB,qBACZ,iBAC2B;AAC3B,UAAI,UAAU;AACd,YAAM,QACF,CAAC,IAAqB,UACtB,YAA2B;AACvB,WAAG,OAAO;AACV,YAAI,CAAC,iBAAiB;AAClB,gBAAM,QAAQ,MAAY;AACtB,eAAG,oBAAoB,SAAS,KAAK;AACrC,mBAAO,IAAI,KAAK;AAAA,UACpB;AACA,aAAG,iBAAiB,SAAS,KAAK;AAAA,QACtC;AACA,YAAI,QAAQ,GAAG;AAEX;AAAA,QACJ;AACA,cAAM,QAAQ,kBACR,wBACA;AACN,aAAK,cAAc,IAAI,MAAM,CAAC;AAC9B,YAAI,CAAC,iBAAiB;AAElB;AAAA,QACJ;AACA,YAAI,GAAG,QAAQ,qBAAqB,GAAG;AACnC,oBAAU;AAAA,QACd;AACA,kBAAU,WAAW,iBAAiB,EAAE;AACxC,YAAI,CAAC,SAAS;AACV,gBAAM,aAAa,GAAG,iBAAiB,MAAM;AAC7C,qBAAW,QAAQ,CAAC,SAAS;AACzB,gBAAI,CAAC,SAAS;AACV,wBAAU,wBAAwB,IAAI;AAAA,YAC1C;AAAA,UACJ,CAAC;AAAA,QACL;AACA,YAAI,CAAC,KAAK,eAAe,KAAK,SAAS,MAAM;AAGzC;AAAA,QACJ;AACA,aAAK,SAAS,UAAU;AAAA,
|
|
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 this.cleanupIOSEventManagement();\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 this.setupIOSEventManagement();\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;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,sBAAsB;AAE/B,SAAS,4BAA4B,iBAAiB;AACtD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,SAAS,6BAA6B;AAE/B,gBAAS,cACZ,aACgC;AAAA,EAChC,MAAM,0BAA0B,YAAY;AAAA,IACxC,MAAyB,mBAAkC;AACvD,YAAM,kBAAkB,KAAK;AAC7B,YAAM,UAAU;AAChB,YAAM,KAAK,eAAe;AAC1B,UAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,MACJ;AACA,YAAM,UAAU,MAAM,KAAK,qBAAqB,eAAe;AAC/D,UAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,MACJ;AACA,YAAM,KAAK,iBAAiB,iBAAiB,OAAO;AAAA,IACxD;AAAA,IAEA,MAAgB,qBACZ,iBAC2B;AAC3B,UAAI,UAAU;AACd,YAAM,QACF,CAAC,IAAqB,UACtB,YAA2B;AACvB,WAAG,OAAO;AACV,YAAI,CAAC,iBAAiB;AAClB,gBAAM,QAAQ,MAAY;AACtB,eAAG,oBAAoB,SAAS,KAAK;AACrC,iBAAK,0BAA0B;AAC/B,mBAAO,IAAI,KAAK;AAAA,UACpB;AACA,aAAG,iBAAiB,SAAS,KAAK;AAAA,QACtC;AACA,YAAI,QAAQ,GAAG;AAEX;AAAA,QACJ;AACA,cAAM,QAAQ,kBACR,wBACA;AACN,aAAK,cAAc,IAAI,MAAM,CAAC;AAC9B,YAAI,CAAC,iBAAiB;AAElB;AAAA,QACJ;AACA,YAAI,GAAG,QAAQ,qBAAqB,GAAG;AACnC,oBAAU;AAAA,QACd;AACA,kBAAU,WAAW,iBAAiB,EAAE;AACxC,YAAI,CAAC,SAAS;AACV,gBAAM,aAAa,GAAG,iBAAiB,MAAM;AAC7C,qBAAW,QAAQ,CAAC,SAAS;AACzB,gBAAI,CAAC,SAAS;AACV,wBAAU,wBAAwB,IAAI;AAAA,YAC1C;AAAA,UACJ,CAAC;AAAA,QACL;AACA,YAAI,CAAC,KAAK,eAAe,KAAK,SAAS,MAAM;AAGzC;AAAA,QACJ;AACA,aAAK,SAAS,UAAU;AACxB,aAAK,wBAAwB;AAAA,MACjC;AACJ,YAAM,SAAS,CAAC,IAAqB,UAAkB,MAAY;AAC/D,YAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,QACJ;AACA,cAAM,YAAY,kBAAkB,cAAc;AAClD,YAAI,QAAQ,GAAG;AACX,aAAG;AAAA,YACC,IAAI,kBAAkB,WAAW,MAAM;AAAA,cACnC,aAAa,KAAK;AAAA,cAClB,SAAS;AAAA,YACb,CAAC;AAAA,UACL;AACA;AAAA,QACJ;AACA,YAAI,CAAC,KAAK,eAAe,oBAAoB,KAAK,MAAM;AAGpD;AAAA,QACJ;AACA,cAAM,eAAe,YAA2B;AAC5C,gBAAM,oBACF,KAAK,0BAA0B;AACnC,eAAK;AAAA,YACD,IAAI,kBAAkB,WAAW,MAAM;AAAA,cACnC,aAAa,KAAK;AAAA,cAClB,SAAS;AAAA,YACb,CAAC;AAAA,UACL;AACA,aAAG;AAAA,YACC,IAAI,kBAAkB,WAAW,MAAM;AAAA,cACnC,aAAa,KAAK;AAAA,cAClB,SAAS;AAAA,YACb,CAAC;AAAA,UACL;AACA,cAAI,KAAK,kBAAkB,CAAC,mBAAmB;AAC3C,YAAC,KAAK,eAA+B;AAAA,cACjC,IAAI,kBAAkB,WAAW,MAAM;AAAA,gBACnC,aAAa,KAAK;AAAA,gBAClB,SAAS;AAAA,cACb,CAAC;AAAA,YACL;AAAA,UACJ;AACA,eAAK,QAAQ,kBAAkB,WAAW;AAC1C,eAAK,YAAY;AAEjB,gBAAM,UAAU;AAChB,gBAAM,UAAU;AAChB,cACI,oBAAoB,KAAK,QACzB,oBAAoB,OACtB;AACE,iBAAK,iBAAiB;AAAA,UAC1B;AAAA,QACJ;AACA,YAAI,CAAC,mBAAmB,KAAK,SAAS,MAAM;AACxC,eAAK,SAAS;AAAA,YACV;AAAA,YACA,MAAM;AACF,2BAAa;AAAA,YACjB;AAAA,YACA,EAAE,MAAM,KAAK;AAAA,UACjB;AACA,eAAK,SAAS,MAAM;AAAA,QACxB,OAAO;AACH,uBAAa;AAAA,QACjB;AAAA,MACJ;AACA,WAAK,SAAS,QAAQ,CAAC,IAAI,UAAU;AACjC;AAAA,UACI;AAAA,UACA,MAAM,IAAI,KAAK;AAAA,UACf,OAAO,IAAI,KAAK;AAAA,QACpB;AAAA,MACJ,CAAC;AACD,aAAO;AAAA,IACX;AAAA,IAEA,MAAgB,iBACZ,iBACA,SACa;AAMb,WAAK,WAAW,iBAAiB,OAAO;AAAA,IAC5C;AAAA,EACJ;AACA,SAAO;AACX;",
|
|
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 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}
|
|
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),this.cleanupIOSEventManagement(),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(),this.setupIOSEventManagement()))},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 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": "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,KAG7B,GAFA,MAAMP,EAAU,EAChB,MAAM,KAAK,eAAe,EACtB,KAAK,OAASO,EACd,OAEJ,MAAMC,EAAU,MAAM,KAAK,qBAAqBD,CAAe,EAC3D,KAAK,OAASA,GAGlB,MAAM,KAAK,iBAAiBA,EAAiBC,CAAO,CACxD,CAEA,MAAgB,qBACZD,EAC2B,CAC3B,IAAIC,EAAU,KACd,MAAMC,EACF,CAACC,EAAqBC,IACtB,SAA2B,CAEvB,GADAD,EAAG,KAAOH,EACN,CAACA,EAAiB,CAClB,MAAMK,EAAQ,IAAY,CACtBF,EAAG,oBAAoB,QAASE,CAAK,
|
|
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 this.cleanupIOSEventManagement();\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 this.setupIOSEventManagement();\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
|
}
|