fix: FLOW-944 z-index issue with target , overlay and popover

packages/flow-code-editor/package.json

@@ -38,7 +38,8 @@
     "web-component-analyzer": "^2.0.0-next.4"
   },
   "peerDependencies": {
-    "@cldcvr/flow-core": "2.0.3"
+    "@cldcvr/flow-core": "^2.0.3",
+    "@cldcvr/flow-core-config": "^1.1.3"
   },
   "repository": {
     "type": "git",

packages/flow-core/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.1.1] - 2023-10-17
+
+### Bug Fixes
+
+- `f-popover`: z-index issue with target , overlay and popover fixed.
+
 ## [2.1.0] - 2023-10-16
 
 ### Features

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-core",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",
@@ -51,6 +51,9 @@
     "vue": "2.6.14",
     "web-component-analyzer": "^2.0.0-next.4"
   },
+  "peerDependencies": {
+    "@cldcvr/flow-core-config": "*"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/cldcvr/flow-core.git",

packages/flow-core/src/components/f-popover/f-popover-global.scss

@@ -29,7 +29,7 @@ f-popover {
 	background-color: var(--color-surface-tertiary);
 	border-radius: 4px;
 	overflow: auto;
-	z-index: 200;
+	z-index: 202;
 	&[shadow]:not([overlay]) {
 		box-shadow: var(--flow-box-shadow);
 	}
@@ -74,3 +74,17 @@ f-popover {
 		z-index: 2;
 	}
 }
+
+.f-overlay {
+	background-color: #000;
+	opacity: 0.5;
+	position: fixed;
+	top: 0px;
+	bottom: 0px;
+	right: 0px;
+	left: 0px;
+	z-index: 200;
+	&[data-transparent="true"] {
+		background-color: transparent;
+	}
+}

packages/flow-core/src/components/f-popover/f-popover.test.ts

@@ -11,19 +11,19 @@ describe("f-popover", () => {
 	it("should render open popover ", async () => {
 		const el = await fixture(html` <f-popover open>Test</f-popover> `);
 		expect(el.textContent?.trim()).to.equal("Test");
-		const descendant = el.shadowRoot!.querySelector(".f-overlay")!;
+		const descendant = document.querySelector(".f-overlay")!;
 		expect(descendant).not.null;
 	});
 	it("should render closed popover ", async () => {
 		const el = await fixture(html` <f-popover>Test</f-popover> `);
 		expect(el.textContent?.trim()).to.equal("Test");
-		const descendant = el.shadowRoot!.querySelector(".f-overlay")!;
+		const descendant = document.querySelector(".f-overlay")!;
 		expect(descendant).is.null;
 	});
 	it("should render without overlay ", async () => {
 		const el = await fixture(html` <f-popover open .overlay=${false}>Test</f-popover> `);
 		expect(el.textContent?.trim()).to.equal("Test");
-		const descendant = el.shadowRoot!.querySelector<HTMLElement>(".f-overlay")!;
+		const descendant = document.querySelector<HTMLElement>(".f-overlay")!;
 		expect(descendant.dataset["transparent"]).to.equal("true");
 	});
 	it("should render with default size ", async () => {

packages/flow-core/src/components/f-popover/f-popover.ts

@@ -1,7 +1,6 @@
-import { html, LitElement, nothing, PropertyValueMap, unsafeCSS } from "lit";
+import { html, LitElement, PropertyValueMap, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { FRoot } from "../../mixins/components/f-root/f-root";
-import eleStyle from "./f-popover.scss?inline";
 import globalStyle from "./f-popover-global.scss?inline";
 import {
 	computePosition,
@@ -65,7 +64,7 @@ export class FPopover extends FRoot {
 	/**
 	 * css loaded from scss file
 	 */
-	static styles = [unsafeCSS(eleStyle), unsafeCSS(globalStyle)];
+	static styles = [unsafeCSS(globalStyle)];
 
 	//   /**
 	//    * @attribute variant defines the position of a popover. A popover can be either relative to the source or absolute to the viewport.
@@ -132,6 +131,8 @@ export class FPopover extends FRoot {
 
 	isTooltip = false;
 
+	overlayElement?: HTMLDivElement;
+
 	reqAniFrame?: number;
 
 	offset: FPopOverOffset | null = null;
@@ -318,6 +319,10 @@ export class FPopover extends FRoot {
 		if (this.targetElement) {
 			this.targetElement.style.removeProperty("z-index");
 		}
+		if (this.overlayElement) {
+			this.overlayElement.remove();
+			this.overlayElement = undefined;
+		}
 	}
 
 	connectedCallback() {
@@ -366,20 +371,31 @@ export class FPopover extends FRoot {
 			}
 		});
 		if (this.open) {
-			const overlay = this.isTooltip
-				? nothing
-				: html`<div
-						class="f-overlay"
-						data-transparent=${!this.overlay}
-						data-qa-overlay
-						@click=${this.overlayClick}
-				  ></div>`;
+			if (!this.isTooltip) {
+				if (!this.overlayElement) {
+					this.overlayElement = document.createElement("div");
+					this.overlayElement.classList.add("f-overlay");
+					this.overlayElement.dataset.qaOverlay = "true";
+					document.body.append(this.overlayElement);
+					this.overlayElement.onclick = this.overlayClick;
+				}
+
+				if (!this.overlay) {
+					this.overlayElement.dataset.transparent = "true";
+				} else {
+					delete this.overlayElement.dataset.transparent;
+				}
+			}
 			this.computePosition(this.isTooltip);
-			return html`<slot></slot>${overlay} `;
+			return html`<slot></slot>`;
 		} else {
 			if (this.targetElement) {
 				this.targetElement.style.removeProperty("z-index");
 			}
+			if (this.overlayElement) {
+				this.overlayElement.remove();
+				this.overlayElement = undefined;
+			}
 			if (this.size && this.size?.includes("custom")) {
 				this.classList.remove("f-popover-custom-size");
 				this.style.setProperty("--custom-width", null);

packages/flow-form-builder/package.json

@@ -42,7 +42,8 @@
     "web-component-analyzer": "^2.0.0-next.4"
   },
   "peerDependencies": {
-    "@cldcvr/flow-core": "2.0.3"
+    "@cldcvr/flow-core": "^2.0.3",
+    "@cldcvr/flow-core-config": "^1.1.3"
   },
   "repository": {
     "type": "git",

packages/flow-lineage/package.json

@@ -42,7 +42,8 @@
     "web-component-analyzer": "^2.0.0-next.4"
   },
   "peerDependencies": {
-    "@cldcvr/flow-core": "2.0.3"
+    "@cldcvr/flow-core": "^2.0.3",
+    "@cldcvr/flow-core-config": "^1.1.3"
   },
   "repository": {
     "type": "git",

packages/flow-log/package.json

@@ -45,7 +45,8 @@
     "web-component-analyzer": "^2.0.0-next.4"
   },
   "peerDependencies": {
-    "@cldcvr/flow-core": "2.0.3"
+    "@cldcvr/flow-core": "^2.0.3",
+    "@cldcvr/flow-core-config": "^1.1.3"
   },
   "repository": {
     "type": "git",

packages/flow-md-editor/package.json

@@ -40,7 +40,8 @@
     "web-component-analyzer": "^2.0.0-next.4"
   },
   "peerDependencies": {
-    "@cldcvr/flow-core": "2.0.3"
+    "@cldcvr/flow-core": "^2.0.3",
+    "@cldcvr/flow-core-config": "^1.1.3"
   },
   "repository": {
     "type": "git",

packages/flow-table/package.json

@@ -26,7 +26,8 @@
     "lit": "^2.2.4"
   },
   "peerDependencies": {
-    "@cldcvr/flow-core": "2.0.3"
+    "@cldcvr/flow-core": "^2.0.3",
+    "@cldcvr/flow-core-config": "^1.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.5.7",

stories/flow-core/f-popover.mdx

@@ -26,7 +26,7 @@ be used to show short-lived information such as menus, options, additional actio
 
 <br />
 
-### [Playground](/story/components-f-popover--playground)
+### [Playground](/story/cldcvr-flow-core-f-popover--playground)
 
 <Canvas>
 	<Story of={FPopoverStories.Playground} />