@eccenca/gui-elements 24.4.1 → 25.0.0-bugfixcenterednodecontentmenuitemscmem7184.0

package/src/components/Dialog/Modal.tsx

@@ -5,11 +5,13 @@ import {
     Overlay2Props as BlueprintOverlayProps,
 } from "@blueprintjs/core";
 
+import { preventReactFlowActionsClasses } from "../../cmem";
 import { utils } from "../../common";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
 import { Card } from "./../Card";
+import { ModalContext } from "./ModalContext";
 
 export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     children: React.ReactNode | React.ReactNode[];
@@ -20,7 +22,7 @@ export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     /**
      * Size of the modal.
      */
-    size?: "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
+    size?: ModalSize;
     /**
      * Prevents that a backdrop area is displayed behind the modal elements.
      */
@@ -42,8 +44,18 @@ export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
      * If this option is used inflationary then this could harm the visibility of other overlays.
      */
     forceTopPosition?: boolean;
+    /**
+     * Modal ID that should be globally unique. If a ModalContext is provided this can be used to track opening/closing of this modal.
+     */
+    modalId?: string;
+    /**
+     * Prevents that pan and zooming actions of an existing react-flow instance are triggered while this Modal is open.
+     */
+    preventReactFlowEvents?: boolean;
 }
 
+export type ModalSize = "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
+
 /**
  * Displays contents on top of other elements, used to create dialogs.
  * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficient.
@@ -65,8 +77,24 @@ export const Modal = ({
     onOpening,
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
+    modalId,
+    preventReactFlowEvents = true,
     ...otherProps
 }: ModalProps) => {
+    const modalContext = React.useContext(ModalContext)
+    const uniqueModalId = React.useRef<string>(modalId ?? Date.now().toString(36) + Math.random().toString(36).substring(2))
+
+    React.useEffect(() => {
+        return () => {
+            // Make sure to always remove flag when modal is removed
+            modalContext.setModalOpen(uniqueModalId.current, false)
+        }
+    }, [])
+
+    React.useEffect(() => {
+        modalContext.setModalOpen(uniqueModalId.current, otherProps.isOpen)
+    }, [otherProps.isOpen])
+
     const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
         !canOutsideClickClose && canEscapeKeyClose
             ? {
@@ -114,7 +142,7 @@ export const Modal = ({
         <BlueprintOverlay
             {...otherProps}
             backdropProps={backdropProps}
-            className={overlayClassName}
+            className={`${overlayClassName} ${preventReactFlowEvents ? preventReactFlowActionsClasses : ""}`}
             backdropClassName={`${eccgui}-dialog__backdrop`}
             canOutsideClickClose={canOutsideClickClose}
             canEscapeKeyClose={canEscapeKeyClose}

package/src/components/Dialog/ModalContext.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+export interface ModalContextProps {
+    /** Set that a specific modal is currently being open (or closed) */
+    setModalOpen: (modalId: string, isOpen: boolean) => void;
+
+    /** The currently opened modals ordered by when they have been opened. Oldest coming first. */
+    openModalStack(): string[] | undefined;
+}
+
+/** Can be provided in the application to react to modal related changes. */
+export const ModalContext = React.createContext<ModalContextProps>({
+    setModalOpen: () => {},
+    openModalStack: () => [],
+});
+
+/** Default implementation for modal context props.
+ * Tracks open modals in a stack representation.
+ **/
+export const useModalContext = (): ModalContextProps => {
+    // A stack of modal IDs. These should reflect a stacked opening of modals on top of each other.
+    const currentOpenModalStack = React.useRef<string[]>([]);
+
+    const setOpenModalStack = ((stackUpdateFunction: (old: string[]) => string[]) => {
+        currentOpenModalStack.current = stackUpdateFunction([...currentOpenModalStack.current])
+    })
+
+    const setModalOpen = React.useCallback((modalId: string, isOpen: boolean) => {
+        setOpenModalStack(old => {
+            if (isOpen) {
+                return [...old, modalId];
+            } else {
+                const idx = old.findIndex((id) => modalId === id);
+                switch (idx) {
+                    case -1:
+                        // Trying to close modal that has not been registered as open!
+                        return old;
+                    case old.length - 1:
+                        return old.slice(0, idx);
+                    default:
+                        // Modal in between is closed. Consider all modals after it also as closed.
+                        return old.slice(0, idx);
+                }
+            }
+        });
+    }, []);
+
+    const openModalStack = React.useCallback(() => {
+        return currentOpenModalStack.current.length ? [...currentOpenModalStack.current] : undefined
+    }, [])
+
+    return {
+        openModalStack,
+        setModalOpen,
+    };
+};

package/src/components/Dialog/SimpleDialog.tsx

@@ -136,7 +136,8 @@ export const modalPreventEvents = {
     onDrag: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onDragStart: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onDragEnd: (event: BaseSyntheticEvent) => event.stopPropagation(),
-    onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    // The following prevents some drop-downs to not close anymore when clicking outside of them
+    // onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onMouseUp: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onClick: (event: BaseSyntheticEvent) => event.stopPropagation(),
 };

package/src/components/Dialog/dialog.scss

@@ -11,7 +11,10 @@ $eccgui-size-modal-large-width: math.div(9, 16) * 100vw !default;
 $eccgui-size-modal-large-height: math.div(6, 9) * 100vh !default;
 $eccgui-size-modal-xlarge-width: math.div(12, 16) * 100vw !default;
 $eccgui-size-modal-xlarge-height: math.div(7, 9) * 100vh !default;
-$eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0.69) !default;
+$eccgui-color-modal-backdrop: eccgui-color-rgba(
+    eccgui-color-var("identity", "background", "900"),
+    $eccgui-opacity-muted
+) !default;
 
 @import "~@blueprintjs/core/src/components/dialog/dialog";
 

package/src/components/Dialog/index.ts

@@ -1,3 +1,4 @@
 export * from "./Modal";
 export * from "./SimpleDialog";
 export * from "./AlertDialog";
+export * from "./ModalContext";

package/src/components/Dialog/stories/Modal.stories.tsx

@@ -15,15 +15,18 @@ export default {
             control: false,
         },
     },
+    decorators: [
+        (Story) => (
+            <OverlaysProvider>
+                <div style={{ height: "400px" }}>
+                    <Story />
+                </div>
+            </OverlaysProvider>
+        ),
+    ],
 } as Meta<typeof Modal>;
 
-const Template: StoryFn<typeof Modal> = (args) => (
-    <OverlaysProvider>
-        <div style={{ height: "400px" }}>
-            <Modal {...args} />
-        </div>
-    </OverlaysProvider>
-);
+const Template: StoryFn<typeof Modal> = (args) => <Modal {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Dialog/stories/ModalContext.stories.tsx

@@ -0,0 +1,153 @@
+import React from "react";
+import { Classes, OverlaysProvider } from "@blueprintjs/core";
+import { Meta } from "@storybook/react";
+
+import {
+    Button,
+    Card,
+    CardContent,
+    Modal,
+    ModalContext,
+    ModalContextProps,
+    ModalSize,
+    Spacing,
+    useModalContext,
+} from "./../../../../index";
+
+/**
+ * `ModalContext` can be used as provider to track a stack of modals.
+ *
+ * ```(Javascript)
+ * import { ModalContext, SimpleDialog } from "@eccenca/gui-elements";
+ *
+ * const ContextTemplate = () => {
+ *     const { setModalOpen, openModalStack } = useModalContext();
+ *     return (
+ *         <ModalContext.Provider value={{ setModalOpen, openModalStack }}>
+ *             <SimpleDialog size="large" isOpen>
+ *                 <OtherModal />
+ *             </SimpleDialog>
+ *         </ModalContext.Provider>
+ *     );
+ * };
+ *
+ * const OtherModal = () => {
+ *     const modalContext = React.useContext(ModalContext);
+ *     return (
+ *         <SimpleDialog size="small">
+ *            <ul>
+ *                {(modalContext.openModalStack ?? []).map((modalId, idx) => (
+ *                    <li key={modalId}>
+ *                        {idx + 1}. {modalId}
+ *                    </li>
+ *                ))}
+ *            </ul>
+ *         </SimpleDialog>
+ *     );
+ * };
+ * ```
+ */
+export default {
+    title: "Components/Dialog/ModalContext",
+    decorators: [
+        (Story) => (
+            <OverlaysProvider>
+                <div style={{ height: "70vh", position: "relative" }} id={"modalPortal"}>
+                    <Story />
+                </div>
+            </OverlaysProvider>
+        ),
+    ],
+} as Meta<ModalContextProps>;
+
+export const Usage = () => {
+    const { setModalOpen, openModalStack } = useModalContext();
+
+    return (
+        <ModalContext.Provider value={{ setModalOpen, openModalStack }}>
+            <ExampleModal id="rootModal" size="large">
+                <MiddleModal />
+            </ExampleModal>
+        </ModalContext.Provider>
+    );
+};
+
+const ModalContent = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <Card style={{ height: "100%" }}>
+            <CardContent>{children}</CardContent>
+        </Card>
+    );
+};
+
+/** Component for nested modals. */
+const ExampleModal = ({
+    id,
+    size,
+    children,
+}: {
+    id?: string;
+    size: ModalSize;
+    children?: React.HTMLAttributes<HTMLDivElement>["children"];
+}) => {
+    const [isOpen, setIsOpen] = React.useState(true);
+    const [portalElement, setPortalElement] = React.useState<HTMLElement | undefined>();
+
+    React.useEffect(() => {
+        setPortalElement(document.getElementById("modalPortal")!);
+    }, []);
+
+    return (
+        <Modal
+            modalId={id}
+            size={size}
+            isOpen={isOpen}
+            usePortal={true}
+            portalContainer={portalElement}
+            hasBackdrop={true}
+            onOpened={() => {
+                // workaround, Blueprint attach a class to body tht prevents scrolling, probably it is attached to the wrong portal
+                document.body.classList.remove(Classes.OVERLAY_OPEN);
+            }}
+        >
+            <ModalContent>
+                Modal with constant modal ID "{id}".
+                <Spacing />
+                <TrackingContent />
+                <Spacing />
+                {children}
+                <Spacing />
+                <Button key={"close"} onClick={() => setIsOpen(false)}>
+                    Close
+                </Button>
+            </ModalContent>
+        </Modal>
+    );
+};
+
+const InnerModal = () => {
+    return <ExampleModal id="innerModal" size="small" />;
+};
+
+const MiddleModal = () => {
+    return (
+        <ExampleModal id="middleModal" size="regular">
+            <InnerModal />
+        </ExampleModal>
+    );
+};
+
+/** Shows the current stack of open modals. */
+const TrackingContent = () => {
+    const modalContext = React.useContext(ModalContext);
+
+    return (
+        <ul>
+            {(modalContext.openModalStack() ?? []).map((modalId, idx) => (
+                <li key={modalId}>
+                    {idx + 1}. {modalId}
+                </li>
+            ))}
+        </ul>
+    );
+};

package/src/components/FlexibleLayout/flexiblelayout.scss

@@ -46,3 +46,19 @@
         flex-basis: auto;
     }
 }
+
+@media print {
+    .#{$eccgui}-flexible__container,
+    .#{$eccgui}-flexible__item {
+        position: relative;
+        display: block;
+        width: auto;
+        height: auto;
+        padding: 0;
+        margin: 0;
+
+        &:is(.#{$eccgui}-flexible__item) {
+            margin-bottom: $eccgui-size-block-whitespace;
+        }
+    }
+}

package/src/components/Form/FieldItem.tsx

@@ -5,40 +5,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 import Label, { LabelProps } from "../Label/Label";
 
-/*
-    FIXME: Improve development convenience and prevent development errors
-
-    * disabled state could be automatically forwarded to inserted input element,
-      currently this need to be dome explicitly .
-    * input id could be forwarded to label and input element
-    * input id could be created when not given
-*/
-
 export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
-    /**
-     * Set primary state.
-     * This is not routed through automatically.
-     * @deprecated (v25) use `intent="primary"` instead.
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * Set success state.
-     * This is not routed through automatically.
-     * @deprecated (v25) use `intent="success"` instead.
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * Set warning state.
-     * This is not routed through automatically.
-     * @deprecated (v25) use `intent="warning"` instead.
-     */
-    hasStateWarning?: boolean;
-    /**
-     * Set danger state.
-     * This is not routed through automatically.
-     * @deprecated (v25) use `intent="danger"` instead.
-     */
-    hasStateDanger?: boolean;
     /**
      * Intent state of the field item.
      */
@@ -69,10 +36,6 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
  * Form element that manages the combination of label, helper texts, input element and feedback messages.
  */
 export const FieldItem = ({
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     children,
     className,
     disabled,
@@ -82,24 +45,6 @@ export const FieldItem = ({
     intent,
     ...otherProps
 }: FieldItemProps) => {
-    let classIntent = "";
-    switch (true) {
-        case hasStatePrimary:
-            classIntent = " " + IntentClassNames.PRIMARY;
-            break;
-        case hasStateSuccess:
-            classIntent = " " + IntentClassNames.SUCCESS;
-            break;
-        case hasStateWarning:
-            classIntent = " " + IntentClassNames.WARNING;
-            break;
-        case hasStateDanger:
-            classIntent = " " + IntentClassNames.DANGER;
-            break;
-        default:
-            break;
-    }
-
     const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
 
     const label = <Label {...labelProps} disabled={disabled} />;
@@ -117,9 +62,9 @@ export const FieldItem = ({
     const notification =
         messageText &&
         (typeof messageText === "string" ? (
-            <p className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</p>
+            <p className={`${eccgui}-fielditem__message` + intentClass}>{messageText}</p>
         ) : (
-            <div className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</div>
+            <div className={`${eccgui}-fielditem__message` + intentClass}>{messageText}</div>
         ));
 
     return (

package/src/components/Form/FieldSet.tsx

@@ -9,26 +9,6 @@ export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFie
      * Background color of the box is set automatically regarding the set intent state.
      */
     boxed?: boolean;
-    /**
-     * The fieldsetsection is displayed with primary color scheme.
-     * @deprecated (v25) use `intent="primary"` instead.
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * The fieldset section is displayed with success (some type of green) color scheme.
-     * @deprecated (v25) use `intent="success"` instead.
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * The fieldset section is displayed with warning (some type of orange) color scheme.
-     * @deprecated (v25) use `intent="warning"` instead.
-     */
-    hasStateWarning?: boolean;
-    /**
-     * The fieldsetsection is displayed with danger (some type of red) color scheme.
-     * @deprecated (v25) use `intent="danger"` instead.
-     */
-    hasStateDanger?: boolean;
     /**
      * Intent state of the field item.
      */
@@ -56,36 +36,12 @@ export const FieldSet = ({
     boxed = false,
     children,
     className,
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     intent,
     helperText,
     messageText,
     title,
     ...otherProps
 }: FieldSetProps) => {
-    let classIntent = "";
-    switch (true) {
-        case hasStatePrimary:
-            classIntent = " " + IntentClassNames.PRIMARY;
-            break;
-        case hasStateSuccess:
-            classIntent = " " + IntentClassNames.SUCCESS;
-            break;
-        case hasStateWarning:
-            classIntent = " " + IntentClassNames.WARNING;
-            break;
-        case hasStateDanger:
-            classIntent = " " + IntentClassNames.DANGER;
-            break;
-        default:
-            break;
-    }
-
-    const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
-
     const userhelp =
         helperText &&
         (typeof helperText === "string" ? (
@@ -109,7 +65,7 @@ export const FieldSet = ({
             className={
                 `${eccgui}-fieldset` +
                 (className ? " " + className : "") +
-                (intentClass || classIntent) +
+                (intent ? " " + IntentClassNames[intent.toUpperCase()] : "") +
                 (boxed ? ` ${eccgui}-fieldset--boxed` : "")
             }
             {...otherProps}

package/src/components/Form/form.scss

@@ -1,6 +1,6 @@
 $eccgui-size-typo-formitem: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-formitem-lineheight: $eccgui-size-typo-caption-lineheight !default;
-$eccgui-color-formitem-text: rgba($eccgui-color-workspace-text, $eccgui-opacity-narrow);
+$eccgui-color-formitem-text: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-narrow);
 
 @import "~@blueprintjs/core/src/components/forms/common";
 @import "~@blueprintjs/core/src/components/forms/control-group";
@@ -39,7 +39,7 @@ form {
     color: $eccgui-color-formitem-text;
 
     .#{$eccgui}-fielditem--disabled > & {
-        color: rgba($eccgui-color-formitem-text, 1) !important;
+        color: $eccgui-color-workspace-text !important;
         opacity: $eccgui-opacity-disabled !important;
     }
 }

package/src/components/Grid/grid.scss

@@ -86,3 +86,20 @@ $grid-gutter: rem($eccgui-size-grid-gutter);
         flex-wrap: nowrap;
     }
 }
+
+@media print {
+    .#{$eccgui}-grid,
+    .#{$eccgui}-grid__row,
+    .#{$eccgui}-grid__column {
+        position: relative;
+        display: block;
+        width: auto;
+        height: auto;
+        padding: 0;
+        margin: 0;
+
+        &:is(.#{$eccgui}-grid__column) {
+            margin-bottom: $eccgui-size-block-whitespace;
+        }
+    }
+}

package/src/components/Grid/stories/Grid.stories.tsx

@@ -11,19 +11,22 @@ export default {
     subcomponents: { GridRow, GridColumn },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
+    decorators: [
+        (Story) => (
+            <div style={{ minHeight: "30vh", position: "relative" }}>
+                <Story />
+            </div>
+        ),
+    ],
 } as Meta<typeof Grid>;
 
-const Template: StoryFn<typeof Grid> = (args) => (
-    <div style={{ minHeight: "30vh", position: "relative" }}>
-        <Grid {...args} />
-    </div>
-);
+const Template: StoryFn<typeof Grid> = (args) => <Grid {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    children: <GridRow {...RowExample.args} verticalStretched />,
+    children: [<GridRow {...RowExample.args} verticalStretched />, <GridRow {...RowExample.args} verticalStretched />],
     verticalStretchable: true,
 };

package/src/components/Grid/stories/GridRow.stories.tsx

@@ -10,21 +10,27 @@ export default {
     component: GridRow,
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof GridRow>;
 
-const Template: StoryFn<typeof GridRow> = (args) => (
-    <Grid style={{ minHeight: "30vh" }} verticalStretchable>
-        <GridRow {...args} />
-    </Grid>
-);
+const Template: StoryFn<typeof GridRow> = (args) => <GridRow {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    children: <GridColumn {...ColumnExample.args} verticalAlign="center" />,
+    children: [
+        <GridColumn {...ColumnExample.args} verticalAlign="center" key="col1" />,
+        <GridColumn {...ColumnExample.args} verticalAlign="center" key="col1" />,
+    ],
 };
+Default.decorators = [
+    (Story) => (
+        <Grid style={{ minHeight: "30vh" }} verticalStretchable>
+            <Story />
+        </Grid>
+    ),
+];
 
 const TemplateStretched: StoryFn<typeof GridRow> = (args) => (
     <Grid style={{ minHeight: "50vh" }} verticalStretchable>

package/src/components/Icon/BaseIcon.tsx

@@ -32,19 +32,10 @@ export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "descripti
      * Additional CSS classes.
      */
     className?: string;
-    /**
-     * Description for icon as accessibility fallback.
-     * @deprecated (v25) Use `title` as replacement.
-     */
-    description?: string;
     /**
      * Additonal tooltip properties, e.g. `hoverOpenDelay`.
      */
     tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
-    /**
-     * @deprecated (v25) Use `title` as replacement.
-     */
-    iconTitle?: CarbonIconProps["title"];
 }
 
 /**
@@ -58,8 +49,6 @@ function BaseIcon({
     tooltipText,
     tooltipProps,
     intent,
-    description,
-    iconTitle,
     tabIndex,
     ...restProps
 }: BaseIconProps) {
@@ -70,9 +59,6 @@ function BaseIcon({
 
     const icon = (
         <CarbonIconNamed
-            title={
-                iconTitle || description ? (iconTitle ? iconTitle : description ? description : undefined) : undefined
-            }
             {...restProps}
             {...sizeConfig}
             className={

package/src/components/Icon/IconButton.tsx

@@ -2,13 +2,14 @@ import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Button, { ButtonProps } from "../Button/Button";
+import {TestableComponent} from "../interfaces";
 
 import { ValidIconName } from "./canonicalIconNames";
 import Icon, { IconProps } from "./Icon";
 import { TestIconProps } from "./TestIcon";
 
 interface ExtendedButtonProps
-    extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+    extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip">, TestableComponent {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.