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

package/src/components/DecoupledOverlay/_decoupledoverlay.scss

@@ -0,0 +1,46 @@
+.#{$eccgui}-decoupled-overlay__arrow {
+    &::before {
+        background: $card-background-color;
+    }
+
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="top"] & {
+        bottom: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="right"] & {
+        left: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="bottom"] & {
+        top: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="left"] & {
+        right: -0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-decoupled-overlay {
+    &.#{$prefix-blueprintjs}-popover {
+        z-index: 8001;
+    }
+
+    &--small {
+        @extend .#{$eccgui}-tooltip--small;
+    }
+
+    &--medium {
+        @extend .#{$eccgui}-tooltip--medium;
+    }
+
+    &--large {
+        @extend .#{$eccgui}-tooltip--large;
+    }
+
+    &:has(.#{$eccgui}-decoupled-overlay__arrow) {
+        .#{$eccgui}-decoupled-overlay__content {
+            min-height: 30px; // height of blueprint arrow
+        }
+    }
+}
+
+.#{$eccgui}-decoupled-overlay__content {
+    padding: 0.1px; // force margins of children to stay inside
+}

package/src/components/Depiction/Depiction.tsx

@@ -65,7 +65,7 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Description of the depiction.
      */
-    caption?: string | JSX.Element;
+    caption?: string | React.JSX.Element;
     /**
      * How is the caption displayed.
      */

package/src/components/Depiction/depiction.scss

@@ -220,3 +220,9 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
     position: fixed;
     left: -5000rem;
 }
+
+@media print {
+    .#{$eccgui}-depiction {
+        print-color-adjust: exact;
+    }
+}

package/src/components/Dialog/SimpleDialog.tsx

@@ -30,7 +30,7 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     /**
      * Can contain elements actionable/non-actionable elements display right-aligned to the dialog title.
      */
-    headerOptions?: null | JSX.Element | JSX.Element[];
+    headerOptions?: null | React.JSX.Element | React.JSX.Element[];
     /**
      * If enabled neither closing via `esc` key or clicking outside of the component will work, except explicitly specified.
      */

package/src/components/Dialog/dialog.scss

@@ -22,6 +22,14 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(
     z-index: $eccgui-zindex-modals;
 }
 
+.#{$ns}-overlay-start-focus-trap,
+.#{$ns}-overlay-end-focus-trap {
+    // do not show focus on trap elements, we need to fix keeping focus on modal elements differently later
+    &[tabindex]:not([tabindex^="-"]):focus-visible {
+        @extend .#{$eccgui}-a11y-focus-by-pointer;
+    }
+}
+
 .#{$eccgui}-dialog__backdrop {
     background-color: $eccgui-color-modal-backdrop;
 }
@@ -33,7 +41,7 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(
     max-width: calc(100vw - 4rem);
     max-height: calc(100vh - 4rem);
     margin: 2rem;
-    pointer-events: all;
+    pointer-events: auto;
     user-select: text;
 
     & > * {
@@ -42,7 +50,7 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(
         max-width: 100%;
     }
 
-    * {
+    *:has(> svg) {
         pointer-events: all;
     }
 

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

@@ -5,7 +5,7 @@ import { fn } from "@storybook/test";
 
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
-import { Card, Modal } from "./../../../../index";
+import { Card, Modal } from "./../../../components";
 
 export default {
     title: "Components/Dialog/Modal",

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

@@ -24,7 +24,7 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
      * Text for user help.
      * Is displayed between label and input element.
      */
-    helperText?: string | JSX.Element;
+    helperText?: string | React.JSX.Element;
     /**
      * Feedback notification.
      * Is displayed below the included input element.

package/src/components/Form/FieldSet.tsx

@@ -16,17 +16,17 @@ export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFie
     /**
      * Optional helper text. If given then it is displayed after the title.
      */
-    helperText?: string | JSX.Element;
+    helperText?: string | React.JSX.Element;
     /**
      * Optional notification text.
      * If given then it is displayed before the fieldset content and is colored reagarding the set intent state.
      */
-    messageText?: string | JSX.Element;
+    messageText?: string | React.JSX.Element;
     /**
      * Optional title, set the fieldset legend and if given it is display on top, colored reagarding the set intent state.
      *
      */
-    title?: string | JSX.Element;
+    title?: string | React.JSX.Element;
 }
 
 /**

package/src/components/Form/Stories/FieldItem.stories.tsx

@@ -3,7 +3,7 @@ import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
-import { FieldItem, TextField } from "../../../../index";
+import { FieldItem, TextField } from "../../../components";
 
 export default {
     title: "Forms/FieldItem",

package/src/components/Form/Stories/FieldSet.stories.tsx

@@ -3,7 +3,7 @@ import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
-import { FieldItem, FieldItemRow, FieldSet, TitleSubsection } from "../../../../index";
+import { FieldItem, FieldItemRow, FieldSet, TitleSubsection } from "../../../components";
 
 import { Default as SimpleFieldItemExample } from "./FieldItem.stories";
 import { Default as SimpleFieldItemRowExample } from "./FieldItemRow.stories";

package/src/components/Form/form.scss

@@ -71,8 +71,8 @@ form {
 
 .#{$eccgui}-fieldset {
     legend {
-        display: block;
         float: left;
+        display: block;
         width: 100%;
         color: $eccgui-color-applicationheader-text;
     }
@@ -133,9 +133,9 @@ form {
 .#{$eccgui}-fieldset__fielditems {
     &:not(:first-child) {
         &::before {
+            clear: both;
             display: block;
             height: $eccgui-size-block-whitespace;
-            clear: both;
             content: " ";
         }
     }

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/GridColumn.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Grid, GridColumn, GridRow, HtmlContentBlock } from "../../../../index";
+import { Grid, GridColumn, GridRow, HtmlContentBlock } from "../../../components";
 
 export default {
     title: "Components/Grid/Column",

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Grid, GridColumn, GridRow } from "../../../../index";
+import { Grid, GridColumn, GridRow } from "../../../components";
 
 import { Default as ColumnExample } from "./GridColumn.stories";
 
@@ -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/HoverToggler/HoverToggler.tsx

@@ -10,12 +10,12 @@ export interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElem
     /**
      * The content that is shown when not hovered.
      */
-    baseContent: JSX.Element;
+    baseContent: React.JSX.Element;
     baseContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
     /**
      * The content that is shown when hovered.
      */
-    hoverContent: JSX.Element;
+    hoverContent: React.JSX.Element;
     hoverContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
     /**
      * Display as inline element.

package/src/components/Icon/IconButton.tsx

@@ -2,11 +2,11 @@ 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";
-import {TestableComponent} from "../interfaces";
 
 interface ExtendedButtonProps
     extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip">, TestableComponent {
@@ -54,8 +54,8 @@ export const IconButton = ({
         swapPlaceholderDelay: 10,
     };
     const iconProps = {
-        small: restProps.small,
-        large: restProps.large,
+        small: restProps.small || restProps["size"] === "small",
+        large: restProps.large || restProps["size"] === "large",
         tooltipText: tooltipAsTitle ? undefined : text,
         tooltipProps: tooltipProps
             ? {

package/src/components/Icon/canonicalIconNames.tsx

@@ -1,6 +1,8 @@
 import * as icons from "@carbon/react/icons";
 import { CarbonIconType as IconType } from "@carbon/react/icons";
 
+import { transform } from "./transformIcon";
+
 const canonicalIcons = {
     "application-activities": icons.Activity,
     "application-dataintegration": icons.DataUnstructured,
@@ -72,6 +74,8 @@ const canonicalIcons = {
     "data-time": icons.Time,
     "data-datetime": icons.EventSchedule,
     "data-number": icons.StringInteger,
+    "data-sourceschema": icons.PortOutput,
+    "data-targetschema": icons.PortInput,
 
     "entity-human": icons.User,
     "entity-robot": icons.Bot,
@@ -137,14 +141,16 @@ const canonicalIcons = {
     "navigation-up": icons.ArrowUp,
 
     "operation-aggregation": icons.DataCollection,
+    "operation-ai-generate": icons.AiGenerate,
     "operation-autolayout": icons.ChartNetwork,
     "operation-clear": icons.Close,
     "operation-commit": icons.Commit,
     "operation-comparison": icons.Compare,
     "operation-erase": icons.Erase,
+    "operation-filter": icons.Filter,
     "operation-filteredit": icons.FilterEdit,
     "operation-filterremove": icons.FilterRemove,
-    "operation-filter": icons.Filter,
+    "operation-filterreset": icons.FilterReset,
     "operation-focus": icons.CenterSquare,
     "operation-format-codeblock": icons.CodeBlock,
     "operation-format-text-code": icons.Code,
@@ -172,8 +178,10 @@ const canonicalIcons = {
     "state-checked": icons.CheckboxChecked,
     "state-checkedsimple": icons.Checkmark,
     "state-confirmed": icons.ThumbsUp,
+    "state-confirmed-all": icons.ThumbsUpDouble,
     "state-danger": icons.ErrorFilled,
     "state-declined": icons.ThumbsDown,
+    "state-declined-all": transform(icons.ThumbsUpDouble, 0, false, true),
     "state-flagged": icons.Flag,
     "state-info": icons.InformationFilled,
     "state-locked": icons.Locked,
@@ -209,6 +217,8 @@ const canonicalIcons = {
     "toggler-star-filled": icons.StarFilled,
     "toggler-table": icons.Table,
     "toggler-tree": icons.TreeViewAlt,
+    "toggler-pin-empty": icons.Pin,
+    "toggler-pin-filled": icons.PinFilled,
 
     "form-template": icons.Parameter,
 

package/src/components/Icon/stories/IconButton.stories.tsx

@@ -3,7 +3,7 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { IconButton, TestIcon } from "../../../../index";
+import { IconButton, TestIcon } from "../../../components";
 
 import buttonStory from "./../../Button/Button.stories";
 import canonicalIcons from "./../canonicalIconNames";

package/src/components/Icon/stories/TestIcon.stories.tsx

@@ -3,8 +3,8 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { TestIcon } from "../../../../index";
 import { Definitions } from "../../../common/Intent";
+import { TestIcon } from "../TestIcon";
 
 export default {
     title: "Components/Icon/TestIcon",

package/src/components/Icon/transformIcon.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { CarbonIconType, CarbonIconProps } from "@carbon/react/icons";
+
+export const transform = (IconSymbol: CarbonIconType, rotate: number = 0, flipH: boolean = false, flipV: boolean = false) : CarbonIconType => {
+    return React.forwardRef((props: CarbonIconProps, ref: React.ForwardedRef<React.ReactSVGElement>) => {
+        return (
+            <IconSymbol
+                {...props}
+                ref={ref}
+                transform={
+                    `scale(${flipH ? "-1" : "1"}, ${flipV ? "-1" : "1"}) rotate(${rotate})`
+                }
+            />
+        );
+    })
+}
+

package/src/components/Label/Label.tsx

@@ -9,15 +9,15 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
     /**
      * Label text.
      */
-    text?: string | JSX.Element;
+    text?: string | React.JSX.Element;
     /**
      * Short info about label semantic, it is displayed in parentesis after the label text.
      */
-    info?: string | JSX.Element;
+    info?: string | React.JSX.Element;
     /**
      * Additional tooltip, attached to an info icon that is displayed after the info.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
     /**
      * Additonal tooltip properties, e.g. `hoverOpenDelay`.
      */

package/src/components/Link/Link.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Link } from "../../../index";
+
+export default {
+    title: "Components/Link",
+    component: Link,
+    argTypes: {
+        target: {
+            control: "select",
+            options: ["_self", "_blank", "_parent", "_top"],
+        },
+    },
+} as Meta<typeof Link>;
+
+const Template: StoryFn<typeof Link> = (args) => <Link {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: "Example link",
+    href: "https://example.com/",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    children: "Disabled link",
+    href: "https://example.com/",
+    disabled: true,
+};

package/src/components/Link/link.scss

@@ -2,16 +2,41 @@
 @include link.link;
 
 .#{$prefix}--link {
-    font-size: 1em;
-    line-height: inherit;
+    &,
+    &:hover {
+        // default case: use font size from context
+        font-size: inherit;
+        line-height: inherit;
+    }
+
+    &.#{$prefix}--link--sm {
+        &,
+        &:hover {
+            font-size: $eccgui-size-typo-caption;
+            line-height: $eccgui-size-typo-caption-lineheight;
+        }
+    }
+    &.#{$prefix}--link--md {
+        &,
+        &:hover {
+            font-size: $eccgui-size-typo-text;
+            line-height: $eccgui-size-typo-text-lineheight;
+        }
+    }
+    &.#{$prefix}--link--lg {
+        &,
+        &:hover {
+            font-size: $eccgui-size-typo-subtitle;
+            line-height: $eccgui-size-typo-subtitle-lineheight;
+        }
+    }
 
-    &:focus {
-        outline: none;
-        outline-offset: 0;
+    &:focus:not(.#{$prefix}--link--disabled) {
+        @include focus-by-pointer;
     }
 
-    &:focus-visible {
-        outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
-        outline-offset: 1px;
+    &:focus-visible:not(.#{$prefix}--link--disabled) {
+        @include focus-by-keyboard-static;
+        @include focus-by-keyboard-animation;
     }
 }

package/src/components/Menu/MenuItem.tsx

@@ -23,7 +23,7 @@ export interface MenuItemProps
     /**
      * Tooltip, but only added to the label, not to the full menu item.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 }
 
 /**

package/src/components/Menu/Stories/MenuItem.stories.tsx

@@ -3,7 +3,7 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Menu, MenuItem, TestIcon } from "../../../../index";
+import { Menu, MenuItem, TestIcon } from "../../../components";
 
 import canonicalIcons from "./../../Icon/canonicalIconNames";