@eccenca/gui-elements 25.0.0-rc.2 → 25.1.0-rc.0

package/src/cmem/ContentBlobToggler/stories/StringPreviewContentBlobToggler.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Markdown, StringPreviewContentBlobToggler } from "../../../index";
+
+const config = {
+    title: "CMEM/ContentBlobToggler/StringPreview",
+    component: StringPreviewContentBlobToggler,
+} as Meta<typeof StringPreviewContentBlobToggler>;
+export default config;
+
+const Template: StoryFn<typeof StringPreviewContentBlobToggler> = (args) => (
+    <StringPreviewContentBlobToggler {...args} />
+);
+
+const initialTeststring =
+    "A library for GUI elements.\nIn order to create graphical user interfaces, please have look at the documentation at [Github](https://github.com/eccenca/gui-elements).";
+
+export const Default = Template.bind({});
+Default.args = {
+    content: initialTeststring,
+    fullviewContent: <Markdown htmlContentBlockProps={{ large: true }}>{initialTeststring}</Markdown>,
+    previewMaxLength: 64,
+    renderPreviewAsMarkdown: true,
+    toggleExtendText: "show more",
+    toggleReduceText: "show less",
+};

package/src/cmem/ContentBlobToggler/tests/StringPreviewContentBlobToggler.test.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { render, RenderResult } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import {
+    StringPreviewContentBlobToggler,
+    StringPreviewContentBlobTogglerProps,
+} from "../StringPreviewContentBlobToggler";
+
+import { Default as StringPreviewContentBlobTogglerStory } from "./../stories/StringPreviewContentBlobToggler.stories";
+
+describe("StringPreviewContentBlobToggler", () => {
+    const textMustExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).not.toBeNull();
+    };
+    const textMustNotExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).toBeNull();
+    };
+    it("should cut preview and show toggler to extend", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustNotExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustExist(queryByText, "show more");
+    });
+    it("should display full view if `startExtended` is enabled, and show toggler to reduce", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                startExtended
+            />
+        );
+        textMustExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustExist(queryByText, "show less");
+    });
+    it('should display only first content line on `useOnly={"firstNonEmptyLine"}`', () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                useOnly={"firstNonEmptyLine"}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustNotExist(queryByText, "In order to create");
+    });
+    it('should use first Markdown paragraph as preview content on `useOnly={"firstMarkdownSection"}` but shorten it', () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                useOnly={"firstMarkdownSection"}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustExist(queryByText, "In order to create");
+        textMustNotExist(queryByText, "please have look at the documentation at");
+    });
+    it("should display full preview and no toggler if content is short enough", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                previewMaxLength={144}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustNotExist(queryByText, "https://github.com/"); // test if Markdown was rendered
+        textMustNotExist(queryByText, "show more");
+    });
+    it("should not use Markdown rendering on `renderPreviewAsMarkdown={false}`", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                previewMaxLength={144}
+                renderPreviewAsMarkdown={false}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustExist(queryByText, "https://github.com/"); // test if Markdown was rendered
+        textMustExist(queryByText, "show more");
+    });
+});

package/src/cmem/react-flow/ReactFlow/ReactFlowV12.tsx

@@ -9,6 +9,7 @@ import {
 } from "@xyflow/react";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
 import { EdgeNew } from "./../../../extensions/react-flow/edges/EdgeNew";
 
 export type ReactFlowV12ContainerProps = ReactFlowV12Props;

package/src/common/Intent/index.ts

@@ -1,6 +1,7 @@
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { Intent as BlueprintIntent } from "@blueprintjs/core";
 
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 export type IntentBlueprint = BlueprintIntent;
 export const DefinitionsBlueprint = BlueprintIntent;
 

package/src/common/index.ts

@@ -1,3 +1,5 @@
+import { decode } from "he";
+
 import { invisibleZeroWidthCharacters } from "./utils/characters";
 import { colorCalculateDistance } from "./utils/colorCalculateDistance";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
@@ -6,7 +8,8 @@ import getColorConfiguration from "./utils/getColorConfiguration";
 import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
 import { openInNewTab } from "./utils/openInNewTab";
-import { reduceToText } from "./utils/reduceToText"
+import { reduceToText } from "./utils/reduceToText";
+export type { DecodeOptions as DecodeHtmlEntitiesOptions } from "he";
 export type { IntentTypes as IntentBaseTypes } from "./Intent";
 
 export const utils = {
@@ -20,5 +23,6 @@ export const utils = {
     getScrollParent,
     getEnabledColorsFromPalette,
     textToColorHash,
-    reduceToText
+    reduceToText,
+    decodeHtmlEntities: decode,
 };

package/src/common/utils/reduceToText.tsx

@@ -3,6 +3,7 @@ import { renderToString } from "react-dom/server";
 import * as ReactIs from "react-is";
 
 import { TextReducerProps } from "./../../components/TextReducer/TextReducer";
+import { DecodeHtmlEntitiesOptions, utils } from "./../";
 
 export interface ReduceToTextFuncType {
     (
@@ -10,12 +11,12 @@ export interface ReduceToTextFuncType {
          *  Component or text to reduce HTML markup content to plain text.
          */
         input: React.ReactNode | React.ReactNode[] | string,
-        options?: Pick<TextReducerProps, "maxNodes" | "maxLength">
+        options?: Pick<TextReducerProps, "maxNodes" | "maxLength" | "decodeHtmlEntities" | "decodeHtmlEntitiesOptions">
     ): string;
 }
 
 export const reduceToText: ReduceToTextFuncType = (input, options) => {
-    const { maxNodes, maxLength } = options || {};
+    const { maxNodes, maxLength, decodeHtmlEntities } = options || {};
     const content: React.ReactNode | React.ReactNode[] = input;
     let nodeCount = 0;
 
@@ -46,6 +47,33 @@ export const reduceToText: ReduceToTextFuncType = (input, options) => {
     // Basic HTML cleanup
     text = text.replace(/<[^\s][^>]*>/g, "").replace(/\n/g, " ");
 
+    if (decodeHtmlEntities) {
+        const decodeDefaultOptions = {
+            isAttributeValue: true,
+            strict: true,
+        } as DecodeHtmlEntitiesOptions;
+        let decodeErrors = 0;
+        // we decode in pieces to apply some error tolerance even in strict mode
+        text = text
+            .split(" ")
+            .map((value) => {
+                try {
+                    return utils.decodeHtmlEntities(value, {
+                        ...decodeDefaultOptions,
+                        ...options?.decodeHtmlEntitiesOptions,
+                    });
+                } catch {
+                    decodeErrors++;
+                    return value;
+                }
+            })
+            .join(" ");
+        if (decodeErrors > 0) {
+            // eslint-disable-next-line no-console
+            console.warn(`${decodeErrors} parse error(s) for decodeHtmlEntities, return un-decoded text`, text);
+        }
+    }
+
     if (typeof maxLength === "number") {
         text = text.slice(0, maxLength);
     }

package/src/components/Application/ApplicationViewability.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import classNames from "classnames";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+type media = "print" | "screen";
+
+interface ApplicationViewabilityShow {
+    /**
+     * Show on media type.
+     * If used, `hide` cannot be set.
+     */
+    show: media;
+    hide?: never;
+}
+
+interface ApplicationViewabilityHide {
+    /**
+     * Hide on media type.
+     * If used, `show` cannot be set.
+     */
+    hide: media;
+    show?: never;
+}
+
+interface ApplicationViewabilityUndecided {
+    /**
+     * Only one child allowed.
+     * Need to process the `className` property.
+     */
+    children: React.ReactElement<{ className?: string }>;
+}
+
+export type ApplicationViewabilityProps = ApplicationViewabilityUndecided &
+    (ApplicationViewabilityShow | ApplicationViewabilityHide);
+
+/**
+ * Sets the viewability of the the contained element regarding media.
+ * Can be used to hide elements, e.g. when the page is printed.
+ */
+export const ApplicationViewability = ({ children, show, hide }: ApplicationViewabilityProps) => {
+    if (!show && !hide) {
+        return children;
+    }
+    if (show === hide) {
+        // eslint-disable-next-line no-console
+        console.warn("`<ApplicationViewability/>` used with same media type for `hide` and `show`.");
+        return children;
+    }
+
+    const enhancedClone = React.cloneElement(children, {
+        className: classNames(children.props.className, {
+            [`${eccgui}-application__hide--${hide}`]: hide,
+            [`${eccgui}-application__show--${show}`]: show,
+        }),
+    });
+
+    return enhancedClone;
+};
+
+export default ApplicationViewability;

package/src/components/Application/_content.scss

@@ -25,3 +25,10 @@ $ui-02: $eccgui-color-workspace-background !default;
 .#{$eccgui}-application__content--railsidebar {
     margin-left: mini-units(8);
 }
+
+@media print {
+    .#{$eccgui}-application__content {
+        padding: $eccgui-size-block-whitespace 0 0 0 !important;
+        margin: 0;
+    }
+}

package/src/components/Application/_header.scss

@@ -98,10 +98,10 @@ span.#{$prefix}--header__name {
 .#{$eccgui}-application__title--content {
     display: inline-block;
     overflow: hidden;
+    text-overflow: ellipsis;
     font-size: $eccgui-size-typo-caption;
     font-weight: $eccgui-font-weight-bold;
     line-height: $eccgui-size-typo-caption-lineheight;
-    text-overflow: ellipsis;
     letter-spacing: $eccgui-font-spacing-wide;
     white-space: nowrap;
 }
@@ -122,7 +122,7 @@ span.#{$prefix}--header__name {
         height: auto;
         max-height: mini-units(5);
         padding: 0;
-        margin: mini-units(1.4) 0 mini-units(1.6) 0;
+        margin: mini-units(1.4) 0 mini-units(1.6);
         vertical-align: middle;
     }
 }
@@ -195,9 +195,9 @@ a.#{$prefix}--header__menu-item:active {
 .#{$prefix}--header__action.#{$prefix}--btn--primary:focus,
 a.#{$prefix}--header__name:focus,
 a.#{$prefix}--header__menu-item:focus {
-    border: none;
     outline: 1px dotted $shell-header-focus;
     outline-offset: -1px;
+    border: none;
     box-shadow: none;
 }
 .#{$prefix}--header__menu-title[aria-expanded="true"] {
@@ -267,3 +267,12 @@ a.#{$prefix}--header__menu-item:focus > svg {
         margin: 0;
     }
 }
+
+@media print {
+    .#{$eccgui}-application__header {
+        position: relative;
+        & > :not(.#{$eccgui}-workspace__header) {
+            display: none;
+        }
+    }
+}

package/src/components/Application/_viewability.scss

@@ -0,0 +1,13 @@
+@media print {
+    .#{eccgui}-application__hide--print,
+    .#{eccgui}-application__show--screen {
+        display: none !important;
+    }
+}
+
+@media screen {
+    .#{eccgui}-application__hide--screen,
+    .#{eccgui}-application__show--print {
+        display: none !important;
+    }
+}

package/src/components/Application/application.scss

@@ -10,3 +10,4 @@
 // @import '~@carbon/react/scss/components/ui-shell/navigation-menu';
 @import "content";
 @import "dropzone";
+@import "viewability";

package/src/components/Application/index.ts

@@ -8,4 +8,5 @@ export * from "./ApplicationToolbar";
 export * from "./ApplicationToolbarSection";
 export * from "./ApplicationToolbarAction";
 export * from "./ApplicationToolbarPanel";
+export * from "./ApplicationViewability";
 export * from "./helper";

package/src/components/Application/stories/ApplicationViewability.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ApplicationViewability } from "../../../index";
+export default {
+    title: "Components/Application/Viewability",
+    component: ApplicationViewability,
+    argTypes: {
+        children: {
+            control: false,
+        },
+        hide: {
+            control: {
+                type: "radio",
+            },
+            options: ["print", "screen"],
+        },
+        show: {
+            control: {
+                type: "radio",
+            },
+            options: ["print", "screen"],
+        },
+    },
+} as Meta<typeof ApplicationViewability>;
+
+const TemplateBasicExample: StoryFn<typeof ApplicationViewability> = (args) => <ApplicationViewability {...args} />;
+
+export const Default = TemplateBasicExample.bind({});
+Default.args = {
+    children: (
+        <div>
+            <LoremIpsum random={false} />
+        </div>
+    ),
+};

package/src/components/Application/tests/ApplicationViewability.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { expect } from "@storybook/test";
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { ApplicationViewability, ApplicationViewabilityProps, CLASSPREFIX as eccgui } from "../../../index";
+
+import { Default as ApplicationViewabilityStory } from "./../stories/ApplicationViewability.stories";
+
+const applyViewabilityAndCheckClass = (props: Omit<ApplicationViewabilityProps, "children">) => {
+    const { container } = render(<ApplicationViewability {...ApplicationViewabilityStory.args} {...props} />);
+    const element = container.getElementsByClassName(
+        props.hide ? `${eccgui}-application__hide--${props.hide}` : `${eccgui}-application__show--${props.show}`
+    );
+    expect(element.length).toBe(1);
+    return element;
+};
+
+describe("ApplicationViewability", () => {
+    it("should be visible on `show=screen`", () => {
+        applyViewabilityAndCheckClass({ show: "screen" });
+        /**
+         * Currently we cannot really test visibility via jest if it is defined by S/CSS rules because those styles are not known.
+         * Looks like it is not too easy to include and test them.
+         * So we only test for the correct CSS class.
+         */
+        // console.log(window.getComputedStyle(element.item(0)??new Element).getPropertyValue("display"));
+        // waitFor(() => expect(element).toBeVisible());
+    });
+    it("should not be visible on `hide=screen`", () => {
+        applyViewabilityAndCheckClass({ hide: "screen" });
+        // waitFor(() => expect(element).not.toBeVisible());
+    });
+    it("should be visible on `hide=print`", () => {
+        applyViewabilityAndCheckClass({ hide: "print" });
+        // waitFor(() => expect(element).toBeVisible());
+    });
+    it("should not be visible on `show=print`", () => {
+        applyViewabilityAndCheckClass({ show: "print" });
+        // waitFor(() => expect(element).not.toBeVisible());
+    });
+});

package/src/components/AutoSuggestion/tests/ExtendedCodeEditor.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { render } from "@testing-library/react";
 import { EditorView } from "@codemirror/view";
+import { render } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 

package/src/components/Card/card.scss

@@ -288,3 +288,9 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-card__actions {
+        display: none;
+    }
+}

package/src/components/Checkbox/checkbox.scss

@@ -24,9 +24,15 @@ $control-indicator-spacing: $eccgui-size-inline-whitespace !default;
 // $switch-background-color-active: rgba($gray1, 0.5) !default;
 // $switch-background-color-disabled: $button-background-color-disabled !default;
 $switch-checked-background-color: $eccgui-color-accent !default;
-$switch-checked-background-color-hover: eccgui-color-rgba($switch-checked-background-color, $eccgui-opacity-narrow) !default;
+$switch-checked-background-color-hover: eccgui-color-rgba(
+    $switch-checked-background-color,
+    $eccgui-opacity-narrow
+) !default;
 $switch-checked-background-color-active: $switch-checked-background-color-hover !default;
-$switch-checked-background-color-disabled: eccgui-color-rgba($switch-checked-background-color, $eccgui-opacity-disabled) !default;
+$switch-checked-background-color-disabled: eccgui-color-rgba(
+    $switch-checked-background-color,
+    $eccgui-opacity-disabled
+) !default;
 
 @import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch
 
@@ -73,3 +79,9 @@ $switch-checked-background-color-disabled: eccgui-color-rgba($switch-checked-bac
     display: inline-block;
     vertical-align: text-top;
 }
+
+@media print {
+    .#{$ns}-control {
+        print-color-adjust: exact;
+    }
+}

package/src/components/ContentGroup/_contentgroup.scss

@@ -60,3 +60,12 @@ $eccgui-color-scontentgroup-border-sub: eccgui-color-rgba(
     flex-shrink: 1;
     width: 100%;
 }
+
+@media print {
+    .#{$eccgui}-contentgroup__header__options {
+        display: none;
+    }
+    .#{$eccgui}-contentgroup--border-sub::after {
+        print-color-adjust: exact;
+    }
+}

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -66,6 +66,8 @@ export const ContextMenu = ({
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
     preventPlaceholder = false,
+    "data-test-id": dataTestId,
+    "data-testid": dataTestid,
     ...restProps
 }: ContextMenuProps) => {
     const toggleButton =
@@ -76,7 +78,8 @@ export const ContextMenu = ({
                 text={togglerText}
                 large={togglerLarge}
                 disabled={!!disabled}
-                data-test-id={restProps["data-test-id"]}
+                data-test-id={dataTestId ?? undefined}
+                data-testid={dataTestid ?? undefined}
             />
         ) : (
             (togglerElement as ReactElement)

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {
     Classes as BlueprintClasses,
     Popover as BlueprintPopover,
+    PopoverInteractionKind as InteractionKind,
     PopoverProps as BlueprintPopoverProps,
     Utils as BlueprintUtils,
 } from "@blueprintjs/core";
@@ -37,9 +38,10 @@ export const ContextOverlay = ({
     usePlaceholder = false,
     ...otherPopoverProps
 }: ContextOverlayProps) => {
-    const placeholderRef = React.useRef(null);
-    const eventMemory = React.useRef<undefined | "afterhover" | "afterfocus">(undefined);
+    const placeholderRef = React.useRef<HTMLElement>(null);
+    const eventMemory = React.useRef<undefined | "mouseenter" | "focusin" | "click">(undefined);
     const swapDelay = React.useRef<null | NodeJS.Timeout>(null);
+    const interactionKind = React.useRef<InteractionKind>(otherPopoverProps.interactionKind ?? InteractionKind.CLICK);
     const swapDelayTime = 15;
     const [placeholder, setPlaceholder] = React.useState<boolean>(
         // use placeholder only for "simple" overlays without special states
@@ -50,37 +52,85 @@ export const ContextOverlay = ({
             usePlaceholder
     );
 
+    const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
+        const waitForClick =
+            interactionKind.current === InteractionKind.CLICK ||
+            interactionKind.current === InteractionKind.CLICK_TARGET_ONLY;
+
+        if (swapDelay.current) {
+            clearTimeout(swapDelay.current);
+        }
+
+        const replacePlaceholder = () => {
+            eventMemory.current = ev.type as "mouseenter" | "focusin" | "click";
+            setPlaceholder(false);
+        };
+
+        if (waitForClick) {
+            ev.stopImmediatePropagation();
+            replacePlaceholder();
+            return;
+        }
+
+        swapDelay.current = setTimeout(
+            replacePlaceholder,
+            // we delay the swap for hover/focus to prevent unwanted effects
+            // (e.g. event hickup after replacing elements when it is not really necessary)
+            swapDelayTime
+        );
+    };
+
     React.useEffect(() => {
+        interactionKind.current = otherPopoverProps.interactionKind ?? InteractionKind.CLICK;
+        const waitForClick =
+            interactionKind.current === InteractionKind.CLICK ||
+            interactionKind.current === InteractionKind.CLICK_TARGET_ONLY;
+        const removeEvents = () => {
+            if (placeholderRef.current) {
+                placeholderRef.current.removeEventListener("click", swap);
+                placeholderRef.current.removeEventListener("mouseenter", swap);
+                placeholderRef.current.removeEventListener("focusin", swap);
+            }
+            return;
+        };
         if (placeholderRef.current) {
-            const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
-                if (swapDelay.current) {
-                    clearTimeout(swapDelay.current);
-                }
-                swapDelay.current = setTimeout(() => {
-                    // we delay the swap to prevent unwanted effects
-                    // (e.g. event hickup after replacing elements when it is not really necessary)
-                    eventMemory.current = ev.type === "focusin" ? "afterfocus" : "afterhover";
-                    setPlaceholder(false);
-                }, swapDelayTime);
-            };
-            (placeholderRef.current as HTMLElement).addEventListener("mouseenter", swap);
-            (placeholderRef.current as HTMLElement).addEventListener("focusin", swap);
+            removeEvents(); // remove events in case of interaction kind changed during existence
+            if (waitForClick) {
+                placeholderRef.current.addEventListener("click", swap);
+            } else {
+                placeholderRef.current.addEventListener("mouseenter", swap);
+                placeholderRef.current.addEventListener("focusin", swap);
+            }
             return () => {
-                if (placeholderRef.current) {
-                    (placeholderRef.current as HTMLElement).removeEventListener("mouseenter", swap);
-                    (placeholderRef.current as HTMLElement).removeEventListener("focusin", swap);
-                }
+                removeEvents();
             };
         }
         return () => {};
-    }, [!!placeholderRef.current]);
+    }, [!!placeholderRef.current, otherPopoverProps.interactionKind]);
 
     const refocus = React.useCallback((node) => {
-        if (eventMemory.current === "afterfocus" && node) {
-            const target = node.targetRef.current.children[0];
-            if (target) {
+        const target = node?.targetRef.current.children[0];
+        if (!eventMemory.current || !target) {
+            return;
+        }
+        switch (eventMemory.current) {
+            case "focusin":
                 target.focus();
-            }
+                break;
+            case "click":
+                target.click();
+                break;
+            case "mouseenter":
+                // re-check if the cursor is still over the element after swapping the placeholder before triggering the event to bubble up
+                (target as HTMLElement).addEventListener(
+                    "mouseover",
+                    () => (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true })),
+                    {
+                        capture: true,
+                        once: true,
+                    }
+                );
+                break;
         }
     }, []);