@oslokommune/punkt-react 16.21.1 → 16.23.0

package/dist/shared-types/index.d.ts

@@ -8,6 +8,7 @@ export type { THeaderMenuLocale, IHeaderMenuLink, IHeaderMenuIconLink, IHeaderMe
 export { DEFAULT_HEADER_FOOTER_URL } from './header-menu';
 export type { TLayout, TVerticalPosition, THorizontalPosition, TPosition, TPositionWithCenter, } from './layout';
 export type { THTMLButtonType, TSelectionMode } from './form';
+export type { TSelectOption } from './select';
 export type { TSize3, TSize5, TSize7 } from './size';
 export type { TAlertSkin, TMessageboxSkin, TAccordionSkin, TCardSkin, TTagSkin } from './skin';
 export type { IDateConstraints, ICalendarGridDimensions, IGridCellPosition, TDateRangeMap, ISelectionState, ISelectionOptions, } from './calendar';

package/dist/shared-types/select.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shape of a single option in a `<pkt-select>` / `<PktSelect>` component.
+ * Lives in shared-types so both `@oslokommune/punkt-elements` and
+ * `@oslokommune/punkt-react` can re-export the same canonical type.
+ */
+export type TSelectOption = {
+    value: string;
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+};

package/package.json

@@ -1,15 +1,11 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.21.1",
+  "version": "16.23.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
   "main": "dist/punkt-react.umd.js",
   "module": "dist/punkt-react.es.js",
-  "nohoist": [
-    "**/@lit",
-    "**/@lit/**"
-  ],
   "files": [
     "/dist",
     "src/components/**/*",
@@ -37,9 +33,6 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@lit-labs/ssr-dom-shim": "^1.2.1",
-    "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^16.21.1",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -54,7 +47,6 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.10",
     "@types/react": "^18.3.5",
@@ -67,9 +59,7 @@
     "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": "^30.4.1",
     "react-hooks": "^1.0.1",
     "sass": "^1.78.0",
     "typescript": "^6.0.2",
@@ -81,7 +71,7 @@
     "@oslokommune/punkt-assets": "*",
     "@oslokommune/punkt-css": "*",
     "react": ">=18.3.1 <20.0.0",
-    "react-dom": ">=18.2.22 <20.0.0",
+    "react-dom": ">=18.3.1 <20.0.0",
     "react-router-dom": "^6.26.2"
   },
   "engines": {
@@ -109,5 +99,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "15799459d01ea67c7770b8603da84069a717a164"
+  "gitHead": "72cbebd6103518933a6086ea0eff6c1bd1fb3eeb"
 }

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

@@ -34,7 +34,6 @@ describe('PktBreadcrumbs Component', () => {
         <PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="router" />
       </TestRouter>,
     )
-    await window.customElements.whenDefined('pkt-icon')
 
     expect(getAllByText('Home')).toBeTruthy()
     expect(getAllByText('Products')).toBeTruthy()
@@ -43,7 +42,6 @@ describe('PktBreadcrumbs Component', () => {
 
   it('renders breadcrumbs correctly with anchor navigation', async () => {
     const { getAllByText } = render(<PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="anchor" />)
-    await window.customElements.whenDefined('pkt-icon')
 
     expect(getAllByText('Home')).toBeTruthy()
     expect(getAllByText('Products')).toBeTruthy()
@@ -56,7 +54,6 @@ describe('PktBreadcrumbs Component', () => {
         <PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="router" />
       </TestRouter>,
     )
-    await window.customElements.whenDefined('pkt-icon')
 
     expect(getAllByText('Home')).toBeTruthy()
     expect(getAllByText('Products')).toBeTruthy()
@@ -65,7 +62,6 @@ describe('PktBreadcrumbs Component', () => {
 
   it('renders back link correctly on mobile with anchor navigation', async () => {
     const { getAllByText } = render(<PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="anchor" />)
-    await window.customElements.whenDefined('pkt-icon')
 
     expect(getAllByText('Home')).toBeTruthy()
     expect(getAllByText('Products')).toBeTruthy()
@@ -74,7 +70,6 @@ describe('PktBreadcrumbs Component', () => {
 
   it('renders with no wcag errors with axe', async () => {
     const { container } = render(<PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="anchor" />)
-    await window.customElements.whenDefined('pkt-icon')
     const results = await axe(container)
 
     expect(results).toHaveNoViolations()

package/src/components/button/Button.tsx

@@ -8,7 +8,10 @@ declare global {
   }
 }
 
-window.pktAnimationPath = window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
+if (typeof window !== 'undefined') {
+  window.pktAnimationPath =
+    window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
+}
 
 export interface IPktButton extends ButtonHTMLAttributes<HTMLButtonElement> {
   iconName?: string

package/src/components/icon/Icon.tsx

@@ -1,21 +1,13 @@
 'use client'
 
 import classNames from 'classnames'
-import {
-  forwardRef,
-  HTMLAttributes,
-  MutableRefObject,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-} from 'react'
+import { forwardRef, HTMLAttributes, MutableRefObject, useEffect, useLayoutEffect, useRef } from 'react'
 import type { Booleanish } from 'shared-types'
 
 const defaultPath = 'https://punkt-cdn.oslo.kommune.no/latest/icons/'
 
 if (typeof window !== 'undefined') {
-  window.pktFetch =
-    window.pktFetch === undefined ? (fetch as unknown as typeof window.pktFetch) : window.pktFetch
+  window.pktFetch = window.pktFetch === undefined ? (fetch as unknown as typeof window.pktFetch) : window.pktFetch
   window.pktIconPath = window.pktIconPath || defaultPath
 }
 
@@ -24,8 +16,7 @@ const dlCache: { [key: string]: Promise<string> } = {}
 const MAX_RETRIES = 2
 const RETRY_DELAY = 1500
 
-const isSessionStorageAvailable =
-  typeof Storage !== 'undefined' && typeof sessionStorage !== 'undefined'
+const isSessionStorageAvailable = typeof Storage !== 'undefined' && typeof sessionStorage !== 'undefined'
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
@@ -45,21 +36,19 @@ const fetchIcon = (url: string): Promise<string> =>
 const fetchIconWithRetry = async (url: string, retries = MAX_RETRIES): Promise<string> => {
   try {
     return await fetchIcon(url)
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we want to catch all errors, including from fetchIcon
   } catch (error) {
     if (retries > 0) {
       await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY))
       return fetchIconWithRetry(url, retries - 1)
     }
-    // eslint-disable-next-line no-console
+    // eslint-disable-next-line no-console -- we want to log the error when all retries have been exhausted
     console.error('Failed to fetch icon: ' + url)
     return errorSvg
   }
 }
 
-const downloadIconOrGetFromCache = async (
-  name: string,
-  path: string | undefined,
-): Promise<string | null> => {
+const downloadIconOrGetFromCache = async (name: string, path: string | undefined): Promise<string | null> => {
   const key = path + name + '.svg'
 
   if (isSessionStorageAvailable && sessionStorage.getItem(key)) {
@@ -108,14 +97,12 @@ export const PktIcon = forwardRef<HTMLSpanElement, IPktIcon>(function PktIcon(
   },
   forwardedRef,
 ) {
-  const resolvedPath =
-    path ?? (typeof window !== 'undefined' ? window.pktIconPath : defaultPath)
+  const resolvedPath = path ?? (typeof window !== 'undefined' ? window.pktIconPath : defaultPath)
   const elementRef = useRef<HTMLSpanElement | null>(null)
 
   const explicitAriaHidden = toBoolean(ariaHidden) ?? toBoolean(ariaHiddenAttr)
   const explicitAriaLabel = ariaLabel ?? ariaLabelAttr
-  const effectiveAriaHidden =
-    explicitAriaHidden !== undefined ? explicitAriaHidden : !explicitAriaLabel
+  const effectiveAriaHidden = explicitAriaHidden !== undefined ? explicitAriaHidden : !explicitAriaLabel
   const effectiveAriaLabel = effectiveAriaHidden ? undefined : explicitAriaLabel || name
 
   useIsomorphicLayoutEffect(() => {

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

@@ -25,26 +25,22 @@ const Wrapper = (props: { onChange: (e: ChangeEvent) => void }) => {
 describe('PktSearchInput', () => {
   it('renders with form element when action prop exists', async () => {
     const { container } = render(<PktSearchInput id="test-search-input" action="/search" />)
-    await window.customElements.whenDefined('pkt-icon')
     expect(container.querySelector('form')).toBeInTheDocument()
   })
 
   it('renders with div element when action prop does not exist', async () => {
     const { container } = render(<PktSearchInput id="test-search-input" />)
-    await window.customElements.whenDefined('pkt-icon')
     expect(container.querySelector('div')).toBeInTheDocument()
     expect(container.querySelector('form')).not.toBeInTheDocument()
   })
 
   it('renders with label element when label prop exists', async () => {
     const { container } = render(<PktSearchInput id="test-search-input" label="Test Label" />)
-    await window.customElements.whenDefined('pkt-icon')
     expect(container.querySelector('label')).toBeInTheDocument()
   })
 
   it('renders with div element when label prop does not exist', async () => {
     const { container } = render(<PktSearchInput id="test-search-input" />)
-    await window.customElements.whenDefined('pkt-icon')
     expect(container.querySelector('div')).toBeInTheDocument()
     expect(container.querySelector('label')).not.toBeInTheDocument()
   })
@@ -52,7 +48,6 @@ describe('PktSearchInput', () => {
   it('calls onSearch prop with input value on button click', async () => {
     const mockOnSearch = vi.fn()
     const { getByRole, getByPlaceholderText } = render(<Wrapper onChange={mockOnSearch} />)
-    await window.customElements.whenDefined('pkt-icon')
 
     const inputElement = getByPlaceholderText('Søk…')
     const buttonElement = getByRole('button')
@@ -76,7 +71,6 @@ describe('PktSearchInput', () => {
         suggestions={[{ text: 'Ingen resultater', nonInteractive: true }]}
       />,
     )
-    await window.customElements.whenDefined('pkt-icon')
 
     const row = screen.getByText('Ingen resultater').closest('.pkt-searchinput__suggestion')
     expect(row?.tagName.toLowerCase()).toBe('div')
@@ -90,7 +84,6 @@ describe('PktSearchInput', () => {
     ]
 
     render(<PktSearchInput id="test-search-input" suggestions={suggestions} />)
-    await window.customElements.whenDefined('pkt-icon')
 
     // Check if suggestion elements are rendered
     suggestions.forEach((suggestion) => {
@@ -105,7 +98,6 @@ describe('PktSearchInput', () => {
         { title: 'Suggestion 2', onClick: vi.fn() },
       ]
       const { container } = render(<PktSearchInput id="test-search-input" label="My label" suggestions={suggestions} />)
-      await window.customElements.whenDefined('pkt-icon')
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/select/Select.tsx

@@ -1,15 +1,11 @@
 'use client'
 
 import { ForwardedRef, forwardRef, ReactNode, SelectHTMLAttributes } from 'react'
+import type { TSelectOption } from 'shared-types'
 
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 
-export type TSelectOption = {
-  value: string
-  label: string
-  selected?: boolean
-  disabled?: boolean
-}
+export type { TSelectOption }
 
 export interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   ariaDescribedby?: string

package/src/components/tag/Tag.test.tsx

@@ -14,7 +14,6 @@ const render = async (
   options?: Omit<RenderOptions, 'queries'> | undefined,
 ): Promise<RenderResult> => {
   const renderResult = originalRender(ui, options)
-  await window.customElements.whenDefined('pkt-icon')
   return Promise.resolve(renderResult)
 }
 

package/src/components/textarea/Textarea.test.tsx

@@ -57,7 +57,6 @@ describe('PktTextarea', () => {
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
       const { container } = render(<PktTextarea label="Input Label" id="inputId" />)
-      await window.customElements.whenDefined('pkt-textarea')
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/timepicker/Timepicker.test.tsx

@@ -269,7 +269,6 @@ describe('PktTimepicker', () => {
   describe('Accessibility', () => {
     test('passes axe in default state', async () => {
       const { container } = render(<PktTimepicker id={id} name="t" label={label} />)
-      await window.customElements.whenDefined('pkt-icon')
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })