@oslokommune/punkt-react 14.5.0 → 14.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "14.5.0",
+  "version": "14.5.2",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,13 +39,16 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^14.4.0",
+    "@oslokommune/punkt-elements": "^14.5.2",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+    "@eslint/compat": "^2.0.2",
+    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^14.1.1",
     "@oslokommune/punkt-css": "^14.1.1",
     "@testing-library/jest-dom": "^6.5.0",
@@ -60,7 +63,10 @@
     "eslint": "^9.37.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
+    "globals": "^14.0.0",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -103,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "99da0f4bd7b0e82a441d6c4837fdb5b0a96ef08b"
+  "gitHead": "fd47b46c754cf9df72186df66db3f17d2bb925b4"
 }

package/src/components/accordion/Accordion.test.tsx

@@ -1,9 +1,11 @@
 import '@testing-library/jest-dom'
+
+import { fireEvent,render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { createRef } from 'react'
+
 import { PktAccordion } from './Accordion'
 import { PktAccordionItem } from './AccordionItem'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { createRef } from 'react'
 
 expect.extend(toHaveNoViolations)
 

package/src/components/accordion/Accordion.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { ReactNode, forwardRef, createContext, useContext } from 'react'
+import { createContext, forwardRef, ReactNode, useContext } from 'react'
 import type { TAccordionSkin } from 'shared-types'
 
 export type TPktAccordionSkin = TAccordionSkin

package/src/components/accordion/AccordionItem.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import { ReactNode, useState, useEffect, forwardRef } from 'react'
-import type { MouseEvent, SyntheticEvent } from 'react'
+import { forwardRef, type MouseEvent, type ReactNode, type SyntheticEvent,useEffect, useState } from 'react'
+import type { TAccordionSkin } from 'shared-types'
+
 import { PktIcon } from '../icon/Icon'
 import { useAccordionContext } from './Accordion'
-import type { TAccordionSkin } from 'shared-types'
 
 export type TPktAccordionSkin = TAccordionSkin
 

package/src/components/alert/Alert.test.tsx

@@ -1,10 +1,9 @@
-import { render, fireEvent, waitFor } from '@testing-library/react'
-import { axe, toHaveNoViolations } from 'jest-axe'
-import { PktAlert } from './Alert'
+import '@testing-library/jest-dom'
 
-import { cleanup } from '@testing-library/react'
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
 
-import '@testing-library/jest-dom'
+import { PktAlert } from './Alert'
 
 expect.extend(toHaveNoViolations)
 

package/src/components/alert/Alert.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import { ReactNode, useState } from 'react'
-import { FC, HTMLAttributes, ReactElement, useCallback } from 'react'
 import classNames from 'classnames'
+import { FC, HTMLAttributes, ReactElement, ReactNode, useCallback, useState } from 'react'
+import type { TAlertRole, TAlertSkin,TAriaLive } from 'shared-types'
+
 import { PktButton, PktIcon } from '..'
-import type { TAlertRole, TAriaLive, TAlertSkin } from 'shared-types'
 
 export interface IPktAlert extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   skin?: TAlertSkin
@@ -48,8 +48,9 @@ export const PktAlert: FC<IPktAlert> = ({
 
   const onClose = useCallback(() => {
     setIsClosed(true)
-    props.onClose &&
+    if (props.onClose) {
       props.onClose(new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }))
+    }
   }, [props.onClose, setIsClosed])
 
   const ariaLive = ariaLiveCamel || ariaLiveKebab

package/src/components/backlink/BackLink.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import React, { ForwardRefExoticComponent, LegacyRef, AnchorHTMLAttributes, MouseEventHandler } from 'react'
 import { createComponent } from '@lit/react'
-import { PktBackLink as PktElBackLink } from '@oslokommune/punkt-elements'
-import type { IPktBackLink as IPktElBackLink } from '@oslokommune/punkt-elements'
+import { type IPktBackLink as IPktElBackLink, PktBackLink as PktElBackLink } from '@oslokommune/punkt-elements'
+// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
+import React, { AnchorHTMLAttributes, ForwardRefExoticComponent, LegacyRef, MouseEventHandler } from 'react'
 
 type ExtendedBackLink = Omit<IPktElBackLink, 'text'> & AnchorHTMLAttributes<HTMLAnchorElement>
 

package/src/components/breadcrumbs/Breadcrumbs.test.tsx

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { ReactNode } from 'react'
 import { BrowserRouter as Router } from 'react-router-dom'
 
 import { PktBreadcrumbs } from './Breadcrumbs'
@@ -7,10 +8,12 @@ import { PktBreadcrumbs } from './Breadcrumbs'
 expect.extend(toHaveNoViolations)
 
 // Create a Router with future flags to suppress warnings
-const TestRouter = ({ children }: { children: React.ReactNode }) => (
+const TestRouter = ({ children }: { children: ReactNode }) => (
   <Router
     future={{
+      // eslint-disable-next-line camelcase
       v7_startTransition: true,
+      // eslint-disable-next-line camelcase
       v7_relativeSplatPath: true,
     }}
   >

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import { ForwardedRef, forwardRef } from 'react'
-import type { AnchorHTMLAttributes, ReactNode } from 'react'
+import { ForwardedRef, forwardRef, type AnchorHTMLAttributes, type ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 
-import PktIcon from '../icon/Icon'
+import { PktIcon } from '../icon/Icon'
 
 export interface IBreadcrumbs {
   text: string
@@ -91,5 +90,4 @@ export const PktBreadcrumbs = forwardRef(
     )
   },
 )
-
-export default PktBreadcrumbs
+PktBreadcrumbs.displayName = 'PktBreadcrumbs'

package/src/components/button/Button.test.tsx

@@ -1,10 +1,12 @@
+import '@testing-library/jest-dom'
+
 import { render, screen } from '@testing-library/react'
-import { useForm } from 'react-hook-form'
 import userEvent from '@testing-library/user-event'
-import { createRef } from 'react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { createRef } from 'react'
+import { useForm } from 'react-hook-form'
+
 import { PktButton } from './Button'
-import '@testing-library/jest-dom'
 
 expect.extend(toHaveNoViolations)
 

package/src/components/button/Button.tsx

@@ -1,6 +1,5 @@
 'use client'
-import { ForwardedRef, forwardRef } from 'react'
-import type { ButtonHTMLAttributes } from 'react'
+import { type ButtonHTMLAttributes,ForwardedRef, forwardRef } from 'react'
 
 import { PktIcon } from '../icon/Icon'
 declare global {

package/src/components/card/Card.tsx

@@ -1,12 +1,15 @@
 'use client'
 
-import React, { FC, ReactElement, forwardRef, ReactNode, ForwardedRef } from 'react'
 import { createComponent } from '@lit/react'
 import { IPktHeading, PktCard as PktElCard } from '@oslokommune/punkt-elements'
-import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
-import { IPktTag } from '../tag/Tag'
+// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
+import React, { FC, ForwardedRef, forwardRef, type ReactElement } from 'react'
 import type { TCardSkin, TLayout } from 'shared-types'
 
+import type { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
+
+import { IPktTag } from '../tag/Tag'
+
 export type { TCardSkin, TLayout }
 type TCardPadding = 'none' | 'default'
 type TCardImageShape = 'square' | 'round'

package/src/components/checkbox/Checkbox.test.tsx

@@ -84,7 +84,7 @@ describe('PktCheckbox', () => {
 
   test('indeterminate state is independent of checked state', async () => {
     const { getByRole } = render(
-      <PktCheckbox id="myCheckbox" label="My Checkbox" indeterminate={true} checked={true} />,
+      <PktCheckbox id="myCheckbox" label="My Checkbox" indeterminate={true} checked={true} readOnly />,
     )
 
     const checkbox = getByRole('checkbox') as HTMLInputElement

package/src/components/checkbox/Checkbox.tsx

@@ -1,5 +1,13 @@
-import { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode, ReactElement, useEffect, useRef } from 'react'
-import type { InputHTMLAttributes } from 'react'
+import {
+  ChangeEventHandler,
+  ForwardedRef,
+  forwardRef,
+  type InputHTMLAttributes,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useRef,
+} from 'react'
 
 export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
   id: string

package/src/components/combobox/Combobox.tsx

@@ -1,19 +1,20 @@
 'use client'
 
+import { createComponent, EventName } from '@lit/react'
+import { type IPktCombobox as IPktElCombobox, PktCombobox as PktElCombobox } from '@oslokommune/punkt-elements'
+// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
 import React, {
-  ForwardRefExoticComponent,
-  ReactNode,
-  SelectHTMLAttributes,
   ChangeEventHandler,
-  FocusEventHandler,
   FC,
-  LegacyRef,
+  FocusEventHandler,
   forwardRef,
+  ForwardRefExoticComponent,
+  LegacyRef,
   MouseEventHandler,
+  type ReactNode,
+  SelectHTMLAttributes,
 } from 'react'
-import { PktCombobox as PktElCombobox } from '@oslokommune/punkt-elements'
-import type { IPktCombobox as IPktElCombobox } from '@oslokommune/punkt-elements'
-import { createComponent, EventName } from '@lit/react'
+
 import { PktEventWithTarget } from '@/interfaces/IPktElements'
 
 type ExtendedCombobox = Omit<IPktElCombobox, 'helptext'> & SelectHTMLAttributes<HTMLSelectElement>

package/src/components/consent/Consent.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import React, { ForwardRefExoticComponent, LegacyRef } from 'react'
 import { createComponent, EventName } from '@lit/react'
-import { PktConsent as PktElConsent } from '@oslokommune/punkt-elements'
-import type { IPktConsent as IPktElConsent } from '@oslokommune/punkt-elements'
+import { type IPktConsent as IPktElConsent, PktConsent as PktElConsent } from '@oslokommune/punkt-elements'
+// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
+import React, { ForwardRefExoticComponent, LegacyRef } from 'react'
 
 export interface IPktConsent extends IPktElConsent {
   ref?: LegacyRef<HTMLDivElement>

package/src/components/datepicker/Datepicker.test.tsx

@@ -1,7 +1,9 @@
 import '@testing-library/jest-dom'
+
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import { PktDatepicker, IPktDatepicker } from './Datepicker'
+
+import { IPktDatepicker,PktDatepicker } from './Datepicker'
 
 const datePickerId = 'datepickerId'
 const label = 'Date Picker Label'

package/src/components/datepicker/Datepicker.tsx

@@ -1,19 +1,21 @@
 'use client'
 
+import { createComponent, EventName } from '@lit/react'
+import { PktDatepicker as PktEl } from '@oslokommune/punkt-elements'
+// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
 import React, {
-  ForwardRefExoticComponent,
-  LegacyRef,
   ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-  InputHTMLAttributes,
   FC,
-  ReactElement,
+  FocusEventHandler,
   ForwardedRef,
   forwardRef,
+  ForwardRefExoticComponent,
+  InputHTMLAttributes,
+  LegacyRef,
+  ReactElement,
+  ReactNode,
 } from 'react'
-import { createComponent, EventName } from '@lit/react'
-import { PktDatepicker as PktEl } from '@oslokommune/punkt-elements'
+
 import type { PktEventWithTarget } from '@/interfaces/IPktElements'
 
 // This component will be entirely rebuilt ASAP.
@@ -44,6 +46,7 @@ export interface IPktDatepicker extends InputHTMLAttributes<HTMLInputElement> {
   helptextDropdownButton?: string
   hasError?: boolean
   errorMessage?: string | ReactNode | ReactNode[]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a temporary escape hatch until we have a proper type for the strings prop
   strings?: any
   ref?: LegacyRef<HTMLInputElement>
   onChange?: ChangeEventHandler<HTMLInputElement>

package/src/components/footer/Footer.test.tsx

@@ -1,9 +1,9 @@
 // Test med axe https://www.npmjs.com/package/jest-axe
 import '@testing-library/jest-dom'
 
-import { render, screen } from '../../utils/test-utils'
 import { axe, toHaveNoViolations } from 'jest-axe'
 
+import { render, screen } from '../../utils/test-utils'
 import { PktFooter } from './Footer'
 
 expect.extend(toHaveNoViolations)

package/src/components/footer/Footer.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import { FC, Fragment } from 'react'
-import type { HTMLAttributes } from 'react'
+import { FC, Fragment, type HTMLAttributes } from 'react'
 
-import { PktIcon } from '../icon/Icon'
 import { PktConsent } from '../consent/Consent'
+import { PktIcon } from '../icon/Icon'
 
 interface Link {
   href: string
@@ -59,6 +58,7 @@ export const PktFooter: FC<IPktFooter> = ({
   cookieSecure = null,
   cookieExpiryDays = null,
   onToggleConsent = (e: CustomEvent) => {
+    // eslint-disable-next-line no-console
     console.log(e.detail)
   },
 }) => {

package/src/components/footerSimple/FooterSimple.test.tsx

@@ -1,9 +1,9 @@
 // Test med axe https://www.npmjs.com/package/jest-axe
 import '@testing-library/jest-dom'
 
-import { render } from '../../utils/test-utils'
 import { axe, toHaveNoViolations } from 'jest-axe'
 
+import { render } from '../../utils/test-utils'
 import { PktFooterSimple } from './FooterSimple'
 
 expect.extend(toHaveNoViolations)

package/src/components/footerSimple/FooterSimple.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import { FC } from 'react'
-import type { HTMLAttributes } from 'react'
+import { FC, type HTMLAttributes } from 'react'
 
-import { PktIcon } from '../icon/Icon'
 import { PktConsent } from '../consent/Consent'
+import { PktIcon } from '../icon/Icon'
 
 export interface IPktFooterSimple extends HTMLAttributes<HTMLDivElement> {
   links?: Array<{
@@ -39,6 +38,7 @@ export const PktFooterSimple: FC<IPktFooterSimple> = ({
   cookieSecure = null,
   cookieExpiryDays = null,
   onToggleConsent = (e: CustomEvent) => {
+    // eslint-disable-next-line no-console
     console.log(e.detail)
   },
   className,

package/src/components/header/Header.test.tsx

@@ -2,7 +2,6 @@ import '@testing-library/jest-dom'
 
 import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import React from 'react'
 import { vi } from 'vitest'
 
 import { PktHeader } from './Header'

package/src/components/header/Header.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { ForwardedRef, forwardRef } from 'react'
+
 import { PktHeaderService } from './HeaderService'
 import { IPktHeader } from './types'
 

package/src/components/header/HeaderService.test.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom'
+
+import { fireEvent, render, screen } from '@testing-library/react'
 import { vi } from 'vitest'
-import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
 
 //mock element width to control mobile/desktop behavior
 let mockedWidth = 1280

package/src/components/header/HeaderService.tsx

@@ -1,17 +1,31 @@
 'use client'
 
-import { ForwardedRef, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import classNames from 'classnames'
+import {
+  type ChangeEvent,
+  type FocusEvent,
+  ForwardedRef,
+  forwardRef,
+  type KeyboardEvent,
+  type MutableRefObject,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import { useElementWidth } from '../../hooks/useElementWidth'
+import { useScrollLock } from '../../hooks/useScrollLock'
 import { PktButton } from '../button/Button'
 import { PktHeaderUserMenu } from '../headerUserMenu/UserMenu'
 import { PktIcon } from '../icon/Icon'
 import { PktLink } from '../link/Link'
 import { PktTextinput } from '../textinput/Textinput'
-import { useElementWidth } from '../../hooks/useElementWidth'
-import classNames from 'classnames'
-import { useScrollLock } from '../../hooks/useScrollLock'
-import { User, Representing, UserMenuItem, UserMenuFooterItem, IPktHeader, THeaderMenu } from './types'
+import { IPktHeader, Representing, THeaderMenu, User, UserMenuFooterItem, UserMenuItem } from './types'
 
-export type { User, Representing, UserMenuItem, UserMenuFooterItem, THeaderMenu }
+export type { Representing, THeaderMenu, User, UserMenuFooterItem, UserMenuItem }
 export type IPktHeaderService = IPktHeader
 
 export const PktHeaderService = forwardRef(
@@ -57,6 +71,7 @@ export const PktHeaderService = forwardRef(
     // Deprecation warning for userMenuFooter
     useEffect(() => {
       if (userMenuFooter) {
+        // eslint-disable-next-line no-console
         console.warn(
           'PktHeaderService: The "userMenuFooter" prop is deprecated and will be removed in a future version. Please use "userMenu" instead.',
         )
@@ -66,6 +81,7 @@ export const PktHeaderService = forwardRef(
     // Warning for userOptions - no longer available
     useEffect(() => {
       if (userOptions) {
+        // eslint-disable-next-line no-console
         console.warn('PktHeaderService: The "userOptions" prop is no longer available. Please use "userMenu" instead.')
       }
     }, [userOptions])
@@ -73,11 +89,13 @@ export const PktHeaderService = forwardRef(
     // Deprecation warning for shortname
     useEffect(() => {
       if (user?.shortname) {
+        // eslint-disable-next-line no-console
         console.warn(
           'PktHeaderService: The "shortname" property on the user object is deprecated and will be removed in a future version.',
         )
       }
       if (representing?.shortname) {
+        // eslint-disable-next-line no-console
         console.warn(
           'PktHeaderService: The "shortname" property on the representing object is deprecated and will be removed in a future version.',
         )
@@ -117,11 +135,11 @@ export const PktHeaderService = forwardRef(
 
     const setRefs = useCallback(
       (element: HTMLDivElement | null) => {
-        ;(internalRef as React.MutableRefObject<HTMLDivElement | null>).current = element
+        ;(internalRef as MutableRefObject<HTMLDivElement | null>).current = element
         if (typeof ref === 'function') {
           ref(element)
         } else if (ref) {
-          ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = element
+          ;(ref as MutableRefObject<HTMLDivElement | null>).current = element
         }
       },
       [ref],
@@ -129,10 +147,10 @@ export const PktHeaderService = forwardRef(
 
     useScrollLock(isFixed && isMobile && openMenu !== 'none')
 
-    const handleFocusOut = useCallback((event: React.FocusEvent<HTMLDivElement>, menuType: THeaderMenu) => {
+    const handleFocusOut = useCallback((event: FocusEvent<HTMLDivElement>, menuType: THeaderMenu) => {
       const relatedTarget = event.relatedTarget as HTMLElement | null
 
-      let containerRef: React.RefObject<HTMLDivElement>
+      let containerRef: RefObject<HTMLDivElement>
       switch (menuType) {
         case 'user':
           containerRef = userContainerRef
@@ -184,7 +202,7 @@ export const PktHeaderService = forwardRef(
         }
       }
 
-      const handleEscapeKey = (event: KeyboardEvent) => {
+      const handleEscapeKey = (event: globalThis.KeyboardEvent) => {
         if (event.key === 'Escape' && openMenu !== 'none') {
           event.preventDefault()
           shouldRestoreFocusRef.current = true
@@ -410,8 +428,8 @@ export const PktHeaderService = forwardRef(
                         value={searchValue}
                         autoFocus
                         fullwidth={true}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange?.(e.target.value)}
-                        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                        onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange?.(e.target.value)}
+                        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
                           if (e.key === 'Enter') {
                             onSearch?.((e.target as HTMLInputElement).value)
                           }
@@ -429,8 +447,8 @@ export const PktHeaderService = forwardRef(
                   useWrapper={false}
                   placeholder={searchPlaceholder}
                   value={searchValue}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange?.(e.target.value)}
-                  onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange?.(e.target.value)}
+                  onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
                     if (e.key === 'Enter') {
                       onSearch?.((e.target as HTMLInputElement).value)
                     }
@@ -527,3 +545,4 @@ export const PktHeaderService = forwardRef(
     return headerElement
   },
 )
+PktHeaderService.displayName = 'PktHeaderService'

package/src/components/header/types.ts

@@ -1,18 +1,18 @@
-import { TBreakpoint } from '../../types/breakpoint'
+import type { MouseEvent, ReactNode } from 'react'
 import type {
-  TSlotMenuVariant,
   THeaderMenu,
-  TLogOutButtonPlacement,
   THeaderPosition,
   THeaderScrollBehavior,
+  TLogOutButtonPlacement,
+  TSlotMenuVariant,
 } from 'shared-types'
 
 export type {
-  TSlotMenuVariant,
   THeaderMenu,
-  TLogOutButtonPlacement,
   THeaderPosition,
   THeaderScrollBehavior,
+  TLogOutButtonPlacement,
+  TSlotMenuVariant,
 }
 
 /** User object for header components */
@@ -45,7 +45,7 @@ export interface UserMenuFooterItem {
 }
 
 export interface IPktHeader {
-  children?: React.ReactNode
+  children?: ReactNode
   /** Additional CSS class name(s) to apply to the header */
   className?: string
   /** Set dark mode on the header */
@@ -55,13 +55,13 @@ export interface IPktHeader {
   /** Link URL for the logo */
   logoLink?: string
   /** Callback when logo is clicked */
-  logoClick?: (event: React.MouseEvent) => void
+  logoClick?: (event: MouseEvent) => void
   /** Name of the service displayed in the header */
   serviceName?: string
   /** Link URL for the service name */
   serviceLink?: string
   /** Callback when service name is clicked */
-  serviceClick?: (event: React.MouseEvent) => void
+  serviceClick?: (event: MouseEvent) => void
   /** Use compact header height */
   compact?: boolean
   /** User object with name, shortname, and lastLoggedIn */

package/src/components/headerUserMenu/UserMenu.test.tsx

@@ -1,11 +1,11 @@
 import '@testing-library/jest-dom'
-import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
+
+import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { vi } from 'vitest'
 
-import { PktHeaderUserMenu } from './UserMenu'
 import { UserMenuItem } from '../header/types'
+import { PktHeaderUserMenu } from './UserMenu'
 
 expect.extend(toHaveNoViolations)