@cas-smartdesign/popover 6.0.3 → 6.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/docs/4_manual_trigger_on_focus.js +1 -0
  2. package/dist/docs/doc.css +1 -1
  3. package/dist/docs/doc.mjs +70 -14
  4. package/dist/popover.d.ts +14 -1
  5. package/dist/popover.d.ts.map +1 -1
  6. package/dist/popover.mjs +46 -26
  7. package/dist/popover.mjs.map +1 -1
  8. package/package.json +5 -3
  9. package/readme.md +6 -1
package/dist/popover.d.ts CHANGED
@@ -46,6 +46,13 @@ export default class Popover extends HTMLElement {
46
46
  private reConfigurePopper;
47
47
  get noArrow(): boolean;
48
48
  set noArrow(noArrow: boolean);
49
+ /**
50
+ * Places the popover with top/left instead of a CSS transform. A transformed element is the containing block of
51
+ * its position: fixed descendants, so content positioned by viewport coordinates (e.g. a flyout of its own) needs
52
+ * it.
53
+ */
54
+ get noTransform(): boolean;
55
+ set noTransform(noTransform: boolean);
49
56
  static get observedAttributes(): string[];
50
57
  attributeChangedCallback(name: string, oldValue: string): void;
51
58
  connectedCallback(): void;
@@ -62,7 +69,13 @@ export default class Popover extends HTMLElement {
62
69
  private handleTargetSelectorChange;
63
70
  private addTargetEventListener;
64
71
  private removeTargetEventListener;
65
- private configurePopper;
72
+ /**
73
+ * Popper listens to the scroll and resize events of the window and of the scroll parents while it exists, so it
74
+ * lives only while the popover is open; otherwise every closed popover would be kept alive and repositioned.
75
+ */
76
+ private createPopper;
77
+ private destroyPopper;
78
+ private popperOptions;
66
79
  private createContentContainer;
67
80
  private ensureArrowIsAdded;
68
81
  updatePopper(): void;
package/dist/popover.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../popover.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../popover.ts"],"names":[],"mappings":"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"}
package/dist/popover.mjs CHANGED
@@ -11,7 +11,7 @@ var t = 1, n = "sd-popover-open", r = 0, i = () => (r++, r), a = class r extends
11
11
  this.open = !1;
12
12
  }, this.hideIfExternalTarget = (e) => {
13
13
  let t = e.target;
14
- (!(t instanceof HTMLElement) || this._container == null || this.targetElement == null || !this._container.contains(t) && !this.targetElement.contains(t)) && this.hide();
14
+ t instanceof Element && !this._container?.contains(t) && !this.targetElement?.contains(t) && this.hide();
15
15
  }, this.handleTabKeyDown = (e) => {
16
16
  if (e.key !== "Tab") return;
17
17
  let t = e.shiftKey, n = null, r = e.target, i = this.content;
@@ -81,7 +81,7 @@ var t = 1, n = "sd-popover-open", r = 0, i = () => (r++, r), a = class r extends
81
81
  e ? this.setAttribute("offset", e.toString()) : this.removeAttribute("offset"), this.reConfigurePopper();
82
82
  }
83
83
  reConfigurePopper() {
84
- this._popper && this.configurePopper();
84
+ this._popper?.setOptions(this.popperOptions());
85
85
  }
86
86
  get noArrow() {
87
87
  return this.hasAttribute("no-arrow");
@@ -89,6 +89,17 @@ var t = 1, n = "sd-popover-open", r = 0, i = () => (r++, r), a = class r extends
89
89
  set noArrow(e) {
90
90
  e ? this.setAttribute("no-arrow", "") : this.removeAttribute("no-arrow");
91
91
  }
92
+ /**
93
+ * Places the popover with top/left instead of a CSS transform. A transformed element is the containing block of
94
+ * its position: fixed descendants, so content positioned by viewport coordinates (e.g. a flyout of its own) needs
95
+ * it.
96
+ */
97
+ get noTransform() {
98
+ return this.hasAttribute("no-transform");
99
+ }
100
+ set noTransform(e) {
101
+ e ? this.setAttribute("no-transform", "") : this.removeAttribute("no-transform"), this.reConfigurePopper();
102
+ }
92
103
  static get observedAttributes() {
93
104
  return [
94
105
  "placement",
@@ -128,8 +139,7 @@ var t = 1, n = "sd-popover-open", r = 0, i = () => (r++, r), a = class r extends
128
139
  }
129
140
  handleOpenChange() {
130
141
  if (this.open) {
131
- if (this._popper || this.configurePopper(), this._container == null) return;
132
- this._container.innerHTML = "";
142
+ this._container ??= this.createContentContainer(), this._container.innerHTML = "";
133
143
  let e = document.createElement("style");
134
144
  e.innerHTML = `#${this.popoverContainerId} {
135
145
  box-shadow: var(--effect-shadow-strong, 1px 4px 24px 0 rgba(17, 17, 17, 0.5));
@@ -160,8 +170,8 @@ var t = 1, n = "sd-popover-open", r = 0, i = () => (r++, r), a = class r extends
160
170
  if (e == "rgba(0, 0, 0, 0)" && (this.content.style.background = e = "var(--color-bg-default, #ffffff)"), !this._arrow) return;
161
171
  let t = this._arrow.querySelector(".arrow-background");
162
172
  t && (t.style.fill = e);
163
- })), this.ensureArrowIsAdded(), this.ownerDocument.body.appendChild(this._container), this._container.popover = this.triggerType === "hover" ? "manual" : "auto", this._container.matches(":popover-open") || this._container.showPopover({ source: this.targetElement }), this.updatePopper(), this.setAttribute("open", ""), this.modal && (window.addEventListener("click", this.hideIfExternalTarget, { capture: !0 }), window.addEventListener("focus", this.hideIfExternalTarget, { capture: !0 })), this.targetElement && (this.addTargetClassForOpen(this.targetElement), this.targetElement.setAttribute("aria-expanded", "true")), this.dispatchEvent(new CustomEvent("sd-popover-open")), this._container.addEventListener("keydown", this.handleTabKeyDown);
164
- } else this._container != null && (this._container.matches(":popover-open") && this._container.hidePopover(), this._container.remove()), this.removeAttribute("open"), window.removeEventListener("click", this.hideIfExternalTarget, { capture: !0 }), window.removeEventListener("focus", this.hideIfExternalTarget, { capture: !0 }), this.targetElement && (this.removeTargetClassForOpen(this.targetElement), this.targetElement.setAttribute("aria-expanded", "false")), this.dispatchEvent(new CustomEvent("sd-popover-close")), this._container != null && this._container.removeEventListener("keydown", this.handleTabKeyDown);
173
+ })), this.ensureArrowIsAdded(), this.ownerDocument.body.appendChild(this._container), this._container.popover = this.triggerType === "hover" || this.triggerType === "manual" ? "manual" : "auto", this._container.matches(":popover-open") || this._container.showPopover({ source: this.targetElement }), this.createPopper(this._container), this.setAttribute("open", ""), this.modal && (window.addEventListener("click", this.hideIfExternalTarget, { capture: !0 }), window.addEventListener("focus", this.hideIfExternalTarget, { capture: !0 })), this.targetElement && (this.addTargetClassForOpen(this.targetElement), this.targetElement.setAttribute("aria-expanded", "true")), this.dispatchEvent(new CustomEvent("sd-popover-open")), this._container.addEventListener("keydown", this.handleTabKeyDown);
174
+ } else this._container != null && (this._container.matches(":popover-open") && this._container.hidePopover(), this._container.remove()), this.destroyPopper(), this.removeAttribute("open"), window.removeEventListener("click", this.hideIfExternalTarget, { capture: !0 }), window.removeEventListener("focus", this.hideIfExternalTarget, { capture: !0 }), this.targetElement && (this.removeTargetClassForOpen(this.targetElement), this.targetElement.setAttribute("aria-expanded", "false")), this.dispatchEvent(new CustomEvent("sd-popover-close")), this._container != null && this._container.removeEventListener("keydown", this.handleTabKeyDown);
165
175
  }
166
176
  handleTargetSelectorChange(e) {
167
177
  if (e != null) {
@@ -193,23 +203,35 @@ var t = 1, n = "sd-popover-open", r = 0, i = () => (r++, r), a = class r extends
193
203
  break;
194
204
  }
195
205
  }
196
- configurePopper() {
197
- this.createContentContainer(), this.ensureArrowIsAdded();
198
- let t = this, n = {
199
- placement: t.placement,
206
+ /**
207
+ * Popper listens to the scroll and resize events of the window and of the scroll parents while it exists, so it
208
+ * lives only while the popover is open; otherwise every closed popover would be kept alive and repositioned.
209
+ */
210
+ createPopper(t) {
211
+ this.destroyPopper(), this._popper = e(this.targetElement ?? document.body, t, this.popperOptions()), this._resizeObserver = new ResizeObserver(() => {
212
+ this._popper?.update();
213
+ }), this._resizeObserver.observe(t);
214
+ }
215
+ destroyPopper() {
216
+ this._resizeObserver?.disconnect(), this._resizeObserver = void 0, this._popper?.destroy(), this._popper = void 0;
217
+ }
218
+ popperOptions() {
219
+ let e = this;
220
+ return {
221
+ placement: e.placement,
200
222
  strategy: "absolute",
201
223
  modifiers: [
202
224
  {
203
225
  name: "computeStyles",
204
- options: { gpuAcceleration: !0 }
226
+ options: { gpuAcceleration: !e.noTransform }
205
227
  },
206
228
  {
207
229
  name: "flip",
208
- options: { fallbackPlacements: t._flipPriority }
230
+ options: { fallbackPlacements: e._flipPriority }
209
231
  },
210
232
  {
211
233
  name: "offset",
212
- options: { offset: () => [0, t.noArrow ? 0 + t.offset : this._arrow?.clientHeight ?? 0 + t.offset] }
234
+ options: { offset: () => [0, e.noArrow ? 0 + e.offset : this._arrow?.clientHeight ?? 0 + e.offset] }
213
235
  },
214
236
  {
215
237
  name: "arrow",
@@ -219,12 +241,12 @@ var t = 1, n = "sd-popover-open", r = 0, i = () => (r++, r), a = class r extends
219
241
  name: "resetArrowStyles",
220
242
  enabled: !0,
221
243
  phase: "beforeWrite",
222
- fn({ state: e }) {
223
- t._arrow && e.styles.arrow && Object.assign(t._arrow.style, {
224
- top: e.styles.arrow.top || "",
225
- left: e.styles.arrow.left || "",
226
- bottom: e.styles.arrow.bottom || "",
227
- right: e.styles.arrow.right || ""
244
+ fn({ state: t }) {
245
+ e._arrow && t.styles.arrow && Object.assign(e._arrow.style, {
246
+ top: t.styles.arrow.top || "",
247
+ left: t.styles.arrow.left || "",
248
+ bottom: t.styles.arrow.bottom || "",
249
+ right: t.styles.arrow.right || ""
228
250
  });
229
251
  }
230
252
  },
@@ -232,20 +254,18 @@ var t = 1, n = "sd-popover-open", r = 0, i = () => (r++, r), a = class r extends
232
254
  name: "onUpdate",
233
255
  enabled: !0,
234
256
  phase: "afterWrite",
235
- fn({ state: e }) {
236
- t.updateArrow(e.placement);
257
+ fn({ state: t }) {
258
+ e.updateArrow(t.placement);
237
259
  }
238
260
  }
239
261
  ]
240
262
  };
241
- this._popper = e(this.targetElement, this._container, n);
242
263
  }
243
264
  createContentContainer() {
244
- this._container = document.createElement("div"), this._container.id = this.popoverContainerId, this._container.classList.add("popover-container"), this._container.tabIndex = 0, this._container.addEventListener("toggle", (e) => {
265
+ let e = document.createElement("div");
266
+ return e.id = this.popoverContainerId, e.classList.add("popover-container"), e.tabIndex = 0, e.addEventListener("toggle", (e) => {
245
267
  e.newState === "closed" && this.open && this.hide();
246
- }), this._resizeObserver && this._resizeObserver.disconnect(), this._resizeObserver = new ResizeObserver(() => {
247
- this._popper && this._popper.update();
248
- }), this._resizeObserver.observe(this._container);
268
+ }), e;
249
269
  }
250
270
  ensureArrowIsAdded() {
251
271
  this._container && this._arrow && !this.noArrow && !this._container.contains(this._arrow) && this._container.appendChild(this._arrow);
package/dist/popover.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"popover.mjs","names":[],"sources":["../arrow.svg?raw","../popover.ts"],"sourcesContent":["export default \"<svg width=\\\"26\\\" height=\\\"12\\\" viewBox=\\\"0 0 26 12\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\r\\n<path d=\\\"M13.7072 0.707031L0.707153 0.707031L9.87873 9.8786C11.4408 11.4407 13.9735 11.4407 15.5356 9.8786L24.7072 0.707031L13.7072 0.707031Z\\\" fill=\\\"var(--color-bg-default, #ffffff)\\\" class=\\\"arrow-background\\\"/>\\r\\n<path d=\\\"M0.707153 0.707031L9.87872 9.8786C11.4408 11.4407 13.9735 11.4407 15.5356 9.8786L24.7072 0.707031\\\" stroke=\\\"var(--color-border-default, #d4d4d4)\\\" stroke-linecap=\\\"square\\\" class=\\\"arrow-border\\\"/>\\r\\n</svg>\\r\\n\"","import { createPopper, type Instance as Popper, type Options, type Placement } from \"@popperjs/core\";\n\nimport { default as arrowSvg } from \"./arrow.svg?raw\";\n\nconst arrowOverlapOffset = 1;\nconst targetClassOpen = \"sd-popover-open\";\n\nlet idCounter = 0;\nconst nextId = () => {\n idCounter++;\n return idCounter;\n};\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [Popover.ID]: Popover;\n }\n interface HTMLElementEventMap {\n \"sd-popover-open\": CustomEvent<IOpenEvent>;\n \"sd-popover-close\": CustomEvent<ICloseEvent>;\n }\n}\n\nexport type TriggerType = \"click\" | \"hover\" | \"manual\";\nexport type ArrowVariant = \"bottom\" | \"left\" | \"right\" | \"top\";\nexport type IOpenEvent = void;\nexport type ICloseEvent = void;\n\nexport default class Popover extends HTMLElement {\n public static readonly ID = \"sd-popover\";\n public static ensureDefined = () => {\n if (!customElements.get(Popover.ID)) {\n customElements.define(Popover.ID, Popover);\n }\n };\n private popoverContainerId = \"popover-container-\" + nextId();\n\n private _open = false;\n private _popper?: Popper;\n private _targetElement?: HTMLElement;\n private _container?: HTMLElement;\n private _arrow?: HTMLElement;\n private _content?: HTMLElement;\n private _firstUpdated = false;\n private _flipPriority?: Placement[];\n private _resizeObserver?: ResizeObserver;\n\n public get triggerType(): TriggerType {\n return this.getAttribute(\"trigger-type\") as TriggerType;\n }\n\n public set triggerType(type: TriggerType) {\n if (type) {\n this.setAttribute(\"trigger-type\", type);\n } else {\n this.removeAttribute(\"trigger-type\");\n }\n }\n\n public get arrowSvg(): string {\n return this.getAttribute(\"arrow-svg\") || arrowSvg;\n }\n\n public set arrowSvg(arrowSvg: string) {\n if (arrowSvg) {\n this.setAttribute(\"arrow-svg\", arrowSvg);\n } else {\n this.removeAttribute(\"arrow-svg\");\n }\n if (this._arrow) {\n this._arrow.innerHTML = this.arrowSvg;\n }\n }\n\n public get placement(): Placement {\n return this.getAttribute(\"placement\") as Placement;\n }\n\n public set placement(placement: Placement) {\n if (placement) {\n this.setAttribute(\"placement\", placement);\n } else {\n this.removeAttribute(\"placement\");\n }\n }\n\n public get targetElement(): HTMLElement | undefined {\n return this._targetElement;\n }\n\n public set targetElement(element: HTMLElement | undefined) {\n this.removeTargetEventListener(this.targetElement);\n if (this._targetElement && \"true\" == this._targetElement.getAttribute(\"aria-expanded\")) {\n this._targetElement.setAttribute(\"aria-expanded\", \"false\");\n }\n this._targetElement = element;\n if (element) {\n element.setAttribute(\"aria-expanded\", \"false\");\n }\n this.addTargetEventListener(this.targetElement);\n this.updatePopper();\n }\n\n public get targetSelector(): string | null {\n return this.getAttribute(\"target-selector\");\n }\n\n public set targetSelector(selector: string) {\n if (selector) {\n this.setAttribute(\"target-selector\", selector);\n } else {\n this.removeAttribute(\"target-selector\");\n }\n }\n\n public get modal(): boolean {\n return this.hasAttribute(\"modal\");\n }\n\n public set modal(modal: boolean) {\n if (modal) {\n this.setAttribute(\"modal\", \"\");\n } else {\n this.removeAttribute(\"modal\");\n }\n }\n\n public get popoverFor(): string | null {\n return this.getAttribute(\"popover-for\");\n }\n\n public set popoverFor(popoverFor: string) {\n if (popoverFor) {\n this.setAttribute(\"popover-for\", popoverFor);\n } else {\n this.removeAttribute(\"popover-for\");\n }\n }\n\n public get flipPriority(): Placement[] | undefined {\n return this._flipPriority;\n }\n\n public set flipPriority(priority: Placement[] | undefined) {\n if (priority && priority.length > 0) {\n this._flipPriority = priority;\n } else {\n this._flipPriority = undefined;\n }\n this.reConfigurePopper();\n }\n\n public get offset(): number {\n return this.getAttribute(\"offset\") ? parseInt(this.getAttribute(\"offset\") ?? \"0\") : 0;\n }\n\n public set offset(offset: number) {\n if (offset) {\n this.setAttribute(\"offset\", offset.toString());\n } else {\n this.removeAttribute(\"offset\");\n }\n this.reConfigurePopper();\n }\n\n private reConfigurePopper() {\n if (this._popper) {\n this.configurePopper();\n }\n }\n\n public get noArrow(): boolean {\n return this.hasAttribute(\"no-arrow\");\n }\n\n public set noArrow(noArrow: boolean) {\n if (noArrow) {\n this.setAttribute(\"no-arrow\", \"\");\n } else {\n this.removeAttribute(\"no-arrow\");\n }\n }\n\n static get observedAttributes(): string[] {\n return [\"placement\", \"target-selector\", \"trigger-type\"];\n }\n\n public attributeChangedCallback(name: string, oldValue: string): void {\n switch (name) {\n case \"placement\": {\n this.updatePopper();\n break;\n }\n case \"trigger-type\": {\n this.removeTargetEventListener(this.targetElement);\n this.addTargetEventListener(this.targetElement);\n break;\n }\n case \"target-selector\": {\n this.handleTargetSelectorChange(oldValue);\n break;\n }\n }\n }\n\n public connectedCallback(): void {\n if (!this._firstUpdated) {\n this.firstUpdated();\n this._firstUpdated = true;\n }\n if (this.targetElement) {\n this.addTargetEventListener(this.targetElement);\n } else if (this.targetSelector) {\n // The browser is currently attaching html nodes to the dom tree, the target may not be present in it yet.\n requestAnimationFrame(() => {\n if (this.isConnected) {\n this.handleTargetSelectorChange(null);\n }\n });\n }\n\n this._arrow = document.createElement(\"div\");\n this._arrow.classList.add(\"popover-arrow\");\n this._arrow.setAttribute(\"data-popper-arrow\", \"\");\n this._arrow.style.display = \"flex\";\n this._arrow.innerHTML = this.arrowSvg;\n }\n\n public disconnectedCallback(): void {\n if (this.targetElement) {\n this.removeTargetEventListener(this.targetElement);\n this.removeTargetClassForOpen(this.targetElement);\n }\n if (this._resizeObserver) {\n this._resizeObserver.disconnect();\n this._resizeObserver = undefined;\n }\n }\n\n public toggle = (): void => {\n this.open = !this.open;\n };\n\n public show = (): void => {\n this.open = true;\n };\n\n public hide = (): void => {\n this.open = false;\n };\n\n private firstUpdated(): void {\n this.style.display = \"none\";\n this.triggerType = this.triggerType || \"click\";\n this.placement = this.placement || \"auto\";\n }\n\n private get open(): boolean {\n return this._open;\n }\n\n private set open(open: boolean) {\n if (open !== this._open) {\n this._open = open;\n this.handleOpenChange();\n }\n }\n\n private handleOpenChange(): void {\n if (this.open) {\n if (!this._popper) {\n this.configurePopper();\n }\n if (this._container == null) {\n return;\n }\n\n this._container.innerHTML = \"\";\n const style = document.createElement(\"style\");\n style.innerHTML = `#${this.popoverContainerId} {\n box-shadow: var(--effect-shadow-strong, 1px 4px 24px 0 rgba(17, 17, 17, 0.5));\n border: 1px solid var(--color-border-default, #d4d4d4);\n border-radius: var(--radius-s, 4px);\n box-sizing: border-box;\n\n /* neutralize the [popover] UA styles: inset: 0 + margin: auto would\n center the container and fight Popper's positioning, and the\n arrow hangs outside the box, so overflow must stay visible */\n inset: auto;\n margin: 0;\n padding: 0;\n overflow: visible;\n background: transparent;\n color: inherit;\n\n > *:not(.popover-arrow) {\n border-radius: var(--radius-s, 4px);\n clip-path: inset(0 round var(--radius-s, 4px));\n }\n }`;\n this._container.appendChild(style);\n if (this.popoverFor) {\n this._container.setAttribute(\"popover-for\", this.popoverFor);\n }\n if (this.content) {\n this._container.prepend(this.content);\n Object.assign(this.content.style, {\n position: \"relative\",\n display: \"block\",\n zIndex: 1,\n });\n window.requestAnimationFrame(() => {\n let backgroundColor = getComputedStyle(this.content).backgroundColor;\n if (backgroundColor == \"rgba(0, 0, 0, 0)\") {\n this.content.style.background = backgroundColor = \"var(--color-bg-default, #ffffff)\";\n }\n if (!this._arrow) {\n return;\n }\n const arrowBackground = this._arrow.querySelector(\".arrow-background\") as HTMLElement;\n if (arrowBackground) {\n arrowBackground.style.fill = backgroundColor;\n }\n });\n }\n this.ensureArrowIsAdded();\n this.ownerDocument.body.appendChild(this._container);\n // Shown as a popover so the overlay is rendered in the top layer;\n // otherwise it would be painted below any native popover/dialog the\n // target element sits in. Hover popovers are \"manual\" so that showing\n // a tooltip never closes open auto popovers (even \"hint\" closes the\n // ones stacked above a shared ancestor).\n this._container.popover = this.triggerType === \"hover\" ? \"manual\" : \"auto\";\n if (!this._container.matches(\":popover-open\")) {\n // `source` makes the overlay a nested popover of any ancestor auto\n // popover of the target, so showing or clicking into it does not\n // light-dismiss that ancestor.\n this._container.showPopover({ source: this.targetElement });\n }\n this.updatePopper();\n this.setAttribute(\"open\", \"\");\n\n if (this.modal) {\n window.addEventListener(\"click\", this.hideIfExternalTarget, { capture: true });\n window.addEventListener(\"focus\", this.hideIfExternalTarget, { capture: true });\n }\n if (this.targetElement) {\n this.addTargetClassForOpen(this.targetElement);\n this.targetElement.setAttribute(\"aria-expanded\", \"true\");\n }\n this.dispatchEvent(new CustomEvent(\"sd-popover-open\"));\n\n this._container.addEventListener(\"keydown\", this.handleTabKeyDown);\n } else {\n if (this._container != null) {\n if (this._container.matches(\":popover-open\")) {\n this._container.hidePopover();\n }\n // remove() instead of body.removeChild(): the toggle listener also\n // runs this path when the container was already detached externally\n this._container.remove();\n }\n\n this.removeAttribute(\"open\");\n window.removeEventListener(\"click\", this.hideIfExternalTarget, { capture: true });\n window.removeEventListener(\"focus\", this.hideIfExternalTarget, { capture: true });\n\n if (this.targetElement) {\n this.removeTargetClassForOpen(this.targetElement);\n this.targetElement.setAttribute(\"aria-expanded\", \"false\");\n }\n this.dispatchEvent(new CustomEvent(\"sd-popover-close\"));\n\n if (this._container != null) {\n this._container.removeEventListener(\"keydown\", this.handleTabKeyDown);\n }\n }\n }\n\n private hideIfExternalTarget = (event: Event) => {\n const target = event.target;\n if (\n !(target instanceof HTMLElement) ||\n this._container == null ||\n this.targetElement == null ||\n (!this._container.contains(target) && !this.targetElement.contains(target))\n ) {\n this.hide();\n }\n };\n\n private handleTabKeyDown = (event: KeyboardEvent) => {\n if (event.key !== \"Tab\") {\n return;\n }\n\n const shift = event.shiftKey;\n let nextInsidePopover: HTMLElement | null = null;\n\n const target = event.target as Element | null;\n const root = this.content;\n\n if (target instanceof HTMLElement && root) {\n nextInsidePopover = this.findNextFocusableAfter(target, root, !shift);\n }\n\n if (nextInsidePopover) {\n // Let browser handle tabbing inside popover\n return;\n }\n\n // No more focusable elements inside popover → close it\n event.preventDefault();\n this.open = false;\n\n const next = this.findNextFocusableAfter(this.targetElement, null, !shift);\n next?.focus();\n };\n\n private handleTargetSelectorChange(oldValue: string | null | undefined): void {\n if (oldValue != null) {\n const oldTarget = document.querySelector<HTMLElement>(oldValue);\n if (oldTarget) {\n this.removeTargetEventListener(oldTarget);\n this.removeTargetClassForOpen(oldTarget);\n }\n }\n if (this.targetSelector) {\n const target = document.querySelector(this.targetSelector);\n if (target instanceof HTMLElement) {\n this.targetElement = target;\n }\n\n this.addTargetEventListener(this.targetElement);\n }\n }\n\n private addTargetEventListener(target: HTMLElement | undefined): void {\n if (target) {\n switch (this.triggerType) {\n case \"hover\": {\n target.addEventListener(\"mouseenter\", this.show);\n target.addEventListener(\"mouseleave\", this.hide);\n break;\n }\n case \"click\": {\n target.addEventListener(\"click\", this.toggle);\n break;\n }\n }\n }\n }\n\n private removeTargetEventListener(target: HTMLElement | undefined): void {\n if (target) {\n switch (this.triggerType) {\n case \"hover\": {\n target.removeEventListener(\"mouseenter\", this.show);\n target.removeEventListener(\"mouseleave\", this.hide);\n break;\n }\n case \"click\": {\n target.removeEventListener(\"click\", this.toggle);\n break;\n }\n }\n }\n }\n\n private configurePopper(): void {\n this.createContentContainer();\n // In popper.js 2 the arrow needs to be added before calling Popper#createPopper\n this.ensureArrowIsAdded();\n\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const popover = this;\n const options: Options = {\n placement: popover.placement as Placement,\n strategy: \"absolute\",\n modifiers: [\n {\n name: \"computeStyles\",\n options: {\n gpuAcceleration: true,\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: popover._flipPriority,\n },\n },\n {\n name: \"offset\",\n options: {\n offset: () => {\n return [\n 0,\n popover.noArrow\n ? 0 + popover.offset\n : (this._arrow?.clientHeight ?? 0 + popover.offset),\n ];\n },\n },\n },\n {\n name: \"arrow\",\n options: {\n padding: 10, // Avoid to reach the edges of the popper element with the arrow\n },\n },\n {\n name: \"resetArrowStyles\",\n enabled: true,\n phase: \"beforeWrite\",\n fn({ state }) {\n if (popover._arrow && state.styles.arrow) {\n Object.assign(popover._arrow.style, {\n top: state.styles.arrow.top || \"\",\n left: state.styles.arrow.left || \"\",\n bottom: state.styles.arrow.bottom || \"\",\n right: state.styles.arrow.right || \"\",\n });\n }\n },\n },\n {\n name: \"onUpdate\",\n enabled: true,\n phase: \"afterWrite\",\n fn({ state }) {\n popover.updateArrow(state.placement);\n },\n },\n ],\n };\n this._popper = createPopper(this.targetElement!, this._container!, options);\n }\n\n private createContentContainer(): void {\n this._container = document.createElement(\"div\");\n this._container.id = this.popoverContainerId;\n this._container.classList.add(\"popover-container\");\n this._container.tabIndex = 0;\n this._container.addEventListener(\"toggle\", (event) => {\n // The browser can hide the popover without going through `open`\n // (light dismiss, close request, another auto popover opening).\n if ((event as ToggleEvent).newState === \"closed\" && this.open) {\n this.hide();\n }\n });\n if (this._resizeObserver) {\n this._resizeObserver.disconnect();\n }\n this._resizeObserver = new ResizeObserver(() => {\n if (this._popper) {\n void this._popper.update();\n }\n });\n this._resizeObserver.observe(this._container);\n }\n\n private ensureArrowIsAdded() {\n if (this._container && this._arrow && !this.noArrow && !this._container.contains(this._arrow)) {\n this._container.appendChild(this._arrow);\n }\n }\n\n public updatePopper(): void {\n if (this._popper) {\n this._popper.state.elements.reference = this.targetElement ?? document.body;\n this._popper.state.options.placement = this.placement;\n\n if (this.open) {\n void this._popper.update();\n }\n }\n }\n\n private updateArrow(placement: Placement): void {\n if (this._arrow) {\n const arrowVariant = this.getArrowVariant(placement);\n this._arrow.setAttribute(\"variant\", arrowVariant);\n if (this._content) {\n const svg = this._arrow.querySelector(\"svg\")!;\n\n const arrowWidth = this._arrow.clientWidth;\n const arrowHeight = this._arrow.clientHeight;\n const verticalOffset = `-${arrowHeight - arrowOverlapOffset}px`;\n\n const horizontalTransformationOffset = (arrowWidth - arrowHeight) / 2;\n // Note that arrowHeight is used on purpose for the horizontalOffset\n // as this is the height of the unrotated wrapper div which defines the gap between the\n // reference element and the popover.\n const horizontalOffset = `-${arrowHeight + horizontalTransformationOffset - arrowOverlapOffset}px`;\n\n switch (arrowVariant) {\n case \"bottom\": {\n this._arrow.style.top = verticalOffset;\n svg.style.transform = \"rotate(180deg)\";\n break;\n }\n case \"top\": {\n this._arrow.style.bottom = verticalOffset;\n svg.style.transform = \"rotate(0deg)\";\n break;\n }\n case \"left\": {\n this._arrow.style.right = horizontalOffset;\n svg.style.transform = \"rotate(270deg)\";\n break;\n }\n case \"right\": {\n this._arrow.style.left = horizontalOffset;\n svg.style.transform = \"rotate(90deg)\";\n break;\n }\n }\n }\n }\n }\n\n private getArrowVariant(placement: Placement): ArrowVariant {\n if (placement.indexOf(\"bottom\") !== -1) {\n return \"bottom\";\n } else if (placement.indexOf(\"top\") !== -1) {\n return \"top\";\n } else if (placement.indexOf(\"left\") !== -1) {\n return \"left\";\n } else if (placement.indexOf(\"right\") !== -1) {\n return \"right\";\n }\n return \"bottom\";\n }\n\n private get content(): HTMLElement {\n if (!this._content) {\n this._content = this.firstElementChild as HTMLElement;\n this._content.setAttribute(\"data-popper-content\", \"\");\n }\n return this._content;\n }\n\n private addTargetClassForOpen(target: HTMLElement): void {\n if (target) {\n target.classList.add(targetClassOpen);\n }\n }\n\n private removeTargetClassForOpen(target: HTMLElement): void {\n if (target) {\n target.classList.remove(targetClassOpen);\n }\n }\n\n private findNextFocusableAfter(\n trigger: HTMLElement | undefined | null,\n root: HTMLElement | undefined | null,\n forward: boolean,\n ): HTMLElement | null {\n if (!trigger) return null;\n\n const effectiveRoot = root ?? document.body;\n\n const walker = document.createTreeWalker(effectiveRoot, NodeFilter.SHOW_ELEMENT, {\n acceptNode(node) {\n const el = node as HTMLElement;\n\n return el.tabIndex >= 0 && !el.hidden && el.offsetParent !== null\n ? NodeFilter.FILTER_ACCEPT\n : NodeFilter.FILTER_SKIP;\n },\n });\n\n walker.currentNode = trigger;\n\n const nextNode = forward ? walker.nextNode() : walker.previousNode();\n\n return nextNode as HTMLElement | null;\n }\n}\n\nPopover.ensureDefined();\n"],"mappings":"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"}
1
+ {"version":3,"file":"popover.mjs","names":[],"sources":["../arrow.svg?raw","../popover.ts"],"sourcesContent":["export default \"<svg width=\\\"26\\\" height=\\\"12\\\" viewBox=\\\"0 0 26 12\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\r\\n<path d=\\\"M13.7072 0.707031L0.707153 0.707031L9.87873 9.8786C11.4408 11.4407 13.9735 11.4407 15.5356 9.8786L24.7072 0.707031L13.7072 0.707031Z\\\" fill=\\\"var(--color-bg-default, #ffffff)\\\" class=\\\"arrow-background\\\"/>\\r\\n<path d=\\\"M0.707153 0.707031L9.87872 9.8786C11.4408 11.4407 13.9735 11.4407 15.5356 9.8786L24.7072 0.707031\\\" stroke=\\\"var(--color-border-default, #d4d4d4)\\\" stroke-linecap=\\\"square\\\" class=\\\"arrow-border\\\"/>\\r\\n</svg>\\r\\n\"","import { createPopper, type Instance as Popper, type Options, type Placement } from \"@popperjs/core\";\n\nimport { default as arrowSvg } from \"./arrow.svg?raw\";\n\nconst arrowOverlapOffset = 1;\nconst targetClassOpen = \"sd-popover-open\";\n\nlet idCounter = 0;\nconst nextId = () => {\n idCounter++;\n return idCounter;\n};\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [Popover.ID]: Popover;\n }\n interface HTMLElementEventMap {\n \"sd-popover-open\": CustomEvent<IOpenEvent>;\n \"sd-popover-close\": CustomEvent<ICloseEvent>;\n }\n}\n\nexport type TriggerType = \"click\" | \"hover\" | \"manual\";\nexport type ArrowVariant = \"bottom\" | \"left\" | \"right\" | \"top\";\nexport type IOpenEvent = void;\nexport type ICloseEvent = void;\n\nexport default class Popover extends HTMLElement {\n public static readonly ID = \"sd-popover\";\n public static ensureDefined = () => {\n if (!customElements.get(Popover.ID)) {\n customElements.define(Popover.ID, Popover);\n }\n };\n private popoverContainerId = \"popover-container-\" + nextId();\n\n private _open = false;\n private _popper?: Popper;\n private _targetElement?: HTMLElement;\n private _container?: HTMLElement;\n private _arrow?: HTMLElement;\n private _content?: HTMLElement;\n private _firstUpdated = false;\n private _flipPriority?: Placement[];\n private _resizeObserver?: ResizeObserver;\n\n public get triggerType(): TriggerType {\n return this.getAttribute(\"trigger-type\") as TriggerType;\n }\n\n public set triggerType(type: TriggerType) {\n if (type) {\n this.setAttribute(\"trigger-type\", type);\n } else {\n this.removeAttribute(\"trigger-type\");\n }\n }\n\n public get arrowSvg(): string {\n return this.getAttribute(\"arrow-svg\") || arrowSvg;\n }\n\n public set arrowSvg(arrowSvg: string) {\n if (arrowSvg) {\n this.setAttribute(\"arrow-svg\", arrowSvg);\n } else {\n this.removeAttribute(\"arrow-svg\");\n }\n if (this._arrow) {\n this._arrow.innerHTML = this.arrowSvg;\n }\n }\n\n public get placement(): Placement {\n return this.getAttribute(\"placement\") as Placement;\n }\n\n public set placement(placement: Placement) {\n if (placement) {\n this.setAttribute(\"placement\", placement);\n } else {\n this.removeAttribute(\"placement\");\n }\n }\n\n public get targetElement(): HTMLElement | undefined {\n return this._targetElement;\n }\n\n public set targetElement(element: HTMLElement | undefined) {\n this.removeTargetEventListener(this.targetElement);\n if (this._targetElement && \"true\" == this._targetElement.getAttribute(\"aria-expanded\")) {\n this._targetElement.setAttribute(\"aria-expanded\", \"false\");\n }\n this._targetElement = element;\n if (element) {\n element.setAttribute(\"aria-expanded\", \"false\");\n }\n this.addTargetEventListener(this.targetElement);\n this.updatePopper();\n }\n\n public get targetSelector(): string | null {\n return this.getAttribute(\"target-selector\");\n }\n\n public set targetSelector(selector: string) {\n if (selector) {\n this.setAttribute(\"target-selector\", selector);\n } else {\n this.removeAttribute(\"target-selector\");\n }\n }\n\n public get modal(): boolean {\n return this.hasAttribute(\"modal\");\n }\n\n public set modal(modal: boolean) {\n if (modal) {\n this.setAttribute(\"modal\", \"\");\n } else {\n this.removeAttribute(\"modal\");\n }\n }\n\n public get popoverFor(): string | null {\n return this.getAttribute(\"popover-for\");\n }\n\n public set popoverFor(popoverFor: string) {\n if (popoverFor) {\n this.setAttribute(\"popover-for\", popoverFor);\n } else {\n this.removeAttribute(\"popover-for\");\n }\n }\n\n public get flipPriority(): Placement[] | undefined {\n return this._flipPriority;\n }\n\n public set flipPriority(priority: Placement[] | undefined) {\n if (priority && priority.length > 0) {\n this._flipPriority = priority;\n } else {\n this._flipPriority = undefined;\n }\n this.reConfigurePopper();\n }\n\n public get offset(): number {\n return this.getAttribute(\"offset\") ? parseInt(this.getAttribute(\"offset\") ?? \"0\") : 0;\n }\n\n public set offset(offset: number) {\n if (offset) {\n this.setAttribute(\"offset\", offset.toString());\n } else {\n this.removeAttribute(\"offset\");\n }\n this.reConfigurePopper();\n }\n\n private reConfigurePopper() {\n void this._popper?.setOptions(this.popperOptions());\n }\n\n public get noArrow(): boolean {\n return this.hasAttribute(\"no-arrow\");\n }\n\n public set noArrow(noArrow: boolean) {\n if (noArrow) {\n this.setAttribute(\"no-arrow\", \"\");\n } else {\n this.removeAttribute(\"no-arrow\");\n }\n }\n\n /**\n * Places the popover with top/left instead of a CSS transform. A transformed element is the containing block of\n * its position: fixed descendants, so content positioned by viewport coordinates (e.g. a flyout of its own) needs\n * it.\n */\n public get noTransform(): boolean {\n return this.hasAttribute(\"no-transform\");\n }\n\n public set noTransform(noTransform: boolean) {\n if (noTransform) {\n this.setAttribute(\"no-transform\", \"\");\n } else {\n this.removeAttribute(\"no-transform\");\n }\n this.reConfigurePopper();\n }\n\n static get observedAttributes(): string[] {\n return [\"placement\", \"target-selector\", \"trigger-type\"];\n }\n\n public attributeChangedCallback(name: string, oldValue: string): void {\n switch (name) {\n case \"placement\": {\n this.updatePopper();\n break;\n }\n case \"trigger-type\": {\n this.removeTargetEventListener(this.targetElement);\n this.addTargetEventListener(this.targetElement);\n break;\n }\n case \"target-selector\": {\n this.handleTargetSelectorChange(oldValue);\n break;\n }\n }\n }\n\n public connectedCallback(): void {\n if (!this._firstUpdated) {\n this.firstUpdated();\n this._firstUpdated = true;\n }\n if (this.targetElement) {\n this.addTargetEventListener(this.targetElement);\n } else if (this.targetSelector) {\n // The browser is currently attaching html nodes to the dom tree, the target may not be present in it yet.\n requestAnimationFrame(() => {\n if (this.isConnected) {\n this.handleTargetSelectorChange(null);\n }\n });\n }\n\n this._arrow = document.createElement(\"div\");\n this._arrow.classList.add(\"popover-arrow\");\n this._arrow.setAttribute(\"data-popper-arrow\", \"\");\n this._arrow.style.display = \"flex\";\n this._arrow.innerHTML = this.arrowSvg;\n }\n\n public disconnectedCallback(): void {\n if (this.targetElement) {\n this.removeTargetEventListener(this.targetElement);\n this.removeTargetClassForOpen(this.targetElement);\n }\n if (this._resizeObserver) {\n this._resizeObserver.disconnect();\n this._resizeObserver = undefined;\n }\n }\n\n public toggle = (): void => {\n this.open = !this.open;\n };\n\n public show = (): void => {\n this.open = true;\n };\n\n public hide = (): void => {\n this.open = false;\n };\n\n private firstUpdated(): void {\n this.style.display = \"none\";\n this.triggerType = this.triggerType || \"click\";\n this.placement = this.placement || \"auto\";\n }\n\n private get open(): boolean {\n return this._open;\n }\n\n private set open(open: boolean) {\n if (open !== this._open) {\n this._open = open;\n this.handleOpenChange();\n }\n }\n\n private handleOpenChange(): void {\n if (this.open) {\n this._container ??= this.createContentContainer();\n this._container.innerHTML = \"\";\n const style = document.createElement(\"style\");\n style.innerHTML = `#${this.popoverContainerId} {\n box-shadow: var(--effect-shadow-strong, 1px 4px 24px 0 rgba(17, 17, 17, 0.5));\n border: 1px solid var(--color-border-default, #d4d4d4);\n border-radius: var(--radius-s, 4px);\n box-sizing: border-box;\n\n /* neutralize the [popover] UA styles: inset: 0 + margin: auto would\n center the container and fight Popper's positioning, and the\n arrow hangs outside the box, so overflow must stay visible */\n inset: auto;\n margin: 0;\n padding: 0;\n overflow: visible;\n background: transparent;\n color: inherit;\n\n > *:not(.popover-arrow) {\n border-radius: var(--radius-s, 4px);\n clip-path: inset(0 round var(--radius-s, 4px));\n }\n }`;\n this._container.appendChild(style);\n if (this.popoverFor) {\n this._container.setAttribute(\"popover-for\", this.popoverFor);\n }\n if (this.content) {\n this._container.prepend(this.content);\n Object.assign(this.content.style, {\n position: \"relative\",\n display: \"block\",\n zIndex: 1,\n });\n window.requestAnimationFrame(() => {\n let backgroundColor = getComputedStyle(this.content).backgroundColor;\n if (backgroundColor == \"rgba(0, 0, 0, 0)\") {\n this.content.style.background = backgroundColor = \"var(--color-bg-default, #ffffff)\";\n }\n if (!this._arrow) {\n return;\n }\n const arrowBackground = this._arrow.querySelector(\".arrow-background\") as HTMLElement;\n if (arrowBackground) {\n arrowBackground.style.fill = backgroundColor;\n }\n });\n }\n this.ensureArrowIsAdded();\n this.ownerDocument.body.appendChild(this._container);\n // Shown as a popover so the overlay is rendered in the top layer;\n // otherwise it would be painted below any native popover/dialog the\n // target element sits in. Hover popovers are \"manual\" so that showing\n // a tooltip never closes open auto popovers (even \"hint\" closes the\n // ones stacked above a shared ancestor). Manual popovers are \"manual\"\n // because only their owner closes them: an auto popover is closed by\n // the browser on any press outside of it, its own target included, on\n // Escape and whenever another auto popover opens.\n this._container.popover = this.triggerType === \"hover\" || this.triggerType === \"manual\" ? \"manual\" : \"auto\";\n if (!this._container.matches(\":popover-open\")) {\n // `source` makes an auto overlay a nested popover of any ancestor\n // auto popover of the target, so showing or clicking into it does\n // not light-dismiss that ancestor.\n this._container.showPopover({ source: this.targetElement });\n }\n this.createPopper(this._container);\n this.setAttribute(\"open\", \"\");\n\n if (this.modal) {\n window.addEventListener(\"click\", this.hideIfExternalTarget, { capture: true });\n window.addEventListener(\"focus\", this.hideIfExternalTarget, { capture: true });\n }\n if (this.targetElement) {\n this.addTargetClassForOpen(this.targetElement);\n this.targetElement.setAttribute(\"aria-expanded\", \"true\");\n }\n this.dispatchEvent(new CustomEvent(\"sd-popover-open\"));\n\n this._container.addEventListener(\"keydown\", this.handleTabKeyDown);\n } else {\n if (this._container != null) {\n if (this._container.matches(\":popover-open\")) {\n this._container.hidePopover();\n }\n // remove() instead of body.removeChild(): the toggle listener also\n // runs this path when the container was already detached externally\n this._container.remove();\n }\n this.destroyPopper();\n\n this.removeAttribute(\"open\");\n window.removeEventListener(\"click\", this.hideIfExternalTarget, { capture: true });\n window.removeEventListener(\"focus\", this.hideIfExternalTarget, { capture: true });\n\n if (this.targetElement) {\n this.removeTargetClassForOpen(this.targetElement);\n this.targetElement.setAttribute(\"aria-expanded\", \"false\");\n }\n this.dispatchEvent(new CustomEvent(\"sd-popover-close\"));\n\n if (this._container != null) {\n this._container.removeEventListener(\"keydown\", this.handleTabKeyDown);\n }\n }\n }\n\n private hideIfExternalTarget = (event: Event) => {\n const target = event.target;\n // The window gets a focus event of its own when it regains the focus, e.g. from an iframe; it is no element\n // outside of the popover, the one receiving the focus gets its event too.\n if (!(target instanceof Element)) {\n return;\n }\n if (!this._container?.contains(target) && !this.targetElement?.contains(target)) {\n this.hide();\n }\n };\n\n private handleTabKeyDown = (event: KeyboardEvent) => {\n if (event.key !== \"Tab\") {\n return;\n }\n\n const shift = event.shiftKey;\n let nextInsidePopover: HTMLElement | null = null;\n\n const target = event.target as Element | null;\n const root = this.content;\n\n if (target instanceof HTMLElement && root) {\n nextInsidePopover = this.findNextFocusableAfter(target, root, !shift);\n }\n\n if (nextInsidePopover) {\n // Let browser handle tabbing inside popover\n return;\n }\n\n // No more focusable elements inside popover → close it\n event.preventDefault();\n this.open = false;\n\n const next = this.findNextFocusableAfter(this.targetElement, null, !shift);\n next?.focus();\n };\n\n private handleTargetSelectorChange(oldValue: string | null | undefined): void {\n if (oldValue != null) {\n const oldTarget = document.querySelector<HTMLElement>(oldValue);\n if (oldTarget) {\n this.removeTargetEventListener(oldTarget);\n this.removeTargetClassForOpen(oldTarget);\n }\n }\n if (this.targetSelector) {\n const target = document.querySelector(this.targetSelector);\n if (target instanceof HTMLElement) {\n this.targetElement = target;\n }\n\n this.addTargetEventListener(this.targetElement);\n }\n }\n\n private addTargetEventListener(target: HTMLElement | undefined): void {\n if (target) {\n switch (this.triggerType) {\n case \"hover\": {\n target.addEventListener(\"mouseenter\", this.show);\n target.addEventListener(\"mouseleave\", this.hide);\n break;\n }\n case \"click\": {\n target.addEventListener(\"click\", this.toggle);\n break;\n }\n }\n }\n }\n\n private removeTargetEventListener(target: HTMLElement | undefined): void {\n if (target) {\n switch (this.triggerType) {\n case \"hover\": {\n target.removeEventListener(\"mouseenter\", this.show);\n target.removeEventListener(\"mouseleave\", this.hide);\n break;\n }\n case \"click\": {\n target.removeEventListener(\"click\", this.toggle);\n break;\n }\n }\n }\n }\n\n /**\n * Popper listens to the scroll and resize events of the window and of the scroll parents while it exists, so it\n * lives only while the popover is open; otherwise every closed popover would be kept alive and repositioned.\n */\n private createPopper(container: HTMLElement): void {\n this.destroyPopper();\n this._popper = createPopper(this.targetElement ?? document.body, container, this.popperOptions());\n this._resizeObserver = new ResizeObserver(() => {\n void this._popper?.update();\n });\n this._resizeObserver.observe(container);\n }\n\n private destroyPopper(): void {\n this._resizeObserver?.disconnect();\n this._resizeObserver = undefined;\n this._popper?.destroy();\n this._popper = undefined;\n }\n\n private popperOptions(): Options {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const popover = this;\n return {\n placement: popover.placement as Placement,\n strategy: \"absolute\",\n modifiers: [\n {\n name: \"computeStyles\",\n options: {\n gpuAcceleration: !popover.noTransform,\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: popover._flipPriority,\n },\n },\n {\n name: \"offset\",\n options: {\n offset: () => {\n return [\n 0,\n popover.noArrow\n ? 0 + popover.offset\n : (this._arrow?.clientHeight ?? 0 + popover.offset),\n ];\n },\n },\n },\n {\n name: \"arrow\",\n options: {\n padding: 10, // Avoid to reach the edges of the popper element with the arrow\n },\n },\n {\n name: \"resetArrowStyles\",\n enabled: true,\n phase: \"beforeWrite\",\n fn({ state }) {\n if (popover._arrow && state.styles.arrow) {\n Object.assign(popover._arrow.style, {\n top: state.styles.arrow.top || \"\",\n left: state.styles.arrow.left || \"\",\n bottom: state.styles.arrow.bottom || \"\",\n right: state.styles.arrow.right || \"\",\n });\n }\n },\n },\n {\n name: \"onUpdate\",\n enabled: true,\n phase: \"afterWrite\",\n fn({ state }) {\n popover.updateArrow(state.placement);\n },\n },\n ],\n };\n }\n\n private createContentContainer(): HTMLElement {\n const container = document.createElement(\"div\");\n container.id = this.popoverContainerId;\n container.classList.add(\"popover-container\");\n container.tabIndex = 0;\n container.addEventListener(\"toggle\", (event) => {\n // The browser can hide the popover without going through `open`\n // (light dismiss, close request, another auto popover opening).\n if ((event as ToggleEvent).newState === \"closed\" && this.open) {\n this.hide();\n }\n });\n return container;\n }\n\n private ensureArrowIsAdded() {\n if (this._container && this._arrow && !this.noArrow && !this._container.contains(this._arrow)) {\n this._container.appendChild(this._arrow);\n }\n }\n\n public updatePopper(): void {\n if (this._popper) {\n this._popper.state.elements.reference = this.targetElement ?? document.body;\n this._popper.state.options.placement = this.placement;\n\n if (this.open) {\n void this._popper.update();\n }\n }\n }\n\n private updateArrow(placement: Placement): void {\n if (this._arrow) {\n const arrowVariant = this.getArrowVariant(placement);\n this._arrow.setAttribute(\"variant\", arrowVariant);\n if (this._content) {\n const svg = this._arrow.querySelector(\"svg\")!;\n\n const arrowWidth = this._arrow.clientWidth;\n const arrowHeight = this._arrow.clientHeight;\n const verticalOffset = `-${arrowHeight - arrowOverlapOffset}px`;\n\n const horizontalTransformationOffset = (arrowWidth - arrowHeight) / 2;\n // Note that arrowHeight is used on purpose for the horizontalOffset\n // as this is the height of the unrotated wrapper div which defines the gap between the\n // reference element and the popover.\n const horizontalOffset = `-${arrowHeight + horizontalTransformationOffset - arrowOverlapOffset}px`;\n\n switch (arrowVariant) {\n case \"bottom\": {\n this._arrow.style.top = verticalOffset;\n svg.style.transform = \"rotate(180deg)\";\n break;\n }\n case \"top\": {\n this._arrow.style.bottom = verticalOffset;\n svg.style.transform = \"rotate(0deg)\";\n break;\n }\n case \"left\": {\n this._arrow.style.right = horizontalOffset;\n svg.style.transform = \"rotate(270deg)\";\n break;\n }\n case \"right\": {\n this._arrow.style.left = horizontalOffset;\n svg.style.transform = \"rotate(90deg)\";\n break;\n }\n }\n }\n }\n }\n\n private getArrowVariant(placement: Placement): ArrowVariant {\n if (placement.indexOf(\"bottom\") !== -1) {\n return \"bottom\";\n } else if (placement.indexOf(\"top\") !== -1) {\n return \"top\";\n } else if (placement.indexOf(\"left\") !== -1) {\n return \"left\";\n } else if (placement.indexOf(\"right\") !== -1) {\n return \"right\";\n }\n return \"bottom\";\n }\n\n private get content(): HTMLElement {\n if (!this._content) {\n this._content = this.firstElementChild as HTMLElement;\n this._content.setAttribute(\"data-popper-content\", \"\");\n }\n return this._content;\n }\n\n private addTargetClassForOpen(target: HTMLElement): void {\n if (target) {\n target.classList.add(targetClassOpen);\n }\n }\n\n private removeTargetClassForOpen(target: HTMLElement): void {\n if (target) {\n target.classList.remove(targetClassOpen);\n }\n }\n\n private findNextFocusableAfter(\n trigger: HTMLElement | undefined | null,\n root: HTMLElement | undefined | null,\n forward: boolean,\n ): HTMLElement | null {\n if (!trigger) return null;\n\n const effectiveRoot = root ?? document.body;\n\n const walker = document.createTreeWalker(effectiveRoot, NodeFilter.SHOW_ELEMENT, {\n acceptNode(node) {\n const el = node as HTMLElement;\n\n return el.tabIndex >= 0 && !el.hidden && el.offsetParent !== null\n ? NodeFilter.FILTER_ACCEPT\n : NodeFilter.FILTER_SKIP;\n },\n });\n\n walker.currentNode = trigger;\n\n const nextNode = forward ? walker.nextNode() : walker.previousNode();\n\n return nextNode as HTMLElement | null;\n }\n}\n\nPopover.ensureDefined();\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cas-smartdesign/popover",
3
- "version": "6.0.3",
3
+ "version": "6.0.5",
4
4
  "description": "A popover element which appears next to its target when triggered",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "files": [
@@ -23,7 +23,7 @@
23
23
  "@cas-smartdesign/license-generator": "^1.10.2"
24
24
  },
25
25
  "peerDependencies": {
26
- "@cas-smartdesign/design-tokens": "^3.0.6"
26
+ "@cas-smartdesign/design-tokens": "^3.0.7"
27
27
  },
28
28
  "peerDependenciesMeta": {
29
29
  "@cas-smartdesign/design-tokens": {
@@ -38,7 +38,9 @@
38
38
  "watch": "vite build --watch",
39
39
  "dev": "vite",
40
40
  "generate-license": "sd-license-generator --r ../../",
41
- "test:component": "pnpm cypress run --component --quiet --browser chrome",
41
+ "test:component": "pnpm test:component:chrome && pnpm test:component:firefox",
42
+ "test:component:chrome": "pnpm cypress run --component --quiet --browser chrome",
43
+ "test:component:firefox": "pnpm cypress run --component --quiet --browser firefox",
42
44
  "cypress:open": "pnpm cypress open --component"
43
45
  }
44
46
  }
package/readme.md CHANGED
@@ -20,11 +20,14 @@ For a web app / web widget, refer to the official documentation about design tok
20
20
  - Valid values are:
21
21
  - `click` - clicking on the target element
22
22
  - `hover` - moving the cursor on the target element
23
- - `manual` - no event handler will be set up, the popover can be opened programatically by calling the `show` method and hid by calling the `hide` method
23
+ - `manual` - no event handler will be set up, the popover can be opened programatically by calling the `show` method and hid by calling the `hide` method. The browser does not close it on its own: neither a click outside of it nor Escape does, unless it is `modal`.
24
24
  - `modal` **_boolean (default: false)_**
25
25
  - Defines whether the popover is modal and closed on clicks or focusing outside of the content or target element.
26
26
  - `no-arrow` **_boolean (default: false)_**
27
27
  - Defines whether the popover contains an arrow pointing to the reference element.
28
+ - `no-transform` **_boolean (default: false)_**
29
+ - Places the popover with top/left instead of a CSS transform.
30
+ - A transformed element is the containing block of its `position: fixed` descendants, so content positioned by viewport coordinates (e.g. a flyout of its own) needs it.
28
31
  - `popover-for` **_string (default: "")_**
29
32
  - This value is mirrored to the opened popover-container.
30
33
  - By that the popover can be identified for example for styling purposes.
@@ -43,6 +46,8 @@ For a web app / web widget, refer to the official documentation about design tok
43
46
  - Reflects the corresponding attribute
44
47
  - `noArrow`: boolean
45
48
  - Reflects the corresponding attribute
49
+ - `noTransform`: boolean
50
+ - Reflects the corresponding attribute
46
51
  - `popoverFor`: string
47
52
  - Reflects the corresponding attribute
48
53
  - `flipPriority`: Position[]