diff --git a/package.json b/package.json index 5e21c3fb1..8e074f8f7 100644 --- a/package.json +++ b/package.json @@ -92,8 +92,8 @@ "lodash": "^4.17.21", "n3": "^1.26.0", "re-resizable": "^6.10.3", - "react": "^16.13.1", - "react-dom": "^16.14.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-flow-renderer": "9.7.4", "react-inlinesvg": "^3.0.3", "react-is": "^16.13.1", @@ -179,7 +179,7 @@ "react": ">=16" }, "resolutions": { - "**/@types/react": "^17.0.90", + "**/@types/react": "^18.2.0", "node-sass-package-importer/**/postcss": "^8.5.6", "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 3997fe4e2..d4acac0e7 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 bb219663c..f8afe69e5 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 057164e29..9e956692b 100644 --- a/src/components/AutoSuggestion/AutoSuggestion.tsx +++ b/src/components/AutoSuggestion/AutoSuggestion.tsx @@ -124,10 +124,10 @@ export interface CodeAutocompleteFieldProps { */ 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. */ @@ -214,7 +214,7 @@ export const CodeAutocompleteField = ({ 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); @@ -361,7 +361,7 @@ export const CodeAutocompleteField = ({ 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/AutoSuggestion/AutoSuggestionList.tsx b/src/components/AutoSuggestion/AutoSuggestionList.tsx index ff524fad3..eb6889cb9 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 02f6a5613..ad7a63653 100644 --- a/src/components/AutocompleteField/AutoCompleteField.tsx +++ b/src/components/AutocompleteField/AutoCompleteField.tsx @@ -64,7 +64,7 @@ export interface SuggestFieldProps { 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. */ @@ -122,7 +122,7 @@ export interface SuggestFieldProps { 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 ba2f75bdc..c395a3218 100644 --- a/src/components/AutocompleteField/autoCompleteFieldUtils.tsx +++ b/src/components/AutocompleteField/autoCompleteFieldUtils.tsx @@ -14,7 +14,7 @@ import { SuggestFieldItemRendererModifierProps } 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 7110d1c33..fcf253924 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -47,7 +47,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. */ @@ -55,11 +55,11 @@ interface AdditionalButtonProps { /** * Icon displayed on button start. */ - icon?: ValidIconName | JSX.Element; + icon?: ValidIconName | React.JSX.Element; /** * Icon displayed on button end. */ - rightIcon?: ValidIconName | JSX.Element; + rightIcon?: ValidIconName | React.JSX.Element; } interface ExtendedButtonProps 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 4ce4172db..ceeca33b4 100644 --- a/src/components/ContentGroup/ContentGroup.tsx +++ b/src/components/ContentGroup/ContentGroup.tsx @@ -179,6 +179,7 @@ export const ContentGroup = ({ )} )} + <> {contextInfoElements && contextInfoElements[0]?.props && Object.values(contextInfoElements[0].props).every((v) => v !== undefined) && ( diff --git a/src/components/ContextOverlay/ContextMenu.tsx b/src/components/ContextOverlay/ContextMenu.tsx index 8e9a5a057..c51ca0b33 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 7b3c884ed..dc601e12f 100644 --- a/src/components/ContextOverlay/ContextOverlay.tsx +++ b/src/components/ContextOverlay/ContextOverlay.tsx @@ -13,7 +13,7 @@ export interface ContextOverlayProps extends Omit {}; }, [!!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; diff --git a/src/components/Depiction/Depiction.tsx b/src/components/Depiction/Depiction.tsx index 619897c69..6bfeee938 100644 --- a/src/components/Depiction/Depiction.tsx +++ b/src/components/Depiction/Depiction.tsx @@ -65,7 +65,7 @@ export interface DepictionProps extends React.HTMLAttributes { /** * 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 e28e97295..b7e36ff64 100644 --- a/src/components/Dialog/Modal.tsx +++ b/src/components/Dialog/Modal.tsx @@ -112,7 +112,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 252efcbef..28009a57f 100644 --- a/src/components/Form/FieldItem.tsx +++ b/src/components/Form/FieldItem.tsx @@ -24,7 +24,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 9e9fbaec5..3287b6d8a 100644 --- a/src/components/Form/FieldSet.tsx +++ b/src/components/Form/FieldSet.tsx @@ -16,17 +16,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 85809b942..3aa1043c7 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. */ @@ -97,7 +97,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 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/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 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/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/codemirror/CodeMirror.tsx b/src/extensions/codemirror/CodeMirror.tsx index 1fb523539..b74cc896c 100644 --- a/src/extensions/codemirror/CodeMirror.tsx +++ b/src/extensions/codemirror/CodeMirror.tsx @@ -227,7 +227,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 @@ -461,7 +461,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 767146a21..41f4a2f8b 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. */ @@ -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/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 ea7201808..67b6d712c 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]: [], @@ -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, width, height]) - 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); 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 new file mode 100644 index 000000000..dd877862c --- /dev/null +++ b/src/legacy-replacements/Tabs/Tabs.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import { Tab, Tabs as BlueprintTabs, TabsProps as BlueprintTabsProps } from "@blueprintjs/core"; + +import { CLASSPREFIX as eccgui } from "../../configuration/constants"; + +// legacy interface +interface LegacyTabsProps extends Omit { + activeTab: string; + tabs: DeprecatedTabProps[]; + onTabClick?: ({ props }: any) => void; + prefixTabNames: string; + allowScrollbars?: boolean; + /** + * If controlled usage is enable then a `onTabClick` handler is ncessary to control tab panel content and `activeTab` updates. + */ + controlled?: boolean; +} + +/** @deprecated (v25) all legacy component support will be removed */ +export interface DeprecatedTabProps { + tabId: string; + tabTitle: React.ReactNode; + tabContent?: React.JSX.Element; + dontShrink?: boolean; + className?: string; +} + +const createDeprecatedTab = ({ + tabId, + tabTitle, + tabContent, + dontShrink = false, + ...otherTabProps +}: DeprecatedTabProps) => { + const extraStyles = dontShrink ? { style: { flexShrink: 0 } } : {}; + return ; +}; + +/** @deprecated (v25) all legacy component support will be removed, switch to `` */ +export function TabsReplacement({ + activeTab, + tabs = [], + onTabClick, + controlled = false, + prefixTabNames, + className = "", + allowScrollbars, + ...restProps +}: LegacyTabsProps) { + const usagetype = controlled ? { selectedTabId: activeTab } : { defaultSelectedTabId: activeTab }; + return ( + + {tabs.map((tab) => { + return createDeprecatedTab({ + className: `${prefixTabNames}-header-${tab.tabId}`, + ...tab, + }); + })} + + ); +}