@oslokommune/punkt-react 16.25.0 → 16.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.25.0",
+  "version": "16.26.2",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -35,38 +35,39 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "prettier": "^3.3.3",
-    "react-hook-form": "^7.53.0"
+    "prettier": "^3.8.4",
+    "react-hook-form": "^7.79.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": "^16.16.1",
-    "@oslokommune/punkt-css": "^16.18.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@babel/plugin-transform-private-property-in-object": "^7.27.1",
+    "@eslint-react/eslint-plugin": "^5.9.0",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@oslokommune/punkt-assets": "^16.26.2",
+    "@oslokommune/punkt-css": "^16.26.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^20.12.10",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^6.0.0",
-    "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-axe": "^9.0.0",
-    "react-hooks": "^1.0.1",
-    "sass": "^1.78.0",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.8",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.4"
+    "@types/node": "^25.9.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "eslint": "^10.5.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "globals": "^17.6.0",
+    "jest-axe": "^10.0.0",
+    "jsdom": "^29.1.1",
+    "sass": "^1.101.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.61.1",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2",
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
     "@oslokommune/punkt-assets": "*",
@@ -76,7 +77,7 @@
     "react-router-dom": "^6.26.2"
   },
   "engines": {
-    "node": ">=20.19.1"
+    "node": ">=22.12.0"
   },
   "private": false,
   "publishConfig": {
@@ -100,5 +101,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "d01de2b51e9c71b709202eb0d2fb3336e2932a20"
+  "gitHead": "b667fcd160da4b1c4e556fdd0bb23d50cc433827"
 }

package/src/components/calendar/types.ts

@@ -118,7 +118,7 @@ export interface ICalendarState {
   dateConstraints: IDateConstraints
 
   // Refs
-  calendarRef: React.RefObject<HTMLDivElement>
+  calendarRef: React.RefObject<HTMLDivElement | null>
   selectableDatesRef: React.MutableRefObject<{ currentDateISO: string; isDisabled: boolean; tabindex: string }[]>
   tabIndexSetRef: React.MutableRefObject<number>
 

package/src/components/card/Card.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import classNames from 'classnames'
-import { forwardRef, HTMLAttributes, ReactNode, Ref } from 'react'
+import { forwardRef, HTMLAttributes, type JSX, ReactNode, Ref } from 'react'
 import type { TCardSkin, TLayout, TTagSkin } from 'shared-types'
 
 import { PktTag } from '../tag/Tag'

package/src/components/combobox/types.ts

@@ -116,11 +116,11 @@ export interface IComboboxState {
   hasCounter: boolean
 
   // Refs
-  inputRef: RefObject<HTMLInputElement>
-  changeInputRef: RefObject<HTMLInputElement>
-  triggerRef: RefObject<HTMLDivElement>
-  listboxRef: RefObject<HTMLDivElement>
-  wrapperRef: RefObject<HTMLDivElement>
+  inputRef: RefObject<HTMLInputElement | null>
+  changeInputRef: RefObject<HTMLInputElement | null>
+  triggerRef: RefObject<HTMLDivElement | null>
+  listboxRef: RefObject<HTMLDivElement | null>
+  wrapperRef: RefObject<HTMLDivElement | null>
 
   // Event handlers
   handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void

package/src/components/datepicker/types.ts

@@ -107,11 +107,11 @@ export interface IDatepickerState {
   hasCounter: boolean
 
   // Refs
-  inputRef: React.RefObject<HTMLInputElement>
-  inputRefTo: React.RefObject<HTMLInputElement>
-  changeInputRef: React.RefObject<HTMLInputElement>
-  btnRef: React.RefObject<HTMLButtonElement>
-  wrapperRef: React.RefObject<HTMLDivElement>
+  inputRef: React.RefObject<HTMLInputElement | null>
+  inputRefTo: React.RefObject<HTMLInputElement | null>
+  changeInputRef: React.RefObject<HTMLInputElement | null>
+  btnRef: React.RefObject<HTMLButtonElement | null>
+  wrapperRef: React.RefObject<HTMLDivElement | null>
 
   // onChange passthrough for hidden input
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void

package/src/components/fileupload/FileUpload.tsx

@@ -343,7 +343,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
           'pkt-fileupload--disabled': disabled,
         })}
         aria-disabled={disabled}
-        {...(disabled ? { inert: '' } : {})}
+        {...(disabled ? { inert: true } : {})}
       >
         <PktFileUploadContext.Provider value={{ name: props.name || '', multiple: !!multiple, id }}>
           <div className="pkt-sr-only" aria-live="polite" aria-atomic="true">

package/src/components/fileupload/Subcomponents.tsx

@@ -302,7 +302,7 @@ interface IImagePreviewModal {
   currentIndex: number
   onClose: () => void
   onNavigate: (direction: 'prev' | 'next') => void
-  modalRef: RefObject<HTMLDialogElement>
+  modalRef: RefObject<HTMLDialogElement | null>
 }
 
 export const ImagePreviewModal = ({

package/src/components/fileupload/Truncate.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react'
+import { createContext, type JSX, useContext } from 'react'
 
 import { splitFilenameForTruncation } from 'shared-utils/fileupload'
 

package/src/components/fileupload/hooks/useRequiredFormValidation.ts

@@ -10,7 +10,7 @@ import { RefObject, useEffect } from 'react'
  * Passive in `form` strategy — native validation handles that case.
  */
 export const useRequiredFormValidation = (
-  fileInputRef: RefObject<HTMLInputElement>,
+  fileInputRef: RefObject<HTMLInputElement | null>,
   {
     uploadStrategy,
     required,

package/src/components/header/HeaderService.tsx

@@ -29,6 +29,18 @@ import { IPktHeader, Representing, THeaderMenu, User, UserMenuFooterItem, UserMe
 export type { Representing, THeaderMenu, User, UserMenuFooterItem, UserMenuItem }
 export type IPktHeaderService = IPktHeader
 
+declare global {
+  interface Window {
+    pktLogoPath?: string
+  }
+}
+
+const defaultLogoPath = 'https://punkt-cdn.oslo.kommune.no/latest/logos/'
+
+if (typeof window !== 'undefined') {
+  window.pktLogoPath = window.pktLogoPath || defaultLogoPath
+}
+
 export const PktHeaderService = forwardRef(
   (
     {
@@ -59,6 +71,7 @@ export const PktHeaderService = forwardRef(
       hideLogo = false,
       logoLink,
       logoClick,
+      logoPath = typeof window !== 'undefined' ? window.pktLogoPath : defaultLogoPath,
       position = 'fixed',
       scrollBehavior = 'hide',
       slotMenuVariant = 'icon-only',
@@ -158,7 +171,7 @@ export const PktHeaderService = forwardRef(
     const handleFocusOut = useCallback((event: FocusEvent<HTMLDivElement>, menuType: THeaderMenu) => {
       const relatedTarget = event.relatedTarget as HTMLElement | null
 
-      let containerRef: RefObject<HTMLDivElement>
+      let containerRef: RefObject<HTMLDivElement | null>
       switch (menuType) {
         case 'user':
           containerRef = userContainerRef
@@ -337,11 +350,7 @@ export const PktHeaderService = forwardRef(
             <span className="pkt-header-service__logo">
               {logoLink ? (
                 <a href={logoLink} aria-label="Tilbake til forside">
-                  <PktIcon
-                    name="oslologo"
-                    aria-hidden="true"
-                    path="https://punkt-cdn.oslo.kommune.no/latest/logos/"
-                  ></PktIcon>
+                  <PktIcon name="oslologo" aria-hidden="true" path={logoPath}></PktIcon>
                 </a>
               ) : logoClick ? (
                 <button
@@ -349,18 +358,10 @@ export const PktHeaderService = forwardRef(
                   className="pkt-link-button pkt-link pkt-header-service__logo-link"
                   onClick={logoClick}
                 >
-                  <PktIcon
-                    name="oslologo"
-                    aria-hidden="true"
-                    path="https://punkt-cdn.oslo.kommune.no/latest/logos/"
-                  ></PktIcon>
+                  <PktIcon name="oslologo" aria-hidden="true" path={logoPath}></PktIcon>
                 </button>
               ) : (
-                <PktIcon
-                  name="oslologo"
-                  aria-hidden="true"
-                  path="https://punkt-cdn.oslo.kommune.no/latest/logos/"
-                ></PktIcon>
+                <PktIcon name="oslologo" aria-hidden="true" path={logoPath}></PktIcon>
               )}
             </span>
           )}

package/src/components/header/types.ts

@@ -54,6 +54,8 @@ export interface IPktHeader {
   hideLogo?: boolean
   /** Link URL for the logo */
   logoLink?: string
+  /** Override CDN path for the logo */
+  logoPath?: string
   /** Callback when logo is clicked */
   logoClick?: (event: MouseEvent) => void
   /** Name of the service displayed in the header */

package/src/components/tabs/Tabs.tsx

@@ -4,6 +4,7 @@ import {
   Children,
   createContext,
   forwardRef,
+  type JSX,
   KeyboardEvent,
   ReactNode,
   Ref,

package/src/components/tag/Tag.tsx

@@ -69,7 +69,7 @@ export const PktTag = forwardRef<HTMLSpanElement | HTMLButtonElement, ButtonPktT
       }
     }, [onClose])
 
-    const spanRef: RefObject<HTMLButtonElement | HTMLSpanElement> = useRef<HTMLButtonElement | HTMLSpanElement>(null)
+    const spanRef: RefObject<HTMLButtonElement | HTMLSpanElement | null> = useRef<HTMLButtonElement | HTMLSpanElement>(null)
     const [labelText, setLabelText] = useState('')
 
     useEffect(() => {

package/src/components/timepicker/Timepicker.tsx

@@ -10,7 +10,7 @@ import type { IPktTimepicker } from './types'
 export type { IPktTimepicker } from './types'
 
 export const PktTimepicker = forwardRef<HTMLDivElement, IPktTimepicker>((props, ref) => {
-  const { onChange, onInput } = props
+  const { onChange } = props
   const state = useTimepickerState(props, ref)
 
   const hoursLabel = state.strings.hours
@@ -205,7 +205,6 @@ export const PktTimepicker = forwardRef<HTMLDivElement, IPktTimepicker>((props,
         tabIndex={-1}
         aria-hidden={true}
         onChange={onChange}
-        onInput={onInput}
       />
     </div>
   )

package/src/components/timepicker/types.ts

@@ -10,7 +10,7 @@ import type { ITimepickerStrings } from 'shared-types/timepicker'
 export interface IPktTimepicker
   extends Omit<
     InputHTMLAttributes<HTMLInputElement>,
-    'value' | 'onChange' | 'min' | 'max' | 'step' | 'onFocus' | 'onBlur'
+    'value' | 'onChange' | 'onInput' | 'min' | 'max' | 'step' | 'onFocus' | 'onBlur'
   > {
   /** Unique id; used for hour, minute, popup, and hidden input ids. */
   id: string
@@ -95,12 +95,9 @@ export interface IPktTimepicker
   /** Copy for hours, minutes, buttons, and popup. */
   strings?: ITimepickerStrings
 
-  /** Change event from the hidden input (`e.target.value` is `HH:MM`). */
+  /** Change event from the hidden input (`e.target.value` is `HH:MM`). In React, `onChange` already fires on input. */
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void
 
-  /** Input events while typing or using spinners. */
-  onInput?: (e: ChangeEvent<HTMLInputElement>) => void
-
   /** Callback with the committed `HH:MM` string. */
   onValueChange?: (value: string) => void