{
/**
* Only use one single column and put property label and value below each other.
- * This property is forwardd to direct `PropertyValuePair` children.
+ * This property is forward to direct `PropertyValuePair` children.
*/
singleColumn?: boolean;
}
diff --git a/src/components/RadioButton/Stories/RadioButton.stories.tsx b/src/components/RadioButton/Stories/RadioButton.stories.tsx
index 820ad1e3b..b365690bc 100644
--- a/src/components/RadioButton/Stories/RadioButton.stories.tsx
+++ b/src/components/RadioButton/Stories/RadioButton.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
import { LoremIpsum } from "react-lorem-ipsum";
import { Meta, StoryFn } from "@storybook/react";
-import { HtmlContentBlock, RadioButton } from "../../../../index";
+import { HtmlContentBlock, RadioButton } from "../../../components";
export default {
title: "Forms/RadioButton",
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index c7e8e5697..fd5683f07 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,11 +1,13 @@
import React from "react";
-import { Classes as BlueprintClasses, InputGroupProps } from "@blueprintjs/core";
-import { Select as BlueprintSelect, SelectProps as BlueprintSelectProps } from "@blueprintjs/select";
+import {Classes as BlueprintClasses, InputGroupProps} from "@blueprintjs/core";
+import {Select as BlueprintSelect, SelectProps as BlueprintSelectProps} from "@blueprintjs/select";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { TestableComponent } from "../interfaces";
-
-import { Button, ButtonProps, ContextOverlayProps, Icon, OverflowText } from "./../../index";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+import {TestableComponent} from "../interfaces";
+import {Button, ButtonProps} from "../Button/Button";
+import {ContextOverlayProps} from "../ContextOverlay";
+import OverflowText from "../Typography/OverflowText";
+import Icon from "../Icon/Icon";
export interface SelectProps
extends TestableComponent,
diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx
index 0cb017bb7..c0160094e 100644
--- a/src/components/Skeleton/Skeleton.tsx
+++ b/src/components/Skeleton/Skeleton.tsx
@@ -6,7 +6,7 @@ export interface SkeletonProps {
/**
* Element that need to displayed using the skeleton styles.
*/
- children: JSX.Element | JSX.Element[];
+ children: React.JSX.Element | React.JSX.Element[];
}
/**
@@ -15,7 +15,7 @@ export interface SkeletonProps {
*/
export function Skeleton({ children }: SkeletonProps) {
const alteredChildren = React.Children.map(children, (child) => {
- const originalChild = child as React.ReactElement;
+ const originalChild = child;
if (originalChild.props) {
return React.cloneElement(originalChild, {
className: originalChild.props.className ? originalChild.props.className + " " + SKELETON : SKELETON,
diff --git a/src/components/Structure/TitleSubsection.tsx b/src/components/Structure/TitleSubsection.tsx
index baddb725e..b60b588ca 100644
--- a/src/components/Structure/TitleSubsection.tsx
+++ b/src/components/Structure/TitleSubsection.tsx
@@ -6,7 +6,7 @@ export interface TitleSubsectionProps extends React.HTMLAttributes
/**
* HTML tag to use for element. As default element `h3` is used for a string as children, otherwise `div`.
*/
- useHtmlElement?: keyof JSX.IntrinsicElements;
+ useHtmlElement?: keyof React.JSX.IntrinsicElements;
}
export const TitleSubsection = ({ children, className = "", useHtmlElement, ...restProps }: TitleSubsectionProps) => {
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 0f2e9b828..4e1d11729 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -50,7 +50,7 @@ export function Table({
children,
...otherCarbonTableProps
}: TableProps) {
- let colLayout: boolean | JSX.Element = false;
+ let colLayout: boolean | React.JSX.Element = false;
if (!!columnWidths && columnWidths.length > 0) {
colLayout = (
diff --git a/src/components/Table/TableContainer.tsx b/src/components/Table/TableContainer.tsx
index 8e91322c1..aadc4ecfb 100644
--- a/src/components/Table/TableContainer.tsx
+++ b/src/components/Table/TableContainer.tsx
@@ -19,14 +19,14 @@ export interface TableDataContainerProps
>,
"size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
>,
- React.TableHTMLAttributes {
- children(signature: any): JSX.Element;
+ Omit, "children"> {
+ children(signature: any): React.JSX.Element;
size?: TableProps["size"];
}
export interface TableSimpleContainerProps
extends Omit,
React.HTMLAttributes {
- children?: JSX.Element;
+ children?: React.JSX.Element;
}
export type TableContainerProps = TableDataContainerProps | TableSimpleContainerProps;
@@ -46,7 +46,7 @@ export function TableContainer({ className = "", ...otherProps }: TableContainer
/>
) : (
-
+
);
}
diff --git a/src/components/Table/TableExpandRow.tsx b/src/components/Table/TableExpandRow.tsx
index 97c02f75f..07d518630 100644
--- a/src/components/Table/TableExpandRow.tsx
+++ b/src/components/Table/TableExpandRow.tsx
@@ -6,7 +6,7 @@ import { usePrefix as carbonPrefix } from "@carbon/react";
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
import IconButton from "./../Icon/IconButton";
-import { TableCell } from "./index";
+import TableCell from "./TableCell";
// workaround to get type/interface
type CarbonTableExpandRowProps = React.ComponentProps;
diff --git a/src/components/Tabs/TabTitle.tsx b/src/components/Tabs/TabTitle.tsx
index 2088ec587..d1583c8d3 100644
--- a/src/components/Tabs/TabTitle.tsx
+++ b/src/components/Tabs/TabTitle.tsx
@@ -29,7 +29,7 @@ export interface TabTitleProps {
/**
* Add a tooltip to a tab, displayed when user hoveres over it.
*/
- tooltip?: string | JSX.Element;
+ tooltip?: string | React.JSX.Element;
/**
* Make the tab not usable, display is also narrowed.
*/
diff --git a/src/components/Tag/stories/Tag.stories.tsx b/src/components/Tag/stories/Tag.stories.tsx
index 423757ae1..6373fa2b7 100644
--- a/src/components/Tag/stories/Tag.stories.tsx
+++ b/src/components/Tag/stories/Tag.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
import { helpersArgTypes } from "../../../../.storybook/helpers";
-import { Tag } from "./../../../../index";
+import { Tag } from "./../../../components";
export default {
title: "Components/Tag",
diff --git a/src/components/Tag/stories/TagList.stories.tsx b/src/components/Tag/stories/TagList.stories.tsx
index 27221c360..93fdc16d8 100644
--- a/src/components/Tag/stories/TagList.stories.tsx
+++ b/src/components/Tag/stories/TagList.stories.tsx
@@ -1,7 +1,7 @@
import React from "react";
import { Meta, StoryFn } from "@storybook/react";
-import { Tag, TagList } from "./../../../../index";
+import { Tag, TagList } from "./../../../components";
export default {
title: "Components/Tag",
diff --git a/src/components/TextField/TextArea.tsx b/src/components/TextField/TextArea.tsx
index 52c463ca0..f7fcd7c66 100644
--- a/src/components/TextField/TextArea.tsx
+++ b/src/components/TextField/TextArea.tsx
@@ -32,7 +32,7 @@ export interface TextAreaProps extends Omit {
* Element to render on right side of text area. Should be not too large.
* This will update right padding on the text area.
*/
- rightElement?: JSX.Element;
+ rightElement?: React.JSX.Element;
/**
* Add HTML properties to the wrapper element.
* The element wraps `TextArea` in case of a given `wrapperDivProps`, `leftIcon` or `rightElement` property.
diff --git a/src/components/TextField/stories/TextArea.stories.tsx b/src/components/TextField/stories/TextArea.stories.tsx
index 24bfd90ad..7f3cfcdfc 100644
--- a/src/components/TextField/stories/TextArea.stories.tsx
+++ b/src/components/TextField/stories/TextArea.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
import { helpersArgTypes } from "../../../../.storybook/helpers";
-import { Button, IconButton, TextArea } from "./../../../../index";
+import { Button, IconButton, TextArea } from "./../../../components";
type TextAreaType = typeof TextArea;
export default {
diff --git a/src/components/TextField/stories/TextField.stories.tsx b/src/components/TextField/stories/TextField.stories.tsx
index aa2da8bef..6a625a9e9 100644
--- a/src/components/TextField/stories/TextField.stories.tsx
+++ b/src/components/TextField/stories/TextField.stories.tsx
@@ -3,9 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
import { helpersArgTypes } from "../../../../.storybook/helpers";
import characters from "../../../common/utils/characters";
-import { TextFieldProps } from "../TextField";
-
-import { TextField } from "./../../../../index";
+import { TextField, TextFieldProps } from "../TextField";
export default {
title: "Forms/TextField",
diff --git a/src/components/TextReducer/TextReducer.stories.tsx b/src/components/TextReducer/TextReducer.stories.tsx
index 48aa04684..6280afcca 100644
--- a/src/components/TextReducer/TextReducer.stories.tsx
+++ b/src/components/TextReducer/TextReducer.stories.tsx
@@ -2,7 +2,10 @@ import React from "react";
import { LoremIpsum } from "react-lorem-ipsum";
import { Meta, StoryFn } from "@storybook/react";
-import { HtmlContentBlock, Markdown, TextReducer } from "../../../index";
+import { Markdown } from "../../cmem/markdown/Markdown";
+import { HtmlContentBlock } from "../Typography";
+
+import { TextReducer } from "./TextReducer";
export default {
title: "Components/TextReducer",
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 66f4fc9a2..10e02dd1a 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -127,7 +127,7 @@ export const Tooltip = ({
return () => {};
}, [!!placeholderRef.current]);
- const refocus = React.useCallback((node) => {
+ const refocus = React.useCallback((node:any) => {
if (eventMemory.current && node) {
// we do not have a `targetRef` here, so we need to workaround it
// const target = node.targetRef.current.children[0];
diff --git a/src/components/Typography/typography.scss b/src/components/Typography/typography.scss
index 64cfaf62b..958eb7642 100644
--- a/src/components/Typography/typography.scss
+++ b/src/components/Typography/typography.scss
@@ -74,12 +74,14 @@ mark {
line-height: $eccgui-size-typo-text-lineheight;
}
-.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small {
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small,
+.#{$eccgui}-typography--small {
font-size: $eccgui-size-typo-caption;
line-height: $eccgui-size-typo-caption-lineheight;
}
-.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large {
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large,
+.#{$eccgui}-typography--large {
font-size: $eccgui-size-typo-subtitle;
line-height: $eccgui-size-typo-subtitle-lineheight;
}
diff --git a/src/components/VisualTour/VisualTour.tsx b/src/components/VisualTour/VisualTour.tsx
index 04b85f778..59537eebc 100644
--- a/src/components/VisualTour/VisualTour.tsx
+++ b/src/components/VisualTour/VisualTour.tsx
@@ -70,10 +70,6 @@ export const VisualTour = ({
usableStepTarget = false,
isOpen = false,
}: VisualTourProps) => {
- if (isOpen === false) {
- return null;
- }
-
const [currentStepIndex, setCurrentStepIndex] = React.useState(0);
const [currentStepComponent, setCurrentStepComponent] = React.useState(null);
@@ -234,7 +230,11 @@ export const VisualTour = ({
};
}, [currentStepIndex, usableStepTarget]);
- return currentStepComponent;
+ if (isOpen === false) {
+ return null;
+ } else {
+ return currentStepComponent;
+ }
};
interface StepModalProps {
diff --git a/src/components/index.ts b/src/components/index.ts
index 372973482..e4cd3125d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,6 +25,7 @@ export * from "./Link/Link";
export * from "./List/List";
export * from "./Menu";
export * from "./MultiSuggestField";
+export * from "./NotAvailable/NotAvailable";
export * from "./Notification";
export * from "./OverviewItem";
export * from "./Pagination/Pagination";
diff --git a/src/extensions/codemirror/CodeMirror.tsx b/src/extensions/codemirror/CodeMirror.tsx
index 0e58642f9..d70ef4a61 100644
--- a/src/extensions/codemirror/CodeMirror.tsx
+++ b/src/extensions/codemirror/CodeMirror.tsx
@@ -251,7 +251,7 @@ export const CodeEditor = ({
preventLineNumbers: preventLineNumbers ?? defaultAppearanceForModeWithToolbar?.preventLineNumbers ?? false,
}
)
- const currentView = React.useRef()
+ const currentView = React.useRef(undefined)
currentView.current = view
const currentReadOnly = React.useRef(readOnly)
currentReadOnly.current = readOnly
@@ -506,7 +506,7 @@ export const CodeEditor = ({
const hasToolbarSupport = mode && ModeToolbarSupport.indexOf(mode) > -1 && useToolbar;
- const editorToolbar = (mode?: SupportedCodeEditorModes): JSX.Element => {
+ const editorToolbar = (mode?: SupportedCodeEditorModes): React.JSX.Element => {
switch (mode) {
case "markdown":
return (
diff --git a/src/extensions/react-flow/edges/EdgeLabel.tsx b/src/extensions/react-flow/edges/EdgeLabel.tsx
index 5ebed73ac..31c4fd93b 100644
--- a/src/extensions/react-flow/edges/EdgeLabel.tsx
+++ b/src/extensions/react-flow/edges/EdgeLabel.tsx
@@ -1,9 +1,11 @@
-import React, { memo } from "react";
+import React, {memo} from "react";
-import { intentClassName, IntentTypes } from "../../../common/Intent";
-import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Depiction, DepictionProps, Icon, OverflowText } from "../../../index";
+import {intentClassName, IntentTypes} from "../../../common/Intent";
+import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
+import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
+import {Depiction, DepictionProps} from "../../../components/Depiction/Depiction";
+import Icon from "../../../components/Icon/Icon";
+import OverflowText from "../../../components/Typography/OverflowText";
export interface EdgeLabelProps extends React.HTMLAttributes {
/**
@@ -14,11 +16,11 @@ export interface EdgeLabelProps extends React.HTMLAttributes {
* Label of the edge.
* Cannot overflow the parent container.
*/
- text: string | JSX.Element;
+ text: string | React.JSX.Element;
/**
* One or multiple other elements displayed right from label.
*/
- actions?: JSX.Element | JSX.Element[];
+ actions?: React.JSX.Element | React.JSX.Element[];
/**
* The element is increased in its size.
*/
@@ -111,7 +113,7 @@ export interface EdgeLabelObjectProps extends React.SVGAttributes {
const containerCallback = React.useCallback(
- (containerRef) => {
+ (containerRef: SVGForeignObjectElement | null) => {
if (containerRef) labelSize(containerRef);
},
[edgeCenter]
diff --git a/src/extensions/react-flow/edges/EdgeNew.tsx b/src/extensions/react-flow/edges/EdgeNew.tsx
index d0096e9c9..15216890c 100644
--- a/src/extensions/react-flow/edges/EdgeNew.tsx
+++ b/src/extensions/react-flow/edges/EdgeNew.tsx
@@ -1,12 +1,11 @@
import React from "react";
-import {
- ConnectionLineComponentProps,
- ConnectionLineType,
-} from "@xyflow/react";
+import {ConnectionLineComponentProps, ConnectionLineType,} from "@xyflow/react";
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-
-import { EdgeBezier, EdgeDefaultV12Props,EdgeStep, EdgeStraight } from "./../index";
+import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
+import {EdgeStep} from "./EdgeStep";
+import {EdgeStraight} from "./EdgeStraight";
+import {EdgeBezier} from "./EdgeBezier";
+import {EdgeDefaultV12Props} from "./EdgeDefaultV12";
export const EdgeNew = (edgeNewProps: ConnectionLineComponentProps) => {
diff --git a/src/extensions/react-flow/edges/EdgeTools.tsx b/src/extensions/react-flow/edges/EdgeTools.tsx
index f5544a887..b8583a33c 100644
--- a/src/extensions/react-flow/edges/EdgeTools.tsx
+++ b/src/extensions/react-flow/edges/EdgeTools.tsx
@@ -1,10 +1,9 @@
-import React, { memo } from "react";
-import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
+import React, {memo} from "react";
+import {PopoverInteractionKind as BlueprintPopoverInteractionKind} from "@blueprintjs/core";
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { ContextOverlay } from "../../../index";
+import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
-import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
+import {ContextOverlay, ContextOverlayProps} from "./../../../components/ContextOverlay/ContextOverlay";
interface PosOffset {
left: number;
@@ -13,7 +12,7 @@ interface PosOffset {
export interface EdgeToolsProps extends Omit {
posOffset: PosOffset;
- children: string | JSX.Element | JSX.Element[];
+ children: string | React.JSX.Element | React.JSX.Element[];
}
export const EdgeTools = memo(({ posOffset, children, ...otherProps }: EdgeToolsProps) => {
diff --git a/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx b/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx
index cbe771cbf..839853df7 100644
--- a/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx
+++ b/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 {
diff --git a/src/extensions/react-flow/handles/HandleContent.tsx b/src/extensions/react-flow/handles/HandleContent.tsx
index f18f3cf3b..12ff14ed0 100644
--- a/src/extensions/react-flow/handles/HandleContent.tsx
+++ b/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, "className"> {
/**
* Tooltip displayed as overlay on hover.
*/
- extendedTooltip?: JSX.Element | string;
+ extendedTooltip?: React.JSX.Element | string;
/**
* Configure the tooltip and overwrite automatically set options.
*/
diff --git a/src/extensions/react-flow/handles/HandleDefault.tsx b/src/extensions/react-flow/handles/HandleDefault.tsx
index 0f2a492db..dfebfea63 100644
--- a/src/extensions/react-flow/handles/HandleDefault.tsx
+++ b/src/extensions/react-flow/handles/HandleDefault.tsx
@@ -6,10 +6,10 @@ import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xy
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 {TooltipProps} from "../../../components";
export type HandleCategory = "configuration" | "flexible" | "fixed" | "unknown" | "dependency";
diff --git a/src/extensions/react-flow/handles/HandleTools.tsx b/src/extensions/react-flow/handles/HandleTools.tsx
index bbf336e60..37916438d 100644
--- a/src/extensions/react-flow/handles/HandleTools.tsx
+++ b/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,
TestableComponent {
- children: string | JSX.Element | JSX.Element[];
+ children: string | React.JSX.Element | React.JSX.Element[];
}
export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToolsProps) => {
diff --git a/src/extensions/react-flow/markers/ReactFlowMarkers.tsx b/src/extensions/react-flow/markers/ReactFlowMarkers.tsx
index 2f99a0c08..82cdd1137 100644
--- a/src/extensions/react-flow/markers/ReactFlowMarkers.tsx
+++ b/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}
);
};
diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx
index ea7201808..74fc881e9 100644
--- a/src/extensions/react-flow/nodes/NodeContent.tsx
+++ b/src/extensions/react-flow/nodes/NodeContent.tsx
@@ -1,20 +1,22 @@
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 { 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 { HandleDefault, HandleDefaultProps } from "./../handles/HandleDefault";
-import { NodeContentExtensionProps } from "./NodeContentExtension";
-import { NodeDefaultProps } from "./NodeDefault";
-import { NodeHighlightColor } from "./sharedTypes";
+import {NumberSize, Resizable, ResizableProps, ResizeCallback} from "re-resizable";
+
+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 Icon from "../../../components/Icon/Icon";
+import OverflowText from "../../../components/Typography/OverflowText";
+import {Direction} from "re-resizable/lib/resizer";
/**
* @deprecated (v26) use `HandleDefaultProps`
@@ -62,15 +64,15 @@ interface NodeContentData {
/**
* 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 +388,7 @@ export function NodeContent>({
console.error(error);
}
const [adjustedContentProps, setAdjustedContentProps] = React.useState>({});
- const nodeContentRef = React.useRef();
+ const nodeContentRef = React.useRef(undefined);
const handleStack: Record = {
[Position.Top]: [],
@@ -735,7 +737,7 @@ export function NodeContent>({
return validatedHeight;
};
- const onResize = React.useCallback((_0, _1, _2, d) => {
+ const onResize: ResizableProps["onResize"] = React.useCallback((_0, _1, _2, d) => {
if (nodeContentRef.current) {
const nextWidth = resizeDirections.right
? (width ?? originalSize.current.width ?? 0) + d.width
@@ -756,7 +758,7 @@ export function NodeContent>({
}
}, [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);
diff --git a/src/extensions/react-flow/nodes/NodeDefault.tsx b/src/extensions/react-flow/nodes/NodeDefault.tsx
index 5b81a076e..654dc8a39 100644
--- a/src/extensions/react-flow/nodes/NodeDefault.tsx
+++ b/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 extends ReacFlowVersionSupportProps {
/**
diff --git a/src/extensions/react-flow/nodes/NodeDefaultV12.tsx b/src/extensions/react-flow/nodes/NodeDefaultV12.tsx
index b91269944..50209bcba 100644
--- a/src/extensions/react-flow/nodes/NodeDefaultV12.tsx
+++ b/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 extends ReactFlowNodeProps {
/**
diff --git a/src/extensions/react-flow/nodes/NodeTools.tsx b/src/extensions/react-flow/nodes/NodeTools.tsx
index 6db7cdbaf..4852ea8cf 100644
--- a/src/extensions/react-flow/nodes/NodeTools.tsx
+++ b/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 {
- 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. */
diff --git a/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx b/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx
index 1e591088a..865a97669 100644
--- a/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx
+++ b/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx
@@ -12,12 +12,14 @@ import {
HtmlContentBlock,
IconButton,
MenuItem,
- NodeContent,
- NodeContentExtension,
OverflowText,
Tag,
TagList,
-} from "./../../../../index";
+} from "./../../../../components";
+import {
+ NodeContent,
+ NodeContentExtension,
+} from "./../../../../extensions";
import {
Default as ContentExtensionExample,
SlideOutOfNode as ContentExtensionExampleSlideOut,
diff --git a/src/test/setupTests.js b/src/test/setupTests.js
index 192736502..ee1400ec4 100644
--- a/src/test/setupTests.js
+++ b/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 () {},
diff --git a/yarn.lock b/yarn.lock
index 603ad5e5f..b527de742 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3667,10 +3667,10 @@
lz-string "^1.5.0"
pretty-format "^27.0.2"
-"@testing-library/dom@^8.0.0":
- version "8.20.1"
- resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f"
- integrity sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==
+"@testing-library/dom@^9.0.0":
+ version "9.3.4"
+ resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.4.tgz#50696ec28376926fec0a1bf87d9dbac5e27f60ce"
+ integrity sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==
dependencies:
"@babel/code-frame" "^7.10.4"
"@babel/runtime" "^7.12.5"
@@ -3706,14 +3706,14 @@
picocolors "^1.1.1"
redent "^3.0.0"
-"@testing-library/react@^12.1.5":
- version "12.1.5"
- resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b"
- integrity sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==
+"@testing-library/react@^14.3.1":
+ version "14.3.1"
+ resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-14.3.1.tgz#29513fc3770d6fb75245c4e1245c470e4ffdd830"
+ integrity sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==
dependencies:
"@babel/runtime" "^7.12.5"
- "@testing-library/dom" "^8.0.0"
- "@types/react-dom" "<18.0.0"
+ "@testing-library/dom" "^9.0.0"
+ "@types/react-dom" "^18.0.0"
"@testing-library/user-event@14.5.2":
version "14.5.2"
@@ -4020,10 +4020,10 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.14.tgz#1433419d73b2a7ebfc6918dcefd2ec0d5cd698f2"
integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
-"@types/react-dom@<18.0.0":
- version "17.0.26"
- resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.26.tgz#fa7891ba70fd39ddbaa7e85b6ff9175bb546bc1b"
- integrity sha512-Z+2VcYXJwOqQ79HreLU/1fyQ88eXSSFh6I3JdrEHQIfYSI0kCQpTGvOrbE6jFGGYXKsHuwY9tBa/w5Uo6KzrEg==
+"@types/react-dom@^18.0.0":
+ version "18.3.7"
+ resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.7.tgz#b89ddf2cd83b4feafcc4e2ea41afdfb95a0d194f"
+ integrity sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==
"@types/react-is@^19.2.0":
version "19.2.0"
@@ -4049,13 +4049,12 @@
dependencies:
"@types/react" "*"
-"@types/react@*", "@types/react@^17.0.90":
- version "17.0.90"
- resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.90.tgz#38b72ea265c7ea369cf2998b406f850f6f665825"
- integrity sha512-P9beVR/x06U9rCJzSxtENnOr4BrbJ6VrsrDTc+73TtHv9XHhryXKbjGRB+6oooB2r0G/pQkD/S4dHo/7jUfwFw==
+"@types/react@*", "@types/react@^18.2.0":
+ version "18.3.28"
+ resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.28.tgz#0a85b1a7243b4258d9f626f43797ba18eb5f8781"
+ integrity sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==
dependencies:
"@types/prop-types" "*"
- "@types/scheduler" "^0.16"
csstype "^3.2.2"
"@types/resolve@^1.20.2":
@@ -4063,11 +4062,6 @@
resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.6.tgz#e6e60dad29c2c8c206c026e6dd8d6d1bdda850b8"
integrity sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==
-"@types/scheduler@^0.16":
- version "0.16.8"
- resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
- integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
-
"@types/semver@^7.3.4":
version "7.7.0"
resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.7.0.tgz#64c441bdae033b378b6eef7d0c3d77c329b9378e"
@@ -8278,6 +8272,11 @@ jest-environment-node@30.2.0:
jest-util "30.2.0"
jest-validate "30.2.0"
+jest-fixed-jsdom@^0.0.11:
+ version "0.0.11"
+ resolved "https://registry.yarnpkg.com/jest-fixed-jsdom/-/jest-fixed-jsdom-0.0.11.tgz#67b5d5c4e9821bfb1e09a43139bfb0b9f4ec4f18"
+ integrity sha512-3UkjgM79APnmLVDnelrxdwz4oybD5qw6NLyayl7iCX8C8tJHeqjL9fmNrRlIrNiVJSXkF5t9ZPJ+xlM0kSwwYg==
+
jest-haste-map@30.2.0:
version "30.2.0"
resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-30.2.0.tgz#808e3889f288603ac70ff0ac047598345a66022e"
@@ -10499,16 +10498,6 @@ react-docgen@^7.0.0:
resolve "^1.22.1"
strip-indent "^4.0.0"
-react-dom@^16.14.0:
- version "16.14.0"
- resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
- integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
- dependencies:
- loose-envify "^1.1.0"
- object-assign "^4.1.1"
- prop-types "^15.6.2"
- scheduler "^0.19.1"
-
"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
version "19.1.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.1.0.tgz#133558deca37fa1d682708df8904b25186793623"
@@ -10516,6 +10505,14 @@ react-dom@^16.14.0:
dependencies:
scheduler "^0.26.0"
+react-dom@^18.2.0:
+ version "18.3.1"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+ integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
+ dependencies:
+ loose-envify "^1.1.0"
+ scheduler "^0.23.2"
+
react-draggable@^4.4.4:
version "4.4.6"
resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e"
@@ -10647,20 +10644,18 @@ react-uid@^2.3.3:
dependencies:
tslib "^2.0.0"
-react@^16.13.1:
- version "16.14.0"
- resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
- integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
- dependencies:
- loose-envify "^1.1.0"
- object-assign "^4.1.1"
- prop-types "^15.6.2"
-
"react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
version "19.1.0"
resolved "https://registry.yarnpkg.com/react/-/react-19.1.0.tgz#926864b6c48da7627f004795d6cce50e90793b75"
integrity sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==
+react@^18.2.0:
+ version "18.3.1"
+ resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+ integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
+ dependencies:
+ loose-envify "^1.1.0"
+
readable-stream@1.1:
version "1.1.13"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e"
@@ -11109,13 +11104,12 @@ saxes@^6.0.0:
dependencies:
xmlchars "^2.2.0"
-scheduler@^0.19.1:
- version "0.19.1"
- resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
- integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.23.2:
+ version "0.23.2"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+ integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
dependencies:
loose-envify "^1.1.0"
- object-assign "^4.1.1"
scheduler@^0.26.0:
version "0.26.0"