add DecoupledOverlay component

Author: haschek

src/components/DecoupledOverlay/DecoupledOverlay.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { DecoupledOverlay, DecoupledOverlayProps, Tag, WhiteSpaceContainer } from "../../../index";
+
+export default {
+    title: "Components/DecoupledOverlay",
+    component: DecoupledOverlay,
+    argTypes: {},
+} as Meta<typeof DecoupledOverlay>;
+
+const Template: StoryFn<typeof DecoupledOverlay> = (args: DecoupledOverlayProps) => {
+    return (
+        <>
+            <Tag id={"decoupledTarget"}>Decoupled target</Tag>
+            <DecoupledOverlay {...args} />
+        </>
+    );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+    children: (
+        <WhiteSpaceContainer marginTop={"small"} marginRight={"small"} marginBottom={"small"} marginLeft={"small"}>
+            Decoupled overlay
+        </WhiteSpaceContainer>
+    ),
+    targetSelectorOrElement: "#decoupledTarget",
+};

src/components/DecoupledOverlay/DecoupledOverlay.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
+import { createPopper } from "@popperjs/core";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ContextOverlayProps, TestableComponent, TooltipSize } from "../../index";
+
+/**
+ * Overlay without the necessity to use a target that need to be rendered in place.
+ * The target is referenced by a selector string or element object.
+ * It can exist somewhere in the DOM, but it must exist when the overlay is rendered.
+ * It is always displayed, close it by removement.
+ */
+export interface DecoupledOverlayProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        TestableComponent,
+        Pick<ContextOverlayProps, "usePortal" | "portalContainer" | "placement" | "minimal"> {
+    /**
+     * Element that should be used. The step content is displayed as a tooltip instead of a modal.
+     * In case of an array, the first match is highlighted. */
+    targetSelectorOrElement: string | Element;
+    /**
+     * The size of the overlay.
+     * */
+    size?: TooltipSize;
+}
+
+/** Popover that is displayed and points at the highlighted element. */
+export const DecoupledOverlay = ({
+    targetSelectorOrElement,
+    usePortal = true,
+    portalContainer = document.body,
+    minimal = false,
+    placement = "auto",
+    size = "large",
+    children,
+}: DecoupledOverlayProps) => {
+    const overlayRef = React.useCallback(
+        (overlay: HTMLDivElement | null) => {
+            const target =
+                typeof targetSelectorOrElement === "string"
+                    ? document.querySelector(targetSelectorOrElement)
+                    : targetSelectorOrElement;
+            if (overlay && target) {
+                createPopper(target, overlay, {
+                    placement: placement,
+                    modifiers: [
+                        {
+                            name: "offset",
+                            options: {
+                                offset: [0, 15],
+                            },
+                        },
+                    ],
+                });
+            }
+        },
+        [targetSelectorOrElement]
+    );
+
+    const overlay = (
+        <div
+            className={
+                `${eccgui}-visual-tour__overlay` +
+                ` ${eccgui}-visual-tour__overlay--${size}` +
+                ` ${BlueprintClasses.POPOVER}` +
+                (minimal ? ` ${BlueprintClasses.MINIMAL}` : "")
+            }
+            role="tooltip"
+            ref={overlayRef}
+        >
+            {!minimal && (
+                <div
+                    className={`${eccgui}-visual-tour__arrow ${BlueprintClasses.POPOVER_ARROW}`}
+                    data-popper-arrow
+                    aria-hidden
+                />
+            )}
+            <div className={`${BlueprintClasses.POPOVER_CONTENT} ${eccgui}-visual-tour__overlay__content`}>
+                {children}
+            </div>
+        </div>
+    );
+
+    return usePortal ? createPortal(overlay, portalContainer) : overlay;
+};
+
+export default DecoupledOverlay;

src/components/DecoupledOverlay/_decoupledoverlay.scss

@@ -0,0 +1,46 @@
+.#{$eccgui}-visual-tour__arrow {
+    &::before {
+        background: $card-background-color;
+    }
+
+    .#{$eccgui}-visual-tour__overlay[data-popper-placement="top"] & {
+        bottom: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-visual-tour__overlay[data-popper-placement="right"] & {
+        left: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-visual-tour__overlay[data-popper-placement="bottom"] & {
+        top: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-visual-tour__overlay[data-popper-placement="left"] & {
+        right: -0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-visual-tour__overlay {
+    &.#{$prefix-blueprintjs}-popover {
+        z-index: 8002; // 2 over application header
+    }
+
+    &--small {
+        @extend .#{$eccgui}-tooltip--small;
+    }
+
+    &--medium {
+        @extend .#{$eccgui}-tooltip--medium;
+    }
+
+    &--large {
+        @extend .#{$eccgui}-tooltip--large;
+    }
+
+    &:has(.#{$eccgui}-visual-tour__arrow) {
+        .#{$eccgui}-visual-tour__overlay__content {
+            min-height: 30px; // height of blueprint arrow
+        }
+    }
+}
+
+.#{$eccgui}-visual-tour__overlay__content {
+    padding: 0.1px; // force margins of children to stay inside
+}

src/components/index.scss

@@ -5,6 +5,7 @@
 @import "./Card/card";
 @import "./Chat/chat";
 @import "./Checkbox/checkbox";
+@import "./DecoupledOverlay/decoupledoverlay";
 @import "./Depiction/depiction";
 @import "./Dialog/dialog";
 @import "./FlexibleLayout/flexiblelayout";

src/components/index.ts

@@ -9,6 +9,7 @@ export * from "./Checkbox/Checkbox";
 export * from "./CodeAutocompleteField";
 export * from "./ContentGroup/ContentGroup";
 export * from "./ContextOverlay";
+export * from "./DecoupledOverlay/DecoupledOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";
 export * from "./FlexibleLayout";