@spectrum-web-components/overlay 0.39.3 → 0.39.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +9 -2
- package/package.json +9 -9
- package/src/AbstractOverlay.d.ts +2 -1
- package/src/AbstractOverlay.dev.js +6 -0
- package/src/AbstractOverlay.dev.js.map +2 -2
- package/src/AbstractOverlay.js +1 -1
- package/src/AbstractOverlay.js.map +3 -3
- package/src/Overlay.d.ts +3 -1
- package/src/Overlay.dev.js +17 -3
- package/src/Overlay.dev.js.map +2 -2
- package/src/Overlay.js +3 -3
- package/src/Overlay.js.map +3 -3
- package/src/topLayerOverTransforms.dev.js +17 -5
- package/src/topLayerOverTransforms.dev.js.map +2 -2
- package/src/topLayerOverTransforms.js +1 -1
- package/src/topLayerOverTransforms.js.map +3 -3
- package/stories/overlay-element.stories.js +32 -24
- package/stories/overlay-element.stories.js.map +2 -2
- package/test/index.js +7 -0
- package/test/index.js.map +2 -2
- package/test/overlay-trigger-click.test.js +40 -8
- package/test/overlay-trigger-click.test.js.map +2 -2
- package/test/overlay-trigger-longpress.test.js +29 -11
- package/test/overlay-trigger-longpress.test.js.map +2 -2
- package/test/overlay-v1.test.js +235 -206
- package/test/overlay-v1.test.js.map +2 -2
- package/test/overlay.test.js +271 -242
- package/test/overlay.test.js.map +2 -2
|
@@ -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 receivesFocus: 'true' | 'false' | 'auto';\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\n/**\n * Proxy for fully encapsulated overlay containers that need to\n * pass `focus` into a shadow child element.\n */\nexport const receivesFocus = ({\n interaction,\n open,\n placement,\n receivesFocus,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">\n Open the overlay (with focus)\n </sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n .receivesFocus=${receivesFocus}\n >\n <a href=\"https://example.com\">Click Content</a>\n </sp-overlay>\n`;\nreceivesFocus.args = {\n interaction: 'click',\n placement: 'bottom-start',\n type: 'auto',\n receivesFocus: 'true',\n} as Properties;\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": ";AAWA,SAAS,YAA4B;AACrC,SAAS,iBAAiB;AAC1B,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAGP,SAAS,gBAAgB;AAEzB,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,IACF,MAAM;AAAA,IACN,SAAS;AAAA,EACb;AAAA,EACA,UAAU;AAAA,IACN,MAAM;AAAA,MACF,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AACJ;AAWA,MAAM,WAAW,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAkC;AAAA;AAAA;AAAA,
|
|
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 receivesFocus: 'true' | 'false' | 'auto';\n type?: OverlayTypes;\n};\n\nconst Template = ({\n interaction,\n open,\n placement,\n type,\n delayed,\n}: Properties): TemplateResult => html`\n <style>\n .wrapper {\n will-change: transform;\n }\n </style>\n <div class=\"wrapper\">\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 ?delayed=${delayed}>\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 </div>\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\n/**\n * Proxy for fully encapsulated overlay containers that need to\n * pass `focus` into a shadow child element.\n */\nexport const receivesFocus = ({\n interaction,\n open,\n placement,\n receivesFocus,\n type,\n}: Properties): TemplateResult => html`\n <sp-action-button id=\"trigger\">\n Open the overlay (with focus)\n </sp-action-button>\n <sp-overlay\n ?open=${open}\n trigger=\"trigger@${interaction}\"\n type=${ifDefined(type)}\n placement=${ifDefined(placement)}\n .receivesFocus=${receivesFocus}\n >\n <a href=\"https://example.com\">Click Content</a>\n </sp-overlay>\n`;\nreceivesFocus.args = {\n interaction: 'click',\n placement: 'bottom-start',\n type: 'auto',\n receivesFocus: 'true',\n} as Properties;\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": ["receivesFocus"]
|
|
7
7
|
}
|
package/test/index.js
CHANGED
|
@@ -14,6 +14,7 @@ import "@spectrum-web-components/popover/sp-popover.js";
|
|
|
14
14
|
import "@spectrum-web-components/theme/sp-theme.js";
|
|
15
15
|
import { sendMouse } from "../../../test/plugins/browser.js";
|
|
16
16
|
import { sendKeys } from "@web/test-runner-commands";
|
|
17
|
+
import { isWebKit } from "@spectrum-web-components/shared";
|
|
17
18
|
function pressKey(code) {
|
|
18
19
|
const up = new KeyboardEvent("keyup", {
|
|
19
20
|
bubbles: true,
|
|
@@ -295,6 +296,9 @@ export const runOverlayTriggerTests = (type) => {
|
|
|
295
296
|
).to.be.false;
|
|
296
297
|
});
|
|
297
298
|
it("opens a nested popover", async function() {
|
|
299
|
+
if (isWebKit()) {
|
|
300
|
+
this.skip();
|
|
301
|
+
}
|
|
298
302
|
expect(
|
|
299
303
|
await isOnTopLayer(this.outerClickContent),
|
|
300
304
|
"hover not available at point"
|
|
@@ -433,6 +437,9 @@ export const runOverlayTriggerTests = (type) => {
|
|
|
433
437
|
).to.be.false;
|
|
434
438
|
});
|
|
435
439
|
it("click closes an open popover", async function() {
|
|
440
|
+
if (isWebKit()) {
|
|
441
|
+
this.skip();
|
|
442
|
+
}
|
|
436
443
|
this.outerTrigger.type = "auto";
|
|
437
444
|
this.innerTrigger.type = "auto";
|
|
438
445
|
const outerOpen = oneEvent(this.outerButton, "sp-opened");
|
package/test/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.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*/\n\nimport { fixture, isOnTopLayer } from '../../../test/testing-helpers.js';\nimport {\n aTimeout,\n elementUpdated,\n expect,\n html,\n nextFrame,\n oneEvent,\n waitUntil,\n} from '@open-wc/testing';\n\nimport {\n OverlayTrigger,\n TriggerInteractions,\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/theme/sp-theme.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { sendKeys } from '@web/test-runner-commands';\n\nfunction pressKey(code: string): void {\n const up = new KeyboardEvent('keyup', {\n bubbles: true,\n cancelable: true,\n key: code,\n code,\n });\n document.dispatchEvent(up);\n}\n\nconst pressSpace = (): void => pressKey('Space');\n\nexport const runOverlayTriggerTests = (type: string): void => {\n describe(`Overlay Trigger - ${type}`, () => {\n describe('open/close', () => {\n beforeEach(async function () {\n this.testDiv = await fixture<HTMLDivElement>(\n html`\n <div>\n <style>\n body {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n </style>\n <overlay-trigger 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 >\n <sp-dialog\n no-divider\n class=\"options-popover-content\"\n >\n <overlay-trigger\n id=\"inner-trigger\"\n placement=\"bottom\"\n >\n <sp-button\n id=\"inner-button\"\n slot=\"trigger\"\n >\n Press Me\n </sp-button>\n <sp-popover\n id=\"inner-popover\"\n slot=\"click-content\"\n direction=\"bottom\"\n tip\n >\n <sp-dialog\n no-divider\n class=\"options-popover-content\"\n >\n Another Popover\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n <div\n id=\"hover-content\"\n slot=\"hover-content\"\n class=\"tooltip\"\n delay=\"100\"\n >\n Tooltip\n </div>\n </overlay-trigger>\n </div>\n `\n );\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n\n this.innerTrigger = this.testDiv.querySelector(\n '#inner-trigger'\n ) as OverlayTrigger;\n this.outerTrigger = this.testDiv.querySelector(\n '#trigger'\n ) as OverlayTrigger;\n this.innerButton = this.testDiv.querySelector(\n '#inner-button'\n ) as Button;\n this.outerButton = this.testDiv.querySelector(\n '#outer-button'\n ) as Button;\n this.innerClickContent = this.testDiv.querySelector(\n '#inner-popover'\n ) as Popover;\n this.outerClickContent = this.testDiv.querySelector(\n '#outer-popover'\n ) as Popover;\n this.hoverContent = this.testDiv.querySelector(\n '#hover-content'\n ) as HTMLDivElement;\n });\n\n it('opens a popover', async function () {\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover not available at point'\n ).to.be.false;\n\n expect(this.outerButton).to.exist;\n const open = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await open;\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n });\n\n it('[disabled] closes a popover', async function () {\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover not available at point'\n ).to.be.false;\n expect(this.outerTrigger.disabled).to.be.false;\n\n expect(this.outerButton).to.exist;\n\n const opened = oneEvent(this.outerButton, 'sp-opened');\n this.outerButton.click();\n await opened;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n\n const closed = oneEvent(this.outerButton, 'sp-closed');\n this.outerTrigger.disabled = true;\n await closed;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover not available at point'\n ).to.be.false;\n });\n\n it('resizes a popover', async function () {\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover not available at point'\n ).to.be.false;\n\n expect(this.outerButton).to.exist;\n const open = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await open;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n\n window.dispatchEvent(new Event('resize'));\n window.dispatchEvent(new Event('resize'));\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n });\n\n ['modal', 'replace', 'inline'].map((type: string) => {\n it(`opens a popover - [type=\"${type}\"]`, async function () {\n this.outerTrigger.type = type as Extract<\n TriggerInteractions,\n 'inline' | 'modal' | 'replace'\n >;\n await elementUpdated(this.outerTrigger);\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover not available at point'\n ).to.be.false;\n\n expect(this.outerButton).to.exist;\n const opened = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await opened;\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n });\n });\n\n it('does not open a hover popover when a click popover is open', async function () {\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover not available at point'\n ).to.be.false;\n expect(\n await isOnTopLayer(this.hoverContent),\n 'hover not available at point'\n ).to.be.false;\n\n expect(this.outerButton).to.exist;\n const open = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await open;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.hoverContent),\n 'hover not available at point'\n ).to.be.false;\n\n this.outerButton.dispatchEvent(\n new Event('mouseenter', {\n bubbles: true,\n composed: true,\n })\n );\n\n await nextFrame();\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.hoverContent),\n 'hover not available at point'\n ).to.be.false;\n });\n\n it('does not open a popover when [disabled]', async function () {\n const triggerZone = this.outerTrigger.shadowRoot.querySelector(\n '#trigger'\n ) as HTMLDivElement;\n\n expect(this.outerTrigger.disabled).to.be.false;\n let open = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await open;\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover available at point'\n ).to.be.true;\n let closed = oneEvent(this.outerTrigger, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [1, 1],\n },\n ],\n });\n await closed;\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover not available at point'\n ).to.be.false;\n\n this.outerTrigger.disabled = true;\n await elementUpdated(this.outerTrigger);\n\n expect(this.outerTrigger.disabled).to.be.true;\n expect(this.outerTrigger.hasAttribute('disabled')).to.be.true;\n // // The overlay shouldn't open here.\n this.outerButton.click();\n await aTimeout(150);\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover not available at point'\n ).to.be.false;\n // The overlay shouldn't open here, either.\n triggerZone.dispatchEvent(new Event('mouseenter'));\n await aTimeout(150);\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover not available at point'\n ).to.be.false;\n\n this.outerTrigger.disabled = false;\n await elementUpdated(this.outerTrigger);\n\n expect(this.outerTrigger.disabled).to.be.false;\n expect(this.outerTrigger.hasAttribute('disabled')).to.be.false;\n open = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await open;\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover available at point'\n ).to.be.true;\n closed = oneEvent(this.outerTrigger, 'sp-closed');\n this.outerButton.click();\n await closed;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover not available at point'\n ).to.be.false;\n });\n\n it('opens a nested popover', async function () {\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover not available at point'\n ).to.be.false;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'hover not available at point'\n ).to.be.false;\n\n expect(this.outerButton).to.exist;\n let open = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await open;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(await isOnTopLayer(this.innerClickContent)).to.be.false;\n\n open = oneEvent(this.innerTrigger, 'sp-opened');\n this.innerButton.click();\n await open;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content available at point'\n ).to.be.true;\n });\n\n it('focus previous \"modal\" when closing nested \"modal\"', async function () {\n this.outerTrigger.type = 'modal';\n this.innerTrigger.type = 'modal';\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content not available at point'\n ).to.be.false;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content not available at point'\n ).to.be.false;\n\n const outerOpen = oneEvent(this.outerButton, 'sp-opened');\n this.outerButton.click();\n await outerOpen;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content available at point'\n ).to.be.false;\n\n const innerOpen = oneEvent(this.innerButton, 'sp-opened');\n this.innerButton.click();\n await innerOpen;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content available at point'\n ).to.be.true;\n\n const innerClose = oneEvent(this.innerButton, 'sp-closed');\n await sendKeys({\n press: 'Escape',\n });\n await innerClose;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content not available at point'\n ).to.be.false;\n\n expect(\n document.activeElement === this.innerButton,\n 'outer popover recieved focus'\n ).to.be.true;\n });\n\n it('escape closes an open popover', async function () {\n this.outerTrigger.type = 'modal';\n this.innerTrigger.type = 'modal';\n const outerOpen = oneEvent(this.outerButton, 'sp-opened');\n this.outerButton.click();\n await outerOpen;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n\n const innerOpen = oneEvent(this.innerButton, 'sp-opened');\n this.innerButton.click();\n await innerOpen;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content available at point'\n ).to.be.true;\n\n pressSpace();\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content available at point'\n ).to.be.true;\n\n const innerClose = oneEvent(this.innerButton, 'sp-closed');\n await sendKeys({\n press: 'Escape',\n });\n await innerClose;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content not available at point'\n ).to.be.false;\n\n const outerClose = oneEvent(this.outerButton, 'sp-closed');\n await sendKeys({\n press: 'Escape',\n });\n await outerClose;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content not available at point'\n ).to.be.false;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content not available at point'\n ).to.be.false;\n });\n\n it('click closes an open popover', async function () {\n this.outerTrigger.type = 'auto';\n this.innerTrigger.type = 'auto';\n const outerOpen = oneEvent(this.outerButton, 'sp-opened');\n this.outerButton.click();\n await outerOpen;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content is available at point'\n ).to.be.true;\n\n const innerOpen = oneEvent(this.innerButton, 'sp-opened');\n this.innerButton.click();\n await innerOpen;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content is available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content is available at point'\n ).to.be.true;\n\n // Test that clicking in the overlay content does not close the overlay\n // 200ms is slightly more than the overlay animation fade out time (130ms)\n this.innerClickContent.click();\n await aTimeout(200);\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content is available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content is available at point'\n ).to.be.true;\n\n const innerClose = oneEvent(this.innerButton, 'sp-closed');\n const outerClose = oneEvent(this.outerButton, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [1, 1],\n },\n ],\n });\n await innerClose;\n await outerClose;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content is not available at point'\n ).to.be.not;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content is not available at point'\n ).to.be.not;\n });\n\n it('opens a hover popover', async function () {\n expect(await isOnTopLayer(this.hoverContent)).to.be.false;\n\n const rect = this.outerTrigger.getBoundingClientRect();\n const open = oneEvent(this.outerTrigger, 'sp-opened');\n sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n },\n ],\n });\n await open;\n expect(\n await isOnTopLayer(this.hoverContent),\n 'hover content is available at point'\n ).to.be.true;\n\n const close = oneEvent(this.outerTrigger, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rect.left + rect.width * 2,\n rect.top + rect.height / 2,\n ],\n },\n ],\n });\n await close;\n expect(\n await isOnTopLayer(this.hoverContent),\n 'hover content is not available at point'\n ).to.be.false;\n });\n\n it('closes a hover popover', async function () {\n expect(await isOnTopLayer(this.hoverContent)).to.be.false;\n\n const rect = this.outerTrigger.getBoundingClientRect();\n const close = oneEvent(this.outerTrigger, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n },\n ],\n });\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rect.left + rect.width * 2,\n rect.top + rect.height / 2,\n ],\n },\n ],\n });\n await close;\n expect(\n await isOnTopLayer(this.hoverContent),\n 'hover content is not available at point'\n ).to.be.false;\n });\n\n it('dispatches events on open/close', async function () {\n const opened = oneEvent(this.outerButton, 'sp-opened');\n this.outerButton.click();\n const openedEvent = await opened;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover content is available at point'\n ).to.be.true;\n expect(this.outerTrigger.open).to.equal('click');\n\n expect(openedEvent.detail.interaction).to.equal('auto');\n\n const closed = oneEvent(this.outerButton, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [1, 1],\n },\n ],\n });\n const closedEvent = await closed;\n expect(closedEvent.detail.interaction).to.equal('auto');\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover content is not available at point'\n ).to.be.false;\n });\n });\n describe('System interactions', () => {\n afterEach(async () => {\n const triggers = document.querySelectorAll('overlay-trigger');\n const closes: Promise<CustomEvent<unknown>>[] = [];\n triggers.forEach((trigger) => {\n if (trigger.open) {\n const close = oneEvent(trigger, 'sp-closed');\n trigger.open = undefined;\n closes.push(close);\n }\n });\n await Promise.all(closes);\n });\n it.skip('manages multiple layers of `type=\"modal\"', async () => {\n const el = await fixture(html`\n <overlay-trigger type=\"modal\">\n <sp-button slot=\"trigger\" variant=\"accent\">\n Toggle Dialog\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog no-divider>\n <overlay-trigger>\n <sp-button slot=\"trigger\" variant=\"primary\">\n Toggle Dialog\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog no-divider>\n <overlay-trigger type=\"modal\">\n <sp-button\n slot=\"trigger\"\n variant=\"secondary\"\n >\n Toggle Dialog\n </sp-button>\n <sp-popover\n slot=\"click-content\"\n >\n <sp-dialog no-divider>\n <p>\n When you get this\n deep, this\n ActiveOverlay should\n be the only one in\n [slot=\"open\"].\n </p>\n <p>\n All of the rest of\n the ActiveOverlay\n elements should have\n had their [slot]\n attribute removed.\n </p>\n <p>\n Closing this\n ActiveOverlay should\n replace them...\n </p>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `);\n const overlayTriggers = [\n ...el.querySelectorAll('overlay-trigger'),\n ];\n let activeOverlays = [\n ...document.querySelectorAll('active-overlay'),\n ];\n const triggers = [\n ...el.querySelectorAll('sp-button[slot=\"trigger\"]'),\n ] as Button[];\n\n expect(activeOverlays.length, 'no previous overlays').to.equal(\n 0\n );\n\n let open = oneEvent(triggers[0], 'sp-opened');\n triggers[0]?.click();\n await open;\n await elementUpdated(overlayTriggers[0]);\n activeOverlays = [\n ...document.querySelectorAll('active-overlay'),\n ];\n expect(\n activeOverlays.length,\n 'The first `active-overlay` element has been added.'\n ).to.equal(1);\n expect(\n activeOverlays[0].slot,\n 'first overlay, first time'\n ).to.equal('open');\n\n open = oneEvent(triggers[1], 'sp-opened');\n triggers[1]?.click();\n await open;\n await elementUpdated(overlayTriggers[1]);\n activeOverlays = [\n ...document.querySelectorAll('active-overlay'),\n ];\n expect(\n activeOverlays.length,\n 'The second `active-overlay` element has been added.'\n ).to.equal(2);\n\n expect(\n activeOverlays[0].slot,\n 'first overlay, second time'\n ).to.equal('open');\n expect(\n activeOverlays[1].slot,\n 'second overlay, second time'\n ).to.equal('open');\n\n open = oneEvent(triggers[2], 'sp-opened');\n triggers[2]?.click();\n await open;\n await elementUpdated(overlayTriggers[2]);\n activeOverlays = [\n ...document.querySelectorAll('active-overlay'),\n ];\n expect(\n activeOverlays.length,\n 'The third `active-overlay` element has been added.'\n ).to.equal(3);\n\n expect(\n activeOverlays[0].hasAttribute('slot'),\n 'first overlay, third time'\n ).to.be.false;\n expect(\n activeOverlays[1].hasAttribute('slot'),\n 'second overlay, third time'\n ).to.be.false;\n expect(\n activeOverlays[2].slot,\n 'third overlay, third time'\n ).to.equal('open');\n\n await nextFrame();\n const closed = oneEvent(triggers[2], 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [1, 1],\n },\n ],\n });\n await closed;\n await elementUpdated(overlayTriggers[2]);\n activeOverlays = [\n ...document.querySelectorAll('active-overlay'),\n ];\n expect(\n activeOverlays.length,\n 'The third `active-overlay` element has been removed.'\n ).to.equal(2);\n\n await waitUntil(() => {\n return activeOverlays[0].slot === 'open';\n }, 'first overlay, last time');\n expect(\n activeOverlays[1].slot,\n 'second overlay, last time'\n ).to.equal('open');\n });\n });\n });\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { fixture, isOnTopLayer } from '../../../test/testing-helpers.js';\nimport {\n aTimeout,\n elementUpdated,\n expect,\n html,\n nextFrame,\n oneEvent,\n waitUntil,\n} from '@open-wc/testing';\n\nimport {\n OverlayTrigger,\n TriggerInteractions,\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/theme/sp-theme.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { isWebKit } from '@spectrum-web-components/shared';\n\nfunction pressKey(code: string): void {\n const up = new KeyboardEvent('keyup', {\n bubbles: true,\n cancelable: true,\n key: code,\n code,\n });\n document.dispatchEvent(up);\n}\n\nconst pressSpace = (): void => pressKey('Space');\n\nexport const runOverlayTriggerTests = (type: string): void => {\n describe(`Overlay Trigger - ${type}`, () => {\n describe('open/close', () => {\n beforeEach(async function () {\n this.testDiv = await fixture<HTMLDivElement>(\n html`\n <div>\n <style>\n body {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n </style>\n <overlay-trigger 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 >\n <sp-dialog\n no-divider\n class=\"options-popover-content\"\n >\n <overlay-trigger\n id=\"inner-trigger\"\n placement=\"bottom\"\n >\n <sp-button\n id=\"inner-button\"\n slot=\"trigger\"\n >\n Press Me\n </sp-button>\n <sp-popover\n id=\"inner-popover\"\n slot=\"click-content\"\n direction=\"bottom\"\n tip\n >\n <sp-dialog\n no-divider\n class=\"options-popover-content\"\n >\n Another Popover\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n <div\n id=\"hover-content\"\n slot=\"hover-content\"\n class=\"tooltip\"\n delay=\"100\"\n >\n Tooltip\n </div>\n </overlay-trigger>\n </div>\n `\n );\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n\n this.innerTrigger = this.testDiv.querySelector(\n '#inner-trigger'\n ) as OverlayTrigger;\n this.outerTrigger = this.testDiv.querySelector(\n '#trigger'\n ) as OverlayTrigger;\n this.innerButton = this.testDiv.querySelector(\n '#inner-button'\n ) as Button;\n this.outerButton = this.testDiv.querySelector(\n '#outer-button'\n ) as Button;\n this.innerClickContent = this.testDiv.querySelector(\n '#inner-popover'\n ) as Popover;\n this.outerClickContent = this.testDiv.querySelector(\n '#outer-popover'\n ) as Popover;\n this.hoverContent = this.testDiv.querySelector(\n '#hover-content'\n ) as HTMLDivElement;\n });\n\n it('opens a popover', async function () {\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover not available at point'\n ).to.be.false;\n\n expect(this.outerButton).to.exist;\n const open = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await open;\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n });\n\n it('[disabled] closes a popover', async function () {\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover not available at point'\n ).to.be.false;\n expect(this.outerTrigger.disabled).to.be.false;\n\n expect(this.outerButton).to.exist;\n\n const opened = oneEvent(this.outerButton, 'sp-opened');\n this.outerButton.click();\n await opened;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n\n const closed = oneEvent(this.outerButton, 'sp-closed');\n this.outerTrigger.disabled = true;\n await closed;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover not available at point'\n ).to.be.false;\n });\n\n it('resizes a popover', async function () {\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover not available at point'\n ).to.be.false;\n\n expect(this.outerButton).to.exist;\n const open = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await open;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n\n window.dispatchEvent(new Event('resize'));\n window.dispatchEvent(new Event('resize'));\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n });\n\n ['modal', 'replace', 'inline'].map((type: string) => {\n it(`opens a popover - [type=\"${type}\"]`, async function () {\n this.outerTrigger.type = type as Extract<\n TriggerInteractions,\n 'inline' | 'modal' | 'replace'\n >;\n await elementUpdated(this.outerTrigger);\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover not available at point'\n ).to.be.false;\n\n expect(this.outerButton).to.exist;\n const opened = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await opened;\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n });\n });\n\n it('does not open a hover popover when a click popover is open', async function () {\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover not available at point'\n ).to.be.false;\n expect(\n await isOnTopLayer(this.hoverContent),\n 'hover not available at point'\n ).to.be.false;\n\n expect(this.outerButton).to.exist;\n const open = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await open;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.hoverContent),\n 'hover not available at point'\n ).to.be.false;\n\n this.outerButton.dispatchEvent(\n new Event('mouseenter', {\n bubbles: true,\n composed: true,\n })\n );\n\n await nextFrame();\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'popover available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.hoverContent),\n 'hover not available at point'\n ).to.be.false;\n });\n\n it('does not open a popover when [disabled]', async function () {\n const triggerZone = this.outerTrigger.shadowRoot.querySelector(\n '#trigger'\n ) as HTMLDivElement;\n\n expect(this.outerTrigger.disabled).to.be.false;\n let open = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await open;\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover available at point'\n ).to.be.true;\n let closed = oneEvent(this.outerTrigger, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [1, 1],\n },\n ],\n });\n await closed;\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover not available at point'\n ).to.be.false;\n\n this.outerTrigger.disabled = true;\n await elementUpdated(this.outerTrigger);\n\n expect(this.outerTrigger.disabled).to.be.true;\n expect(this.outerTrigger.hasAttribute('disabled')).to.be.true;\n // // The overlay shouldn't open here.\n this.outerButton.click();\n await aTimeout(150);\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover not available at point'\n ).to.be.false;\n // The overlay shouldn't open here, either.\n triggerZone.dispatchEvent(new Event('mouseenter'));\n await aTimeout(150);\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover not available at point'\n ).to.be.false;\n\n this.outerTrigger.disabled = false;\n await elementUpdated(this.outerTrigger);\n\n expect(this.outerTrigger.disabled).to.be.false;\n expect(this.outerTrigger.hasAttribute('disabled')).to.be.false;\n open = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await open;\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover available at point'\n ).to.be.true;\n closed = oneEvent(this.outerTrigger, 'sp-closed');\n this.outerButton.click();\n await closed;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover not available at point'\n ).to.be.false;\n });\n\n it('opens a nested popover', async function () {\n if (isWebKit()) {\n // breaks on https://bugs.webkit.org/show_bug.cgi?id=263081 skip for now.\n this.skip();\n }\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover not available at point'\n ).to.be.false;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'hover not available at point'\n ).to.be.false;\n\n expect(this.outerButton).to.exist;\n let open = oneEvent(this.outerTrigger, 'sp-opened');\n this.outerButton.click();\n await open;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(await isOnTopLayer(this.innerClickContent)).to.be.false;\n\n open = oneEvent(this.innerTrigger, 'sp-opened');\n this.innerButton.click();\n await open;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content available at point'\n ).to.be.true;\n });\n\n it('focus previous \"modal\" when closing nested \"modal\"', async function () {\n this.outerTrigger.type = 'modal';\n this.innerTrigger.type = 'modal';\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content not available at point'\n ).to.be.false;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content not available at point'\n ).to.be.false;\n\n const outerOpen = oneEvent(this.outerButton, 'sp-opened');\n this.outerButton.click();\n await outerOpen;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content available at point'\n ).to.be.false;\n\n const innerOpen = oneEvent(this.innerButton, 'sp-opened');\n this.innerButton.click();\n await innerOpen;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content available at point'\n ).to.be.true;\n\n const innerClose = oneEvent(this.innerButton, 'sp-closed');\n await sendKeys({\n press: 'Escape',\n });\n await innerClose;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content not available at point'\n ).to.be.false;\n\n expect(\n document.activeElement === this.innerButton,\n 'outer popover recieved focus'\n ).to.be.true;\n });\n\n it('escape closes an open popover', async function () {\n this.outerTrigger.type = 'modal';\n this.innerTrigger.type = 'modal';\n const outerOpen = oneEvent(this.outerButton, 'sp-opened');\n this.outerButton.click();\n await outerOpen;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n\n const innerOpen = oneEvent(this.innerButton, 'sp-opened');\n this.innerButton.click();\n await innerOpen;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content available at point'\n ).to.be.true;\n\n pressSpace();\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content available at point'\n ).to.be.true;\n\n const innerClose = oneEvent(this.innerButton, 'sp-closed');\n await sendKeys({\n press: 'Escape',\n });\n await innerClose;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content not available at point'\n ).to.be.false;\n\n const outerClose = oneEvent(this.outerButton, 'sp-closed');\n await sendKeys({\n press: 'Escape',\n });\n await outerClose;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content not available at point'\n ).to.be.false;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content not available at point'\n ).to.be.false;\n });\n\n it('click closes an open popover', async function () {\n if (isWebKit()) {\n // breaks on https://bugs.webkit.org/show_bug.cgi?id=263081 skip for now.\n this.skip();\n }\n this.outerTrigger.type = 'auto';\n this.innerTrigger.type = 'auto';\n const outerOpen = oneEvent(this.outerButton, 'sp-opened');\n this.outerButton.click();\n await outerOpen;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content is available at point'\n ).to.be.true;\n\n const innerOpen = oneEvent(this.innerButton, 'sp-opened');\n this.innerButton.click();\n await innerOpen;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content is available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content is available at point'\n ).to.be.true;\n\n // Test that clicking in the overlay content does not close the overlay\n // 200ms is slightly more than the overlay animation fade out time (130ms)\n this.innerClickContent.click();\n await aTimeout(200);\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content is available at point'\n ).to.be.true;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content is available at point'\n ).to.be.true;\n\n const innerClose = oneEvent(this.innerButton, 'sp-closed');\n const outerClose = oneEvent(this.outerButton, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [1, 1],\n },\n ],\n });\n await innerClose;\n await outerClose;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'outer click content is not available at point'\n ).to.be.not;\n expect(\n await isOnTopLayer(this.innerClickContent),\n 'inner click content is not available at point'\n ).to.be.not;\n });\n\n it('opens a hover popover', async function () {\n expect(await isOnTopLayer(this.hoverContent)).to.be.false;\n\n const rect = this.outerTrigger.getBoundingClientRect();\n const open = oneEvent(this.outerTrigger, 'sp-opened');\n sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n },\n ],\n });\n await open;\n expect(\n await isOnTopLayer(this.hoverContent),\n 'hover content is available at point'\n ).to.be.true;\n\n const close = oneEvent(this.outerTrigger, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rect.left + rect.width * 2,\n rect.top + rect.height / 2,\n ],\n },\n ],\n });\n await close;\n expect(\n await isOnTopLayer(this.hoverContent),\n 'hover content is not available at point'\n ).to.be.false;\n });\n\n it('closes a hover popover', async function () {\n expect(await isOnTopLayer(this.hoverContent)).to.be.false;\n\n const rect = this.outerTrigger.getBoundingClientRect();\n const close = oneEvent(this.outerTrigger, 'sp-closed');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n },\n ],\n });\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await nextFrame();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n rect.left + rect.width * 2,\n rect.top + rect.height / 2,\n ],\n },\n ],\n });\n await close;\n expect(\n await isOnTopLayer(this.hoverContent),\n 'hover content is not available at point'\n ).to.be.false;\n });\n\n it('dispatches events on open/close', async function () {\n const opened = oneEvent(this.outerButton, 'sp-opened');\n this.outerButton.click();\n const openedEvent = await opened;\n\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover content is available at point'\n ).to.be.true;\n expect(this.outerTrigger.open).to.equal('click');\n\n expect(openedEvent.detail.interaction).to.equal('auto');\n\n const closed = oneEvent(this.outerButton, 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [1, 1],\n },\n ],\n });\n const closedEvent = await closed;\n expect(closedEvent.detail.interaction).to.equal('auto');\n expect(\n await isOnTopLayer(this.outerClickContent),\n 'hover content is not available at point'\n ).to.be.false;\n });\n });\n describe('System interactions', () => {\n afterEach(async () => {\n const triggers = document.querySelectorAll('overlay-trigger');\n const closes: Promise<CustomEvent<unknown>>[] = [];\n triggers.forEach((trigger) => {\n if (trigger.open) {\n const close = oneEvent(trigger, 'sp-closed');\n trigger.open = undefined;\n closes.push(close);\n }\n });\n await Promise.all(closes);\n });\n it.skip('manages multiple layers of `type=\"modal\"', async () => {\n const el = await fixture(html`\n <overlay-trigger type=\"modal\">\n <sp-button slot=\"trigger\" variant=\"accent\">\n Toggle Dialog\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog no-divider>\n <overlay-trigger>\n <sp-button slot=\"trigger\" variant=\"primary\">\n Toggle Dialog\n </sp-button>\n <sp-popover slot=\"click-content\">\n <sp-dialog no-divider>\n <overlay-trigger type=\"modal\">\n <sp-button\n slot=\"trigger\"\n variant=\"secondary\"\n >\n Toggle Dialog\n </sp-button>\n <sp-popover\n slot=\"click-content\"\n >\n <sp-dialog no-divider>\n <p>\n When you get this\n deep, this\n ActiveOverlay should\n be the only one in\n [slot=\"open\"].\n </p>\n <p>\n All of the rest of\n the ActiveOverlay\n elements should have\n had their [slot]\n attribute removed.\n </p>\n <p>\n Closing this\n ActiveOverlay should\n replace them...\n </p>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n </sp-dialog>\n </sp-popover>\n </overlay-trigger>\n `);\n const overlayTriggers = [\n ...el.querySelectorAll('overlay-trigger'),\n ];\n let activeOverlays = [\n ...document.querySelectorAll('active-overlay'),\n ];\n const triggers = [\n ...el.querySelectorAll('sp-button[slot=\"trigger\"]'),\n ] as Button[];\n\n expect(activeOverlays.length, 'no previous overlays').to.equal(\n 0\n );\n\n let open = oneEvent(triggers[0], 'sp-opened');\n triggers[0]?.click();\n await open;\n await elementUpdated(overlayTriggers[0]);\n activeOverlays = [\n ...document.querySelectorAll('active-overlay'),\n ];\n expect(\n activeOverlays.length,\n 'The first `active-overlay` element has been added.'\n ).to.equal(1);\n expect(\n activeOverlays[0].slot,\n 'first overlay, first time'\n ).to.equal('open');\n\n open = oneEvent(triggers[1], 'sp-opened');\n triggers[1]?.click();\n await open;\n await elementUpdated(overlayTriggers[1]);\n activeOverlays = [\n ...document.querySelectorAll('active-overlay'),\n ];\n expect(\n activeOverlays.length,\n 'The second `active-overlay` element has been added.'\n ).to.equal(2);\n\n expect(\n activeOverlays[0].slot,\n 'first overlay, second time'\n ).to.equal('open');\n expect(\n activeOverlays[1].slot,\n 'second overlay, second time'\n ).to.equal('open');\n\n open = oneEvent(triggers[2], 'sp-opened');\n triggers[2]?.click();\n await open;\n await elementUpdated(overlayTriggers[2]);\n activeOverlays = [\n ...document.querySelectorAll('active-overlay'),\n ];\n expect(\n activeOverlays.length,\n 'The third `active-overlay` element has been added.'\n ).to.equal(3);\n\n expect(\n activeOverlays[0].hasAttribute('slot'),\n 'first overlay, third time'\n ).to.be.false;\n expect(\n activeOverlays[1].hasAttribute('slot'),\n 'second overlay, third time'\n ).to.be.false;\n expect(\n activeOverlays[2].slot,\n 'third overlay, third time'\n ).to.equal('open');\n\n await nextFrame();\n const closed = oneEvent(triggers[2], 'sp-closed');\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [1, 1],\n },\n ],\n });\n await closed;\n await elementUpdated(overlayTriggers[2]);\n activeOverlays = [\n ...document.querySelectorAll('active-overlay'),\n ];\n expect(\n activeOverlays.length,\n 'The third `active-overlay` element has been removed.'\n ).to.equal(2);\n\n await waitUntil(() => {\n return activeOverlays[0].slot === 'open';\n }, 'first overlay, last time');\n expect(\n activeOverlays[1].slot,\n 'second overlay, last time'\n ).to.equal('open');\n });\n });\n });\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["type"]
|
|
7
7
|
}
|
|
@@ -8,11 +8,13 @@ import {
|
|
|
8
8
|
waitUntil
|
|
9
9
|
} from "@open-wc/testing";
|
|
10
10
|
import "@spectrum-web-components/popover/sp-popover.js";
|
|
11
|
+
import "@spectrum-web-components/tooltip/sp-tooltip.js";
|
|
12
|
+
import "@spectrum-web-components/button/sp-button.js";
|
|
11
13
|
import "@spectrum-web-components/action-button/sp-action-button.js";
|
|
12
14
|
import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
|
|
13
15
|
import "@spectrum-web-components/overlay/overlay-trigger.js";
|
|
14
16
|
import { spy } from "sinon";
|
|
15
|
-
import { fixture,
|
|
17
|
+
import { fixture, isOnTopLayer } from "../../../test/testing-helpers.js";
|
|
16
18
|
describe("Overlay Trigger - Click", () => {
|
|
17
19
|
it("displays `click` declaratively", async () => {
|
|
18
20
|
const openedSpy = spy();
|
|
@@ -47,18 +49,25 @@ describe("Overlay Trigger - Click", () => {
|
|
|
47
49
|
});
|
|
48
50
|
});
|
|
49
51
|
describe("closes on scroll", () => {
|
|
50
|
-
afterEach(() => {
|
|
52
|
+
afterEach(async () => {
|
|
51
53
|
if (document.scrollingElement) {
|
|
52
54
|
document.scrollingElement.scrollTop = 0;
|
|
53
55
|
}
|
|
56
|
+
await waitUntil(() => {
|
|
57
|
+
if (document.scrollingElement) {
|
|
58
|
+
return document.scrollingElement.scrollTop === 0;
|
|
59
|
+
}
|
|
60
|
+
return true;
|
|
61
|
+
});
|
|
54
62
|
});
|
|
55
63
|
["click", "replace", "inline"].map(
|
|
56
64
|
(interaction) => {
|
|
57
|
-
it(`closes "${interaction}" overlay on scroll`, async ()
|
|
65
|
+
it(`closes "${interaction}" overlay on scroll`, async function() {
|
|
58
66
|
const el = await fixture(html`
|
|
59
67
|
<overlay-trigger
|
|
60
|
-
placement="right
|
|
68
|
+
placement="right"
|
|
61
69
|
type=${interaction}
|
|
70
|
+
content="click"
|
|
62
71
|
>
|
|
63
72
|
<sp-action-button
|
|
64
73
|
slot="trigger"
|
|
@@ -66,7 +75,9 @@ describe("Overlay Trigger - Click", () => {
|
|
|
66
75
|
>
|
|
67
76
|
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
68
77
|
</sp-action-button>
|
|
69
|
-
<sp-popover slot="click-content" tip
|
|
78
|
+
<sp-popover slot="click-content" tip>
|
|
79
|
+
Content
|
|
80
|
+
</sp-popover>
|
|
70
81
|
</overlay-trigger>
|
|
71
82
|
`);
|
|
72
83
|
await nextFrame();
|
|
@@ -74,17 +85,20 @@ describe("Overlay Trigger - Click", () => {
|
|
|
74
85
|
expect(el.open).to.be.undefined;
|
|
75
86
|
await elementUpdated(el);
|
|
76
87
|
const opened = oneEvent(el, "sp-opened");
|
|
77
|
-
|
|
88
|
+
const trigger = el.querySelector(
|
|
89
|
+
"sp-action-button"
|
|
90
|
+
);
|
|
91
|
+
trigger.click();
|
|
78
92
|
await opened;
|
|
79
93
|
expect(el.open).to.equal("click");
|
|
80
|
-
expect(await
|
|
94
|
+
expect(await isOnTopLayer(popover)).to.be.true;
|
|
81
95
|
const closed = oneEvent(el, "sp-closed");
|
|
82
96
|
if (document.scrollingElement) {
|
|
83
97
|
document.scrollingElement.scrollTop = 100;
|
|
84
98
|
}
|
|
85
99
|
await closed;
|
|
86
100
|
expect(el.open).to.be.undefined;
|
|
87
|
-
expect(await
|
|
101
|
+
expect(await isOnTopLayer(popover)).to.be.false;
|
|
88
102
|
});
|
|
89
103
|
}
|
|
90
104
|
);
|
|
@@ -128,5 +142,23 @@ describe("Overlay Trigger - Click", () => {
|
|
|
128
142
|
);
|
|
129
143
|
expect(el.open).to.equal("click");
|
|
130
144
|
});
|
|
145
|
+
it("opens with a delay on click", async () => {
|
|
146
|
+
const el = await fixture(html`
|
|
147
|
+
<overlay-trigger placement="right-start">
|
|
148
|
+
<sp-button slot="trigger" variant="primary"></sp-button>
|
|
149
|
+
<sp-tooltip
|
|
150
|
+
slot="click-content"
|
|
151
|
+
id="content"
|
|
152
|
+
delayed
|
|
153
|
+
></sp-tooltip>
|
|
154
|
+
</overlay-trigger>
|
|
155
|
+
`);
|
|
156
|
+
const start = performance.now();
|
|
157
|
+
const opened = oneEvent(el, "sp-opened");
|
|
158
|
+
el.setAttribute("open", "click");
|
|
159
|
+
await opened;
|
|
160
|
+
const end = performance.now();
|
|
161
|
+
expect(end - start).to.be.greaterThan(1e3);
|
|
162
|
+
});
|
|
131
163
|
});
|
|
132
164
|
//# sourceMappingURL=overlay-trigger-click.test.js.map
|
|
@@ -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 html,\n nextFrame,\n oneEvent,\n waitUntil,\n} from '@open-wc/testing';\nimport type { Popover } from '@spectrum-web-components/popover';\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 {\n OverlayTrigger,\n TriggerInteractionsV1,\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';\nimport { fixture,
|
|
5
|
-
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AAKP,OAAO;AACP,SAAS,WAAW;AAEpB,SAAS,SAAS,
|
|
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 html,\n nextFrame,\n oneEvent,\n waitUntil,\n} from '@open-wc/testing';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\n\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\nimport {\n OverlayTrigger,\n TriggerInteractionsV1,\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';\nimport { fixture, isOnTopLayer } from '../../../test/testing-helpers.js';\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\n await waitUntil(\n () => {\n return openedSpy.calledOnce;\n },\n 'click content projected to overlay',\n { timeout: 2000 }\n );\n\n await nextFrame();\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(async () => {\n if (document.scrollingElement) {\n document.scrollingElement.scrollTop = 0;\n }\n await waitUntil(() => {\n if (document.scrollingElement) {\n return document.scrollingElement.scrollTop === 0;\n }\n return true;\n });\n });\n (['click', 'replace', 'inline'] as TriggerInteractionsV1[]).map(\n (interaction) => {\n it(`closes \"${interaction}\" overlay on scroll`, async function () {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger\n placement=\"right\"\n type=${interaction}\n content=\"click\"\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>\n Content\n </sp-popover>\n </overlay-trigger>\n `);\n await nextFrame();\n const popover = el.querySelector('sp-popover') as Popover;\n expect(el.open).to.be.undefined;\n\n await elementUpdated(el);\n const opened = oneEvent(el, 'sp-opened');\n const trigger = el.querySelector(\n 'sp-action-button'\n ) as HTMLElement;\n trigger.click();\n\n await opened;\n\n expect(el.open).to.equal('click');\n\n expect(await isOnTopLayer(popover)).to.be.true;\n\n const closed = oneEvent(el, 'sp-closed');\n if (document.scrollingElement) {\n document.scrollingElement.scrollTop = 100;\n }\n\n await closed;\n\n expect(el.open).to.be.undefined;\n\n expect(await isOnTopLayer(popover)).to.be.false;\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 it('opens with a delay on click', async () => {\n const el = await fixture<OverlayTrigger>(html`\n <overlay-trigger placement=\"right-start\">\n <sp-button slot=\"trigger\" variant=\"primary\"></sp-button>\n <sp-tooltip\n slot=\"click-content\"\n id=\"content\"\n delayed\n ></sp-tooltip>\n </overlay-trigger>\n `);\n const start = performance.now();\n const opened = oneEvent(el, 'sp-opened');\n\n el.setAttribute('open', 'click');\n await opened;\n\n const end = performance.now();\n expect(end - start).to.be.greaterThan(1000);\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|