@oslokommune/punkt-react 13.6.15 → 13.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.6.15",
+  "version": "13.7.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -33,12 +33,13 @@
     "lint:fix": "eslint --fix 'src/**/*.{jsx,ts,tsx}'",
     "format": "prettier --write src//**/*.{ts,tsx,css} --config ./.prettierrc",
     "preview": "vite preview --outDir dist-app",
-    "test": "react-scripts test --env=jsdom"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^13.6.15",
+    "@oslokommune/punkt-elements": "^13.7.0",
     "prettier": "^3.3.3",
     "react-element-to-jsx-string": "^15.0.0",
     "react-hook-form": "^7.53.0",
@@ -51,7 +52,7 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.10",
     "@types/react": "^18.3.5",
@@ -59,7 +60,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.3.1",
     "classnames": "^2.5.1",
-    "eslint": "^9.10.0",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
@@ -67,11 +68,11 @@
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "react-hooks": "^1.0.1",
-    "react-scripts": "^5.0.1",
     "sass": "^1.78.0",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.18",
-    "vite-plugin-dts": "^4.2.1"
+    "typescript": "^5.9.3",
+    "vite": "^6.3.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@oslokommune/punkt-assets": "*",
@@ -97,11 +98,6 @@
     "ux",
     "ui"
   ],
-  "jest": {
-    "transformIgnorePatterns": [
-      "<rootDir>/node_modules/(?!@lit/react)"
-    ]
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/oslokommune/punkt.git"
@@ -110,5 +106,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "4798e1ff1529f3e32cd4c4173fab3ec3586319da"
+  "gitHead": "cfe27c04046718ff79f60e3babba60062296f05b"
 }

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

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

package/src/components/accordion/Accordion.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { ReactNode, forwardRef, createContext, useContext } from 'react'
+import { ReactNode, forwardRef, createContext, useContext } from 'react'
 
 export type TPktAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue'
 

package/src/components/accordion/AccordionItem.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { ReactNode, useState, useEffect, forwardRef } from 'react'
+import { ReactNode, useState, useEffect, forwardRef } from 'react'
+import type { MouseEvent, SyntheticEvent } from 'react'
 import { PktIcon } from '../icon/Icon'
 import { useAccordionContext } from './Accordion'
 
@@ -16,8 +17,8 @@ export interface IPktAccordionItem {
   children?: ReactNode
   name?: string
   className?: string
-  onClick?: (e: React.MouseEvent<HTMLDetailsElement>) => void
-  onToggle?: (e: React.SyntheticEvent<HTMLDetailsElement>) => void
+  onClick?: (e: MouseEvent<HTMLDetailsElement>) => void
+  onToggle?: (e: SyntheticEvent<HTMLDetailsElement>) => void
 }
 
 export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem>(
@@ -52,7 +53,7 @@ export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem
       }
     }, [defaultOpen, controlledIsOpen])
 
-    const handleToggle = (e: React.SyntheticEvent<HTMLDetailsElement>) => {
+    const handleToggle = (e: SyntheticEvent<HTMLDetailsElement>) => {
       const detailsElement = e.currentTarget
       const newOpenState = detailsElement.open
 
@@ -63,7 +64,7 @@ export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem
       onToggle?.(e)
     }
 
-    const handleClick = (e: React.MouseEvent<HTMLDetailsElement>) => {
+    const handleClick = (e: MouseEvent<HTMLDetailsElement>) => {
       // La native toggle skje først, så trigge onClick
       setTimeout(() => {
         onClick?.(e)

package/src/components/alert/Alert.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
+import { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
+import * as React from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktAlert as PktElAlert } from '@oslokommune/punkt-elements'
 import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'

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

@@ -6,6 +6,18 @@ import { PktBreadcrumbs } from './Breadcrumbs'
 
 expect.extend(toHaveNoViolations)
 
+// Create a Router with future flags to suppress warnings
+const TestRouter = ({ children }: { children: React.ReactNode }) => (
+  <Router
+    future={{
+      v7_startTransition: true,
+      v7_relativeSplatPath: true,
+    }}
+  >
+    {children}
+  </Router>
+)
+
 describe('PktBreadcrumbs Component', () => {
   const breadcrumbs = [
     { text: 'Home', href: '/' },
@@ -15,9 +27,9 @@ describe('PktBreadcrumbs Component', () => {
 
   it('renders breadcrumbs correctly with react-router navigation', async () => {
     const { getAllByText } = render(
-      <Router>
+      <TestRouter>
         <PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="router" />
-      </Router>,
+      </TestRouter>,
     )
     await window.customElements.whenDefined('pkt-icon')
 
@@ -37,9 +49,9 @@ describe('PktBreadcrumbs Component', () => {
 
   it('renders back link correctly on mobile with router navigation', async () => {
     const { getAllByText } = render(
-      <Router>
+      <TestRouter>
         <PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="router" />
-      </Router>,
+      </TestRouter>,
     )
     await window.customElements.whenDefined('pkt-icon')
 

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { ForwardedRef, forwardRef } from 'react'
+import { ForwardedRef, forwardRef } from 'react'
+import type { AnchorHTMLAttributes } from 'react'
 import { Link } from 'react-router-dom'
 
 import PktIcon from '../icon/Icon'
@@ -10,7 +11,7 @@ export interface IBreadcrumbs {
   href: string
 }
 
-export interface IPktBreadcrumbs extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface IPktBreadcrumbs extends AnchorHTMLAttributes<HTMLAnchorElement> {
   breadcrumbs: IBreadcrumbs[]
   navigationType?: 'router' | 'anchor'
 }

package/src/components/button/Button.tsx

@@ -1,5 +1,6 @@
 'use client'
-import React, { ForwardedRef, forwardRef } from 'react'
+import { ForwardedRef, forwardRef } from 'react'
+import type { ButtonHTMLAttributes } from 'react'
 
 import { PktIcon } from '../icon/Icon'
 declare global {
@@ -10,7 +11,7 @@ declare global {
 
 window.pktAnimationPath = window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
 
-export interface IPktButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IPktButton extends ButtonHTMLAttributes<HTMLButtonElement> {
   iconName?: string
   secondIconName?: string
   mode?: 'light' | 'dark'

package/src/components/checkbox/Checkbox.tsx

@@ -1,6 +1,7 @@
-import React, { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode } from 'react'
+import { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode, ReactElement } from 'react'
+import type { InputHTMLAttributes } from 'react'
 
-export interface IPktCheckbox extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
   id: string
   hasTile?: boolean
   disabled?: boolean
@@ -44,7 +45,7 @@ export const PktCheckbox = forwardRef(
       ...props
     }: IPktCheckbox,
     ref: ForwardedRef<HTMLInputElement>,
-  ): React.ReactElement => {
+  ): ReactElement => {
     const classes = [className, 'pkt-input-check'].filter(Boolean).join(' ')
 
     const labelClasses = [

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

@@ -0,0 +1,393 @@
+import '@testing-library/jest-dom'
+import { fireEvent, render, waitFor } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { PktDatepicker, IPktDatepicker } from './Datepicker'
+
+const datePickerId = 'datepickerId'
+const label = 'Date Picker Label'
+
+const waitForDatepicker = async () => {
+  await window.customElements.whenDefined('pkt-datepicker')
+}
+
+const waitForCustomElementUpdate = async () => {
+  return new Promise((resolve) => {
+    requestAnimationFrame(resolve)
+  })
+}
+
+const createDatepickerTest = (props: Partial<IPktDatepicker> = {}) => {
+  const defaultProps: IPktDatepicker = {
+    label,
+    id: datePickerId,
+    ...props,
+  }
+
+  return render(<PktDatepicker {...defaultProps} />)
+}
+
+describe('PktDatepicker - React Form Element', () => {
+  beforeEach(async () => {
+    await waitForDatepicker()
+  })
+
+  expect.extend(toHaveNoViolations)
+
+  describe('Single date selection', () => {
+    test('sets and confirms a single date value', async () => {
+      const handleChange = jest.fn()
+      const handleValueChange = jest.fn()
+      const { container } = createDatepickerTest({
+        onChange: handleChange,
+        onValueChange: handleValueChange,
+      })
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input).toBeInTheDocument()
+
+        fireEvent.change(input, { target: { value: '2024-06-15' } })
+        fireEvent.blur(input)
+      })
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input.value).toBe('2024-06-15')
+
+        expect(handleChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            target: expect.objectContaining({
+              value: '2024-06-15',
+            }),
+          }),
+        )
+
+        expect(handleValueChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            detail: '2024-06-15',
+          }),
+        )
+      })
+    })
+
+    test('sets date via calendar interaction', async () => {
+      const handleValueChange = jest.fn()
+      const { container } = createDatepickerTest({
+        onValueChange: handleValueChange,
+      })
+
+      await waitFor(() => {
+        const calendarButton = container.querySelector('button[type="button"]')
+        expect(calendarButton).toBeInTheDocument()
+        fireEvent.click(calendarButton!)
+      })
+
+      await waitFor(() => {
+        const calendar = container.querySelector('pkt-calendar')
+        expect(calendar).toBeInTheDocument()
+      })
+
+      await waitFor(() => {
+        const dateButtons = container.querySelectorAll('pkt-calendar button[data-date]')
+        const firstDateButton = Array.from(dateButtons).find(
+          (btn) => btn.textContent && btn.textContent.trim() && !btn.hasAttribute('disabled'),
+        ) as HTMLButtonElement
+
+        if (firstDateButton) {
+          fireEvent.click(firstDateButton)
+        }
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input.value).not.toBe('')
+        expect(handleValueChange).toHaveBeenCalled()
+      })
+    })
+
+    test('sets date via keyboard input', async () => {
+      const handleValueChange = jest.fn()
+      const { container } = createDatepickerTest({
+        onValueChange: handleValueChange,
+      })
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input).toBeInTheDocument()
+
+        fireEvent.change(input, { target: { value: '2025-10-15' } })
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input.value).toBe('2025-10-15')
+      })
+    })
+
+    test('has no accessibility violations with single date set', async () => {
+      const { container } = createDatepickerTest({
+        value: '2024-06-15',
+        label: 'Select Date',
+        helptext: 'Choose a date from the calendar',
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input.value).toBe('2024-06-15')
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('Multiple date selection', () => {
+    test('sets and confirms multiple date values', async () => {
+      const handleValueChange = jest.fn()
+      const { container } = createDatepickerTest({
+        multiple: true,
+        value: ['2024-06-15', '2024-06-20'],
+        onValueChange: handleValueChange,
+      })
+
+      await waitFor(() => {
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toHaveAttribute('multiple')
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const tags = container.querySelectorAll('pkt-tag')
+        expect(tags.length).toBe(2)
+      })
+    })
+
+    test('dispatches onChange and onValueChange for multiple dates', async () => {
+      const handleChange = jest.fn()
+      const handleValueChange = jest.fn()
+      const dates = ['2024-06-15', '2024-06-20']
+
+      const { container } = createDatepickerTest({
+        multiple: true,
+        value: dates,
+        onChange: handleChange,
+        onValueChange: handleValueChange,
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        fireEvent.change(input, { target: { value: '2024-06-25' } })
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        expect(handleChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            target: expect.objectContaining({
+              tagName: 'PKT-DATEPICKER',
+              value: '2024-06-15,2024-06-20',
+            }),
+          }),
+        )
+
+        expect(handleValueChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            detail: ['2024-06-15', '2024-06-20'],
+          }),
+        )
+      })
+    })
+
+    test('has no accessibility violations with multiple dates set', async () => {
+      const { container } = createDatepickerTest({
+        multiple: true,
+        value: ['2024-06-15', '2024-06-20', '2024-06-25'],
+        label: 'Select Multiple Dates',
+        helptext: 'Choose multiple dates from the calendar',
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const tags = container.querySelectorAll('pkt-tag')
+        expect(tags.length).toBe(3)
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('Range date selection', () => {
+    test('sets and confirms range date values', async () => {
+      const handleValueChange = jest.fn()
+      const { container } = createDatepickerTest({
+        range: true,
+        value: ['2024-06-15', '2024-06-25'],
+        onValueChange: handleValueChange,
+      })
+
+      await waitFor(() => {
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toHaveAttribute('range')
+        const rangeInputs = container.querySelectorAll('input[type="date"]')
+        expect(rangeInputs.length).toBe(2)
+      })
+    })
+
+    test('has no accessibility violations with range dates set', async () => {
+      const { container } = createDatepickerTest({
+        range: true,
+        value: ['2024-06-15', '2024-06-25'],
+        label: 'Select Date Range',
+        helptext: 'Choose start and end dates for your range',
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toHaveAttribute('range')
+        expect(datepicker).toHaveAttribute('value', '2024-06-15,2024-06-25')
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('Form integration', () => {
+    test('works as a form element with name attribute', async () => {
+      const { container } = createDatepickerTest({
+        name: 'dateField',
+        value: '2024-06-15',
+      })
+
+      await waitFor(() => {
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toHaveAttribute('name', 'dateField')
+        expect(datepicker).toHaveAttribute('value', '2024-06-15')
+      })
+    })
+
+    test('handles required validation', async () => {
+      const { container } = createDatepickerTest({
+        required: true,
+        name: 'requiredDate',
+      })
+
+      await waitFor(() => {
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toHaveAttribute('required')
+        expect(datepicker).toHaveAttribute('name', 'requiredDate')
+      })
+    })
+
+    test('handles disabled state', async () => {
+      const { container } = createDatepickerTest({
+        disabled: true,
+      })
+
+      await waitFor(() => {
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toHaveAttribute('disabled')
+      })
+    })
+
+    test('sets min and max date boundaries', async () => {
+      const { container } = createDatepickerTest({
+        min: '2024-01-01',
+        max: '2024-12-31',
+        value: '2024-06-15',
+      })
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input).toBeInTheDocument()
+        expect(input).toHaveAttribute('min', '2024-01-01')
+        expect(input).toHaveAttribute('max', '2024-12-31')
+      })
+    })
+  })
+
+  describe('Event handling', () => {
+    test('handles input value changes for form behavior', async () => {
+      const { container } = createDatepickerTest({})
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+
+        fireEvent.change(input, { target: { value: '2024-07-20' } })
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input.value).toBe('2024-07-20')
+
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toBeInTheDocument()
+      })
+    })
+
+    test('triggers focus and blur events', async () => {
+      const handleFocus = jest.fn()
+      const handleBlur = jest.fn()
+      const { container } = createDatepickerTest({
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+      })
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+
+        fireEvent.focus(input)
+        fireEvent.blur(input)
+      })
+
+      await waitFor(() => {
+        expect(handleFocus).toHaveBeenCalled()
+        expect(handleBlur).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('Accessibility and form behavior', () => {
+    test('has proper label association for screen readers', async () => {
+      const { container } = createDatepickerTest({
+        label: 'Select your birthday',
+      })
+
+      await waitFor(() => {
+        const label = container.querySelector('label')
+        const input = container.querySelector('input[type="date"]')
+
+        expect(label).toHaveTextContent('Select your birthday')
+        expect(label).toHaveAttribute('for', expect.stringContaining('input'))
+        expect(input).toHaveAttribute('id', expect.stringContaining('input'))
+      })
+    })
+
+    test('supports help text for user guidance', async () => {
+      const { container } = createDatepickerTest({
+        helptext: 'Please select a date in the format DD.MM.YYYY',
+      })
+
+      await waitFor(() => {
+        const helpText = container.querySelector('[id*="helptext"]')
+        expect(helpText).toBeInTheDocument()
+      })
+    })
+  })
+})

package/src/components/footer/Footer.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React from 'react'
+import { FC, Fragment } from 'react'
+import type { HTMLAttributes } from 'react'
 
 import { PktIcon } from '../icon/Icon'
 import { PktConsent } from '../consent/Consent'
@@ -25,7 +26,7 @@ interface SocialLink {
   openInNewTab?: boolean
 }
 
-export interface IPktFooter extends React.HTMLAttributes<HTMLDivElement> {
+export interface IPktFooter extends HTMLAttributes<HTMLDivElement> {
   columnOne: Column
   columnTwo: Column
   socialLinks?: SocialLink[]
@@ -42,7 +43,7 @@ export interface IPktFooter extends React.HTMLAttributes<HTMLDivElement> {
   onToggleConsent?: (e: CustomEvent) => void
 }
 
-export const PktFooter: React.FC<IPktFooter> = ({
+export const PktFooter: FC<IPktFooter> = ({
   columnOne,
   columnTwo,
   socialLinks,
@@ -169,7 +170,7 @@ export const PktFooter: React.FC<IPktFooter> = ({
               {socialLinks
                 .filter((link) => link.iconName)
                 .map((link, index) => (
-                  <React.Fragment key={`sociallinks-${index}`}>
+                  <Fragment key={`sociallinks-${index}`}>
                     <a
                       href={link.href}
                       aria-label={`til ${link.iconName}`}
@@ -179,7 +180,7 @@ export const PktFooter: React.FC<IPktFooter> = ({
                     >
                       <PktIcon className="pkt-footer__social-icon" name={link.iconName} />
                     </a>
-                  </React.Fragment>
+                  </Fragment>
                 ))}
             </div>
           </div>