@spectrum-web-components/overlay 0.42.2 → 0.42.3
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/custom-elements.json +285 -114
- package/package.json +15 -7
- package/src/AbstractOverlay.d.ts +2 -30
- package/src/AbstractOverlay.dev.js +0 -37
- package/src/AbstractOverlay.dev.js.map +2 -2
- package/src/AbstractOverlay.js +1 -1
- package/src/AbstractOverlay.js.map +3 -3
- package/src/ClickController.dev.js +2 -2
- package/src/ClickController.dev.js.map +2 -2
- package/src/ClickController.js +1 -1
- package/src/ClickController.js.map +2 -2
- package/src/HoverController.d.ts +1 -0
- package/src/HoverController.dev.js +24 -14
- package/src/HoverController.dev.js.map +2 -2
- package/src/HoverController.js +1 -1
- package/src/HoverController.js.map +2 -2
- package/src/InteractionController.d.ts +17 -3
- package/src/InteractionController.dev.js +48 -5
- package/src/InteractionController.dev.js.map +2 -2
- package/src/InteractionController.js +1 -1
- package/src/InteractionController.js.map +3 -3
- package/src/LongpressController.dev.js +10 -6
- package/src/LongpressController.dev.js.map +2 -2
- package/src/LongpressController.js +1 -1
- package/src/LongpressController.js.map +3 -3
- package/src/Overlay.d.ts +3 -8
- package/src/Overlay.dev.js +7 -12
- package/src/Overlay.dev.js.map +2 -2
- package/src/Overlay.js +2 -2
- package/src/Overlay.js.map +3 -3
- package/src/OverlayDialog.dev.js +2 -3
- package/src/OverlayDialog.dev.js.map +2 -2
- package/src/OverlayDialog.js +1 -1
- package/src/OverlayDialog.js.map +3 -3
- package/src/OverlayNoPopover.dev.js +5 -3
- package/src/OverlayNoPopover.dev.js.map +2 -2
- package/src/OverlayNoPopover.js +1 -1
- package/src/OverlayNoPopover.js.map +3 -3
- package/src/OverlayPopover.dev.js +5 -3
- package/src/OverlayPopover.dev.js.map +2 -2
- package/src/OverlayPopover.js +1 -1
- package/src/OverlayPopover.js.map +3 -3
- package/src/OverlayTrigger.d.ts +1 -1
- package/src/OverlayTrigger.dev.js.map +1 -1
- package/src/OverlayTrigger.js.map +1 -1
- package/src/PlacementController.d.ts +1 -1
- package/src/events.d.ts +23 -0
- package/src/events.dev.js +39 -0
- package/src/events.dev.js.map +7 -0
- package/src/events.js +2 -0
- package/src/events.js.map +7 -0
- package/src/overlay-events.js +1 -1
- package/src/overlay-trigger-directive.d.ts +5 -6
- package/src/overlay-trigger-directive.dev.js +11 -9
- package/src/overlay-trigger-directive.dev.js.map +2 -2
- package/src/overlay-trigger-directive.js +1 -1
- package/src/overlay-trigger-directive.js.map +3 -3
- package/src/overlay-types.d.ts +10 -10
- package/src/slottable-request-directive.dev.js +2 -1
- package/src/slottable-request-directive.dev.js.map +2 -2
- package/src/slottable-request-directive.js +1 -1
- package/src/slottable-request-directive.js.map +2 -2
- package/src/slottable-request-event.js +1 -1
- package/src/strategies.d.ts +8 -0
- package/src/strategies.dev.js +10 -0
- package/src/strategies.dev.js.map +7 -0
- package/src/strategies.js +2 -0
- package/src/strategies.js.map +7 -0
- package/stories/overlay.stories.js +2 -2
- package/stories/overlay.stories.js.map +2 -2
- package/test/index.js +10 -10
- package/test/index.js.map +2 -2
- package/test/overlay-element.test.js.map +2 -2
- package/test/overlay-memory.test.js +10 -0
- package/test/overlay-memory.test.js.map +7 -0
- package/test/overlay-update.test.js +1 -0
- package/test/overlay-update.test.js.map +2 -2
- package/test/overlay-v1.test.js +2 -1
- package/test/overlay-v1.test.js.map +2 -2
|
@@ -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 TriggerInteractions,\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\nexport class BeforetoggleClosedEvent extends Event {\n currentState = 'open';\n newState = 'closed';\n constructor() {\n super('beforetoggle', {\n bubbles: false,\n composed: false,\n });\n }\n}\n\nexport class BeforetoggleOpenEvent extends Event {\n currentState = 'closed';\n newState = 'open';\n constructor() {\n super('beforetoggle', {\n bubbles: false,\n composed: false,\n });\n }\n}\n\nexport class OverlayStateEvent extends Event {\n detail!: {\n interaction: string;\n reason?: 'external-click';\n };\n\n constructor(\n type: string,\n public overlay: HTMLElement,\n {\n publish,\n interaction,\n reason,\n }: {\n publish?: boolean;\n interaction: TriggerInteractions;\n reason?: 'external-click';\n }\n ) {\n super(type, {\n bubbles: publish,\n composed: publish,\n });\n this.detail = {\n interaction,\n reason,\n };\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'sp-open': OverlayStateEvent;\n 'sp-close': OverlayStateEvent;\n }\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: options.delayed || overlayContent.hasAttribute('delayed'),\n trigger: options.virtualTrigger || trigger,\n type: 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(overlay: Overlay, options: OverlayOptions): 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": ";AAWA,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;
|
|
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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",
|
|
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 g}from"@spectrum-web-components/base";import{reparentChildren as b}from"@spectrum-web-components/shared/src/reparent-children.js";import{OverlayTimer as O}from"./overlay-timer.js";export const overlayTimer=new O,noop=()=>{},guaranteedAllTransitionend=(i,v,e)=>{const r=new AbortController,n=new Map,a=()=>{r.abort(),e()};let m,l;const t=requestAnimationFrame(()=>{m=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())},d=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(m),cancelAnimationFrame(l))};i.addEventListener("transitionrun",d,{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 g{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 m=arguments.length===2,l=n||e,t=new this;let p=!1;t.dispose=()=>{t.addEventListener("sp-closed",()=>{p||(d(),p=!0),requestAnimationFrame(()=>{t.remove()})}),t.open=!1,t.dispose=noop};const d=b([l],t,{position:"beforeend",prepareCallback:s=>{const c=s.slot;return s.removeAttribute("slot"),()=>{s.slot=c}}});if(!m&&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 y=r;return t.append(l),AbstractOverlay.applyOptions(t,{...y,delayed:y.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}}
|
|
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 TriggerInteractions,\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\nexport class BeforetoggleClosedEvent extends Event {\n currentState = 'open';\n newState = 'closed';\n constructor() {\n super('beforetoggle', {\n bubbles: false,\n composed: false,\n });\n }\n}\n\nexport class BeforetoggleOpenEvent extends Event {\n currentState = 'closed';\n newState = 'open';\n constructor() {\n super('beforetoggle', {\n bubbles: false,\n composed: false,\n });\n }\n}\n\nexport class OverlayStateEvent extends Event {\n detail!: {\n interaction: string;\n reason?: 'external-click';\n };\n\n constructor(\n type: string,\n public overlay: HTMLElement,\n {\n publish,\n interaction,\n reason,\n }: {\n publish?: boolean;\n interaction: TriggerInteractions;\n reason?: 'external-click';\n }\n ) {\n super(type, {\n bubbles: publish,\n composed: publish,\n });\n this.detail = {\n interaction,\n reason,\n };\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'sp-open': OverlayStateEvent;\n 'sp-close': OverlayStateEvent;\n }\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: options.delayed || overlayContent.hasAttribute('delayed'),\n trigger: options.virtualTrigger || trigger,\n type: 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(overlay: Overlay, options: OverlayOptions): 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": "aAWA,OAAS,mBAAAA,MAAuB,gCAChC,OAAS,oBAAAC,MAAwB,
|
|
6
|
-
"names": ["SpectrumElement", "reparentChildren", "OverlayTimer", "
|
|
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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",
|
|
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
|
}
|
|
@@ -17,12 +17,12 @@ export class ClickController extends InteractionController {
|
|
|
17
17
|
}
|
|
18
18
|
handleClick() {
|
|
19
19
|
if (!this.preventNextToggle) {
|
|
20
|
-
this.
|
|
20
|
+
this.open = !this.open;
|
|
21
21
|
}
|
|
22
22
|
this.preventNextToggle = false;
|
|
23
23
|
}
|
|
24
24
|
handlePointerdown() {
|
|
25
|
-
this.preventNextToggle = this.
|
|
25
|
+
this.preventNextToggle = this.open;
|
|
26
26
|
}
|
|
27
27
|
init() {
|
|
28
28
|
var _a;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ClickController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.dev.js'\n\nexport class ClickController extends InteractionController {\n override type = InteractionTypes.click;\n\n /**\n * An overlay with a `click` interaction should not close on click `triggerElement`.\n * When a click is initiated (`pointerdown`), apply `preventNextToggle` when the\n * overlay is `open` to prevent from toggling the overlay when the click event\n * propagates later in the interaction.\n */\n private preventNextToggle = false;\n\n handleClick(): void {\n if (!this.preventNextToggle) {\n this.
|
|
5
|
-
"mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEA,aAAM,wBAAwB,sBAAsB;AAAA,EAApD;AAAA;AACH,SAAS,OAAO,iBAAiB;AAQjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAQ,oBAAoB;AAAA;AAAA,EAE5B,cAAoB;AAChB,QAAI,CAAC,KAAK,mBAAmB;AACzB,WAAK,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.dev.js'\n\nexport class ClickController extends InteractionController {\n override type = InteractionTypes.click;\n\n /**\n * An overlay with a `click` interaction should not close on click `triggerElement`.\n * When a click is initiated (`pointerdown`), apply `preventNextToggle` when the\n * overlay is `open` to prevent from toggling the overlay when the click event\n * propagates later in the interaction.\n */\n private preventNextToggle = false;\n\n handleClick(): void {\n if (!this.preventNextToggle) {\n this.open = !this.open;\n }\n this.preventNextToggle = false;\n }\n\n handlePointerdown(): void {\n this.preventNextToggle = this.open;\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener('click', () => this.handleClick(), {\n signal,\n });\n this.target.addEventListener(\n 'pointerdown',\n () => this.handlePointerdown(),\n { signal }\n );\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEA,aAAM,wBAAwB,sBAAsB;AAAA,EAApD;AAAA;AACH,SAAS,OAAO,iBAAiB;AAQjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAQ,oBAAoB;AAAA;AAAA,EAE5B,cAAoB;AAChB,QAAI,CAAC,KAAK,mBAAmB;AACzB,WAAK,OAAO,CAAC,KAAK;AAAA,IACtB;AACA,SAAK,oBAAoB;AAAA,EAC7B;AAAA,EAEA,oBAA0B;AACtB,SAAK,oBAAoB,KAAK;AAAA,EAClC;AAAA,EAES,OAAa;AAvC1B;AAyCQ,eAAK,oBAAL,mBAAsB;AACtB,SAAK,kBAAkB,IAAI,gBAAgB;AAC3C,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,SAAK,OAAO,iBAAiB,SAAS,MAAM,KAAK,YAAY,GAAG;AAAA,MAC5D;AAAA,IACJ,CAAC;AACD,SAAK,OAAO;AAAA,MACR;AAAA,MACA,MAAM,KAAK,kBAAkB;AAAA,MAC7B,EAAE,OAAO;AAAA,IACb;AAAA,EACJ;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/ClickController.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{InteractionController as o,InteractionTypes as r}from"./InteractionController.js";export class ClickController extends o{constructor(){super(...arguments);this.type=r.click;this.preventNextToggle=!1}handleClick(){this.preventNextToggle||(this.
|
|
1
|
+
"use strict";import{InteractionController as o,InteractionTypes as r}from"./InteractionController.js";export class ClickController extends o{constructor(){super(...arguments);this.type=r.click;this.preventNextToggle=!1}handleClick(){this.preventNextToggle||(this.open=!this.open),this.preventNextToggle=!1}handlePointerdown(){this.preventNextToggle=this.open}init(){var t;(t=this.abortController)==null||t.abort(),this.abortController=new AbortController;const{signal:e}=this.abortController;this.target.addEventListener("click",()=>this.handleClick(),{signal:e}),this.target.addEventListener("pointerdown",()=>this.handlePointerdown(),{signal:e})}}
|
|
2
2
|
//# sourceMappingURL=ClickController.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ClickController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.js';\n\nexport class ClickController extends InteractionController {\n override type = InteractionTypes.click;\n\n /**\n * An overlay with a `click` interaction should not close on click `triggerElement`.\n * When a click is initiated (`pointerdown`), apply `preventNextToggle` when the\n * overlay is `open` to prevent from toggling the overlay when the click event\n * propagates later in the interaction.\n */\n private preventNextToggle = false;\n\n handleClick(): void {\n if (!this.preventNextToggle) {\n this.
|
|
5
|
-
"mappings": "aAYA,OACI,yBAAAA,EACA,oBAAAC,MACG,6BAEA,aAAM,wBAAwBD,CAAsB,CAApD,kCACH,KAAS,KAAOC,EAAiB,MAQjC,KAAQ,kBAAoB,GAE5B,aAAoB,CACX,KAAK,oBACN,KAAK,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.js';\n\nexport class ClickController extends InteractionController {\n override type = InteractionTypes.click;\n\n /**\n * An overlay with a `click` interaction should not close on click `triggerElement`.\n * When a click is initiated (`pointerdown`), apply `preventNextToggle` when the\n * overlay is `open` to prevent from toggling the overlay when the click event\n * propagates later in the interaction.\n */\n private preventNextToggle = false;\n\n handleClick(): void {\n if (!this.preventNextToggle) {\n this.open = !this.open;\n }\n this.preventNextToggle = false;\n }\n\n handlePointerdown(): void {\n this.preventNextToggle = this.open;\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener('click', () => this.handleClick(), {\n signal,\n });\n this.target.addEventListener(\n 'pointerdown',\n () => this.handlePointerdown(),\n { signal }\n );\n }\n}\n"],
|
|
5
|
+
"mappings": "aAYA,OACI,yBAAAA,EACA,oBAAAC,MACG,6BAEA,aAAM,wBAAwBD,CAAsB,CAApD,kCACH,KAAS,KAAOC,EAAiB,MAQjC,KAAQ,kBAAoB,GAE5B,aAAoB,CACX,KAAK,oBACN,KAAK,KAAO,CAAC,KAAK,MAEtB,KAAK,kBAAoB,EAC7B,CAEA,mBAA0B,CACtB,KAAK,kBAAoB,KAAK,IAClC,CAES,MAAa,CAvC1B,IAAAC,GAyCQA,EAAA,KAAK,kBAAL,MAAAA,EAAsB,QACtB,KAAK,gBAAkB,IAAI,gBAC3B,KAAM,CAAE,OAAAC,CAAO,EAAI,KAAK,gBACxB,KAAK,OAAO,iBAAiB,QAAS,IAAM,KAAK,YAAY,EAAG,CAC5D,OAAAA,CACJ,CAAC,EACD,KAAK,OAAO,iBACR,cACA,IAAM,KAAK,kBAAkB,EAC7B,CAAE,OAAAA,CAAO,CACb,CACJ,CACJ",
|
|
6
6
|
"names": ["InteractionController", "InteractionTypes", "_a", "signal"]
|
|
7
7
|
}
|
package/src/HoverController.d.ts
CHANGED
|
@@ -20,23 +20,24 @@ export class HoverController extends InteractionController {
|
|
|
20
20
|
if (!((_a = document.activeElement) == null ? void 0 : _a.matches(":focus-visible"))) {
|
|
21
21
|
return;
|
|
22
22
|
}
|
|
23
|
-
this.
|
|
23
|
+
this.open = true;
|
|
24
24
|
this.focusedin = true;
|
|
25
25
|
}
|
|
26
26
|
handleTargetFocusout() {
|
|
27
27
|
this.focusedin = false;
|
|
28
28
|
if (this.pointerentered)
|
|
29
29
|
return;
|
|
30
|
-
this.
|
|
30
|
+
this.open = false;
|
|
31
31
|
}
|
|
32
32
|
handleTargetPointerenter() {
|
|
33
|
+
var _a;
|
|
33
34
|
if (this.hoverTimeout) {
|
|
34
35
|
clearTimeout(this.hoverTimeout);
|
|
35
36
|
this.hoverTimeout = void 0;
|
|
36
37
|
}
|
|
37
|
-
if (this.
|
|
38
|
+
if ((_a = this.overlay) == null ? void 0 : _a.disabled)
|
|
38
39
|
return;
|
|
39
|
-
this.
|
|
40
|
+
this.open = true;
|
|
40
41
|
this.pointerentered = true;
|
|
41
42
|
}
|
|
42
43
|
handleTargetPointerleave() {
|
|
@@ -54,11 +55,11 @@ export class HoverController extends InteractionController {
|
|
|
54
55
|
this.doPointerleave();
|
|
55
56
|
}
|
|
56
57
|
prepareDescription() {
|
|
57
|
-
if (!this.
|
|
58
|
+
if (!this.overlay.elements.length)
|
|
58
59
|
return;
|
|
59
60
|
const triggerRoot = this.target.getRootNode();
|
|
60
|
-
const contentRoot = this.
|
|
61
|
-
const overlayRoot = this.
|
|
61
|
+
const contentRoot = this.overlay.elements[0].getRootNode();
|
|
62
|
+
const overlayRoot = this.overlay.getRootNode();
|
|
62
63
|
if (triggerRoot === overlayRoot) {
|
|
63
64
|
this.prepareOverlayRelativeDescription();
|
|
64
65
|
} else if (triggerRoot === contentRoot) {
|
|
@@ -69,7 +70,7 @@ export class HoverController extends InteractionController {
|
|
|
69
70
|
const releaseDescription = conditionAttributeWithId(
|
|
70
71
|
this.target,
|
|
71
72
|
"aria-describedby",
|
|
72
|
-
[this.
|
|
73
|
+
[this.overlay.id]
|
|
73
74
|
);
|
|
74
75
|
this.releaseDescription = () => {
|
|
75
76
|
releaseDescription();
|
|
@@ -78,10 +79,10 @@ export class HoverController extends InteractionController {
|
|
|
78
79
|
}
|
|
79
80
|
prepareContentRelativeDescription() {
|
|
80
81
|
const elementIds = [];
|
|
81
|
-
const appliedIds = this.
|
|
82
|
+
const appliedIds = this.overlay.elements.map((el) => {
|
|
82
83
|
elementIds.push(el.id);
|
|
83
84
|
if (!el.id) {
|
|
84
|
-
el.id = `${this.
|
|
85
|
+
el.id = `${this.overlay.tagName.toLowerCase()}-helper-${randomID()}`;
|
|
85
86
|
}
|
|
86
87
|
return el.id;
|
|
87
88
|
});
|
|
@@ -93,7 +94,7 @@ export class HoverController extends InteractionController {
|
|
|
93
94
|
);
|
|
94
95
|
this.releaseDescription = () => {
|
|
95
96
|
releaseDescription();
|
|
96
|
-
this.
|
|
97
|
+
this.overlay.elements.map((el, index) => {
|
|
97
98
|
el.id = this.elementIds[index];
|
|
98
99
|
});
|
|
99
100
|
this.releaseDescription = noop;
|
|
@@ -105,7 +106,7 @@ export class HoverController extends InteractionController {
|
|
|
105
106
|
if (this.focusedin && triggerElement.matches(":focus-visible"))
|
|
106
107
|
return;
|
|
107
108
|
this.hoverTimeout = setTimeout(() => {
|
|
108
|
-
this.
|
|
109
|
+
this.open = false;
|
|
109
110
|
}, HOVER_DELAY);
|
|
110
111
|
}
|
|
111
112
|
init() {
|
|
@@ -133,12 +134,21 @@ export class HoverController extends InteractionController {
|
|
|
133
134
|
() => this.handleTargetPointerleave(),
|
|
134
135
|
{ signal }
|
|
135
136
|
);
|
|
136
|
-
this.
|
|
137
|
+
if (this.overlay) {
|
|
138
|
+
this.initOverlay();
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
initOverlay() {
|
|
142
|
+
if (!this.abortController) {
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
const { signal } = this.abortController;
|
|
146
|
+
this.overlay.addEventListener(
|
|
137
147
|
"pointerenter",
|
|
138
148
|
() => this.handleHostPointerenter(),
|
|
139
149
|
{ signal }
|
|
140
150
|
);
|
|
141
|
-
this.
|
|
151
|
+
this.overlay.addEventListener(
|
|
142
152
|
"pointerleave",
|
|
143
153
|
() => this.handleHostPointerleave(),
|
|
144
154
|
{ signal }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["HoverController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.dev.js'\nimport { noop } from './AbstractOverlay.dev.js'\n\nconst HOVER_DELAY = 300;\n\nexport class HoverController extends InteractionController {\n override type = InteractionTypes.hover;\n\n private elementIds: string[] = [];\n\n focusedin = false;\n\n private hoverTimeout?: ReturnType<typeof setTimeout>;\n\n pointerentered = false;\n\n handleTargetFocusin(): void {\n // eslint-disable-next-line @spectrum-web-components/document-active-element\n if (!document.activeElement?.matches(':focus-visible')) {\n return;\n }\n this.
|
|
5
|
-
"mappings": ";AAYA,SAAS,gCAAgC;AACzC,SAAS,gBAAgB;AAEzB;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,YAAY;AAErB,MAAM,cAAc;AAEb,aAAM,wBAAwB,sBAAsB;AAAA,EAApD;AAAA;AACH,SAAS,OAAO,iBAAiB;AAEjC,SAAQ,aAAuB,CAAC;AAEhC,qBAAY;AAIZ,0BAAiB;AAAA;AAAA,EAEjB,sBAA4B;AAlChC;AAoCQ,QAAI,GAAC,cAAS,kBAAT,mBAAwB,QAAQ,oBAAmB;AACpD;AAAA,IACJ;AACA,SAAK,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.dev.js'\nimport { noop } from './AbstractOverlay.dev.js'\n\nconst HOVER_DELAY = 300;\n\nexport class HoverController extends InteractionController {\n override type = InteractionTypes.hover;\n\n private elementIds: string[] = [];\n\n focusedin = false;\n\n private hoverTimeout?: ReturnType<typeof setTimeout>;\n\n pointerentered = false;\n\n handleTargetFocusin(): void {\n // eslint-disable-next-line @spectrum-web-components/document-active-element\n if (!document.activeElement?.matches(':focus-visible')) {\n return;\n }\n this.open = true;\n this.focusedin = true;\n }\n\n handleTargetFocusout(): void {\n this.focusedin = false;\n if (this.pointerentered) return;\n this.open = false;\n }\n\n handleTargetPointerenter(): void {\n if (this.hoverTimeout) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = undefined;\n }\n if (this.overlay?.disabled) return;\n this.open = true;\n this.pointerentered = true;\n }\n\n handleTargetPointerleave(): void {\n this.doPointerleave();\n }\n\n // set a timeout once the pointer enters and the overlay is shown\n // give the user time to enter the overlay\n handleHostPointerenter(): void {\n if (this.hoverTimeout) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = undefined;\n }\n }\n\n handleHostPointerleave(): void {\n this.doPointerleave();\n }\n\n override prepareDescription(): void {\n // require \"content\" to apply relationship\n if (!this.overlay.elements.length) return;\n\n const triggerRoot = this.target.getRootNode();\n const contentRoot = this.overlay.elements[0].getRootNode();\n const overlayRoot = this.overlay.getRootNode();\n if (triggerRoot === overlayRoot) {\n this.prepareOverlayRelativeDescription();\n } else if (triggerRoot === contentRoot) {\n this.prepareContentRelativeDescription();\n }\n }\n\n private prepareOverlayRelativeDescription(): void {\n const releaseDescription = conditionAttributeWithId(\n this.target,\n 'aria-describedby',\n [this.overlay.id]\n );\n this.releaseDescription = () => {\n releaseDescription();\n this.releaseDescription = noop;\n };\n }\n\n private prepareContentRelativeDescription(): void {\n const elementIds: string[] = [];\n const appliedIds = this.overlay.elements.map((el) => {\n elementIds.push(el.id);\n if (!el.id) {\n el.id = `${this.overlay.tagName.toLowerCase()}-helper-${randomID()}`;\n }\n return el.id;\n });\n this.elementIds = elementIds;\n const releaseDescription = conditionAttributeWithId(\n this.target,\n 'aria-describedby',\n appliedIds\n );\n this.releaseDescription = () => {\n releaseDescription();\n this.overlay.elements.map((el, index) => {\n el.id = this.elementIds[index];\n });\n this.releaseDescription = noop;\n };\n }\n\n protected doPointerleave(): void {\n this.pointerentered = false;\n const triggerElement = this.target as HTMLElement;\n if (this.focusedin && triggerElement.matches(':focus-visible')) return;\n\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n }, HOVER_DELAY);\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener(\n 'focusin',\n () => this.handleTargetFocusin(),\n { signal }\n );\n this.target.addEventListener(\n 'focusout',\n () => this.handleTargetFocusout(),\n { signal }\n );\n this.target.addEventListener(\n 'pointerenter',\n () => this.handleTargetPointerenter(),\n { signal }\n );\n this.target.addEventListener(\n 'pointerleave',\n () => this.handleTargetPointerleave(),\n { signal }\n );\n if (this.overlay) {\n this.initOverlay();\n }\n }\n\n override initOverlay(): void {\n if (!this.abortController) {\n return;\n }\n const { signal } = this.abortController;\n this.overlay.addEventListener(\n 'pointerenter',\n () => this.handleHostPointerenter(),\n { signal }\n );\n this.overlay.addEventListener(\n 'pointerleave',\n () => this.handleHostPointerleave(),\n { signal }\n );\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/HoverController.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{conditionAttributeWithId as
|
|
1
|
+
"use strict";import{conditionAttributeWithId as o}from"@spectrum-web-components/base/src/condition-attribute-with-id.js";import{randomID as a}from"@spectrum-web-components/shared/src/random-id.js";import{InteractionController as l,InteractionTypes as h}from"./InteractionController.js";import{noop as s}from"./AbstractOverlay.js";const d=300;export class HoverController extends l{constructor(){super(...arguments);this.type=h.hover;this.elementIds=[];this.focusedin=!1;this.pointerentered=!1}handleTargetFocusin(){var e;(e=document.activeElement)!=null&&e.matches(":focus-visible")&&(this.open=!0,this.focusedin=!0)}handleTargetFocusout(){this.focusedin=!1,!this.pointerentered&&(this.open=!1)}handleTargetPointerenter(){var e;this.hoverTimeout&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=void 0),!((e=this.overlay)!=null&&e.disabled)&&(this.open=!0,this.pointerentered=!0)}handleTargetPointerleave(){this.doPointerleave()}handleHostPointerenter(){this.hoverTimeout&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=void 0)}handleHostPointerleave(){this.doPointerleave()}prepareDescription(){if(!this.overlay.elements.length)return;const e=this.target.getRootNode(),t=this.overlay.elements[0].getRootNode(),r=this.overlay.getRootNode();e===r?this.prepareOverlayRelativeDescription():e===t&&this.prepareContentRelativeDescription()}prepareOverlayRelativeDescription(){const e=o(this.target,"aria-describedby",[this.overlay.id]);this.releaseDescription=()=>{e(),this.releaseDescription=s}}prepareContentRelativeDescription(){const e=[],t=this.overlay.elements.map(i=>(e.push(i.id),i.id||(i.id=`${this.overlay.tagName.toLowerCase()}-helper-${a()}`),i.id));this.elementIds=e;const r=o(this.target,"aria-describedby",t);this.releaseDescription=()=>{r(),this.overlay.elements.map((i,n)=>{i.id=this.elementIds[n]}),this.releaseDescription=s}}doPointerleave(){this.pointerentered=!1;const e=this.target;this.focusedin&&e.matches(":focus-visible")||(this.hoverTimeout=setTimeout(()=>{this.open=!1},d))}init(){var t;(t=this.abortController)==null||t.abort(),this.abortController=new AbortController;const{signal:e}=this.abortController;this.target.addEventListener("focusin",()=>this.handleTargetFocusin(),{signal:e}),this.target.addEventListener("focusout",()=>this.handleTargetFocusout(),{signal:e}),this.target.addEventListener("pointerenter",()=>this.handleTargetPointerenter(),{signal:e}),this.target.addEventListener("pointerleave",()=>this.handleTargetPointerleave(),{signal:e}),this.overlay&&this.initOverlay()}initOverlay(){if(!this.abortController)return;const{signal:e}=this.abortController;this.overlay.addEventListener("pointerenter",()=>this.handleHostPointerenter(),{signal:e}),this.overlay.addEventListener("pointerleave",()=>this.handleHostPointerleave(),{signal:e})}}
|
|
2
2
|
//# sourceMappingURL=HoverController.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["HoverController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.js';\nimport { noop } from './AbstractOverlay.js';\n\nconst HOVER_DELAY = 300;\n\nexport class HoverController extends InteractionController {\n override type = InteractionTypes.hover;\n\n private elementIds: string[] = [];\n\n focusedin = false;\n\n private hoverTimeout?: ReturnType<typeof setTimeout>;\n\n pointerentered = false;\n\n handleTargetFocusin(): void {\n // eslint-disable-next-line @spectrum-web-components/document-active-element\n if (!document.activeElement?.matches(':focus-visible')) {\n return;\n }\n this.
|
|
5
|
-
"mappings": "aAYA,OAAS,4BAAAA,MAAgC,mEACzC,OAAS,YAAAC,MAAgB,mDAEzB,OACI,yBAAAC,EACA,oBAAAC,MACG,6BACP,OAAS,QAAAC,MAAY,uBAErB,MAAMC,EAAc,IAEb,aAAM,wBAAwBH,CAAsB,CAApD,kCACH,KAAS,KAAOC,EAAiB,MAEjC,KAAQ,WAAuB,CAAC,EAEhC,eAAY,GAIZ,oBAAiB,GAEjB,qBAA4B,CAlChC,IAAAG,GAoCaA,EAAA,SAAS,gBAAT,MAAAA,EAAwB,QAAQ,oBAGrC,KAAK,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\n\nimport {\n InteractionController,\n InteractionTypes,\n} from './InteractionController.js';\nimport { noop } from './AbstractOverlay.js';\n\nconst HOVER_DELAY = 300;\n\nexport class HoverController extends InteractionController {\n override type = InteractionTypes.hover;\n\n private elementIds: string[] = [];\n\n focusedin = false;\n\n private hoverTimeout?: ReturnType<typeof setTimeout>;\n\n pointerentered = false;\n\n handleTargetFocusin(): void {\n // eslint-disable-next-line @spectrum-web-components/document-active-element\n if (!document.activeElement?.matches(':focus-visible')) {\n return;\n }\n this.open = true;\n this.focusedin = true;\n }\n\n handleTargetFocusout(): void {\n this.focusedin = false;\n if (this.pointerentered) return;\n this.open = false;\n }\n\n handleTargetPointerenter(): void {\n if (this.hoverTimeout) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = undefined;\n }\n if (this.overlay?.disabled) return;\n this.open = true;\n this.pointerentered = true;\n }\n\n handleTargetPointerleave(): void {\n this.doPointerleave();\n }\n\n // set a timeout once the pointer enters and the overlay is shown\n // give the user time to enter the overlay\n handleHostPointerenter(): void {\n if (this.hoverTimeout) {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = undefined;\n }\n }\n\n handleHostPointerleave(): void {\n this.doPointerleave();\n }\n\n override prepareDescription(): void {\n // require \"content\" to apply relationship\n if (!this.overlay.elements.length) return;\n\n const triggerRoot = this.target.getRootNode();\n const contentRoot = this.overlay.elements[0].getRootNode();\n const overlayRoot = this.overlay.getRootNode();\n if (triggerRoot === overlayRoot) {\n this.prepareOverlayRelativeDescription();\n } else if (triggerRoot === contentRoot) {\n this.prepareContentRelativeDescription();\n }\n }\n\n private prepareOverlayRelativeDescription(): void {\n const releaseDescription = conditionAttributeWithId(\n this.target,\n 'aria-describedby',\n [this.overlay.id]\n );\n this.releaseDescription = () => {\n releaseDescription();\n this.releaseDescription = noop;\n };\n }\n\n private prepareContentRelativeDescription(): void {\n const elementIds: string[] = [];\n const appliedIds = this.overlay.elements.map((el) => {\n elementIds.push(el.id);\n if (!el.id) {\n el.id = `${this.overlay.tagName.toLowerCase()}-helper-${randomID()}`;\n }\n return el.id;\n });\n this.elementIds = elementIds;\n const releaseDescription = conditionAttributeWithId(\n this.target,\n 'aria-describedby',\n appliedIds\n );\n this.releaseDescription = () => {\n releaseDescription();\n this.overlay.elements.map((el, index) => {\n el.id = this.elementIds[index];\n });\n this.releaseDescription = noop;\n };\n }\n\n protected doPointerleave(): void {\n this.pointerentered = false;\n const triggerElement = this.target as HTMLElement;\n if (this.focusedin && triggerElement.matches(':focus-visible')) return;\n\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n }, HOVER_DELAY);\n }\n\n override init(): void {\n // Clean up listeners if they've already been bound\n this.abortController?.abort();\n this.abortController = new AbortController();\n const { signal } = this.abortController;\n this.target.addEventListener(\n 'focusin',\n () => this.handleTargetFocusin(),\n { signal }\n );\n this.target.addEventListener(\n 'focusout',\n () => this.handleTargetFocusout(),\n { signal }\n );\n this.target.addEventListener(\n 'pointerenter',\n () => this.handleTargetPointerenter(),\n { signal }\n );\n this.target.addEventListener(\n 'pointerleave',\n () => this.handleTargetPointerleave(),\n { signal }\n );\n if (this.overlay) {\n this.initOverlay();\n }\n }\n\n override initOverlay(): void {\n if (!this.abortController) {\n return;\n }\n const { signal } = this.abortController;\n this.overlay.addEventListener(\n 'pointerenter',\n () => this.handleHostPointerenter(),\n { signal }\n );\n this.overlay.addEventListener(\n 'pointerleave',\n () => this.handleHostPointerleave(),\n { signal }\n );\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["conditionAttributeWithId", "randomID", "InteractionController", "InteractionTypes", "noop", "HOVER_DELAY", "_a", "triggerRoot", "contentRoot", "overlayRoot", "releaseDescription", "elementIds", "appliedIds", "el", "index", "triggerElement", "signal"]
|
|
7
7
|
}
|
|
@@ -5,18 +5,32 @@ export declare enum InteractionTypes {
|
|
|
5
5
|
'hover' = 1,
|
|
6
6
|
'longpress' = 2
|
|
7
7
|
}
|
|
8
|
+
export type ControllerOptions = {
|
|
9
|
+
overlay?: AbstractOverlay;
|
|
10
|
+
handleOverlayReady?: (overlay: AbstractOverlay) => void;
|
|
11
|
+
isPersistent?: boolean;
|
|
12
|
+
};
|
|
8
13
|
export declare class InteractionController implements ReactiveController {
|
|
9
|
-
host: AbstractOverlay;
|
|
10
14
|
target: HTMLElement;
|
|
11
|
-
private isPersistent;
|
|
12
15
|
abortController: AbortController;
|
|
13
16
|
get activelyOpening(): boolean;
|
|
17
|
+
private handleOverlayReady?;
|
|
18
|
+
get open(): boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Set `open` against the associated Overlay lazily.
|
|
21
|
+
*/
|
|
22
|
+
set open(open: boolean);
|
|
23
|
+
get overlay(): AbstractOverlay;
|
|
24
|
+
set overlay(overlay: AbstractOverlay | undefined);
|
|
25
|
+
private _overlay;
|
|
26
|
+
protected isPersistent: boolean;
|
|
14
27
|
type: InteractionTypes;
|
|
15
|
-
constructor(
|
|
28
|
+
constructor(target: HTMLElement, { overlay, isPersistent, handleOverlayReady }: ControllerOptions);
|
|
16
29
|
prepareDescription(_: HTMLElement): void;
|
|
17
30
|
releaseDescription(): void;
|
|
18
31
|
shouldCompleteOpen(): void;
|
|
19
32
|
init(): void;
|
|
33
|
+
initOverlay(): void;
|
|
20
34
|
abort(): void;
|
|
21
35
|
hostConnected(): void;
|
|
22
36
|
hostDisconnected(): void;
|