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

package/src/extensions/react-flow/edges/_edges.scss

@@ -258,6 +258,7 @@ path.react-flow__edge-path-highlight {
     min-height: $reactflow-node-basesize;
     max-height: $reactflow-node-basesize * 13;
     padding: $eccgui-size-block-whitespace * 0.5;
+    overflow-y: auto;
 }
 
 // Arrows
@@ -288,6 +289,7 @@ path.react-flow__edge-path-highlight {
     width: auto;
     max-width: 20rem;
     height: 0.5 * $reactflow-node-largesize;
+    padding: 0 $eccgui-size-block-whitespace * 0.25;
     font-size: $reactflow-node-font-size;
     color: var(--#{$eccgui}-reactflow-edge-label-color, currentColor);
     background-color: var(--#{$eccgui}-reactflow-edge-label-color-background, #{$card-background-color});
@@ -330,7 +332,6 @@ path.react-flow__edge-path-highlight {
     display: inline-flex;
     flex-grow: 0;
     flex-shrink: 0;
-    margin-left: 2px;
     .#{$eccgui}-depiction__image {
         height: calc(#{0.5 * $reactflow-node-largesize} - 4px);
 
@@ -342,7 +343,7 @@ path.react-flow__edge-path-highlight {
 .#{$eccgui}-graphviz__edge-label__text {
     flex-grow: 1;
     flex-shrink: 1;
-    margin: 0 $eccgui-size-block-whitespace * 0.25;
+    margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: center;

package/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx

@@ -3,8 +3,9 @@ import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../../.storybook/helpers";
+import { EdgeLabel } from "../EdgeLabel";
 
-import { Badge, EdgeLabel, Icon, IconButton, OverflowText } from "./../../../../../index";
+import { Badge, Icon, IconButton, OverflowText } from "./../../../../components";
 import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
 
 export default {

package/src/extensions/react-flow/handles/HandleContent.tsx

@@ -1,13 +1,13 @@
-import React, { memo } from "react";
+import React, {memo} from "react";
 
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Tooltip, TooltipProps } from "../../../index";
+import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
+import Tooltip, {TooltipProps} from "../../../components/Tooltip/Tooltip";
 
 export interface HandleContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     /**
      * Tooltip displayed as overlay on hover.
      */
-    extendedTooltip?: JSX.Element | string;
+    extendedTooltip?: React.JSX.Element | string;
     /**
      * Configure the tooltip and overwrite automatically set options.
      */

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -1,15 +1,15 @@
 import React, { memo } from "react";
 import { Handle as HandleV9, HandleProps as ReactFlowHandleV9Props } from "react-flow-renderer";
-import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
+import {Intent} from "@blueprintjs/core/src/common/intent";
+import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { TooltipProps } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 import { HandleContent, HandleContentProps } from "./HandleContent";
-import {Intent} from "@blueprintjs/core/src/common/intent";
+import {TooltipProps} from "../../../components";
 
 export type HandleCategory = "configuration" | "flexible" | "fixed" | "unknown" | "dependency";
 

package/src/extensions/react-flow/handles/HandleTools.tsx

@@ -2,14 +2,14 @@ import React from "react";
 import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { ContextOverlay, TestableComponent } from "../../../index";
 
-import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+import {ContextOverlay, ContextOverlayProps} from "./../../../components/ContextOverlay/ContextOverlay";
+import {TestableComponent} from "../../../components";
 
 export interface HandleToolsProps
     extends Omit<ContextOverlayProps, "children" | "content" | "popoverClassName">,
         TestableComponent {
-    children: string | JSX.Element | JSX.Element[];
+    children: string | React.JSX.Element | React.JSX.Element[];
 }
 
 export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToolsProps) => {

package/src/extensions/react-flow/handles/_handles.scss

@@ -62,10 +62,10 @@ div.react-flow__handle {
             inset: 0;
             display: none;
             cursor: pointer;
-            content: " ";
-            border-radius: 100%;
             outline: dotted $eccgui-size-flow-handle-border currentcolor;
             outline-offset: $eccgui-size-flow-handle * 0.75 + $eccgui-size-flow-handle-border * 0.5;
+            content: " ";
+            border-radius: 100%;
 
             .react-flow__node:hover & {
                 display: block;
@@ -207,9 +207,9 @@ div.react-flow__handle-bottom {
 .#{$eccgui}-graphviz__node--hidehandles {
     & ~ .react-flow__handle:not(.connectable) {
         z-index: -1;
+        visibility: hidden;
         width: 1px;
         height: 1px;
-        visibility: hidden;
         border: none;
 
         &.react-flow__handle-top {

package/src/extensions/react-flow/markers/ReactFlowMarkers.tsx

@@ -47,7 +47,7 @@ const ReactFlowMarker = ({ className, appearance = "arrow-closed", intent, rever
             refY="0"
             orient={reverse ? "auto-start-reverse" : "auto"}
         >
-            {markerDisplay[appearance]}
+            {markerDisplay[appearance] as React.ReactNode}
         </marker>
     );
 };

package/src/extensions/react-flow/minimap/MiniMap.tsx

@@ -6,9 +6,10 @@ import {
 } from "react-flow-renderer";
 import { FlowTransform } from "react-flow-renderer/dist/types";
 
-import { miniMapUtils } from "./utils";
 import { ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
+
 import { MiniMapV12, MiniMapV12Props } from "./MiniMapV12";
+import { miniMapUtils } from "./utils";
 
 export interface MiniMapBasicProps {
     /**

package/src/extensions/react-flow/minimap/MiniMapV12.tsx

@@ -1,8 +1,8 @@
 import React, { memo } from "react";
 import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps } from "@xyflow/react";
 
-import { miniMapUtils } from "./utils";
 import { MiniMapBasicProps } from "./MiniMap";
+import { miniMapUtils } from "./utils";
 
 export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {
 }

package/src/extensions/react-flow/nodes/NodeContent.tsx

@@ -1,20 +1,21 @@
 import React from "react";
-import { Position, useStoreState as getStoreStateFlowV9 } from "react-flow-renderer";
-import { useStore as getStoreStateFlowV12 } from "@xyflow/react";
+import {Position, useStoreState as getStoreStateFlowV9} from "react-flow-renderer";
+import {useStore as getStoreStateFlowV12} from "@xyflow/react";
 import Color from "color";
-import { Resizable } from "re-resizable";
+import {NumberSize, Resizable, ResizableProps, ResizeCallback} from "re-resizable";
 
-import { intentClassName, IntentTypes } from "../../../common/Intent";
-import { DepictionProps } from "../../../components";
-import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Depiction, Icon, OverflowText } from "../../../index";
-import { ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
+import {intentClassName, IntentTypes} from "../../../common/Intent";
+import {Depiction, DepictionProps} from "../../../components";
+import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
+import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
+import {ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion} from "../versionsupport";
 
-import { HandleDefault, HandleDefaultProps } from "./../handles/HandleDefault";
-import { NodeContentExtensionProps } from "./NodeContentExtension";
-import { NodeDefaultProps } from "./NodeDefault";
-import { NodeHighlightColor } from "./sharedTypes";
+import {HandleDefault, HandleDefaultProps} from "./../handles/HandleDefault";
+import {NodeContentExtensionProps} from "./NodeContentExtension";
+import {NodeDefaultProps} from "./NodeDefault";
+import {NodeHighlightColor} from "./sharedTypes";
+import Icon from "../../../components/Icon/Icon";
+import OverflowText from "../../../components/Typography/OverflowText";
 
 /**
  * @deprecated (v26) use `HandleDefaultProps`
@@ -62,15 +63,15 @@ interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Any element that should be displayed as depiction before the node label.
      */
-    leftElement?: JSX.Element;
+    leftElement?: React.JSX.Element;
     /**
      * Label that is displayed in the node header.
      */
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * Element that is displayed as subline under the label in the header.
      */
-    labelSubline?: JSX.Element;
+    labelSubline?: React.JSX.Element;
     /**
      * Content element, displayed in the node body.
      */
@@ -386,7 +387,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
             console.error(error);
         }
     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({});
-    const nodeContentRef = React.useRef<any>();
+    const nodeContentRef = React.useRef<any>(undefined);
 
     const handleStack: Record<string, HandleDefaultProps[]> = {
         [Position.Top]: [],
@@ -735,7 +736,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
         return validatedHeight;
     };
 
-    const onResize = React.useCallback((_0, _1, _2, d) => {
+    const onResize: ResizableProps["onResize"] = React.useCallback((_0: any, _1: any, _2: any, d: NumberSize) => {
         if (nodeContentRef.current) {
             const nextWidth = resizeDirections.right
                 ? (width ?? originalSize.current.width ?? 0) + d.width
@@ -756,7 +757,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
         }
     }, [resizeDirections, originalSize, width, height])
 
-    const onResizeStop = React.useCallback((_0, _1, _2, d) => {
+    const onResizeStop: ResizeCallback = React.useCallback((_0, _1, _2, d: NumberSize) => {
         const nextWidth = validateWidth((width ?? originalSize.current.width ?? 0) + d.width);
         const nextHeight = validateHeight((height ?? originalSize.current.height ?? 0) + d.height);
         setWidth(nextWidth);

package/src/extensions/react-flow/nodes/NodeDefault.tsx

@@ -2,10 +2,10 @@ import React, { memo } from "react";
 import { NodeProps as ReactFlowNodeV9Props } from "react-flow-renderer";
 import { NodeProps as ReactFlowNodeV12Props, Position } from "@xyflow/react";
 
-import { Tooltip } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 import { NodeContent, NodeContentProps } from "./NodeContent";
+import Tooltip from "../../../components/Tooltip/Tooltip";
 
 interface NodeDefaultExtendedProps<CONTENT_PROPS = any> extends ReacFlowVersionSupportProps {
     /**

package/src/extensions/react-flow/nodes/NodeDefaultV12.tsx

@@ -1,9 +1,8 @@
 import React, { memo } from "react";
 import { NodeProps as ReactFlowNodeProps, Position } from "react-flow-renderer";
 
-import { Tooltip } from "../../../index";
-
 import { NodeContent, NodeContentProps } from "./NodeContent";
+import Tooltip from "../../../components/Tooltip/Tooltip";
 
 export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReactFlowNodeProps {
     /**

package/src/extensions/react-flow/nodes/NodeTools.tsx

@@ -1,11 +1,11 @@
-import React, { memo, useEffect, useState } from "react";
-import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
+import React, {memo, useEffect, useState} from "react";
+import {PopoverInteractionKind as BlueprintPopoverInteractionKind} from "@blueprintjs/core";
 
-import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { ContextOverlay, IconButton } from "../../../index";
+import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
+import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
 
-import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+import ContextOverlay, {ContextOverlayProps} from "./../../../components/ContextOverlay/ContextOverlay";
+import IconButton from "../../../components/Icon/IconButton";
 
 // Functions regarding the menu that can be called from the outside
 export interface NodeToolsMenuFunctions {
@@ -14,8 +14,8 @@ export interface NodeToolsMenuFunctions {
 }
 
 export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
-    children: string | JSX.Element;
-    togglerElement?: ValidIconName | JSX.Element;
+    children: string | React.JSX.Element;
+    togglerElement?: ValidIconName | React.JSX.Element;
     togglerText?: string;
     menuButtonDataTestId?: string;
     /** If defined this function will be called with the menu API object to be used externally. */

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -53,7 +53,8 @@
     border-radius: $reactflow-node-border-radius;
 
     &:hover {
-        box-shadow: 0 0 0 6 * $reactflow-node-border-width eccgui-color-rgba($reactflow-edge-stroke-color-selected, 0.05);
+        box-shadow: 0 0 0 6 * $reactflow-node-border-width
+            eccgui-color-rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
 
     &.was-resized.is-resizable-vertical {
@@ -147,8 +148,10 @@
 
 .#{$eccgui}-graphviz__node__header-depiction,
 .#{$eccgui}-graphviz__node__header-menu {
+    display: flex;
     flex-grow: 0;
     flex-shrink: 0;
+    align-items: center;
     max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
     margin: 0 $eccgui-size-block-whitespace * 0.25;
 
@@ -158,8 +161,6 @@
 }
 
 .#{$eccgui}-graphviz__node__header-depiction {
-    display: flex;
-    align-items: center;
     justify-content: center;
 
     /* TODO: does not work correctly with tooltips around

package/src/extensions/react-flow/nodes/nodeUtils.tsx

@@ -2,6 +2,7 @@ import { CSSProperties } from "react";
 import {Node as NodeV9, XYPosition as XYPositionV9} from "react-flow-renderer";
 import {Node as NodeV12, XYPosition as XYPositionV12} from "@xyflow/react";
 import Color from "color";
+
 import {NodeDimensions} from "./NodeContent";
 
 interface StickyNoteBase {

package/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx

@@ -15,9 +15,11 @@ import {
     OverflowText,
     Tag,
     TagList,
+} from "./../../../../components";
+import {
     NodeContent,
     NodeContentExtension,
-} from "./../../../../index";
+} from "./../../../../extensions";
 import {
     Default as ContentExtensionExample,
     SlideOutOfNode as ContentExtensionExampleSlideOut,

package/src/includes/carbon-components/_requisits.scss

@@ -8,11 +8,13 @@
     $use-flexbox-grid: $use-flexbox-grid
 );
 @use "~@carbon/react/scss/utilities/_visually-hidden";
-// we replicate the function here because the distinct import is not ossible via @carbon/react
+
+// we replicate the function here because the distinct import is not possible via @carbon/react
 // @import "~@carbon/styles/scss/components/ui-shell/functions";
 @function mini-units($count) {
     @return 0.5rem * $count;
 }
+
 @import "~@carbon/react/scss/feature-flags";
 @import "~@carbon/react/scss/colors";
 @import "~@carbon/react/scss/theme";

package/src/index.scss

@@ -9,6 +9,7 @@
 // == load default configuration ===============================================
 
 @import "./configuration/variables";
+@import "./configuration/customproperties"; // mirror config as custom properties
 
 // == Necessary imports from libraries =========================================
 
@@ -60,6 +61,7 @@ $prefix-carbon: $prefix;
 
 // == Load basic components styles =============================================
 
+@import "./common/scss/accessibility-defaults";
 @import "./components";
 
 // set more readable variable for prefix

package/src/test/setupTests.js

@@ -1,6 +1,6 @@
 import "regenerator-runtime/runtime";
 
-if (window.document) {
+if (typeof window !== "undefined" && window.document) {
     window.document.body.createTextRange = function () {
         return {
             setEnd: function () {},