@spectrum-web-components/overlay 0.40.1 → 0.40.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -1
- package/custom-elements.json +36 -5
- package/package.json +7 -7
- package/src/AbstractOverlay.d.ts +19 -1
- package/src/AbstractOverlay.dev.js +17 -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.dev.js +1 -2
- package/src/Overlay.dev.js.map +2 -2
- package/src/Overlay.js +1 -1
- package/src/Overlay.js.map +2 -2
- package/src/OverlayDialog.dev.js +15 -18
- package/src/OverlayDialog.dev.js.map +2 -2
- package/src/OverlayDialog.js +1 -1
- package/src/OverlayDialog.js.map +3 -3
- package/src/OverlayNoPopover.dev.js +10 -14
- package/src/OverlayNoPopover.dev.js.map +2 -2
- package/src/OverlayNoPopover.js +1 -1
- package/src/OverlayNoPopover.js.map +3 -3
- package/src/OverlayPopover.dev.js +15 -22
- package/src/OverlayPopover.dev.js.map +2 -2
- package/src/OverlayPopover.js +1 -1
- package/src/OverlayPopover.js.map +3 -3
- package/src/OverlayStack.d.ts +1 -0
- package/src/OverlayStack.dev.js +12 -4
- package/src/OverlayStack.dev.js.map +2 -2
- package/src/OverlayStack.js +1 -1
- package/src/OverlayStack.js.map +3 -3
- package/src/OverlayTrigger.dev.js +1 -1
- package/src/OverlayTrigger.dev.js.map +2 -2
- package/src/OverlayTrigger.js +1 -1
- package/src/OverlayTrigger.js.map +2 -2
- package/src/PlacementController.d.ts +1 -0
- package/src/PlacementController.dev.js +24 -12
- package/src/PlacementController.dev.js.map +2 -2
- package/src/PlacementController.js +1 -1
- package/src/PlacementController.js.map +3 -3
- package/src/overlay-trigger.css.dev.js.map +1 -1
- package/src/overlay-trigger.css.js.map +1 -1
- package/src/overlay-types.d.ts +0 -6
- package/src/overlay-types.dev.js.map +1 -1
- package/src/overlay-types.js.map +1 -1
- package/src/overlay.css.dev.js +1 -1
- package/src/overlay.css.dev.js.map +1 -1
- package/src/overlay.css.js +1 -1
- package/src/overlay.css.js.map +1 -1
- package/src/topLayerOverTransforms.dev.js +8 -1
- package/src/topLayerOverTransforms.dev.js.map +2 -2
- package/src/topLayerOverTransforms.js +1 -1
- package/src/topLayerOverTransforms.js.map +2 -2
- package/stories/index.js +40 -0
- package/stories/index.js.map +7 -0
- package/stories/overlay-element.stories.js +75 -22
- package/stories/overlay-element.stories.js.map +2 -2
- package/stories/overlay.stories.js +79 -3
- package/stories/overlay.stories.js.map +3 -3
- package/test/index.js +20 -12
- package/test/index.js.map +2 -2
- package/test/overlay-element.test.js +4 -2
- package/test/overlay-element.test.js.map +2 -2
- package/test/overlay-trigger-longpress.test.js +27 -9
- package/test/overlay-trigger-longpress.test.js.map +2 -2
- package/test/overlay-update.test.js +5 -5
- package/test/overlay-update.test.js.map +2 -2
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { html } from "@spectrum-web-components/base";
|
|
3
3
|
import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
|
|
4
|
+
import "@spectrum-web-components/dialog/sp-dialog.js";
|
|
4
5
|
import "@spectrum-web-components/overlay/sp-overlay.js";
|
|
5
6
|
import "@spectrum-web-components/action-button/sp-action-button.js";
|
|
6
7
|
import "@spectrum-web-components/action-menu/sp-action-menu.js";
|
|
@@ -9,6 +10,7 @@ import "@spectrum-web-components/popover/sp-popover.js";
|
|
|
9
10
|
import "@spectrum-web-components/menu/sp-menu-group.js";
|
|
10
11
|
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
11
12
|
import "@spectrum-web-components/menu/sp-menu-divider.js";
|
|
13
|
+
import "@spectrum-web-components/link/sp-link.js";
|
|
12
14
|
import "@spectrum-web-components/tooltip/sp-tooltip.js";
|
|
13
15
|
import "@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js";
|
|
14
16
|
import "@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js";
|
|
@@ -54,13 +56,22 @@ const Template = ({
|
|
|
54
56
|
open,
|
|
55
57
|
placement,
|
|
56
58
|
type,
|
|
57
|
-
delayed
|
|
59
|
+
delayed,
|
|
60
|
+
style
|
|
58
61
|
}) => html`
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
${style === "will-change" ? html`
|
|
63
|
+
<style>
|
|
64
|
+
.wrapper {
|
|
65
|
+
will-change: transform;
|
|
66
|
+
}
|
|
67
|
+
</style>
|
|
68
|
+
` : html`
|
|
69
|
+
<style>
|
|
70
|
+
.wrapper {
|
|
71
|
+
container-type: size;
|
|
72
|
+
}
|
|
73
|
+
</style>
|
|
74
|
+
`}
|
|
64
75
|
<div class="wrapper">
|
|
65
76
|
<sp-action-button id="trigger">Open the overlay</sp-action-button>
|
|
66
77
|
<sp-overlay
|
|
@@ -70,19 +81,21 @@ const Template = ({
|
|
|
70
81
|
placement=${ifDefined(placement)}
|
|
71
82
|
offset="-10"
|
|
72
83
|
>
|
|
73
|
-
<sp-popover
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
<sp-popover ?delayed=${delayed}>
|
|
85
|
+
<sp-dialog size="s" no-divider>
|
|
86
|
+
<p>
|
|
87
|
+
Content goes here.
|
|
88
|
+
${type === "modal" || type === "page" ? html`
|
|
89
|
+
Or, a link,
|
|
90
|
+
<sp-link
|
|
91
|
+
href="https://opensource.adobe.com/spectrum-web-components"
|
|
92
|
+
>
|
|
93
|
+
Spectrum Web Components
|
|
94
|
+
</sp-link>
|
|
95
|
+
.
|
|
96
|
+
` : ""}
|
|
97
|
+
</p>
|
|
98
|
+
</sp-dialog>
|
|
86
99
|
</sp-popover>
|
|
87
100
|
</sp-overlay>
|
|
88
101
|
</div>
|
|
@@ -91,6 +104,7 @@ export const modal = (args) => Template(args);
|
|
|
91
104
|
modal.args = {
|
|
92
105
|
interaction: "click",
|
|
93
106
|
placement: "right",
|
|
107
|
+
style: "will-change",
|
|
94
108
|
type: "modal"
|
|
95
109
|
};
|
|
96
110
|
export const page = ({
|
|
@@ -118,10 +132,40 @@ export const click = (args) => Template(args);
|
|
|
118
132
|
click.args = {
|
|
119
133
|
interaction: "click",
|
|
120
134
|
placement: "right",
|
|
135
|
+
style: "container-type",
|
|
121
136
|
type: "auto"
|
|
122
137
|
};
|
|
123
138
|
export const hover = (args) => Template(args);
|
|
124
139
|
hover.args = {
|
|
140
|
+
interaction: "hover",
|
|
141
|
+
placement: "right",
|
|
142
|
+
style: "will-change"
|
|
143
|
+
};
|
|
144
|
+
export const hoverTooltip = ({
|
|
145
|
+
interaction,
|
|
146
|
+
open,
|
|
147
|
+
placement,
|
|
148
|
+
type
|
|
149
|
+
}) => html`
|
|
150
|
+
<style>
|
|
151
|
+
.wrapper {
|
|
152
|
+
will-change: transform;
|
|
153
|
+
}
|
|
154
|
+
</style>
|
|
155
|
+
<div class="wrapper">
|
|
156
|
+
<sp-action-button id="trigger">Open the overlay</sp-action-button>
|
|
157
|
+
<sp-overlay
|
|
158
|
+
?open=${open}
|
|
159
|
+
trigger="trigger@${interaction}"
|
|
160
|
+
type=${ifDefined(type)}
|
|
161
|
+
placement=${ifDefined(placement)}
|
|
162
|
+
offset="-10"
|
|
163
|
+
>
|
|
164
|
+
<sp-tooltip>Tooltip goes here.</sp-tooltip>
|
|
165
|
+
</sp-overlay>
|
|
166
|
+
</div>
|
|
167
|
+
`;
|
|
168
|
+
hoverTooltip.args = {
|
|
125
169
|
interaction: "hover",
|
|
126
170
|
placement: "right"
|
|
127
171
|
};
|
|
@@ -129,6 +173,7 @@ export const longpress = (args) => Template(args);
|
|
|
129
173
|
longpress.args = {
|
|
130
174
|
interaction: "longpress",
|
|
131
175
|
placement: "right",
|
|
176
|
+
style: "container-type",
|
|
132
177
|
type: "auto"
|
|
133
178
|
};
|
|
134
179
|
export const receivesFocus = ({
|
|
@@ -148,7 +193,11 @@ export const receivesFocus = ({
|
|
|
148
193
|
placement=${ifDefined(placement)}
|
|
149
194
|
.receivesFocus=${receivesFocus2}
|
|
150
195
|
>
|
|
151
|
-
<
|
|
196
|
+
<sp-popover>
|
|
197
|
+
<sp-dialog size="s" no-divider>
|
|
198
|
+
<a href="https://example.com">Click Content</a>
|
|
199
|
+
</sp-dialog>
|
|
200
|
+
</sp-popover>
|
|
152
201
|
</sp-overlay>
|
|
153
202
|
`;
|
|
154
203
|
receivesFocus.args = {
|
|
@@ -202,13 +251,17 @@ export const all = ({ delayed }) => html`
|
|
|
202
251
|
Open the overlay
|
|
203
252
|
</sp-action-button>
|
|
204
253
|
<sp-overlay trigger="trigger@click" type="auto" placement="right">
|
|
205
|
-
<sp-popover
|
|
254
|
+
<sp-popover>
|
|
255
|
+
<sp-dialog size="s" no-divider>Click content</sp-dialog>
|
|
256
|
+
</sp-popover>
|
|
206
257
|
</sp-overlay>
|
|
207
258
|
<sp-overlay ?delayed=${delayed} trigger="trigger@hover" type="hint">
|
|
208
259
|
<sp-tooltip>Hover content</sp-tooltip>
|
|
209
260
|
</sp-overlay>
|
|
210
261
|
<sp-overlay trigger="trigger@longpress" type="auto" placement="right">
|
|
211
|
-
<sp-popover
|
|
262
|
+
<sp-popover>
|
|
263
|
+
<sp-dialog size="s" no-divider>Longpress content</sp-dialog>
|
|
264
|
+
</sp-popover>
|
|
212
265
|
</sp-overlay>
|
|
213
266
|
`;
|
|
214
267
|
export const actionGroup = ({ delayed }) => {
|
|
@@ -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';\nimport './overlay-story-components.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\n// Test #3795 in browser\nexport const transientHover = (): TemplateResult => html`\n <transient-hover></transient-hover>\n`;\ntransientHover.swc_vrt = {\n skip: true,\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;AACzB,OAAO;AAEP,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;
|
|
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/dialog/sp-dialog.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/link/sp-link.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';\nimport './overlay-story-components.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 WrapperStyleType = 'will-change' | 'container-type';\n\ntype Properties = {\n delayed: boolean;\n interaction: 'click' | 'hover' | 'longpress';\n open?: boolean;\n placement?: Placement;\n receivesFocus: 'true' | 'false' | 'auto';\n style?: WrapperStyleType;\n type?: OverlayTypes;\n};\n\nconst Template = ({\n interaction,\n open,\n placement,\n type,\n delayed,\n style,\n}: Properties): TemplateResult => html`\n ${style === 'will-change'\n ? html`\n <style>\n .wrapper {\n will-change: transform;\n }\n </style>\n `\n : html`\n <style>\n .wrapper {\n container-type: size;\n }\n </style>\n `}\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 ?delayed=${delayed}>\n <sp-dialog size=\"s\" no-divider>\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-dialog>\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 style: 'will-change',\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 style: 'container-type' as WrapperStyleType,\n type: 'auto',\n};\n\nexport const hover = (args: Properties): TemplateResult => Template(args);\nhover.args = {\n interaction: 'hover',\n placement: 'right',\n style: 'will-change',\n};\n\nexport const hoverTooltip = ({\n interaction,\n open,\n placement,\n type,\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-tooltip>Tooltip goes here.</sp-tooltip>\n </sp-overlay>\n </div>\n`;\nhoverTooltip.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 style: 'container-type',\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 <sp-popover>\n <sp-dialog size=\"s\" no-divider>\n <a href=\"https://example.com\">Click Content</a>\n </sp-dialog>\n </sp-popover>\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>\n <sp-dialog size=\"s\" no-divider>Click content</sp-dialog>\n </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>\n <sp-dialog size=\"s\" no-divider>Longpress content</sp-dialog>\n </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\n// Test #3795 in browser\nexport const transientHover = (): TemplateResult => html`\n <transient-hover></transient-hover>\n`;\ntransientHover.swc_vrt = {\n skip: true,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["receivesFocus"]
|
|
7
7
|
}
|
|
@@ -196,7 +196,12 @@ function nextFrame() {
|
|
|
196
196
|
export const Default = (args) => template(args);
|
|
197
197
|
export const accordion = () => {
|
|
198
198
|
return html`
|
|
199
|
-
<overlay-trigger type="modal" placement="
|
|
199
|
+
<overlay-trigger type="modal" placement="top-start">
|
|
200
|
+
<style>
|
|
201
|
+
sp-button {
|
|
202
|
+
margin-top: 70vh;
|
|
203
|
+
}
|
|
204
|
+
</style>
|
|
200
205
|
<sp-button variant="primary" slot="trigger">
|
|
201
206
|
Open overlay w/ accordion
|
|
202
207
|
</sp-button>
|
|
@@ -500,13 +505,13 @@ export const deep = () => html`
|
|
|
500
505
|
<sp-popover slot="click-content" direction="bottom" tip>
|
|
501
506
|
<sp-dialog size="s" no-divider>
|
|
502
507
|
<sp-action-button>
|
|
503
|
-
<sp-tooltip self-managed placement="bottom"
|
|
508
|
+
<sp-tooltip self-managed placement="bottom">
|
|
504
509
|
My Tooltip 1
|
|
505
510
|
</sp-tooltip>
|
|
506
511
|
A
|
|
507
512
|
</sp-action-button>
|
|
508
513
|
<sp-action-button>
|
|
509
|
-
<sp-tooltip self-managed placement="bottom"
|
|
514
|
+
<sp-tooltip self-managed placement="bottom">
|
|
510
515
|
My Tooltip 1
|
|
511
516
|
</sp-tooltip>
|
|
512
517
|
B
|
|
@@ -1288,4 +1293,75 @@ export const virtualElement = (args) => {
|
|
|
1288
1293
|
virtualElement.args = {
|
|
1289
1294
|
placement: "right-start"
|
|
1290
1295
|
};
|
|
1296
|
+
export const virtualElementDeclaratively = (args) => {
|
|
1297
|
+
const handleContextmenu = async (event) => {
|
|
1298
|
+
event.preventDefault();
|
|
1299
|
+
event.stopPropagation();
|
|
1300
|
+
const overlay2 = document.querySelector(
|
|
1301
|
+
"sp-overlay:not([open])"
|
|
1302
|
+
);
|
|
1303
|
+
if (overlay2.triggerElement instanceof VirtualTrigger) {
|
|
1304
|
+
overlay2.triggerElement.updateBoundingClientRect(
|
|
1305
|
+
event.clientX,
|
|
1306
|
+
event.clientY
|
|
1307
|
+
);
|
|
1308
|
+
}
|
|
1309
|
+
overlay2.willPreventClose = true;
|
|
1310
|
+
overlay2.open = true;
|
|
1311
|
+
};
|
|
1312
|
+
const overlay = () => html`
|
|
1313
|
+
<sp-overlay
|
|
1314
|
+
offset="0"
|
|
1315
|
+
type="auto"
|
|
1316
|
+
placement=${args.placement}
|
|
1317
|
+
.triggerElement=${new VirtualTrigger(0, 0)}
|
|
1318
|
+
>
|
|
1319
|
+
<sp-popover
|
|
1320
|
+
style="width:300px;"
|
|
1321
|
+
@change=${(event) => {
|
|
1322
|
+
var _a;
|
|
1323
|
+
(_a = event.target) == null ? void 0 : _a.dispatchEvent(
|
|
1324
|
+
new Event("close", { bubbles: true })
|
|
1325
|
+
);
|
|
1326
|
+
}}
|
|
1327
|
+
>
|
|
1328
|
+
<sp-menu>
|
|
1329
|
+
<sp-menu-group>
|
|
1330
|
+
<span slot="header">Menu</span>
|
|
1331
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
1332
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
1333
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
1334
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
1335
|
+
<sp-menu-divider></sp-menu-divider>
|
|
1336
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
1337
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
1338
|
+
</sp-menu-group>
|
|
1339
|
+
</sp-menu>
|
|
1340
|
+
</sp-popover>
|
|
1341
|
+
</sp-overlay>
|
|
1342
|
+
`;
|
|
1343
|
+
return html`
|
|
1344
|
+
<style>
|
|
1345
|
+
.app-root {
|
|
1346
|
+
position: absolute;
|
|
1347
|
+
inset: 0;
|
|
1348
|
+
}
|
|
1349
|
+
</style>
|
|
1350
|
+
<div
|
|
1351
|
+
class="app-root"
|
|
1352
|
+
@contextmenu=${{
|
|
1353
|
+
capture: true,
|
|
1354
|
+
handleEvent: handleContextmenu
|
|
1355
|
+
}}
|
|
1356
|
+
>
|
|
1357
|
+
${overlay()} ${overlay()}
|
|
1358
|
+
</div>
|
|
1359
|
+
`;
|
|
1360
|
+
};
|
|
1361
|
+
virtualElementDeclaratively.args = {
|
|
1362
|
+
placement: "right-start"
|
|
1363
|
+
};
|
|
1364
|
+
virtualElementDeclaratively.swc_vrt = {
|
|
1365
|
+
skip: true
|
|
1366
|
+
};
|
|
1291
1367
|
//# sourceMappingURL=overlay.stories.js.map
|