@oslokommune/punkt-react 14.5.0 → 14.5.2

package/src/components/headerUserMenu/UserMenu.tsx

@@ -1,10 +1,11 @@
 'use client'
 
+import classNames from 'classnames'
 import { ForwardedRef, forwardRef } from 'react'
+
+import { Representing, User, UserMenuItem } from '../header/types'
 import { PktIcon } from '../icon/Icon'
 import { PktLink } from '../link/Link'
-import { User, Representing, UserMenuItem } from '../header/types'
-import classNames from 'classnames'
 
 // Internal type for rendering links/buttons (supports both href and onClick)
 interface IInternalMenuItemBase {
@@ -60,6 +61,7 @@ const LinkOrButtonComponent = ({ item, className }: { item: TInternalMenuItem; c
         if ('onClick' in item && typeof item.onClick === 'function') {
           item.onClick()
         } else {
+          // eslint-disable-next-line no-console
           console.error('UserMenuButton item is missing onClick handler or onClick is not a function:', item)
         }
       }}
@@ -171,3 +173,5 @@ export const PktHeaderUserMenu = forwardRef(
     )
   },
 )
+
+PktHeaderUserMenu.displayName = 'PktHeaderUserMenu'

package/src/components/heading/Heading.test.tsx

@@ -1,8 +1,10 @@
 import '@testing-library/jest-dom'
+
+import { render, screen, waitFor } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { createRef } from 'react'
+
 import { PktHeading } from './Heading'
-import { render, screen, waitFor } from '@testing-library/react'
-import React, { createRef } from 'react'
 
 expect.extend(toHaveNoViolations)
 

package/src/components/heading/Heading.tsx

@@ -1,14 +1,15 @@
 'use client'
 
 import { createComponent } from '@lit/react'
-import { FC, forwardRef } from 'react'
+import { IPktHeading as IPktElHeading, PktHeading as PktElHeading } from '@oslokommune/punkt-elements'
+// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
+import React, { FC, forwardRef, ForwardRefExoticComponent, type LegacyRef, type ReactNode } from 'react'
+
 import { PktElConstructor } from '@/interfaces/IPktElements'
-import { PktHeading as PktElHeading, IPktHeading as IPktElHeading } from '@oslokommune/punkt-elements'
-import React, { ForwardRefExoticComponent } from 'react'
 
 export interface IPktHeading extends IPktElHeading {
-  children?: React.ReactNode | React.ReactNode[]
-  ref?: React.LegacyRef<HTMLElement>
+  children?: ReactNode | ReactNode[]
+  ref?: LegacyRef<HTMLElement>
 }
 
 const LitComponent: FC<IPktHeading> = createComponent({

package/src/components/helptext/Helptext.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import React, { ForwardRefExoticComponent, ReactNode, LegacyRef, FC, forwardRef, HTMLAttributes } from 'react'
-import { PktHelptext as PktElHelptext } from '@oslokommune/punkt-elements'
 import { createComponent, EventName } from '@lit/react'
+import { PktHelptext as PktElHelptext } from '@oslokommune/punkt-elements'
+// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
+import React, { FC, forwardRef, ForwardRefExoticComponent, HTMLAttributes, LegacyRef, type ReactNode } from 'react'
 
 export interface IPktHelptextProps extends HTMLAttributes<HTMLDivElement> {
   helptext?: string | ReactNode | ReactNode[]

package/src/components/icon/Icon.test.tsx

@@ -1,7 +1,6 @@
 import '@testing-library/jest-dom'
 
 import { render, screen, waitFor } from '../../utils/test-utils'
-
 import { PktIcon } from './Icon'
 
 declare global {

package/src/components/icon/Icon.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import React, { FC } from 'react'
-
-import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
 import { createComponent } from '@lit/react'
 import { PktIcon as PktEl } from '@oslokommune/punkt-elements'
+// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
+import React, { FC } from 'react'
 import type { Booleanish } from 'shared-types'
 
+import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
+
 interface IPktIcon extends PktElType {
   name?: string
   path?: string
@@ -20,5 +21,3 @@ export const PktIcon: FC<IPktIcon> = createComponent({
   displayName: 'PktIcon',
   events: {},
 })
-
-export default PktIcon

package/src/components/input/Input.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { ForwardedRef, forwardRef } from 'react'
-import type { InputHTMLAttributes } from 'react'
+import { ForwardedRef, forwardRef, type InputHTMLAttributes, type ReactElement } from 'react'
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   /** The input's label */
@@ -15,15 +14,15 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  * @param {string} label - Label for the input
  * @param {string} id - Id for the input
  * @param {string} validationMessage - Validation message for the input
- * @param {React.InputHTMLAttributes<HTMLInputElement>} props - Other props to pass to the input
- * @returns {React.ReactElement} - React element
+ * @param {InputHTMLAttributes<HTMLInputElement>} props - Other props to pass to the input
+ * @returns {ReactElement} - React element
  *
  * @example
  * <Input label="First name" id="firstName" validationMessage="First name is required" />
  *
  */
 export const PktInput = forwardRef(
-  ({ label, id, children, ...props }: InputProps, ref: ForwardedRef<HTMLInputElement>): React.ReactElement => {
+  ({ label, id, children, ...props }: InputProps, ref: ForwardedRef<HTMLInputElement>): ReactElement => {
     return (
       <div className="pkt-form-group">
         <label htmlFor={id} className="pkt-form-label">

package/src/components/inputwrapper/InputWrapper.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { ForwardedRef, forwardRef, ReactNode, RefAttributes, useState, MouseEvent } from 'react'
+import { ForwardedRef, forwardRef, type ReactNode, RefAttributes, useState } from 'react'
+
 import { PktAlert } from '../alert/Alert'
 import { PktButton } from '../button/Button'
 

package/src/components/interfaces.ts

@@ -19,8 +19,8 @@ export type { IPktMessagebox } from './messagebox/Messagebox'
 export type { IPktModal } from './modal/Modal'
 export type { IPktProgressbar } from './progressbar/Progressbar'
 export type { IPktRadioButton } from './radio/RadioButton'
-export type { IPktStepper } from './stepper/Stepper'
 export type { IPktStep } from './stepper/Step'
+export type { IPktStepper } from './stepper/Stepper'
 export type { IPktTab } from './tabs/Tabs'
 export type { IPktTag } from './tag/Tag'
 export type { IPktTextarea } from './textarea/Textarea'

package/src/components/loader/Loader.test.tsx

@@ -1,5 +1,4 @@
 import '@testing-library/jest-dom'
-import React from 'react'
 
 import { render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'

package/src/components/loader/Loader.tsx

@@ -1,13 +1,15 @@
 'use client'
 
-import React, { forwardRef, ForwardedRef, FC, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
-import { PktLoader as PktElLoader } from '@oslokommune/punkt-elements'
-import type { IPktLoader as IPktElLoader } from '@oslokommune/punkt-elements'
-import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
+import { type IPktLoader as IPktElLoader, PktLoader as PktElLoader } from '@oslokommune/punkt-elements'
+// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
+import React, { FC, ForwardedRef, forwardRef, type ReactElement } from 'react'
+
+import type { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
 
 type ExtendedLoader = IPktElLoader & PktElType
 
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface IPktLoader extends ExtendedLoader {}
 
 const LitComponent: FC<IPktLoader> = createComponent({

package/src/components/messagebox/Messagebox.tsx

@@ -2,9 +2,9 @@
 
 import classNames from 'classnames'
 import { createRef, FC, HTMLAttributes, ReactNode, useCallback, useState } from 'react'
+import type { TMessageboxSkin } from 'shared-types'
 
 import { PktIcon } from '..'
-import type { TMessageboxSkin } from 'shared-types'
 
 export type { TMessageboxSkin }
 

package/src/components/modal/Modal.test.tsx

@@ -1,11 +1,10 @@
-import { createRef } from 'react'
-import { render } from '@testing-library/react'
-import { axe, toHaveNoViolations } from 'jest-axe'
-import { PktModal } from './Modal'
+import '@testing-library/jest-dom'
 
-import { cleanup } from '@testing-library/react'
+import { cleanup, render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { createRef } from 'react'
 
-import '@testing-library/jest-dom'
+import { PktModal } from './Modal'
 
 expect.extend(toHaveNoViolations)
 

package/src/components/modal/Modal.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktModal as PktElModal } from '@oslokommune/punkt-elements'
-import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
+// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
+import React, { FC, ForwardedRef, forwardRef, type ReactElement } from 'react'
+
+import type { PktElConstructor,PktElType } from '@/interfaces/IPktElements'
 
 export interface IPktModal extends PktElType {
   headingText?: string

package/src/components/progressbar/Progressbar.test.tsx

@@ -1,9 +1,11 @@
-import React, { createRef } from 'react'
-import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
+
+import { render, screen } from '@testing-library/react'
+import exp from 'constants'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { createRef } from 'react'
+
 import { PktProgressbar } from './Progressbar'
-import exp from 'constants'
 
 expect.extend(toHaveNoViolations)
 

package/src/components/progressbar/Progressbar.tsx

@@ -1,13 +1,15 @@
 'use client'
 
-import React, { forwardRef, ForwardedRef, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
-import { PktProgressbar as PktElProgressbar } from '@oslokommune/punkt-elements'
-import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
-import type { IPktProgressbar as IPktElProgressbar } from '@oslokommune/punkt-elements'
+import { type IPktProgressbar as IPktElProgressbar, PktProgressbar as PktElProgressbar } from '@oslokommune/punkt-elements'
+// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
+import React, { ForwardedRef, forwardRef, type ReactElement } from 'react'
+
+import type { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
 
 type ExtendedProgressbar = IPktElProgressbar & PktElType
 
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface IPktProgressbar extends ExtendedProgressbar {}
 
 const LitComponent = createComponent({

package/src/components/radio/RadioButton.tsx

@@ -1,5 +1,11 @@
-import { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode } from 'react'
-import type { InputHTMLAttributes } from 'react'
+import {
+  ChangeEventHandler,
+  ForwardedRef,
+  forwardRef,
+  type InputHTMLAttributes,
+  ReactElement,
+  ReactNode,
+} from 'react'
 
 export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
   id: string
@@ -41,7 +47,7 @@ export const PktRadioButton = forwardRef(
       ...props
     }: IPktRadioButton,
     ref: ForwardedRef<HTMLInputElement>,
-  ): React.ReactElement => {
+  ): ReactElement => {
     const classes = [className, 'pkt-input-check'].filter(Boolean).join(' ')
 
     const inputTileClasses = [

package/src/components/searchinput/SearchInput.test.tsx

@@ -2,14 +2,14 @@ import '@testing-library/jest-dom'
 
 import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import React from 'react'
+import { ChangeEvent, useState } from 'react'
 
 import { PktSearchInput } from './SearchInput'
 
 expect.extend(toHaveNoViolations)
 
-const Wrapper = (props: { onChange: (e: React.ChangeEvent) => void }) => {
-  const [value, setValue] = React.useState('')
+const Wrapper = (props: { onChange: (e: ChangeEvent) => void }) => {
+  const [value, setValue] = useState('')
   return (
     <PktSearchInput
       id="test-search-input"

package/src/components/searchinput/SearchInput.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { ChangeEvent, forwardRef, HTMLProps, ReactNode, createElement } from 'react'
+import { ChangeEvent, createElement, forwardRef, HTMLProps, ReactNode } from 'react'
 
 import { PktButton } from '../button/Button'
 
@@ -76,12 +76,14 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
 
     let WrapperElement
     if (action) {
+      // eslint-disable-next-line react/display-name
       WrapperElement = (children: ReactNode) => (
         <form role="search" className={wrapperClass} action={action} method={method}>
           {children}
         </form>
       )
     } else {
+      // eslint-disable-next-line react/display-name
       WrapperElement = (children: ReactNode) => (
         <div role="search" className={wrapperClass}>
           {children}
@@ -170,3 +172,5 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
     )
   },
 )
+
+PktSearchInput.displayName = 'PktSearchInput'

package/src/components/select/Select.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 { PktSelect } from './Select'
 

package/src/components/select/Select.tsx

@@ -98,3 +98,5 @@ export const PktSelect = forwardRef(
     )
   },
 )
+
+PktSelect.displayName = 'PktSelect'

package/src/components/stepper/Step.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import cn from 'classnames'
+import type { ReactNode } from 'react'
 
 export type TStepStatus = 'completed' | 'incomplete' | 'current'
 
@@ -8,7 +9,7 @@ export interface IPktStep {
   /**
    * Step content. Can be a string, a React component or an element.
    */
-  children?: React.ReactNode
+  children?: ReactNode
   /**
    * Additional class names
    */

package/src/components/stepper/Stepper.test.tsx

@@ -1,10 +1,12 @@
 import '@testing-library/jest-dom'
-import { axe, toHaveNoViolations } from 'jest-axe'
-import { PktStepper } from './Stepper'
-import { PktStep } from './Step'
+
 import { render, screen } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
 import { createRef } from 'react'
 
+import { PktStep } from './Step'
+import { PktStepper } from './Stepper'
+
 expect.extend(toHaveNoViolations)
 
 describe('PktStepper', () => {

package/src/components/stepper/Stepper.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { ReactElement, Ref, forwardRef, Children, isValidElement, cloneElement } from 'react'
-import type { HTMLAttributes } from 'react'
-import { IPktStep } from './Step'
 import classNames from 'classnames'
+import { Children, cloneElement, forwardRef, type HTMLAttributes, isValidElement, ReactElement, Ref } from 'react'
+
+import { IPktStep } from './Step'
 
 export interface IPktStepper extends HTMLAttributes<HTMLOListElement> {
   /**
@@ -74,3 +74,5 @@ export const PktStepper = forwardRef(
     )
   },
 )
+
+PktStepper.displayName = 'PktStepper'

package/src/components/table/Table.test.tsx

@@ -1,14 +1,14 @@
-import * as React from 'react'
-import { axe, toHaveNoViolations } from 'jest-axe'
-import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
+import { render, screen } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+
 import { PktTable } from './Table'
-import { PktTableHeader } from './TableHeader'
-import { PktTableRow } from './TableRow'
 import { PktTableBody } from './TableBody'
-import { PktTableHeaderCell } from './TableHeaderCell'
 import { PktTableDataCell } from './TableDataCell'
+import { PktTableHeader } from './TableHeader'
+import { PktTableHeaderCell } from './TableHeaderCell'
+import { PktTableRow } from './TableRow'
 
 expect.extend(toHaveNoViolations)
 

package/src/components/table/Table.tsx

@@ -1,8 +1,7 @@
 'use client'
 
 import classNames from 'classnames'
-import * as React from 'react'
-import type { HTMLAttributes } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
 
 export type TTableSkin = 'basic' | 'zebra-blue'
 
@@ -11,7 +10,7 @@ interface ITableProps extends HTMLAttributes<HTMLTableElement> {
   skin?: 'basic' | 'zebra-blue'
   responsiveView?: boolean
   className?: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export const PktTable = ({

package/src/components/table/TableBody.tsx

@@ -1,12 +1,11 @@
 'use client'
 
 import classNames from 'classnames'
-import * as React from 'react'
-import type { HTMLAttributes } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
 
 interface ITableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
   className?: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export const PktTableBody = ({ id, children, className, ...props }: ITableBodyProps) => (

package/src/components/table/TableData.tsx

@@ -1,12 +1,11 @@
 'use client'
 
 import classNames from 'classnames'
-import * as React from 'react'
-import type { HTMLAttributes } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
 
 interface TableDataProps extends HTMLAttributes<HTMLTableCellElement> {
   className?: string
-  children: React.ReactNode | React.ReactNode[]
+  children: ReactNode | ReactNode[]
 }
 
 export const PktTableData = ({ children, className, ...props }: TableDataProps) => (

package/src/components/table/TableDataCell.tsx

@@ -1,12 +1,11 @@
 'use client'
 
 import classNames from 'classnames'
-import * as React from 'react'
-import type { HTMLAttributes } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
 
 interface ITableDataCellProps extends HTMLAttributes<HTMLTableCellElement> {
   className?: string
-  children?: React.ReactNode
+  children?: ReactNode
   dataLabel?: string
 }
 

package/src/components/table/TableHeader.tsx

@@ -1,12 +1,11 @@
 'use client'
 
 import classNames from 'classnames'
-import * as React from 'react'
-import type { HTMLAttributes } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
 
 interface ITableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
   className?: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export const PktTableHeader = ({ className, children, ...props }: ITableHeaderProps) => (

package/src/components/table/TableHeaderCell.tsx

@@ -1,12 +1,11 @@
 'use client'
 
 import classNames from 'classnames'
-import * as React from 'react'
-import type { HTMLAttributes } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
 
 interface ITableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
   className?: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export const PktTableHeaderCell = ({ className, children, ...props }: ITableHeaderCellProps) => (

package/src/components/table/TableRow.tsx

@@ -1,12 +1,11 @@
 'use client'
 
 import classNames from 'classnames'
-import * as React from 'react'
-import type { HTMLAttributes } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
 
 interface ITableRowProps extends HTMLAttributes<HTMLTableRowElement> {
   className?: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export const PktTableRow = ({ className, children, ...props }: ITableRowProps) => (

package/src/components/tabs/TabItem.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { ReactNode, MouseEvent, forwardRef } from 'react'
+import { forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'
+
 import { PktIcon } from '../icon/Icon'
-import { PktTag } from '../tag/Tag'
-import type { IPktTag } from '../tag/Tag'
+import { type IPktTag, PktTag } from '../tag/Tag'
 import { useTabsContext } from './Tabs'
 
 export type TSkin = IPktTag['skin']
@@ -33,7 +33,7 @@ export const PktTabItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, IPkt
       'aria-selected': arrowNav ? !!active : undefined,
       'aria-controls': controls,
       role: arrowNav ? 'tab' : undefined,
-      onKeyUp: (event: React.KeyboardEvent) => handleKeyPress(index, event),
+      onKeyUp: (event: KeyboardEvent) => handleKeyPress(index, event),
       onClick: handleClick,
       tabIndex: active || !arrowNav ? undefined : -1,
       ref: (el: HTMLAnchorElement | HTMLButtonElement | null) => {

package/src/components/tabs/Tabs.test.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { axe, toHaveNoViolations } from 'jest-axe'
 import '@testing-library/jest-dom'
-import { PktTabs, PktTabItem } from './Tabs'
+
+import { fireEvent, render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+import { PktTabItem, PktTabs } from './Tabs'
 
 expect.extend(toHaveNoViolations)
 

package/src/components/tabs/Tabs.tsx

@@ -1,16 +1,17 @@
 'use client'
 
 import {
+  Children,
+  createContext,
   forwardRef,
-  Ref,
-  useRef,
-  useEffect,
   KeyboardEvent,
   ReactNode,
-  Children,
-  createContext,
+  Ref,
   useContext,
+  useEffect,
+  useRef,
 } from 'react'
+
 import { PktTabItem } from './TabItem'
 
 export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light'
@@ -127,3 +128,5 @@ export const PktTabs = forwardRef(
 )
 
 export { PktTabItem } from './TabItem'
+
+PktTabs.displayName = 'PktTabs'

package/src/components/textarea/Textarea.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 { PktTextarea } from './Textarea'