@eccenca/gui-elements 24.1.0-rc.6 → 24.2.0-featuresupportprojectvariableautocompletioncmem5572.0

package/src/cmem/markdown/Markdown.tsx

@@ -1,15 +1,21 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
-import { PluggableList } from "react-markdown/lib/react-markdown";
+/**
+ * Recreate the old type to provide support until next major
+ */
+import { PluggableList as PluggableListDeprecated } from "react-markdown-deprecated/lib/react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 // @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
 import remarkTypograf from "@mavrin/remark-typograf";
+import rehypeExternalLinks from "rehype-external-links";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
+import { PluggableList as PluggableListUnified } from "unified";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
+type PluggableList = PluggableListUnified | PluggableListDeprecated;
 
 export interface MarkdownProps extends TestableComponent {
     children: string;
@@ -35,6 +41,7 @@ export interface MarkdownProps extends TestableComponent {
     /**
      * Additional reHype plugins to execute.
      * @see https://github.com/remarkjs/react-markdown#architecture
+     * @deprecated (v25) this property won't support `PluggableList` from "react-markdown/lib/react-markdown" with the next major version, only the one from `unified` will be supported then.
      */
     reHypePlugins?: PluggableList;
     /**
@@ -54,9 +61,9 @@ const configDefault = {
         @see https://github.com/remarkjs/react-markdown#api
     */
     // @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
-    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableList,
+    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableListUnified,
     // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
-    rehypePlugins: [] as PluggableList,
+    rehypePlugins: [] as PluggableListUnified,
     allowedElements: [
         // default markdown
         "a",
@@ -110,6 +117,13 @@ export const Markdown = ({
     htmlContentBlockProps,
     ...otherProps
 }: MarkdownProps) => {
+    const configHtmlExternalLinks = {
+        rel: ["nofollow"],
+        target: linkTargetName,
+    };
+
+    configDefault.rehypePlugins = configDefault.rehypePlugins.concat([[rehypeExternalLinks, configHtmlExternalLinks]]);
+
     const configHtml = allowHtml
         ? {
               rehypePlugins: [...configDefault.rehypePlugins].concat([rehypeRaw]),
@@ -132,14 +146,10 @@ export const Markdown = ({
         ...configDefault,
         ...configHtml,
         ...configTextOnly,
-        linkTarget: linkTargetName
-            ? (href: string, _children: any, _title: string) => {
-                  const linkTarget = href.charAt(0) !== "#" ? linkTargetName : "";
-                  return linkTarget as React.HTMLAttributeAnchorTarget;
-              }
-            : undefined,
         components: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             code(props: any) {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 const { children, className, node, inline, ...rest } = props;
                 const match = /language-(\w+)/.exec(className || "");
                 return match ? (
@@ -159,14 +169,15 @@ export const Markdown = ({
                 );
             },
         },
+        allowedElements,
     };
-    allowedElements && (reactMarkdownProperties.allowedElements = allowedElements);
-    reHypePlugins &&
-        reHypePlugins.forEach(
-            (plugin) => (reactMarkdownProperties.rehypePlugins = [...reactMarkdownProperties.rehypePlugins, plugin])
+
+    if (reHypePlugins) {
+        reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(
+            reHypePlugins as PluggableListUnified
         );
+    }
 
-    // @ts-ignore because against the lib spec it does not allow a function for linkTarget.
     const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />;
     return inheritBlock && !(otherProps["data-test-id"] || htmlContentBlockProps) ? (
         markdownDisplay

package/src/cmem/markdown/highlightSearchWords.test.ts

@@ -9,7 +9,12 @@ describe("Highlight search words reHype plugin", () => {
         const highlightSearchWordsPlugin = markdownUtils.highlightSearchWordsPluginFactory(searchQuery);
         const highlightSearchWordTransformer = highlightSearchWordsPlugin();
         const textNode = (text: string): Text => ({ type: "text", value: text });
-        const markNode = (text: string): Element => ({ type: "element", tagName: "mark", children: [textNode(text)] });
+        const markNode = (text: string): Element => ({
+            type: "element",
+            tagName: "mark",
+            properties: {},
+            children: [textNode(text)],
+        });
         const result = highlightSearchWordTransformer(
             {
                 type: "root",
@@ -17,12 +22,13 @@ describe("Highlight search words reHype plugin", () => {
                     {
                         type: "element",
                         tagName: "p",
+                        properties: {},
                         children: [textNode("Text with abc query words xyz.")],
                     },
                 ],
             },
             new VFile(),
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
+
             () => {}
         );
         const rootChildren = (result as Root).children;

package/src/cmem/markdown/highlightSearchWords.ts

@@ -25,7 +25,12 @@ const highlightSearchWordsPluginFactory = (searchQuery: string | undefined) => {
         let matchArray = multiWordRegex.exec(text);
         while (matchArray !== null) {
             result.push(createTextNode(text.slice(offset, matchArray.index)));
-            result.push({ type: "element", tagName: "mark", children: [createTextNode(matchArray[0])] });
+            result.push({
+                type: "element",
+                tagName: "mark",
+                properties: {},
+                children: [createTextNode(matchArray[0])],
+            });
             offset = multiWordRegex.lastIndex;
             matchArray = multiWordRegex.exec(text);
         }

package/src/common/Intent/index.ts

@@ -1,16 +1,16 @@
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Intent as BlueprintIntent } from "@blueprintjs/core";
 
-export type IntentTypes = "none" | "neutral" | "primary" | "accent" | "info" | "success" | "warning" | "danger";
+export type IntentBlueprint = BlueprintIntent;
+export const DefinitionsBlueprint = BlueprintIntent;
+
+export type IntentTypes = IntentBlueprint | "neutral" | "accent" | "info";
 
 export const Definitions: { [key: string]: IntentTypes } = {
-    PRIMARY: "primary",
+    ...DefinitionsBlueprint,
     ACCENT: "accent",
     NEUTRAL: "neutral",
-    NONE: "none",
-    SUCCESS: "success",
     INFO: "info",
-    WARNING: "warning",
-    DANGER: "danger",
 };
 
 export const intentClassName = (intent: IntentTypes) => {

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useMemo, useState } from "react";
 import { Classes as BlueprintClassNames } from "@blueprintjs/core";
 import { EditorView, Rect } from "@codemirror/view";
@@ -165,6 +166,10 @@ export interface AutoSuggestionProps {
     /** If this is enabled the value of the editor is replaced with the initialValue if it changes.
      * FIXME: This property is a workaround for some "controlled" usages of the component via the initialValue property. */
     reInitOnInitialValueChange?: boolean;
+    /** Optional height of the component */
+    height?: number | string;
+    /** Set read-only mode. Default: false */
+    readOnly?: boolean;
 }
 
 // Meta data regarding a request
@@ -197,6 +202,8 @@ const AutoSuggestion = ({
     mode,
     multiline = false,
     reInitOnInitialValueChange = false,
+    height,
+    readOnly,
 }: AutoSuggestionProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
@@ -207,7 +214,7 @@ const AutoSuggestion = ({
     const suggestionRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
     const [pathValidationPending, setPathValidationPending] = React.useState(false);
     const validationRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
-    const [, setErrorMarkers] = React.useState<any[]>([]);
+    const errorMarkers = React.useRef<any[]>([]);
     const [validationResponse, setValidationResponse] = useState<CodeAutocompleteFieldValidationResult | undefined>(
         undefined
     );
@@ -219,8 +226,8 @@ const AutoSuggestion = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
-    const currentCm = React.useRef<EditorView>()
-    currentCm.current = cm
+    const currentCm = React.useRef<EditorView>();
+    currentCm.current = cm;
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
@@ -242,16 +249,16 @@ const AutoSuggestion = ({
                 changes: { from: 0, to: currentCm.current.state?.doc.length, insert: initialValue },
             });
             // Validate initial value change
-            checkValuePathValidity(initialValue)
+            checkValuePathValidity(initialValue);
         }
     }, [initialValue, reInitOnInitialValueChange]);
 
     React.useEffect(() => {
-        if(currentCm.current) {
+        if (currentCm.current) {
             // Validate initial value
-            checkValuePathValidity(initialValue)
+            checkValuePathValidity(initialValue);
         }
-    }, [currentCm.current!!])
+    }, [!!currentCm.current]);
 
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;
@@ -263,10 +270,9 @@ const AutoSuggestion = ({
         editorState.cm = cm;
     }, [cm, editorState]);
 
-    const dispatch = // eslint-disable-next-line @typescript-eslint/no-empty-function
-        (
-            typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}
-        ) as EditorView["dispatch"];
+    const dispatch = (
+        typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}
+    ) as EditorView["dispatch"];
 
     React.useEffect(() => {
         editorState.dropdownShown = shouldShowDropdown;
@@ -288,8 +294,9 @@ const AutoSuggestion = ({
                 return () => removeMarkFromText({ view: cm, from, to });
             }
         } else {
-            //remove redundant markers
-            cm && removeMarkFromText({ view: cm, from: 0, to: cm.state?.doc.length });
+            if (cm) {
+                removeMarkFromText({ view: cm, from: 0, to: cm.state?.doc.length });
+            }
         }
         return;
     }, [highlightedElement, selectedTextRanges, cm]);
@@ -298,9 +305,17 @@ const AutoSuggestion = ({
     React.useEffect(() => {
         const parseError = validationResponse?.parseError;
         if (cm) {
+            const clearCurrentErrorMarker = () => {
+                if (errorMarkers.current.length) {
+                    const [from, to] = errorMarkers.current;
+                    removeMarkFromText({ view: cm, from, to });
+                    errorMarkers.current = [];
+                }
+            };
             if (parseError) {
                 const { message, start, end } = parseError;
                 const { toOffset, fromOffset } = getOffsetRange(cm, start, end);
+                clearCurrentErrorMarker();
                 const { from, to } = markText({
                     view: cm,
                     from: fromOffset,
@@ -308,22 +323,14 @@ const AutoSuggestion = ({
                     className: `${eccgui}-autosuggestion__text--highlighted-error`,
                     title: message,
                 });
-
-                setErrorMarkers((previousMarkers) => {
-                    previousMarkers.forEach((m) => removeMarkFromText({ view: cm, from: m.from, to: m.to }));
-                    return [from, to];
-                });
+                errorMarkers.current = [from, to];
             } else {
-                // Valid, clear all error markers
-                setErrorMarkers((previous) => {
-                    previous.forEach((m) => removeMarkFromText({ view: cm, from: m.from, to: m.to }));
-                    return [];
-                });
+                clearCurrentErrorMarker();
             }
         }
 
         const isValid = validationResponse?.valid === undefined || validationResponse.valid;
-        onInputChecked && onInputChecked(isValid);
+        onInputChecked?.(isValid);
     }, [validationResponse?.valid, validationResponse?.parseError, cm, onInputChecked]);
 
     /** generate suggestions and also populate the replacement indexes dict */
@@ -390,6 +397,7 @@ const AutoSuggestion = ({
             try {
                 const result: CodeAutocompleteFieldValidationResult | undefined = await checkInput(inputString);
                 setValidationResponse(result);
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
             } catch (e) {
                 setValidationResponse(undefined);
                 // TODO: Error handling
@@ -425,6 +433,7 @@ const AutoSuggestion = ({
                         setSuggestionResponse(result);
                     }
                 }
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
             } catch (e) {
                 setSuggestionResponse(undefined);
                 // TODO: Error handling
@@ -445,12 +454,14 @@ const AutoSuggestion = ({
         [asyncHandleEditorInputChange, autoCompletionRequestDelay]
     );
 
-    const handleChange = (val: string) => {
-        value.current = val;
-        checkValuePathValidity.cancel();
-        checkValuePathValidity(value.current);
-        onChange(val);
-    };
+    const handleChange = React.useMemo(() => {
+        return (val: string) => {
+            value.current = val;
+            checkValuePathValidity.cancel();
+            checkValuePathValidity(value.current);
+            onChange(val);
+        };
+    }, [onChange, checkValuePathValidity]);
 
     const handleCursorChange = (cursor: number, coords: Rect, scrollinfo: HTMLElement, view: EditorView) => {
         //cursor here is offset from line 1, autosuggestion works with cursor per-line.
@@ -534,8 +545,13 @@ const AutoSuggestion = ({
     };
 
     const handleInputFocus = (focusState: boolean) => {
-        onFocusChange && onFocusChange(focusState);
-        focusState ? setShouldShowDropdown(true) : closeDropDown();
+        onFocusChange?.(focusState);
+        if (focusState) {
+            setShouldShowDropdown(true);
+        } else {
+            closeDropDown();
+        }
+
         if (!isFocused.current && focusState) {
             // Just got focus
             // Clear suggestions and repeat suggestion request, something else might have changed while this component was not focused
@@ -643,6 +659,8 @@ const AutoSuggestion = ({
                 showScrollBar={showScrollBar}
                 multiline={multiline}
                 onMouseDown={handleInputMouseDown}
+                height={height}
+                readOnly={readOnly}
             />
         );
     }, [

package/src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -61,6 +61,10 @@ export interface ExtendedCodeEditorProps {
         | "additionalExtensions"
         | "outerDivAttributes"
     >;
+    /** Optional height of the component */
+    height?: number | string;
+    /** Set read-only mode. Default: false */
+    readOnly?: boolean;
 }
 
 export type IEditorProps = ExtendedCodeEditorProps;
@@ -80,6 +84,8 @@ export const ExtendedCodeEditor = ({
     onCursorChange,
     onSelection,
     codeEditorProps,
+    height,
+    readOnly,
 }: ExtendedCodeEditorProps) => {
     const initialContent = React.useRef(multiline ? initialValue : initialValue.replace(/[\r\n]/g, " "));
     const multilineExtensions = multiline
@@ -104,6 +110,8 @@ export const ExtendedCodeEditor = ({
             mode={mode}
             name=""
             enableTab={enableTab}
+            height={height}
+            readOnly={readOnly}
             additionalExtensions={[...multilineExtensions]}
             outerDivAttributes={{
                 className: `${eccgui}-${

package/src/components/Button/Button.stories.tsx

@@ -18,6 +18,10 @@ export default {
         onClick: {
             action: "clicked",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+        },
     },
 } as Meta<typeof Button>;
 
@@ -67,17 +71,17 @@ const TemplateSemantic: StoryFn<typeof Button> = (args) => (
 export const ButtonSemantics = TemplateSemantic.bind({});
 ButtonSemantics.args = FullExample.args;
 
-const TemplateState: StoryFn<typeof Button> = (args) => (
+const TemplateIntent: StoryFn<typeof Button> = (args) => (
     <OverlaysProvider>
-        <Button {...args} text="Success" hasStateSuccess />
+        <Button {...args} text="Success" intent="success" />
         <Spacing vertical />
-        <Button {...args} text="Warning" hasStateWarning />
+        <Button {...args} text="Warning" intent="warning" />
         <Spacing vertical />
-        <Button {...args} text="Danger" hasStateDanger />
+        <Button {...args} text="Danger" intent="danger" />
     </OverlaysProvider>
 );
-export const ButtonStates = TemplateState.bind({});
-ButtonStates.args = FullExample.args;
+export const ButtonIntent = TemplateIntent.bind({});
+ButtonIntent.args = FullExample.args;
 
 const TemplateContent: StoryFn<typeof Button> = (args) => (
     <OverlaysProvider>

package/src/components/Button/Button.tsx

@@ -32,18 +32,22 @@ interface AdditionalButtonProps {
     elevated?: boolean;
     /**
      * The button is displayed with primary color scheme.
+     * @deprecated (v25) use `intent="primary"` instead.
      */
     hasStatePrimary?: boolean;
     /**
      * The button is displayed with success (some type of green) color scheme.
+     *  @deprecated (v25) use `intent="success"` instead.
      */
     hasStateSuccess?: boolean;
     /**
      * The button is displayed with warning (some type of orange) color scheme.
+     *  @deprecated (v25) use `intent="warning"` instead.
      */
     hasStateWarning?: boolean;
     /**
      * The button is displayed with danger (some type of red) color scheme.
+     *  @deprecated (v25) use `intent="danger"` instead.
      */
     hasStateDanger?: boolean;
     /**
@@ -100,6 +104,7 @@ export const Button = ({
     tooltipProps,
     badge,
     badgeProps = { size: "small", position: "top-right", maxLength: 2 },
+    intent,
     ...restProps
 }: ButtonProps) => {
     let intention;
@@ -120,13 +125,13 @@ export const Button = ({
             break;
     }
 
-    const ButtonType: any = restProps.href ? BlueprintAnchorButton : BlueprintButton;
+    const ButtonType = restProps.href ? BlueprintAnchorButton : BlueprintButton;
 
     const button = (
         <ButtonType
             {...restProps}
             className={`${eccgui}-button ` + className}
-            intent={intention}
+            intent={(intent || intention) as BlueprintIntent}
             icon={typeof icon === "string" ? <Icon name={icon} /> : icon}
             rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
         >

package/src/components/ContextOverlay/ContextMenu.stories.tsx

@@ -10,7 +10,7 @@ export default {
     subcomponents: { MenuItem },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof ContextMenu>;

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -40,8 +40,15 @@ export interface ContextMenuProps extends TestableComponent {
      * Props to spread to `ContextOverlay` that is used to display the dropdown.
      */
     contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children" | "className">>;
-    /** Disables the button to open the menu. */
+    /**
+     * Disables the button to open the menu.
+     */
     disabled?: boolean;
+    /**
+     * We use the target as placeholder before the real `<ContextMenu /` is rendered on first hover or focus event.
+     * In case of problems set this property to `true`.
+     */
+    preventPlaceholder?: boolean;
 }
 
 /**
@@ -58,27 +65,33 @@ export const ContextMenu = ({
     /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
+    preventPlaceholder = false,
     ...restProps
 }: ContextMenuProps) => {
+    const toggleButton =
+        typeof togglerElement === "string" ? (
+            <IconButton
+                tooltipAsTitle={tooltipAsTitle}
+                name={[togglerElement]}
+                text={togglerText}
+                large={togglerLarge}
+                disabled={!!disabled}
+                data-test-id={restProps["data-test-id"]}
+            />
+        ) : (
+            (togglerElement as ReactElement)
+        );
+
     return (
         <ContextOverlay
             {...restProps}
             {...contextOverlayProps}
             className={`${eccgui}-contextmenu ` + className}
             content={<Menu>{children}</Menu>}
+            disabled={!!disabled}
+            usePlaceholder={!preventPlaceholder}
         >
-            {typeof togglerElement === "string" ? (
-                <IconButton
-                    tooltipAsTitle={tooltipAsTitle}
-                    name={[togglerElement]}
-                    text={togglerText}
-                    large={togglerLarge}
-                    disabled={!!disabled}
-                    data-test-id={restProps["data-test-id"]}
-                />
-            ) : (
-                (togglerElement as ReactElement)
-            )}
+            {toggleButton}
         </ContextOverlay>
     );
 };

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { Popover as BlueprintPopover, PopoverProps as BlueprintPopoverProps } from "@blueprintjs/core";
+import {
+    Classes as BlueprintClasses,
+    Popover as BlueprintPopover,
+    PopoverProps as BlueprintPopoverProps,
+    Utils as BlueprintUtils,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -13,6 +18,11 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
      * Use it when you need to display modal dialogs out of the context overlay.
      */
     preventTopPosition?: boolean;
+    /**
+     * Use the overlay target as placeholder before the real `<ContextOverlay /` is rendered on first hover or focus event.
+     * Currently experimental.
+     */
+    usePlaceholder?: boolean;
 }
 
 /**
@@ -24,18 +34,86 @@ export const ContextOverlay = ({
     portalClassName,
     preventTopPosition,
     className = "",
-    ...restProps
+    usePlaceholder = false,
+    ...otherPopoverProps
 }: ContextOverlayProps) => {
+    const placeholderRef = React.useRef(null);
+    const eventMemory = React.useRef<undefined | "afterhover" | "afterfocus">(undefined);
+    const [placeholder, setPlaceholder] = React.useState<boolean>(
+        // use placeholder only for "simple" overlays without special states
+        !otherPopoverProps.disabled &&
+            !otherPopoverProps.defaultIsOpen &&
+            !otherPopoverProps.isOpen &&
+            otherPopoverProps.renderTarget === undefined &&
+            usePlaceholder
+    );
+
+    React.useEffect(() => {
+        if (placeholderRef.current) {
+            const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
+                eventMemory.current = ev.type === "focusin" ? "afterfocus" : "afterhover";
+                setPlaceholder(false);
+            };
+            (placeholderRef.current as HTMLElement).addEventListener("mouseenter", swap);
+            (placeholderRef.current as HTMLElement).addEventListener("focusin", swap);
+            return () => {
+                if (placeholderRef.current) {
+                    (placeholderRef.current as HTMLElement).removeEventListener("mouseenter", swap);
+                    (placeholderRef.current as HTMLElement).removeEventListener("focusin", swap);
+                }
+            };
+        }
+        return () => {};
+    }, [!!placeholderRef.current]);
+
+    const refocus = React.useCallback((node) => {
+        if (eventMemory.current === "afterfocus" && node) {
+            const target = node.targetRef.current.children[0];
+            if (target) {
+                target.focus();
+            }
+        }
+    }, []);
+
+    const targetClassName = `${eccgui}-contextoverlay` + (className ? ` ${className}` : "");
+
+    const displayPlaceholder = () => {
+        const PlaceholderElement = otherPopoverProps?.targetTagName ?? (otherPopoverProps?.fill ? "div" : "span");
+        const childTarget = BlueprintUtils.ensureElement(React.Children.toArray(children)[0]);
+        if (!childTarget) {
+            return null;
+        }
+        return React.createElement(
+            PlaceholderElement,
+            {
+                ...otherPopoverProps?.targetProps,
+                className: `${BlueprintClasses.POPOVER_TARGET} ${targetClassName}`,
+                ref: placeholderRef,
+            },
+            React.cloneElement(childTarget, {
+                ...childTarget.props,
+                className:
+                    childTarget.props.className ?? "" + (otherPopoverProps.fill ? ` ${BlueprintClasses.FILL}` : ""),
+                tabIndex:
+                    childTarget.props.tabIndex ??
+                    (!otherPopoverProps?.disabled && otherPopoverProps?.openOnTargetFocus ? 0 : undefined),
+            })
+        );
+    };
+
     const portalClassNameFinal =
         (preventTopPosition ? `${eccgui}-contextoverlay__portal--lowertop` : "") +
         (portalClassName ? ` ${portalClassName}` : "");
 
-    return (
+    return placeholder ? (
+        displayPlaceholder()
+    ) : (
         <BlueprintPopover
             placement="bottom"
-            {...restProps}
-            className={`${eccgui}-contextoverlay` + (className ? ` ${className}` : "")}
+            {...otherPopoverProps}
+            className={targetClassName}
             portalClassName={portalClassNameFinal.trim() ?? undefined}
+            ref={refocus}
         >
             {children}
         </BlueprintPopover>