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

package/src/components/ColorField/ColorField.tsx

@@ -0,0 +1,200 @@
+import React, { CSSProperties } from "react";
+import classNames from "classnames";
+
+import { utils } from "../../common";
+import { ColorWeight, PaletteGroup } from "../../common/utils/colorHash";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ContextOverlay } from "../ContextOverlay";
+import { FieldSet } from "../Form";
+import { RadioButton } from "../RadioButton/RadioButton";
+import { Spacing } from "../Separation/Spacing";
+import { Tag, TagList } from "../Tag";
+import { TextField, TextFieldProps } from "../TextField";
+import { Tooltip } from "../Tooltip/Tooltip";
+import { WhiteSpaceContainer } from "../Typography";
+
+export interface ColorFieldProps extends Omit<TextFieldProps, "invisibleCharacterWarning"> {
+    /**
+     * Any color can be selected, not only from the configured color palette.
+     */
+    allowCustomColor?: boolean;
+    /**
+     * What color weights should be included in the set of allowed colors.
+     */
+    includeColorWeight?: ColorWeight[];
+    /**
+     * What palette groups should be included in the set of allowed colors.
+     */
+    includePaletteGroup?: PaletteGroup[];
+}
+
+/**
+ * Color input field that provides resets from the configured color palette.
+ * Use `includeColorWeight` and `includePaletteGroup` to filter them.
+ */
+export const ColorField = ({
+    className = "",
+    allowCustomColor = false,
+    includeColorWeight = [100, 300, 700, 900], // on default, we only include color weights that can have enough contrasts to black/white
+    includePaletteGroup = ["layout"],
+    defaultValue,
+    value,
+    onChange,
+    fullWidth = false,
+    ...otherTextFieldProps
+}: ColorFieldProps) => {
+    const ref = React.useRef(null);
+    const [colorValue, setColorValue] = React.useState<string>(defaultValue || value || "#000000");
+
+    let allowedPaletteColors, disableNativePicker, disabled;
+    const updateConfig = () => {
+        allowedPaletteColors = utils.getEnabledColorPropertiesFromPalette({
+            includePaletteGroup: includePaletteGroup,
+            includeColorWeight: includeColorWeight,
+            minimalColorDistance: 0, // we use all allowed colors, and do not check distances between them
+        });
+
+        disableNativePicker =
+            includeColorWeight.length > 0 && includePaletteGroup.length > 0 && allowedPaletteColors.length > 0;
+        disabled = (!disableNativePicker && !allowCustomColor) || otherTextFieldProps.disabled;
+    };
+    updateConfig();
+    React.useEffect(() => {
+        updateConfig();
+    }, [allowCustomColor, includeColorWeight, includePaletteGroup, otherTextFieldProps]);
+
+    React.useEffect(() => {
+        setColorValue(defaultValue || value || "#000000");
+    }, [defaultValue, value]);
+
+    const forwardOnChange = (forwardedEvent: React.ChangeEvent<HTMLInputElement>) => {
+        setColorValue(forwardedEvent.target.value);
+        if (onChange) {
+            onChange(forwardedEvent);
+        }
+    };
+
+    const colorInput = (
+        <TextField
+            inputRef={ref}
+            className={classNames(`${eccgui}-colorfield`, className, {
+                [`${eccgui}-colorfield--custom-picker`]: disableNativePicker,
+            })}
+            // we cannot use `color` type for the custom picker because we do not have control over it then
+            type={!disableNativePicker ? "color" : "text"}
+            readOnly={disableNativePicker}
+            disabled={disabled}
+            value={colorValue}
+            fullWidth={fullWidth}
+            {...otherTextFieldProps}
+            onChange={
+                !disableNativePicker
+                    ? (e: React.ChangeEvent<HTMLInputElement>) => {
+                          forwardOnChange(e);
+                      }
+                    : undefined
+            }
+            style={{ ...otherTextFieldProps.style, [`--eccgui-colorfield-background`]: colorValue } as CSSProperties}
+        />
+    );
+
+    return disableNativePicker && !disabled ? (
+        <ContextOverlay
+            fill={fullWidth}
+            content={
+                <WhiteSpaceContainer
+                    paddingTop={"small"}
+                    paddingRight={"small"}
+                    paddingBottom={"small"}
+                    paddingLeft={"small"}
+                    className={`${eccgui}-colorfield__picker`}
+                >
+                    {allowCustomColor && (
+                        <>
+                            <TextField
+                                type={"color"}
+                                value={colorValue}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                    forwardOnChange(e);
+                                }}
+                            />
+                            <Spacing size={"small"} />
+                        </>
+                    )}
+                    <FieldSet>
+                        <TagList
+                            className={`${eccgui}-colorfield__palette ${eccgui}-colorfield__palette--${
+                                includeColorWeight.length >= 3 ? includeColorWeight.length * 2 : "8"
+                            }col`}
+                        >
+                            {allowedPaletteColors!.map((color: [string, string], idx: number) => [
+                                <RadioButton
+                                    className={`${eccgui}-colorfield__palette__color`}
+                                    hideIndicator
+                                    value={color[1]}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                        forwardOnChange(e);
+                                    }}
+                                >
+                                    <Tooltip key={idx} content={color[0].replace(`${eccgui}-color-palette-`, "")}>
+                                        <Tag
+                                            large
+                                            style={{ [`--eccgui-colorfield-palette-color`]: color[1] } as CSSProperties}
+                                        >
+                                            {color[1]}
+                                        </Tag>
+                                    </Tooltip>
+                                </RadioButton>,
+                                // Looks like we cannot force some type of line break in the tag list via CSS only
+                                (idx + 1) % (includeColorWeight.length >= 3 ? includeColorWeight.length * 2 : 8) ===
+                                    0 && (
+                                    <>
+                                        <br className={`${eccgui}-colorfield__palette-linebreak`} />
+                                    </>
+                                ),
+                            ])}
+                        </TagList>
+                    </FieldSet>
+                </WhiteSpaceContainer>
+            }
+        >
+            {colorInput}
+        </ContextOverlay>
+    ) : (
+        colorInput
+    );
+};
+
+type calculateColorHashValueProps = Pick<
+    ColorFieldProps,
+    "allowCustomColor" | "includeColorWeight" | "includePaletteGroup"
+>;
+
+/**
+ * Simple helper function that provide simple access to color hash calculation.
+ * Using the same default values for the color palette filter.
+ */
+ColorField.calculateColorHashValue = (
+    text: string,
+    options: calculateColorHashValueProps = {
+        allowCustomColor: false,
+        includeColorWeight: [100, 300, 700, 900],
+        includePaletteGroup: ["layout"],
+    }
+) => {
+    const hash = utils.textToColorHash({
+        text,
+        options: {
+            returnValidColorsDirectly: options.allowCustomColor as boolean,
+            enabledColors: utils.getEnabledColorsFromPalette({
+                includePaletteGroup: options.includePaletteGroup,
+                includeColorWeight: options.includeColorWeight,
+                minimalColorDistance: 0,
+            }),
+        },
+    });
+
+    return hash ? hash : undefined;
+};
+
+export default ColorField;

package/src/components/ColorField/_colorfield.scss

@@ -0,0 +1,56 @@
+.#{$eccgui}-colorfield {
+    cursor: default;
+
+    &:not(.#{$ns}-fill) {
+        width: 100%;
+        max-width: 4 * $eccgui-size-textfield-height-regular;
+    }
+
+    .#{$ns}-input {
+        color: var(--#{$eccgui}-colorfield-background);
+        cursor: inherit;
+        background-color: var(--#{$eccgui}-colorfield-background);
+
+        &[type="color"] {
+            &::-webkit-color-swatch-wrapper {
+                display: none;
+            }
+
+            &::-moz-color-swatch {
+                display: none;
+            }
+        }
+    }
+
+    .#{$ns}-input-left-container {
+        top: 1px;
+        left: 1px !important;
+        height: calc(100% - 2px);
+        background-color: $eccgui-color-textfield-background;
+    }
+    .#{$ns}-input-action {
+        top: 1px;
+        right: 1px !important;
+        height: calc(100% - 2px);
+        background-color: $eccgui-color-textfield-background;
+    }
+}
+
+.#{$eccgui}-colorfield__palette {
+    & > li:has(.#{$eccgui}-colorfield__palette-linebreak) {
+        display: block;
+        width: 100%;
+        height: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+}
+
+.#{$eccgui}-colorfield__palette__color {
+    margin: 0;
+    .#{$eccgui}-tag__item {
+        width: 3rem;
+        color: var(--#{$eccgui}-colorfield-palette-color) !important;
+        background-color: var(--#{$eccgui}-colorfield-palette-color) !important;
+    }
+}

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,11 +2,12 @@ import React from "react";
 import {
     Classes as BlueprintClasses,
     Popover as BlueprintPopover,
+    PopoverInteractionKind as InteractionKind,
     PopoverProps as BlueprintPopoverProps,
     Utils as BlueprintUtils,
 } from "@blueprintjs/core";
 
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { CLASSPREFIX as eccgui, WhiteSpaceContainer, WhiteSpaceContainerProps } from "../../index";
 
 export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "position"> {
     /**
@@ -23,6 +24,11 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
      * Currently experimental.
      */
     usePlaceholder?: boolean;
+    /**
+     * Adds white space to each side of the overlay content.
+     * For more control use `WhiteSpaceContainer` directly as wrapper for the content children.
+     */
+    paddingSize?: WhiteSpaceContainerProps["paddingTop"];
 }
 
 /**
@@ -35,11 +41,14 @@ export const ContextOverlay = ({
     preventTopPosition,
     className = "",
     usePlaceholder = false,
+    paddingSize,
+    content,
     ...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 +59,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;
         }
     }, []);
 
@@ -119,6 +176,18 @@ export const ContextOverlay = ({
     ) : (
         <BlueprintPopover
             placement="bottom"
+            content={content ? (
+                paddingSize ? (
+                        <WhiteSpaceContainer
+                            paddingTop={paddingSize}
+                            paddingRight={paddingSize}
+                            paddingBottom={paddingSize}
+                            paddingLeft={paddingSize}
+                        >
+                            {content}
+                        </WhiteSpaceContainer>
+                    ) : content
+            ) : undefined}
             {...otherPopoverProps}
             className={targetClassName}
             portalClassName={portalClassNameFinal.trim() ?? undefined}

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();
+        });
+    });
+});

package/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",
+};