FLOW-944 creating overlay globally

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

@@ -1,8 +1,13 @@
 <h4 className="margin-btm-8">Release Notes</h4>
 
-
 # Change Log
 
+## [2.0.5] - 2023-10-13
+
+### Bug fix
+
+- `f-popover`: z-index issue with target , overlay and popover fixed.
+
 ## [2.0.4] - 2023-10-13
 
 ### Improvements
@@ -17,8 +22,7 @@
 - Updated dependencies
 - `@cldcvr/[email protected]`
 
-
-## [2.0.2] - 2023-10-10 
+## [2.0.2] - 2023-10-10
 
 ### Patch Changes
 
@@ -47,7 +51,6 @@
 <hr className="margin-btm-32" />
 <p className="margin-btm-24">All notable changes to this project will be documented in this file. See <a>Conventional Commits</a> for commit guidelines. </p>
 
-
 ## [1.26.4] - 2023-10-06
 
 ### Improvements

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-core",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "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.scss

@@ -1,15 +1,2 @@
 :host {
-	.f-overlay {
-		background-color: #000;
-		opacity: 0.5;
-		position: fixed;
-		top: 0px;
-		bottom: 0px;
-		right: 0px;
-		left: 0px;
-		z-index: 1;
-		&[data-transparent="true"] {
-			background-color: transparent;
-		}
-	}
 }

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

@@ -1,4 +1,4 @@
-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";
@@ -16,10 +16,6 @@ import { flowElement } from "./../../utils";
 import { injectCss } from "@cldcvr/flow-core-config";
 injectCss("f-popover", globalStyle);
 
-const overlay = document.createElement("div");
-overlay.classList.add("f-overlay");
-overlay.dataset.qaOverlay = "true";
-
 // export type FPopoverVariant = "relative" | "absolute";
 export type FPopoverPlacement =
 	| "top"
@@ -136,6 +132,8 @@ export class FPopover extends FRoot {
 
 	isTooltip = false;
 
+	overlayElement?: HTMLDivElement;
+
 	reqAniFrame?: number;
 
 	offset: FPopOverOffset | null = null;
@@ -322,6 +320,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() {
@@ -371,26 +373,30 @@ export class FPopover extends FRoot {
 		});
 		if (this.open) {
 			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) {
-					overlay.dataset.transparent = "true";
+					this.overlayElement.dataset.transparent = "true";
 				} else {
-					delete overlay.dataset.transparent;
+					delete this.overlayElement.dataset.transparent;
 				}
 			}
-			// const overlay = this.isTooltip
-			// 	? nothing
-			// 	: html`<div
-			// 			class="f-overlay"
-			// 			data-transparent=${!this.overlay}
-			// 			data-qa-overlay
-			// 			@click=${this.overlayClick}
-			// 	  ></div>`;
 			this.computePosition(this.isTooltip);
 			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.stories.js → stories/flow-core/f-popover.stories.ts

@@ -1,9 +1,10 @@
 import { html } from "lit-html";
 import fPopoverAnatomy from "../svg/i-fpopover-anatomy.js";
 import { unsafeSVG } from "lit-html/directives/unsafe-svg.js";
-import { useArgs, useState } from "@storybook/client-api";
-import { ConfigUtil } from "@cldcvr/flow-core-config";
+import { useArgs } from "@storybook/manager-api";
+import { useState } from "@storybook/preview-api";
 import { createRef, ref } from "lit/directives/ref.js";
+import { FPopover, FPopoverPlacement, FPopoverSize } from "@cldcvr/flow-core";
 
 export default {
 	title: "@cldcvr/flow-core/f-popover",
@@ -15,20 +16,28 @@ export default {
 	}
 };
 
+export type PopOverStoryArgs = {
+	open: boolean;
+	overlay: boolean;
+	size: FPopoverSize;
+	placement: FPopoverPlacement;
+	shadow: boolean;
+	["auto-height"]: boolean;
+	["close-on-escape"]: boolean;
+};
+
 export const Playground = {
-	render: args => {
+	render: (args: PopOverStoryArgs) => {
 		const [_, updateArgs] = useArgs();
 
-		const handlePopover = (e, f) => {
-			console.log(e, f);
-
+		const handlePopover = (_e: CustomEvent) => {
 			updateArgs({
 				open: !args.open
 			});
 		};
 
 		return html` <f-div height="hug-content" direction="column" align="middle-center">
-			<f-div height="500px"></f-div>
+			<f-div height="200px"></f-div>
 			<f-popover
 				.open=${args.open}
 				.overlay=${args.overlay}
@@ -46,7 +55,7 @@ export const Playground = {
 						egestas, non efficitur odio varius. Phasellus accumsan pellentesque ex vehicula
 						tristique.
 					</f-text>
-					<f-select .options=${["option1", "option2", "option3"]}></f-select>
+					<f-select placeholder="Dropdown" .options=${["option1", "option2", "option3"]}></f-select>
 				</f-div>
 			</f-popover>
 			<f-button id="popoverTarget" label="Open" @click=${handlePopover}></f-button>
@@ -126,16 +135,16 @@ export const Anatomy = {
 };
 
 export const Target = {
-	render: args => {
+	render: (args: PopOverStoryArgs) => {
 		const [_, updateArgs] = useArgs();
 
-		const handlePopover = (e, f) => {
+		const handlePopover = () => {
 			updateArgs({
 				open: !args.open
 			});
 		};
 
-		const escapePopover = (e, f) => {
+		const escapePopover = () => {
 			updateArgs({
 				open: !args.open
 			});
@@ -179,7 +188,7 @@ export const Target = {
 };
 
 export const Placement = {
-	render: args => {
+	render: () => {
 		const [dummyPlacementArray, setDummyPlacementArray] = useState([
 			[
 				{
@@ -258,7 +267,7 @@ export const Placement = {
 			]
 		]);
 
-		const handlePopover = (main_index, index) => {
+		const handlePopover = (main_index: number, index: number) => {
 			const array = [...dummyPlacementArray];
 			array[index][main_index].open = !dummyPlacementArray[index][main_index].open;
 			setDummyPlacementArray(array);
@@ -310,7 +319,7 @@ export const Placement = {
 };
 
 export const Size = {
-	render: args => {
+	render: () => {
 		const [dummySizeArray, setDummySizeArray] = useState([
 			{
 				target: "#stretchSize",
@@ -357,7 +366,7 @@ export const Size = {
 			}
 		]);
 
-		const handlePopover = (item, index) => {
+		const handlePopover = (_item: unknown, index: number) => {
 			const array = [...dummySizeArray];
 			array[index].open = !dummySizeArray[index].open;
 			setDummySizeArray(array);
@@ -421,7 +430,7 @@ export const Size = {
 };
 
 export const Flags = {
-	render: args => {
+	render: () => {
 		const [openFlag, setOpenFlag] = useState(false);
 		const [openFlagForOverlay, setOpenFlagForOverlay] = useState(false);
 		const [openFlagForNoOverlay, setOpenFlagForNoOverlay] = useState(false);
@@ -588,8 +597,8 @@ export const Flags = {
 };
 
 export const ChildPopover = {
-	render: args => {
-		const innerPopover = createRef();
+	render: () => {
+		const innerPopover = createRef<FPopover>();
 
 		const handleInnerClose = () => {
 			if (innerPopover.value) {

stories/tsconfig.json

@@ -2,7 +2,8 @@
 	"extends": "../tsconfig.base.json",
 	"compilerOptions": {
 		"emitDeclarationOnly": false,
-		"noEmit": true
+		"noEmit": true,
+		"allowJs": true
 	},
 	"include": ["**/*"]
 }