@spectrum-web-components/overlay 0.37.0 → 0.38.0

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.
Files changed (10) hide show
  1. package/README.md +12 -1
  2. package/package.json +7 -7
  3. package/src/topLayerOverTransforms.dev.js +6 -1
  4. package/src/topLayerOverTransforms.dev.js.map +2 -2
  5. package/src/topLayerOverTransforms.js +1 -1
  6. package/src/topLayerOverTransforms.js.map +3 -3
  7. package/stories/overlay-element.stories.js +40 -0
  8. package/stories/overlay-element.stories.js.map +2 -2
  9. package/test/overlay-lifecycle.test.js +18 -7
  10. package/test/overlay-lifecycle.test.js.map +2 -2
package/README.md CHANGED
@@ -31,7 +31,7 @@ By leveraging the `trigger` attribute to pass an ID reference to another element
31
31
 
32
32
  ```html
33
33
  <sp-button id="trigger">Overlay Trigger</sp-button>
34
- <sp-overlay trigger="trigger@click">
34
+ <sp-overlay trigger="trigger@click" placement="bottom">
35
35
  <sp-popover>
36
36
  <sp-dialog>
37
37
  <h2 slot="heading">Clicking opens this popover...</h2>
@@ -315,3 +315,14 @@ Here, again, working with your content needs (whether or not you want to leverag
315
315
  }
316
316
  </style>
317
317
  ```
318
+
319
+ ### Non-overflowing, relative containers with z-index in Safari
320
+
321
+ Under very specific conditions, [WebKit will incorrectly clip fixed-position content](https://bugs.webkit.org/show_bug.cgi?id=160953).
322
+ WebKit clips `position: fixed` elements within containers that have all of:
323
+
324
+ 1. `position: relative`
325
+ 2. `overflow: clip` or `overflow: hidden`
326
+ 3. `z-index` greater than zero
327
+
328
+ If you notice overlay clipping _only_ in Safari, this is likely the culprit. The solution is to break up the conditions into separate elements to avoid triggering WebKit's bug. For example, leaving relative positioning and z-index on the outermost container while creating an inner container that enforces the overflow rules.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/overlay",
3
- "version": "0.37.0",
3
+ "version": "0.38.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -128,11 +128,11 @@
128
128
  "dependencies": {
129
129
  "@floating-ui/dom": "^1.5.1",
130
130
  "@floating-ui/utils": "^0.1.1",
131
- "@spectrum-web-components/action-button": "^0.37.0",
132
- "@spectrum-web-components/base": "^0.37.0",
133
- "@spectrum-web-components/reactive-controllers": "^0.37.0",
134
- "@spectrum-web-components/shared": "^0.37.0",
135
- "@spectrum-web-components/theme": "^0.37.0"
131
+ "@spectrum-web-components/action-button": "^0.38.0",
132
+ "@spectrum-web-components/base": "^0.38.0",
133
+ "@spectrum-web-components/reactive-controllers": "^0.38.0",
134
+ "@spectrum-web-components/shared": "^0.38.0",
135
+ "@spectrum-web-components/theme": "^0.38.0"
136
136
  },
137
137
  "types": "./src/index.d.ts",
138
138
  "customElements": "custom-elements.json",
@@ -144,5 +144,5 @@
144
144
  "./stories/overlay-story-components.js",
145
145
  "./**/*.dev.js"
146
146
  ],
147
- "gitHead": "d771f62f0d8063070af43283bb0fd5e3400bad06"
147
+ "gitHead": "9a099b7543672f2fd4030833ab813b16c2cad62e"
148
148
  }
package/src/topLayerOverTransforms.dev.js CHANGED
@@ -59,7 +59,12 @@ export const topLayerOverTransforms = () => ({
59
59
  const containingBlock = isContainingBlock(root) ? root : getContainingBlock(root);
60
60
  if (containingBlock !== null && getWindow(containingBlock) !== containingBlock) {
61
61
  const css = getComputedStyle(containingBlock);
62
- overTransforms = css.transform !== "none" || css.filter ? css.filter !== "none" : false;
62
+ overTransforms = // the `transform` property
63
+ css.transform !== "none" || // the `filter` property for anything other than "none"
64
+ (css.filter ? css.filter !== "none" : false) || // a value of "paint", "layout", "strict", or "content" for `contain`
65
+ ["paint", "layout", "strict", "content"].some(
66
+ (value) => (css.contain || "").includes(value)
67
+ );
63
68
  }
64
69
  if (onTopLayer && overTransforms && containingBlock) {
65
70
  const rect = containingBlock.getBoundingClientRect();
package/src/topLayerOverTransforms.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["topLayerOverTransforms.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*/\nimport type { Middleware, MiddlewareState } from '@floating-ui/dom';\nimport {\n getContainingBlock,\n getWindow,\n isContainingBlock,\n} from '@floating-ui/utils/dom';\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\n\nexport const topLayerOverTransforms = (): Middleware => ({\n name: 'topLayer',\n async fn(middlewareArguments: MiddlewareState) {\n const {\n x,\n y,\n elements: { reference, floating },\n } = middlewareArguments;\n let onTopLayer = false;\n let topLayerIsFloating = false;\n let withinReference = false;\n const diffCoords = {\n x: 0,\n y: 0,\n };\n try {\n onTopLayer = onTopLayer || floating.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next 3 */\n } catch (error) {}\n topLayerIsFloating = onTopLayer;\n const dialogAncestorQueryEvent = new Event('floating-ui-dialog-test', {\n composed: true,\n bubbles: true,\n });\n floating.addEventListener(\n 'floating-ui-dialog-test',\n (event: Event) => {\n (event.composedPath() as unknown as Element[]).forEach((el) => {\n withinReference = withinReference || el === reference;\n if (el === floating || el.localName !== 'dialog') return;\n try {\n onTopLayer = onTopLayer || el.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next */\n } catch (error) {}\n });\n },\n { once: true }\n );\n floating.dispatchEvent(dialogAncestorQueryEvent);\n let overTransforms = false;\n if (!(reference instanceof VirtualTrigger)) {\n const root = (withinReference ? reference : floating) as Element;\n const containingBlock = isContainingBlock(root)\n ? root\n : getContainingBlock(root);\n if (\n containingBlock !== null &&\n getWindow(containingBlock) !==\n (containingBlock as unknown as Window)\n ) {\n const css = getComputedStyle(containingBlock);\n overTransforms =\n css.transform !== 'none' || css.filter\n ? css.filter !== 'none'\n : false;\n }\n\n if (onTopLayer && overTransforms && containingBlock) {\n const rect = containingBlock.getBoundingClientRect();\n diffCoords.x = rect.x;\n diffCoords.y = rect.y;\n }\n }\n\n if (onTopLayer && topLayerIsFloating) {\n return {\n x: x + diffCoords.x,\n y: y + diffCoords.y,\n data: diffCoords,\n };\n }\n\n if (onTopLayer) {\n return {\n x,\n y,\n data: diffCoords,\n };\n }\n\n return {\n x: x - diffCoords.x,\n y: y - diffCoords.y,\n data: diffCoords,\n };\n },\n});\n"],
5
- "mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,sBAAsB;AAExB,aAAM,yBAAyB,OAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,GAAG,qBAAsC;AAC3C,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA,UAAU,EAAE,WAAW,SAAS;AAAA,IACpC,IAAI;AACJ,QAAI,aAAa;AACjB,QAAI,qBAAqB;AACzB,QAAI,kBAAkB;AACtB,UAAM,aAAa;AAAA,MACf,GAAG;AAAA,MACH,GAAG;AAAA,IACP;AACA,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,eAAe;AAAA,IAE/D,SAAS,OAAO;AAAA,IAAC;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,OAAO;AAAA,IAEvD,SAAS,OAAO;AAAA,IAAC;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,QAAQ;AAAA,IAGxD,SAAS,OAAO;AAAA,IAAC;AACjB,yBAAqB;AACrB,UAAM,2BAA2B,IAAI,MAAM,2BAA2B;AAAA,MAClE,UAAU;AAAA,MACV,SAAS;AAAA,IACb,CAAC;AACD,aAAS;AAAA,MACL;AAAA,MACA,CAAC,UAAiB;AACd,QAAC,MAAM,aAAa,EAA2B,QAAQ,CAAC,OAAO;AAC3D,4BAAkB,mBAAmB,OAAO;AAC5C,cAAI,OAAO,YAAY,GAAG,cAAc;AAAU;AAClD,cAAI;AACA,yBAAa,cAAc,GAAG,QAAQ,QAAQ;AAAA,UAGlD,SAAS,OAAO;AAAA,UAAC;AAAA,QACrB,CAAC;AAAA,MACL;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACjB;AACA,aAAS,cAAc,wBAAwB;AAC/C,QAAI,iBAAiB;AACrB,QAAI,EAAE,qBAAqB,iBAAiB;AACxC,YAAM,OAAQ,kBAAkB,YAAY;AAC5C,YAAM,kBAAkB,kBAAkB,IAAI,IACxC,OACA,mBAAmB,IAAI;AAC7B,UACI,oBAAoB,QACpB,UAAU,eAAe,MACpB,iBACP;AACE,cAAM,MAAM,iBAAiB,eAAe;AAC5C,yBACI,IAAI,cAAc,UAAU,IAAI,SAC1B,IAAI,WAAW,SACf;AAAA,MACd;AAEA,UAAI,cAAc,kBAAkB,iBAAiB;AACjD,cAAM,OAAO,gBAAgB,sBAAsB;AACnD,mBAAW,IAAI,KAAK;AACpB,mBAAW,IAAI,KAAK;AAAA,MACxB;AAAA,IACJ;AAEA,QAAI,cAAc,oBAAoB;AAClC,aAAO;AAAA,QACH,GAAG,IAAI,WAAW;AAAA,QAClB,GAAG,IAAI,WAAW;AAAA,QAClB,MAAM;AAAA,MACV;AAAA,IACJ;AAEA,QAAI,YAAY;AACZ,aAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MACV;AAAA,IACJ;AAEA,WAAO;AAAA,MACH,GAAG,IAAI,WAAW;AAAA,MAClB,GAAG,IAAI,WAAW;AAAA,MAClB,MAAM;AAAA,IACV;AAAA,EACJ;AACJ;",
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*/\nimport type { Middleware, MiddlewareState } from '@floating-ui/dom';\nimport {\n getContainingBlock,\n getWindow,\n isContainingBlock,\n} from '@floating-ui/utils/dom';\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\n\nexport const topLayerOverTransforms = (): Middleware => ({\n name: 'topLayer',\n async fn(middlewareArguments: MiddlewareState) {\n const {\n x,\n y,\n elements: { reference, floating },\n } = middlewareArguments;\n let onTopLayer = false;\n let topLayerIsFloating = false;\n let withinReference = false;\n const diffCoords = {\n x: 0,\n y: 0,\n };\n try {\n onTopLayer = onTopLayer || floating.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next 3 */\n } catch (error) {}\n topLayerIsFloating = onTopLayer;\n const dialogAncestorQueryEvent = new Event('floating-ui-dialog-test', {\n composed: true,\n bubbles: true,\n });\n floating.addEventListener(\n 'floating-ui-dialog-test',\n (event: Event) => {\n (event.composedPath() as unknown as Element[]).forEach((el) => {\n withinReference = withinReference || el === reference;\n if (el === floating || el.localName !== 'dialog') return;\n try {\n onTopLayer = onTopLayer || el.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next */\n } catch (error) {}\n });\n },\n { once: true }\n );\n floating.dispatchEvent(dialogAncestorQueryEvent);\n let overTransforms = false;\n if (!(reference instanceof VirtualTrigger)) {\n const root = (withinReference ? reference : floating) as Element;\n const containingBlock = isContainingBlock(root)\n ? root\n : getContainingBlock(root);\n if (\n containingBlock !== null &&\n getWindow(containingBlock) !==\n (containingBlock as unknown as Window)\n ) {\n const css = getComputedStyle(containingBlock);\n // The overlay is \"over transforms\" when the containing block uses specific CSS...\n overTransforms =\n // the `transform` property\n css.transform !== 'none' ||\n // the `filter` property for anything other than \"none\"\n (css.filter ? css.filter !== 'none' : false) ||\n // a value of \"paint\", \"layout\", \"strict\", or \"content\" for `contain`\n ['paint', 'layout', 'strict', 'content'].some((value) =>\n (css.contain || '').includes(value)\n );\n // overTransforms = true;\n }\n\n if (onTopLayer && overTransforms && containingBlock) {\n const rect = containingBlock.getBoundingClientRect();\n diffCoords.x = rect.x;\n diffCoords.y = rect.y;\n }\n }\n\n if (onTopLayer && topLayerIsFloating) {\n return {\n x: x + diffCoords.x,\n y: y + diffCoords.y,\n data: diffCoords,\n };\n }\n\n if (onTopLayer) {\n return {\n x,\n y,\n data: diffCoords,\n };\n }\n\n return {\n x: x - diffCoords.x,\n y: y - diffCoords.y,\n data: diffCoords,\n };\n },\n});\n"],
5
+ "mappings": ";AAYA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,sBAAsB;AAExB,aAAM,yBAAyB,OAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,GAAG,qBAAsC;AAC3C,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA,UAAU,EAAE,WAAW,SAAS;AAAA,IACpC,IAAI;AACJ,QAAI,aAAa;AACjB,QAAI,qBAAqB;AACzB,QAAI,kBAAkB;AACtB,UAAM,aAAa;AAAA,MACf,GAAG;AAAA,MACH,GAAG;AAAA,IACP;AACA,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,eAAe;AAAA,IAE/D,SAAS,OAAO;AAAA,IAAC;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,OAAO;AAAA,IAEvD,SAAS,OAAO;AAAA,IAAC;AACjB,QAAI;AACA,mBAAa,cAAc,SAAS,QAAQ,QAAQ;AAAA,IAGxD,SAAS,OAAO;AAAA,IAAC;AACjB,yBAAqB;AACrB,UAAM,2BAA2B,IAAI,MAAM,2BAA2B;AAAA,MAClE,UAAU;AAAA,MACV,SAAS;AAAA,IACb,CAAC;AACD,aAAS;AAAA,MACL;AAAA,MACA,CAAC,UAAiB;AACd,QAAC,MAAM,aAAa,EAA2B,QAAQ,CAAC,OAAO;AAC3D,4BAAkB,mBAAmB,OAAO;AAC5C,cAAI,OAAO,YAAY,GAAG,cAAc;AAAU;AAClD,cAAI;AACA,yBAAa,cAAc,GAAG,QAAQ,QAAQ;AAAA,UAGlD,SAAS,OAAO;AAAA,UAAC;AAAA,QACrB,CAAC;AAAA,MACL;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACjB;AACA,aAAS,cAAc,wBAAwB;AAC/C,QAAI,iBAAiB;AACrB,QAAI,EAAE,qBAAqB,iBAAiB;AACxC,YAAM,OAAQ,kBAAkB,YAAY;AAC5C,YAAM,kBAAkB,kBAAkB,IAAI,IACxC,OACA,mBAAmB,IAAI;AAC7B,UACI,oBAAoB,QACpB,UAAU,eAAe,MACpB,iBACP;AACE,cAAM,MAAM,iBAAiB,eAAe;AAE5C;AAAA,QAEI,IAAI,cAAc;AAAA,SAEjB,IAAI,SAAS,IAAI,WAAW,SAAS;AAAA,QAEtC,CAAC,SAAS,UAAU,UAAU,SAAS,EAAE;AAAA,UAAK,CAAC,WAC1C,IAAI,WAAW,IAAI,SAAS,KAAK;AAAA,QACtC;AAAA,MAER;AAEA,UAAI,cAAc,kBAAkB,iBAAiB;AACjD,cAAM,OAAO,gBAAgB,sBAAsB;AACnD,mBAAW,IAAI,KAAK;AACpB,mBAAW,IAAI,KAAK;AAAA,MACxB;AAAA,IACJ;AAEA,QAAI,cAAc,oBAAoB;AAClC,aAAO;AAAA,QACH,GAAG,IAAI,WAAW;AAAA,QAClB,GAAG,IAAI,WAAW;AAAA,QAClB,MAAM;AAAA,MACV;AAAA,IACJ;AAEA,QAAI,YAAY;AACZ,aAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MACV;AAAA,IACJ;AAEA,WAAO;AAAA,MACH,GAAG,IAAI,WAAW;AAAA,MAClB,GAAG,IAAI,WAAW;AAAA,MAClB,MAAM;AAAA,IACV;AAAA,EACJ;AACJ;",
6
6
  "names": []
7
7
  }
package/src/topLayerOverTransforms.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";import{getContainingBlock as g,getWindow as u,isContainingBlock as p}from"@floating-ui/utils/dom";import{VirtualTrigger as h}from"./VirtualTrigger.js";export const topLayerOverTransforms=()=>({name:"topLayer",async fn(m){const{x:i,y:s,elements:{reference:c,floating:r}}=m;let e=!1,f=!1,l=!1;const o={x:0,y:0};try{e=e||r.matches(":popover-open")}catch(n){}try{e=e||r.matches(":open")}catch(n){}try{e=e||r.matches(":modal")}catch(n){}f=e;const y=new Event("floating-ui-dialog-test",{composed:!0,bubbles:!0});r.addEventListener("floating-ui-dialog-test",n=>{n.composedPath().forEach(t=>{if(l=l||t===c,!(t===r||t.localName!=="dialog"))try{e=e||t.matches(":modal")}catch(a){}})},{once:!0}),r.dispatchEvent(y);let d=!1;if(!(c instanceof h)){const n=l?c:r,t=p(n)?n:g(n);if(t!==null&&u(t)!==t){const a=getComputedStyle(t);d=a.transform!=="none"||a.filter?a.filter!=="none":!1}if(e&&d&&t){const a=t.getBoundingClientRect();o.x=a.x,o.y=a.y}}return e&&f?{x:i+o.x,y:s+o.y,data:o}:e?{x:i,y:s,data:o}:{x:i-o.x,y:s-o.y,data:o}}});
1
+ "use strict";import{getContainingBlock as g,getWindow as p,isContainingBlock as h}from"@floating-ui/utils/dom";import{VirtualTrigger as w}from"./VirtualTrigger.js";export const topLayerOverTransforms=()=>({name:"topLayer",async fn(m){const{x:i,y:s,elements:{reference:c,floating:a}}=m;let e=!1,d=!1,l=!1;const o={x:0,y:0};try{e=e||a.matches(":popover-open")}catch(n){}try{e=e||a.matches(":open")}catch(n){}try{e=e||a.matches(":modal")}catch(n){}d=e;const y=new Event("floating-ui-dialog-test",{composed:!0,bubbles:!0});a.addEventListener("floating-ui-dialog-test",n=>{n.composedPath().forEach(t=>{if(l=l||t===c,!(t===a||t.localName!=="dialog"))try{e=e||t.matches(":modal")}catch(r){}})},{once:!0}),a.dispatchEvent(y);let f=!1;if(!(c instanceof w)){const n=l?c:a,t=h(n)?n:g(n);if(t!==null&&p(t)!==t){const r=getComputedStyle(t);f=r.transform!=="none"||(r.filter?r.filter!=="none":!1)||["paint","layout","strict","content"].some(u=>(r.contain||"").includes(u))}if(e&&f&&t){const r=t.getBoundingClientRect();o.x=r.x,o.y=r.y}}return e&&d?{x:i+o.x,y:s+o.y,data:o}:e?{x:i,y:s,data:o}:{x:i-o.x,y:s-o.y,data:o}}});
2
2
  //# sourceMappingURL=topLayerOverTransforms.js.map
package/src/topLayerOverTransforms.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["topLayerOverTransforms.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*/\nimport type { Middleware, MiddlewareState } from '@floating-ui/dom';\nimport {\n getContainingBlock,\n getWindow,\n isContainingBlock,\n} from '@floating-ui/utils/dom';\nimport { VirtualTrigger } from './VirtualTrigger.js';\n\nexport const topLayerOverTransforms = (): Middleware => ({\n name: 'topLayer',\n async fn(middlewareArguments: MiddlewareState) {\n const {\n x,\n y,\n elements: { reference, floating },\n } = middlewareArguments;\n let onTopLayer = false;\n let topLayerIsFloating = false;\n let withinReference = false;\n const diffCoords = {\n x: 0,\n y: 0,\n };\n try {\n onTopLayer = onTopLayer || floating.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next 3 */\n } catch (error) {}\n topLayerIsFloating = onTopLayer;\n const dialogAncestorQueryEvent = new Event('floating-ui-dialog-test', {\n composed: true,\n bubbles: true,\n });\n floating.addEventListener(\n 'floating-ui-dialog-test',\n (event: Event) => {\n (event.composedPath() as unknown as Element[]).forEach((el) => {\n withinReference = withinReference || el === reference;\n if (el === floating || el.localName !== 'dialog') return;\n try {\n onTopLayer = onTopLayer || el.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next */\n } catch (error) {}\n });\n },\n { once: true }\n );\n floating.dispatchEvent(dialogAncestorQueryEvent);\n let overTransforms = false;\n if (!(reference instanceof VirtualTrigger)) {\n const root = (withinReference ? reference : floating) as Element;\n const containingBlock = isContainingBlock(root)\n ? root\n : getContainingBlock(root);\n if (\n containingBlock !== null &&\n getWindow(containingBlock) !==\n (containingBlock as unknown as Window)\n ) {\n const css = getComputedStyle(containingBlock);\n overTransforms =\n css.transform !== 'none' || css.filter\n ? css.filter !== 'none'\n : false;\n }\n\n if (onTopLayer && overTransforms && containingBlock) {\n const rect = containingBlock.getBoundingClientRect();\n diffCoords.x = rect.x;\n diffCoords.y = rect.y;\n }\n }\n\n if (onTopLayer && topLayerIsFloating) {\n return {\n x: x + diffCoords.x,\n y: y + diffCoords.y,\n data: diffCoords,\n };\n }\n\n if (onTopLayer) {\n return {\n x,\n y,\n data: diffCoords,\n };\n }\n\n return {\n x: x - diffCoords.x,\n y: y - diffCoords.y,\n data: diffCoords,\n };\n },\n});\n"],
5
- "mappings": "aAYA,OACI,sBAAAA,EACA,aAAAC,EACA,qBAAAC,MACG,yBACP,OAAS,kBAAAC,MAAsB,sBAExB,aAAM,uBAAyB,KAAmB,CACrD,KAAM,WACN,MAAM,GAAGC,EAAsC,CAC3C,KAAM,CACF,EAAAC,EACA,EAAAC,EACA,SAAU,CAAE,UAAAC,EAAW,SAAAC,CAAS,CACpC,EAAIJ,EACJ,IAAIK,EAAa,GACbC,EAAqB,GACrBC,EAAkB,GACtB,MAAMC,EAAa,CACf,EAAG,EACH,EAAG,CACP,EACA,GAAI,CACAH,EAAaA,GAAcD,EAAS,QAAQ,eAAe,CAE/D,OAASK,EAAO,CAAC,CACjB,GAAI,CACAJ,EAAaA,GAAcD,EAAS,QAAQ,OAAO,CAEvD,OAASK,EAAO,CAAC,CACjB,GAAI,CACAJ,EAAaA,GAAcD,EAAS,QAAQ,QAAQ,CAGxD,OAASK,EAAO,CAAC,CACjBH,EAAqBD,EACrB,MAAMK,EAA2B,IAAI,MAAM,0BAA2B,CAClE,SAAU,GACV,QAAS,EACb,CAAC,EACDN,EAAS,iBACL,0BACCO,GAAiB,CACbA,EAAM,aAAa,EAA2B,QAASC,GAAO,CAE3D,GADAL,EAAkBA,GAAmBK,IAAOT,EACxC,EAAAS,IAAOR,GAAYQ,EAAG,YAAc,UACxC,GAAI,CACAP,EAAaA,GAAcO,EAAG,QAAQ,QAAQ,CAGlD,OAASH,EAAO,CAAC,CACrB,CAAC,CACL,EACA,CAAE,KAAM,EAAK,CACjB,EACAL,EAAS,cAAcM,CAAwB,EAC/C,IAAIG,EAAiB,GACrB,GAAI,EAAEV,aAAqBJ,GAAiB,CACxC,MAAMe,EAAQP,EAAkBJ,EAAYC,EACtCW,EAAkBjB,EAAkBgB,CAAI,EACxCA,EACAlB,EAAmBkB,CAAI,EAC7B,GACIC,IAAoB,MACpBlB,EAAUkB,CAAe,IACpBA,EACP,CACE,MAAMC,EAAM,iBAAiBD,CAAe,EAC5CF,EACIG,EAAI,YAAc,QAAUA,EAAI,OAC1BA,EAAI,SAAW,OACf,EACd,CAEA,GAAIX,GAAcQ,GAAkBE,EAAiB,CACjD,MAAME,EAAOF,EAAgB,sBAAsB,EACnDP,EAAW,EAAIS,EAAK,EACpBT,EAAW,EAAIS,EAAK,CACxB,CACJ,CAEA,OAAIZ,GAAcC,EACP,CACH,EAAGL,EAAIO,EAAW,EAClB,EAAGN,EAAIM,EAAW,EAClB,KAAMA,CACV,EAGAH,EACO,CACH,EAAAJ,EACA,EAAAC,EACA,KAAMM,CACV,EAGG,CACH,EAAGP,EAAIO,EAAW,EAClB,EAAGN,EAAIM,EAAW,EAClB,KAAMA,CACV,CACJ,CACJ",
6
- "names": ["getContainingBlock", "getWindow", "isContainingBlock", "VirtualTrigger", "middlewareArguments", "x", "y", "reference", "floating", "onTopLayer", "topLayerIsFloating", "withinReference", "diffCoords", "error", "dialogAncestorQueryEvent", "event", "el", "overTransforms", "root", "containingBlock", "css", "rect"]
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*/\nimport type { Middleware, MiddlewareState } from '@floating-ui/dom';\nimport {\n getContainingBlock,\n getWindow,\n isContainingBlock,\n} from '@floating-ui/utils/dom';\nimport { VirtualTrigger } from './VirtualTrigger.js';\n\nexport const topLayerOverTransforms = (): Middleware => ({\n name: 'topLayer',\n async fn(middlewareArguments: MiddlewareState) {\n const {\n x,\n y,\n elements: { reference, floating },\n } = middlewareArguments;\n let onTopLayer = false;\n let topLayerIsFloating = false;\n let withinReference = false;\n const diffCoords = {\n x: 0,\n y: 0,\n };\n try {\n onTopLayer = onTopLayer || floating.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n try {\n onTopLayer = onTopLayer || floating.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next 3 */\n } catch (error) {}\n topLayerIsFloating = onTopLayer;\n const dialogAncestorQueryEvent = new Event('floating-ui-dialog-test', {\n composed: true,\n bubbles: true,\n });\n floating.addEventListener(\n 'floating-ui-dialog-test',\n (event: Event) => {\n (event.composedPath() as unknown as Element[]).forEach((el) => {\n withinReference = withinReference || el === reference;\n if (el === floating || el.localName !== 'dialog') return;\n try {\n onTopLayer = onTopLayer || el.matches(':modal');\n // eslint-disable-next-line no-empty\n /* c8 ignore next */\n } catch (error) {}\n });\n },\n { once: true }\n );\n floating.dispatchEvent(dialogAncestorQueryEvent);\n let overTransforms = false;\n if (!(reference instanceof VirtualTrigger)) {\n const root = (withinReference ? reference : floating) as Element;\n const containingBlock = isContainingBlock(root)\n ? root\n : getContainingBlock(root);\n if (\n containingBlock !== null &&\n getWindow(containingBlock) !==\n (containingBlock as unknown as Window)\n ) {\n const css = getComputedStyle(containingBlock);\n // The overlay is \"over transforms\" when the containing block uses specific CSS...\n overTransforms =\n // the `transform` property\n css.transform !== 'none' ||\n // the `filter` property for anything other than \"none\"\n (css.filter ? css.filter !== 'none' : false) ||\n // a value of \"paint\", \"layout\", \"strict\", or \"content\" for `contain`\n ['paint', 'layout', 'strict', 'content'].some((value) =>\n (css.contain || '').includes(value)\n );\n // overTransforms = true;\n }\n\n if (onTopLayer && overTransforms && containingBlock) {\n const rect = containingBlock.getBoundingClientRect();\n diffCoords.x = rect.x;\n diffCoords.y = rect.y;\n }\n }\n\n if (onTopLayer && topLayerIsFloating) {\n return {\n x: x + diffCoords.x,\n y: y + diffCoords.y,\n data: diffCoords,\n };\n }\n\n if (onTopLayer) {\n return {\n x,\n y,\n data: diffCoords,\n };\n }\n\n return {\n x: x - diffCoords.x,\n y: y - diffCoords.y,\n data: diffCoords,\n };\n },\n});\n"],
5
+ "mappings": "aAYA,OACI,sBAAAA,EACA,aAAAC,EACA,qBAAAC,MACG,yBACP,OAAS,kBAAAC,MAAsB,sBAExB,aAAM,uBAAyB,KAAmB,CACrD,KAAM,WACN,MAAM,GAAGC,EAAsC,CAC3C,KAAM,CACF,EAAAC,EACA,EAAAC,EACA,SAAU,CAAE,UAAAC,EAAW,SAAAC,CAAS,CACpC,EAAIJ,EACJ,IAAIK,EAAa,GACbC,EAAqB,GACrBC,EAAkB,GACtB,MAAMC,EAAa,CACf,EAAG,EACH,EAAG,CACP,EACA,GAAI,CACAH,EAAaA,GAAcD,EAAS,QAAQ,eAAe,CAE/D,OAASK,EAAO,CAAC,CACjB,GAAI,CACAJ,EAAaA,GAAcD,EAAS,QAAQ,OAAO,CAEvD,OAASK,EAAO,CAAC,CACjB,GAAI,CACAJ,EAAaA,GAAcD,EAAS,QAAQ,QAAQ,CAGxD,OAASK,EAAO,CAAC,CACjBH,EAAqBD,EACrB,MAAMK,EAA2B,IAAI,MAAM,0BAA2B,CAClE,SAAU,GACV,QAAS,EACb,CAAC,EACDN,EAAS,iBACL,0BACCO,GAAiB,CACbA,EAAM,aAAa,EAA2B,QAASC,GAAO,CAE3D,GADAL,EAAkBA,GAAmBK,IAAOT,EACxC,EAAAS,IAAOR,GAAYQ,EAAG,YAAc,UACxC,GAAI,CACAP,EAAaA,GAAcO,EAAG,QAAQ,QAAQ,CAGlD,OAASH,EAAO,CAAC,CACrB,CAAC,CACL,EACA,CAAE,KAAM,EAAK,CACjB,EACAL,EAAS,cAAcM,CAAwB,EAC/C,IAAIG,EAAiB,GACrB,GAAI,EAAEV,aAAqBJ,GAAiB,CACxC,MAAMe,EAAQP,EAAkBJ,EAAYC,EACtCW,EAAkBjB,EAAkBgB,CAAI,EACxCA,EACAlB,EAAmBkB,CAAI,EAC7B,GACIC,IAAoB,MACpBlB,EAAUkB,CAAe,IACpBA,EACP,CACE,MAAMC,EAAM,iBAAiBD,CAAe,EAE5CF,EAEIG,EAAI,YAAc,SAEjBA,EAAI,OAASA,EAAI,SAAW,OAAS,KAEtC,CAAC,QAAS,SAAU,SAAU,SAAS,EAAE,KAAMC,IAC1CD,EAAI,SAAW,IAAI,SAASC,CAAK,CACtC,CAER,CAEA,GAAIZ,GAAcQ,GAAkBE,EAAiB,CACjD,MAAMG,EAAOH,EAAgB,sBAAsB,EACnDP,EAAW,EAAIU,EAAK,EACpBV,EAAW,EAAIU,EAAK,CACxB,CACJ,CAEA,OAAIb,GAAcC,EACP,CACH,EAAGL,EAAIO,EAAW,EAClB,EAAGN,EAAIM,EAAW,EAClB,KAAMA,CACV,EAGAH,EACO,CACH,EAAAJ,EACA,EAAAC,EACA,KAAMM,CACV,EAGG,CACH,EAAGP,EAAIO,EAAW,EAClB,EAAGN,EAAIM,EAAW,EAClB,KAAMA,CACV,CACJ,CACJ",
6
+ "names": ["getContainingBlock", "getWindow", "isContainingBlock", "VirtualTrigger", "middlewareArguments", "x", "y", "reference", "floating", "onTopLayer", "topLayerIsFloating", "withinReference", "diffCoords", "error", "dialogAncestorQueryEvent", "event", "el", "overTransforms", "root", "containingBlock", "css", "value", "rect"]
7
7
  }
package/stories/overlay-element.stories.js CHANGED
@@ -122,6 +122,46 @@ longpress.args = {
122
122
  placement: "right",
123
123
  type: "auto"
124
124
  };
125
+ export const transformed = (args) => html`
126
+ <style>
127
+ .transformed {
128
+ transform: translateX(-50%);
129
+ position: absolute;
130
+ inset: auto;
131
+ inset-inline-start: 200px;
132
+ inset-block-start: 200px;
133
+ inline-size: 100px;
134
+ block-size: 50px;
135
+ }
136
+ </style>
137
+ <div class="transformed">${Template(args)}</div>
138
+ `;
139
+ transformed.args = {
140
+ interaction: "click",
141
+ placement: "right",
142
+ type: "auto"
143
+ };
144
+ export const contained = (args) => html`
145
+ <style>
146
+ .contained {
147
+ contain: strict;
148
+ position: absolute;
149
+ inset: auto;
150
+ inset-inline-start: 200px;
151
+ inset-block-start: 200px;
152
+ inline-size: 200px;
153
+ block-size: 50px;
154
+ padding-block: 75px;
155
+ padding-inline-start: 300px;
156
+ }
157
+ </style>
158
+ <div class="contained">${Template(args)}</div>
159
+ `;
160
+ contained.args = {
161
+ interaction: "click",
162
+ placement: "right",
163
+ type: "auto"
164
+ };
125
165
  export const all = ({ delayed }) => html`
126
166
  <sp-action-button id="trigger" hold-affordance>
127
167
  Open the overlay
package/stories/overlay-element.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["overlay-element.stories.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\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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';\nimport { Placement } from '@floating-ui/dom';\nimport { OverlayTypes } from '../src/overlay-types.js';\nimport { notAgain } from '../../dialog/stories/dialog-base.stories.js';\n\nexport default {\n title: 'Overlay Element',\n component: 'sp-overlay',\n args: {\n open: true,\n delayed: false,\n },\n argTypes: {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the second accordion item is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n delayed: {\n name: 'delayed',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltips are delayed.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ntype Properties = {\n delayed: boolean;\n interaction: 'click' | 'hover' | 'longpress';\n open?: boolean;\n placement?: Placement;\n type?: OverlayTypes;\n};\n\nconst Template = ({\n interaction,\n open,\n placement,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n offset=\"-10\"\n >\n <sp-popover dialog>\n <p>\n Content goes here.\n ${type === 'modal' || type === 'page'\n ? html`\n Or, a link,\n <sp-link\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n >\n Spectrum Web Components\n </sp-link>\n .\n `\n : ''}\n </p>\n </sp-popover>\n </sp-overlay>\n`;\n\nexport const modal = (args: Properties): TemplateResult => Template(args);\nmodal.args = {\n interaction: 'click',\n placement: 'right',\n type: 'modal',\n};\n\nexport const page = ({\n interaction,\n open,\n placement,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n >\n ${notAgain()}\n </sp-overlay>\n`;\npage.args = {\n interaction: 'click',\n placement: 'right',\n type: 'page',\n};\n\nexport const click = (args: Properties): TemplateResult => Template(args);\nclick.args = {\n interaction: 'click',\n placement: 'right',\n type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n interaction: 'hover',\n placement: 'right',\n};\n\nexport const longpress = (args: Properties): TemplateResult => Template(args);\nlongpress.args = {\n interaction: 'longpress',\n placement: 'right',\n type: 'auto',\n};\n\nexport const all = ({ delayed }: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\" hold-affordance>\n Open the overlay\n </sp-action-button>\n <sp-overlay trigger=\"trigger@click\" type=\"auto\" placement=\"right\">\n <sp-popover dialog>Click content</sp-popover>\n </sp-overlay>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger@hover\" type=\"hint\">\n <sp-tooltip>Hover content</sp-tooltip>\n </sp-overlay>\n <sp-overlay trigger=\"trigger@longpress\" type=\"auto\" placement=\"right\">\n <sp-popover dialog>Longpress content</sp-popover>\n </sp-overlay>\n`;\n\nexport const actionGroup = ({ delayed }: Properties): TemplateResult => {\n const popoverOffset = [6, -13] as [number, number];\n return html`\n <style>\n sp-popover sp-action-group {\n padding: calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) *\n 0.75\n )\n calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n );\n }\n .root {\n inset-inline-end: 0em;\n inset-block-start: 3em;\n padding-block-end: 3em;\n }\n .root > sp-action-group > sp-action-button,\n .root > sp-action-group > sp-action-menu {\n top: 3em;\n position: relative;\n }\n </style>\n <sp-popover open class=\"root\">\n <sp-action-group vertical quiet emphasized selects=\"single\">\n <sp-action-button id=\"trigger-1\" hold-affordance>\n <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-2\" hold-affordance>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-3\" hold-affordance>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n <sp-action-menu placement=\"left\">\n <sp-menu-group id=\"cms\">\n <span slot=\"header\">cms</span>\n <sp-menu-item value=\"updateAllSiteContent\">\n Update All Content\n </sp-menu-item>\n <sp-menu-item value=\"refreshAllXDs\">\n Refresh All XDs\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"ssg\">\n <span slot=\"header\">ssg</span>\n <sp-menu-item value=\"clearCache\">\n Clear Cache\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"vrt\">\n <span slot=\"header\">vrt</span>\n <sp-menu-item value=\"vrt-contributions\">\n Contributions\n </sp-menu-item>\n <sp-menu-item value=\"vrt-internal\">\n Internal\n </sp-menu-item>\n <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n <sp-menu-item value=\"vrt-patterns\">\n Patterns\n </sp-menu-item>\n <sp-menu-item value=\"vrt\">All</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group id=\"misc\">\n <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n </sp-action-group>\n </sp-popover>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-1@hover\" type=\"hint\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-1@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-2@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay\n ?delayed=${delayed}\n trigger=\"trigger-3@hover\"\n type=\"hint\"\n open\n >\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-3@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n `;\n};\n\nexport const actionGroupWithFilters = ({\n delayed,\n}: Properties): TemplateResult => {\n const popoverOffset = [6, -13] as [number, number];\n return html`\n <style>\n sp-popover sp-action-group {\n padding: calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) *\n 0.75\n )\n calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n );\n }\n .root {\n inset-inline-end: 0em;\n inset-block-start: 3em;\n padding-block-end: 3em;\n overflow: hidden;\n }\n .root > sp-action-group > sp-action-button,\n .root > sp-action-group > sp-action-menu {\n top: 3em;\n position: relative;\n }\n sp-action-button,\n sp-action-menu {\n background-image: linear-gradient(\n rgba(125, 125, 125, 0.2),\n rgba(125, 125, 125, 0.2)\n );\n background-blend-mode: multiply;\n filter: brightness(1) saturate(1);\n }\n </style>\n <p>\n This story outlines some CSS usage that is not yet covered by the\n placement calculations within the Overlay API.\n </p>\n <sp-popover open class=\"root\">\n <sp-action-group vertical quiet emphasized selects=\"single\">\n <sp-action-button id=\"trigger-1\" hold-affordance>\n <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n <sp-tooltip ?delayed=${delayed} self-managed>\n Hover\n </sp-tooltip>\n <sp-overlay\n trigger=\"trigger-1@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select\n slot=\"icon\"\n ></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n </sp-action-button>\n <sp-action-button id=\"trigger-2\" hold-affordance>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-3\" hold-affordance>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n <sp-tooltip ?delayed=${delayed} self-managed>\n Hover\n </sp-tooltip>\n </sp-action-button>\n <sp-action-menu>\n <sp-menu-group id=\"cms\">\n <span slot=\"header\">cms</span>\n <sp-menu-item value=\"updateAllSiteContent\">\n Update All Content\n </sp-menu-item>\n <sp-menu-item value=\"refreshAllXDs\">\n Refresh All XDs\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"ssg\">\n <span slot=\"header\">ssg</span>\n <sp-menu-item value=\"clearCache\">\n Clear Cache\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"vrt\">\n <span slot=\"header\">vrt</span>\n <sp-menu-item value=\"vrt-contributions\">\n Contributions\n </sp-menu-item>\n <sp-menu-item value=\"vrt-internal\">\n Internal\n </sp-menu-item>\n <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n <sp-menu-item value=\"vrt-patterns\">\n Patterns\n </sp-menu-item>\n <sp-menu-item value=\"vrt\">All</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group id=\"misc\">\n <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n </sp-action-group>\n </sp-popover>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-2@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-3@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n `;\n};\n"],
5
- "mappings": "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",
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\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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';\nimport { Placement } from '@floating-ui/dom';\nimport { OverlayTypes } from '../src/overlay-types.js';\nimport { notAgain } from '../../dialog/stories/dialog-base.stories.js';\n\nexport default {\n title: 'Overlay Element',\n component: 'sp-overlay',\n args: {\n open: true,\n delayed: false,\n },\n argTypes: {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the second accordion item is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n delayed: {\n name: 'delayed',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltips are delayed.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ntype Properties = {\n delayed: boolean;\n interaction: 'click' | 'hover' | 'longpress';\n open?: boolean;\n placement?: Placement;\n type?: OverlayTypes;\n};\n\nconst Template = ({\n interaction,\n open,\n placement,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n offset=\"-10\"\n >\n <sp-popover dialog>\n <p>\n Content goes here.\n ${type === 'modal' || type === 'page'\n ? html`\n Or, a link,\n <sp-link\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n >\n Spectrum Web Components\n </sp-link>\n .\n `\n : ''}\n </p>\n </sp-popover>\n </sp-overlay>\n`;\n\nexport const modal = (args: Properties): TemplateResult => Template(args);\nmodal.args = {\n interaction: 'click',\n placement: 'right',\n type: 'modal',\n};\n\nexport const page = ({\n interaction,\n open,\n placement,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">Open the overlay</sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n >\n ${notAgain()}\n </sp-overlay>\n`;\npage.args = {\n interaction: 'click',\n placement: 'right',\n type: 'page',\n};\n\nexport const click = (args: Properties): TemplateResult => Template(args);\nclick.args = {\n interaction: 'click',\n placement: 'right',\n type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n interaction: 'hover',\n placement: 'right',\n};\n\nexport const longpress = (args: Properties): TemplateResult => Template(args);\nlongpress.args = {\n interaction: 'longpress',\n placement: 'right',\n type: 'auto',\n};\n\nexport const transformed = (args: Properties): TemplateResult => html`\n <style>\n .transformed {\n transform: translateX(-50%);\n position: absolute;\n inset: auto;\n inset-inline-start: 200px;\n inset-block-start: 200px;\n inline-size: 100px;\n block-size: 50px;\n }\n </style>\n <div class=\"transformed\">${Template(args)}</div>\n`;\ntransformed.args = {\n interaction: 'click',\n placement: 'right',\n type: 'auto',\n};\n\nexport const contained = (args: Properties): TemplateResult => html`\n <style>\n .contained {\n contain: strict;\n position: absolute;\n inset: auto;\n inset-inline-start: 200px;\n inset-block-start: 200px;\n inline-size: 200px;\n block-size: 50px;\n padding-block: 75px;\n padding-inline-start: 300px;\n }\n </style>\n <div class=\"contained\">${Template(args)}</div>\n`;\ncontained.args = {\n interaction: 'click',\n placement: 'right',\n type: 'auto',\n};\n\nexport const all = ({ delayed }: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\" hold-affordance>\n Open the overlay\n </sp-action-button>\n <sp-overlay trigger=\"trigger@click\" type=\"auto\" placement=\"right\">\n <sp-popover dialog>Click content</sp-popover>\n </sp-overlay>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger@hover\" type=\"hint\">\n <sp-tooltip>Hover content</sp-tooltip>\n </sp-overlay>\n <sp-overlay trigger=\"trigger@longpress\" type=\"auto\" placement=\"right\">\n <sp-popover dialog>Longpress content</sp-popover>\n </sp-overlay>\n`;\n\nexport const actionGroup = ({ delayed }: Properties): TemplateResult => {\n const popoverOffset = [6, -13] as [number, number];\n return html`\n <style>\n sp-popover sp-action-group {\n padding: calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) *\n 0.75\n )\n calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n );\n }\n .root {\n inset-inline-end: 0em;\n inset-block-start: 3em;\n padding-block-end: 3em;\n }\n .root > sp-action-group > sp-action-button,\n .root > sp-action-group > sp-action-menu {\n top: 3em;\n position: relative;\n }\n </style>\n <sp-popover open class=\"root\">\n <sp-action-group vertical quiet emphasized selects=\"single\">\n <sp-action-button id=\"trigger-1\" hold-affordance>\n <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-2\" hold-affordance>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-3\" hold-affordance>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n <sp-action-menu placement=\"left\">\n <sp-menu-group id=\"cms\">\n <span slot=\"header\">cms</span>\n <sp-menu-item value=\"updateAllSiteContent\">\n Update All Content\n </sp-menu-item>\n <sp-menu-item value=\"refreshAllXDs\">\n Refresh All XDs\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"ssg\">\n <span slot=\"header\">ssg</span>\n <sp-menu-item value=\"clearCache\">\n Clear Cache\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"vrt\">\n <span slot=\"header\">vrt</span>\n <sp-menu-item value=\"vrt-contributions\">\n Contributions\n </sp-menu-item>\n <sp-menu-item value=\"vrt-internal\">\n Internal\n </sp-menu-item>\n <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n <sp-menu-item value=\"vrt-patterns\">\n Patterns\n </sp-menu-item>\n <sp-menu-item value=\"vrt\">All</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group id=\"misc\">\n <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n </sp-action-group>\n </sp-popover>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-1@hover\" type=\"hint\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-1@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-2@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay\n ?delayed=${delayed}\n trigger=\"trigger-3@hover\"\n type=\"hint\"\n open\n >\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-3@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n `;\n};\n\nexport const actionGroupWithFilters = ({\n delayed,\n}: Properties): TemplateResult => {\n const popoverOffset = [6, -13] as [number, number];\n return html`\n <style>\n sp-popover sp-action-group {\n padding: calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) *\n 0.75\n )\n calc(\n var(--spectrum-actiongroup-vertical-spacing-regular) / 2\n );\n }\n .root {\n inset-inline-end: 0em;\n inset-block-start: 3em;\n padding-block-end: 3em;\n overflow: hidden;\n }\n .root > sp-action-group > sp-action-button,\n .root > sp-action-group > sp-action-menu {\n top: 3em;\n position: relative;\n }\n sp-action-button,\n sp-action-menu {\n background-image: linear-gradient(\n rgba(125, 125, 125, 0.2),\n rgba(125, 125, 125, 0.2)\n );\n background-blend-mode: multiply;\n filter: brightness(1) saturate(1);\n }\n </style>\n <p>\n This story outlines some CSS usage that is not yet covered by the\n placement calculations within the Overlay API.\n </p>\n <sp-popover open class=\"root\">\n <sp-action-group vertical quiet emphasized selects=\"single\">\n <sp-action-button id=\"trigger-1\" hold-affordance>\n <sp-icon-anchor-select slot=\"icon\"></sp-icon-anchor-select>\n <sp-tooltip ?delayed=${delayed} self-managed>\n Hover\n </sp-tooltip>\n <sp-overlay\n trigger=\"trigger-1@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select\n slot=\"icon\"\n ></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n </sp-action-button>\n <sp-action-button id=\"trigger-2\" hold-affordance>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button id=\"trigger-3\" hold-affordance>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n <sp-tooltip ?delayed=${delayed} self-managed>\n Hover\n </sp-tooltip>\n </sp-action-button>\n <sp-action-menu>\n <sp-menu-group id=\"cms\">\n <span slot=\"header\">cms</span>\n <sp-menu-item value=\"updateAllSiteContent\">\n Update All Content\n </sp-menu-item>\n <sp-menu-item value=\"refreshAllXDs\">\n Refresh All XDs\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"ssg\">\n <span slot=\"header\">ssg</span>\n <sp-menu-item value=\"clearCache\">\n Clear Cache\n </sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"vrt\">\n <span slot=\"header\">vrt</span>\n <sp-menu-item value=\"vrt-contributions\">\n Contributions\n </sp-menu-item>\n <sp-menu-item value=\"vrt-internal\">\n Internal\n </sp-menu-item>\n <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n <sp-menu-item value=\"vrt-patterns\">\n Patterns\n </sp-menu-item>\n <sp-menu-item value=\"vrt\">All</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group id=\"misc\">\n <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n </sp-action-group>\n </sp-popover>\n <sp-overlay ?delayed=${delayed} trigger=\"trigger-2@hover\" type=\"hint\">\n <sp-tooltip>Hover</sp-tooltip>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-2@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n <sp-overlay\n trigger=\"trigger-3@longpress\"\n type=\"auto\"\n placement=\"right-start\"\n .offset=${popoverOffset}\n >\n <sp-popover tip>\n <sp-action-group vertical quiet>\n <sp-action-button>\n <sp-icon-anchor-select\n slot=\"icon\"\n ></sp-icon-anchor-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-polygon-select\n slot=\"icon\"\n ></sp-icon-polygon-select>\n </sp-action-button>\n <sp-action-button>\n <sp-icon-rect-select slot=\"icon\"></sp-icon-rect-select>\n </sp-action-button>\n </sp-action-group>\n </sp-popover>\n </sp-overlay>\n `;\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/test/overlay-lifecycle.test.js CHANGED
@@ -5,7 +5,8 @@ import {
5
5
  fixture,
6
6
  html,
7
7
  nextFrame,
8
- oneEvent
8
+ oneEvent,
9
+ waitUntil
9
10
  } from "@open-wc/testing";
10
11
  import "@spectrum-web-components/tooltip/sp-tooltip.js";
11
12
  import "@spectrum-web-components/action-button/sp-action-button.js";
@@ -48,15 +49,19 @@ describe("Overlay Trigger - accessible hover content management", () => {
48
49
  </overlay-trigger>
49
50
  <div id="descriptor">I'm a description!</div>
50
51
  `);
51
- await nextFrame();
52
- await nextFrame();
53
52
  const trigger = el.querySelector('[slot="trigger"]');
54
- const tooptip = el.querySelector(
53
+ const tooltip = el.querySelector(
55
54
  '[slot="hover-content"]'
56
55
  );
57
56
  await elementUpdated(el);
57
+ await nextFrame();
58
+ await nextFrame();
59
+ await waitUntil(
60
+ () => tooltip.id,
61
+ "Tooltip never published an ID for itself"
62
+ );
58
63
  expect(trigger.getAttribute("aria-describedby")).to.equal(
59
- `descriptor ${tooptip.id}`
64
+ `descriptor ${tooltip.id}`
60
65
  );
61
66
  trigger.remove();
62
67
  await nextFrame();
@@ -74,11 +79,17 @@ describe("Overlay Trigger - accessible hover content management", () => {
74
79
  </overlay-trigger>
75
80
  `);
76
81
  const trigger = el.querySelector('[slot="trigger"]');
77
- const tooptip = el.querySelector(
82
+ const tooltip = el.querySelector(
78
83
  '[slot="hover-content"]'
79
84
  );
80
85
  await elementUpdated(el);
81
- expect(trigger.getAttribute("aria-describedby")).to.equal(tooptip.id);
86
+ await nextFrame();
87
+ await nextFrame();
88
+ await waitUntil(
89
+ () => tooltip.id,
90
+ "Tooltip never published an ID for itself"
91
+ );
92
+ expect(trigger.getAttribute("aria-describedby")).to.equal(tooltip.id);
82
93
  trigger.remove();
83
94
  await nextFrame();
84
95
  expect(trigger.getAttribute("aria-describedby")).to.be.null;
package/test/overlay-lifecycle.test.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["overlay-lifecycle.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 {\n elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n oneEvent,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { OverlayTrigger } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { a11ySnapshot, findAccessibilityNode } from '@web/test-runner-commands';\nimport { Tooltip } from '@spectrum-web-components/tooltip';\n\ndescribe('Overlay Trigger - accessible hover content management', () => {\n it('accessibly describes trigger content with hover content', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger placement=\"right-start\">\n <sp-action-button slot=\"trigger\">\n Button with Tooltip\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n Described by this content on focus/hover. 1\n </sp-tooltip>\n </overlay-trigger>\n `);\n\n await elementUpdated(el);\n\n expect(el.open).to.be.undefined;\n type DescribedNode = {\n name: string;\n description: string;\n };\n const snapshot = (await a11ySnapshot(\n {}\n )) as unknown as DescribedNode & {\n children: DescribedNode[];\n };\n expect(\n findAccessibilityNode<DescribedNode>(\n snapshot,\n (node) =>\n node.name === 'Button with Tooltip' &&\n typeof node.description === 'undefined'\n ),\n '`name`ed with no `description`'\n );\n });\n it('gardens `aria-describedby` in its target', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger placement=\"right-start\">\n <sp-action-button slot=\"trigger\" aria-describedby=\"descriptor\">\n Button with Tooltip\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\" delayed>\n Described by this content on focus/hover. 2\n </sp-tooltip>\n </overlay-trigger>\n <div id=\"descriptor\">I'm a description!</div>\n `);\n\n await nextFrame();\n await nextFrame();\n\n const trigger = el.querySelector('[slot=\"trigger\"]') as HTMLElement;\n const tooptip = el.querySelector(\n '[slot=\"hover-content\"]'\n ) as HTMLElement;\n\n await elementUpdated(el);\n\n expect(trigger.getAttribute('aria-describedby')).to.equal(\n `descriptor ${tooptip.id}`\n );\n\n trigger.remove();\n\n // slot change timing\n await nextFrame();\n\n expect(trigger.getAttribute('aria-describedby')).to.equal('descriptor');\n });\n it('applies `aria-describedby` attribute', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger placement=\"right-start\">\n <sp-action-button slot=\"trigger\">\n Button with Tooltip\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\" delayed>\n Described by this content on focus/hover. 2\n </sp-tooltip>\n </overlay-trigger>\n `);\n\n const trigger = el.querySelector('[slot=\"trigger\"]') as HTMLElement;\n const tooptip = el.querySelector(\n '[slot=\"hover-content\"]'\n ) as HTMLElement;\n\n await elementUpdated(el);\n\n expect(trigger.getAttribute('aria-describedby')).to.equal(tooptip.id);\n\n trigger.remove();\n\n // slot change timing\n await nextFrame();\n\n expect(trigger.getAttribute('aria-describedby')).to.be.null;\n });\n it('does not duplicate `aria-describedby` attribute', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <div>\n <sp-action-button slot=\"trigger\">\n Button with Tooltip\n </sp-action-button>\n <overlay-trigger placement=\"right-start\">\n <sp-tooltip slot=\"hover-content\" delayed>\n Described by this content on focus/hover. 2\n </sp-tooltip>\n </overlay-trigger>\n </div>\n `);\n\n const trigger = el.querySelector('[slot=\"trigger\"]') as HTMLElement;\n const tooltip = el.querySelector('sp-tooltip') as Tooltip;\n const overlay = el.querySelector('overlay-trigger') as OverlayTrigger;\n\n trigger.setAttribute('aria-describedby', tooltip.id);\n overlay.append(trigger);\n\n await elementUpdated(el);\n expect(trigger.getAttribute('aria-describedby')).to.equal(tooltip.id);\n expect(el.open).to.be.undefined;\n\n const opened = oneEvent(el, 'sp-opened');\n trigger.dispatchEvent(\n new FocusEvent('focusin', { bubbles: true, composed: true })\n );\n await opened;\n\n expect(trigger.getAttribute('aria-describedby')).to.equal(tooltip.id);\n\n const closed = oneEvent(el, 'sp-closed');\n trigger.dispatchEvent(\n new FocusEvent('focusout', { bubbles: true, composed: true })\n );\n await closed;\n\n expect(trigger.getAttribute('aria-describedby')).to.equal(tooltip.id);\n });\n});\n"],
5
- "mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,OAAO;AACP,OAAO;AAEP,OAAO;AACP,SAAS,cAAc,6BAA6B;AAGpD,SAAS,yDAAyD,MAAM;AACpE,KAAG,2DAA2D,YAAY;AACtE,UAAM,KAAK,MAAM,QAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SASxC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,IAAI,EAAE,GAAG,GAAG;AAKtB,UAAM,WAAY,MAAM;AAAA,MACpB,CAAC;AAAA,IACL;AAGA;AAAA,MACI;AAAA,QACI;AAAA,QACA,CAAC,SACG,KAAK,SAAS,yBACd,OAAO,KAAK,gBAAgB;AAAA,MACpC;AAAA,MACA;AAAA,IACJ;AAAA,EACJ,CAAC;AACD,KAAG,4CAA4C,YAAY;AACvD,UAAM,KAAK,MAAM,QAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAUxC;AAED,UAAM,UAAU;AAChB,UAAM,UAAU;AAEhB,UAAM,UAAU,GAAG,cAAc,kBAAkB;AACnD,UAAM,UAAU,GAAG;AAAA,MACf;AAAA,IACJ;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,QAAQ,aAAa,kBAAkB,CAAC,EAAE,GAAG;AAAA,MAChD,cAAc,QAAQ,EAAE;AAAA,IAC5B;AAEA,YAAQ,OAAO;AAGf,UAAM,UAAU;AAEhB,WAAO,QAAQ,aAAa,kBAAkB,CAAC,EAAE,GAAG,MAAM,YAAY;AAAA,EAC1E,CAAC;AACD,KAAG,wCAAwC,YAAY;AACnD,UAAM,KAAK,MAAM,QAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SASxC;AAED,UAAM,UAAU,GAAG,cAAc,kBAAkB;AACnD,UAAM,UAAU,GAAG;AAAA,MACf;AAAA,IACJ;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,QAAQ,aAAa,kBAAkB,CAAC,EAAE,GAAG,MAAM,QAAQ,EAAE;AAEpE,YAAQ,OAAO;AAGf,UAAM,UAAU;AAEhB,WAAO,QAAQ,aAAa,kBAAkB,CAAC,EAAE,GAAG,GAAG;AAAA,EAC3D,CAAC;AACD,KAAG,mDAAmD,YAAY;AAC9D,UAAM,KAAK,MAAM,QAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAWxC;AAED,UAAM,UAAU,GAAG,cAAc,kBAAkB;AACnD,UAAM,UAAU,GAAG,cAAc,YAAY;AAC7C,UAAM,UAAU,GAAG,cAAc,iBAAiB;AAElD,YAAQ,aAAa,oBAAoB,QAAQ,EAAE;AACnD,YAAQ,OAAO,OAAO;AAEtB,UAAM,eAAe,EAAE;AACvB,WAAO,QAAQ,aAAa,kBAAkB,CAAC,EAAE,GAAG,MAAM,QAAQ,EAAE;AACpE,WAAO,GAAG,IAAI,EAAE,GAAG,GAAG;AAEtB,UAAM,SAAS,SAAS,IAAI,WAAW;AACvC,YAAQ;AAAA,MACJ,IAAI,WAAW,WAAW,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,IAC/D;AACA,UAAM;AAEN,WAAO,QAAQ,aAAa,kBAAkB,CAAC,EAAE,GAAG,MAAM,QAAQ,EAAE;AAEpE,UAAM,SAAS,SAAS,IAAI,WAAW;AACvC,YAAQ;AAAA,MACJ,IAAI,WAAW,YAAY,EAAE,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,IAChE;AACA,UAAM;AAEN,WAAO,QAAQ,aAAa,kBAAkB,CAAC,EAAE,GAAG,MAAM,QAAQ,EAAE;AAAA,EACxE,CAAC;AACL,CAAC;",
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 {\n elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n oneEvent,\n waitUntil,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { OverlayTrigger } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { a11ySnapshot, findAccessibilityNode } from '@web/test-runner-commands';\nimport { Tooltip } from '@spectrum-web-components/tooltip';\n\ndescribe('Overlay Trigger - accessible hover content management', () => {\n it('accessibly describes trigger content with hover content', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger placement=\"right-start\">\n <sp-action-button slot=\"trigger\">\n Button with Tooltip\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n Described by this content on focus/hover. 1\n </sp-tooltip>\n </overlay-trigger>\n `);\n\n await elementUpdated(el);\n\n expect(el.open).to.be.undefined;\n type DescribedNode = {\n name: string;\n description: string;\n };\n const snapshot = (await a11ySnapshot(\n {}\n )) as unknown as DescribedNode & {\n children: DescribedNode[];\n };\n expect(\n findAccessibilityNode<DescribedNode>(\n snapshot,\n (node) =>\n node.name === 'Button with Tooltip' &&\n typeof node.description === 'undefined'\n ),\n '`name`ed with no `description`'\n );\n });\n it('gardens `aria-describedby` in its target', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger placement=\"right-start\">\n <sp-action-button slot=\"trigger\" aria-describedby=\"descriptor\">\n Button with Tooltip\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\" delayed>\n Described by this content on focus/hover. 2\n </sp-tooltip>\n </overlay-trigger>\n <div id=\"descriptor\">I'm a description!</div>\n `);\n\n const trigger = el.querySelector('[slot=\"trigger\"]') as HTMLElement;\n const tooltip = el.querySelector(\n '[slot=\"hover-content\"]'\n ) as HTMLElement;\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n await waitUntil(\n () => tooltip.id,\n 'Tooltip never published an ID for itself'\n );\n\n expect(trigger.getAttribute('aria-describedby')).to.equal(\n `descriptor ${tooltip.id}`\n );\n\n trigger.remove();\n\n // slot change timing\n await nextFrame();\n\n expect(trigger.getAttribute('aria-describedby')).to.equal('descriptor');\n });\n it('applies `aria-describedby` attribute', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger placement=\"right-start\">\n <sp-action-button slot=\"trigger\">\n Button with Tooltip\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\" delayed>\n Described by this content on focus/hover. 2\n </sp-tooltip>\n </overlay-trigger>\n `);\n\n const trigger = el.querySelector('[slot=\"trigger\"]') as HTMLElement;\n const tooltip = el.querySelector(\n '[slot=\"hover-content\"]'\n ) as HTMLElement;\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n await waitUntil(\n () => tooltip.id,\n 'Tooltip never published an ID for itself'\n );\n\n expect(trigger.getAttribute('aria-describedby')).to.equal(tooltip.id);\n\n trigger.remove();\n\n // slot change timing\n await nextFrame();\n\n expect(trigger.getAttribute('aria-describedby')).to.be.null;\n });\n it('does not duplicate `aria-describedby` attribute', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <div>\n <sp-action-button slot=\"trigger\">\n Button with Tooltip\n </sp-action-button>\n <overlay-trigger placement=\"right-start\">\n <sp-tooltip slot=\"hover-content\" delayed>\n Described by this content on focus/hover. 2\n </sp-tooltip>\n </overlay-trigger>\n </div>\n `);\n\n const trigger = el.querySelector('[slot=\"trigger\"]') as HTMLElement;\n const tooltip = el.querySelector('sp-tooltip') as Tooltip;\n const overlay = el.querySelector('overlay-trigger') as OverlayTrigger;\n\n trigger.setAttribute('aria-describedby', tooltip.id);\n overlay.append(trigger);\n\n await elementUpdated(el);\n expect(trigger.getAttribute('aria-describedby')).to.equal(tooltip.id);\n expect(el.open).to.be.undefined;\n\n const opened = oneEvent(el, 'sp-opened');\n trigger.dispatchEvent(\n new FocusEvent('focusin', { bubbles: true, composed: true })\n );\n await opened;\n\n expect(trigger.getAttribute('aria-describedby')).to.equal(tooltip.id);\n\n const closed = oneEvent(el, 'sp-closed');\n trigger.dispatchEvent(\n new FocusEvent('focusout', { bubbles: true, composed: true })\n );\n await closed;\n\n expect(trigger.getAttribute('aria-describedby')).to.equal(tooltip.id);\n });\n});\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }