@equinor/echo-components 4.3.0 → 5.0.0-beta-r19-0

package/index.d.ts

@@ -1 +1 @@
-export * from "./src/index";
+export * from "./src\\index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/echo-components",
-  "version": "4.3.0",
+  "version": "5.0.0-beta-r19-0",
   "dependencies": {
     "chart.js": "4.5.1",
     "react-datepicker": "9.1.0",
@@ -8,14 +8,14 @@
     "react-window": "1.8.11"
   },
   "peerDependencies": {
-    "@equinor/echo-utils": ">= 4.3.0 < 5.0.0",
+    "@equinor/echo-utils": "5.0.0-beta-r19-0",
     "@equinor/eds-core-react": "0.49.0",
     "@equinor/eds-icons": "0.22.0",
     "@equinor/eds-tokens": "2.1.0",
     "classnames": "2.5.1",
     "lodash": ">= 4.17.21 < 5",
-    "react": ">= 17.0.2",
-    "react-dom": ">= 17.0.2",
+    "react": ">= 19.2.4",
+    "react-dom": ">= 19.2.4",
     "react-sortablejs": "6.1.4",
     "sortablejs": ">= 1.15.1 < 2",
     "zustand": ">= 4.4.7 < 5"

package/src/components/accordionWithSwitch/AccordionWithSwitch.d.ts

@@ -21,7 +21,7 @@ interface AccordionWithSwitchProps {
     /** Optional prop to disable the switch */
     switchDisabled?: boolean;
     /** Optional warning element to be displayed */
-    warning?: JSX.Element;
+    warning?: React.JSX.Element;
 }
 export declare const AccordionWithSwitch: ({ title, description, handleSwitchClick, children, descriptionHeading, disableAccordionOnSwitchOff, isExpanded, isToggledOn, switchDisabled, switchAriaLabel, warning }: AccordionWithSwitchProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/buttonWithPopover/ButtonWithPopover.d.ts

@@ -15,7 +15,7 @@ export interface ButtonWithPopoverProps {
  *                  Meant to be the return value of the fetchDataToShow method
  *     isLoading: flag to show loading state if data fetch takes some time
  *     expanded: flag to determine if popover should be expanded or not
- * @return {*}  {JSX.Element} Round button with belonging popover to display data information buttons
+ * @return {*}  {React.JSX.Element} Round button with belonging popover to display data information buttons
  */
 export declare const ButtonWithPopover: ({ onShowMoreClicked, fetchedData, isLoading, expanded }: ButtonWithPopoverProps) => React.JSX.Element;
 export default ButtonWithPopover;

package/src/components/contextMenu/ContextMenu.d.ts

@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { TagIconChipsProps } from '../../elements/tagIcon/TagIconWithChips';
 export type StatusChipsProps = Omit<TagIconChipsProps, 'icon' | 'legendColor'>;
 interface ContextMenuProps {
-    icon: JSX.Element;
+    icon: React.JSX.Element;
     legendColor: string;
     expanded: boolean;
     setExpanded: (expanded: boolean) => void;
@@ -32,7 +32,7 @@ interface ContextMenuProps {
  *     selectedClassName: styling used to handle multiple tag visible on the page at the same time, class will be added to tagIcon when context menu is not expanded
  *     children: Related elements to display, e.g. more information button
  * }
- * @return {*} {JSX.Element} Context menu with relevant children wrapped
+ * @return {*} {React.JSX.Element} Context menu with relevant children wrapped
  */
 export declare const ContextMenu: React.FC<ContextMenuProps>;
 export default ContextMenu;

package/src/components/contextMenuPopover/DataInfoButton.d.ts

@@ -13,7 +13,7 @@ export interface DataInfoButtonProps {
  * ariaLabel: The aria label set on the button, if empty the label will be used
  * onTagInfoClicked: The method to be called when button is pressed
  * itemButtonClassName: Used to style button if default styling is not wanted. class name might need higher precedence for overriding existing styling e.g. "div.itemButtonClassName { background-color: blue !important}"
- * @return {*}  {JSX.Element} Data information button with or without a badge based on the provided data object
+ * @return {*}  {React.JSX.Element} Data information button with or without a badge based on the provided data object
  */
 export declare const DataInfoButton: React.FC<DataInfoButtonProps>;
 export default DataInfoButton;

package/src/components/contextMenuPopover/DataInfoPopover.d.ts

@@ -12,6 +12,6 @@ export interface DataInfoPopoverProps {
  *  The itemType in these objects are used to group them together in the popover
  *  isLoading: loading flag that tells if a dot progress should be displayed if data is being fetched
  * }
- * @return {*} {JSX.Element} Popover with data information buttons based on the provided DataInformation objects
+ * @return {*} {React.JSX.Element} Popover with data information buttons based on the provided DataInformation objects
  */
 export declare const DataInfoPopover: React.FC<DataInfoPopoverProps>;

package/src/components/dialogGenerator/DialogGenerator.d.ts

@@ -23,6 +23,6 @@ export interface DialogGeneratorProps {
  *     isDismissable: if the modal is closable by clicking aside or by hitting ESC key
  *     onClose: callback to be called when the dialog is closed
  * }
- * @return {*}  {JSX.Element} Dialog component
+ * @return {*}  {React.JSX.Element} Dialog component
  */
 export declare const DialogGenerator: React.FC<DialogGeneratorProps>;

package/src/components/dropdown/Dropdown.d.ts

@@ -33,7 +33,7 @@ interface DropdownItemProps {
  *     position: Determines if the dropdown position should be relative or absolute.
  *     triggerOpen: Callback to trigger when the dropdown is opened.
  * }
- * @return {*} {JSX.Element} The dropdown component.
+ * @return {*} {React.JSX.Element} The dropdown component.
  *  *  @deprecated Use Autocomplete from EDS instead
  */
 export declare const Dropdown: React.FC<DropdownItemProps>;

package/src/components/echoButton/EchoActionButton.d.ts

@@ -1,13 +1,15 @@
 import { IconProps } from '@equinor/eds-core-react';
+import React from 'react';
 import { EchoButtonProps } from './EchoButton';
 interface EchoActionButtonProps extends EchoButtonProps {
     iconAlign?: 'left' | 'right';
     iconProps: Exclude<IconProps, 'size'>;
+    ref?: React.Ref<HTMLButtonElement>;
 }
 /**
  * Wrapper for EDS button with icon and  UI preferences support..
  * It uses EchoButton as a base and adds icon support.
  * NB: IconProps should never be allowed to be undefined, if you don't want to use an icon, use EchoButton instead.
  */
-export declare const EchoActionButton: import("react").ForwardRefExoticComponent<EchoActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const EchoActionButton: ({ iconAlign, children, iconProps, className, isLoading, ref, ...restProps }: EchoActionButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/echoButton/EchoButton.d.ts

@@ -1,21 +1,13 @@
 import { ButtonProps } from '@equinor/eds-core-react';
+import React from 'react';
 export type EchoButtonProps = ButtonProps & {
-    readonly isLoading?: boolean;
     readonly isSelected?: boolean;
+    readonly isLoading?: boolean;
+    readonly ref?: React.Ref<HTMLButtonElement>;
 };
 /**
  * Wrapper for EDS Button with UI preferences support, and dark mode support (uses new light/dark CSS variables).
  * This button component should be removed when EDS 1.0 is fully adopted, then we would use the button component from there.
  * For now we need this to be able to implement temporary styles with dark support.
  */
-export declare const EchoButton: import("react").ForwardRefExoticComponent<{
-    color?: "primary" | "secondary" | "danger";
-    variant?: "ghost" | "contained" | "contained_icon" | "outlined" | "ghost_icon";
-    href?: string;
-    disabled?: boolean;
-    type?: string;
-    fullWidth?: boolean;
-} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
-    readonly isLoading?: boolean;
-    readonly isSelected?: boolean;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const EchoButton: (props: EchoButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/echoButton/EchoToggleButton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { EchoButtonProps } from './EchoButton';
 export type EchoToggleButtonProps = Omit<EchoButtonProps, 'variant' | 'color'> & {
     isSelected?: boolean;
@@ -15,8 +16,6 @@ export type EchoToggleButtonProps = Omit<EchoButtonProps, 'variant' | 'color'> &
  * @param {boolean} [props.isSelected] - Indicates if the button is in a selected state.
  * @param {'contained' | 'contained_icon' | 'outlined'} [props.variant] - Button variant. Ghost variants are not available for toggle buttons.
  */
-export declare const EchoToggleButton: import("react").ForwardRefExoticComponent<Omit<EchoButtonProps, "color" | "variant"> & {
-    isSelected?: boolean;
-    variant?: Exclude<EchoButtonProps["variant"], "ghost" | "ghost_icon">;
-    color?: Exclude<EchoButtonProps["color"], "danger">;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const EchoToggleButton: ({ children, className, isSelected, variant, ref, ...restProps }: EchoToggleButtonProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => import("react/jsx-runtime").JSX.Element;

package/src/components/echoCard/Body.d.ts

@@ -4,4 +4,4 @@ export type BodyProps = {
     className?: string;
     bodyText?: string;
 };
-export declare const Body: ({ bodyText, children, className }: Partial<BodyProps>) => JSX.Element;
+export declare const Body: ({ bodyText, children, className }: Partial<BodyProps>) => React.JSX.Element;

package/src/components/echoCard/DateSection.d.ts

@@ -5,4 +5,4 @@ export type DateSectionProps = {
     children?: React.ReactNode;
     className?: string;
 };
-export declare const DateSection: ({ dateSectionText, date, children, className }: Partial<DateSectionProps>) => JSX.Element;
+export declare const DateSection: ({ dateSectionText, date, children, className }: Partial<DateSectionProps>) => React.JSX.Element;

package/src/components/echoCard/LinkSection.d.ts

@@ -5,4 +5,4 @@ export type LinkSectionProps = {
     linkSectionIcons?: CardIcons[];
     className?: string;
 };
-export declare const LinkSection: ({ children, className, linkSectionIcons }: Partial<LinkSectionProps>) => JSX.Element;
+export declare const LinkSection: ({ children, className, linkSectionIcons }: Partial<LinkSectionProps>) => React.JSX.Element;

package/src/components/echoCard/Title.d.ts

@@ -9,4 +9,4 @@ export type TitleProps = {
     headerIcons?: CardIcons[];
     className?: string;
 };
-export declare const Title: ({ headerTitle, headerIcons, className, onHeaderClick }: Partial<TitleProps>) => JSX.Element;
+export declare const Title: ({ headerTitle, headerIcons, className, onHeaderClick }: Partial<TitleProps>) => React.JSX.Element;

package/src/components/echoHeader/EchoHeader.d.ts

@@ -14,6 +14,6 @@ export interface EchoHeaderProps {
  *    plantName: show the plant name next to the module title
  *    customSection: a section in the header where there can be custom components
  * }
- * @returns {*} {JSX.Element} Echo header with custom section
+ * @returns {*} {React.JSX.Element} Echo header with custom section
  */
 export declare const EchoHeader: ({ moduleTitle, moduleIcon, plantName, customHeaderSection }: EchoHeaderProps) => React.JSX.Element;

package/src/components/echoToggleButtonGroup/EchoToggleButtonGroup.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { type EchoToggleButtonProps } from '../echoButton/EchoToggleButton';
 export interface EchoToggleButtonGroupOption<T> {
-    readonly label: string | JSX.Element;
+    readonly label: string | React.JSX.Element;
     readonly value: T;
 }
 interface EchoToggleButtonGroupProps<T> {

package/src/components/floatingActionButton/FloatingActionButton.d.ts

@@ -26,7 +26,7 @@ export type FloatingActionButtonProps = MutuallyExclusiveVariantLabel & {
 /**
  * Floating actions buttons exists within the viewport, seperated from any sheet, dialog or menu
  * and are typically used for special actions pertaining to the module they are used in.
- * @return {*}  {JSX.Element} Floating actions button
+ * @return {*}  {React.JSX.Element} Floating actions button
  */
 export declare const FloatingActionButton: ({ label, iconName, ariaLabel, variant, disabled, active, onClick }: FloatingActionButtonProps) => React.JSX.Element;
 export {};

package/src/components/horizontalTabView/HorizontalTabView.d.ts

@@ -1,4 +1,5 @@
-import { TabListProps, TabPanelsProps, TabsProps } from '@equinor/eds-core-react';
+import { TabListProps, TabPanelsProps, TabProps, TabsProps } from '@equinor/eds-core-react';
+import React from 'react';
 /** Allows markup to be horizontally sectioned in tabs. <br />
  * The component is a drop in replacement for the regular EDS tabs.
  *
@@ -20,11 +21,8 @@ export declare function TabView(props: TabsProps): import("react/jsx-runtime").J
 /** Returns the parent element of the tabs themselves. */
 export declare function Tabs(props: TabListProps): import("react/jsx-runtime").JSX.Element;
 /** Returns a button that acts like a tab button in a tab list. */
-export declare const Tab: import("react").ForwardRefExoticComponent<{
-    active?: boolean;
-    value?: number | string;
-    disabled?: boolean;
-    as?: import("react").ElementType;
-} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<unknown>>;
+export declare const Tab: ({ ref, active, disabled, children, className, ...otherProps }: TabProps & {
+    ref?: React.Ref<HTMLElement>;
+}) => import("react/jsx-runtime").JSX.Element;
 /** Returns the parent of the tab-sectioned content. */
 export declare function TabPanels(props: TabPanelsProps): import("react/jsx-runtime").JSX.Element;

package/src/components/iconLink/compactIconLink/CompactIconLink.d.ts

@@ -6,4 +6,4 @@ export interface CompactIconLinkProps {
     icon?: string | React.ReactNode;
     className?: string;
 }
-export declare const CompactIconLink: ({ title, meta, legendColor, onClickHandler, icon, className }: CompactIconLinkProps) => JSX.Element;
+export declare const CompactIconLink: ({ title, meta, legendColor, onClickHandler, icon, className }: CompactIconLinkProps) => React.JSX.Element;

package/src/components/itemMarker/ItemMarker.d.ts

@@ -42,6 +42,6 @@ export interface ItemMarkerProps {
  * @param {number | string} [zIndex] - z-index of the marker and chips (optional).
  * @param {string} highlightColor - Highlight color for the marker (optional).
  *
- * @returns {JSX.Element} Component
+ * @returns {React.JSX.Element} Component
  */
 export declare const ItemMarker: React.FC<ItemMarkerProps>;

package/src/components/itemMarker/MultipleItemMarkers.d.ts

@@ -22,6 +22,6 @@ export interface MultipleItemMarkersProps {
  * @param {() => void} onClick - Click handler for the itemMarker (optional).
  * @param {boolean} enablePointerAnchor -  Anchors the pointer (arrow) to the top-left corner of the parent container (optional).
  *
- * @returns {JSX.Element} The rendered component
+ * @returns {React.JSX.Element} The rendered component
  */
 export declare const MultipleItemMarkers: React.FC<MultipleItemMarkersProps>;

package/src/components/itemMarker/utils/itemMarkerUtils.d.ts

@@ -1,5 +1,5 @@
 import { IconData } from '@equinor/eds-icons';
-export type ItemMarkerIconType = IconData | JSX.Element | string;
+export type ItemMarkerIconType = IconData | React.JSX.Element | string;
 export type IconSize = 16 | 24;
 export declare enum ItemMarkerSize {
     Small = 28,

package/src/components/itemMarkerPopover/OldItemMarkerPopover.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 export type OldItemMarkerPopover = {
-    items: ReadonlyArray<JSX.Element> | ReadonlyArray<string>;
+    items: ReadonlyArray<React.JSX.Element> | ReadonlyArray<string>;
     isOpen: boolean;
     handleClose: () => void;
     title: string;
@@ -18,7 +18,7 @@ export type OldItemMarkerPopover = {
  * When using ListItem for the content, using the css parameter -webkit-text-fill-color is recommended for overriding the text color.
  * To override the hover effect for ListItem, override the elements in the ListItem like this: > li:hover
  * This component will always render in dark mode.
- * @param {JSX.Element[] | string[]} items - List of items to be displayed in the popover.
+ * @param {React.JSX.Element[] | string[]} items - List of items to be displayed in the popover.
  * @param {boolean} isOpen - If true, popover is open.
  * @param {() => void} handleClose - Function to close the popover (this is used to handle closing only, not toggling it).
  * @param {string} title - Title of the popover.

package/src/components/legendChip/LegendChip.d.ts

@@ -13,6 +13,6 @@ export interface LegendChipProps {
  * @param {string} backgroundColor - The background color of the chip.
  * @param {boolean} disabled - Boolean to disable the chip. Optional.
  * @param {(isDisabled: boolean) => void} onClick - Function to be called when the chip is clicked.
- * @returns {JSX.Element} - Legend chip component.
+ * @returns {React.JSX.Element} - Legend chip component.
  */
 export declare const LegendChip: React.FC<LegendChipProps>;

package/src/components/legendSelector/LegendSelector.d.ts

@@ -6,20 +6,20 @@ export interface LegendSelectorProps {
     onOptionClick: (option: string) => void;
     legends: ReadonlyArray<LegendChipProps>;
     showLegendToggle?: boolean;
-    visual?: JSX.Element;
+    visual?: React.JSX.Element;
     placeholder?: string;
 }
 /**
  * Legend selector component that will display the selected legend type and the statuses.
  * Note that this component is meant to be displayed on a darker background, and should be used with the LegendSelectorAccordion as display in the LegendSelector story in the storybook.
  * Will always render dark.
- * @param {JSX.Element[]} options - List of options to be displayed in the selection-selector.
+ * @param {React.JSX.Element[]} options - List of options to be displayed in the selection-selector.
  * @param {string} selectedOption - The selected option.
  * @param {(option: string) => void} onOptionsClick - Function that is called when another option is clicked.
- * @param {JSX.Element[]} legends - List of legend chip components to be displayed.
+ * @param {React.JSX.Element[]} legends - List of legend chip components to be displayed.
  * @param {boolean} showLegendToggle - Boolean to show the legend toggle button. Optional.
- * @param {JSX.Element} visual - Visual or icon to be displayed before the legend selector. Optional.
+ * @param {React.JSX.Element} visual - Visual or icon to be displayed before the legend selector. Optional.
  * @param {string} placeholder - Placeholder text to be displayed when no selection is selected. Optional.
- * @returns {JSX.Element} - Legend selector component.
+ * @returns {React.JSX.Element} - Legend selector component.
  */
 export declare const LegendSelector: React.FC<LegendSelectorProps>;

package/src/components/legendSelectorAccordion/LegendSelectorAccordion.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 interface LegendSelectorAccordionBaseProps {
     title: string;
     children: React.ReactNode;
-    visual?: JSX.Element;
+    visual?: React.JSX.Element;
     caption?: string;
     actions?: React.ReactNode;
 }
@@ -26,13 +26,13 @@ export type LegendSelectorAccordionProps = UncontrolledProps | ControlledProps;
  *
  * @param {string} title - The title of the accordion/type of legend.
  * @param {React.ReactNode} children - The children to be displayed in the accordion.
- * @param {JSX.Element} visual - The visual or icon to be displayed in the accordion header. Optional.
+ * @param {React.JSX.Element} visual - The visual or icon to be displayed in the accordion header. Optional.
  * @param {string} caption - The caption to be displayed in the accordion header. Optional.
  * @param {React.ReactNode} actions - The actions to be displayed in the accordion header. Optional.
  * @param {boolean} isExpanded - Controlled: whether the accordion is expanded.
  * @param {function} setIsExpanded - Controlled: callback when expanded state changes.
  * @param {boolean} defaultIsExpanded - Uncontrolled: default expanded state (default: false).
- * @returns {JSX.Element} - Legend selector accordion component.
+ * @returns {React.JSX.Element} - Legend selector accordion component.
  */
 export declare const LegendSelectorAccordion: React.FC<LegendSelectorAccordionProps>;
 export {};

package/src/components/legendSelectorMenu/LegendSelectorMenu.d.ts

@@ -8,11 +8,11 @@ interface LegendSelectorMenuProps {
 /**
  * Legend selector component to choose which legend type to display.
  * This component is part of the LegendSelector, but can be used on it's own when needed.
- * @param {JSX.Element[]} options- List of items to be displayed in the menu.
+ * @param {React.JSX.Element[]} options- List of items to be displayed in the menu.
  * @param {string} selectedOption- The selected item.
  * @param {(option: string) => void} onOptionClick - Function that is called when another option is clicked.
  * @param {string} placeholder - Placeholder text to be displayed when no item is selected. Optional.
- * @returns {JSX.Element} - Legend selector menu component.
+ * @returns {React.JSX.Element} - Legend selector menu component.
  */
 export declare const LegendSelectorMenu: React.FC<LegendSelectorMenuProps>;
 export {};

package/src/components/listRow/ListRow.d.ts

@@ -24,6 +24,6 @@ export interface ListRowProps {
  *     }
  *     style: style element to override wrapper style
  * }
- * @return {*}  {JSX.Element} a row element to be used in a list
+ * @return {*}  {React.JSX.Element} a row element to be used in a list
  */
 export declare const ListRow: React.FC<ListRowProps>;

package/src/components/markedContent/MarkedContent.d.ts

@@ -1,8 +1,8 @@
 interface MarkedContentProps {
     backgroundColor: string;
     textColor: string;
-    children: JSX.Element | string[] | string | number;
+    children: React.JSX.Element | string[] | string | number;
     className?: string;
 }
-export declare function MarkedContent({ backgroundColor, textColor, children, className }: Readonly<MarkedContentProps>): JSX.Element;
+export declare function MarkedContent({ backgroundColor, textColor, children, className }: Readonly<MarkedContentProps>): React.JSX.Element;
 export {};

package/src/components/mediaViewer/MediaViewer.d.ts

@@ -10,7 +10,7 @@ interface MediaViewerProps {
     showNextIcon: boolean;
     onClose: () => void;
     open: boolean;
-    children: JSX.Element;
+    children: React.JSX.Element;
     isMobile?: boolean;
 }
 /**

package/src/components/multilineTabs/MultilineTabs.d.ts

@@ -31,7 +31,7 @@ export interface MultilineTabsProps {
  *    initiallyExpanded: The tab panel is expanded on mount.
  *    children: The sectioned tab content.
  * }
- * @returns {*} {JSX.Element} Returns a custom EDS Tab bar and sectioned content.
+ * @returns {*} {React.JSX.Element} Returns a custom EDS Tab bar and sectioned content.
  * @example
  * <MultilineTabs tabs={{title: "Footab"}, {title: "Bartab"}}>
  *   <Tabs.Panels>

package/src/components/rightPanel/menuButton/MenuButton.d.ts

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 interface MenuButtonInterfaceProps {
     text: string;
     active: boolean;
     onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     children: React.ReactNode;
     id?: string;
+    ref?: React.Ref<HTMLButtonElement | null>;
 }
+type MenuButtonProps = MenuButtonInterfaceProps & HTMLAttributes<HTMLButtonElement>;
 /**
  * The menu bottom items
  * On desktop it will have an active border on the left,
@@ -18,7 +20,10 @@ interface MenuButtonInterfaceProps {
  *     onClick, the on click event
  *     id: the id of the button in case its needed
  * }
- * @return {*}  {JSX.Element}
+ * @return {*}  {React.JSX.Element}
  */
-export declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonInterfaceProps & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement | null>>;
+export declare const MenuButton: {
+    ({ text, active, children, onClick, id, ref, ...otherProps }: MenuButtonProps): React.JSX.Element;
+    displayName: string;
+};
 export default MenuButton;

package/src/components/rightPanel/panel/Panel.d.ts

@@ -19,7 +19,7 @@ interface PanelProps {
  * header, the header that will be displayed on mobile.
  * If its a string then it will only display a header text. But it can also be a component with self defined html
  * }
- * @return {*}  {JSX.Element}
+ * @return {*}  {React.JSX.Element}
  */
 export declare const Panel: React.FC<PanelProps>;
 export {};

package/src/components/rightPanel/panelContent/PanelContent.d.ts

@@ -17,7 +17,7 @@ interface PanelContentProps {
  *      to be used in cases where there are panels within panels,
  *     footer: optional param, if used a footer will be shown in the panel content
  * }
- * @return {*}  {JSX.Element}
+ * @return {*}  {React.JSX.Element}
  */
 export declare const PanelContent: React.FC<PanelContentProps>;
 export default PanelContent;

package/src/components/rightPanel/panelContent/PanelContentWrapper.d.ts

@@ -10,7 +10,7 @@ interface PanelContentWrapperProps {
  * @param {PanelContentWrapperProps} {
  *     children, the panels content
  * }
- * @return {*}  {JSX.Element}
+ * @return {*}  {React.JSX.Element}
  */
 export declare const PanelContentWrapper: React.FC<PanelContentWrapperProps>;
 export default PanelContentWrapper;

package/src/components/rightPanel/panelWrapper/PanelWrapper.d.ts

@@ -15,7 +15,7 @@ interface PanelWrapperProps {
  * header, the header that will be displayed on mobile.
  * If its a string then it will only display a header text. But it can also be a component with self defined html
  * }
- * @return {*}  {JSX.Element}
+ * @return {*}  {React.JSX.Element}
  */
 export declare const PanelWrapper: React.FC<PanelWrapperProps>;
 export {};

package/src/components/searchBar/floatingSearchBar/FloatingSearchBar.d.ts

@@ -23,7 +23,7 @@ export interface FloatingSearchBarProps {
  *
  * @param {FloatingSearchBarProps} {
  * }
- * @return {*}  {JSX.Element}
+ * @return {*}  {React.JSX.Element}
  */
-declare const FloatingSearchBar: ({ ariaLabel, placeholder, onSearchQueryChange, suggestionGroups, onSuggestionClick, isLoading, preOpenSuggestionsGroup, defaultValue }: FloatingSearchBarProps) => JSX.Element;
+declare const FloatingSearchBar: ({ ariaLabel, placeholder, onSearchQueryChange, suggestionGroups, onSuggestionClick, isLoading, preOpenSuggestionsGroup, defaultValue }: FloatingSearchBarProps) => React.JSX.Element;
 export { FloatingSearchBar };

package/src/components/searchBar/responsiveSearchBar/ResponsiveSearchBar.d.ts

@@ -24,7 +24,7 @@ export interface Props extends React.HTMLProps<HTMLFormElement> {
  *
  * @param {Props} {
  * }
- * @return {*}  {JSX.Element}
+ * @return {*}  {React.JSX.Element}
  */
 declare const ResponsiveSearchBar: React.FC<Props>;
 export { ResponsiveSearchBar };

package/src/components/sidebarButton/SidebarButton.d.ts

@@ -61,6 +61,6 @@ export interface SidebarButtonProps {
  *     id: the id of the button, in case it's needed.
  *     children: the icon to be displayed.
  * }
- * @return {*}  {JSX.Element}
+ * @return {*}  {React.JSX.Element}
  */
 export declare const SidebarButton: ({ text, active, onClick, count, buttonPosition, refValue, setRefValue, id, children, showIndicator }: SidebarButtonProps) => React.JSX.Element;

package/src/components/sidesheet/index.d.ts

@@ -6,6 +6,6 @@ interface SideSheetProps extends SheetProps, SheetTopAreaProps {
     open: boolean;
     children: React.ReactNode;
 }
-declare function SideSheet({ open, side, orientation, floating, children, className, style, ...topBarProps }: SideSheetProps): JSX.Element | null;
+declare function SideSheet({ open, side, orientation, floating, children, className, style, ...topBarProps }: SideSheetProps): React.JSX.Element | null;
 export { SideSheet, SideSheetOrientation };
 export type { SideSheetProps };

package/src/components/sidesheet/sheetTopArea/SheetTopArea.d.ts

@@ -11,7 +11,7 @@ interface SheetTopAreaProps extends Partial<SheetOrientationActionsProps> {
     /** If omitted, all orientation toggles are rendered. */
     enabledOrientations?: EnabledOrientations;
 }
-declare function SheetTopArea({ orientation, onOrientationChange, closeSheet, previous, enabledOrientations, side }: SheetTopAreaProps): JSX.Element | null;
+declare function SheetTopArea({ orientation, onOrientationChange, closeSheet, previous, enabledOrientations, side }: SheetTopAreaProps): React.JSX.Element | null;
 interface SheetOrientationActionsProps {
     orientation: SideSheetOrientation;
     enabledOrientations: EnabledOrientations;

package/src/components/splitView/SplitView.d.ts

@@ -4,11 +4,11 @@ interface BaseProps {
     style?: CSSProperties;
 }
 interface SplitViewProps extends BaseProps {
-    children: [React.ReactChild, React.ReactChild | undefined];
+    children: [React.ReactNode, React.ReactNode | undefined];
 }
 declare function SplitView({ className, style, children }: SplitViewProps): import("react/jsx-runtime").JSX.Element;
 interface RightProps extends BaseProps {
-    children: React.ReactChild;
+    children: React.ReactNode;
 }
 declare function Right({ className, style, children }: RightProps): import("react/jsx-runtime").JSX.Element;
 export { Right, SplitView };

package/src/components/splitView/left/SplitViewLeft.d.ts

@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 interface LeftProps {
     className?: string;
     style?: CSSProperties;
-    children: React.ReactChild;
+    children: React.ReactNode;
     isMinimizable?: boolean;
     defaultMinimized?: boolean;
 }

package/src/components/tagContextMenu/TagContextMenu.d.ts

@@ -24,7 +24,7 @@ interface TagContextMenuProps {
  *     selectedClassName: styling used to handle multiple tag visible on the page at the same time, class will be added to tagIcon when context menu is not expanded
  *     children: Meant to be used to pass TagIcon component to this component
  * }
- * @return {*}  {JSX.Element} a tag context menu for the provided properties
+ * @return {*}  {React.JSX.Element} a tag context menu for the provided properties
  */
 export declare const TagContextMenu: React.FC<TagContextMenuProps>;
 export default TagContextMenu;

package/src/components/titleAndStatusLabel/titleAndStatusLabel.d.ts

@@ -11,7 +11,7 @@ interface TitleAndStatusLabelProps {
  *    statusText: the status text
  *    statusColor: sets the color of the status label
  * }
- * @returns {*} {JSX.Element} Returns a title with its status label
+ * @returns {*} {React.JSX.Element} Returns a title with its status label
  */
 export declare const TitleAndStatusLabel: React.FC<TitleAndStatusLabelProps>;
 export {};

package/src/components/visualTextIcon/visualTextIcon.d.ts

@@ -12,7 +12,7 @@ interface VisualTextIconProps {
  *    visualText: text that replaces the icon
  *    backgroundColor: sets the background color of the element
  * }
- * @returns {*} {JSX.Element} Visual Text Icon that can be used to replace the traditional icon in cards, list items etc.
+ * @returns {*} {React.JSX.Element} Visual Text Icon that can be used to replace the traditional icon in cards, list items etc.
  */
 export declare const VisualTextIcon: React.FC<VisualTextIconProps>;
 export {};

package/src/elements/draggableItemsWrapper/DraggableItemsWrapper.d.ts

@@ -13,6 +13,6 @@ export interface DraggableItemsWrapperProps {
  *     onChange: method that will be called when elements have be reordered inside the wrapper
  *     children: list of elements that can be reordered
  * }
- * @return {*}  {JSX.Element}
+ * @return {*}  {React.JSX.Element}
  */
 export declare const DraggableItemsWrapper: React.FC<DraggableItemsWrapperProps>;

package/src/elements/icon/Icon.d.ts

@@ -15,6 +15,6 @@ export interface IconProps {
  *  color: The color the icon should have (optional - defaults to CSS-controlled color)
  *  size: The wanted size of the icon. Possible values are 16, 24, 32, 40 and 48
  * }
- * @return {*} {JSX.Element} A icon for the provided information
+ * @return {*} {React.JSX.Element} A icon for the provided information
  */
 export declare const Icon: React.FC<IconProps>;