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

package/dist/esm/components/ContextOverlay/ContextOverlay.js

@@ -37,56 +37,94 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 import React from "react";
-import { Classes as BlueprintClasses, Popover as BlueprintPopover, Utils as BlueprintUtils, } from "@blueprintjs/core";
+import { Classes as BlueprintClasses, Popover as BlueprintPopover, PopoverInteractionKind as InteractionKind, Utils as BlueprintUtils, } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 /**
  * Element displays connected content by interacting with a target element.
  * Full list of available option can be seen at https://blueprintjs.com/docs/#popover2-package/popover2
  */
 export var ContextOverlay = function (_a) {
-    var _b;
-    var children = _a.children, portalClassName = _a.portalClassName, preventTopPosition = _a.preventTopPosition, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.usePlaceholder, usePlaceholder = _d === void 0 ? false : _d, otherPopoverProps = __rest(_a, ["children", "portalClassName", "preventTopPosition", "className", "usePlaceholder"]);
+    var _b, _c;
+    var children = _a.children, portalClassName = _a.portalClassName, preventTopPosition = _a.preventTopPosition, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.usePlaceholder, usePlaceholder = _e === void 0 ? false : _e, otherPopoverProps = __rest(_a, ["children", "portalClassName", "preventTopPosition", "className", "usePlaceholder"]);
     var placeholderRef = React.useRef(null);
     var eventMemory = React.useRef(undefined);
     var swapDelay = React.useRef(null);
+    var interactionKind = React.useRef((_b = otherPopoverProps.interactionKind) !== null && _b !== void 0 ? _b : InteractionKind.CLICK);
     var swapDelayTime = 15;
-    var _e = __read(React.useState(
+    var _f = __read(React.useState(
     // use placeholder only for "simple" overlays without special states
     !otherPopoverProps.disabled &&
         !otherPopoverProps.defaultIsOpen &&
         !otherPopoverProps.isOpen &&
         otherPopoverProps.renderTarget === undefined &&
-        usePlaceholder), 2), placeholder = _e[0], setPlaceholder = _e[1];
+        usePlaceholder), 2), placeholder = _f[0], setPlaceholder = _f[1];
+    var swap = function (ev) {
+        var waitForClick = interactionKind.current === InteractionKind.CLICK ||
+            interactionKind.current === InteractionKind.CLICK_TARGET_ONLY;
+        if (swapDelay.current) {
+            clearTimeout(swapDelay.current);
+        }
+        var replacePlaceholder = function () {
+            eventMemory.current = ev.type;
+            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(function () {
+        var _a;
+        interactionKind.current = (_a = otherPopoverProps.interactionKind) !== null && _a !== void 0 ? _a : InteractionKind.CLICK;
+        var waitForClick = interactionKind.current === InteractionKind.CLICK ||
+            interactionKind.current === InteractionKind.CLICK_TARGET_ONLY;
+        var removeEvents = function () {
+            if (placeholderRef.current) {
+                placeholderRef.current.removeEventListener("click", swap);
+                placeholderRef.current.removeEventListener("mouseenter", swap);
+                placeholderRef.current.removeEventListener("focusin", swap);
+            }
+            return;
+        };
         if (placeholderRef.current) {
-            var swap_1 = function (ev) {
-                if (swapDelay.current) {
-                    clearTimeout(swapDelay.current);
-                }
-                swapDelay.current = setTimeout(function () {
-                    // 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.addEventListener("mouseenter", swap_1);
-            placeholderRef.current.addEventListener("focusin", swap_1);
+            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 function () {
-                if (placeholderRef.current) {
-                    placeholderRef.current.removeEventListener("mouseenter", swap_1);
-                    placeholderRef.current.removeEventListener("focusin", swap_1);
-                }
+                removeEvents();
             };
         }
         return function () { };
-    }, [!!placeholderRef.current]);
+    }, [!!placeholderRef.current, otherPopoverProps.interactionKind]);
     var refocus = React.useCallback(function (node) {
-        if (eventMemory.current === "afterfocus" && node) {
-            var target = node.targetRef.current.children[0];
-            if (target) {
+        var target = node === null || node === void 0 ? void 0 : 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.addEventListener("mouseover", function () { return target.dispatchEvent(new MouseEvent("mouseover", { bubbles: true })); }, {
+                    capture: true,
+                    once: true,
+                });
+                break;
         }
     }, []);
     var targetClassName = "".concat(eccgui, "-contextoverlay") + (className ? " ".concat(className) : "");
@@ -101,7 +139,7 @@ export var ContextOverlay = function (_a) {
     };
     var portalClassNameFinal = (preventTopPosition ? "".concat(eccgui, "-contextoverlay__portal--lowertop") : "") +
         (portalClassName ? " ".concat(portalClassName) : "");
-    return placeholder ? (displayPlaceholder()) : (React.createElement(BlueprintPopover, __assign({ placement: "bottom" }, otherPopoverProps, { className: targetClassName, portalClassName: (_b = portalClassNameFinal.trim()) !== null && _b !== void 0 ? _b : undefined, ref: refocus }), children));
+    return placeholder ? (displayPlaceholder()) : (React.createElement(BlueprintPopover, __assign({ placement: "bottom" }, otherPopoverProps, { className: targetClassName, portalClassName: (_c = portalClassNameFinal.trim()) !== null && _c !== void 0 ? _c : undefined, ref: refocus }), children));
 };
 export default ContextOverlay;
 //# sourceMappingURL=ContextOverlay.js.map

package/dist/esm/components/ContextOverlay/ContextOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextOverlay.js","sourceRoot":"","sources":["../../../../src/components/ContextOverlay/ContextOverlay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,OAAO,IAAI,gBAAgB,EAC3B,OAAO,IAAI,gBAAgB,EAE3B,KAAK,IAAI,cAAc,GAC1B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAmBtE;;;GAGG;AACH,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,EAOT;;IANlB,IAAA,QAAQ,cAAA,EACR,eAAe,qBAAA,EACf,kBAAkB,wBAAA,EAClB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACnB,iBAAiB,cANO,oFAO9B,CADuB;IAEpB,IAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC1C,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAA0C,SAAS,CAAC,CAAC;IACrF,IAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC5D,IAAM,aAAa,GAAG,EAAE,CAAC;IACnB,IAAA,KAAA,OAAgC,KAAK,CAAC,QAAQ;IAChD,oEAAoE;IACpE,CAAC,iBAAiB,CAAC,QAAQ;QACvB,CAAC,iBAAiB,CAAC,aAAa;QAChC,CAAC,iBAAiB,CAAC,MAAM;QACzB,iBAAiB,CAAC,YAAY,KAAK,SAAS;QAC5C,cAAc,CACrB,IAAA,EAPM,WAAW,QAAA,EAAE,cAAc,QAOjC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC;QACZ,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YACzB,IAAM,MAAI,GAAG,UAAC,EAAsC;gBAChD,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;oBACpB,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBACpC,CAAC;gBACD,SAAS,CAAC,OAAO,GAAG,UAAU,CAAC;oBAC3B,gDAAgD;oBAChD,+EAA+E;oBAC/E,WAAW,CAAC,OAAO,GAAG,EAAE,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC1E,cAAc,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC,EAAE,aAAa,CAAC,CAAC;YACtB,CAAC,CAAC;YACD,cAAc,CAAC,OAAuB,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAI,CAAC,CAAC;YAC5E,cAAc,CAAC,OAAuB,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAI,CAAC,CAAC;YAC1E,OAAO;gBACH,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;oBACxB,cAAc,CAAC,OAAuB,CAAC,mBAAmB,CAAC,YAAY,EAAE,MAAI,CAAC,CAAC;oBAC/E,cAAc,CAAC,OAAuB,CAAC,mBAAmB,CAAC,SAAS,EAAE,MAAI,CAAC,CAAC;gBACjF,CAAC;YACL,CAAC,CAAC;QACN,CAAC;QACD,OAAO,cAAO,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAE/B,IAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,IAAI;QACnC,IAAI,WAAW,CAAC,OAAO,KAAK,YAAY,IAAI,IAAI,EAAE,CAAC;YAC/C,IAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YAClD,IAAI,MAAM,EAAE,CAAC;gBACT,MAAM,CAAC,KAAK,EAAE,CAAC;YACnB,CAAC;QACL,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,eAAe,GAAG,UAAG,MAAM,oBAAiB,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,WAAI,SAAS,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAExF,IAAM,kBAAkB,GAAG;;QACvB,IAAM,kBAAkB,GAAG,MAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,aAAa,mCAAI,CAAC,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,EAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAC1G,IAAM,WAAW,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtF,IAAI,CAAC,WAAW,EAAE,CAAC;YACf,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,OAAO,KAAK,CAAC,aAAa,CACtB,kBAAkB,wBAEX,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,WAAW,KACjC,SAAS,EAAE,UAAG,gBAAgB,CAAC,cAAc,cAAI,eAAe,cAAI,MAAM,0CAAuC,EACjH,GAAG,EAAE,cAAc,KAEvB,KAAK,CAAC,YAAY,CAAC,WAAW,wBACvB,WAAW,CAAC,KAAK,KACpB,SAAS,EACL,MAAA,WAAW,CAAC,KAAK,CAAC,SAAS,mCAAI,EAAE,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,WAAI,gBAAgB,CAAC,IAAI,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACnG,QAAQ,EACJ,MAAA,WAAW,CAAC,KAAK,CAAC,QAAQ,mCAC1B,CAAC,CAAC,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,QAAQ,CAAA,KAAI,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,iBAAiB,CAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAC5F,CACL,CAAC;IACN,CAAC,CAAC;IAEF,IAAM,oBAAoB,GACtB,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAG,MAAM,sCAAmC,CAAC,CAAC,CAAC,EAAE,CAAC;QACxE,CAAC,eAAe,CAAC,CAAC,CAAC,WAAI,eAAe,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,WAAW,CAAC,CAAC,CAAC,CACjB,kBAAkB,EAAE,CACvB,CAAC,CAAC,CAAC,CACA,oBAAC,gBAAgB,aACb,SAAS,EAAC,QAAQ,IACd,iBAAiB,IACrB,SAAS,EAAE,eAAe,EAC1B,eAAe,EAAE,MAAA,oBAAoB,CAAC,IAAI,EAAE,mCAAI,SAAS,EACzD,GAAG,EAAE,OAAO,KAEX,QAAQ,CACM,CACtB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ContextOverlay.js","sourceRoot":"","sources":["../../../../src/components/ContextOverlay/ContextOverlay.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/TextReducer/TextReducer.js

@@ -9,8 +9,19 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from "react";
-import { reduceToText } from "../../common/utils/reduceToText.js";
+import { utils } from "../../common/index.js";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 import { OverflowText } from "./../Typography/index.js";
 /**
@@ -18,11 +29,11 @@ import { OverflowText } from "./../Typography/index.js";
  * Display can be wrapped easily in `OverflowText`.
  */
 export var TextReducer = function (_a) {
-    var children = _a.children, maxNodes = _a.maxNodes, maxLength = _a.maxLength, useOverflowTextWrapper = _a.useOverflowTextWrapper, overflowTextProps = _a.overflowTextProps;
+    var children = _a.children, useOverflowTextWrapper = _a.useOverflowTextWrapper, overflowTextProps = _a.overflowTextProps, reduceToTextOptions = __rest(_a, ["children", "useOverflowTextWrapper", "overflowTextProps"]);
     if (typeof children === "undefined") {
         return React.createElement(React.Fragment, null);
     }
-    var shrinkedContent = reduceToText(children, { maxLength: maxLength, maxNodes: maxNodes });
+    var shrinkedContent = utils.reduceToText(children, reduceToTextOptions);
     return useOverflowTextWrapper ? (React.createElement(OverflowText, __assign({}, overflowTextProps, { className: "".concat(eccgui, "-textreducer") +
             (overflowTextProps && overflowTextProps.className ? " ".concat(overflowTextProps.className) : "") }), shrinkedContent)) : (React.createElement(React.Fragment, null, shrinkedContent));
 };

package/dist/esm/components/TextReducer/TextReducer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextReducer.js","sourceRoot":"","sources":["../../../../src/components/TextReducer/TextReducer.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,YAAY,EAAqB,MAAM,iBAAiB,CAAC;AAuBlE;;;GAGG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAMT;QALf,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,sBAAsB,4BAAA,EACtB,iBAAiB,uBAAA;IAEjB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,yCAAK,CAAC;IACjB,CAAC;IAED,IAAM,eAAe,GAAG,YAAY,CAAC,QAAQ,EAAE,EAAE,SAAS,WAAA,EAAE,QAAQ,UAAA,EAAE,CAAC,CAAC;IAExE,OAAO,sBAAsB,CAAC,CAAC,CAAC,CAC5B,oBAAC,YAAY,eACL,iBAAiB,IACrB,SAAS,EACL,UAAG,MAAM,iBAAc;YACvB,CAAC,iBAAiB,IAAI,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,WAAI,iBAAiB,CAAC,SAAS,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAG9F,eAAe,CACL,CAClB,CAAC,CAAC,CAAC,CACA,0CAAG,eAAe,CAAI,CACzB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TextReducer.js","sourceRoot":"","sources":["../../../../src/components/TextReducer/TextReducer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAA6B,KAAK,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,YAAY,EAAqB,MAAM,iBAAiB,CAAC;AAkClE;;;GAGG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAKT;IAJf,IAAA,QAAQ,cAAA,EACR,sBAAsB,4BAAA,EACtB,iBAAiB,uBAAA,EACd,mBAAmB,cAJE,2DAK3B,CADyB;IAEtB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,yCAAK,CAAC;IACjB,CAAC;IAED,IAAM,eAAe,GAAG,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC;IAE1E,OAAO,sBAAsB,CAAC,CAAC,CAAC,CAC5B,oBAAC,YAAY,eACL,iBAAiB,IACrB,SAAS,EACL,UAAG,MAAM,iBAAc;YACvB,CAAC,iBAAiB,IAAI,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,WAAI,iBAAiB,CAAC,SAAS,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAG9F,eAAe,CACL,CAClB,CAAC,CAAC,CAAC,CACA,0CAAG,eAAe,CAAI,CACzB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/types/common/index.d.ts

@@ -1,4 +1,5 @@
 import { getEnabledColorsFromPalette, textToColorHash } from "./utils/colorHash";
+export type { DecodeOptions as DecodeHtmlEntitiesOptions } from "he";
 export type { IntentTypes as IntentBaseTypes } from "./Intent";
 export declare const utils: {
     openInNewTab: (event: React.MouseEvent<HTMLAnchorElement>, handler?: (e: React.MouseEvent<HTMLAnchorElement>) => void, url?: string) => void;
@@ -27,4 +28,5 @@ export declare const utils: {
     getEnabledColorsFromPalette: typeof getEnabledColorsFromPalette;
     textToColorHash: typeof textToColorHash;
     reduceToText: import("./utils/reduceToText").ReduceToTextFuncType;
+    decodeHtmlEntities: import("he").Decode;
 };

package/dist/types/common/utils/reduceToText.d.ts

@@ -5,6 +5,6 @@ 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">): string;
+    input: React.ReactNode | React.ReactNode[] | string, options?: Pick<TextReducerProps, "maxNodes" | "maxLength" | "decodeHtmlEntities" | "decodeHtmlEntitiesOptions">): string;
 }
 export declare const reduceToText: ReduceToTextFuncType;

package/dist/types/components/ContextOverlay/ContextMenu.d.ts

@@ -47,5 +47,5 @@ export interface ContextMenuProps extends TestableComponent {
 /**
  * Element displays menu items after toggler is clicked.
  */
-export declare const ContextMenu: ({ children, className, togglerElement, togglerText, contextOverlayProps, disabled, togglerLarge, tooltipAsTitle, preventPlaceholder, ...restProps }: ContextMenuProps) => React.JSX.Element;
+export declare const ContextMenu: ({ children, className, togglerElement, togglerText, contextOverlayProps, disabled, togglerLarge, tooltipAsTitle, preventPlaceholder, "data-test-id": dataTestId, "data-testid": dataTestid, ...restProps }: ContextMenuProps) => React.JSX.Element;
 export default ContextMenu;

package/dist/types/components/TextReducer/TextReducer.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { DecodeHtmlEntitiesOptions } from "../../common";
 import { OverflowTextProps } from "./../Typography";
 export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>, "children"> {
     /**
@@ -19,10 +20,21 @@ export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>
      * Specify more `OverflowText` properties used when `useOverflowTextWrapper` is set to `true`.
      */
     overflowTextProps?: Omit<OverflowTextProps, "passDown">;
+    /**
+     * If you transform HTML markup to text then the result could contain HTML entity encoded strings.
+     * By enabling this option they are decoded back to it's original char.
+     */
+    decodeHtmlEntities?: boolean;
+    /**
+     * Set the options used to decode the HTML entities, if `decodeHtmlEntities` is enabled.
+     * Internally we use `he` library, see their [documentation on decode options](https://www.npmjs.com/package/he#hedecodehtml-options).
+     * If not set we use `{ isAttributeValue: true, strict: true }` as default value.
+     */
+    decodeHtmlEntitiesOptions?: DecodeHtmlEntitiesOptions;
 }
 /**
  * Component to reduce HTML markup content to simple text.
  * Display can be wrapped easily in `OverflowText`.
  */
-export declare const TextReducer: ({ children, maxNodes, maxLength, useOverflowTextWrapper, overflowTextProps, }: TextReducerProps) => React.JSX.Element;
+export declare const TextReducer: ({ children, useOverflowTextWrapper, overflowTextProps, ...reduceToTextOptions }: TextReducerProps) => React.JSX.Element;
 export default TextReducer;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "25.0.0-rc.2",
+    "version": "25.0.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -87,6 +87,7 @@
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.1",
+        "he": "^1.2.0",
         "jshint": "^2.13.6",
         "lodash": "^4.17.21",
         "n3": "^1.25.1",
@@ -134,6 +135,7 @@
         "@testing-library/react": "^12.1.5",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
+        "@types/he": "^1.2.3",
         "@types/jest": "^29.5.14",
         "@types/jshint": "^2.12.4",
         "@types/lodash": "^4.17.16",
@@ -150,8 +152,8 @@
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^30.0.5",
-        "jest-environment-jsdom": "^30.0.5",
+        "jest": "^30.2.0",
+        "jest-environment-jsdom": "^30.2.0",
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^15.5.1",
         "node-sass-package-importer": "^5.3.3",

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/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;
         }
     }, []);
 

package/src/components/ContextOverlay/tests/ContextMenu.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
+import ContextMenu from "./../ContextMenu";
+import { Default as ContextMenuStory } from "./../ContextMenu.stories";
+
+const overlayWrapper = `${eccgui}-contextoverlay`;
+const placeholderClass = `${overlayWrapper}__wrapper--placeholder`;
+
+const checkForPlaceholderClass = (container: HTMLElement, tobe: number) => {
+    expect(container.getElementsByClassName(placeholderClass).length).toBe(tobe);
+};
+
+describe("ContextMenu", () => {
+    it("should render placeholder automatically", () => {
+        const { container } = render(<ContextMenu {...ContextMenuStory.args} />);
+        checkForPlaceholderClass(container, 1);
+    });
+    it("should not render placeholder when `preventPlaceholder===true`", () => {
+        const { container } = render(<ContextMenu {...ContextMenuStory.args} preventPlaceholder={true} />);
+        checkForPlaceholderClass(container, 0);
+    });
+    it("should render placeholder when `preventPlaceholder===false`", () => {
+        const { container } = render(<ContextMenu {...ContextMenuStory.args} preventPlaceholder={false} />);
+        checkForPlaceholderClass(container, 1);
+    });
+    it("if no placeholder is used the menu should be displayed on click", async () => {
+        const { container } = render(<ContextMenu {...ContextMenuStory.args} preventPlaceholder={true} />);
+        checkForPlaceholderClass(container, 0);
+        fireEvent.click(container.getElementsByClassName(overlayWrapper)[0]);
+        expect(await screen.findByText("First option")).toBeVisible();
+    });
+    it("if placeholder is used the menu should be displayed on click", async () => {
+        const { container } = render(<ContextMenu {...ContextMenuStory.args} preventPlaceholder={false} />);
+        checkForPlaceholderClass(container, 1);
+        fireEvent.click(container.getElementsByClassName(overlayWrapper)[0]);
+        expect(await screen.findByText("First option")).toBeVisible();
+    });
+});

package/src/components/ContextOverlay/tests/ContextOverlay.test.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { PopoverInteractionKind } from "@blueprintjs/core";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
+import ContextOverlay from "./../ContextOverlay";
+import { Default as ContextOverlayStory } from "./../ContextOverlay.stories";
+
+const overlayWrapper = `${eccgui}-contextoverlay`;
+const placeholderClass = `${overlayWrapper}__wrapper--placeholder`;
+
+const checkForPlaceholderClass = (container: HTMLElement, tobe: number) => {
+    expect(container.getElementsByClassName(placeholderClass).length).toBe(tobe);
+};
+
+describe("ContextOverlay", () => {
+    it("should not render placeholder automatically", () => {
+        const { container } = render(<ContextOverlay {...ContextOverlayStory.args} />);
+        checkForPlaceholderClass(container, 0);
+    });
+    it("should render placeholder when `usePlaceholder===true`", () => {
+        const { container } = render(<ContextOverlay {...ContextOverlayStory.args} usePlaceholder={true} />);
+        checkForPlaceholderClass(container, 1);
+    });
+    it("should render no placeholder when `usePlaceholder===false`", () => {
+        const { container } = render(<ContextOverlay {...ContextOverlayStory.args} usePlaceholder={false} />);
+        checkForPlaceholderClass(container, 0);
+    });
+    it("if no placeholder is used the overlay should be displayed on click", async () => {
+        const { container } = render(<ContextOverlay {...ContextOverlayStory.args} usePlaceholder={false} />);
+        fireEvent.click(container.getElementsByClassName(overlayWrapper)[0]);
+        expect(await screen.findByText("Overlay:")).toBeVisible();
+    });
+    it("if no placeholder is used the overlay should be displayed on hover (hover interactionKind)", async () => {
+        const { container } = render(
+            <ContextOverlay
+                {...ContextOverlayStory.args}
+                usePlaceholder={false}
+                interactionKind={PopoverInteractionKind.HOVER}
+            />
+        );
+        fireEvent.mouseEnter(container.getElementsByClassName(overlayWrapper)[0]);
+        expect(await screen.findByText("Overlay:")).toBeVisible();
+    });
+    it("if placeholder is used the overlay should be displayed on click", async () => {
+        const { container } = render(<ContextOverlay {...ContextOverlayStory.args} usePlaceholder={true} />);
+        fireEvent.click(container.getElementsByClassName(overlayWrapper)[0]);
+        expect(await screen.findByText("Overlay:")).toBeVisible();
+    });
+    it("if placeholder is used the overlay should be displayed on hover (hover interactionKind)", async () => {
+        const { container } = render(
+            <ContextOverlay
+                {...ContextOverlayStory.args}
+                usePlaceholder={true}
+                interactionKind={PopoverInteractionKind.HOVER}
+            />
+        );
+        checkForPlaceholderClass(container, 1);
+        fireEvent.mouseEnter(container.getElementsByClassName(overlayWrapper)[0]);
+        await waitFor(async () => {
+            expect(screen.queryByDisplayValue("Overlay:")).toBeNull();
+            checkForPlaceholderClass(container, 0);
+            // we need to emulate another mouseover to simulate real user behaviour
+            fireEvent.mouseOver(container.getElementsByClassName(overlayWrapper)[0]);
+            expect(await screen.findByText("Overlay:")).toBeVisible();
+        });
+    });
+});