chore: use ReactElement instead of JSX Element

Author: nuranes

Diff for: README.md

@@ -40,7 +40,7 @@ interface Props {
     aktivePage: Pages;
 }
 
-function MyAppsSideMenu({ sykmeldt }: Props): JSX.Element {
+function MyAppsSideMenu({ sykmeldt }: Props): ReactElement {
     return (
         <SideMenu
             sykmeldtName={sykmeldt.navn}

Diff for: example/pages/_app.tsx

@@ -2,10 +2,10 @@ import '../styles/globals.css'
 import '@navikt/dinesykmeldte-sidemeny/dist/style.css'
 
 import type { AppProps } from 'next/app'
-import { useEffect } from 'react'
+import { ReactElement, useEffect } from 'react'
 import { setBreadcrumbs } from '@navikt/nav-dekoratoren-moduler'
 
-function MyApp({ Component, pageProps }: AppProps): JSX.Element {
+function MyApp({ Component, pageProps }: AppProps): ReactElement {
     useEffect(() => {
         setBreadcrumbs([
             { title: 'Bread', url: '/' },

Diff for: library/lib/PageContainer/PageHeader/PageHeader.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactNode } from 'react'
+import React, { PropsWithChildren, ReactElement, ReactNode } from 'react'
 import { Skeleton, BodyShort, Heading } from '@navikt/ds-react'
 import { BandageIcon } from '@navikt/aksel-icons'
 import cn from 'clsx'
@@ -18,7 +18,7 @@ interface Props {
     hideHeaderOnMobile?: boolean
 }
 
-function PageHeader({ header, headerRight, hideHeaderOnMobile, children }: PropsWithChildren<Props>): JSX.Element {
+function PageHeader({ header, headerRight, hideHeaderOnMobile, children }: PropsWithChildren<Props>): ReactElement {
     return (
         <>
             {typeof header === 'object' && (

Diff for: library/lib/SideMenu/ExpandableMobileMenu/ExpandableMobileMenu.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react'
+import React, { PropsWithChildren, ReactElement } from 'react'
 import { Accordion, BodyShort, Heading } from '@navikt/ds-react'
 import { PersonIcon } from '@navikt/aksel-icons'
 import cn from 'clsx'
@@ -18,7 +18,7 @@ export const ExpandableMobileMenu = ({
     sykmeldtFnr,
     children,
     className,
-}: PropsWithChildren<Props>): JSX.Element => {
+}: PropsWithChildren<Props>): ReactElement => {
     return (
         <Accordion className={cn(styles.accordionMobileRoot, className)}>
             <Accordion.Item>

Diff for: library/lib/SideMenu/MenuItem/DynamicIcon.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { ArrowLeftIcon, BandageIcon } from '@navikt/aksel-icons'
 
 import { NotifcationDot } from '../../NotificationDot/NotificationDot'
@@ -9,7 +9,7 @@ interface Props {
     notifications: number
 }
 
-function DynamicIcon({ Icon, childActive, notifications }: Props): JSX.Element {
+function DynamicIcon({ Icon, childActive, notifications }: Props): ReactElement {
     if (childActive) {
         return <ArrowLeftIcon role="img" aria-hidden />
     } else if (notifications > 0) {

Diff for: library/lib/SideMenu/MenuItem/MenuItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Button } from '@navikt/ds-react'
 import cn from 'clsx'
 
@@ -16,7 +16,7 @@ interface Props {
     route: RouteVariant
 }
 
-function MenuItem({ sykmeldtId, page, activePage, route }: Props): JSX.Element | null {
+function MenuItem({ sykmeldtId, page, activePage, route }: Props): ReactElement | null {
     // Hide if route is sett to false
     if (typeof route === 'boolean') return null
     // Also hide if custom route with hidden true

Diff for: library/lib/SideMenu/MenuItem/SubMenuItem.tsx

@@ -1,13 +1,13 @@
 import cn from 'clsx'
 import { Label } from '@navikt/ds-react'
-import React from 'react'
+import React, { ReactElement } from 'react'
 
 import { ChildPages } from '../../types'
 
 import { pageToIcon } from './MenuItemUtils'
 import styles from './SubMenuItem.module.css'
 
-export function SubMenuItem({ page }: { page: ChildPages }): JSX.Element {
+export function SubMenuItem({ page }: { page: ChildPages }): ReactElement {
     const Icon = pageToIcon(page)
 
     return (

Diff for: library/lib/types.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, ReactElement } from 'react'
 
 export enum RootPages {
     Sykmeldinger = 'Sykmeldinger',
@@ -19,7 +19,7 @@ export enum ChildPages {
 
 export type Pages = RootPages | ChildPages
 
-export type Route = (props: PropsWithChildren<{ className?: string }>) => JSX.Element
+export type Route = (props: PropsWithChildren<{ className?: string }>) => ReactElement
 
 export type RouteVariant =
     | number