@eccenca/gui-elements 25.0.0 → 25.1.0-changeupgradedtoreact18cmem6639.0

package/src/components/ColorField/ColorField.test.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { ColorField } from "./ColorField";
+
+describe("ColorField", () => {
+    describe("rendering", () => {
+        it("renders without crashing, and correct component CSS class is applied", () => {
+            const { container } = render(<ColorField />);
+            expect(container).not.toBeEmptyDOMElement();
+            expect(container.getElementsByClassName(`${eccgui}-colorfield`).length).toBe(1);
+        });
+
+        it("renders a color input by default (no palette presets)", () => {
+            const { container } = render(<ColorField colorPresets={[]} allowCustomColor={true} />);
+            expect(container.querySelector("input[type='color']")).toBeInTheDocument();
+        });
+
+        it("renders a readonly text input when palette colors are configured, and custom picker CSS class is applied", () => {
+            const { container } = render(
+                <ColorField
+                    className="my-custom-class"
+                    colorPresets={[
+                        ["my-black", "#000000"],
+                        ["my-white", "#ffffff"],
+                    ]}
+                />
+            );
+            // With default palette settings, a text input with readOnly is shown
+            expect(container.querySelector("input[type='text']")).toBeInTheDocument();
+            expect(container.querySelector("input[readonly]")).toBeInTheDocument();
+            expect(container.querySelector(`.${eccgui}-colorfield--custom-picker`)).toBeInTheDocument();
+        });
+
+        it("applies additional className", () => {
+            render(<ColorField className="my-custom-class" colorPresets={[]} allowCustomColor={true} />);
+            expect(document.querySelector(".my-custom-class")).toBeInTheDocument();
+        });
+    });
+
+    describe("value handling", () => {
+        it("uses defaultValue as initial color", () => {
+            render(<ColorField defaultValue="#ff0000" colorPresets={[]} allowCustomColor={true} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#ff0000");
+        });
+
+        it("uses value prop as initial color", () => {
+            render(<ColorField value="#00ff00" colorPresets={[]} allowCustomColor={true} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#00ff00");
+        });
+
+        it("falls back to #000000 when no value or defaultValue is provided", () => {
+            render(<ColorField colorPresets={[]} allowCustomColor={true} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#000000");
+        });
+
+        it("updates displayed value when value prop changes", () => {
+            const { rerender } = render(<ColorField value="#ff0000" colorPresets={[]} allowCustomColor={true} />);
+            let input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#ff0000");
+
+            rerender(<ColorField value="#0000ff" colorPresets={[]} allowCustomColor={true} />);
+            input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#0000ff");
+        });
+    });
+
+    describe("disabled state", () => {
+        it("is disabled when disabled prop is true", () => {
+            render(<ColorField disabled colorPresets={[]} allowCustomColor={true} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input).toBeDisabled();
+        });
+
+        it("is disabled when no palette colors and allowCustomColor is false", () => {
+            render(<ColorField colorPresets={[]} allowCustomColor={false} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input).toBeDisabled();
+        });
+    });
+
+    describe("onChange callback", () => {
+        it("calls onChange when native color input changes", async () => {
+            const user = userEvent.setup();
+            const onChange = jest.fn();
+            render(<ColorField onChange={onChange} colorPresets={[]} allowCustomColor={true} />);
+            const input = document.querySelector("input[type='color']") as HTMLInputElement;
+            input.type = "text"; // for unknown reasons Jest seems not able to test it on color inputs
+            await user.type(input, "#123456");
+            expect(onChange).toHaveBeenCalled();
+        });
+    });
+});

package/src/components/ColorField/ColorField.tsx

@@ -0,0 +1,200 @@
+import React, { CSSProperties } from "react";
+import classNames from "classnames";
+import Color from "color";
+
+import { utils } from "../../common";
+import { getEnabledColorsProps } 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";
+
+type ColorPresets = [string, string][] | [string, Color][];
+type ColorPresetConfiguration = Pick<getEnabledColorsProps, "includeColorWeight" | "includePaletteGroup">;
+
+export interface ColorFieldProps extends Omit<TextFieldProps, "invisibleCharacterWarning"> {
+    /**
+     * Any color can be selected, not only from the color presets.
+     */
+    allowCustomColor?: boolean;
+    /**
+     * List of named colors that are used a selectable color options.
+     */
+    colorPresets?: ColorPresets;
+}
+
+/**
+ * Color input field that provides resets from the configured color palette.
+ * Use `includeColorWeight` and `includePaletteGroup` to filter them.
+ */
+export const ColorField = ({
+    className = "",
+    allowCustomColor = false,
+    colorPresets = listColorPalettePresets(),
+    defaultValue,
+    value,
+    onChange,
+    fullWidth = false,
+    ...otherTextFieldProps
+}: ColorFieldProps) => {
+    const ref = React.useRef(null);
+    const [colorValue, setColorValue] = React.useState<string>(defaultValue || value || "#000000");
+    if (value && value !== colorValue) {
+        setColorValue(value);
+    }
+
+    const disableNativePicker = colorPresets.length > 0;
+    const disabled = (!disableNativePicker && !allowCustomColor) || otherTextFieldProps.disabled;
+
+    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,
+                [`${eccgui}-colorfield--disabled`]: disabled,
+            })}
+            // 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`}>
+                            {colorPresets!.map((color: [string, string | Color], idx: number) => [
+                                <RadioButton
+                                    key={idx}
+                                    className={`${eccgui}-colorfield__palette__color`}
+                                    hideIndicator
+                                    value={typeof color[1] === "string" ? color[1] : color[1].toString()}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                        forwardOnChange(e);
+                                    }}
+                                >
+                                    <Tooltip content={color[0]}>
+                                        <Tag
+                                            large
+                                            style={{ [`--eccgui-colorfield-palette-color`]: color[1] } as CSSProperties}
+                                        >
+                                            {typeof color[1] === "string" ? color[1] : color[1].toString()}
+                                        </Tag>
+                                    </Tooltip>
+                                </RadioButton>,
+                                // Looks like we cannot force some type of line break in the tag list via CSS only
+                                (idx + 1) % 8 === 0 && (
+                                    <>
+                                        <br className={`${eccgui}-colorfield__palette-linebreak`} />
+                                    </>
+                                ),
+                            ])}
+                        </TagList>
+                    </FieldSet>
+                </WhiteSpaceContainer>
+            }
+        >
+            {colorInput}
+        </ContextOverlay>
+    ) : (
+        colorInput
+    );
+};
+
+const defaultColorPaletteSet: ColorPresetConfiguration = {
+    // on default, we only include color weights that can have enough contrasts to black/white
+    includeColorWeight: [100, 300, 700, 900],
+    // on default, we only include layout colors
+    includePaletteGroup: ["layout"],
+};
+
+/**
+ * Simple helper function to get a list of colors defined in the color palette.
+ */
+const listColorPalettePresets = (colorPaletteSet = defaultColorPaletteSet) => {
+    return utils
+        .getEnabledColorPropertiesFromPalette({
+            ...colorPaletteSet,
+            minimalColorDistance: 0, // we use all allowed colors, and do not check distances between them
+        })
+        .map((color: [string, string | Color]) => [
+            color[0].replace(`${eccgui}-color-palette-`, ""),
+            color[1],
+        ]) as ColorPresets;
+};
+
+ColorField.listColorPalettePresets = listColorPalettePresets;
+
+type calculateColorHashValueProps = Pick<ColorFieldProps, "allowCustomColor"> & ColorPresetConfiguration;
+
+/**
+ * Simple helper function that provide simple access to color hash calculation.
+ */
+ColorField.calculateColorHashValue = (
+    text: string,
+    options: calculateColorHashValueProps = {
+        ...defaultColorPaletteSet,
+        allowCustomColor: false,
+    }
+) => {
+    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,67 @@
+.#{$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;
+            }
+        }
+    }
+
+    &[class*="#{$ns}-intent-"] {
+        // we need to remove normal intent indicators like colored bg or blinking
+        .#{$ns}-input {
+            background-color: var(--#{$eccgui}-colorfield-background);
+        }
+    }
+
+    .#{$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--disabled {
+    opacity: $eccgui-opacity-disabled;
+}
+
+.#{$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.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../../index";
+import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../components";
 
 export default {
     title: "Components/ContentGroup",

package/src/components/ContentGroup/ContentGroup.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import classNames from "classnames";
 import Color from "color";
 
-import { TestableComponent } from "../../components/interfaces";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {
     Divider,
     Icon,
@@ -17,7 +15,9 @@ import {
     Toolbar,
     ToolbarSection,
     Tooltip,
-} from "../index";
+} from "../../components";
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
     /**

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

@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
-import IconButton from "../Icon/IconButton";
+import { IconButton, IconButtonProps } from "../Icon/IconButton";
 import { TestableComponent } from "../interfaces";
 import Menu from "../Menu/Menu";
 
@@ -17,19 +17,24 @@ export interface ContextMenuProps extends TestableComponent {
      * The elements of the context menu.
      * They will be wrapped in a `Menu` element automatically.
      */
-    children?: JSX.Element | JSX.Element[];
+    children?: React.JSX.Element | React.JSX.Element[];
     /**
      * Toggler that need to be used to display menu.
      * If a valid icon name is used then the icon element is displayed.
      * In this case `togglerText`, `togglerLarge` and `tooltipAsTitle` are used, too.
      */
-    togglerElement?: ValidIconName | JSX.Element;
+    togglerElement?: ValidIconName | React.JSX.Element;
     /**
      * Text displayed as title or tooltip on toggler element.
      */
     togglerText?: string;
+    /**
+     * Allow to de- and increase the size of the default toggler button.
+     */
+    togglerSize?: IconButtonProps["size"];
     /**
      * Toggler element is displayed larger than normal.
+     * @deprecated (v26) use `togglerSize="large" instead
      */
     togglerLarge?: boolean;
     /**
@@ -62,6 +67,7 @@ export const ContextMenu = ({
     contextOverlayProps,
     disabled,
     togglerLarge = false,
+    togglerSize,
     /* 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,
@@ -76,7 +82,7 @@ export const ContextMenu = ({
                 tooltipAsTitle={tooltipAsTitle}
                 name={[togglerElement]}
                 text={togglerText}
-                large={togglerLarge}
+                size={togglerLarge ? "large" : togglerSize}
                 disabled={!!disabled}
                 data-test-id={dataTestId ?? undefined}
                 data-testid={dataTestid ?? undefined}

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -6,14 +6,14 @@ import {
     PopoverProps as BlueprintPopoverProps,
     Utils as BlueprintUtils,
 } from "@blueprintjs/core";
-
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {WhiteSpaceContainerProps, WhiteSpaceContainer} from "../Typography";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 
 export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "position"> {
     /**
      * `target` element to use as toggler for the overlay display.
      */
-    children?: JSX.Element;
+    children?: React.JSX.Element;
     /**
      * Type of counter property to `Modal.forceTopPosition`.
      * Use it when you need to display modal dialogs out of the context overlay.
@@ -24,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"];
 }
 
 /**
@@ -36,6 +41,8 @@ export const ContextOverlay = ({
     preventTopPosition,
     className = "",
     usePlaceholder = false,
+    paddingSize,
+    content,
     ...otherPopoverProps
 }: ContextOverlayProps) => {
     const placeholderRef = React.useRef<HTMLElement>(null);
@@ -108,7 +115,7 @@ export const ContextOverlay = ({
         return () => {};
     }, [!!placeholderRef.current, otherPopoverProps.interactionKind]);
 
-    const refocus = React.useCallback((node) => {
+    const refocus = React.useCallback((node:any) => {
         const target = node?.targetRef.current.children[0];
         if (!eventMemory.current || !target) {
             return;
@@ -169,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/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",
+};

package/src/components/DecoupledOverlay/DecoupledOverlay.tsx

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