@spectrum-web-components/overlay 0.31.1-overlay.29 → 0.31.1-react.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/active-overlay.d.ts +6 -0
- package/active-overlay.dev.js +5 -0
- package/{sp-overlay.dev.js.map → active-overlay.dev.js.map} +3 -3
- package/active-overlay.js +2 -0
- package/{sp-overlay.js.map → active-overlay.js.map} +4 -4
- package/custom-elements.json +1215 -0
- package/package.json +21 -50
- package/src/ActiveOverlay.d.ts +84 -0
- package/src/ActiveOverlay.dev.js +517 -0
- package/src/ActiveOverlay.dev.js.map +7 -0
- package/src/ActiveOverlay.js +16 -0
- package/src/ActiveOverlay.js.map +7 -0
- package/src/OverlayTrigger.d.ts +31 -23
- package/src/OverlayTrigger.dev.js +245 -135
- package/src/OverlayTrigger.dev.js.map +3 -3
- package/src/OverlayTrigger.js +22 -52
- package/src/OverlayTrigger.js.map +3 -3
- package/src/VirtualTrigger.dev.js +2 -0
- package/src/VirtualTrigger.dev.js.map +2 -2
- package/src/VirtualTrigger.js +1 -1
- package/src/VirtualTrigger.js.map +3 -3
- package/src/active-overlay.css.dev.js +13 -0
- package/src/active-overlay.css.dev.js.map +7 -0
- package/src/active-overlay.css.js +10 -0
- package/src/active-overlay.css.js.map +7 -0
- package/src/index.d.ts +3 -2
- package/src/index.dev.js +3 -2
- package/src/index.dev.js.map +2 -2
- package/src/index.js +1 -1
- package/src/index.js.map +2 -2
- package/src/loader.d.ts +2 -2
- package/src/loader.dev.js +19 -2
- package/src/loader.dev.js.map +2 -2
- package/src/loader.js +1 -1
- package/src/loader.js.map +3 -3
- package/src/overlay-stack.d.ts +50 -0
- package/src/overlay-stack.dev.js +514 -0
- package/src/overlay-stack.dev.js.map +7 -0
- package/src/overlay-stack.js +33 -0
- package/src/overlay-stack.js.map +7 -0
- package/src/overlay-trigger.css.dev.js +1 -1
- package/src/overlay-trigger.css.dev.js.map +1 -1
- package/src/overlay-trigger.css.js +1 -1
- package/src/overlay-trigger.css.js.map +1 -1
- package/src/overlay-types.d.ts +4 -6
- package/src/overlay-types.dev.js +0 -1
- package/src/overlay-types.dev.js.map +3 -3
- package/src/overlay-types.js +1 -1
- package/src/overlay-types.js.map +3 -3
- package/src/overlay-utils.d.ts +3 -0
- package/src/overlay-utils.dev.js +31 -0
- package/src/overlay-utils.dev.js.map +7 -0
- package/src/overlay-utils.js +2 -0
- package/src/overlay-utils.js.map +7 -0
- package/src/overlay.d.ts +59 -0
- package/src/overlay.dev.js +127 -0
- package/src/overlay.dev.js.map +7 -0
- package/src/overlay.js +2 -0
- package/src/overlay.js.map +7 -0
- package/stories/overlay-story-components.js +26 -24
- package/stories/overlay-story-components.js.map +2 -2
- package/stories/overlay.stories.js +730 -733
- package/stories/overlay.stories.js.map +2 -2
- package/sync/overlay-trigger.d.ts +0 -4
- package/sync/overlay-trigger.dev.js +4 -1
- package/sync/overlay-trigger.dev.js.map +2 -2
- package/sync/overlay-trigger.js +1 -1
- package/sync/overlay-trigger.js.map +3 -3
- package/test/benchmark/basic-test.js +1 -1
- package/test/benchmark/basic-test.js.map +1 -1
- package/test/index.js +428 -461
- package/test/index.js.map +3 -3
- package/test/overlay-lifecycle.test.js +106 -34
- package/test/overlay-lifecycle.test.js.map +2 -2
- package/test/overlay-trigger-click.test.js +5 -11
- package/test/overlay-trigger-click.test.js.map +2 -2
- package/test/overlay-trigger-extended.test.js +9 -3
- package/test/overlay-trigger-extended.test.js.map +2 -2
- package/test/overlay-trigger-hover-click.test.js +23 -23
- package/test/overlay-trigger-hover-click.test.js.map +2 -2
- package/test/overlay-trigger-hover.test.js +34 -40
- package/test/overlay-trigger-hover.test.js.map +2 -2
- package/test/overlay-trigger-longpress.test.js +80 -98
- package/test/overlay-trigger-longpress.test.js.map +2 -2
- package/test/overlay-trigger-sync.test.js +1 -1
- package/test/overlay-trigger-sync.test.js.map +2 -2
- package/test/overlay-trigger.test.js +1 -1
- package/test/overlay-trigger.test.js.map +2 -2
- package/test/overlay-update.test.js +4 -4
- package/test/overlay-update.test.js.map +2 -2
- package/test/overlay.test.js +237 -240
- package/test/overlay.test.js.map +3 -3
- package/sp-overlay.d.ts +0 -6
- package/sp-overlay.dev.js +0 -5
- package/sp-overlay.js +0 -2
- package/src/Overlay.d.ts +0 -28
- package/src/Overlay.dev.js +0 -88
- package/src/Overlay.dev.js.map +0 -7
- package/src/Overlay.js +0 -2
- package/src/Overlay.js.map +0 -7
- package/src/OverlayBase.d.ts +0 -122
- package/src/OverlayBase.dev.js +0 -701
- package/src/OverlayBase.dev.js.map +0 -7
- package/src/OverlayBase.js +0 -17
- package/src/OverlayBase.js.map +0 -7
- package/src/OverlayDialog.d.ts +0 -8
- package/src/OverlayDialog.dev.js +0 -160
- package/src/OverlayDialog.dev.js.map +0 -7
- package/src/OverlayDialog.js +0 -2
- package/src/OverlayDialog.js.map +0 -7
- package/src/OverlayNoPopover.d.ts +0 -8
- package/src/OverlayNoPopover.dev.js +0 -149
- package/src/OverlayNoPopover.dev.js.map +0 -7
- package/src/OverlayNoPopover.js +0 -2
- package/src/OverlayNoPopover.js.map +0 -7
- package/src/OverlayPopover.d.ts +0 -8
- package/src/OverlayPopover.dev.js +0 -199
- package/src/OverlayPopover.dev.js.map +0 -7
- package/src/OverlayPopover.js +0 -2
- package/src/OverlayPopover.js.map +0 -7
- package/src/OverlayStack.d.ts +0 -24
- package/src/OverlayStack.dev.js +0 -125
- package/src/OverlayStack.dev.js.map +0 -7
- package/src/OverlayStack.js +0 -2
- package/src/OverlayStack.js.map +0 -7
- package/src/PlacementController.d.ts +0 -36
- package/src/PlacementController.dev.js +0 -193
- package/src/PlacementController.dev.js.map +0 -7
- package/src/PlacementController.js +0 -2
- package/src/PlacementController.js.map +0 -7
- package/src/fullSizePlugin.d.ts +0 -12
- package/src/fullSizePlugin.dev.js +0 -39
- package/src/fullSizePlugin.dev.js.map +0 -7
- package/src/fullSizePlugin.js +0 -2
- package/src/fullSizePlugin.js.map +0 -7
- package/src/overlay-base.css.dev.js +0 -9
- package/src/overlay-base.css.dev.js.map +0 -7
- package/src/overlay-base.css.js +0 -6
- package/src/overlay-base.css.js.map +0 -7
- package/src/placement.d.ts +0 -21
- package/src/placement.dev.js +0 -111
- package/src/placement.dev.js.map +0 -7
- package/src/placement.js +0 -2
- package/src/placement.js.map +0 -7
- package/src/topLayerOverTransforms.d.ts +0 -22
- package/src/topLayerOverTransforms.dev.js +0 -165
- package/src/topLayerOverTransforms.dev.js.map +0 -7
- package/src/topLayerOverTransforms.js +0 -2
- package/src/topLayerOverTransforms.js.map +0 -7
- package/stories/overlay-element.stories.js +0 -247
- package/stories/overlay-element.stories.js.map +0 -7
- package/test/overlay-element.test-vrt.js +0 -5
- package/test/overlay-element.test-vrt.js.map +0 -7
- package/test/overlay-element.test.js +0 -664
- package/test/overlay-element.test.js.map +0 -7
- /package/src/{overlay-base.css.d.ts → active-overlay.css.d.ts} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-trigger-click.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
|
|
5
|
-
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;
|
|
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 oneEvent,\n waitUntil,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport {\n OverlayTrigger,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { spy } from 'sinon';\nimport { ActionButton } from '@spectrum-web-components/action-button';\n\ndescribe('Overlay Trigger - Click', () => {\n it('displays `click` declaratively', async () => {\n const openedSpy = spy();\n const closedSpy = spy();\n const el = await fixture<OverlayTrigger>(\n (() => html`\n <overlay-trigger\n placement=\"right-start\"\n open=\"click\"\n @sp-opened=${() => openedSpy()}\n @sp-closed=${() => closedSpy()}\n >\n <sp-action-button slot=\"trigger\">\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-popover slot=\"click-content\" tip></sp-popover>\n </overlay-trigger>\n `)()\n );\n await elementUpdated(el);\n\n await waitUntil(\n () => openedSpy.calledOnce,\n 'click content projected to overlay',\n { timeout: 2000 }\n );\n\n el.removeAttribute('open');\n await elementUpdated(el);\n\n await waitUntil(() => closedSpy.calledOnce, 'click content returned', {\n timeout: 2000,\n });\n });\n describe('closes on scroll', () => {\n afterEach(() => {\n if (document.scrollingElement) {\n document.scrollingElement.scrollTop = 0;\n }\n });\n (['click', 'replace', 'inline'] as TriggerInteractions[]).map(\n (interaction) => {\n it(`closes \"${interaction}\" overlay on scroll`, async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger\n placement=\"right-start\"\n type=${interaction}\n >\n <sp-action-button\n slot=\"trigger\"\n style=\"margin: 50vh 0 100vh;\"\n >\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-popover slot=\"click-content\" tip></sp-popover>\n </overlay-trigger>\n `);\n expect(el.open).to.be.undefined;\n\n await elementUpdated(el);\n const opened = oneEvent(el, 'sp-opened');\n el.open = 'click';\n await opened;\n\n expect(el.open).to.equal('click');\n\n const closed = oneEvent(el, 'sp-closed');\n if (document.scrollingElement) {\n document.scrollingElement.scrollTop = 100;\n }\n await closed;\n\n expect(el.open).to.be.null;\n });\n }\n );\n });\n it('opens a second time', async () => {\n const openedSpy = spy();\n const closedSpy = spy();\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger\n placement=\"right-start\"\n type=\"modal\"\n open=\"click\"\n @sp-opened=${() => openedSpy()}\n @sp-closed=${() => closedSpy()}\n >\n <sp-action-button slot=\"trigger\">\n <sp-icon-magnify slot=\"icon\"></sp-icon-magnify>\n </sp-action-button>\n <sp-popover slot=\"click-content\" tip></sp-popover>\n </overlay-trigger>\n `);\n await elementUpdated(el);\n const trigger = el.querySelector('[slot=trigger]') as ActionButton;\n\n await waitUntil(\n () => openedSpy.calledOnce,\n 'click content projected to overlay',\n { timeout: 2000 }\n );\n expect(el.open).to.equal('click');\n\n el.removeAttribute('open');\n await elementUpdated(el);\n\n await waitUntil(() => closedSpy.calledOnce, 'click content returned', {\n timeout: 2000,\n });\n\n expect(el.open).to.be.null;\n\n trigger.click();\n await waitUntil(\n () => openedSpy.callCount === 2,\n 'click content projected to overlay, again',\n { timeout: 2000 }\n );\n expect(el.open).to.equal('click');\n });\n});\n"],
|
|
5
|
+
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAKP,OAAO;AACP,SAAS,WAAW;AAGpB,SAAS,2BAA2B,MAAM;AACtC,KAAG,kCAAkC,YAAY;AAC7C,UAAM,YAAY,IAAI;AACtB,UAAM,YAAY,IAAI;AACtB,UAAM,KAAK,MAAM;AAAA,OACZ,MAAM;AAAA;AAAA;AAAA;AAAA,iCAIc,MAAM,UAAU;AAAA,iCAChB,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOlC;AAAA,IACP;AACA,UAAM,eAAe,EAAE;AAEvB,UAAM;AAAA,MACF,MAAM,UAAU;AAAA,MAChB;AAAA,MACA,EAAE,SAAS,IAAK;AAAA,IACpB;AAEA,OAAG,gBAAgB,MAAM;AACzB,UAAM,eAAe,EAAE;AAEvB,UAAM,UAAU,MAAM,UAAU,YAAY,0BAA0B;AAAA,MAClE,SAAS;AAAA,IACb,CAAC;AAAA,EACL,CAAC;AACD,WAAS,oBAAoB,MAAM;AAC/B,cAAU,MAAM;AACZ,UAAI,SAAS,kBAAkB;AAC3B,iBAAS,iBAAiB,YAAY;AAAA,MAC1C;AAAA,IACJ,CAAC;AACD,IAAC,CAAC,SAAS,WAAW,QAAQ,EAA4B;AAAA,MACtD,CAAC,gBAAgB;AACb,WAAG,WAAW,kCAAkC,YAAY;AACxD,gBAAM,KAAK,MAAM,QAAwB;AAAA;AAAA;AAAA,mCAG1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAUd;AACD,iBAAO,GAAG,IAAI,EAAE,GAAG,GAAG;AAEtB,gBAAM,eAAe,EAAE;AACvB,gBAAM,SAAS,SAAS,IAAI,WAAW;AACvC,aAAG,OAAO;AACV,gBAAM;AAEN,iBAAO,GAAG,IAAI,EAAE,GAAG,MAAM,OAAO;AAEhC,gBAAM,SAAS,SAAS,IAAI,WAAW;AACvC,cAAI,SAAS,kBAAkB;AAC3B,qBAAS,iBAAiB,YAAY;AAAA,UAC1C;AACA,gBAAM;AAEN,iBAAO,GAAG,IAAI,EAAE,GAAG,GAAG;AAAA,QAC1B,CAAC;AAAA,MACL;AAAA,IACJ;AAAA,EACJ,CAAC;AACD,KAAG,uBAAuB,YAAY;AAClC,UAAM,YAAY,IAAI;AACtB,UAAM,YAAY,IAAI;AACtB,UAAM,KAAK,MAAM,QAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKpB,MAAM,UAAU;AAAA,6BAChB,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAOpC;AACD,UAAM,eAAe,EAAE;AACvB,UAAM,UAAU,GAAG,cAAc,gBAAgB;AAEjD,UAAM;AAAA,MACF,MAAM,UAAU;AAAA,MAChB;AAAA,MACA,EAAE,SAAS,IAAK;AAAA,IACpB;AACA,WAAO,GAAG,IAAI,EAAE,GAAG,MAAM,OAAO;AAEhC,OAAG,gBAAgB,MAAM;AACzB,UAAM,eAAe,EAAE;AAEvB,UAAM,UAAU,MAAM,UAAU,YAAY,0BAA0B;AAAA,MAClE,SAAS;AAAA,IACb,CAAC;AAED,WAAO,GAAG,IAAI,EAAE,GAAG,GAAG;AAEtB,YAAQ,MAAM;AACd,UAAM;AAAA,MACF,MAAM,UAAU,cAAc;AAAA,MAC9B;AAAA,MACA,EAAE,SAAS,IAAK;AAAA,IACpB;AACA,WAAO,GAAG,IAAI,EAAE,GAAG,MAAM,OAAO;AAAA,EACpC,CAAC;AACL,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import {
|
|
3
|
+
elementUpdated,
|
|
3
4
|
expect,
|
|
4
5
|
fixture,
|
|
5
6
|
html,
|
|
@@ -34,7 +35,6 @@ const initTest = async (styles = html``) => {
|
|
|
34
35
|
</sp-button>
|
|
35
36
|
<sp-popover
|
|
36
37
|
id="outer-popover"
|
|
37
|
-
dialog
|
|
38
38
|
slot="click-content"
|
|
39
39
|
direction="bottom"
|
|
40
40
|
tip
|
|
@@ -42,7 +42,9 @@ const initTest = async (styles = html``) => {
|
|
|
42
42
|
tabindex="0"
|
|
43
43
|
placement="top"
|
|
44
44
|
>
|
|
45
|
-
|
|
45
|
+
<sp-dialog no-divider>
|
|
46
|
+
This is the overlay content.
|
|
47
|
+
</sp-dialog>
|
|
46
48
|
</sp-popover>
|
|
47
49
|
</overlay-trigger>
|
|
48
50
|
</div>
|
|
@@ -97,7 +99,7 @@ describe("Overlay Trigger - extended", () => {
|
|
|
97
99
|
await nextFrame();
|
|
98
100
|
expect(popover.placement).to.equal("bottom");
|
|
99
101
|
});
|
|
100
|
-
it
|
|
102
|
+
it("occludes content behind the overlay", async () => {
|
|
101
103
|
({ overlayTrigger, button, popover } = await initTest());
|
|
102
104
|
const textfield = document.createElement("sp-textfield");
|
|
103
105
|
document.body.append(textfield);
|
|
@@ -195,6 +197,10 @@ describe("Overlay Trigger - extended", () => {
|
|
|
195
197
|
const open = oneEvent(overlayTrigger, "sp-opened");
|
|
196
198
|
button.click();
|
|
197
199
|
await open;
|
|
200
|
+
const activeOverlay = document.querySelector(
|
|
201
|
+
"active-overlay"
|
|
202
|
+
);
|
|
203
|
+
await elementUpdated(activeOverlay);
|
|
198
204
|
expect(overlayTrigger.open).to.equal("click");
|
|
199
205
|
expect(popover.placement).to.equal("bottom");
|
|
200
206
|
expect(scrollingArea.scrollTop).to.equal(distance);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-trigger-extended.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 expect,\n fixture,\n html,\n nextFrame,\n oneEvent,\n waitUntil,\n} from '@open-wc/testing';\n\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport {
|
|
5
|
-
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,OAAO;
|
|
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';\n\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport {\n ActiveOverlay,\n OverlayTrigger,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/button/sp-button.js';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Popover } from '@spectrum-web-components/popover';\nimport '@spectrum-web-components/textfield/sp-textfield.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\n\nconst initTest = async (\n styles = html``\n): Promise<{\n overlayTrigger: OverlayTrigger;\n button: Button;\n popover: Popover;\n}> => {\n const test = await fixture<HTMLDivElement>(\n html`\n <div class=\"container\">\n <style>\n .container {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n </style>\n ${styles}\n <overlay-trigger type=\"modal\" id=\"trigger\" placement=\"top\">\n <sp-button\n id=\"outer-button\"\n variant=\"primary\"\n slot=\"trigger\"\n >\n Show Popover\n </sp-button>\n <sp-popover\n id=\"outer-popover\"\n slot=\"click-content\"\n direction=\"bottom\"\n tip\n open\n tabindex=\"0\"\n placement=\"top\"\n >\n <sp-dialog no-divider>\n This is the overlay content.\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </div>\n `\n );\n return {\n overlayTrigger: test.querySelector('overlay-trigger') as OverlayTrigger,\n button: test.querySelector('sp-button') as Button,\n popover: test.querySelector('sp-popover') as Popover,\n };\n};\n\ndescribe('Overlay Trigger - extended', () => {\n let overlayTrigger!: OverlayTrigger;\n let button!: Button;\n let popover!: Popover;\n\n afterEach(async () => {\n if (overlayTrigger.open) {\n const closed = oneEvent(overlayTrigger, 'sp-closed');\n overlayTrigger.open = undefined;\n await closed;\n }\n });\n\n it('manages `placement` on open', async () => {\n ({ overlayTrigger, button, popover } = await initTest());\n\n expect(popover.placement).to.equal('top');\n\n const open = oneEvent(overlayTrigger, 'sp-opened');\n button.click();\n await open;\n\n expect(popover.placement).to.equal('bottom');\n\n const close = oneEvent(overlayTrigger, 'sp-closed');\n overlayTrigger.open = undefined;\n await close;\n\n expect(popover.placement).to.equal('top');\n });\n\n it('manages `placement` on scroll', async () => {\n ({ overlayTrigger, button, popover } = await initTest(html`\n <style>\n sp-button {\n margin: 100vh 0;\n transform: translateY(-100%);\n }\n </style>\n `));\n\n expect(popover.placement).to.equal('top');\n\n const open = oneEvent(overlayTrigger, 'sp-opened');\n button.click();\n await open;\n\n expect(popover.placement).to.equal('top');\n\n const { scrollHeight } = document.documentElement;\n document.documentElement.scrollTop = scrollHeight / 2;\n\n // one frame for scroll to trigger\n await nextFrame();\n // one frame for the UI to update\n await nextFrame();\n // _then_ we test...\n expect(popover.placement).to.equal('bottom');\n });\n\n it('occludes content behind the overlay', async () => {\n ({ overlayTrigger, button, popover } = await initTest());\n const textfield = document.createElement('sp-textfield');\n document.body.append(textfield);\n\n const boundingRect = textfield.getBoundingClientRect();\n expect(document.activeElement).to.not.equal(textfield);\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n boundingRect.left + boundingRect.width / 2,\n boundingRect.top + boundingRect.height / 2,\n ],\n },\n ],\n });\n expect(document.activeElement).to.equal(textfield);\n\n expect(popover.placement).to.equal('top');\n\n const open = oneEvent(overlayTrigger, 'sp-opened');\n button.click();\n await open;\n\n expect(overlayTrigger.open).to.equal('click');\n expect(popover.placement).to.equal('bottom');\n\n const close = oneEvent(overlayTrigger, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n boundingRect.left + boundingRect.width / 2,\n boundingRect.top + boundingRect.height / 2,\n ],\n },\n ],\n });\n await close;\n expect(overlayTrigger.open).to.be.null;\n expect(document.activeElement).to.not.equal(textfield);\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n boundingRect.left + boundingRect.width / 2,\n boundingRect.top + boundingRect.height / 2,\n ],\n },\n ],\n });\n expect(document.activeElement).to.equal(textfield);\n textfield.remove();\n });\n\n xit('occludes wheel interactions behind the overlay', async () => {\n /**\n * This test \"passes\" when tested manually in browser, but\n * not when leveraged in the automated test process.\n *\n * xit for now...\n **/\n ({ overlayTrigger, button, popover } = await initTest());\n const scrollingArea = document.createElement('div');\n Object.assign(scrollingArea.style, {\n width: '100px',\n height: '100px',\n overflow: 'auto',\n });\n const content = Array(100).fill(\n 'This is content within my box that will scroll.'\n );\n scrollingArea.textContent = content.join(' ');\n document.body.append(scrollingArea);\n await nextFrame();\n\n const boundingRect = scrollingArea.getBoundingClientRect();\n expect(scrollingArea.scrollTop).to.equal(0);\n const distance = 1;\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n boundingRect.left + boundingRect.width / 2,\n boundingRect.top + boundingRect.height / 2,\n ],\n },\n ],\n });\n await sendMouse({\n steps: [\n {\n type: 'wheel',\n position: [0, distance],\n },\n ],\n });\n // wait for scroll to complete\n await waitUntil(\n () => scrollingArea.scrollTop === distance,\n `scroll went to ${distance}`\n );\n expect(scrollingArea.scrollTop).to.equal(distance);\n\n expect(popover.placement).to.equal('top');\n\n const open = oneEvent(overlayTrigger, 'sp-opened');\n button.click();\n await open;\n const activeOverlay = document.querySelector(\n 'active-overlay'\n ) as ActiveOverlay;\n await elementUpdated(activeOverlay);\n\n expect(overlayTrigger.open).to.equal('click');\n expect(popover.placement).to.equal('bottom');\n expect(scrollingArea.scrollTop).to.equal(distance);\n await sendMouse({\n steps: [\n {\n type: 'wheel',\n position: [0, -distance],\n },\n ],\n });\n // Awaiting here points out that this always fails in Firefox\n // and also was failing in WebKit without our knowing.\n await nextFrame();\n await nextFrame();\n await nextFrame();\n expect(\n scrollingArea.scrollTop,\n `scrollTop should be ${distance}.`\n ).to.equal(distance);\n scrollingArea.remove();\n });\n});\n"],
|
|
5
|
+
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,OAAO;AAKP,OAAO;AAEP,OAAO;AAEP,OAAO;AACP,SAAS,iBAAiB;AAE1B,MAAM,WAAW,OACb,SAAS,WAKP;AACF,QAAM,OAAO,MAAM;AAAA,IACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBASU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBd;AACA,SAAO;AAAA,IACH,gBAAgB,KAAK,cAAc,iBAAiB;AAAA,IACpD,QAAQ,KAAK,cAAc,WAAW;AAAA,IACtC,SAAS,KAAK,cAAc,YAAY;AAAA,EAC5C;AACJ;AAEA,SAAS,8BAA8B,MAAM;AACzC,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,YAAU,YAAY;AAClB,QAAI,eAAe,MAAM;AACrB,YAAM,SAAS,SAAS,gBAAgB,WAAW;AACnD,qBAAe,OAAO;AACtB,YAAM;AAAA,IACV;AAAA,EACJ,CAAC;AAED,KAAG,+BAA+B,YAAY;AAC1C,KAAC,EAAE,gBAAgB,QAAQ,QAAQ,IAAI,MAAM,SAAS;AAEtD,WAAO,QAAQ,SAAS,EAAE,GAAG,MAAM,KAAK;AAExC,UAAM,OAAO,SAAS,gBAAgB,WAAW;AACjD,WAAO,MAAM;AACb,UAAM;AAEN,WAAO,QAAQ,SAAS,EAAE,GAAG,MAAM,QAAQ;AAE3C,UAAM,QAAQ,SAAS,gBAAgB,WAAW;AAClD,mBAAe,OAAO;AACtB,UAAM;AAEN,WAAO,QAAQ,SAAS,EAAE,GAAG,MAAM,KAAK;AAAA,EAC5C,CAAC;AAED,KAAG,iCAAiC,YAAY;AAC5C,KAAC,EAAE,gBAAgB,QAAQ,QAAQ,IAAI,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAOrD;AAED,WAAO,QAAQ,SAAS,EAAE,GAAG,MAAM,KAAK;AAExC,UAAM,OAAO,SAAS,gBAAgB,WAAW;AACjD,WAAO,MAAM;AACb,UAAM;AAEN,WAAO,QAAQ,SAAS,EAAE,GAAG,MAAM,KAAK;AAExC,UAAM,EAAE,aAAa,IAAI,SAAS;AAClC,aAAS,gBAAgB,YAAY,eAAe;AAGpD,UAAM,UAAU;AAEhB,UAAM,UAAU;AAEhB,WAAO,QAAQ,SAAS,EAAE,GAAG,MAAM,QAAQ;AAAA,EAC/C,CAAC;AAED,KAAG,uCAAuC,YAAY;AAClD,KAAC,EAAE,gBAAgB,QAAQ,QAAQ,IAAI,MAAM,SAAS;AACtD,UAAM,YAAY,SAAS,cAAc,cAAc;AACvD,aAAS,KAAK,OAAO,SAAS;AAE9B,UAAM,eAAe,UAAU,sBAAsB;AACrD,WAAO,SAAS,aAAa,EAAE,GAAG,IAAI,MAAM,SAAS;AACrD,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,QACH;AAAA,UACI,MAAM;AAAA,UACN,UAAU;AAAA,YACN,aAAa,OAAO,aAAa,QAAQ;AAAA,YACzC,aAAa,MAAM,aAAa,SAAS;AAAA,UAC7C;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ,CAAC;AACD,WAAO,SAAS,aAAa,EAAE,GAAG,MAAM,SAAS;AAEjD,WAAO,QAAQ,SAAS,EAAE,GAAG,MAAM,KAAK;AAExC,UAAM,OAAO,SAAS,gBAAgB,WAAW;AACjD,WAAO,MAAM;AACb,UAAM;AAEN,WAAO,eAAe,IAAI,EAAE,GAAG,MAAM,OAAO;AAC5C,WAAO,QAAQ,SAAS,EAAE,GAAG,MAAM,QAAQ;AAE3C,UAAM,QAAQ,SAAS,gBAAgB,WAAW;AAClD,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,QACH;AAAA,UACI,MAAM;AAAA,UACN,UAAU;AAAA,YACN,aAAa,OAAO,aAAa,QAAQ;AAAA,YACzC,aAAa,MAAM,aAAa,SAAS;AAAA,UAC7C;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ,CAAC;AACD,UAAM;AACN,WAAO,eAAe,IAAI,EAAE,GAAG,GAAG;AAClC,WAAO,SAAS,aAAa,EAAE,GAAG,IAAI,MAAM,SAAS;AACrD,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,QACH;AAAA,UACI,MAAM;AAAA,UACN,UAAU;AAAA,YACN,aAAa,OAAO,aAAa,QAAQ;AAAA,YACzC,aAAa,MAAM,aAAa,SAAS;AAAA,UAC7C;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ,CAAC;AACD,WAAO,SAAS,aAAa,EAAE,GAAG,MAAM,SAAS;AACjD,cAAU,OAAO;AAAA,EACrB,CAAC;AAED,MAAI,kDAAkD,YAAY;AAO9D,KAAC,EAAE,gBAAgB,QAAQ,QAAQ,IAAI,MAAM,SAAS;AACtD,UAAM,gBAAgB,SAAS,cAAc,KAAK;AAClD,WAAO,OAAO,cAAc,OAAO;AAAA,MAC/B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IACd,CAAC;AACD,UAAM,UAAU,MAAM,GAAG,EAAE;AAAA,MACvB;AAAA,IACJ;AACA,kBAAc,cAAc,QAAQ,KAAK,GAAG;AAC5C,aAAS,KAAK,OAAO,aAAa;AAClC,UAAM,UAAU;AAEhB,UAAM,eAAe,cAAc,sBAAsB;AACzD,WAAO,cAAc,SAAS,EAAE,GAAG,MAAM,CAAC;AAC1C,UAAM,WAAW;AACjB,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,QACH;AAAA,UACI,MAAM;AAAA,UACN,UAAU;AAAA,YACN,aAAa,OAAO,aAAa,QAAQ;AAAA,YACzC,aAAa,MAAM,aAAa,SAAS;AAAA,UAC7C;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ,CAAC;AACD,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,QACH;AAAA,UACI,MAAM;AAAA,UACN,UAAU,CAAC,GAAG,QAAQ;AAAA,QAC1B;AAAA,MACJ;AAAA,IACJ,CAAC;AAED,UAAM;AAAA,MACF,MAAM,cAAc,cAAc;AAAA,MAClC,kBAAkB;AAAA,IACtB;AACA,WAAO,cAAc,SAAS,EAAE,GAAG,MAAM,QAAQ;AAEjD,WAAO,QAAQ,SAAS,EAAE,GAAG,MAAM,KAAK;AAExC,UAAM,OAAO,SAAS,gBAAgB,WAAW;AACjD,WAAO,MAAM;AACb,UAAM;AACN,UAAM,gBAAgB,SAAS;AAAA,MAC3B;AAAA,IACJ;AACA,UAAM,eAAe,aAAa;AAElC,WAAO,eAAe,IAAI,EAAE,GAAG,MAAM,OAAO;AAC5C,WAAO,QAAQ,SAAS,EAAE,GAAG,MAAM,QAAQ;AAC3C,WAAO,cAAc,SAAS,EAAE,GAAG,MAAM,QAAQ;AACjD,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,QACH;AAAA,UACI,MAAM;AAAA,UACN,UAAU,CAAC,GAAG,CAAC,QAAQ;AAAA,QAC3B;AAAA,MACJ;AAAA,IACJ,CAAC;AAGD,UAAM,UAAU;AAChB,UAAM,UAAU;AAChB,UAAM,UAAU;AAChB;AAAA,MACI,cAAc;AAAA,MACd,uBAAuB;AAAA,IAC3B,EAAE,GAAG,MAAM,QAAQ;AACnB,kBAAc,OAAO;AAAA,EACzB,CAAC;AACL,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,11 +39,11 @@ describe("Overlay Trigger - Hover and Click", () => {
|
|
|
39
39
|
const openedEvent = oneEvent(el, "sp-opened");
|
|
40
40
|
trigger.click();
|
|
41
41
|
interaction = (await openedEvent).detail.interaction;
|
|
42
|
-
expect(interaction).equals("
|
|
42
|
+
expect(interaction).equals("click");
|
|
43
43
|
const closedEvent = oneEvent(el, "sp-closed");
|
|
44
44
|
trigger.click();
|
|
45
45
|
interaction = (await closedEvent).detail.interaction;
|
|
46
|
-
expect(interaction).equals("
|
|
46
|
+
expect(interaction).equals("click");
|
|
47
47
|
}
|
|
48
48
|
});
|
|
49
49
|
it("toggles on click after hover", async () => {
|
|
@@ -81,16 +81,16 @@ describe("Overlay Trigger - Hover and Click", () => {
|
|
|
81
81
|
]
|
|
82
82
|
});
|
|
83
83
|
interaction = (await hoveredEvent).detail.interaction;
|
|
84
|
-
expect(interaction).equals("
|
|
84
|
+
expect(interaction).equals("hover");
|
|
85
85
|
for (let i = 0; i < 3; i++) {
|
|
86
86
|
const openedEvent = oneEvent(el, "sp-opened");
|
|
87
87
|
trigger.click();
|
|
88
88
|
interaction = (await openedEvent).detail.interaction;
|
|
89
|
-
expect(interaction).equals("
|
|
89
|
+
expect(interaction).equals("click");
|
|
90
90
|
const closedEvent = oneEvent(el, "sp-closed");
|
|
91
91
|
trigger.click();
|
|
92
92
|
interaction = (await closedEvent).detail.interaction;
|
|
93
|
-
expect(interaction).equals("
|
|
93
|
+
expect(interaction).equals("click");
|
|
94
94
|
}
|
|
95
95
|
});
|
|
96
96
|
it("persists a hover overlay when clicking its trigger and closes the next highest overlay on the stack", async () => {
|
|
@@ -121,6 +121,13 @@ describe("Overlay Trigger - Hover and Click", () => {
|
|
|
121
121
|
let opened = oneEvent(trigger1, "sp-opened");
|
|
122
122
|
sendMouse({
|
|
123
123
|
steps: [
|
|
124
|
+
{
|
|
125
|
+
type: "move",
|
|
126
|
+
position: [
|
|
127
|
+
rect1.left + rect1.width / 2,
|
|
128
|
+
rect1.top + rect1.height / 2
|
|
129
|
+
]
|
|
130
|
+
},
|
|
124
131
|
{
|
|
125
132
|
type: "click",
|
|
126
133
|
position: [
|
|
@@ -131,11 +138,13 @@ describe("Overlay Trigger - Hover and Click", () => {
|
|
|
131
138
|
]
|
|
132
139
|
});
|
|
133
140
|
await opened;
|
|
141
|
+
await elementUpdated(overlayTrigger1);
|
|
134
142
|
expect(overlayTrigger1.open).to.equal("click");
|
|
135
143
|
expect(overlayTrigger2.open).to.undefined;
|
|
136
144
|
opened = oneEvent(trigger2, "sp-opened");
|
|
137
145
|
trigger2.focus();
|
|
138
146
|
await opened;
|
|
147
|
+
await elementUpdated(overlayTrigger2);
|
|
139
148
|
expect(overlayTrigger1.open).to.equal("click");
|
|
140
149
|
expect(overlayTrigger2.open).to.equal("hover");
|
|
141
150
|
const closed = oneEvent(trigger1, "sp-closed");
|
|
@@ -151,48 +160,39 @@ describe("Overlay Trigger - Hover and Click", () => {
|
|
|
151
160
|
]
|
|
152
161
|
});
|
|
153
162
|
await closed;
|
|
154
|
-
expect(overlayTrigger1.open).to.be.
|
|
163
|
+
expect(overlayTrigger1.open).to.be.null;
|
|
155
164
|
expect(overlayTrigger2.open).to.equal("hover");
|
|
156
165
|
});
|
|
157
|
-
it
|
|
166
|
+
it('does not close ancestor "click" overlays on `click`', async () => {
|
|
158
167
|
const test = await fixture(html`
|
|
159
168
|
<div>${deep()}</div>
|
|
160
169
|
`);
|
|
161
170
|
const el = test.querySelector("overlay-trigger");
|
|
162
171
|
const button = el.querySelector("sp-action-button");
|
|
163
|
-
const button2 = el.querySelector(
|
|
164
|
-
"sp-action-button:nth-of-type(2)"
|
|
165
|
-
);
|
|
166
172
|
const tooltip = button.querySelector("sp-tooltip");
|
|
167
173
|
expect(el.open).to.be.undefined;
|
|
168
174
|
expect(tooltip.open).to.be.false;
|
|
169
|
-
|
|
170
|
-
const tooltipOpen = oneEvent(button, "sp-opened");
|
|
175
|
+
let opened = oneEvent(el, "sp-opened");
|
|
171
176
|
el.open = "click";
|
|
172
177
|
await opened;
|
|
173
|
-
await tooltipOpen;
|
|
174
178
|
expect(el.open).to.equal("click");
|
|
179
|
+
opened = oneEvent(button, "sp-opened");
|
|
180
|
+
button.focus();
|
|
181
|
+
await opened;
|
|
175
182
|
expect(tooltip.open).to.be.true;
|
|
176
183
|
button.click();
|
|
177
184
|
await aTimeout(200);
|
|
178
185
|
expect(el.open).to.equal("click");
|
|
179
186
|
expect(tooltip.open).to.be.true;
|
|
180
187
|
let closed = oneEvent(button, "sp-closed");
|
|
181
|
-
|
|
188
|
+
button.blur();
|
|
182
189
|
await closed;
|
|
183
190
|
expect(el.open).to.equal("click");
|
|
184
191
|
expect(tooltip.open).to.be.false;
|
|
185
192
|
closed = oneEvent(el, "sp-closed");
|
|
186
|
-
|
|
187
|
-
steps: [
|
|
188
|
-
{
|
|
189
|
-
type: "click",
|
|
190
|
-
position: [1, 1]
|
|
191
|
-
}
|
|
192
|
-
]
|
|
193
|
-
});
|
|
193
|
+
document.body.click();
|
|
194
194
|
await closed;
|
|
195
|
-
expect(el.open
|
|
195
|
+
expect(el.open).to.be.null;
|
|
196
196
|
expect(tooltip.open).to.be.false;
|
|
197
197
|
});
|
|
198
198
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-trigger-hover-click.test.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2021 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 aTimeout,\n elementUpdated,\n expect,\n fixture,\n html,\n oneEvent,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { OverlayTrigger } from '@spectrum-web-components/overlay/src/OverlayTrigger';\nimport { TriggerInteractions } from '@spectrum-web-components/overlay/src/overlay-types';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { clickAndHoverTargets, deep } from '../stories/overlay.stories.js';\nimport { ignoreResizeObserverLoopError } from '../../../test/testing-helpers.js';\nimport { Tooltip } from '@spectrum-web-components/tooltip/src/Tooltip.js';\n\nignoreResizeObserverLoopError(before, after);\n\ndescribe('Overlay Trigger - Hover and Click', () => {\n it('toggles open and closed on click', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger>\n <sp-button slot=\"trigger\">Click and hover</sp-button>\n <sp-popover slot=\"click-content\" dialog tip>\n Popover content\n </sp-popover>\n <sp-tooltip slot=\"hover-content\" delayed>\n Tooltip content\n </sp-tooltip>\n </overlay-trigger>\n `);\n const trigger = el.querySelector(\n '[slot=trigger]'\n ) as unknown as ActionButton;\n let interaction: TriggerInteractions;\n\n // repeatedly click to toggle the popover\n for (let i = 0; i < 3; i++) {\n const openedEvent = oneEvent(el, 'sp-opened');\n trigger.click();\n interaction = (await openedEvent).detail.interaction;\n\n expect(interaction).equals('
|
|
5
|
-
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAGP,OAAO;AAEP,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB,YAAY;AAC3C,SAAS,qCAAqC;AAG9C,8BAA8B,QAAQ,KAAK;AAE3C,SAAS,qCAAqC,MAAM;AAChD,KAAG,oCAAoC,YAAY;AAC/C,UAAM,KAAK,MAAM,QAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAUxC;AACD,UAAM,UAAU,GAAG;AAAA,MACf;AAAA,IACJ;AACA,QAAI;AAGJ,aAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AACxB,YAAM,cAAc,SAAS,IAAI,WAAW;AAC5C,cAAQ,MAAM;AACd,qBAAe,MAAM,aAAa,OAAO;AAEzC,aAAO,WAAW,EAAE,OAAO,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2021 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 aTimeout,\n elementUpdated,\n expect,\n fixture,\n html,\n oneEvent,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { OverlayTrigger } from '@spectrum-web-components/overlay/src/OverlayTrigger';\nimport { TriggerInteractions } from '@spectrum-web-components/overlay/src/overlay-types';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { clickAndHoverTargets, deep } from '../stories/overlay.stories.js';\nimport { ignoreResizeObserverLoopError } from '../../../test/testing-helpers.js';\nimport { Tooltip } from '@spectrum-web-components/tooltip/src/Tooltip.js';\n\nignoreResizeObserverLoopError(before, after);\n\ndescribe('Overlay Trigger - Hover and Click', () => {\n it('toggles open and closed on click', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger>\n <sp-button slot=\"trigger\">Click and hover</sp-button>\n <sp-popover slot=\"click-content\" dialog tip>\n Popover content\n </sp-popover>\n <sp-tooltip slot=\"hover-content\" delayed>\n Tooltip content\n </sp-tooltip>\n </overlay-trigger>\n `);\n const trigger = el.querySelector(\n '[slot=trigger]'\n ) as unknown as ActionButton;\n let interaction: TriggerInteractions;\n\n // repeatedly click to toggle the popover\n for (let i = 0; i < 3; i++) {\n const openedEvent = oneEvent(el, 'sp-opened');\n trigger.click();\n interaction = (await openedEvent).detail.interaction;\n\n expect(interaction).equals('click');\n\n const closedEvent = oneEvent(el, 'sp-closed');\n trigger.click();\n interaction = (await closedEvent).detail.interaction;\n\n expect(interaction).equals('click');\n }\n });\n it('toggles on click after hover', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger>\n <sp-button slot=\"trigger\">Click and hover</sp-button>\n <sp-popover slot=\"click-content\" dialog tip>\n Popover content\n </sp-popover>\n <sp-tooltip slot=\"hover-content\" delayed>\n Tooltip content\n </sp-tooltip>\n </overlay-trigger>\n `);\n const trigger = el.querySelector(\n '[slot=trigger]'\n ) as unknown as ActionButton;\n const bounds = el.getBoundingClientRect();\n let interaction: TriggerInteractions;\n\n // hover over the button to trigger the tooltip\n const hoveredEvent = oneEvent(el, 'sp-opened');\n sendMouse({\n steps: [\n {\n type: 'move',\n position: [bounds.left - 1, bounds.top - 1],\n },\n {\n type: 'move',\n position: [bounds.left, bounds.top],\n },\n {\n type: 'move',\n position: [bounds.left + 1, bounds.top + 1],\n },\n ],\n });\n interaction = (await hoveredEvent).detail.interaction;\n\n expect(interaction).equals('hover');\n\n // repeatedly click to toggle the popover\n for (let i = 0; i < 3; i++) {\n const openedEvent = oneEvent(el, 'sp-opened');\n trigger.click();\n interaction = (await openedEvent).detail.interaction;\n\n expect(interaction).equals('click');\n\n const closedEvent = oneEvent(el, 'sp-closed');\n trigger.click();\n interaction = (await closedEvent).detail.interaction;\n\n expect(interaction).equals('click');\n }\n });\n it('persists a hover overlay when clicking its trigger and closes the next highest overlay on the stack', async () => {\n const root = document.createElement('div');\n root.style.width = '100vw';\n root.style.height = '100vh';\n root.style.display = 'grid';\n root.style.placeContent = 'center';\n const test = await fixture(clickAndHoverTargets(), {\n parentNode: root,\n });\n\n const overlayTrigger1 = test.querySelector(\n 'overlay-trigger[placement=\"right\"]'\n ) as OverlayTrigger;\n const overlayTrigger2 = test.querySelector(\n 'overlay-trigger[placement=\"left\"]'\n ) as OverlayTrigger;\n\n await elementUpdated(overlayTrigger1);\n await elementUpdated(overlayTrigger2);\n\n const trigger1 = overlayTrigger1.querySelector(\n '.friendly-target'\n ) as HTMLButtonElement;\n const trigger2 = overlayTrigger2.querySelector(\n '.friendly-target'\n ) as HTMLButtonElement;\n const rect1 = trigger1.getBoundingClientRect();\n const rect2 = trigger2.getBoundingClientRect();\n let opened = oneEvent(trigger1, 'sp-opened');\n sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rect1.left + rect1.width / 2,\n rect1.top + rect1.height / 2,\n ],\n },\n {\n type: 'click',\n position: [\n rect1.left + rect1.width / 2,\n rect1.top + rect1.height / 2,\n ],\n },\n ],\n });\n await opened;\n await elementUpdated(overlayTrigger1);\n\n expect(overlayTrigger1.open).to.equal('click');\n expect(overlayTrigger2.open).to.undefined;\n\n opened = oneEvent(trigger2, 'sp-opened');\n trigger2.focus();\n await opened;\n await elementUpdated(overlayTrigger2);\n\n expect(overlayTrigger1.open).to.equal('click');\n expect(overlayTrigger2.open).to.equal('hover');\n\n const closed = oneEvent(trigger1, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n rect2.left + rect2.width / 2,\n rect2.top + rect2.height / 2,\n ],\n },\n ],\n });\n await closed;\n\n expect(overlayTrigger1.open).to.be.null;\n expect(overlayTrigger2.open).to.equal('hover');\n });\n it('does not close ancestor \"click\" overlays on `click`', async () => {\n const test = await fixture<HTMLDivElement>(html`\n <div>${deep()}</div>\n `);\n const el = test.querySelector('overlay-trigger') as OverlayTrigger;\n const button = el.querySelector('sp-action-button') as ActionButton;\n const tooltip = button.querySelector('sp-tooltip') as Tooltip;\n\n expect(el.open).to.be.undefined;\n expect(tooltip.open).to.be.false;\n\n let opened = oneEvent(el, 'sp-opened');\n el.open = 'click';\n await opened;\n\n expect(el.open).to.equal('click');\n\n opened = oneEvent(button, 'sp-opened');\n button.focus();\n await opened;\n\n expect(tooltip.open).to.be.true;\n\n button.click();\n\n await aTimeout(200);\n\n expect(el.open).to.equal('click');\n expect(tooltip.open).to.be.true;\n\n let closed = oneEvent(button, 'sp-closed');\n button.blur();\n await closed;\n\n expect(el.open).to.equal('click');\n expect(tooltip.open).to.be.false;\n\n closed = oneEvent(el, 'sp-closed');\n document.body.click();\n await closed;\n\n expect(el.open).to.be.null;\n expect(tooltip.open).to.be.false;\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import {
|
|
3
|
+
aTimeout,
|
|
3
4
|
elementUpdated,
|
|
4
5
|
expect,
|
|
6
|
+
fixture,
|
|
5
7
|
html,
|
|
6
8
|
nextFrame,
|
|
7
9
|
oneEvent,
|
|
@@ -18,10 +20,8 @@ import { spy } from "sinon";
|
|
|
18
20
|
import { sendKeys } from "@web/test-runner-commands";
|
|
19
21
|
import "@spectrum-web-components/theme/sp-theme.js";
|
|
20
22
|
import "@spectrum-web-components/theme/src/themes.js";
|
|
21
|
-
import {
|
|
22
|
-
|
|
23
|
-
ignoreResizeObserverLoopError
|
|
24
|
-
} from "../../../test/testing-helpers.js";
|
|
23
|
+
import { ignoreResizeObserverLoopError } from "../../../test/testing-helpers.js";
|
|
24
|
+
import { isFirefox } from "@spectrum-web-components/shared/src/platform.js";
|
|
25
25
|
ignoreResizeObserverLoopError(before, after);
|
|
26
26
|
async function styledFixture(story) {
|
|
27
27
|
const test = await fixture(html`
|
|
@@ -86,18 +86,14 @@ describe("Overlay Trigger - Hover", () => {
|
|
|
86
86
|
it('allows pointer to enter the "tooltip" without closing the "tooltip"', async () => {
|
|
87
87
|
const opened = oneEvent(button, "sp-opened");
|
|
88
88
|
button.dispatchEvent(
|
|
89
|
-
new MouseEvent("
|
|
89
|
+
new MouseEvent("mouseenter", {
|
|
90
90
|
bubbles: true,
|
|
91
91
|
composed: true
|
|
92
92
|
})
|
|
93
93
|
);
|
|
94
94
|
await nextFrame();
|
|
95
|
-
await nextFrame();
|
|
96
|
-
await nextFrame();
|
|
97
|
-
await nextFrame();
|
|
98
|
-
expect(tooltip.open).to.be.true;
|
|
99
95
|
button.dispatchEvent(
|
|
100
|
-
new MouseEvent("
|
|
96
|
+
new MouseEvent("mouseleave", {
|
|
101
97
|
relatedTarget: tooltip,
|
|
102
98
|
bubbles: true,
|
|
103
99
|
composed: true
|
|
@@ -105,7 +101,7 @@ describe("Overlay Trigger - Hover", () => {
|
|
|
105
101
|
);
|
|
106
102
|
await nextFrame();
|
|
107
103
|
tooltip.dispatchEvent(
|
|
108
|
-
new MouseEvent("
|
|
104
|
+
new MouseEvent("mouseleave", {
|
|
109
105
|
relatedTarget: button,
|
|
110
106
|
bubbles: true,
|
|
111
107
|
composed: true
|
|
@@ -115,26 +111,25 @@ describe("Overlay Trigger - Hover", () => {
|
|
|
115
111
|
expect(el.open).to.equal("hover");
|
|
116
112
|
const closed = oneEvent(button, "sp-closed");
|
|
117
113
|
button.dispatchEvent(
|
|
118
|
-
new MouseEvent("
|
|
119
|
-
relatedTarget: null,
|
|
114
|
+
new MouseEvent("mouseleave", {
|
|
120
115
|
bubbles: true,
|
|
121
116
|
composed: true
|
|
122
117
|
})
|
|
123
118
|
);
|
|
124
119
|
await closed;
|
|
125
|
-
expect(el.open).to.be.
|
|
120
|
+
expect(el.open).to.be.null;
|
|
126
121
|
});
|
|
127
122
|
it('closes the "tooltip" when leaving the "tooltip"', async () => {
|
|
128
123
|
const opened = oneEvent(button, "sp-opened");
|
|
129
124
|
button.dispatchEvent(
|
|
130
|
-
new MouseEvent("
|
|
125
|
+
new MouseEvent("mouseenter", {
|
|
131
126
|
bubbles: true,
|
|
132
127
|
composed: true
|
|
133
128
|
})
|
|
134
129
|
);
|
|
135
130
|
await nextFrame();
|
|
136
131
|
button.dispatchEvent(
|
|
137
|
-
new MouseEvent("
|
|
132
|
+
new MouseEvent("mouseleave", {
|
|
138
133
|
relatedTarget: tooltip,
|
|
139
134
|
bubbles: true,
|
|
140
135
|
composed: true
|
|
@@ -144,14 +139,13 @@ describe("Overlay Trigger - Hover", () => {
|
|
|
144
139
|
expect(el.open).to.equal("hover");
|
|
145
140
|
const closed = oneEvent(button, "sp-closed");
|
|
146
141
|
tooltip.dispatchEvent(
|
|
147
|
-
new MouseEvent("
|
|
148
|
-
relatedTarget: null,
|
|
142
|
+
new MouseEvent("mouseleave", {
|
|
149
143
|
bubbles: true,
|
|
150
144
|
composed: true
|
|
151
145
|
})
|
|
152
146
|
);
|
|
153
147
|
await closed;
|
|
154
|
-
expect(el.open).to.be.
|
|
148
|
+
expect(el.open).to.be.null;
|
|
155
149
|
});
|
|
156
150
|
});
|
|
157
151
|
it("persists hover content", async () => {
|
|
@@ -168,14 +162,12 @@ describe("Overlay Trigger - Hover", () => {
|
|
|
168
162
|
await elementUpdated(el);
|
|
169
163
|
expect(el.open).to.be.undefined;
|
|
170
164
|
const trigger = el.querySelector('[slot="trigger"]');
|
|
171
|
-
const opened = oneEvent(trigger, "sp-opened");
|
|
172
165
|
trigger.dispatchEvent(
|
|
173
|
-
new Event("
|
|
174
|
-
bubbles: true
|
|
175
|
-
composed: true
|
|
166
|
+
new Event("mouseenter", {
|
|
167
|
+
bubbles: true
|
|
176
168
|
})
|
|
177
169
|
);
|
|
178
|
-
await
|
|
170
|
+
await elementUpdated(el);
|
|
179
171
|
expect(el.open).to.equal("hover");
|
|
180
172
|
trigger.click();
|
|
181
173
|
await elementUpdated(el);
|
|
@@ -196,21 +188,19 @@ describe("Overlay Trigger - Hover", () => {
|
|
|
196
188
|
await elementUpdated(el);
|
|
197
189
|
expect(el.open).to.be.undefined;
|
|
198
190
|
const trigger = el.querySelector('[slot="trigger"]');
|
|
199
|
-
let opened = oneEvent(trigger, "sp-opened");
|
|
200
191
|
trigger.dispatchEvent(
|
|
201
|
-
new Event("
|
|
192
|
+
new Event("mouseenter", {
|
|
202
193
|
bubbles: true
|
|
203
194
|
})
|
|
204
195
|
);
|
|
205
|
-
await
|
|
196
|
+
await elementUpdated(el);
|
|
206
197
|
expect(el.open).to.equal("hover");
|
|
207
|
-
opened = oneEvent(trigger, "sp-opened");
|
|
208
198
|
trigger.dispatchEvent(
|
|
209
199
|
new Event("longpress", {
|
|
210
200
|
bubbles: true
|
|
211
201
|
})
|
|
212
202
|
);
|
|
213
|
-
await
|
|
203
|
+
await elementUpdated(el);
|
|
214
204
|
expect(el.open).to.equal("longpress");
|
|
215
205
|
});
|
|
216
206
|
it('closes `hover` overlay when [type="modal"]', async () => {
|
|
@@ -230,13 +220,19 @@ describe("Overlay Trigger - Hover", () => {
|
|
|
230
220
|
const opened = oneEvent(el, "sp-opened");
|
|
231
221
|
trigger.focus();
|
|
232
222
|
await opened;
|
|
223
|
+
await elementUpdated(el);
|
|
224
|
+
await aTimeout(500);
|
|
233
225
|
expect(el.open).to.equal("hover");
|
|
234
226
|
const closed = oneEvent(el, "sp-closed");
|
|
235
227
|
trigger.blur();
|
|
236
228
|
await closed;
|
|
237
|
-
|
|
229
|
+
await elementUpdated(el);
|
|
230
|
+
expect(el.open).to.be.null;
|
|
238
231
|
});
|
|
239
232
|
it('will not return focus to a "modal" parent', async () => {
|
|
233
|
+
if (isFirefox()) {
|
|
234
|
+
return;
|
|
235
|
+
}
|
|
240
236
|
const el = await styledFixture(html`
|
|
241
237
|
<overlay-trigger type="modal" placement="none">
|
|
242
238
|
<sp-button slot="trigger">Toggle Dialog</sp-button>
|
|
@@ -263,29 +259,27 @@ describe("Overlay Trigger - Hover", () => {
|
|
|
263
259
|
await elementUpdated(el);
|
|
264
260
|
const button = el.querySelector("sp-button");
|
|
265
261
|
const dialog = el.querySelector("sp-dialog-wrapper");
|
|
266
|
-
const button1 = dialog.querySelector("#button-1");
|
|
267
|
-
const button2 = dialog.querySelector("#button-2");
|
|
268
|
-
const button3 = dialog.querySelector("#button-3");
|
|
269
262
|
await elementUpdated(button);
|
|
270
263
|
await elementUpdated(dialog);
|
|
271
264
|
let opened = oneEvent(button, "sp-opened");
|
|
272
|
-
const openedHint = oneEvent(button1, "sp-opened");
|
|
273
265
|
button.dispatchEvent(new Event("click", { bubbles: true }));
|
|
274
266
|
await opened;
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
opened = oneEvent(
|
|
267
|
+
const button1 = dialog.querySelector("#button-1");
|
|
268
|
+
const button2 = dialog.querySelector("#button-2");
|
|
269
|
+
opened = oneEvent(button1, "sp-opened");
|
|
278
270
|
sendKeys({
|
|
279
271
|
press: "Tab"
|
|
280
272
|
});
|
|
281
273
|
await opened;
|
|
282
|
-
|
|
283
|
-
|
|
274
|
+
await nextFrame();
|
|
275
|
+
expect(button1 === document.activeElement).to.be.true;
|
|
276
|
+
opened = oneEvent(button2, "sp-opened");
|
|
284
277
|
sendKeys({
|
|
285
278
|
press: "Tab"
|
|
286
279
|
});
|
|
287
280
|
await opened;
|
|
288
|
-
|
|
281
|
+
await nextFrame();
|
|
282
|
+
expect(button2 === document.activeElement).to.be.true;
|
|
289
283
|
});
|
|
290
284
|
});
|
|
291
285
|
//# sourceMappingURL=overlay-trigger-hover.test.js.map
|