From ad360d9a5ccf3d6bb315c23401734377005e00b0 Mon Sep 17 00:00:00 2001 From: arausly Date: Tue, 30 Sep 2025 08:39:19 +0100 Subject: [PATCH 1/4] adapted for react 18 --- package.json | 6 +++--- src/cmem/ActivityControl/ActivityControlWidget.tsx | 10 +++++----- .../ActivityExecutionErrorReportModal.tsx | 2 +- src/cmem/ActivityControl/SilkActivityControl.tsx | 8 ++++---- .../StringPreviewContentBlobToggler.tsx | 2 +- src/cmem/react-flow/configuration/graph.ts | 5 ++--- src/cmem/react-flow/configuration/linking.ts | 5 ++--- src/cmem/react-flow/configuration/workflow.ts | 5 ++--- src/components/Accordion/AccordionItem.tsx | 2 +- .../Application/ApplicationSidebarNavigation.tsx | 8 ++++++-- src/components/Application/ApplicationTitle.tsx | 8 +++++++- src/components/AutoSuggestion/AutoSuggestion.tsx | 6 +++--- src/components/AutoSuggestion/AutoSuggestionList.tsx | 2 +- src/components/AutocompleteField/AutoCompleteField.tsx | 4 ++-- .../AutocompleteField/autoCompleteFieldUtils.tsx | 2 +- src/components/Button/Button.tsx | 6 +++--- src/components/Card/CardHeader.tsx | 2 +- src/components/ContentGroup/ContentGroup.tsx | 5 +++-- src/components/ContextOverlay/ContextMenu.tsx | 4 ++-- src/components/ContextOverlay/ContextOverlay.tsx | 2 +- src/components/Depiction/Depiction.tsx | 2 +- src/components/Dialog/Modal.tsx | 2 +- src/components/Dialog/SimpleDialog.tsx | 2 +- src/components/Form/FieldItem.tsx | 2 +- src/components/Form/FieldSet.tsx | 6 +++--- src/components/HoverToggler/HoverToggler.tsx | 4 ++-- src/components/Label/Label.tsx | 6 +++--- src/components/Menu/MenuItem.tsx | 2 +- src/components/Notification/Notification.tsx | 6 +++--- src/components/OverviewItem/OverviewItemActions.tsx | 2 +- src/components/OverviewItem/OverviewItemDepiction.tsx | 2 +- src/components/PropertyValuePair/PropertyValueList.tsx | 2 +- src/components/PropertyValuePair/PropertyValuePair.tsx | 2 +- src/components/Skeleton/Skeleton.tsx | 4 ++-- src/components/Structure/TitleSubsection.tsx | 2 +- src/components/Table/Table.tsx | 2 +- src/components/Table/TableContainer.tsx | 10 +++++----- src/components/Tabs/TabTitle.tsx | 2 +- src/components/TextField/TextArea.tsx | 2 +- src/extensions/codemirror/CodeMirror.tsx | 4 ++-- src/extensions/react-flow/edges/EdgeLabel.tsx | 4 ++-- src/extensions/react-flow/edges/EdgeTools.tsx | 2 +- src/extensions/react-flow/handles/HandleContent.tsx | 2 +- src/extensions/react-flow/handles/HandleTools.tsx | 2 +- src/extensions/react-flow/markers/ReactFlowMarkers.tsx | 2 +- src/extensions/react-flow/nodes/NodeContent.tsx | 8 ++++---- src/extensions/react-flow/nodes/NodeTools.tsx | 4 ++-- src/legacy-replacements/Tabs/Tabs.tsx | 2 +- 48 files changed, 97 insertions(+), 89 deletions(-) diff --git a/package.json b/package.json index 1cf8d2388..36e2dbe6f 100644 --- a/package.json +++ b/package.json @@ -91,8 +91,8 @@ "lodash": "^4.17.21", "n3": "^1.25.1", "re-resizable": "^6.10.3", - "react": "^16.13.1", - "react-dom": "^16.13.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-flow-renderer": "9.7.4", "react-inlinesvg": "^3.0.3", "react-markdown": "^10.1.0", @@ -178,7 +178,7 @@ "react-dom": ">=16" }, "resolutions": { - "**/@types/react": "^17.0.85", + "**/@types/react": "^18.2.0", "node-sass-package-importer/**/postcss": "^8.4.49", "string-width": "^4.2.3", "wrap-ansi": "^7.0.0", diff --git a/src/cmem/ActivityControl/ActivityControlWidget.tsx b/src/cmem/ActivityControl/ActivityControlWidget.tsx index efda5060f..69d893652 100644 --- a/src/cmem/ActivityControl/ActivityControlWidget.tsx +++ b/src/cmem/ActivityControl/ActivityControlWidget.tsx @@ -27,16 +27,16 @@ export interface ActivityControlWidgetProps extends TestableComponent { /** * The label to be shown */ - label?: string | JSX.Element; + label?: string | React.JSX.Element; /** * Element that wraps around the label. * Default: `` */ - labelWrapper?: JSX.Element; + labelWrapper?: React.JSX.Element; /** * To add tags in addition to the widget status description */ - tags?: JSX.Element; + tags?: React.JSX.Element; /** * The progress bar parameters if it should be show by a progres bar */ @@ -80,7 +80,7 @@ export interface ActivityControlWidgetProps extends TestableComponent { /** * execution timer messages for waiting and running times. */ - timerExecutionMsg?: JSX.Element | null; + timerExecutionMsg?: React.JSX.Element | null; /** * additional actions that can serve as a complex component, positioned between the default actions and the context menu */ @@ -146,7 +146,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) { keepColors > {progressSpinnerFinishedIcon ? ( - React.cloneElement(progressSpinnerFinishedIcon as JSX.Element, { small, large: !small }) + React.cloneElement(progressSpinnerFinishedIcon as React.JSX.Element, { small, large: !small }) ) : ( any; // The error report - report: JSX.Element; + report: React.JSX.Element; // Value of the download button downloadButtonValue: string; // Value of the close button diff --git a/src/cmem/ActivityControl/SilkActivityControl.tsx b/src/cmem/ActivityControl/SilkActivityControl.tsx index 284d86a09..c465c4130 100644 --- a/src/cmem/ActivityControl/SilkActivityControl.tsx +++ b/src/cmem/ActivityControl/SilkActivityControl.tsx @@ -15,11 +15,11 @@ const progressBreakpointAnimation = 99; export interface SilkActivityControlProps extends TestableComponent { // The label of this activity - label: string | JSX.Element; + label: string | React.JSX.Element; /** * To add tags in addition to the widget status description */ - tags?: JSX.Element; + tags?: React.JSX.Element; // Initial state initialStatus?: SilkActivityStatusProps; // Register a function in order to receive callbacks @@ -80,7 +80,7 @@ export interface SilkActivityControlLayoutProps { // what type of progrss display should be uses, horizontal progress bar, circular spinner, or none of that visualization?: "none" | "progressbar" | "spinner"; // wrapper around label - labelWrapper?: JSX.Element; + labelWrapper?: React.JSX.Element; } const defaultLayout: SilkActivityControlLayoutProps = { @@ -94,7 +94,7 @@ interface IErrorReportAction { // The title of the error report modal title?: string; // The element that will be rendered in the modal, either as Markdown or object - renderReport: (report: string | SilkActivityExecutionReportProps) => JSX.Element; + renderReport: (report: string | SilkActivityExecutionReportProps) => React.JSX.Element; // What version of the report should be handed to the renderReport function, if false SilkActivityExecutionReportProps, if true the Markdown string renderMarkdown: boolean; // The function to fetch the error report. It returns undefined if something went wrong. diff --git a/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx b/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx index f9c081265..77c820046 100644 --- a/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx +++ b/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx @@ -21,7 +21,7 @@ export interface StringPreviewContentBlobTogglerProps /** Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary. * This allows to add non-string elements to both the full-view content and the pure string content. */ - noTogglerContentSuffix?: JSX.Element; + noTogglerContentSuffix?: React.JSX.Element; } /** Version of the content toggler for text only content. */ diff --git a/src/cmem/react-flow/configuration/graph.ts b/src/cmem/react-flow/configuration/graph.ts index e7abf6028..73489798d 100644 --- a/src/cmem/react-flow/configuration/graph.ts +++ b/src/cmem/react-flow/configuration/graph.ts @@ -1,8 +1,7 @@ +import { NodeProps } from "react-flow-renderer"; import { EdgeBezier } from "./../../../extensions/react-flow/edges/EdgeBezier"; import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault"; import { GRAPH_NODE_TYPES } from "./typing"; -//import {ComponentType} from "react"; -//import {NodeProps} from "react-flow-renderer-lts"; const edgeTypes = { default: EdgeBezier, @@ -16,7 +15,7 @@ const edgeTypes = { danger: EdgeBezier, }; -const nodeTypes: Record*/> = { +const nodeTypes: Record> = { default: NodeDefault, graph: NodeDefault, class: NodeDefault, diff --git a/src/cmem/react-flow/configuration/linking.ts b/src/cmem/react-flow/configuration/linking.ts index 4a8326a78..f7bd55d74 100644 --- a/src/cmem/react-flow/configuration/linking.ts +++ b/src/cmem/react-flow/configuration/linking.ts @@ -2,8 +2,7 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep"; import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault"; import { StickyNoteNode } from "./../nodes/StickyNoteNode"; import { LINKING_NODE_TYPES } from "./typing"; -//import {ComponentType} from "react"; -//import {NodeProps} from "react-flow-renderer-lts"; +import {NodeProps} from "react-flow-renderer"; const edgeTypes = { default: EdgeStep, @@ -14,7 +13,7 @@ const edgeTypes = { danger: EdgeStep, }; -const nodeTypes: Record*/> = { +const nodeTypes: Record /*& ComponentType*/> = { default: NodeDefault, sourcepath: NodeDefault, targetpath: NodeDefault, diff --git a/src/cmem/react-flow/configuration/workflow.ts b/src/cmem/react-flow/configuration/workflow.ts index 5a8621a89..508e64076 100644 --- a/src/cmem/react-flow/configuration/workflow.ts +++ b/src/cmem/react-flow/configuration/workflow.ts @@ -2,8 +2,7 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep"; import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault"; import { StickyNoteNode } from "./../nodes/StickyNoteNode"; import { WORKFLOW_NODE_TYPES } from "./typing"; -//import {ComponentType} from "react"; -//import {NodeProps} from "react-flow-renderer-lts"; +import {NodeProps} from "react-flow-renderer"; const edgeTypes = { default: EdgeStep, @@ -12,7 +11,7 @@ const edgeTypes = { danger: EdgeStep, }; -const nodeTypes: Record*/> = { +const nodeTypes: Record> = { default: NodeDefault, dataset: NodeDefault, linking: NodeDefault, diff --git a/src/components/Accordion/AccordionItem.tsx b/src/components/Accordion/AccordionItem.tsx index 1c3b18a11..c63d6c6d7 100644 --- a/src/components/Accordion/AccordionItem.tsx +++ b/src/components/Accordion/AccordionItem.tsx @@ -18,7 +18,7 @@ export interface AccordionItemProps /** * header of accordion item */ - label: string | JSX.Element; + label: string | React.JSX.Element; /** * use full available width for content */ diff --git a/src/components/Application/ApplicationSidebarNavigation.tsx b/src/components/Application/ApplicationSidebarNavigation.tsx index c4c5e977d..0116eadf4 100644 --- a/src/components/Application/ApplicationSidebarNavigation.tsx +++ b/src/components/Application/ApplicationSidebarNavigation.tsx @@ -4,14 +4,18 @@ import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "@c import { CLASSPREFIX as eccgui } from "../../configuration/constants"; export interface ApplicationSidebarNavigationProps - extends Omit, - React.HTMLAttributes {} + extends Omit { + children: React.ReactNode; + className?: string; + onToggle?: any //todo change later + } export const ApplicationSidebarNavigation = ({ children, className = "", ...otherCarbonSideNavProps }: ApplicationSidebarNavigationProps) => { + return ( {!!depiction && ( <> - {depiction} + + {React.isValidElement(depiction) + ? depiction + : depiction instanceof HTMLElement + ? <>{depiction.outerHTML} + : depiction} + )} {!!prefix && ( diff --git a/src/components/AutoSuggestion/AutoSuggestion.tsx b/src/components/AutoSuggestion/AutoSuggestion.tsx index 3649db899..c5b591593 100644 --- a/src/components/AutoSuggestion/AutoSuggestion.tsx +++ b/src/components/AutoSuggestion/AutoSuggestion.tsx @@ -142,10 +142,10 @@ export interface AutoSuggestionProps { */ useTabForCompletions?: boolean; /** An additional element that is put to the left side of the input field */ - leftElement?: JSX.Element | null; + leftElement?: React.JSX.Element | null; /** An additional element that is put to the right side of the input field */ - rightElement?: JSX.Element | null; + rightElement?: React.JSX.Element | null; /** Placeholder tobe shown when no text has been entered, yet. */ placeholder?: string; /** If the horizontal scrollbars should be shown. */ @@ -229,7 +229,7 @@ const AutoSuggestion = ({ CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined >(undefined); const [cm, setCM] = React.useState(); - const currentCm = React.useRef(); + const currentCm = React.useRef(undefined); currentCm.current = cm; const isFocused = React.useRef(false); const autoSuggestionDivRef = React.useRef(null); diff --git a/src/components/AutoSuggestion/AutoSuggestionList.tsx b/src/components/AutoSuggestion/AutoSuggestionList.tsx index d883c6f27..fc3e233c0 100644 --- a/src/components/AutoSuggestion/AutoSuggestionList.tsx +++ b/src/components/AutoSuggestion/AutoSuggestionList.tsx @@ -88,7 +88,7 @@ export const AutoSuggestionList = ({ }: AutoSuggestionListProps) => { const [hoveredItem, setHoveredItem] = React.useState(undefined); // Refs of list items - const [refs] = React.useState[]>([]); + const [refs] = React.useState[]>([]); const dropdownRef = React.useRef(null); const generateRef = (index: number) => { if (!refs[index]) { diff --git a/src/components/AutocompleteField/AutoCompleteField.tsx b/src/components/AutocompleteField/AutoCompleteField.tsx index f51aca4d5..c953f81f5 100644 --- a/src/components/AutocompleteField/AutoCompleteField.tsx +++ b/src/components/AutocompleteField/AutoCompleteField.tsx @@ -62,7 +62,7 @@ export interface AutoCompleteFieldProps { query: string, modifiers: SuggestFieldItemRendererModifierProps, handleClick: () => any - ): string | JSX.Element; + ): string | React.JSX.Element; /** Renders the string that should be displayed in the input field after the item has been selected. */ @@ -120,7 +120,7 @@ export interface AutoCompleteFieldProps { query: string, modifiers: SuggestFieldItemRendererModifierProps, handleClick: React.MouseEventHandler - ) => JSX.Element | undefined; + ) => React.JSX.Element | undefined; /** If the new item option will always be shown as the first entry in the suggestion list, else it will be the last entry. * @default false diff --git a/src/components/AutocompleteField/autoCompleteFieldUtils.tsx b/src/components/AutocompleteField/autoCompleteFieldUtils.tsx index b3a599bfd..de73e315c 100644 --- a/src/components/AutocompleteField/autoCompleteFieldUtils.tsx +++ b/src/components/AutocompleteField/autoCompleteFieldUtils.tsx @@ -14,7 +14,7 @@ import { IRenderModifiers } from "./interfaces"; * @param iconName Optional icon to show left to the text. */ export const createNewItemRendererFactory = ( - itemTextRenderer: (query: string) => string | JSX.Element, + itemTextRenderer: (query: string) => string | React.JSX.Element, iconName?: ValidIconName | React.ReactElement ) => { // Return custom render function diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 9f7563ae1..587d36373 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -63,7 +63,7 @@ interface AdditionalButtonProps { /** * takes in either a string of text or a react element to display as a tooltip when the button is hovered. */ - tooltip?: string | JSX.Element | null; + tooltip?: string | React.JSX.Element | null; /** * Object with additional properties for the tooltip. */ @@ -72,8 +72,8 @@ interface AdditionalButtonProps { * If an URL is set then the button is included as HTML anchor element instead of a button form element. */ //href?: string; - icon?: ValidIconName | JSX.Element; - rightIcon?: ValidIconName | JSX.Element; + icon?: ValidIconName | React.JSX.Element; + rightIcon?: ValidIconName | React.JSX.Element; //target?: string; } diff --git a/src/components/Card/CardHeader.tsx b/src/components/Card/CardHeader.tsx index 54baf9757..936793ba1 100644 --- a/src/components/Card/CardHeader.tsx +++ b/src/components/Card/CardHeader.tsx @@ -8,7 +8,7 @@ import CardOptions from "./CardOptions"; import CardTitle from "./CardTitle"; export interface CardHeaderProps extends Omit { - children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined; + children: React.JSX.Element | (React.JSX.Element | undefined | null)[] | null | undefined; } export const CardHeader = ({ children, className = "", ...otherProps }: CardHeaderProps) => { diff --git a/src/components/ContentGroup/ContentGroup.tsx b/src/components/ContentGroup/ContentGroup.tsx index 521e4092f..2c2efcaf8 100644 --- a/src/components/ContentGroup/ContentGroup.tsx +++ b/src/components/ContentGroup/ContentGroup.tsx @@ -179,16 +179,17 @@ export const ContentGroup = ({ )} )} + <> {contextInfoElements && contextInfoElements[0]?.props && - Object.values(contextInfoElements[0].props).every((v) => v !== undefined) && ( + Object.values(contextInfoElements[0].props).every((v) => v !== undefined) ? (
{contextInfoElements}
- )} + ) : null} {!isCollapsed && handlerToggleCollapse && actionOptions && ( diff --git a/src/components/ContextOverlay/ContextMenu.tsx b/src/components/ContextOverlay/ContextMenu.tsx index b18c40c88..fca262955 100644 --- a/src/components/ContextOverlay/ContextMenu.tsx +++ b/src/components/ContextOverlay/ContextMenu.tsx @@ -17,13 +17,13 @@ export interface ContextMenuProps extends TestableComponent { * The elements of the context menu. * They will be wrapped in a `Menu` element automatically. */ - children?: JSX.Element | JSX.Element[]; + children?: React.JSX.Element | React.JSX.Element[]; /** * Toggler that need to be used to display menu. * If a valid icon name is used then the icon element is displayed. * In this case `togglerText`, `togglerLarge` and `tooltipAsTitle` are used, too. */ - togglerElement?: ValidIconName | JSX.Element; + togglerElement?: ValidIconName | React.JSX.Element; /** * Text displayed as title or tooltip on toggler element. */ diff --git a/src/components/ContextOverlay/ContextOverlay.tsx b/src/components/ContextOverlay/ContextOverlay.tsx index 1d3991f93..a576ae454 100644 --- a/src/components/ContextOverlay/ContextOverlay.tsx +++ b/src/components/ContextOverlay/ContextOverlay.tsx @@ -12,7 +12,7 @@ export interface ContextOverlayProps extends Omit { /** * Description of the depiction. */ - caption?: string | JSX.Element; + caption?: string | React.JSX.Element; /** * How is the caption displayed. */ diff --git a/src/components/Dialog/Modal.tsx b/src/components/Dialog/Modal.tsx index 480e2be97..11f2701d7 100644 --- a/src/components/Dialog/Modal.tsx +++ b/src/components/Dialog/Modal.tsx @@ -87,7 +87,7 @@ export const Modal = ({ const alteredChildren = React.Children.map(children, (child) => { if ((child as React.ReactElement).type && (child as React.ReactElement).type === Card) { - return React.cloneElement(child as React.ReactElement, { + return React.cloneElement(child as React.ReactElement<{isOnlyLayout: boolean, elevation: number}>, { isOnlyLayout: true, elevation: 4, }); diff --git a/src/components/Dialog/SimpleDialog.tsx b/src/components/Dialog/SimpleDialog.tsx index 8e910c3d5..54b4e44a7 100644 --- a/src/components/Dialog/SimpleDialog.tsx +++ b/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. */ diff --git a/src/components/Form/FieldItem.tsx b/src/components/Form/FieldItem.tsx index f73f06b4f..a5910d288 100644 --- a/src/components/Form/FieldItem.tsx +++ b/src/components/Form/FieldItem.tsx @@ -57,7 +57,7 @@ export interface FieldItemProps extends React.HTMLAttributes, 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. diff --git a/src/components/Form/FieldSet.tsx b/src/components/Form/FieldSet.tsx index d9814fa17..abde2a590 100644 --- a/src/components/Form/FieldSet.tsx +++ b/src/components/Form/FieldSet.tsx @@ -36,17 +36,17 @@ export interface FieldSetProps extends Omit, "children">; /** * The content that is shown when hovered. */ - hoverContent: JSX.Element; + hoverContent: React.JSX.Element; hoverContentProps?: Omit, "children">; /** * Display as inline element. diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index bef756225..f383fda4f 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -9,15 +9,15 @@ export interface LabelProps extends React.LabelHTMLAttributes /** * 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`. */ diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 466911bdc..8858e56ad 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/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; } /** diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx index aa8f75a5c..400972a9c 100644 --- a/src/components/Notification/Notification.tsx +++ b/src/components/Notification/Notification.tsx @@ -20,11 +20,11 @@ export interface NotificationProps /** * Extra user action elements */ - actions?: JSX.Element | JSX.Element[]; + actions?: React.JSX.Element | React.JSX.Element[]; /** * Notification message that can be used as alternative to children elements. */ - message?: JSX.Element | string; + message?: React.JSX.Element | string; /** * Intent state of the notification. */ @@ -145,7 +145,7 @@ export const Notification = ({ timeout={timeout ? timeout : 0} icon={ notificationIcon - ? React.cloneElement(notificationIcon as JSX.Element, { + ? React.cloneElement(notificationIcon as React.JSX.Element, { className: (notificationIcon.props.className ?? "") + ` ${BlueprintClassNames.ICON}`, }) : undefined diff --git a/src/components/OverviewItem/OverviewItemActions.tsx b/src/components/OverviewItem/OverviewItemActions.tsx index 172b57da6..0dd1ba950 100644 --- a/src/components/OverviewItem/OverviewItemActions.tsx +++ b/src/components/OverviewItem/OverviewItemActions.tsx @@ -18,7 +18,7 @@ export interface OverviewItemActionsProps extends React.HTMLAttributes; + return ; } return (
{ const originalChild = child as React.ReactElement; if (originalChild && originalChild.type && originalChild.type === PropertyValuePair) { - return React.cloneElement(originalChild, { singleColumn: true }); + return React.cloneElement(originalChild as React.ReactElement<{singleColumn: boolean}>, { singleColumn: true }); } return child; }) diff --git a/src/components/PropertyValuePair/PropertyValuePair.tsx b/src/components/PropertyValuePair/PropertyValuePair.tsx index d26f3493e..988880d9a 100644 --- a/src/components/PropertyValuePair/PropertyValuePair.tsx +++ b/src/components/PropertyValuePair/PropertyValuePair.tsx @@ -37,7 +37,7 @@ export const PropertyValuePair = ({ ? React.Children.map(children, (child) => { const originalChild = child as React.ReactElement; if (originalChild.type && (originalChild.type === PropertyName || originalChild.type === PropertyValue)) { - return React.cloneElement(originalChild, { nowrap: true }); + return React.cloneElement(originalChild as React.ReactElement<{nowrap: boolean}>, { nowrap: true }); } return child; }) diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx index 0cb017bb7..a92147614 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 as React.ReactElement<{className: string, disabled: boolean, tabIndex: number}>; 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 94fe7d4f7..5a5a6c0bf 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -51,7 +51,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 ad541f611..7df8d3499 100644 --- a/src/components/Table/TableContainer.tsx +++ b/src/components/Table/TableContainer.tsx @@ -18,15 +18,15 @@ export interface TableDataContainerProps Array >, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth" - >, - React.TableHTMLAttributes { - children(signature: any): JSX.Element; + > { + className?: string; + children(signature: any): React.JSX.Element; size?: TableRowHeightSize; } 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/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/TextField/TextArea.tsx b/src/components/TextField/TextArea.tsx index 842e80bac..9df59b84c 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/extensions/codemirror/CodeMirror.tsx b/src/extensions/codemirror/CodeMirror.tsx index edb22a2e0..c50a7f030 100644 --- a/src/extensions/codemirror/CodeMirror.tsx +++ b/src/extensions/codemirror/CodeMirror.tsx @@ -224,7 +224,7 @@ export const CodeEditor = ({ }: CodeEditorProps) => { const parent = useRef(undefined); const [view, setView] = React.useState(); - const currentView = React.useRef() + const currentView = React.useRef(undefined) currentView.current = view const currentReadOnly = React.useRef(readOnly) currentReadOnly.current = readOnly @@ -458,7 +458,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 1faf5fa03..0aef41718 100644 --- a/src/extensions/react-flow/edges/EdgeLabel.tsx +++ b/src/extensions/react-flow/edges/EdgeLabel.tsx @@ -14,11 +14,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. */ diff --git a/src/extensions/react-flow/edges/EdgeTools.tsx b/src/extensions/react-flow/edges/EdgeTools.tsx index f5544a887..31cbc4079 100644 --- a/src/extensions/react-flow/edges/EdgeTools.tsx +++ b/src/extensions/react-flow/edges/EdgeTools.tsx @@ -13,7 +13,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/handles/HandleContent.tsx b/src/extensions/react-flow/handles/HandleContent.tsx index f18f3cf3b..7738195b3 100644 --- a/src/extensions/react-flow/handles/HandleContent.tsx +++ b/src/extensions/react-flow/handles/HandleContent.tsx @@ -7,7 +7,7 @@ export interface HandleContentProps 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 7879ee654..43d159f79 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -62,15 +62,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 +386,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]: [], diff --git a/src/extensions/react-flow/nodes/NodeTools.tsx b/src/extensions/react-flow/nodes/NodeTools.tsx index 6db7cdbaf..970f3a0ca 100644 --- a/src/extensions/react-flow/nodes/NodeTools.tsx +++ b/src/extensions/react-flow/nodes/NodeTools.tsx @@ -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/legacy-replacements/Tabs/Tabs.tsx b/src/legacy-replacements/Tabs/Tabs.tsx index 4892debb7..dd877862c 100644 --- a/src/legacy-replacements/Tabs/Tabs.tsx +++ b/src/legacy-replacements/Tabs/Tabs.tsx @@ -20,7 +20,7 @@ interface LegacyTabsProps extends Omit Date: Tue, 30 Sep 2025 23:00:41 +0100 Subject: [PATCH 2/4] added temp any type for failing strict ts check --- src/components/AutoSuggestion/AutoSuggestion.tsx | 2 +- src/components/ContextOverlay/ContextOverlay.tsx | 2 +- src/components/Tooltip/Tooltip.tsx | 2 +- src/extensions/react-flow/edges/EdgeLabel.tsx | 2 +- src/extensions/react-flow/nodes/NodeContent.tsx | 4 ++-- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/AutoSuggestion/AutoSuggestion.tsx b/src/components/AutoSuggestion/AutoSuggestion.tsx index c5b591593..f940d9825 100644 --- a/src/components/AutoSuggestion/AutoSuggestion.tsx +++ b/src/components/AutoSuggestion/AutoSuggestion.tsx @@ -377,7 +377,7 @@ const AutoSuggestion = ({ return { fromOffset, toOffset }; }; - const inputActionsDisplayed = React.useCallback((node) => { + const inputActionsDisplayed = React.useCallback((node:any) => { if (!node) return; const width = node.offsetWidth; const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`); diff --git a/src/components/ContextOverlay/ContextOverlay.tsx b/src/components/ContextOverlay/ContextOverlay.tsx index a576ae454..fe747f1b5 100644 --- a/src/components/ContextOverlay/ContextOverlay.tsx +++ b/src/components/ContextOverlay/ContextOverlay.tsx @@ -66,7 +66,7 @@ export const ContextOverlay = ({ return () => {}; }, [!!placeholderRef.current]); - const refocus = React.useCallback((node) => { + const refocus = React.useCallback((node:any) => { if (eventMemory.current === "afterfocus" && node) { const target = node.targetRef.current.children[0]; if (target) { diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 7a3108f7e..8934f9d79 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -123,7 +123,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/extensions/react-flow/edges/EdgeLabel.tsx b/src/extensions/react-flow/edges/EdgeLabel.tsx index 0aef41718..e60e3685e 100644 --- a/src/extensions/react-flow/edges/EdgeLabel.tsx +++ b/src/extensions/react-flow/edges/EdgeLabel.tsx @@ -109,7 +109,7 @@ export interface EdgeLabelObjectProps extends React.SVGAttributes { const containerCallback = React.useCallback( - (containerRef) => { + (containerRef:any) => { if (containerRef) labelSize(containerRef); }, [edgeCenter] diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index 43d159f79..485ab8616 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -735,7 +735,7 @@ export function NodeContent>({ return validatedHeight; }; - const onResize = React.useCallback((_0, _1, _2, d) => { + const onResize = React.useCallback((_0:any, _1:any, _2:any, d:any) => { if (nodeContentRef.current) { const nextWidth = resizeDirections.right ? (width ?? originalSize.current.width ?? 0) + d.width @@ -756,7 +756,7 @@ export function NodeContent>({ } }, [resizeDirections, originalSize]) - const onResizeStop = React.useCallback((_0, _1, _2, d) => { + const onResizeStop = React.useCallback((_0:any, _1:any, _2:any, d:any) => { const nextWidth = validateWidth((width ?? originalSize.current.width ?? 0) + d.width); const nextHeight = validateHeight((height ?? originalSize.current.height ?? 0) + d.height); setWidth(nextWidth); From ef6fede0c1cea9e21966be3daa4f2991b7c0eea4 Mon Sep 17 00:00:00 2001 From: arausly Date: Mon, 8 Dec 2025 09:56:37 +0100 Subject: [PATCH 3/4] corrected interface to fix compilation errors --- src/components/Table/TableContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Table/TableContainer.tsx b/src/components/Table/TableContainer.tsx index 201085cea..aadc4ecfb 100644 --- a/src/components/Table/TableContainer.tsx +++ b/src/components/Table/TableContainer.tsx @@ -19,7 +19,7 @@ export interface TableDataContainerProps >, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth" >, - React.TableHTMLAttributes { + Omit, "children"> { children(signature: any): React.JSX.Element; size?: TableProps["size"]; } From f8edf61edeb26aa19c802a443953a42004686468 Mon Sep 17 00:00:00 2001 From: arausly Date: Wed, 10 Dec 2025 09:44:05 +0100 Subject: [PATCH 4/4] fixed compile errors in ContextOverlay --- src/components/ContextOverlay/ContextOverlay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ContextOverlay/ContextOverlay.tsx b/src/components/ContextOverlay/ContextOverlay.tsx index 232023182..dc601e12f 100644 --- a/src/components/ContextOverlay/ContextOverlay.tsx +++ b/src/components/ContextOverlay/ContextOverlay.tsx @@ -108,7 +108,7 @@ export const ContextOverlay = ({ return () => {}; }, [!!placeholderRef.current, otherPopoverProps.interactionKind]); - const refocus = React.useCallback((node) => { + const refocus = React.useCallback((node:any) => { const target = node?.targetRef.current.children[0]; if (!eventMemory.current || !target) { return;