feat: Layers

packages/core/.storybook/preview-body.html

@@ -1,2 +1 @@
 <div id="dropdown-portal"></div>
-<div id="tooltips-container"></div>

packages/core/.storybook/preview-head.html

@@ -21,12 +21,6 @@
   body * {
     box-sizing: border-box;
   }
-  #tooltips-container {
-    position: relative;
-    white-space: pre-wrap;
-    z-index: 99999999;
-    max-width: 50%;
-  }
   .light-app-theme {
     background-color: var(--sb-primary-background-color);
   }

packages/core/package.json

@@ -175,6 +175,7 @@
     "@types/lodash-es": "^4.17.6",
     "@types/react": "^18.0.25",
     "@types/react-dates": "^21.8.3",
+    "@types/react-dom": "^18.2.18",
     "@types/react-is": "^16.7.5",
     "@types/react-resizable": "^3.0.7",
     "@types/react-test-renderer": "^16.9.0",

packages/core/src/components/Dialog/Dialog.tsx

@@ -15,6 +15,7 @@ import { VibeComponentProps } from "../../types";
 import * as PopperJS from "@popperjs/core";
 import styles from "./Dialog.module.scss";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
+import LayerContext from "../LayerProvider/LayerContext";
 
 export interface DialogProps extends VibeComponentProps {
   /**
@@ -92,6 +93,7 @@ export interface DialogProps extends VibeComponentProps {
    * Classname to be added to the content container
    */
   wrapperClassName?: string;
+  layerClassName?: string;
   /**
    * Prevent Animation
    */
@@ -126,6 +128,7 @@ export interface DialogProps extends VibeComponentProps {
    * callback to be called when click on the content is being triggered
    */
   onContentClick?: (event: React.MouseEvent) => void;
+  // TODO: remove in next major
   /**
    * z-index to add to the dialog
    */
@@ -199,6 +202,7 @@ export default class Dialog extends PureComponent<DialogProps, DialogState> {
   };
   private showTimeout: NodeJS.Timeout;
   private hideTimeout: NodeJS.Timeout;
+  context!: React.ContextType<typeof LayerContext>;
 
   constructor(props: DialogProps) {
     super(props);
@@ -282,10 +286,11 @@ export default class Dialog extends PureComponent<DialogProps, DialogState> {
 
     const containerElement = document.querySelector(containerSelector);
     if (!containerElement) {
-      // TODO add env check - if not jest env - trashing the logs - https://monday.monday.com/boards/3532714909/pulses/5570955392
-      // console.error(
-      //   `Dialog: Container element with selector "${containerSelector}" was not found. Dialog may not be correctly positioned.`
-      // );
+      const { layerRef } = this.context;
+      if (layerRef?.current) {
+        // Use Vibe layers mechanism if containerElement was not provided, otherwise fallback to document.body
+        return layerRef.current;
+      }
       return document.body;
     }
     return containerElement;
@@ -485,6 +490,7 @@ export default class Dialog extends PureComponent<DialogProps, DialogState> {
   render() {
     const {
       wrapperClassName,
+      layerClassName,
       content,
       startingEdge,
       children,
@@ -603,6 +609,7 @@ export default class Dialog extends PureComponent<DialogProps, DialogState> {
                   animationType={animationTypeCalculated}
                   position={placement}
                   wrapperClassName={wrapperClassName}
+                  layerClassName={layerClassName}
                   startingEdge={startingEdge}
                   isOpen={this.isShown()}
                   showDelay={showDelay}
@@ -637,3 +644,5 @@ function chainOnPropsAndInstance(name: string, instance: Dialog, props: DialogPr
   // @ts-ignore
   return chainFunctions([props[name], instance[name]], true);
 }
+
+Dialog.contextType = LayerContext;

packages/core/src/components/Dialog/DialogContent/DialogContent.module.scss

@@ -39,6 +39,10 @@
   }
 }
 
+.dialogLayer {
+  z-index: var(--layer-popover);
+}
+
 .contentWrapper[data-popper-reference-hidden="true"] {
   visibility: hidden;
   pointer-events: none;

packages/core/src/components/Dialog/DialogContent/DialogContent.tsx

@@ -22,6 +22,7 @@ export interface DialogContentProps extends VibeComponentProps {
   children?: ReactElement | ReactElement[];
   position?: PopperJS.Placement;
   wrapperClassName?: string;
+  layerClassName?: string;
   isOpen?: boolean;
   // TODO breaking change convert to enum
   startingEdge?: any;
@@ -54,6 +55,7 @@ export const DialogContent: VibeComponent<DialogContentProps> = React.forwardRef
       children,
       position,
       wrapperClassName,
+      layerClassName,
       isOpen = false,
       startingEdge,
       animationType = "expand",
@@ -124,8 +126,14 @@ export const DialogContent: VibeComponent<DialogContentProps> = React.forwardRef
     }
     return (
       <span
+        // TODO: remove "monday-style-dialog-content-wrapper" class in next major
         // don't remove old classname - override from Monolith
-        className={cx("monday-style-dialog-content-wrapper", styles.contentWrapper, wrapperClassName)}
+        className={cx(
+          "monday-style-dialog-content-wrapper",
+          styles.contentWrapper,
+          wrapperClassName,
+          layerClassName || styles.dialogLayer
+        )}
         ref={forwardRef}
         data-testid={dataTestId}
         style={styleObject}

packages/core/src/components/LayerProvider/LayerContext.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export type LayersContextType = {
+  layerRef: React.RefObject<HTMLElement>;
+};
+
+const LayerContext = React.createContext<LayersContextType>({
+  layerRef: null
+});
+
+export default LayerContext;

packages/core/src/components/LayerProvider/LayerProvider.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+import LayerContext from "./LayerContext";
+
+interface LayerProviderType {
+  children: JSX.Element | JSX.Element[];
+  layerRef: React.RefObject<HTMLElement> | null;
+}
+
+const LayerProvider: FC<LayerProviderType> = ({ children, layerRef }) => {
+  return <LayerContext.Provider value={{ layerRef }}>{children}</LayerContext.Provider>;
+};
+
+export default LayerProvider;

packages/core/src/components/Modal/Modal.module.scss

@@ -5,7 +5,8 @@
 }
 
 .container {
-  --monday-modal-z-index: 10000;
+  --monday-modal-z-index: var(--layer-modal);
+  // TODO: use --modal-layer in next major
   z-index: var(--monday-modal-z-index);
   display: flex;
   justify-content: center;

packages/core/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, FC, ReactElement, useCallback, useMemo } from "react";
+import React, { cloneElement, FC, ReactElement, useCallback, useMemo, useRef } from "react";
 import ReactDOM from "react-dom";
 import cx from "classnames";
 import { useA11yDialog } from "./a11yDialog";
@@ -12,6 +12,7 @@ import { withStaticProps } from "../../types";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import styles from "./Modal.module.scss";
+import LayerProvider from "../LayerProvider/LayerProvider";
 
 export interface ModalProps {
   /**
@@ -72,6 +73,7 @@ export interface ModalProps {
    *  Dialog content
    */
   children?: ReactElement | ReactElement[];
+  // TODO: remove next major
   /**
    * z-index attribute of the container
    */
@@ -97,6 +99,7 @@ const Modal: FC<ModalProps> & { width?: typeof ModalWidth } = ({
   zIndex = 10000,
   "data-testid": dataTestId
 }) => {
+  const overlayRef = useRef(null);
   const childrenArray: ReactElement[] = useMemo(
     () => (children ? (React.Children.toArray(children) as ReactElement[]) : []),
     [children]
@@ -162,27 +165,31 @@ const Modal: FC<ModalProps> & { width?: typeof ModalWidth } = ({
       {...attr.container}
       className={cx(styles.container, classNames.container)}
       data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL, id)}
+      // TODO: remove in next major
       style={{ "--monday-modal-z-index": zIndex }}
     >
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-      <div
-        onClick={closeIfNotAlertType}
-        className={cx(styles.overlay, classNames.overlay)}
-        data-testid={ComponentDefaultTestId.MODAL_OVERLAY}
-      />
-      <div
-        {...attr.dialog}
-        className={cx(styles.dialog, classNames.modal, {
-          [styles.default]: width === ModalWidth.DEFAULT,
-          [styles.full]: width === ModalWidth.FULL_WIDTH,
-          [styles.spacing]: contentSpacing
-        })}
-        style={{ width: customWidth ? width : null }}
-      >
-        {header}
-        {content}
-        {footer}
-      </div>
+      <LayerProvider layerRef={overlayRef}>
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+        <div
+          onClick={closeIfNotAlertType}
+          className={cx(styles.overlay, classNames.overlay)}
+          data-testid={ComponentDefaultTestId.MODAL_OVERLAY}
+          ref={overlayRef}
+        />
+        <div
+          {...attr.dialog}
+          className={cx(styles.dialog, classNames.modal, {
+            [styles.default]: width === ModalWidth.DEFAULT,
+            [styles.full]: width === ModalWidth.FULL_WIDTH,
+            [styles.spacing]: contentSpacing
+          })}
+          style={{ width: customWidth ? width : null }}
+        >
+          {header}
+          {content}
+          {footer}
+        </div>
+      </LayerProvider>
     </div>,
     document.body
   );

packages/core/src/components/Slider/__tests__/__snapshots__/slider-non-ranged-tests.jest.js.snap

@@ -48,7 +48,7 @@ Snapshot Diff:
           tabindex="0"
         />
 +       <span
-+         class="monday-style-dialog-content-wrapper contentWrapper"
++         class="monday-style-dialog-content-wrapper contentWrapper tooltipLayer"
 +         data-popper-reference-hidden="false"
 +         data-testid="tooltip"
 +         style="position: absolute; left: 0px; top: 0px;"
@@ -83,7 +83,7 @@ Snapshot Diff:
           tabindex="0"
         />
 -       <span
--         class="monday-style-dialog-content-wrapper contentWrapper"
+-         class="monday-style-dialog-content-wrapper contentWrapper tooltipLayer"
 -         data-popper-reference-hidden="false"
 -         data-testid="tooltip"
 -         style="position: absolute; left: 0px; top: 0px;"
@@ -118,7 +118,7 @@ Snapshot Diff:
           tabindex="0"
         />
 +       <span
-+         class="monday-style-dialog-content-wrapper contentWrapper"
++         class="monday-style-dialog-content-wrapper contentWrapper tooltipLayer"
 +         data-popper-reference-hidden="false"
 +         data-testid="tooltip"
 +         style="position: absolute; left: 0px; top: 0px;"
@@ -153,7 +153,7 @@ Snapshot Diff:
           tabindex="0"
         />
 -       <span
--         class="monday-style-dialog-content-wrapper contentWrapper"
+-         class="monday-style-dialog-content-wrapper contentWrapper tooltipLayer"
 -         data-popper-reference-hidden="false"
 -         data-testid="tooltip"
 -         style="position: absolute; left: 0px; top: 0px;"

packages/core/src/components/Slider/__tests__/__snapshots__/slider-ranged-tests.jest.js.snap

@@ -59,7 +59,7 @@ Snapshot Diff:
           tabindex="0"
         />
 +       <span
-+         class="monday-style-dialog-content-wrapper contentWrapper"
++         class="monday-style-dialog-content-wrapper contentWrapper tooltipLayer"
 +         data-popper-reference-hidden="false"
 +         data-testid="tooltip"
 +         style="position: absolute; left: 0px; top: 0px;"
@@ -94,7 +94,7 @@ Snapshot Diff:
           tabindex="0"
         />
 +       <span
-+         class="monday-style-dialog-content-wrapper contentWrapper"
++         class="monday-style-dialog-content-wrapper contentWrapper tooltipLayer"
 +         data-popper-reference-hidden="false"
 +         data-testid="tooltip"
 +         style="position: absolute; left: 0px; top: 0px;"
@@ -129,7 +129,7 @@ Snapshot Diff:
           tabindex="0"
         />
 -       <span
--         class="monday-style-dialog-content-wrapper contentWrapper"
+-         class="monday-style-dialog-content-wrapper contentWrapper tooltipLayer"
 -         data-popper-reference-hidden="false"
 -         data-testid="tooltip"
 -         style="position: absolute; left: 0px; top: 0px;"
@@ -164,7 +164,7 @@ Snapshot Diff:
           tabindex="0"
         />
 +       <span
-+         class="monday-style-dialog-content-wrapper contentWrapper"
++         class="monday-style-dialog-content-wrapper contentWrapper tooltipLayer"
 +         data-popper-reference-hidden="false"
 +         data-testid="tooltip"
 +         style="position: absolute; left: 0px; top: 0px;"
@@ -274,7 +274,7 @@ Snapshot Diff:
           tabindex="0"
         />
 -       <span
--         class="monday-style-dialog-content-wrapper contentWrapper"
+-         class="monday-style-dialog-content-wrapper contentWrapper tooltipLayer"
 -         data-popper-reference-hidden="false"
 -         data-testid="tooltip"
 -         style="position: absolute; left: 0px; top: 0px;"

packages/core/src/components/Tipseen/Tipseen.module.scss

@@ -1,5 +1,9 @@
 @import "../../styles/typography";
 
+.tipseenLayer {
+  z-index: var(--layer-popover);
+}
+
 .tipseenWrapper {
   min-width: 100px;
   min-height: 40px;

packages/core/src/components/Tipseen/Tipseen.tsx

@@ -200,6 +200,7 @@ const Tipseen: VibeComponent<TipseenProps> & {
           modifiers={modifiers}
           open={defaultDelayOpen ? delayedOpen : undefined}
           forceRenderWithoutChildren={floating}
+          layerClassName={styles.tipseenLayer}
         >
           {children}
         </Tooltip>

packages/core/src/components/Tipseen/__tests__/__snapshots__/tipseen-tests.jest.js.snap

@@ -141,7 +141,7 @@ Array [
     onMouseLeave={[Function]}
   />,
   <span
-    className="monday-style-dialog-content-wrapper contentWrapper"
+    className="monday-style-dialog-content-wrapper contentWrapper tipseenLayer"
     data-popper-reference-hidden={false}
     data-testid="tooltip"
     onClickCapture={[Function]}
@@ -230,7 +230,7 @@ Array [
 
 exports[`Snapshot tests Tipseen tests renders correctly with floating variation 1`] = `
 <span
-  className="monday-style-dialog-content-wrapper contentWrapper"
+  className="monday-style-dialog-content-wrapper contentWrapper tipseenLayer"
   data-popper-reference-hidden={false}
   data-testid="tooltip"
   onClickCapture={[Function]}
@@ -318,7 +318,7 @@ Array [
     onMouseLeave={[Function]}
   />,
   <span
-    className="monday-style-dialog-content-wrapper contentWrapper"
+    className="monday-style-dialog-content-wrapper contentWrapper tipseenLayer"
     data-popper-reference-hidden={false}
     data-testid="tooltip"
     onClickCapture={[Function]}
@@ -377,7 +377,7 @@ Array [
     onMouseLeave={[Function]}
   />,
   <span
-    className="monday-style-dialog-content-wrapper contentWrapper"
+    className="monday-style-dialog-content-wrapper contentWrapper tipseenLayer"
     data-popper-reference-hidden={false}
     data-testid="tooltip"
     onClickCapture={[Function]}
@@ -436,7 +436,7 @@ Array [
     onMouseLeave={[Function]}
   />,
   <span
-    className="monday-style-dialog-content-wrapper contentWrapper"
+    className="monday-style-dialog-content-wrapper contentWrapper tipseenLayer"
     data-popper-reference-hidden={false}
     data-testid="tooltip"
     onClickCapture={[Function]}