@spectrum-web-components/overlay 0.32.1-overlay.33 → 0.32.1-overlay.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -6
- package/package.json +7 -6
- package/src/PlacementController.dev.js +2 -4
- package/src/PlacementController.dev.js.map +2 -2
- package/src/PlacementController.js +1 -1
- package/src/PlacementController.js.map +2 -2
- package/src/overlay-base.css.dev.js +1 -1
- package/src/overlay-base.css.dev.js.map +1 -1
- package/src/overlay-base.css.js +3 -3
- package/src/overlay-base.css.js.map +1 -1
- package/stories/overlay.stories.js +4 -27
- package/stories/overlay.stories.js.map +2 -2
- package/test/overlay.test.js +8 -1
- package/test/overlay.test.js.map +2 -2
package/README.md
CHANGED
|
@@ -55,7 +55,7 @@ While the [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML
|
|
|
55
55
|
|
|
56
56
|
### Complex layered
|
|
57
57
|
|
|
58
|
-
When an overlay is
|
|
58
|
+
When an overlay is placed within a page with complex layering, the content therein can fall behind other content in the `z-index` stack. The following example is somewhat contrived but, imagine a toolbar next to a properties panel. If the toolbar has a lower `z-index` and the properties panel, any overlaid content (tooltips, etc.) within that toolbar will display underneath any content in the properties panel with which it may share pixels.
|
|
59
59
|
|
|
60
60
|
```html
|
|
61
61
|
<div class="complex-layered-demo">
|
|
@@ -87,11 +87,11 @@ When an overlay is places within a page with complex layering, it is possible fo
|
|
|
87
87
|
</style>
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
-
Properly managed `z-index` values will support working around this issue while browsers work to adopt the `popover` attribute. In this demo, you can easily achieve the same output but sharing one `z-index` between the various pieces of content, removing `z-index` values
|
|
90
|
+
Properly managed `z-index` values will support working around this issue while browsers work to adopt the `popover` attribute. In this demo, you can easily achieve the same output but sharing one `z-index` between the various pieces of content, removing `z-index` values altogether, or raising the `.complex-layered-holder` element to a higher `z-index` than the `.complex-layered-blocker` element.
|
|
91
91
|
|
|
92
92
|
### Contained
|
|
93
93
|
|
|
94
|
-
[CSS Containment](https://developer.mozilla.org/en-US/docs/Web/CSS/contain) allows a developer direct control
|
|
94
|
+
[CSS Containment](https://developer.mozilla.org/en-US/docs/Web/CSS/contain) allows a developer direct control over how the internals of one element affects the paint and layout of the internals of other elements on the same page. While leveraging some of its values can offer performance gains, they can interrupt the delivery of your overlaid content.
|
|
95
95
|
|
|
96
96
|
```html
|
|
97
97
|
<div class="contained-demo">
|
|
@@ -109,7 +109,7 @@ Properly managed `z-index` values will support working around this issue while b
|
|
|
109
109
|
</style>
|
|
110
110
|
```
|
|
111
111
|
|
|
112
|
-
|
|
112
|
+
You could just _remove_ the `contain` rule. But, if you are not OK with simply removing the `contain` value, you still have options. In the case that you would like to continue to leverage `contain` is to place "contained" content separately from your overlaid content, like so:
|
|
113
113
|
|
|
114
114
|
```html
|
|
115
115
|
<div class="contained-demo">
|
|
@@ -125,7 +125,7 @@ This situation is a little more complex to handle, if you are not OK with simply
|
|
|
125
125
|
</style>
|
|
126
126
|
```
|
|
127
127
|
|
|
128
|
-
`<sp-overlay>` accepts an ID reference via the `trigger` attribute
|
|
128
|
+
`<sp-overlay>` accepts an ID reference via the `trigger` attribute to relate it to interactions and positioning in the DOM. To fulfill this reference the two elements need to be in the same DOM tree. However, `<sp-overlay>` alternatively accepts a `triggerElement` _property_ that opens even more flexibility in addressing this situation.
|
|
129
129
|
|
|
130
130
|
### Clip pathed
|
|
131
131
|
|
|
@@ -147,7 +147,7 @@ While not offering the same performance opportunities as `contain`, `clip-path`
|
|
|
147
147
|
</style>
|
|
148
148
|
```
|
|
149
149
|
|
|
150
|
-
Here, again, working with your content needs (whether you
|
|
150
|
+
Here, again, working with your content needs (whether or not you want to leverage `clip-path`) or DOM structure (not colocating clipped and non-clipped content) will allow you to avoid this issue:
|
|
151
151
|
|
|
152
152
|
```html
|
|
153
153
|
<div class="clip-pathed-demo">
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/overlay",
|
|
3
|
-
"version": "0.32.1-overlay.
|
|
3
|
+
"version": "0.32.1-overlay.41+ea2752a5d",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -127,10 +127,11 @@
|
|
|
127
127
|
],
|
|
128
128
|
"dependencies": {
|
|
129
129
|
"@floating-ui/dom": "1.2.1",
|
|
130
|
-
"@spectrum-web-components/action-button": "^0.32.1-overlay.
|
|
131
|
-
"@spectrum-web-components/base": "^0.32.1-overlay.
|
|
132
|
-
"@spectrum-web-components/
|
|
133
|
-
"@spectrum-web-components/
|
|
130
|
+
"@spectrum-web-components/action-button": "^0.32.1-overlay.41+ea2752a5d",
|
|
131
|
+
"@spectrum-web-components/base": "^0.32.1-overlay.41+ea2752a5d",
|
|
132
|
+
"@spectrum-web-components/reactive-controllers": "^0.32.1-overlay.41+ea2752a5d",
|
|
133
|
+
"@spectrum-web-components/shared": "^0.32.1-overlay.41+ea2752a5d",
|
|
134
|
+
"@spectrum-web-components/theme": "^0.32.1-overlay.41+ea2752a5d"
|
|
134
135
|
},
|
|
135
136
|
"types": "./src/index.d.ts",
|
|
136
137
|
"customElements": "custom-elements.json",
|
|
@@ -142,5 +143,5 @@
|
|
|
142
143
|
"./stories/overlay-story-components.js",
|
|
143
144
|
"./**/*.dev.js"
|
|
144
145
|
],
|
|
145
|
-
"gitHead": "
|
|
146
|
+
"gitHead": "ea2752a5dab7c3fc9f9d68148e74af23c63e2cfd"
|
|
146
147
|
}
|
|
@@ -146,7 +146,7 @@ export class PlacementController {
|
|
|
146
146
|
Object.assign(target.style, {
|
|
147
147
|
top: "0px",
|
|
148
148
|
left: "0px",
|
|
149
|
-
|
|
149
|
+
translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`
|
|
150
150
|
});
|
|
151
151
|
target.setAttribute("actual-placement", placement);
|
|
152
152
|
(_b = this.host.elements) == null ? void 0 : _b.forEach((element) => {
|
|
@@ -161,9 +161,7 @@ export class PlacementController {
|
|
|
161
161
|
Object.assign(tipElement.style, {
|
|
162
162
|
top: placement.startsWith("right") || placement.startsWith("left") ? "0px" : "",
|
|
163
163
|
left: placement.startsWith("bottom") || placement.startsWith("top") ? "0px" : "",
|
|
164
|
-
|
|
165
|
-
arrowY
|
|
166
|
-
)}px)`
|
|
164
|
+
translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`
|
|
167
165
|
});
|
|
168
166
|
}
|
|
169
167
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["PlacementController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 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 type { ReactiveController, ReactiveElement } from 'lit';\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n offset,\n Placement,\n shift,\n size,\n} from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { topLayerOverTransforms } from './topLayerOverTransforms.dev.js'\nimport type { OpenableElement, OverlayBase } from './OverlayBase.dev.js'\n\ntype OverlayOptions = {\n abortPromise?: Promise<boolean>;\n delayed?: boolean;\n offset?: number | [number, number]; // supporting multi-axis\n placement: Placement;\n notImmediatelyClosable?: boolean; // rename or place behind other API options\n receivesFocus?: 'auto';\n root?: HTMLElement;\n trigger: HTMLElement | VirtualTrigger;\n type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\nfunction roundByDPR(num?: number): number {\n if (typeof num === 'undefined') return 0;\n const dpr = window.devicePixelRatio || 1;\n return Math.round(num * dpr) / dpr ?? -10000;\n}\n\n// See: https://spectrum.adobe.com/page/popover/#Container-padding\nconst REQUIRED_DISTANCE_TO_EDGE = 8;\n// See: https://github.com/adobe/spectrum-web-components/issues/910\nconst MIN_OVERLAY_HEIGHT = 100;\n\nconst getFallbackPlacements = (placement: Placement): Placement[] => {\n const fallbacks: Record<Placement, Placement[]> = {\n left: ['right', 'bottom', 'top'],\n 'left-start': ['right-start', 'bottom', 'top'],\n 'left-end': ['right-end', 'bottom', 'top'],\n right: ['left', 'bottom', 'top'],\n 'right-start': ['left-start', 'bottom', 'top'],\n 'right-end': ['left-end', 'bottom', 'top'],\n top: ['bottom', 'left', 'right'],\n 'top-start': ['bottom-start', 'left', 'right'],\n 'top-end': ['bottom-end', 'left', 'right'],\n bottom: ['top', 'left', 'right'],\n 'bottom-start': ['top-start', 'left', 'right'],\n 'bottom-end': ['top-end', 'left', 'right'],\n };\n return fallbacks[placement] ?? [placement];\n};\n\nexport const placementUpdatedSymbol = Symbol('placement updated');\n\nexport class PlacementController implements ReactiveController {\n private cleanup?: () => void;\n\n initialHeight?: number;\n\n isConstrained?: boolean;\n\n private host!: ReactiveElement & { elements: OpenableElement[] };\n\n private options!: OverlayOptions;\n\n private originalPlacements = new WeakMap<HTMLElement, Placement>();\n\n private target!: HTMLElement;\n\n constructor(host: ReactiveElement & { elements: OpenableElement[] }) {\n this.host = host;\n // Add the controller after the MutationObserver has been created in preparation\n // for the `hostConnected`/`hostDisconnected` callbacks to be run.\n this.host.addController(this);\n }\n\n public async placeOverlay(\n target: HTMLElement = this.target,\n options: OverlayOptions = this.options\n ): Promise<void> {\n this.target = target;\n this.options = options;\n if (!target || !options) return;\n\n const cleanup = autoUpdate(\n options.trigger,\n target,\n this.updatePlacement,\n {\n elementResize: false,\n }\n );\n this.cleanup = () => {\n this.host.elements?.forEach((element) => {\n element.addEventListener(\n 'sp-closed',\n () => {\n const placement = this.originalPlacements.get(element);\n if (placement) {\n element.setAttribute('placement', placement);\n }\n this.originalPlacements.delete(element);\n },\n { once: true }\n );\n });\n cleanup();\n };\n }\n\n updatePlacement = (): void => {\n if (this.options.type !== 'modal' && this.cleanup) {\n this.target.dispatchEvent(new Event('close', { bubbles: true }));\n return;\n }\n this.computePlacement();\n };\n\n async computePlacement(): Promise<void> {\n const { options, target } = this;\n\n await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n const flipMiddleware = !(options.trigger instanceof HTMLElement)\n ? flip({\n padding: REQUIRED_DISTANCE_TO_EDGE,\n fallbackPlacements: getFallbackPlacements(options.placement),\n })\n : flip();\n\n const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)\n ? options.offset\n : [options.offset, 0];\n\n const tipElement = this.host.elements.find(\n (el) => el.tipElement\n )?.tipElement;\n\n const middleware = [\n offset({\n mainAxis,\n crossAxis,\n }),\n shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),\n flipMiddleware,\n size({\n padding: REQUIRED_DISTANCE_TO_EDGE,\n apply: ({\n availableWidth,\n availableHeight,\n rects: { floating },\n }) => {\n const maxHeight = Math.max(\n MIN_OVERLAY_HEIGHT,\n Math.floor(availableHeight)\n );\n const actualHeight = floating.height;\n this.initialHeight = !this.isConstrained // && !this.virtualTrigger\n ? actualHeight\n : this.initialHeight || actualHeight;\n this.isConstrained =\n actualHeight < this.initialHeight ||\n maxHeight <= actualHeight;\n const appliedHeight = this.isConstrained\n ? `${maxHeight}px`\n : '';\n Object.assign(target.style, {\n maxWidth: `${Math.floor(availableWidth)}px`,\n maxHeight: appliedHeight,\n height: appliedHeight,\n });\n },\n }),\n ...(tipElement ? [arrow({ element: tipElement })] : []),\n topLayerOverTransforms(),\n ];\n const { x, y, placement, middlewareData } = await computePosition(\n options.trigger,\n target,\n {\n placement: options.placement,\n middleware,\n strategy: 'fixed',\n }\n );\n Object.assign(target.style, {\n top: '0px',\n left: '0px',\n
|
|
5
|
-
"mappings": ";AAaA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACG;AAEP,SAAS,8BAA8B;AAevC,SAAS,WAAW,KAAsB;AACtC,MAAI,OAAO,QAAQ;AAAa,WAAO;AACvC,QAAM,MAAM,OAAO,oBAAoB;AACvC,SAAO,KAAK,MAAM,MAAM,GAAG,IAAI;AACnC;AAGA,MAAM,4BAA4B;AAElC,MAAM,qBAAqB;AAE3B,MAAM,wBAAwB,CAAC,cAAsC;AAlDrE;AAmDI,QAAM,YAA4C;AAAA,IAC9C,MAAM,CAAC,SAAS,UAAU,KAAK;AAAA,IAC/B,cAAc,CAAC,eAAe,UAAU,KAAK;AAAA,IAC7C,YAAY,CAAC,aAAa,UAAU,KAAK;AAAA,IACzC,OAAO,CAAC,QAAQ,UAAU,KAAK;AAAA,IAC/B,eAAe,CAAC,cAAc,UAAU,KAAK;AAAA,IAC7C,aAAa,CAAC,YAAY,UAAU,KAAK;AAAA,IACzC,KAAK,CAAC,UAAU,QAAQ,OAAO;AAAA,IAC/B,aAAa,CAAC,gBAAgB,QAAQ,OAAO;AAAA,IAC7C,WAAW,CAAC,cAAc,QAAQ,OAAO;AAAA,IACzC,QAAQ,CAAC,OAAO,QAAQ,OAAO;AAAA,IAC/B,gBAAgB,CAAC,aAAa,QAAQ,OAAO;AAAA,IAC7C,cAAc,CAAC,WAAW,QAAQ,OAAO;AAAA,EAC7C;AACA,UAAO,eAAU,SAAS,MAAnB,YAAwB,CAAC,SAAS;AAC7C;AAEO,aAAM,yBAAyB,OAAO,mBAAmB;AAEzD,aAAM,oBAAkD;AAAA,EAe3D,YAAY,MAAyD;AAJrE,SAAQ,qBAAqB,oBAAI,QAAgC;AA6CjE,2BAAkB,MAAY;AAC1B,UAAI,KAAK,QAAQ,SAAS,WAAW,KAAK,SAAS;AAC/C,aAAK,OAAO,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;AAC/D;AAAA,MACJ;AACA,WAAK,iBAAiB;AAAA,IAC1B;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 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 type { ReactiveController, ReactiveElement } from 'lit';\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n offset,\n Placement,\n shift,\n size,\n} from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { topLayerOverTransforms } from './topLayerOverTransforms.dev.js'\nimport type { OpenableElement, OverlayBase } from './OverlayBase.dev.js'\n\ntype OverlayOptions = {\n abortPromise?: Promise<boolean>;\n delayed?: boolean;\n offset?: number | [number, number]; // supporting multi-axis\n placement: Placement;\n notImmediatelyClosable?: boolean; // rename or place behind other API options\n receivesFocus?: 'auto';\n root?: HTMLElement;\n trigger: HTMLElement | VirtualTrigger;\n type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\nfunction roundByDPR(num?: number): number {\n if (typeof num === 'undefined') return 0;\n const dpr = window.devicePixelRatio || 1;\n return Math.round(num * dpr) / dpr ?? -10000;\n}\n\n// See: https://spectrum.adobe.com/page/popover/#Container-padding\nconst REQUIRED_DISTANCE_TO_EDGE = 8;\n// See: https://github.com/adobe/spectrum-web-components/issues/910\nconst MIN_OVERLAY_HEIGHT = 100;\n\nconst getFallbackPlacements = (placement: Placement): Placement[] => {\n const fallbacks: Record<Placement, Placement[]> = {\n left: ['right', 'bottom', 'top'],\n 'left-start': ['right-start', 'bottom', 'top'],\n 'left-end': ['right-end', 'bottom', 'top'],\n right: ['left', 'bottom', 'top'],\n 'right-start': ['left-start', 'bottom', 'top'],\n 'right-end': ['left-end', 'bottom', 'top'],\n top: ['bottom', 'left', 'right'],\n 'top-start': ['bottom-start', 'left', 'right'],\n 'top-end': ['bottom-end', 'left', 'right'],\n bottom: ['top', 'left', 'right'],\n 'bottom-start': ['top-start', 'left', 'right'],\n 'bottom-end': ['top-end', 'left', 'right'],\n };\n return fallbacks[placement] ?? [placement];\n};\n\nexport const placementUpdatedSymbol = Symbol('placement updated');\n\nexport class PlacementController implements ReactiveController {\n private cleanup?: () => void;\n\n initialHeight?: number;\n\n isConstrained?: boolean;\n\n private host!: ReactiveElement & { elements: OpenableElement[] };\n\n private options!: OverlayOptions;\n\n private originalPlacements = new WeakMap<HTMLElement, Placement>();\n\n private target!: HTMLElement;\n\n constructor(host: ReactiveElement & { elements: OpenableElement[] }) {\n this.host = host;\n // Add the controller after the MutationObserver has been created in preparation\n // for the `hostConnected`/`hostDisconnected` callbacks to be run.\n this.host.addController(this);\n }\n\n public async placeOverlay(\n target: HTMLElement = this.target,\n options: OverlayOptions = this.options\n ): Promise<void> {\n this.target = target;\n this.options = options;\n if (!target || !options) return;\n\n const cleanup = autoUpdate(\n options.trigger,\n target,\n this.updatePlacement,\n {\n elementResize: false,\n }\n );\n this.cleanup = () => {\n this.host.elements?.forEach((element) => {\n element.addEventListener(\n 'sp-closed',\n () => {\n const placement = this.originalPlacements.get(element);\n if (placement) {\n element.setAttribute('placement', placement);\n }\n this.originalPlacements.delete(element);\n },\n { once: true }\n );\n });\n cleanup();\n };\n }\n\n updatePlacement = (): void => {\n if (this.options.type !== 'modal' && this.cleanup) {\n this.target.dispatchEvent(new Event('close', { bubbles: true }));\n return;\n }\n this.computePlacement();\n };\n\n async computePlacement(): Promise<void> {\n const { options, target } = this;\n\n await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n const flipMiddleware = !(options.trigger instanceof HTMLElement)\n ? flip({\n padding: REQUIRED_DISTANCE_TO_EDGE,\n fallbackPlacements: getFallbackPlacements(options.placement),\n })\n : flip();\n\n const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)\n ? options.offset\n : [options.offset, 0];\n\n const tipElement = this.host.elements.find(\n (el) => el.tipElement\n )?.tipElement;\n\n const middleware = [\n offset({\n mainAxis,\n crossAxis,\n }),\n shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),\n flipMiddleware,\n size({\n padding: REQUIRED_DISTANCE_TO_EDGE,\n apply: ({\n availableWidth,\n availableHeight,\n rects: { floating },\n }) => {\n const maxHeight = Math.max(\n MIN_OVERLAY_HEIGHT,\n Math.floor(availableHeight)\n );\n const actualHeight = floating.height;\n this.initialHeight = !this.isConstrained // && !this.virtualTrigger\n ? actualHeight\n : this.initialHeight || actualHeight;\n this.isConstrained =\n actualHeight < this.initialHeight ||\n maxHeight <= actualHeight;\n const appliedHeight = this.isConstrained\n ? `${maxHeight}px`\n : '';\n Object.assign(target.style, {\n maxWidth: `${Math.floor(availableWidth)}px`,\n maxHeight: appliedHeight,\n height: appliedHeight,\n });\n },\n }),\n ...(tipElement ? [arrow({ element: tipElement })] : []),\n topLayerOverTransforms(),\n ];\n const { x, y, placement, middlewareData } = await computePosition(\n options.trigger,\n target,\n {\n placement: options.placement,\n middleware,\n strategy: 'fixed',\n }\n );\n Object.assign(target.style, {\n top: '0px',\n left: '0px',\n translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,\n });\n\n target.setAttribute('actual-placement', placement);\n this.host.elements?.forEach((element) => {\n this.originalPlacements.set(\n element,\n element.getAttribute('placement') as Placement\n );\n element.setAttribute('placement', placement);\n });\n\n if (tipElement && middlewareData.arrow) {\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n Object.assign(tipElement.style, {\n top:\n placement.startsWith('right') ||\n placement.startsWith('left')\n ? '0px'\n : '',\n left:\n placement.startsWith('bottom') ||\n placement.startsWith('top')\n ? '0px'\n : '',\n translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`,\n });\n }\n }\n\n public resetOverlayPosition = (): void => {\n if (!this.target || !this.options) return;\n\n this.target.style.removeProperty('max-height');\n this.target.style.removeProperty('height');\n this.initialHeight = undefined;\n this.isConstrained = false;\n // force paint\n this.host.offsetHeight;\n this.computePlacement();\n };\n\n hostConnected(): void {\n document.addEventListener(\n 'sp-update-overlays',\n this.resetOverlayPosition\n );\n }\n\n hostUpdated(): void {\n if (!(this.host as OverlayBase).open) {\n this.cleanup?.();\n this.cleanup = undefined;\n }\n }\n\n hostDisconnected(): void {\n this.cleanup?.();\n this.cleanup = undefined;\n document.removeEventListener(\n 'sp-update-overlays',\n this.resetOverlayPosition\n );\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAaA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACG;AAEP,SAAS,8BAA8B;AAevC,SAAS,WAAW,KAAsB;AACtC,MAAI,OAAO,QAAQ;AAAa,WAAO;AACvC,QAAM,MAAM,OAAO,oBAAoB;AACvC,SAAO,KAAK,MAAM,MAAM,GAAG,IAAI;AACnC;AAGA,MAAM,4BAA4B;AAElC,MAAM,qBAAqB;AAE3B,MAAM,wBAAwB,CAAC,cAAsC;AAlDrE;AAmDI,QAAM,YAA4C;AAAA,IAC9C,MAAM,CAAC,SAAS,UAAU,KAAK;AAAA,IAC/B,cAAc,CAAC,eAAe,UAAU,KAAK;AAAA,IAC7C,YAAY,CAAC,aAAa,UAAU,KAAK;AAAA,IACzC,OAAO,CAAC,QAAQ,UAAU,KAAK;AAAA,IAC/B,eAAe,CAAC,cAAc,UAAU,KAAK;AAAA,IAC7C,aAAa,CAAC,YAAY,UAAU,KAAK;AAAA,IACzC,KAAK,CAAC,UAAU,QAAQ,OAAO;AAAA,IAC/B,aAAa,CAAC,gBAAgB,QAAQ,OAAO;AAAA,IAC7C,WAAW,CAAC,cAAc,QAAQ,OAAO;AAAA,IACzC,QAAQ,CAAC,OAAO,QAAQ,OAAO;AAAA,IAC/B,gBAAgB,CAAC,aAAa,QAAQ,OAAO;AAAA,IAC7C,cAAc,CAAC,WAAW,QAAQ,OAAO;AAAA,EAC7C;AACA,UAAO,eAAU,SAAS,MAAnB,YAAwB,CAAC,SAAS;AAC7C;AAEO,aAAM,yBAAyB,OAAO,mBAAmB;AAEzD,aAAM,oBAAkD;AAAA,EAe3D,YAAY,MAAyD;AAJrE,SAAQ,qBAAqB,oBAAI,QAAgC;AA6CjE,2BAAkB,MAAY;AAC1B,UAAI,KAAK,QAAQ,SAAS,WAAW,KAAK,SAAS;AAC/C,aAAK,OAAO,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;AAC/D;AAAA,MACJ;AACA,WAAK,iBAAiB;AAAA,IAC1B;AAuGA,SAAO,uBAAuB,MAAY;AACtC,UAAI,CAAC,KAAK,UAAU,CAAC,KAAK;AAAS;AAEnC,WAAK,OAAO,MAAM,eAAe,YAAY;AAC7C,WAAK,OAAO,MAAM,eAAe,QAAQ;AACzC,WAAK,gBAAgB;AACrB,WAAK,gBAAgB;AAErB,WAAK,KAAK;AACV,WAAK,iBAAiB;AAAA,IAC1B;AA/JI,SAAK,OAAO;AAGZ,SAAK,KAAK,cAAc,IAAI;AAAA,EAChC;AAAA,EAEA,MAAa,aACT,SAAsB,KAAK,QAC3B,UAA0B,KAAK,SAClB;AACb,SAAK,SAAS;AACd,SAAK,UAAU;AACf,QAAI,CAAC,UAAU,CAAC;AAAS;AAEzB,UAAM,UAAU;AAAA,MACZ,QAAQ;AAAA,MACR;AAAA,MACA,KAAK;AAAA,MACL;AAAA,QACI,eAAe;AAAA,MACnB;AAAA,IACJ;AACA,SAAK,UAAU,MAAM;AA5G7B;AA6GY,iBAAK,KAAK,aAAV,mBAAoB,QAAQ,CAAC,YAAY;AACrC,gBAAQ;AAAA,UACJ;AAAA,UACA,MAAM;AACF,kBAAM,YAAY,KAAK,mBAAmB,IAAI,OAAO;AACrD,gBAAI,WAAW;AACX,sBAAQ,aAAa,aAAa,SAAS;AAAA,YAC/C;AACA,iBAAK,mBAAmB,OAAO,OAAO;AAAA,UAC1C;AAAA,UACA,EAAE,MAAM,KAAK;AAAA,QACjB;AAAA,MACJ;AACA,cAAQ;AAAA,IACZ;AAAA,EACJ;AAAA,EAUA,MAAM,mBAAkC;AAtI5C;AAuIQ,UAAM,EAAE,SAAS,OAAO,IAAI;AAE5B,WAAO,SAAS,QAAQ,SAAS,MAAM,QAAQ,QAAQ,QAAQ;AAE/D,UAAM,iBAAiB,EAAE,QAAQ,mBAAmB,eAC9C,KAAK;AAAA,MACD,SAAS;AAAA,MACT,oBAAoB,sBAAsB,QAAQ,SAAS;AAAA,IAC/D,CAAC,IACD,KAAK;AAEX,UAAM,CAAC,WAAW,GAAG,YAAY,CAAC,IAAI,MAAM,QAAQ,mCAAS,MAAM,IAC7D,QAAQ,SACR,CAAC,QAAQ,QAAQ,CAAC;AAExB,UAAM,cAAa,UAAK,KAAK,SAAS;AAAA,MAClC,CAAC,OAAO,GAAG;AAAA,IACf,MAFmB,mBAEhB;AAEH,UAAM,aAAa;AAAA,MACf,OAAO;AAAA,QACH;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,MACD,MAAM,EAAE,SAAS,0BAA0B,CAAC;AAAA,MAC5C;AAAA,MACA,KAAK;AAAA,QACD,SAAS;AAAA,QACT,OAAO,CAAC;AAAA,UACJ;AAAA,UACA;AAAA,UACA,OAAO,EAAE,SAAS;AAAA,QACtB,MAAM;AACF,gBAAM,YAAY,KAAK;AAAA,YACnB;AAAA,YACA,KAAK,MAAM,eAAe;AAAA,UAC9B;AACA,gBAAM,eAAe,SAAS;AAC9B,eAAK,gBAAgB,CAAC,KAAK,gBACrB,eACA,KAAK,iBAAiB;AAC5B,eAAK,gBACD,eAAe,KAAK,iBACpB,aAAa;AACjB,gBAAM,gBAAgB,KAAK,gBACrB,GAAG,gBACH;AACN,iBAAO,OAAO,OAAO,OAAO;AAAA,YACxB,UAAU,GAAG,KAAK,MAAM,cAAc;AAAA,YACtC,WAAW;AAAA,YACX,QAAQ;AAAA,UACZ,CAAC;AAAA,QACL;AAAA,MACJ,CAAC;AAAA,MACD,GAAI,aAAa,CAAC,MAAM,EAAE,SAAS,WAAW,CAAC,CAAC,IAAI,CAAC;AAAA,MACrD,uBAAuB;AAAA,IAC3B;AACA,UAAM,EAAE,GAAG,GAAG,WAAW,eAAe,IAAI,MAAM;AAAA,MAC9C,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,QACI,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA,UAAU;AAAA,MACd;AAAA,IACJ;AACA,WAAO,OAAO,OAAO,OAAO;AAAA,MACxB,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW,GAAG,WAAW,CAAC,OAAO,WAAW,CAAC;AAAA,IACjD,CAAC;AAED,WAAO,aAAa,oBAAoB,SAAS;AACjD,eAAK,KAAK,aAAV,mBAAoB,QAAQ,CAAC,YAAY;AACrC,WAAK,mBAAmB;AAAA,QACpB;AAAA,QACA,QAAQ,aAAa,WAAW;AAAA,MACpC;AACA,cAAQ,aAAa,aAAa,SAAS;AAAA,IAC/C;AAEA,QAAI,cAAc,eAAe,OAAO;AACpC,YAAM,EAAE,GAAG,QAAQ,GAAG,OAAO,IAAI,eAAe;AAEhD,aAAO,OAAO,WAAW,OAAO;AAAA,QAC5B,KACI,UAAU,WAAW,OAAO,KAC5B,UAAU,WAAW,MAAM,IACrB,QACA;AAAA,QACV,MACI,UAAU,WAAW,QAAQ,KAC7B,UAAU,WAAW,KAAK,IACpB,QACA;AAAA,QACV,WAAW,GAAG,WAAW,MAAM,OAAO,WAAW,MAAM;AAAA,MAC3D,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAcA,gBAAsB;AAClB,aAAS;AAAA,MACL;AAAA,MACA,KAAK;AAAA,IACT;AAAA,EACJ;AAAA,EAEA,cAAoB;AA9PxB;AA+PQ,QAAI,CAAE,KAAK,KAAqB,MAAM;AAClC,iBAAK,YAAL;AACA,WAAK,UAAU;AAAA,IACnB;AAAA,EACJ;AAAA,EAEA,mBAAyB;AArQ7B;AAsQQ,eAAK,YAAL;AACA,SAAK,UAAU;AACf,aAAS;AAAA,MACL;AAAA,MACA,KAAK;AAAA,IACT;AAAA,EACJ;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{arrow as O,autoUpdate as H,computePosition as w,flip as v,offset as M,shift as T,size as C}from"@floating-ui/dom";import{topLayerOverTransforms as R}from"./topLayerOverTransforms.js";function m(a){if(typeof a=="undefined")return 0;const t=window.devicePixelRatio||1;return Math.round(a*t)/t}const h=8,L=100,A=a=>{var e;return(e={left:["right","bottom","top"],"left-start":["right-start","bottom","top"],"left-end":["right-end","bottom","top"],right:["left","bottom","top"],"right-start":["left-start","bottom","top"],"right-end":["left-end","bottom","top"],top:["bottom","left","right"],"top-start":["bottom-start","left","right"],"top-end":["bottom-end","left","right"],bottom:["top","left","right"],"bottom-start":["top-start","left","right"],"bottom-end":["top-end","left","right"]}[a])!=null?e:[a]};export const placementUpdatedSymbol=Symbol("placement updated");export class PlacementController{constructor(t){this.originalPlacements=new WeakMap;this.updatePlacement=()=>{if(this.options.type!=="modal"&&this.cleanup){this.target.dispatchEvent(new Event("close",{bubbles:!0}));return}this.computePlacement()};this.resetOverlayPosition=()=>{!this.target||!this.options||(this.target.style.removeProperty("max-height"),this.target.style.removeProperty("height"),this.initialHeight=void 0,this.isConstrained=!1,this.host.offsetHeight,this.computePlacement())};this.host=t,this.host.addController(this)}async placeOverlay(t=this.target,e=this.options){if(this.target=t,this.options=e,!t||!e)return;const p=H(e.trigger,t,this.updatePlacement,{elementResize:!1});this.cleanup=()=>{var r;(r=this.host.elements)==null||r.forEach(s=>{s.addEventListener("sp-closed",()=>{const o=this.originalPlacements.get(s);o&&s.setAttribute("placement",o),this.originalPlacements.delete(s)},{once:!0})}),p()}}async computePlacement(){var f,g;const{options:t,target:e}=this;await(document.fonts?document.fonts.ready:Promise.resolve());const p=t.trigger instanceof HTMLElement?v():v({padding:h,fallbackPlacements:A(t.placement)}),[r=0,s=0]=Array.isArray(t==null?void 0:t.offset)?t.offset:[t.offset,0],o=(f=this.host.elements.find(i=>i.tipElement))==null?void 0:f.tipElement,y=[M({mainAxis:r,crossAxis:s}),T({padding:h}),p,C({padding:h,apply:({availableWidth:i,availableHeight:c,rects:{floating:x}})=>{const u=Math.max(L,Math.floor(c)),l=x.height;this.initialHeight=this.isConstrained&&this.initialHeight||l,this.isConstrained=l<this.initialHeight||u<=l;const b=this.isConstrained?`${u}px`:"";Object.assign(e.style,{maxWidth:`${Math.floor(i)}px`,maxHeight:b,height:b})}}),...o?[O({element:o})]:[],R()],{x:P,y:E,placement:n,middlewareData:d}=await w(t.trigger,e,{placement:t.placement,middleware:y,strategy:"fixed"});if(Object.assign(e.style,{top:"0px",left:"0px",
|
|
1
|
+
"use strict";import{arrow as O,autoUpdate as H,computePosition as w,flip as v,offset as M,shift as T,size as C}from"@floating-ui/dom";import{topLayerOverTransforms as R}from"./topLayerOverTransforms.js";function m(a){if(typeof a=="undefined")return 0;const t=window.devicePixelRatio||1;return Math.round(a*t)/t}const h=8,L=100,A=a=>{var e;return(e={left:["right","bottom","top"],"left-start":["right-start","bottom","top"],"left-end":["right-end","bottom","top"],right:["left","bottom","top"],"right-start":["left-start","bottom","top"],"right-end":["left-end","bottom","top"],top:["bottom","left","right"],"top-start":["bottom-start","left","right"],"top-end":["bottom-end","left","right"],bottom:["top","left","right"],"bottom-start":["top-start","left","right"],"bottom-end":["top-end","left","right"]}[a])!=null?e:[a]};export const placementUpdatedSymbol=Symbol("placement updated");export class PlacementController{constructor(t){this.originalPlacements=new WeakMap;this.updatePlacement=()=>{if(this.options.type!=="modal"&&this.cleanup){this.target.dispatchEvent(new Event("close",{bubbles:!0}));return}this.computePlacement()};this.resetOverlayPosition=()=>{!this.target||!this.options||(this.target.style.removeProperty("max-height"),this.target.style.removeProperty("height"),this.initialHeight=void 0,this.isConstrained=!1,this.host.offsetHeight,this.computePlacement())};this.host=t,this.host.addController(this)}async placeOverlay(t=this.target,e=this.options){if(this.target=t,this.options=e,!t||!e)return;const p=H(e.trigger,t,this.updatePlacement,{elementResize:!1});this.cleanup=()=>{var r;(r=this.host.elements)==null||r.forEach(s=>{s.addEventListener("sp-closed",()=>{const o=this.originalPlacements.get(s);o&&s.setAttribute("placement",o),this.originalPlacements.delete(s)},{once:!0})}),p()}}async computePlacement(){var f,g;const{options:t,target:e}=this;await(document.fonts?document.fonts.ready:Promise.resolve());const p=t.trigger instanceof HTMLElement?v():v({padding:h,fallbackPlacements:A(t.placement)}),[r=0,s=0]=Array.isArray(t==null?void 0:t.offset)?t.offset:[t.offset,0],o=(f=this.host.elements.find(i=>i.tipElement))==null?void 0:f.tipElement,y=[M({mainAxis:r,crossAxis:s}),T({padding:h}),p,C({padding:h,apply:({availableWidth:i,availableHeight:c,rects:{floating:x}})=>{const u=Math.max(L,Math.floor(c)),l=x.height;this.initialHeight=this.isConstrained&&this.initialHeight||l,this.isConstrained=l<this.initialHeight||u<=l;const b=this.isConstrained?`${u}px`:"";Object.assign(e.style,{maxWidth:`${Math.floor(i)}px`,maxHeight:b,height:b})}}),...o?[O({element:o})]:[],R()],{x:P,y:E,placement:n,middlewareData:d}=await w(t.trigger,e,{placement:t.placement,middleware:y,strategy:"fixed"});if(Object.assign(e.style,{top:"0px",left:"0px",translate:`${m(P)}px ${m(E)}px`}),e.setAttribute("actual-placement",n),(g=this.host.elements)==null||g.forEach(i=>{this.originalPlacements.set(i,i.getAttribute("placement")),i.setAttribute("placement",n)}),o&&d.arrow){const{x:i,y:c}=d.arrow;Object.assign(o.style,{top:n.startsWith("right")||n.startsWith("left")?"0px":"",left:n.startsWith("bottom")||n.startsWith("top")?"0px":"",translate:`${m(i)}px ${m(c)}px`})}}hostConnected(){document.addEventListener("sp-update-overlays",this.resetOverlayPosition)}hostUpdated(){var t;this.host.open||((t=this.cleanup)==null||t.call(this),this.cleanup=void 0)}hostDisconnected(){var t;(t=this.cleanup)==null||t.call(this),this.cleanup=void 0,document.removeEventListener("sp-update-overlays",this.resetOverlayPosition)}}
|
|
2
2
|
//# sourceMappingURL=PlacementController.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["PlacementController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 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 type { ReactiveController, ReactiveElement } from 'lit';\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n offset,\n Placement,\n shift,\n size,\n} from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\nimport { topLayerOverTransforms } from './topLayerOverTransforms.js';\nimport type { OpenableElement, OverlayBase } from './OverlayBase.js';\n\ntype OverlayOptions = {\n abortPromise?: Promise<boolean>;\n delayed?: boolean;\n offset?: number | [number, number]; // supporting multi-axis\n placement: Placement;\n notImmediatelyClosable?: boolean; // rename or place behind other API options\n receivesFocus?: 'auto';\n root?: HTMLElement;\n trigger: HTMLElement | VirtualTrigger;\n type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\nfunction roundByDPR(num?: number): number {\n if (typeof num === 'undefined') return 0;\n const dpr = window.devicePixelRatio || 1;\n return Math.round(num * dpr) / dpr ?? -10000;\n}\n\n// See: https://spectrum.adobe.com/page/popover/#Container-padding\nconst REQUIRED_DISTANCE_TO_EDGE = 8;\n// See: https://github.com/adobe/spectrum-web-components/issues/910\nconst MIN_OVERLAY_HEIGHT = 100;\n\nconst getFallbackPlacements = (placement: Placement): Placement[] => {\n const fallbacks: Record<Placement, Placement[]> = {\n left: ['right', 'bottom', 'top'],\n 'left-start': ['right-start', 'bottom', 'top'],\n 'left-end': ['right-end', 'bottom', 'top'],\n right: ['left', 'bottom', 'top'],\n 'right-start': ['left-start', 'bottom', 'top'],\n 'right-end': ['left-end', 'bottom', 'top'],\n top: ['bottom', 'left', 'right'],\n 'top-start': ['bottom-start', 'left', 'right'],\n 'top-end': ['bottom-end', 'left', 'right'],\n bottom: ['top', 'left', 'right'],\n 'bottom-start': ['top-start', 'left', 'right'],\n 'bottom-end': ['top-end', 'left', 'right'],\n };\n return fallbacks[placement] ?? [placement];\n};\n\nexport const placementUpdatedSymbol = Symbol('placement updated');\n\nexport class PlacementController implements ReactiveController {\n private cleanup?: () => void;\n\n initialHeight?: number;\n\n isConstrained?: boolean;\n\n private host!: ReactiveElement & { elements: OpenableElement[] };\n\n private options!: OverlayOptions;\n\n private originalPlacements = new WeakMap<HTMLElement, Placement>();\n\n private target!: HTMLElement;\n\n constructor(host: ReactiveElement & { elements: OpenableElement[] }) {\n this.host = host;\n // Add the controller after the MutationObserver has been created in preparation\n // for the `hostConnected`/`hostDisconnected` callbacks to be run.\n this.host.addController(this);\n }\n\n public async placeOverlay(\n target: HTMLElement = this.target,\n options: OverlayOptions = this.options\n ): Promise<void> {\n this.target = target;\n this.options = options;\n if (!target || !options) return;\n\n const cleanup = autoUpdate(\n options.trigger,\n target,\n this.updatePlacement,\n {\n elementResize: false,\n }\n );\n this.cleanup = () => {\n this.host.elements?.forEach((element) => {\n element.addEventListener(\n 'sp-closed',\n () => {\n const placement = this.originalPlacements.get(element);\n if (placement) {\n element.setAttribute('placement', placement);\n }\n this.originalPlacements.delete(element);\n },\n { once: true }\n );\n });\n cleanup();\n };\n }\n\n updatePlacement = (): void => {\n if (this.options.type !== 'modal' && this.cleanup) {\n this.target.dispatchEvent(new Event('close', { bubbles: true }));\n return;\n }\n this.computePlacement();\n };\n\n async computePlacement(): Promise<void> {\n const { options, target } = this;\n\n await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n const flipMiddleware = !(options.trigger instanceof HTMLElement)\n ? flip({\n padding: REQUIRED_DISTANCE_TO_EDGE,\n fallbackPlacements: getFallbackPlacements(options.placement),\n })\n : flip();\n\n const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)\n ? options.offset\n : [options.offset, 0];\n\n const tipElement = this.host.elements.find(\n (el) => el.tipElement\n )?.tipElement;\n\n const middleware = [\n offset({\n mainAxis,\n crossAxis,\n }),\n shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),\n flipMiddleware,\n size({\n padding: REQUIRED_DISTANCE_TO_EDGE,\n apply: ({\n availableWidth,\n availableHeight,\n rects: { floating },\n }) => {\n const maxHeight = Math.max(\n MIN_OVERLAY_HEIGHT,\n Math.floor(availableHeight)\n );\n const actualHeight = floating.height;\n this.initialHeight = !this.isConstrained // && !this.virtualTrigger\n ? actualHeight\n : this.initialHeight || actualHeight;\n this.isConstrained =\n actualHeight < this.initialHeight ||\n maxHeight <= actualHeight;\n const appliedHeight = this.isConstrained\n ? `${maxHeight}px`\n : '';\n Object.assign(target.style, {\n maxWidth: `${Math.floor(availableWidth)}px`,\n maxHeight: appliedHeight,\n height: appliedHeight,\n });\n },\n }),\n ...(tipElement ? [arrow({ element: tipElement })] : []),\n topLayerOverTransforms(),\n ];\n const { x, y, placement, middlewareData } = await computePosition(\n options.trigger,\n target,\n {\n placement: options.placement,\n middleware,\n strategy: 'fixed',\n }\n );\n Object.assign(target.style, {\n top: '0px',\n left: '0px',\n
|
|
5
|
-
"mappings": "aAaA,OACI,SAAAA,EACA,cAAAC,EACA,mBAAAC,EACA,QAAAC,EACA,UAAAC,EAEA,SAAAC,EACA,QAAAC,MACG,mBAEP,OAAS,0BAAAC,MAA8B,8BAevC,SAASC,EAAWC,EAAsB,CACtC,GAAI,OAAOA,GAAQ,YAAa,MAAO,GACvC,MAAMC,EAAM,OAAO,kBAAoB,EACvC,OAAO,KAAK,MAAMD,EAAMC,CAAG,EAAIA,CACnC,CAGA,MAAMC,EAA4B,EAE5BC,EAAqB,IAErBC,EAAyBC,GAAsC,CAlDrE,IAAAC,EAiEI,OAAOA,EAd2C,CAC9C,KAAM,CAAC,QAAS,SAAU,KAAK,EAC/B,aAAc,CAAC,cAAe,SAAU,KAAK,EAC7C,WAAY,CAAC,YAAa,SAAU,KAAK,EACzC,MAAO,CAAC,OAAQ,SAAU,KAAK,EAC/B,cAAe,CAAC,aAAc,SAAU,KAAK,EAC7C,YAAa,CAAC,WAAY,SAAU,KAAK,EACzC,IAAK,CAAC,SAAU,OAAQ,OAAO,EAC/B,YAAa,CAAC,eAAgB,OAAQ,OAAO,EAC7C,UAAW,CAAC,aAAc,OAAQ,OAAO,EACzC,OAAQ,CAAC,MAAO,OAAQ,OAAO,EAC/B,eAAgB,CAAC,YAAa,OAAQ,OAAO,EAC7C,aAAc,CAAC,UAAW,OAAQ,OAAO,CAC7C,EACiBD,CAAS,IAAnB,KAAAC,EAAwB,CAACD,CAAS,CAC7C,EAEO,aAAM,uBAAyB,OAAO,mBAAmB,EAEzD,aAAM,mBAAkD,CAe3D,YAAYE,EAAyD,CAJrE,KAAQ,mBAAqB,IAAI,QA6CjC,qBAAkB,IAAY,CAC1B,GAAI,KAAK,QAAQ,OAAS,SAAW,KAAK,QAAS,CAC/C,KAAK,OAAO,cAAc,IAAI,MAAM,QAAS,CAAE,QAAS,EAAK,CAAC,CAAC,EAC/D,OAEJ,KAAK,iBAAiB,CAC1B,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 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 type { ReactiveController, ReactiveElement } from 'lit';\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n offset,\n Placement,\n shift,\n size,\n} from '@floating-ui/dom';\nimport type { VirtualTrigger } from './VirtualTrigger.js';\nimport { topLayerOverTransforms } from './topLayerOverTransforms.js';\nimport type { OpenableElement, OverlayBase } from './OverlayBase.js';\n\ntype OverlayOptions = {\n abortPromise?: Promise<boolean>;\n delayed?: boolean;\n offset?: number | [number, number]; // supporting multi-axis\n placement: Placement;\n notImmediatelyClosable?: boolean; // rename or place behind other API options\n receivesFocus?: 'auto';\n root?: HTMLElement;\n trigger: HTMLElement | VirtualTrigger;\n type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';\n};\n\nfunction roundByDPR(num?: number): number {\n if (typeof num === 'undefined') return 0;\n const dpr = window.devicePixelRatio || 1;\n return Math.round(num * dpr) / dpr ?? -10000;\n}\n\n// See: https://spectrum.adobe.com/page/popover/#Container-padding\nconst REQUIRED_DISTANCE_TO_EDGE = 8;\n// See: https://github.com/adobe/spectrum-web-components/issues/910\nconst MIN_OVERLAY_HEIGHT = 100;\n\nconst getFallbackPlacements = (placement: Placement): Placement[] => {\n const fallbacks: Record<Placement, Placement[]> = {\n left: ['right', 'bottom', 'top'],\n 'left-start': ['right-start', 'bottom', 'top'],\n 'left-end': ['right-end', 'bottom', 'top'],\n right: ['left', 'bottom', 'top'],\n 'right-start': ['left-start', 'bottom', 'top'],\n 'right-end': ['left-end', 'bottom', 'top'],\n top: ['bottom', 'left', 'right'],\n 'top-start': ['bottom-start', 'left', 'right'],\n 'top-end': ['bottom-end', 'left', 'right'],\n bottom: ['top', 'left', 'right'],\n 'bottom-start': ['top-start', 'left', 'right'],\n 'bottom-end': ['top-end', 'left', 'right'],\n };\n return fallbacks[placement] ?? [placement];\n};\n\nexport const placementUpdatedSymbol = Symbol('placement updated');\n\nexport class PlacementController implements ReactiveController {\n private cleanup?: () => void;\n\n initialHeight?: number;\n\n isConstrained?: boolean;\n\n private host!: ReactiveElement & { elements: OpenableElement[] };\n\n private options!: OverlayOptions;\n\n private originalPlacements = new WeakMap<HTMLElement, Placement>();\n\n private target!: HTMLElement;\n\n constructor(host: ReactiveElement & { elements: OpenableElement[] }) {\n this.host = host;\n // Add the controller after the MutationObserver has been created in preparation\n // for the `hostConnected`/`hostDisconnected` callbacks to be run.\n this.host.addController(this);\n }\n\n public async placeOverlay(\n target: HTMLElement = this.target,\n options: OverlayOptions = this.options\n ): Promise<void> {\n this.target = target;\n this.options = options;\n if (!target || !options) return;\n\n const cleanup = autoUpdate(\n options.trigger,\n target,\n this.updatePlacement,\n {\n elementResize: false,\n }\n );\n this.cleanup = () => {\n this.host.elements?.forEach((element) => {\n element.addEventListener(\n 'sp-closed',\n () => {\n const placement = this.originalPlacements.get(element);\n if (placement) {\n element.setAttribute('placement', placement);\n }\n this.originalPlacements.delete(element);\n },\n { once: true }\n );\n });\n cleanup();\n };\n }\n\n updatePlacement = (): void => {\n if (this.options.type !== 'modal' && this.cleanup) {\n this.target.dispatchEvent(new Event('close', { bubbles: true }));\n return;\n }\n this.computePlacement();\n };\n\n async computePlacement(): Promise<void> {\n const { options, target } = this;\n\n await (document.fonts ? document.fonts.ready : Promise.resolve());\n\n const flipMiddleware = !(options.trigger instanceof HTMLElement)\n ? flip({\n padding: REQUIRED_DISTANCE_TO_EDGE,\n fallbackPlacements: getFallbackPlacements(options.placement),\n })\n : flip();\n\n const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)\n ? options.offset\n : [options.offset, 0];\n\n const tipElement = this.host.elements.find(\n (el) => el.tipElement\n )?.tipElement;\n\n const middleware = [\n offset({\n mainAxis,\n crossAxis,\n }),\n shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),\n flipMiddleware,\n size({\n padding: REQUIRED_DISTANCE_TO_EDGE,\n apply: ({\n availableWidth,\n availableHeight,\n rects: { floating },\n }) => {\n const maxHeight = Math.max(\n MIN_OVERLAY_HEIGHT,\n Math.floor(availableHeight)\n );\n const actualHeight = floating.height;\n this.initialHeight = !this.isConstrained // && !this.virtualTrigger\n ? actualHeight\n : this.initialHeight || actualHeight;\n this.isConstrained =\n actualHeight < this.initialHeight ||\n maxHeight <= actualHeight;\n const appliedHeight = this.isConstrained\n ? `${maxHeight}px`\n : '';\n Object.assign(target.style, {\n maxWidth: `${Math.floor(availableWidth)}px`,\n maxHeight: appliedHeight,\n height: appliedHeight,\n });\n },\n }),\n ...(tipElement ? [arrow({ element: tipElement })] : []),\n topLayerOverTransforms(),\n ];\n const { x, y, placement, middlewareData } = await computePosition(\n options.trigger,\n target,\n {\n placement: options.placement,\n middleware,\n strategy: 'fixed',\n }\n );\n Object.assign(target.style, {\n top: '0px',\n left: '0px',\n translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,\n });\n\n target.setAttribute('actual-placement', placement);\n this.host.elements?.forEach((element) => {\n this.originalPlacements.set(\n element,\n element.getAttribute('placement') as Placement\n );\n element.setAttribute('placement', placement);\n });\n\n if (tipElement && middlewareData.arrow) {\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n Object.assign(tipElement.style, {\n top:\n placement.startsWith('right') ||\n placement.startsWith('left')\n ? '0px'\n : '',\n left:\n placement.startsWith('bottom') ||\n placement.startsWith('top')\n ? '0px'\n : '',\n translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`,\n });\n }\n }\n\n public resetOverlayPosition = (): void => {\n if (!this.target || !this.options) return;\n\n this.target.style.removeProperty('max-height');\n this.target.style.removeProperty('height');\n this.initialHeight = undefined;\n this.isConstrained = false;\n // force paint\n this.host.offsetHeight;\n this.computePlacement();\n };\n\n hostConnected(): void {\n document.addEventListener(\n 'sp-update-overlays',\n this.resetOverlayPosition\n );\n }\n\n hostUpdated(): void {\n if (!(this.host as OverlayBase).open) {\n this.cleanup?.();\n this.cleanup = undefined;\n }\n }\n\n hostDisconnected(): void {\n this.cleanup?.();\n this.cleanup = undefined;\n document.removeEventListener(\n 'sp-update-overlays',\n this.resetOverlayPosition\n );\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["arrow", "autoUpdate", "computePosition", "flip", "offset", "shift", "size", "topLayerOverTransforms", "roundByDPR", "num", "dpr", "REQUIRED_DISTANCE_TO_EDGE", "MIN_OVERLAY_HEIGHT", "getFallbackPlacements", "placement", "_a", "host", "target", "options", "cleanup", "element", "_b", "flipMiddleware", "mainAxis", "crossAxis", "tipElement", "el", "middleware", "availableWidth", "availableHeight", "floating", "maxHeight", "actualHeight", "appliedHeight", "x", "y", "middlewareData", "arrowX", "arrowY"]
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import { css } from "@spectrum-web-components/base";
|
|
|
3
3
|
const styles = css`
|
|
4
4
|
:host{--swc-overlay-animation-distance:var(
|
|
5
5
|
--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
|
|
6
|
-
)}.dialog{background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) .dialog{left:0;
|
|
6
|
+
);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) .dialog{--sp-overlay-open:false;left:0;top:0;transform:translate(-999em,-999em)}.dialog:focus{outline:none}.dialog::backdrop{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){position:static}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:var(--swc-overlay-z-index)}}
|
|
7
7
|
`;
|
|
8
8
|
export default styles;
|
|
9
9
|
//# sourceMappingURL=overlay-base.css.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-base.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n)}.dialog{background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) .dialog{left:0;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) .dialog{--sp-overlay-open:false;left:0;top:0;transform:translate(-999em,-999em)}.dialog:focus{outline:none}.dialog::backdrop{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){position:static}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:var(--swc-overlay-z-index)}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAKf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/overlay-base.css.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";import{css as
|
|
1
|
+
"use strict";import{css as o}from"@spectrum-web-components/base";const a=o`
|
|
2
2
|
:host{--swc-overlay-animation-distance:var(
|
|
3
3
|
--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)
|
|
4
|
-
)}.dialog{background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) .dialog{left:0;
|
|
5
|
-
`;export default
|
|
4
|
+
);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) .dialog{--sp-overlay-open:false;left:0;top:0;transform:translate(-999em,-999em)}.dialog:focus{outline:none}.dialog::backdrop{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){position:static}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:var(--swc-overlay-z-index)}}
|
|
5
|
+
`;export default a;
|
|
6
6
|
//# sourceMappingURL=overlay-base.css.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-base.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n)}.dialog{background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) .dialog{left:0;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--swc-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);display:contents;pointer-events:none}.dialog{--sp-overlay-open:true;background:none;border:0;box-sizing:border-box;display:flex;margin:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);opacity:1!important;overflow:visible;padding:0;position:fixed}:host(:not([open])) .dialog{--sp-overlay-open:false;left:0;top:0;transform:translate(-999em,-999em)}.dialog:focus{outline:none}.dialog::backdrop{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto}::slotted(sp-popover){position:static}.dialog[actual-placement*=top]{margin-top:var(--swc-overlay-animation-distance);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{margin-left:calc(var(--swc-overlay-animation-distance)*-1);padding-inline:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=bottom]{margin-top:calc(var(--swc-overlay-animation-distance)*-1);padding-block:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=left]{margin-left:var(--swc-overlay-animation-distance);padding-inline:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:var(--swc-overlay-z-index)}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA,EAKf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -135,7 +135,7 @@ const template = ({
|
|
|
135
135
|
placement="${placement}"
|
|
136
136
|
tip
|
|
137
137
|
>
|
|
138
|
-
<sp-dialog no-
|
|
138
|
+
<sp-dialog no-divider>
|
|
139
139
|
<sp-slider
|
|
140
140
|
value="5"
|
|
141
141
|
step="0.5"
|
|
@@ -203,9 +203,7 @@ export const accordion = () => {
|
|
|
203
203
|
style="overflow-y: scroll;position: static;"
|
|
204
204
|
>
|
|
205
205
|
<sp-dialog size="s" no-divder>
|
|
206
|
-
<sp-accordion
|
|
207
|
-
allow-multiple
|
|
208
|
-
>
|
|
206
|
+
<sp-accordion allow-multiple>
|
|
209
207
|
<sp-accordion-item label="Some things">
|
|
210
208
|
<p>
|
|
211
209
|
Thing
|
|
@@ -867,7 +865,7 @@ export const modalWithinNonModal = () => {
|
|
|
867
865
|
</sp-dialog>
|
|
868
866
|
</sp-popover>
|
|
869
867
|
</overlay-trigger>
|
|
870
|
-
</sp-dialog>
|
|
868
|
+
</sp-dialog>
|
|
871
869
|
</sp-popover>
|
|
872
870
|
</overlay-trigger>
|
|
873
871
|
`;
|
|
@@ -1118,19 +1116,6 @@ export const virtualElement = (args) => {
|
|
|
1118
1116
|
</sp-menu>
|
|
1119
1117
|
</sp-popover>
|
|
1120
1118
|
`;
|
|
1121
|
-
const handlePointerdown = (event) => {
|
|
1122
|
-
if (event.button === 2) {
|
|
1123
|
-
event.preventDefault();
|
|
1124
|
-
event.stopPropagation();
|
|
1125
|
-
}
|
|
1126
|
-
};
|
|
1127
|
-
const handlePointerup = (event) => {
|
|
1128
|
-
if (event.button === 2) {
|
|
1129
|
-
event.preventDefault();
|
|
1130
|
-
event.stopPropagation();
|
|
1131
|
-
event.stopImmediatePropagation();
|
|
1132
|
-
}
|
|
1133
|
-
};
|
|
1134
1119
|
const handleContextmenu = async (event) => {
|
|
1135
1120
|
event.preventDefault();
|
|
1136
1121
|
event.stopPropagation();
|
|
@@ -1145,7 +1130,7 @@ export const virtualElement = (args) => {
|
|
|
1145
1130
|
placement: args.placement,
|
|
1146
1131
|
receivesFocus: "auto",
|
|
1147
1132
|
virtualTrigger,
|
|
1148
|
-
offset:
|
|
1133
|
+
offset: -10,
|
|
1149
1134
|
notImmediatelyClosable: true
|
|
1150
1135
|
});
|
|
1151
1136
|
};
|
|
@@ -1158,14 +1143,6 @@ export const virtualElement = (args) => {
|
|
|
1158
1143
|
</style>
|
|
1159
1144
|
<start-end-contextmenu
|
|
1160
1145
|
class="app-root"
|
|
1161
|
-
@pointerdown=${{
|
|
1162
|
-
capture: true,
|
|
1163
|
-
handleEvent: handlePointerdown
|
|
1164
|
-
}}
|
|
1165
|
-
@pointerup=${{
|
|
1166
|
-
capture: true,
|
|
1167
|
-
handleEvent: handlePointerup
|
|
1168
|
-
}}
|
|
1169
1146
|
@contextmenu=${{
|
|
1170
1147
|
capture: true,
|
|
1171
1148
|
handleEvent: handleContextmenu
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay.stories.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\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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n openOverlay,\n OverlayContentTypes,\n OverlayTrigger,\n Placement,\n TriggerInteractions,\n VirtualTrigger,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport { DialogWrapper } from '@spectrum-web-components/dialog';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { Picker } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/accordion/sp-accordion.js';\nimport '@spectrum-web-components/accordion/sp-accordion-item.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { render } from 'lit-html';\nimport { Popover } from '@spectrum-web-components/popover';\nimport { Button } from '@spectrum-web-components/button';\nimport { PopoverContent } from './overlay-story-components.js';\n\nconst storyStyles = html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: 100%;\n margin: 0;\n }\n\n sp-story-decorator::part(container) {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n }\n\n overlay-trigger {\n flex: none;\n }\n\n #styled-div {\n background-color: var(--styled-div-background-color, blue);\n color: white;\n padding: 4px 10px;\n margin-bottom: 10px;\n }\n\n #inner-trigger {\n display: inline-block;\n }\n </style>\n`;\n\nexport default {\n title: 'Overlay',\n argTypes: {\n offset: { control: 'number' },\n placement: {\n control: {\n type: 'inline-radio',\n options: [\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'auto',\n 'auto-start',\n 'auto-end',\n 'none',\n ],\n },\n },\n type: {\n control: {\n type: 'inline-radio',\n options: ['modal', 'replace', 'inline'],\n },\n },\n colorStop: {\n control: {\n type: 'inline-radio',\n options: ['light', 'dark'],\n },\n },\n },\n args: {\n placement: 'bottom',\n offset: 0,\n colorStop: 'light',\n },\n};\n\ninterface Properties {\n placement: Placement;\n offset: number;\n open?: OverlayContentTypes;\n type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n}\n\nconst template = ({\n placement,\n offset,\n open,\n type,\n}: Properties): TemplateResult => {\n return html`\n ${storyStyles}\n <overlay-trigger\n id=\"trigger\"\n placement=\"${placement}\"\n offset=\"${offset}\"\n open=${ifDefined(open)}\n type=${ifDefined(type)}\n >\n <sp-button variant=\"primary\" slot=\"trigger\">Show Popover</sp-button>\n <sp-popover\n slot=\"click-content\"\n placement=\"${placement}\"\n tip\n >\n <sp-dialog no-divder>\n <sp-slider\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Awesomeness\"\n ></sp-slider>\n <div id=\"styled-div\">\n The background of this div should be blue\n </div>\n <overlay-trigger id=\"inner-trigger\" placement=\"bottom\">\n <sp-button slot=\"trigger\">Press Me</sp-button>\n <sp-popover\n slot=\"click-content\"\n placement=\"bottom\"\n tip\n >\n <sp-dialog size=\"s\" no-divder>\n Another Popover\n </sp-dialog>\n </sp-popover>\n\n <sp-tooltip\n slot=\"hover-content\"\n delayed\n tip=\"bottom\"\n >\n Click to open another popover.\n </sp-tooltip>\n </overlay-trigger>\n </div>\n </sp-dialog>\n </sp-popover>\n <sp-tooltip\n slot=\"hover-content\"\n ?delayed=${open !== 'hover'}\n tip=\"bottom\"\n >\n Click to open a popover.\n </sp-tooltip>\n </overlay-trigger>\n `;\n};\n\nconst extraText = html`\n <p>This is some text.</p>\n <p>This is some text.</p>\n <p>\n This is a\n <a href=\"#anchor\">link</a>\n .\n </p>\n`;\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport const Default = (args: Properties): TemplateResult => template(args);\n\nexport const accordion = (): TemplateResult => {\n return html`\n <overlay-trigger type=\"modal\" placement=\"right\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open overlay w/ accordion\n </sp-button>\n <sp-popover\n slot=\"click-content\"\n style=\"overflow-y: scroll;position: static;\"\n >\n <sp-dialog size=\"s\" no-divder>\n <sp-accordion\n allow-multiple\n >\n <sp-accordion-item label=\"Some things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n <sp-accordion-item label=\"Other things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n <sp-accordion-item label=\"More things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n <sp-accordion-item label=\"Additional things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n </sp-accordion>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\naccordion.swc_vrt = {\n skip: true,\n};\n\nexport const clickAndHoverTargets = (): TemplateResult => {\n return html`\n <div>\n ${storyStyles}\n <style>\n .friendly-target {\n padding: 4px;\n margin: 6px;\n border: 2px solid black;\n border-radius: 6px;\n cursor: default;\n }\n </style>\n <overlay-trigger placement=\"right\">\n <div class=\"friendly-target\" slot=\"trigger\" tabindex=\"0\">\n Click me\n </div>\n <sp-tooltip slot=\"click-content\" tip=\"right\">\n Ok, now hover the other trigger\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger placement=\"left\">\n <div class=\"friendly-target\" slot=\"trigger\" tabindex=\"0\">\n Then hover me\n </div>\n <sp-tooltip slot=\"hover-content\" tip=\"right\">\n Now click my trigger -- I should stay open, but the other\n overlay should close\n </sp-tooltip>\n </overlay-trigger>\n </div>\n `;\n};\nclickAndHoverTargets.swc_vrt = {\n skip: true,\n};\n\nclass ScrollForcer extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n });\n this.setup();\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n await nextFrame();\n\n this.previousElementSibling?.addEventListener(\n 'sp-opened',\n this.doScroll\n );\n await nextFrame();\n await nextFrame();\n (this.previousElementSibling?.lastElementChild as OverlayTrigger).open =\n 'click';\n }\n\n doScroll = async (): Promise<void> => {\n this.previousElementSibling?.addEventListener(\n 'sp-opened',\n this.doScroll\n );\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n\n if (document.scrollingElement) {\n document.scrollingElement.scrollTop = 100;\n }\n\n await nextFrame();\n await nextFrame();\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('scroll-forcer', ScrollForcer);\n\nexport const clickContentClosedOnScroll = (\n args: Properties\n): TemplateResult => html`\n <div style=\"margin: 50vh 0 100vh;\">\n ${template({\n ...args,\n })}\n </div>\n`;\nclickContentClosedOnScroll.decorators = [\n (story: () => TemplateResult): TemplateResult => html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: auto !important;\n }\n </style>\n ${story()}\n <scroll-forcer></scroll-forcer>\n `,\n];\n\nclass ComplexModalReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n\n const overlay = document.querySelector(\n `overlay-trigger`\n ) as OverlayTrigger;\n overlay.addEventListener('sp-opened', this.handleTriggerOpened);\n }\n\n handleTriggerOpened = async (): Promise<void> => {\n await nextFrame();\n\n const picker = document.querySelector('#test-picker') as Picker;\n picker.addEventListener('sp-opened', this.handlePickerOpen);\n picker.open = true;\n };\n\n handlePickerOpen = async (): Promise<void> => {\n const picker = document.querySelector('#test-picker') as Picker;\n const actions = [nextFrame, picker.updateComplete];\n\n await Promise.all(actions);\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('complex-modal-ready', ComplexModalReady);\n\nconst complexModalDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <complex-modal-ready></complex-modal-ready>\n `;\n};\n\nexport const complexModal = (): TemplateResult => {\n return html`\n <style>\n body {\n --swc-margin-test: 10px;\n margin: var(--swc-margin-test);\n }\n sp-story-decorator::part(container) {\n min-height: calc(100vh - (2 * var(--swc-margin-test)));\n padding: 0;\n display: grid;\n place-content: center;\n }\n active-overlay > * {\n --spectrum-global-animation-duration-100: 0ms;\n --spectrum-global-animation-duration-200: 0ms;\n --spectrum-global-animation-duration-300: 0ms;\n --spectrum-global-animation-duration-400: 0ms;\n --spectrum-global-animation-duration-500: 0ms;\n --spectrum-global-animation-duration-600: 0ms;\n --spectrum-global-animation-duration-700: 0ms;\n --spectrum-global-animation-duration-800: 0ms;\n --spectrum-global-animation-duration-900: 0ms;\n --spectrum-global-animation-duration-1000: 0ms;\n --spectrum-global-animation-duration-2000: 0ms;\n --spectrum-global-animation-duration-4000: 0ms;\n --spectrum-animation-duration-0: 0ms;\n --spectrum-animation-duration-100: 0ms;\n --spectrum-animation-duration-200: 0ms;\n --spectrum-animation-duration-300: 0ms;\n --spectrum-animation-duration-400: 0ms;\n --spectrum-animation-duration-500: 0ms;\n --spectrum-animation-duration-600: 0ms;\n --spectrum-animation-duration-700: 0ms;\n --spectrum-animation-duration-800: 0ms;\n --spectrum-animation-duration-900: 0ms;\n --spectrum-animation-duration-1000: 0ms;\n --spectrum-animation-duration-2000: 0ms;\n --spectrum-animation-duration-4000: 0ms;\n --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n --swc-test-duration: 1ms;\n }\n </style>\n <overlay-trigger type=\"modal\" placement=\"none\" open=\"click\">\n <sp-dialog-wrapper\n slot=\"click-content\"\n headline=\"Dialog title\"\n dismissable\n underlay\n footer=\"Content for footer\"\n >\n <sp-field-label for=\"test-picker\">\n Selection type:\n </sp-field-label>\n <sp-picker id=\"test-picker\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save selection</sp-menu-item>\n <sp-menu-item disabled>Make work path</sp-menu-item>\n </sp-picker>\n </sp-dialog-wrapper>\n <sp-button slot=\"trigger\" variant=\"primary\">\n Toggle Dialog\n </sp-button>\n </overlay-trigger>\n `;\n};\n\ncomplexModal.decorators = [complexModalDecorator];\n\nexport const customizedClickContent = (\n args: Properties\n): TemplateResult => html`\n <style>\n overlay-trigger {\n --styled-div-background-color: var(\n --spectrum-semantic-cta-background-color-default\n );\n --spectrum-button-m-accent-fill-texticon-background-color: rebeccapurple;\n }\n </style>\n ${template({\n ...args,\n open: 'click',\n })}\n`;\n\nexport const deep = (): TemplateResult => html`\n <overlay-trigger>\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open popover 1 with buttons + selfmanaged Tooltips\n </sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\" tip>\n <sp-dialog size=\"s\" no-divder>\n <sp-action-button>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n My Tooltip 1\n </sp-tooltip>\n A\n </sp-action-button>\n <sp-action-button>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n My Tooltip 1\n </sp-tooltip>\n B\n </sp-action-button>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n\n <overlay-trigger>\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open popover 2 with buttons without ToolTips\n </sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\" tip>\n <sp-dialog size=\"s\" no-divder>\n <sp-action-button>X</sp-action-button>\n <sp-action-button>Y</sp-action-button>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n`;\ndeep.swc_vrt = {\n skip: true,\n};\n\nexport const deepNesting = (): TemplateResult => {\n const color = window.__swc_hack_knobs__.defaultColor;\n const outter = color === 'light' ? 'dark' : 'light';\n return html`\n ${storyStyles}\n <sp-theme\n color=${outter}\n theme=${window.__swc_hack_knobs__.defaultThemeVariant}\n scale=${window.__swc_hack_knobs__.defaultScale}\n dir=${window.__swc_hack_knobs__.defaultDirection}\n >\n <sp-theme\n color=${color}\n theme=${window.__swc_hack_knobs__.defaultThemeVariant}\n scale=${window.__swc_hack_knobs__.defaultScale}\n dir=${window.__swc_hack_knobs__.defaultDirection}\n >\n <recursive-popover\n tabindex=\"\"\n style=\"\n background-color: var(--spectrum-global-color-gray-100);\n color: var(--spectrum-global-color-gray-800);\n padding: var(--spectrum-global-dimension-size-225);\n \"\n ></recursive-popover>\n </sp-theme>\n </sp-theme>\n `;\n};\n\nclass DefinedOverlayReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n connectedCallback(): void {\n if (!!this.ready) return;\n\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n overlay!: OverlayTrigger;\n popover!: PopoverContent;\n\n async setup(): Promise<void> {\n await nextFrame();\n await nextFrame();\n\n this.overlay = document.querySelector(\n `overlay-trigger`\n ) as OverlayTrigger;\n const button = document.querySelector(\n `[slot=\"trigger\"]`\n ) as HTMLButtonElement;\n this.overlay.addEventListener('sp-opened', this.handleTriggerOpened);\n await nextFrame();\n await nextFrame();\n button.click();\n }\n\n handleTriggerOpened = async (): Promise<void> => {\n this.overlay.removeEventListener('sp-opened', this.handleTriggerOpened);\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n\n this.popover = document.querySelector(\n 'popover-content'\n ) as PopoverContent;\n if (!this.popover) {\n return;\n }\n this.popover.addEventListener('sp-opened', this.handlePopoverOpen);\n await nextFrame();\n await nextFrame();\n this.popover.button.click();\n };\n\n handlePopoverOpen = async (): Promise<void> => {\n await nextFrame();\n\n this.ready(true);\n };\n\n disconnectedCallback(): void {\n this.overlay.removeEventListener('sp-opened', this.handleTriggerOpened);\n this.popover.removeEventListener('sp-opened', this.handlePopoverOpen);\n }\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('defined-overlay-ready', DefinedOverlayReady);\n\nconst definedOverlayDecorator = (\n story: () => TemplateResult\n): TemplateResult => {\n return html`\n ${story()}\n <defined-overlay-ready></defined-overlay-ready>\n `;\n};\n\nexport const definedOverlayElement = (): TemplateResult => {\n return html`\n <overlay-trigger placement=\"bottom\" type=\"modal\">\n <sp-button variant=\"primary\" slot=\"trigger\">Open popover</sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\">\n <sp-dialog no-divder>\n <popover-content></popover-content>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\ndefinedOverlayElement.decorators = [definedOverlayDecorator];\n\nexport const detachedElement = (): TemplateResult => {\n let closeOverlay: (() => void) | undefined;\n const openDetachedOverlayContent = async (): // {\n // target,\n // }: {\n // target: HTMLElement;\n // }\n Promise<void> => {\n if (closeOverlay) {\n closeOverlay();\n closeOverlay = undefined;\n return;\n }\n const div = document.createElement('div');\n div.textContent = 'This div is overlaid';\n div.setAttribute(\n 'style',\n `\n background-color: var(--spectrum-global-color-gray-50);\n color: var(--spectrum-global-color-gray-800);\n border: 1px solid;\n padding: 2em;\n `\n );\n // closeOverlay = await Overlay.open(target, 'click', div, {\n // offset: 0,\n // placement: 'bottom',\n // });\n };\n requestAnimationFrame(() => {\n // openDetachedOverlayContent({\n // target: document.querySelector(\n // '#detached-content-trigger'\n // ) as HTMLElement,\n // });\n });\n return html`\n <sp-action-button\n id=\"detached-content-trigger\"\n @click=${openDetachedOverlayContent}\n @sp-closed=${() => (closeOverlay = undefined)}\n >\n <sp-icon-open-in\n slot=\"icon\"\n label=\"Open in overlay\"\n ></sp-icon-open-in>\n </sp-action-button>\n `;\n};\n\nexport const edges = (): TemplateResult => {\n return html`\n <style>\n .demo {\n position: absolute;\n }\n .top-left {\n top: 0;\n left: 0;\n }\n .top-right {\n top: 0;\n right: 0;\n }\n .bottom-right {\n bottom: 0;\n right: 0;\n }\n .bottom-left {\n bottom: 0;\n left: 0;\n }\n </style>\n <overlay-trigger class=\"demo top-left\" placement=\"bottom\">\n <sp-button slot=\"trigger\">\n Top/\n <br />\n Left\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger class=\"demo top-right\" placement=\"bottom\">\n <sp-button slot=\"trigger\">\n Top/\n <br />\n Right\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger class=\"demo bottom-left\" placement=\"top\">\n <sp-button slot=\"trigger\">\n Bottom/\n <br />\n Left\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"top\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger placement=\"top\" class=\"demo bottom-right\">\n <sp-button slot=\"trigger\">\n Bottom/\n <br />\n Right\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"top\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n `;\n};\n\nexport const inline = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"inline\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-popover slot=\"click-content\">\n <sp-button\n @click=${(event: Event & { target: HTMLElement }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n >\n Close\n </sp-button>\n </sp-popover>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const longpress = (): TemplateResult => {\n return html`\n <overlay-trigger placement=\"right-start\">\n <sp-action-button slot=\"trigger\" hold-affordance>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">Search real hard...</sp-tooltip>\n <sp-popover slot=\"longpress-content\" tip>\n <sp-action-group\n @change=${(event: Event & { target: HTMLElement }) =>\n event.target.dispatchEvent(\n new Event('close', { bubbles: true })\n )}\n selects=\"single\"\n vertical\n style=\"margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)) / 2);\"\n >\n <sp-action-button>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nexport const modalLoose = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-dialog\n size=\"s\"\n dismissable\n slot=\"click-content\"\n @closed=${(event: Event & { target: DialogWrapper }) =>\n event.target.dispatchEvent(closeEvent)}\n >\n <h2 slot=\"heading\">Loose Dialog</h2>\n <p>\n The\n <code>sp-dialog</code>\n element is not \"meant\" to be a modal alone. In that way it\n does not manage its own\n <code>open</code>\n attribute or outline when it should have\n <code>pointer-events: auto</code>\n . It's a part of this test suite to prove that content in\n this way can be used in an\n <code>overlay-trigger</code>\n element.\n </p>\n </sp-dialog>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const modalManaged = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-dialog-wrapper\n underlay\n slot=\"click-content\"\n headline=\"Wrapped Dialog w/ Hero Image\"\n confirm-label=\"Keep Both\"\n secondary-label=\"Replace\"\n cancel-label=\"Cancel\"\n footer=\"Content for footer\"\n @confirm=${(event: Event & { target: DialogWrapper }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n @secondary=${(\n event: Event & { target: DialogWrapper }\n ): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n @cancel=${(event: Event & { target: DialogWrapper }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n >\n <p>\n The\n <code>sp-dialog-wrapper</code>\n element has been prepared for use in an\n <code>overlay-trigger</code>\n element by it's combination of modal, underlay, etc. styles\n and features.\n </p>\n </sp-dialog-wrapper>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const modalWithinNonModal = (): TemplateResult => {\n return html`\n <overlay-trigger type=\"inline\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open inline overlay\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divder>\n <overlay-trigger type=\"modal\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open modal overlay\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divder>\n Modal overlay\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog> \n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nexport const noCloseOnResize = (args: Properties): TemplateResult => html`\n <style>\n sp-button:hover {\n border: 10px solid;\n width: 100px;\n }\n </style>\n ${template({\n ...args,\n open: 'click',\n })}\n`;\nnoCloseOnResize.swc_vrt = {\n skip: true,\n};\n\nexport const openClickContent = (args: Properties): TemplateResult =>\n template({\n ...args,\n open: 'click',\n });\n\nexport const openHoverContent = (args: Properties): TemplateResult =>\n template({\n ...args,\n open: 'hover',\n });\n\nexport const replace = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"replace\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-popover slot=\"click-content\">\n <sp-button\n @click=${(event: Event & { target: HTMLElement }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n >\n Close\n </sp-button>\n </sp-popover>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const sideHoverDraggable = (): TemplateResult => {\n return html`\n ${storyStyles}\n <style>\n sp-tooltip {\n transition: none;\n }\n </style>\n <overlay-drag>\n <overlay-trigger placement=\"right\">\n <overlay-target-icon slot=\"trigger\"></overlay-target-icon>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"right\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Vivamus egestas sed enim sed condimentum. Nunc facilisis\n scelerisque massa sed luctus. Orci varius natoque penatibus\n et magnis dis parturient montes, nascetur ridiculus mus.\n Suspendisse sagittis sodales purus vitae ultricies. Integer\n at dui sem. Sed quam tortor, ornare in nisi et, rhoncus\n lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh.\n Sed feugiat semper libero, sit amet vehicula orci fermentum\n id. Vivamus imperdiet egestas luctus. Mauris tincidunt\n malesuada ante, faucibus viverra nunc blandit a. Fusce et\n nisl nisi. Aenean dictum quam id mollis faucibus. Nulla a\n ultricies dui. In hac habitasse platea dictumst. Curabitur\n gravida lobortis vestibulum.\n </sp-tooltip>\n </overlay-trigger>\n </overlay-drag>\n `;\n};\n\nexport const superComplexModal = (): TemplateResult => {\n return html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\" variant=\"accent\">Toggle Dialog</sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\">\n <overlay-trigger>\n <sp-button slot=\"trigger\" variant=\"primary\">\n Toggle Dialog\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divider>\n <overlay-trigger type=\"modal\">\n <sp-button\n slot=\"trigger\"\n variant=\"secondary\"\n >\n Toggle Dialog\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divider>\n <p>\n When you get this deep, this\n ActiveOverlay should be the only\n one in [slot=\"open\"].\n </p>\n <p>\n All of the rest of the\n ActiveOverlay elements should\n have had their [slot] attribute\n removed.\n </p>\n <p>\n Closing this ActiveOverlay\n should replace them...\n </p>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nexport const updated = (): TemplateResult => {\n return html`\n ${storyStyles}\n <style>\n sp-tooltip {\n transition: none;\n }\n </style>\n <overlay-drag>\n <overlay-trigger class=\"demo top-left\" placement=\"bottom\">\n <overlay-target-icon\n slot=\"trigger\"\n style=\"translate(400px, 300px)\"\n ></overlay-target-icon>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n Click to open popover\n </sp-tooltip>\n <sp-popover slot=\"click-content\" position=\"bottom\" tip>\n <sp-dialog size=\"s\" no-divder>\n <sp-slider\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Awesomeness\"\n ></sp-slider>\n <div id=\"styled-div\">\n The background of this div should be blue\n </div>\n <overlay-trigger id=\"inner-trigger\" placement=\"bottom\">\n <sp-button slot=\"trigger\">Press Me</sp-button>\n <sp-popover\n slot=\"click-content\"\n placement=\"bottom\"\n tip\n >\n <sp-dialog size=\"s\" no-divder>\n Another Popover\n </sp-dialog>\n </sp-popover>\n\n <sp-tooltip\n slot=\"hover-content\"\n delayed\n tip=\"bottom\"\n >\n Click to open another popover.\n </sp-tooltip>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </overlay-drag>\n `;\n};\n\nexport const updating = (): TemplateResult => {\n const update = (): void => {\n const button = document.querySelector('[slot=\"trigger\"]') as Button;\n button.style.left = `${Math.floor(Math.random() * 200)}px`;\n button.style.top = `${Math.floor(Math.random() * 200)}px`;\n button.style.position = 'fixed';\n // Overlay.update();\n };\n return html`\n <overlay-trigger type=\"click\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open inline overlay\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divder>\n <sp-button variant=\"primary\" @click=${update}>\n Update trigger location.\n </sp-button>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nupdating.swc_vrt = {\n skip: true,\n};\n\nclass StartEndContextmenu extends HTMLElement {\n override shadowRoot!: ShadowRoot;\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n this.shadowRoot.innerHTML = `\n <style>\n :host {\n display: flex;\n align-items: stretch;\n }\n div {\n width: 50%;\n height: 100%;\n }\n </style>\n <div id=\"start\"></div>\n <div id=\"end\"></div>\n `;\n }\n}\n\ncustomElements.define('start-end-contextmenu', StartEndContextmenu);\n\nexport const virtualElement = (args: Properties): TemplateResult => {\n const contextMenuTemplate = (kind = ''): TemplateResult => html`\n <sp-popover\n style=\"width:300px;\"\n @click=${(event: PointerEvent) => {\n if (\n (event.target as HTMLElement).localName === 'sp-menu-item'\n ) {\n event.target?.dispatchEvent(\n new Event('close', { bubbles: true })\n );\n }\n }}\n >\n <sp-menu>\n <sp-menu-group>\n <span slot=\"header\">Menu source: ${kind}</span>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save selection</sp-menu-item>\n <sp-menu-item disabled>Make work path</sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n const handlePointerdown = (event: PointerEvent): void => {\n if (event.button === 2) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n const handlePointerup = (event: PointerEvent): void => {\n if (event.button === 2) {\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n }\n };\n const handleContextmenu = async (event: PointerEvent): Promise<void> => {\n event.preventDefault();\n event.stopPropagation();\n\n const source = event.composedPath()[0] as HTMLDivElement;\n const { id } = source;\n const trigger = event.target as HTMLElement;\n const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n const fragment = document.createDocumentFragment();\n render(contextMenuTemplate(id), fragment);\n const popover = fragment.querySelector('sp-popover') as Popover;\n\n openOverlay(trigger, 'click', popover, {\n placement: args.placement,\n receivesFocus: 'auto',\n virtualTrigger,\n offset: 0,\n notImmediatelyClosable: true,\n });\n };\n return html`\n <style>\n .app-root {\n position: absolute;\n inset: 0;\n }\n </style>\n <start-end-contextmenu\n class=\"app-root\"\n @pointerdown=${{\n capture: true,\n handleEvent: handlePointerdown,\n }}\n @pointerup=${{\n capture: true,\n handleEvent: handlePointerup,\n }}\n @contextmenu=${{\n capture: true,\n handleEvent: handleContextmenu,\n }}\n ></start-end-contextmenu>\n `;\n};\n\nvirtualElement.args = {\n placement: 'right-start' as Placement,\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\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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n openOverlay,\n OverlayContentTypes,\n OverlayTrigger,\n Placement,\n TriggerInteractions,\n VirtualTrigger,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/dialog/sp-dialog-wrapper.js';\nimport { DialogWrapper } from '@spectrum-web-components/dialog';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { Picker } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/accordion/sp-accordion.js';\nimport '@spectrum-web-components/accordion/sp-accordion-item.js';\nimport '../../../projects/story-decorator/src/types.js';\n\nimport './overlay-story-components.js';\nimport { render } from 'lit-html';\nimport { Popover } from '@spectrum-web-components/popover';\nimport { Button } from '@spectrum-web-components/button';\nimport { PopoverContent } from './overlay-story-components.js';\n\nconst storyStyles = html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: 100%;\n margin: 0;\n }\n\n sp-story-decorator::part(container) {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n }\n\n overlay-trigger {\n flex: none;\n }\n\n #styled-div {\n background-color: var(--styled-div-background-color, blue);\n color: white;\n padding: 4px 10px;\n margin-bottom: 10px;\n }\n\n #inner-trigger {\n display: inline-block;\n }\n </style>\n`;\n\nexport default {\n title: 'Overlay',\n argTypes: {\n offset: { control: 'number' },\n placement: {\n control: {\n type: 'inline-radio',\n options: [\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'auto',\n 'auto-start',\n 'auto-end',\n 'none',\n ],\n },\n },\n type: {\n control: {\n type: 'inline-radio',\n options: ['modal', 'replace', 'inline'],\n },\n },\n colorStop: {\n control: {\n type: 'inline-radio',\n options: ['light', 'dark'],\n },\n },\n },\n args: {\n placement: 'bottom',\n offset: 0,\n colorStop: 'light',\n },\n};\n\ninterface Properties {\n placement: Placement;\n offset: number;\n open?: OverlayContentTypes;\n type?: Extract<TriggerInteractions, 'inline' | 'modal' | 'replace'>;\n}\n\nconst template = ({\n placement,\n offset,\n open,\n type,\n}: Properties): TemplateResult => {\n return html`\n ${storyStyles}\n <overlay-trigger\n id=\"trigger\"\n placement=\"${placement}\"\n offset=\"${offset}\"\n open=${ifDefined(open)}\n type=${ifDefined(type)}\n >\n <sp-button variant=\"primary\" slot=\"trigger\">Show Popover</sp-button>\n <sp-popover\n slot=\"click-content\"\n placement=\"${placement}\"\n tip\n >\n <sp-dialog no-divider>\n <sp-slider\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Awesomeness\"\n ></sp-slider>\n <div id=\"styled-div\">\n The background of this div should be blue\n </div>\n <overlay-trigger id=\"inner-trigger\" placement=\"bottom\">\n <sp-button slot=\"trigger\">Press Me</sp-button>\n <sp-popover\n slot=\"click-content\"\n placement=\"bottom\"\n tip\n >\n <sp-dialog size=\"s\" no-divder>\n Another Popover\n </sp-dialog>\n </sp-popover>\n\n <sp-tooltip\n slot=\"hover-content\"\n delayed\n tip=\"bottom\"\n >\n Click to open another popover.\n </sp-tooltip>\n </overlay-trigger>\n </div>\n </sp-dialog>\n </sp-popover>\n <sp-tooltip\n slot=\"hover-content\"\n ?delayed=${open !== 'hover'}\n tip=\"bottom\"\n >\n Click to open a popover.\n </sp-tooltip>\n </overlay-trigger>\n `;\n};\n\nconst extraText = html`\n <p>This is some text.</p>\n <p>This is some text.</p>\n <p>\n This is a\n <a href=\"#anchor\">link</a>\n .\n </p>\n`;\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport const Default = (args: Properties): TemplateResult => template(args);\n\nexport const accordion = (): TemplateResult => {\n return html`\n <overlay-trigger type=\"modal\" placement=\"right\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open overlay w/ accordion\n </sp-button>\n <sp-popover\n slot=\"click-content\"\n style=\"overflow-y: scroll;position: static;\"\n >\n <sp-dialog size=\"s\" no-divder>\n <sp-accordion allow-multiple>\n <sp-accordion-item label=\"Some things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n <sp-accordion-item label=\"Other things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n <sp-accordion-item label=\"More things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n <sp-accordion-item label=\"Additional things\">\n <p>\n Thing\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n more things\n </p>\n </sp-accordion-item>\n </sp-accordion>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\naccordion.swc_vrt = {\n skip: true,\n};\n\nexport const clickAndHoverTargets = (): TemplateResult => {\n return html`\n <div>\n ${storyStyles}\n <style>\n .friendly-target {\n padding: 4px;\n margin: 6px;\n border: 2px solid black;\n border-radius: 6px;\n cursor: default;\n }\n </style>\n <overlay-trigger placement=\"right\">\n <div class=\"friendly-target\" slot=\"trigger\" tabindex=\"0\">\n Click me\n </div>\n <sp-tooltip slot=\"click-content\" tip=\"right\">\n Ok, now hover the other trigger\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger placement=\"left\">\n <div class=\"friendly-target\" slot=\"trigger\" tabindex=\"0\">\n Then hover me\n </div>\n <sp-tooltip slot=\"hover-content\" tip=\"right\">\n Now click my trigger -- I should stay open, but the other\n overlay should close\n </sp-tooltip>\n </overlay-trigger>\n </div>\n `;\n};\nclickAndHoverTargets.swc_vrt = {\n skip: true,\n};\n\nclass ScrollForcer extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n });\n this.setup();\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n await nextFrame();\n\n this.previousElementSibling?.addEventListener(\n 'sp-opened',\n this.doScroll\n );\n await nextFrame();\n await nextFrame();\n (this.previousElementSibling?.lastElementChild as OverlayTrigger).open =\n 'click';\n }\n\n doScroll = async (): Promise<void> => {\n this.previousElementSibling?.addEventListener(\n 'sp-opened',\n this.doScroll\n );\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n\n if (document.scrollingElement) {\n document.scrollingElement.scrollTop = 100;\n }\n\n await nextFrame();\n await nextFrame();\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('scroll-forcer', ScrollForcer);\n\nexport const clickContentClosedOnScroll = (\n args: Properties\n): TemplateResult => html`\n <div style=\"margin: 50vh 0 100vh;\">\n ${template({\n ...args,\n })}\n </div>\n`;\nclickContentClosedOnScroll.decorators = [\n (story: () => TemplateResult): TemplateResult => html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: auto !important;\n }\n </style>\n ${story()}\n <scroll-forcer></scroll-forcer>\n `,\n];\n\nclass ComplexModalReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n constructor() {\n super();\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n async setup(): Promise<void> {\n await nextFrame();\n\n const overlay = document.querySelector(\n `overlay-trigger`\n ) as OverlayTrigger;\n overlay.addEventListener('sp-opened', this.handleTriggerOpened);\n }\n\n handleTriggerOpened = async (): Promise<void> => {\n await nextFrame();\n\n const picker = document.querySelector('#test-picker') as Picker;\n picker.addEventListener('sp-opened', this.handlePickerOpen);\n picker.open = true;\n };\n\n handlePickerOpen = async (): Promise<void> => {\n const picker = document.querySelector('#test-picker') as Picker;\n const actions = [nextFrame, picker.updateComplete];\n\n await Promise.all(actions);\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('complex-modal-ready', ComplexModalReady);\n\nconst complexModalDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <complex-modal-ready></complex-modal-ready>\n `;\n};\n\nexport const complexModal = (): TemplateResult => {\n return html`\n <style>\n body {\n --swc-margin-test: 10px;\n margin: var(--swc-margin-test);\n }\n sp-story-decorator::part(container) {\n min-height: calc(100vh - (2 * var(--swc-margin-test)));\n padding: 0;\n display: grid;\n place-content: center;\n }\n active-overlay > * {\n --spectrum-global-animation-duration-100: 0ms;\n --spectrum-global-animation-duration-200: 0ms;\n --spectrum-global-animation-duration-300: 0ms;\n --spectrum-global-animation-duration-400: 0ms;\n --spectrum-global-animation-duration-500: 0ms;\n --spectrum-global-animation-duration-600: 0ms;\n --spectrum-global-animation-duration-700: 0ms;\n --spectrum-global-animation-duration-800: 0ms;\n --spectrum-global-animation-duration-900: 0ms;\n --spectrum-global-animation-duration-1000: 0ms;\n --spectrum-global-animation-duration-2000: 0ms;\n --spectrum-global-animation-duration-4000: 0ms;\n --spectrum-animation-duration-0: 0ms;\n --spectrum-animation-duration-100: 0ms;\n --spectrum-animation-duration-200: 0ms;\n --spectrum-animation-duration-300: 0ms;\n --spectrum-animation-duration-400: 0ms;\n --spectrum-animation-duration-500: 0ms;\n --spectrum-animation-duration-600: 0ms;\n --spectrum-animation-duration-700: 0ms;\n --spectrum-animation-duration-800: 0ms;\n --spectrum-animation-duration-900: 0ms;\n --spectrum-animation-duration-1000: 0ms;\n --spectrum-animation-duration-2000: 0ms;\n --spectrum-animation-duration-4000: 0ms;\n --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n --swc-test-duration: 1ms;\n }\n </style>\n <overlay-trigger type=\"modal\" placement=\"none\" open=\"click\">\n <sp-dialog-wrapper\n slot=\"click-content\"\n headline=\"Dialog title\"\n dismissable\n underlay\n footer=\"Content for footer\"\n >\n <sp-field-label for=\"test-picker\">\n Selection type:\n </sp-field-label>\n <sp-picker id=\"test-picker\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save selection</sp-menu-item>\n <sp-menu-item disabled>Make work path</sp-menu-item>\n </sp-picker>\n </sp-dialog-wrapper>\n <sp-button slot=\"trigger\" variant=\"primary\">\n Toggle Dialog\n </sp-button>\n </overlay-trigger>\n `;\n};\n\ncomplexModal.decorators = [complexModalDecorator];\n\nexport const customizedClickContent = (\n args: Properties\n): TemplateResult => html`\n <style>\n overlay-trigger {\n --styled-div-background-color: var(\n --spectrum-semantic-cta-background-color-default\n );\n --spectrum-button-m-accent-fill-texticon-background-color: rebeccapurple;\n }\n </style>\n ${template({\n ...args,\n open: 'click',\n })}\n`;\n\nexport const deep = (): TemplateResult => html`\n <overlay-trigger>\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open popover 1 with buttons + selfmanaged Tooltips\n </sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\" tip>\n <sp-dialog size=\"s\" no-divder>\n <sp-action-button>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n My Tooltip 1\n </sp-tooltip>\n A\n </sp-action-button>\n <sp-action-button>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n My Tooltip 1\n </sp-tooltip>\n B\n </sp-action-button>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n\n <overlay-trigger>\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open popover 2 with buttons without ToolTips\n </sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\" tip>\n <sp-dialog size=\"s\" no-divder>\n <sp-action-button>X</sp-action-button>\n <sp-action-button>Y</sp-action-button>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n`;\ndeep.swc_vrt = {\n skip: true,\n};\n\nexport const deepNesting = (): TemplateResult => {\n const color = window.__swc_hack_knobs__.defaultColor;\n const outter = color === 'light' ? 'dark' : 'light';\n return html`\n ${storyStyles}\n <sp-theme\n color=${outter}\n theme=${window.__swc_hack_knobs__.defaultThemeVariant}\n scale=${window.__swc_hack_knobs__.defaultScale}\n dir=${window.__swc_hack_knobs__.defaultDirection}\n >\n <sp-theme\n color=${color}\n theme=${window.__swc_hack_knobs__.defaultThemeVariant}\n scale=${window.__swc_hack_knobs__.defaultScale}\n dir=${window.__swc_hack_knobs__.defaultDirection}\n >\n <recursive-popover\n tabindex=\"\"\n style=\"\n background-color: var(--spectrum-global-color-gray-100);\n color: var(--spectrum-global-color-gray-800);\n padding: var(--spectrum-global-dimension-size-225);\n \"\n ></recursive-popover>\n </sp-theme>\n </sp-theme>\n `;\n};\n\nclass DefinedOverlayReady extends HTMLElement {\n ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n connectedCallback(): void {\n if (!!this.ready) return;\n\n this.readyPromise = new Promise((res) => {\n this.ready = res;\n this.setup();\n });\n }\n\n overlay!: OverlayTrigger;\n popover!: PopoverContent;\n\n async setup(): Promise<void> {\n await nextFrame();\n await nextFrame();\n\n this.overlay = document.querySelector(\n `overlay-trigger`\n ) as OverlayTrigger;\n const button = document.querySelector(\n `[slot=\"trigger\"]`\n ) as HTMLButtonElement;\n this.overlay.addEventListener('sp-opened', this.handleTriggerOpened);\n await nextFrame();\n await nextFrame();\n button.click();\n }\n\n handleTriggerOpened = async (): Promise<void> => {\n this.overlay.removeEventListener('sp-opened', this.handleTriggerOpened);\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n\n this.popover = document.querySelector(\n 'popover-content'\n ) as PopoverContent;\n if (!this.popover) {\n return;\n }\n this.popover.addEventListener('sp-opened', this.handlePopoverOpen);\n await nextFrame();\n await nextFrame();\n this.popover.button.click();\n };\n\n handlePopoverOpen = async (): Promise<void> => {\n await nextFrame();\n\n this.ready(true);\n };\n\n disconnectedCallback(): void {\n this.overlay.removeEventListener('sp-opened', this.handleTriggerOpened);\n this.popover.removeEventListener('sp-opened', this.handlePopoverOpen);\n }\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('defined-overlay-ready', DefinedOverlayReady);\n\nconst definedOverlayDecorator = (\n story: () => TemplateResult\n): TemplateResult => {\n return html`\n ${story()}\n <defined-overlay-ready></defined-overlay-ready>\n `;\n};\n\nexport const definedOverlayElement = (): TemplateResult => {\n return html`\n <overlay-trigger placement=\"bottom\" type=\"modal\">\n <sp-button variant=\"primary\" slot=\"trigger\">Open popover</sp-button>\n <sp-popover slot=\"click-content\" direction=\"bottom\">\n <sp-dialog no-divder>\n <popover-content></popover-content>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\ndefinedOverlayElement.decorators = [definedOverlayDecorator];\n\nexport const detachedElement = (): TemplateResult => {\n let closeOverlay: (() => void) | undefined;\n const openDetachedOverlayContent = async (): // {\n // target,\n // }: {\n // target: HTMLElement;\n // }\n Promise<void> => {\n if (closeOverlay) {\n closeOverlay();\n closeOverlay = undefined;\n return;\n }\n const div = document.createElement('div');\n div.textContent = 'This div is overlaid';\n div.setAttribute(\n 'style',\n `\n background-color: var(--spectrum-global-color-gray-50);\n color: var(--spectrum-global-color-gray-800);\n border: 1px solid;\n padding: 2em;\n `\n );\n // closeOverlay = await Overlay.open(target, 'click', div, {\n // offset: 0,\n // placement: 'bottom',\n // });\n };\n requestAnimationFrame(() => {\n // openDetachedOverlayContent({\n // target: document.querySelector(\n // '#detached-content-trigger'\n // ) as HTMLElement,\n // });\n });\n return html`\n <sp-action-button\n id=\"detached-content-trigger\"\n @click=${openDetachedOverlayContent}\n @sp-closed=${() => (closeOverlay = undefined)}\n >\n <sp-icon-open-in\n slot=\"icon\"\n label=\"Open in overlay\"\n ></sp-icon-open-in>\n </sp-action-button>\n `;\n};\n\nexport const edges = (): TemplateResult => {\n return html`\n <style>\n .demo {\n position: absolute;\n }\n .top-left {\n top: 0;\n left: 0;\n }\n .top-right {\n top: 0;\n right: 0;\n }\n .bottom-right {\n bottom: 0;\n right: 0;\n }\n .bottom-left {\n bottom: 0;\n left: 0;\n }\n </style>\n <overlay-trigger class=\"demo top-left\" placement=\"bottom\">\n <sp-button slot=\"trigger\">\n Top/\n <br />\n Left\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger class=\"demo top-right\" placement=\"bottom\">\n <sp-button slot=\"trigger\">\n Top/\n <br />\n Right\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger class=\"demo bottom-left\" placement=\"top\">\n <sp-button slot=\"trigger\">\n Bottom/\n <br />\n Left\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"top\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger placement=\"top\" class=\"demo bottom-right\">\n <sp-button slot=\"trigger\">\n Bottom/\n <br />\n Right\n </sp-button>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"top\">\n Triskaidekaphobia and More\n </sp-tooltip>\n </overlay-trigger>\n `;\n};\n\nexport const inline = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"inline\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-popover slot=\"click-content\">\n <sp-button\n @click=${(event: Event & { target: HTMLElement }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n >\n Close\n </sp-button>\n </sp-popover>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const longpress = (): TemplateResult => {\n return html`\n <overlay-trigger placement=\"right-start\">\n <sp-action-button slot=\"trigger\" hold-affordance>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">Search real hard...</sp-tooltip>\n <sp-popover slot=\"longpress-content\" tip>\n <sp-action-group\n @change=${(event: Event & { target: HTMLElement }) =>\n event.target.dispatchEvent(\n new Event('close', { bubbles: true })\n )}\n selects=\"single\"\n vertical\n style=\"margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)) / 2);\"\n >\n <sp-action-button>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nexport const modalLoose = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-dialog\n size=\"s\"\n dismissable\n slot=\"click-content\"\n @closed=${(event: Event & { target: DialogWrapper }) =>\n event.target.dispatchEvent(closeEvent)}\n >\n <h2 slot=\"heading\">Loose Dialog</h2>\n <p>\n The\n <code>sp-dialog</code>\n element is not \"meant\" to be a modal alone. In that way it\n does not manage its own\n <code>open</code>\n attribute or outline when it should have\n <code>pointer-events: auto</code>\n . It's a part of this test suite to prove that content in\n this way can be used in an\n <code>overlay-trigger</code>\n element.\n </p>\n </sp-dialog>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const modalManaged = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-dialog-wrapper\n underlay\n slot=\"click-content\"\n headline=\"Wrapped Dialog w/ Hero Image\"\n confirm-label=\"Keep Both\"\n secondary-label=\"Replace\"\n cancel-label=\"Cancel\"\n footer=\"Content for footer\"\n @confirm=${(event: Event & { target: DialogWrapper }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n @secondary=${(\n event: Event & { target: DialogWrapper }\n ): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n @cancel=${(event: Event & { target: DialogWrapper }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n >\n <p>\n The\n <code>sp-dialog-wrapper</code>\n element has been prepared for use in an\n <code>overlay-trigger</code>\n element by it's combination of modal, underlay, etc. styles\n and features.\n </p>\n </sp-dialog-wrapper>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const modalWithinNonModal = (): TemplateResult => {\n return html`\n <overlay-trigger type=\"inline\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open inline overlay\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divder>\n <overlay-trigger type=\"modal\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open modal overlay\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divder>\n Modal overlay\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nexport const noCloseOnResize = (args: Properties): TemplateResult => html`\n <style>\n sp-button:hover {\n border: 10px solid;\n width: 100px;\n }\n </style>\n ${template({\n ...args,\n open: 'click',\n })}\n`;\nnoCloseOnResize.swc_vrt = {\n skip: true,\n};\n\nexport const openClickContent = (args: Properties): TemplateResult =>\n template({\n ...args,\n open: 'click',\n });\n\nexport const openHoverContent = (args: Properties): TemplateResult =>\n template({\n ...args,\n open: 'hover',\n });\n\nexport const replace = (): TemplateResult => {\n const closeEvent = new Event('close', { bubbles: true, composed: true });\n return html`\n <overlay-trigger type=\"replace\">\n <sp-button slot=\"trigger\">Open</sp-button>\n <sp-popover slot=\"click-content\">\n <sp-button\n @click=${(event: Event & { target: HTMLElement }): void => {\n event.target.dispatchEvent(closeEvent);\n }}\n >\n Close\n </sp-button>\n </sp-popover>\n </overlay-trigger>\n ${extraText}\n `;\n};\n\nexport const sideHoverDraggable = (): TemplateResult => {\n return html`\n ${storyStyles}\n <style>\n sp-tooltip {\n transition: none;\n }\n </style>\n <overlay-drag>\n <overlay-trigger placement=\"right\">\n <overlay-target-icon slot=\"trigger\"></overlay-target-icon>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"right\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Vivamus egestas sed enim sed condimentum. Nunc facilisis\n scelerisque massa sed luctus. Orci varius natoque penatibus\n et magnis dis parturient montes, nascetur ridiculus mus.\n Suspendisse sagittis sodales purus vitae ultricies. Integer\n at dui sem. Sed quam tortor, ornare in nisi et, rhoncus\n lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh.\n Sed feugiat semper libero, sit amet vehicula orci fermentum\n id. Vivamus imperdiet egestas luctus. Mauris tincidunt\n malesuada ante, faucibus viverra nunc blandit a. Fusce et\n nisl nisi. Aenean dictum quam id mollis faucibus. Nulla a\n ultricies dui. In hac habitasse platea dictumst. Curabitur\n gravida lobortis vestibulum.\n </sp-tooltip>\n </overlay-trigger>\n </overlay-drag>\n `;\n};\n\nexport const superComplexModal = (): TemplateResult => {\n return html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\" variant=\"accent\">Toggle Dialog</sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\">\n <overlay-trigger>\n <sp-button slot=\"trigger\" variant=\"primary\">\n Toggle Dialog\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divider>\n <overlay-trigger type=\"modal\">\n <sp-button\n slot=\"trigger\"\n variant=\"secondary\"\n >\n Toggle Dialog\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divider>\n <p>\n When you get this deep, this\n ActiveOverlay should be the only\n one in [slot=\"open\"].\n </p>\n <p>\n All of the rest of the\n ActiveOverlay elements should\n have had their [slot] attribute\n removed.\n </p>\n <p>\n Closing this ActiveOverlay\n should replace them...\n </p>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nexport const updated = (): TemplateResult => {\n return html`\n ${storyStyles}\n <style>\n sp-tooltip {\n transition: none;\n }\n </style>\n <overlay-drag>\n <overlay-trigger class=\"demo top-left\" placement=\"bottom\">\n <overlay-target-icon\n slot=\"trigger\"\n style=\"translate(400px, 300px)\"\n ></overlay-target-icon>\n <sp-tooltip slot=\"hover-content\" delayed tip=\"bottom\">\n Click to open popover\n </sp-tooltip>\n <sp-popover slot=\"click-content\" position=\"bottom\" tip>\n <sp-dialog size=\"s\" no-divder>\n <sp-slider\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Awesomeness\"\n ></sp-slider>\n <div id=\"styled-div\">\n The background of this div should be blue\n </div>\n <overlay-trigger id=\"inner-trigger\" placement=\"bottom\">\n <sp-button slot=\"trigger\">Press Me</sp-button>\n <sp-popover\n slot=\"click-content\"\n placement=\"bottom\"\n tip\n >\n <sp-dialog size=\"s\" no-divder>\n Another Popover\n </sp-dialog>\n </sp-popover>\n\n <sp-tooltip\n slot=\"hover-content\"\n delayed\n tip=\"bottom\"\n >\n Click to open another popover.\n </sp-tooltip>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </overlay-drag>\n `;\n};\n\nexport const updating = (): TemplateResult => {\n const update = (): void => {\n const button = document.querySelector('[slot=\"trigger\"]') as Button;\n button.style.left = `${Math.floor(Math.random() * 200)}px`;\n button.style.top = `${Math.floor(Math.random() * 200)}px`;\n button.style.position = 'fixed';\n // Overlay.update();\n };\n return html`\n <overlay-trigger type=\"click\">\n <sp-button variant=\"primary\" slot=\"trigger\">\n Open inline overlay\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog size=\"s\" no-divder>\n <sp-button variant=\"primary\" @click=${update}>\n Update trigger location.\n </sp-button>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `;\n};\n\nupdating.swc_vrt = {\n skip: true,\n};\n\nclass StartEndContextmenu extends HTMLElement {\n override shadowRoot!: ShadowRoot;\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n this.shadowRoot.innerHTML = `\n <style>\n :host {\n display: flex;\n align-items: stretch;\n }\n div {\n width: 50%;\n height: 100%;\n }\n </style>\n <div id=\"start\"></div>\n <div id=\"end\"></div>\n `;\n }\n}\n\ncustomElements.define('start-end-contextmenu', StartEndContextmenu);\n\nexport const virtualElement = (args: Properties): TemplateResult => {\n const contextMenuTemplate = (kind = ''): TemplateResult => html`\n <sp-popover\n style=\"width:300px;\"\n @click=${(event: PointerEvent) => {\n if (\n (event.target as HTMLElement).localName === 'sp-menu-item'\n ) {\n event.target?.dispatchEvent(\n new Event('close', { bubbles: true })\n );\n }\n }}\n >\n <sp-menu>\n <sp-menu-group>\n <span slot=\"header\">Menu source: ${kind}</span>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save selection</sp-menu-item>\n <sp-menu-item disabled>Make work path</sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n const handleContextmenu = async (event: PointerEvent): Promise<void> => {\n event.preventDefault();\n event.stopPropagation();\n\n const source = event.composedPath()[0] as HTMLDivElement;\n const { id } = source;\n const trigger = event.target as HTMLElement;\n const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n const fragment = document.createDocumentFragment();\n render(contextMenuTemplate(id), fragment);\n const popover = fragment.querySelector('sp-popover') as Popover;\n\n openOverlay(trigger, 'click', popover, {\n placement: args.placement,\n receivesFocus: 'auto',\n virtualTrigger,\n offset: -10,\n notImmediatelyClosable: true,\n });\n };\n return html`\n <style>\n .app-root {\n position: absolute;\n inset: 0;\n }\n </style>\n <start-end-contextmenu\n class=\"app-root\"\n @contextmenu=${{\n capture: true,\n handleEvent: handleContextmenu,\n }}\n ></start-end-contextmenu>\n `;\n};\n\nvirtualElement.args = {\n placement: 'right-start' as Placement,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/overlay.test.js
CHANGED
|
@@ -439,19 +439,26 @@ describe('Overlay - type="modal"', () => {
|
|
|
439
439
|
});
|
|
440
440
|
await opened;
|
|
441
441
|
firstMenu = document.querySelector("sp-popover");
|
|
442
|
+
expect(firstMenu.textContent).to.include("Menu source: end");
|
|
442
443
|
firstRect = firstMenu.getBoundingClientRect();
|
|
443
444
|
expect(firstMenu).to.not.be.null;
|
|
444
445
|
});
|
|
445
446
|
it('closes the first "contextmenu" when opening a second', async () => {
|
|
447
|
+
var _a, _b;
|
|
446
448
|
const closed = oneEvent(document, "sp-closed");
|
|
447
449
|
const opened = oneEvent(document, "sp-opened");
|
|
448
450
|
const trigger = document.querySelector(
|
|
449
451
|
"start-end-contextmenu"
|
|
450
452
|
);
|
|
451
|
-
trigger.
|
|
453
|
+
(_b = (_a = trigger.shadowRoot) == null ? void 0 : _a.querySelector("#start")) == null ? void 0 : _b.dispatchEvent(
|
|
454
|
+
new Event("contextmenu", {
|
|
455
|
+
composed: true
|
|
456
|
+
})
|
|
457
|
+
);
|
|
452
458
|
await closed;
|
|
453
459
|
await opened;
|
|
454
460
|
secondMenu = document.querySelector("sp-popover");
|
|
461
|
+
expect(secondMenu.textContent).to.include("Menu source: start");
|
|
455
462
|
secondRect = secondMenu.getBoundingClientRect();
|
|
456
463
|
expect(secondMenu).to.not.be.null;
|
|
457
464
|
});
|
package/test/overlay.test.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay.test.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 '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { Dialog } from '@spectrum-web-components/dialog';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Popover } from '@spectrum-web-components/popover';\nimport { setViewport } from '@web/test-runner-commands';\nimport {\n Overlay,\n OverlayTrigger,\n Placement,\n} from '@spectrum-web-components/overlay';\n\nimport {\n elementUpdated,\n expect,\n html,\n nextFrame,\n oneEvent,\n} from '@open-wc/testing';\nimport { sendKeys } from '@web/test-runner-commands';\nimport {\n definedOverlayElement,\n virtualElement,\n} from '../stories/overlay.stories';\nimport { PopoverContent } from '../stories/overlay-story-components.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { spy } from 'sinon';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport { Theme } from '@spectrum-web-components/theme';\nimport { render, TemplateResult } from '@spectrum-web-components/base';\nimport {\n fixture,\n isInteractive,\n isOnTopLayer,\n} from '../../../test/testing-helpers.js';\nimport { Menu } from '@spectrum-web-components/menu';\n\nasync function styledFixture<T extends Element>(\n story: TemplateResult\n): Promise<T> {\n const test = await fixture<Theme>(html`\n <sp-theme theme=\"spectrum\" scale=\"medium\" color=\"dark\">\n ${story}\n </sp-theme>\n `);\n return test.children[0] as T;\n}\n\ndescribe('Overlays', () => {\n let testDiv!: HTMLDivElement;\n let openOverlays: (() => void)[] = [];\n\n beforeEach(async () => {\n testDiv = await styledFixture<HTMLDivElement>(\n html`\n <div id=\"top\">\n <style>\n body {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #top {\n margin: 100px;\n }\n\n sp-button {\n flex: none;\n }\n\n #overlay-content {\n display: none;\n }\n </style>\n <sp-button id=\"first-button\" variant=\"primary\">\n Show Popover\n </sp-button>\n <div id=\"overlay-content\">\n <sp-popover id=\"outer-popover\" direction=\"bottom\" tip>\n <sp-dialog no-divider>\n <div class=\"options-popover-content\">\n A popover message\n </div>\n <sp-button id=\"outer-focus-target\">\n Test 1\n </sp-button>\n <sp-button>Test 2</sp-button>\n <sp-button>Test 3</sp-button>\n </sp-dialog>\n </sp-popover>\n <sp-tooltip id=\"hover-1\" class=\"hover-content\">\n Hover message\n </sp-tooltip>\n <sp-tooltip id=\"hover-2\" class=\"hover-content\">\n Other hover message\n </sp-tooltip>\n </div>\n </div>\n `\n );\n await elementUpdated(testDiv);\n });\n\n afterEach(() => {\n openOverlays.map((close) => close());\n openOverlays = [];\n });\n\n [\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'top',\n 'top-start',\n 'top-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'none',\n ].map((direction) => {\n const placement = direction as Placement;\n it(`opens a popover - ${placement}`, async () => {\n const clickSpy = spy();\n const button = testDiv.querySelector(\n '#first-button'\n ) as HTMLElement;\n const outerPopover = testDiv.querySelector(\n '#outer-popover'\n ) as Popover;\n outerPopover.addEventListener('click', () => {\n clickSpy();\n });\n\n expect(await isInteractive(outerPopover)).to.be.false;\n expect(button).to.exist;\n\n const opened = oneEvent(outerPopover, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'click', outerPopover, {\n delayed: false,\n placement,\n offset: 10,\n })\n );\n await opened;\n expect(await isInteractive(outerPopover)).to.be.true;\n });\n });\n\n it(`opens a modal dialog`, async () => {\n const button = testDiv.querySelector('#first-button') as HTMLElement;\n const outerPopover = testDiv.querySelector('#outer-popover') as Popover;\n\n expect(await isInteractive(outerPopover)).to.be.false;\n\n expect(button).to.exist;\n\n const opened = oneEvent(outerPopover, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'modal', outerPopover, {\n delayed: false,\n })\n );\n await opened;\n\n const firstFocused = outerPopover.querySelector(\n '#outer-focus-target'\n ) as HTMLElement;\n expect(document.activeElement === firstFocused).to.be.true;\n\n /**\n * Tab cycle is awkward in the headless browser, forward tab to just before the known end of the page\n * and the backward tab past the known beginning of the page. Test that you never focused the button\n * that triggered the dialog and is outside of the modal. A test that was able to cycle would be better.\n */\n\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement === button).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement === button).to.be.false;\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement === button).to.be.false;\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement === button).to.be.false;\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement === button).to.be.false;\n });\n\n it(`updates a popover`, async () => {\n const button = testDiv.querySelector('#first-button') as HTMLElement;\n const outerPopover = testDiv.querySelector('#outer-popover') as Popover;\n\n expect(await isInteractive(outerPopover)).to.be.false;\n\n expect(button).to.exist;\n\n const opened = oneEvent(outerPopover, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'click', outerPopover, {\n delayed: false,\n offset: 10,\n })\n );\n await opened;\n\n expect(await isInteractive(outerPopover)).to.be.true;\n\n Overlay.update();\n\n expect(await isInteractive(outerPopover)).to.be.true;\n });\n\n it(`opens a popover w/ delay`, async () => {\n const button = testDiv.querySelector('#first-button') as HTMLElement;\n const outerPopover = testDiv.querySelector('#outer-popover') as Popover;\n\n expect(await isInteractive(outerPopover)).to.be.false;\n expect(button).to.exist;\n\n const opened = oneEvent(outerPopover, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'click', outerPopover, {\n delayed: true,\n offset: 10,\n })\n );\n await opened;\n expect(await isInteractive(outerPopover)).to.be.true;\n });\n\n it('opens hover overlay', async () => {\n const button = testDiv.querySelector('#first-button') as HTMLElement;\n const hoverOverlay = testDiv.querySelector('#hover-1') as HTMLElement;\n const clickOverlay = testDiv.querySelector(\n '#outer-popover'\n ) as HTMLElement;\n\n expect(await isOnTopLayer(hoverOverlay)).to.be.false;\n expect(await isOnTopLayer(clickOverlay)).to.be.false;\n\n let opened = oneEvent(hoverOverlay, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'hover', hoverOverlay, {\n delayed: false,\n placement: 'top',\n offset: 10,\n })\n );\n await opened;\n expect(await isOnTopLayer(hoverOverlay)).to.be.true;\n\n opened = oneEvent(clickOverlay, 'sp-opened');\n const closed = oneEvent(hoverOverlay, 'sp-closed');\n // Opening click overlay should close the hover overlay\n openOverlays.push(\n await Overlay.open(button, 'click', clickOverlay, {\n delayed: false,\n placement: 'bottom',\n offset: 10,\n })\n );\n await opened;\n await closed;\n expect(\n await isInteractive(clickOverlay),\n 'click overlay not interactive'\n ).to.be.true;\n expect(await isOnTopLayer(hoverOverlay), 'hover overlay interactive').to\n .be.false;\n });\n\n it('opens custom overlay', async () => {\n const button = testDiv.querySelector('#first-button') as HTMLElement;\n const customOverlay = testDiv.querySelector('#hover-1') as HTMLElement;\n const clickOverlay = testDiv.querySelector(\n '#outer-popover'\n ) as HTMLElement;\n\n expect(button).to.exist;\n expect(customOverlay).to.exist;\n\n expect(await isOnTopLayer(customOverlay)).to.be.false;\n expect(await isOnTopLayer(clickOverlay)).to.be.false;\n\n let opened = oneEvent(customOverlay, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'custom', customOverlay, {\n delayed: false,\n placement: 'top',\n offset: 10,\n })\n );\n await opened;\n expect(await isOnTopLayer(customOverlay)).to.be.true;\n\n opened = oneEvent(clickOverlay, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'click', clickOverlay, {\n delayed: false,\n placement: 'bottom',\n offset: 10,\n })\n );\n await opened;\n expect(await isOnTopLayer(clickOverlay), 'click content open').to.be\n .true;\n });\n\n it('closes via events', async () => {\n const test = await fixture<HTMLDivElement>(html`\n <div>\n <sp-popover id=\"root\">\n <sp-dialog dismissable>\n Some Content for the Dialog.\n </sp-dialog>\n </sp-popover>\n </div>\n `);\n\n const el = test.querySelector('sp-popover') as Popover;\n const dialog = el.querySelector('sp-dialog') as Dialog;\n\n const opened = oneEvent(el, 'sp-opened');\n openOverlays.push(\n await Overlay.open(test, 'click', el, {\n delayed: false,\n placement: 'bottom',\n offset: 10,\n })\n );\n await opened;\n expect(await isInteractive(el)).to.be.true;\n\n const closed = oneEvent(el, 'sp-closed');\n dialog.close();\n await closed;\n expect(await isInteractive(el)).to.be.false;\n });\n\n it('closes an inline overlay when tabbing past the content', async () => {\n const el = await fixture<HTMLDivElement>(html`\n <div>\n <sp-button class=\"trigger\">Trigger</sp-button>\n <sp-popover class=\"content\">\n <input />\n </sp-popover>\n <input value=\"After\" id=\"after\" />\n </div>\n `);\n\n const trigger = el.querySelector('.trigger') as HTMLElement;\n const content = el.querySelector('.content') as HTMLElement;\n const input = el.querySelector('input') as HTMLInputElement;\n const after = el.querySelector('#after') as HTMLAnchorElement;\n\n const opened = oneEvent(content, 'sp-opened');\n openOverlays.push(\n await Overlay.open(trigger, 'inline', content, {\n receivesFocus: 'auto',\n })\n );\n await opened;\n\n expect(await isInteractive(content)).to.be.true;\n expect(document.activeElement).to.equal(input);\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement).to.equal(trigger);\n\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement).to.equal(input);\n\n const closed = oneEvent(content, 'sp-closed');\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement).to.equal(after);\n await closed;\n expect(await isInteractive(content)).to.be.false;\n });\n\n it('closes an inline overlay when tabbing before the trigger', async () => {\n const el = await fixture<HTMLDivElement>(html`\n <div>\n <input value=\"Before\" id=\"before\" />\n <sp-button class=\"trigger\">Trigger</sp-button>\n <div class=\"content\">\n <label>\n Content in an inline overlay.\n <input />\n </label>\n </div>\n </div>\n `);\n\n const trigger = el.querySelector('.trigger') as HTMLElement;\n const content = el.querySelector('.content') as HTMLElement;\n const input = el.querySelector('.content input') as HTMLInputElement;\n const before = el.querySelector('#before') as HTMLAnchorElement;\n\n openOverlays.push(await Overlay.open(trigger, 'inline', content, {}));\n\n trigger.focus();\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement).to.equal(input);\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement).to.equal(trigger);\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement).to.equal(before);\n });\n\n it('opens detached content', async () => {\n const textContent = 'This is a detached element that has been overlaid';\n const el = await fixture<HTMLButtonElement>(\n html`\n <button>Trigger</button>\n `\n );\n\n const content = document.createElement('sp-popover');\n content.textContent = textContent;\n\n const opened = oneEvent(content, 'sp-opened');\n const closeOverlay = await Overlay.open(el, 'click', content, {\n placement: 'bottom',\n });\n await opened;\n\n expect(await isInteractive(content)).to.be.true;\n\n const closed = oneEvent(content, 'sp-closed');\n closeOverlay();\n await closed;\n\n expect(await isInteractive(content)).to.be.false;\n\n content.remove();\n });\n});\ndescribe('Overlay - type=\"modal\"', () => {\n describe('handle multiple separate `contextmenu` events', async () => {\n let width = 0;\n let height = 0;\n let firstMenu: Popover;\n let firstRect: DOMRect;\n let secondMenu: Popover;\n let secondRect: DOMRect;\n before(async () => {\n render(\n html`\n <sp-theme color=\"light\" scale=\"large\">\n ${virtualElement({\n ...virtualElement.args,\n offset: 6,\n })}\n </sp-theme>\n `,\n document.body\n );\n\n width = window.innerWidth;\n height = window.innerHeight;\n });\n after(() => {\n document.querySelector('sp-theme')?.remove();\n });\n it('opens the first \"contextmenu\" overlay', async () => {\n const opened = oneEvent(document, 'sp-opened');\n // Right click to open \"context menu\" overlay.\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [width / 2 + 50, height / 2],\n },\n {\n type: 'click',\n options: {\n button: 'right',\n },\n position: [width / 2 + 50, height / 2],\n },\n ],\n });\n await opened;\n firstMenu = document.querySelector('sp-popover') as Popover;\n firstRect = firstMenu.getBoundingClientRect();\n expect(firstMenu).to.not.be.null;\n });\n it('closes the first \"contextmenu\" when opening a second', async () => {\n const closed = oneEvent(document, 'sp-closed');\n const opened = oneEvent(document, 'sp-opened');\n /**\n * Right click out of the \"context menu\" overlay to both close\n * the first overlay and have the event passed to the surfacing page\n * in order to open a subsequent \"context menu\" overlay.\n *\n * Using `sendMouse` here triggers the light dismiss for some reason while\n * manual interacting in this way does not...\n */\n const trigger = document.querySelector(\n 'start-end-contextmenu'\n ) as HTMLElement;\n trigger.dispatchEvent(new Event('contextmenu'));\n await closed;\n await opened;\n secondMenu = document.querySelector('sp-popover') as Popover;\n secondRect = secondMenu.getBoundingClientRect();\n expect(secondMenu).to.not.be.null;\n });\n it('closes the second \"contextmenu\" when clicking away', async () => {\n const closed = oneEvent(document, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [width - width / 8, height - height / 8],\n },\n ],\n });\n await closed;\n expect(firstRect.top).to.not.equal(secondRect.top);\n expect(firstRect.left).to.not.equal(secondRect.left);\n });\n });\n\n it('does not open content off of the viewport', async () => {\n before(async () => {\n await setViewport({ width: 360, height: 640 });\n // Allow viewport update to propagate.\n await nextFrame();\n });\n after(async () => {\n await setViewport({ width: 800, height: 600 });\n // Allow viewport update to propagate.\n await nextFrame();\n });\n\n await fixture<HTMLDivElement>(html`\n ${virtualElement({\n ...virtualElement.args,\n offset: 6,\n })}\n `);\n\n const opened = oneEvent(document, 'sp-opened');\n // Right click to open \"context menu\" overlay.\n sendMouse({\n steps: [\n {\n type: 'move',\n position: [270, 10],\n },\n {\n type: 'click',\n options: {\n button: 'right',\n },\n position: [270, 10],\n },\n ],\n });\n await opened;\n\n const firstMenu = document.querySelector('sp-menu') as Menu;\n expect(firstMenu).to.not.be.null;\n expect(await isInteractive(firstMenu)).to.be.true;\n\n const closed = oneEvent(document, 'sp-closed');\n sendKeys({\n press: 'Escape',\n });\n await closed;\n\n expect(await isInteractive(firstMenu)).to.be.false;\n });\n\n it('opens children in the modal stack through shadow roots', async () => {\n const el = await fixture<OverlayTrigger>(definedOverlayElement());\n const trigger = el.querySelector(\n '[slot=\"trigger\"]'\n ) as HTMLButtonElement;\n let open = oneEvent(el, 'sp-opened');\n trigger.click();\n await open;\n expect(el.open).to.equal('click');\n const content = document.querySelector(\n 'popover-content'\n ) as PopoverContent;\n open = oneEvent(content, 'sp-opened');\n content.button.click();\n await open;\n expect(content.trigger.open).to.equal('click');\n let close = oneEvent(content, 'sp-closed');\n content.trigger.removeAttribute('open');\n await close;\n expect(content.trigger.open).to.be.null;\n close = oneEvent(el, 'sp-closed');\n el.removeAttribute('open');\n await close;\n expect(el.open).to.be.null;\n });\n});\ndescribe('Overlay - timing', () => {\n it('manages multiple modals in a row without preventing them from closing', async () => {\n const test = await fixture<HTMLDivElement>(html`\n <div>\n <overlay-trigger id=\"test-1\" placement=\"right\">\n <sp-button slot=\"trigger\">Trigger 1</sp-button>\n <sp-popover slot=\"hover-content\">\n <p>Hover contentent for \"Trigger 1\".</p>\n </sp-popover>\n </overlay-trigger>\n <overlay-trigger id=\"test-2\" placement=\"right\">\n <sp-button slot=\"trigger\">Trigger 2</sp-button>\n <sp-popover slot=\"click-content\">\n <p>Click contentent for \"Trigger 2\".</p>\n </sp-popover>\n <sp-popover slot=\"hover-content\">\n <p>Hover contentent for \"Trigger 2\".</p>\n </sp-popover>\n </overlay-trigger>\n </div>\n `);\n\n const overlayTrigger1 = test.querySelector('#test-1') as OverlayTrigger;\n const overlayTrigger2 = test.querySelector('#test-2') as OverlayTrigger;\n const trigger1 = overlayTrigger1.querySelector(\n '[slot=\"trigger\"]'\n ) as HTMLButtonElement;\n const trigger2 = overlayTrigger2.querySelector(\n '[slot=\"trigger\"]'\n ) as HTMLButtonElement;\n\n const boundingRectTrigger1 = trigger1.getBoundingClientRect();\n const boundingRectTrigger2 = trigger2.getBoundingClientRect();\n const trigger1Position: [number, number] = [\n boundingRectTrigger1.left + boundingRectTrigger1.width / 2,\n boundingRectTrigger1.top + boundingRectTrigger1.height / 2,\n ];\n const outsideTriggers: [number, number] = [\n boundingRectTrigger1.left + boundingRectTrigger1.width / 2,\n 300,\n ];\n const trigger2Position: [number, number] = [\n boundingRectTrigger2.left + boundingRectTrigger2.width / 2,\n boundingRectTrigger2.top + boundingRectTrigger2.height / 4,\n ];\n\n // Move poitner over \"Trigger 1\", should _start_ to open \"hover\" content.\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: trigger1Position,\n },\n ],\n });\n await nextFrame();\n await nextFrame();\n // Move pointer out of \"Trigger 1\", should _start_ to close \"hover\" content.\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: outsideTriggers,\n },\n ],\n });\n await nextFrame();\n await nextFrame();\n // Move pointer over \"Trigger 2\", should _start_ to open \"hover\" content.\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: trigger2Position,\n },\n ],\n });\n await nextFrame();\n await nextFrame();\n const opened = oneEvent(trigger2, 'sp-opened');\n // Click \"Trigger 2\", should _start_ to open \"click\" content and _start_ to close \"hover\" content.\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: trigger2Position,\n },\n ],\n });\n await opened;\n await nextFrame();\n await nextFrame();\n\n // \"click\" content for \"Trigger 2\", _only_, open.\n expect(overlayTrigger1.hasAttribute('open')).to.be.false;\n expect(overlayTrigger2.hasAttribute('open')).to.be.true;\n expect(overlayTrigger2.getAttribute('open')).to.equal('click');\n\n const closed = oneEvent(overlayTrigger2, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: outsideTriggers,\n },\n ],\n });\n await closed;\n\n // Both overlays are closed.\n // Neither trigger received \"focus\" because the pointer \"clicked\" away, redirecting focus to <body>\n expect(overlayTrigger1.hasAttribute('open')).to.be.false;\n expect(overlayTrigger2.hasAttribute('open')).to.be.false;\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 '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { Dialog } from '@spectrum-web-components/dialog';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Popover } from '@spectrum-web-components/popover';\nimport { setViewport } from '@web/test-runner-commands';\nimport {\n Overlay,\n OverlayTrigger,\n Placement,\n} from '@spectrum-web-components/overlay';\n\nimport {\n elementUpdated,\n expect,\n html,\n nextFrame,\n oneEvent,\n} from '@open-wc/testing';\nimport { sendKeys } from '@web/test-runner-commands';\nimport {\n definedOverlayElement,\n virtualElement,\n} from '../stories/overlay.stories';\nimport { PopoverContent } from '../stories/overlay-story-components.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { spy } from 'sinon';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport { Theme } from '@spectrum-web-components/theme';\nimport { render, TemplateResult } from '@spectrum-web-components/base';\nimport {\n fixture,\n isInteractive,\n isOnTopLayer,\n} from '../../../test/testing-helpers.js';\nimport { Menu } from '@spectrum-web-components/menu';\n\nasync function styledFixture<T extends Element>(\n story: TemplateResult\n): Promise<T> {\n const test = await fixture<Theme>(html`\n <sp-theme theme=\"spectrum\" scale=\"medium\" color=\"dark\">\n ${story}\n </sp-theme>\n `);\n return test.children[0] as T;\n}\n\ndescribe('Overlays', () => {\n let testDiv!: HTMLDivElement;\n let openOverlays: (() => void)[] = [];\n\n beforeEach(async () => {\n testDiv = await styledFixture<HTMLDivElement>(\n html`\n <div id=\"top\">\n <style>\n body {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #top {\n margin: 100px;\n }\n\n sp-button {\n flex: none;\n }\n\n #overlay-content {\n display: none;\n }\n </style>\n <sp-button id=\"first-button\" variant=\"primary\">\n Show Popover\n </sp-button>\n <div id=\"overlay-content\">\n <sp-popover id=\"outer-popover\" direction=\"bottom\" tip>\n <sp-dialog no-divider>\n <div class=\"options-popover-content\">\n A popover message\n </div>\n <sp-button id=\"outer-focus-target\">\n Test 1\n </sp-button>\n <sp-button>Test 2</sp-button>\n <sp-button>Test 3</sp-button>\n </sp-dialog>\n </sp-popover>\n <sp-tooltip id=\"hover-1\" class=\"hover-content\">\n Hover message\n </sp-tooltip>\n <sp-tooltip id=\"hover-2\" class=\"hover-content\">\n Other hover message\n </sp-tooltip>\n </div>\n </div>\n `\n );\n await elementUpdated(testDiv);\n });\n\n afterEach(() => {\n openOverlays.map((close) => close());\n openOverlays = [];\n });\n\n [\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'top',\n 'top-start',\n 'top-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'none',\n ].map((direction) => {\n const placement = direction as Placement;\n it(`opens a popover - ${placement}`, async () => {\n const clickSpy = spy();\n const button = testDiv.querySelector(\n '#first-button'\n ) as HTMLElement;\n const outerPopover = testDiv.querySelector(\n '#outer-popover'\n ) as Popover;\n outerPopover.addEventListener('click', () => {\n clickSpy();\n });\n\n expect(await isInteractive(outerPopover)).to.be.false;\n expect(button).to.exist;\n\n const opened = oneEvent(outerPopover, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'click', outerPopover, {\n delayed: false,\n placement,\n offset: 10,\n })\n );\n await opened;\n expect(await isInteractive(outerPopover)).to.be.true;\n });\n });\n\n it(`opens a modal dialog`, async () => {\n const button = testDiv.querySelector('#first-button') as HTMLElement;\n const outerPopover = testDiv.querySelector('#outer-popover') as Popover;\n\n expect(await isInteractive(outerPopover)).to.be.false;\n\n expect(button).to.exist;\n\n const opened = oneEvent(outerPopover, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'modal', outerPopover, {\n delayed: false,\n })\n );\n await opened;\n\n const firstFocused = outerPopover.querySelector(\n '#outer-focus-target'\n ) as HTMLElement;\n expect(document.activeElement === firstFocused).to.be.true;\n\n /**\n * Tab cycle is awkward in the headless browser, forward tab to just before the known end of the page\n * and the backward tab past the known beginning of the page. Test that you never focused the button\n * that triggered the dialog and is outside of the modal. A test that was able to cycle would be better.\n */\n\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement === button).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement === button).to.be.false;\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement === button).to.be.false;\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement === button).to.be.false;\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement === button).to.be.false;\n });\n\n it(`updates a popover`, async () => {\n const button = testDiv.querySelector('#first-button') as HTMLElement;\n const outerPopover = testDiv.querySelector('#outer-popover') as Popover;\n\n expect(await isInteractive(outerPopover)).to.be.false;\n\n expect(button).to.exist;\n\n const opened = oneEvent(outerPopover, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'click', outerPopover, {\n delayed: false,\n offset: 10,\n })\n );\n await opened;\n\n expect(await isInteractive(outerPopover)).to.be.true;\n\n Overlay.update();\n\n expect(await isInteractive(outerPopover)).to.be.true;\n });\n\n it(`opens a popover w/ delay`, async () => {\n const button = testDiv.querySelector('#first-button') as HTMLElement;\n const outerPopover = testDiv.querySelector('#outer-popover') as Popover;\n\n expect(await isInteractive(outerPopover)).to.be.false;\n expect(button).to.exist;\n\n const opened = oneEvent(outerPopover, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'click', outerPopover, {\n delayed: true,\n offset: 10,\n })\n );\n await opened;\n expect(await isInteractive(outerPopover)).to.be.true;\n });\n\n it('opens hover overlay', async () => {\n const button = testDiv.querySelector('#first-button') as HTMLElement;\n const hoverOverlay = testDiv.querySelector('#hover-1') as HTMLElement;\n const clickOverlay = testDiv.querySelector(\n '#outer-popover'\n ) as HTMLElement;\n\n expect(await isOnTopLayer(hoverOverlay)).to.be.false;\n expect(await isOnTopLayer(clickOverlay)).to.be.false;\n\n let opened = oneEvent(hoverOverlay, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'hover', hoverOverlay, {\n delayed: false,\n placement: 'top',\n offset: 10,\n })\n );\n await opened;\n expect(await isOnTopLayer(hoverOverlay)).to.be.true;\n\n opened = oneEvent(clickOverlay, 'sp-opened');\n const closed = oneEvent(hoverOverlay, 'sp-closed');\n // Opening click overlay should close the hover overlay\n openOverlays.push(\n await Overlay.open(button, 'click', clickOverlay, {\n delayed: false,\n placement: 'bottom',\n offset: 10,\n })\n );\n await opened;\n await closed;\n expect(\n await isInteractive(clickOverlay),\n 'click overlay not interactive'\n ).to.be.true;\n expect(await isOnTopLayer(hoverOverlay), 'hover overlay interactive').to\n .be.false;\n });\n\n it('opens custom overlay', async () => {\n const button = testDiv.querySelector('#first-button') as HTMLElement;\n const customOverlay = testDiv.querySelector('#hover-1') as HTMLElement;\n const clickOverlay = testDiv.querySelector(\n '#outer-popover'\n ) as HTMLElement;\n\n expect(button).to.exist;\n expect(customOverlay).to.exist;\n\n expect(await isOnTopLayer(customOverlay)).to.be.false;\n expect(await isOnTopLayer(clickOverlay)).to.be.false;\n\n let opened = oneEvent(customOverlay, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'custom', customOverlay, {\n delayed: false,\n placement: 'top',\n offset: 10,\n })\n );\n await opened;\n expect(await isOnTopLayer(customOverlay)).to.be.true;\n\n opened = oneEvent(clickOverlay, 'sp-opened');\n openOverlays.push(\n await Overlay.open(button, 'click', clickOverlay, {\n delayed: false,\n placement: 'bottom',\n offset: 10,\n })\n );\n await opened;\n expect(await isOnTopLayer(clickOverlay), 'click content open').to.be\n .true;\n });\n\n it('closes via events', async () => {\n const test = await fixture<HTMLDivElement>(html`\n <div>\n <sp-popover id=\"root\">\n <sp-dialog dismissable>\n Some Content for the Dialog.\n </sp-dialog>\n </sp-popover>\n </div>\n `);\n\n const el = test.querySelector('sp-popover') as Popover;\n const dialog = el.querySelector('sp-dialog') as Dialog;\n\n const opened = oneEvent(el, 'sp-opened');\n openOverlays.push(\n await Overlay.open(test, 'click', el, {\n delayed: false,\n placement: 'bottom',\n offset: 10,\n })\n );\n await opened;\n expect(await isInteractive(el)).to.be.true;\n\n const closed = oneEvent(el, 'sp-closed');\n dialog.close();\n await closed;\n expect(await isInteractive(el)).to.be.false;\n });\n\n it('closes an inline overlay when tabbing past the content', async () => {\n const el = await fixture<HTMLDivElement>(html`\n <div>\n <sp-button class=\"trigger\">Trigger</sp-button>\n <sp-popover class=\"content\">\n <input />\n </sp-popover>\n <input value=\"After\" id=\"after\" />\n </div>\n `);\n\n const trigger = el.querySelector('.trigger') as HTMLElement;\n const content = el.querySelector('.content') as HTMLElement;\n const input = el.querySelector('input') as HTMLInputElement;\n const after = el.querySelector('#after') as HTMLAnchorElement;\n\n const opened = oneEvent(content, 'sp-opened');\n openOverlays.push(\n await Overlay.open(trigger, 'inline', content, {\n receivesFocus: 'auto',\n })\n );\n await opened;\n\n expect(await isInteractive(content)).to.be.true;\n expect(document.activeElement).to.equal(input);\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement).to.equal(trigger);\n\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement).to.equal(input);\n\n const closed = oneEvent(content, 'sp-closed');\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement).to.equal(after);\n await closed;\n expect(await isInteractive(content)).to.be.false;\n });\n\n it('closes an inline overlay when tabbing before the trigger', async () => {\n const el = await fixture<HTMLDivElement>(html`\n <div>\n <input value=\"Before\" id=\"before\" />\n <sp-button class=\"trigger\">Trigger</sp-button>\n <div class=\"content\">\n <label>\n Content in an inline overlay.\n <input />\n </label>\n </div>\n </div>\n `);\n\n const trigger = el.querySelector('.trigger') as HTMLElement;\n const content = el.querySelector('.content') as HTMLElement;\n const input = el.querySelector('.content input') as HTMLInputElement;\n const before = el.querySelector('#before') as HTMLAnchorElement;\n\n openOverlays.push(await Overlay.open(trigger, 'inline', content, {}));\n\n trigger.focus();\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement).to.equal(input);\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement).to.equal(trigger);\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement).to.equal(before);\n });\n\n it('opens detached content', async () => {\n const textContent = 'This is a detached element that has been overlaid';\n const el = await fixture<HTMLButtonElement>(\n html`\n <button>Trigger</button>\n `\n );\n\n const content = document.createElement('sp-popover');\n content.textContent = textContent;\n\n const opened = oneEvent(content, 'sp-opened');\n const closeOverlay = await Overlay.open(el, 'click', content, {\n placement: 'bottom',\n });\n await opened;\n\n expect(await isInteractive(content)).to.be.true;\n\n const closed = oneEvent(content, 'sp-closed');\n closeOverlay();\n await closed;\n\n expect(await isInteractive(content)).to.be.false;\n\n content.remove();\n });\n});\ndescribe('Overlay - type=\"modal\"', () => {\n describe('handle multiple separate `contextmenu` events', async () => {\n let width = 0;\n let height = 0;\n let firstMenu: Popover;\n let firstRect: DOMRect;\n let secondMenu: Popover;\n let secondRect: DOMRect;\n before(async () => {\n render(\n html`\n <sp-theme color=\"light\" scale=\"large\">\n ${virtualElement({\n ...virtualElement.args,\n offset: 6,\n })}\n </sp-theme>\n `,\n document.body\n );\n\n width = window.innerWidth;\n height = window.innerHeight;\n });\n after(() => {\n document.querySelector('sp-theme')?.remove();\n });\n it('opens the first \"contextmenu\" overlay', async () => {\n const opened = oneEvent(document, 'sp-opened');\n // Right click to open \"context menu\" overlay.\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [width / 2 + 50, height / 2],\n },\n {\n type: 'click',\n options: {\n button: 'right',\n },\n position: [width / 2 + 50, height / 2],\n },\n ],\n });\n await opened;\n firstMenu = document.querySelector('sp-popover') as Popover;\n expect(firstMenu.textContent).to.include('Menu source: end');\n firstRect = firstMenu.getBoundingClientRect();\n expect(firstMenu).to.not.be.null;\n });\n it('closes the first \"contextmenu\" when opening a second', async () => {\n const closed = oneEvent(document, 'sp-closed');\n const opened = oneEvent(document, 'sp-opened');\n /**\n * Right click out of the \"context menu\" overlay to both close\n * the first overlay and have the event passed to the surfacing page\n * in order to open a subsequent \"context menu\" overlay.\n *\n * Using `sendMouse` here triggers the light dismiss for some reason while\n * manual interacting in this way does not...\n */\n const trigger = document.querySelector(\n 'start-end-contextmenu'\n ) as HTMLElement;\n trigger.shadowRoot?.querySelector('#start')?.dispatchEvent(\n new Event('contextmenu', {\n composed: true,\n })\n );\n await closed;\n await opened;\n secondMenu = document.querySelector('sp-popover') as Popover;\n expect(secondMenu.textContent).to.include('Menu source: start');\n secondRect = secondMenu.getBoundingClientRect();\n expect(secondMenu).to.not.be.null;\n });\n it('closes the second \"contextmenu\" when clicking away', async () => {\n const closed = oneEvent(document, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [width - width / 8, height - height / 8],\n },\n ],\n });\n await closed;\n expect(firstRect.top).to.not.equal(secondRect.top);\n expect(firstRect.left).to.not.equal(secondRect.left);\n });\n });\n\n it('does not open content off of the viewport', async () => {\n before(async () => {\n await setViewport({ width: 360, height: 640 });\n // Allow viewport update to propagate.\n await nextFrame();\n });\n after(async () => {\n await setViewport({ width: 800, height: 600 });\n // Allow viewport update to propagate.\n await nextFrame();\n });\n\n await fixture<HTMLDivElement>(html`\n ${virtualElement({\n ...virtualElement.args,\n offset: 6,\n })}\n `);\n\n const opened = oneEvent(document, 'sp-opened');\n // Right click to open \"context menu\" overlay.\n sendMouse({\n steps: [\n {\n type: 'move',\n position: [270, 10],\n },\n {\n type: 'click',\n options: {\n button: 'right',\n },\n position: [270, 10],\n },\n ],\n });\n await opened;\n\n const firstMenu = document.querySelector('sp-menu') as Menu;\n expect(firstMenu).to.not.be.null;\n expect(await isInteractive(firstMenu)).to.be.true;\n\n const closed = oneEvent(document, 'sp-closed');\n sendKeys({\n press: 'Escape',\n });\n await closed;\n\n expect(await isInteractive(firstMenu)).to.be.false;\n });\n\n it('opens children in the modal stack through shadow roots', async () => {\n const el = await fixture<OverlayTrigger>(definedOverlayElement());\n const trigger = el.querySelector(\n '[slot=\"trigger\"]'\n ) as HTMLButtonElement;\n let open = oneEvent(el, 'sp-opened');\n trigger.click();\n await open;\n expect(el.open).to.equal('click');\n const content = document.querySelector(\n 'popover-content'\n ) as PopoverContent;\n open = oneEvent(content, 'sp-opened');\n content.button.click();\n await open;\n expect(content.trigger.open).to.equal('click');\n let close = oneEvent(content, 'sp-closed');\n content.trigger.removeAttribute('open');\n await close;\n expect(content.trigger.open).to.be.null;\n close = oneEvent(el, 'sp-closed');\n el.removeAttribute('open');\n await close;\n expect(el.open).to.be.null;\n });\n});\ndescribe('Overlay - timing', () => {\n it('manages multiple modals in a row without preventing them from closing', async () => {\n const test = await fixture<HTMLDivElement>(html`\n <div>\n <overlay-trigger id=\"test-1\" placement=\"right\">\n <sp-button slot=\"trigger\">Trigger 1</sp-button>\n <sp-popover slot=\"hover-content\">\n <p>Hover contentent for \"Trigger 1\".</p>\n </sp-popover>\n </overlay-trigger>\n <overlay-trigger id=\"test-2\" placement=\"right\">\n <sp-button slot=\"trigger\">Trigger 2</sp-button>\n <sp-popover slot=\"click-content\">\n <p>Click contentent for \"Trigger 2\".</p>\n </sp-popover>\n <sp-popover slot=\"hover-content\">\n <p>Hover contentent for \"Trigger 2\".</p>\n </sp-popover>\n </overlay-trigger>\n </div>\n `);\n\n const overlayTrigger1 = test.querySelector('#test-1') as OverlayTrigger;\n const overlayTrigger2 = test.querySelector('#test-2') as OverlayTrigger;\n const trigger1 = overlayTrigger1.querySelector(\n '[slot=\"trigger\"]'\n ) as HTMLButtonElement;\n const trigger2 = overlayTrigger2.querySelector(\n '[slot=\"trigger\"]'\n ) as HTMLButtonElement;\n\n const boundingRectTrigger1 = trigger1.getBoundingClientRect();\n const boundingRectTrigger2 = trigger2.getBoundingClientRect();\n const trigger1Position: [number, number] = [\n boundingRectTrigger1.left + boundingRectTrigger1.width / 2,\n boundingRectTrigger1.top + boundingRectTrigger1.height / 2,\n ];\n const outsideTriggers: [number, number] = [\n boundingRectTrigger1.left + boundingRectTrigger1.width / 2,\n 300,\n ];\n const trigger2Position: [number, number] = [\n boundingRectTrigger2.left + boundingRectTrigger2.width / 2,\n boundingRectTrigger2.top + boundingRectTrigger2.height / 4,\n ];\n\n // Move poitner over \"Trigger 1\", should _start_ to open \"hover\" content.\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: trigger1Position,\n },\n ],\n });\n await nextFrame();\n await nextFrame();\n // Move pointer out of \"Trigger 1\", should _start_ to close \"hover\" content.\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: outsideTriggers,\n },\n ],\n });\n await nextFrame();\n await nextFrame();\n // Move pointer over \"Trigger 2\", should _start_ to open \"hover\" content.\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: trigger2Position,\n },\n ],\n });\n await nextFrame();\n await nextFrame();\n const opened = oneEvent(trigger2, 'sp-opened');\n // Click \"Trigger 2\", should _start_ to open \"click\" content and _start_ to close \"hover\" content.\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: trigger2Position,\n },\n ],\n });\n await opened;\n await nextFrame();\n await nextFrame();\n\n // \"click\" content for \"Trigger 2\", _only_, open.\n expect(overlayTrigger1.hasAttribute('open')).to.be.false;\n expect(overlayTrigger2.hasAttribute('open')).to.be.true;\n expect(overlayTrigger2.getAttribute('open')).to.equal('click');\n\n const closed = oneEvent(overlayTrigger2, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: outsideTriggers,\n },\n ],\n });\n await closed;\n\n // Both overlays are closed.\n // Neither trigger received \"focus\" because the pointer \"clicked\" away, redirecting focus to <body>\n expect(overlayTrigger1.hasAttribute('open')).to.be.false;\n expect(overlayTrigger2.hasAttribute('open')).to.be.false;\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["after", "before"]
|
|
7
7
|
}
|