@oslokommune/punkt-react 16.25.1 → 16.26.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.25.1",
+  "version": "16.26.3",
   "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.3",
+    "@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": "5fe880d7964ac407f7271a8d80c178f72ca028a1"
+  "gitHead": "7ffd906243e1997959f45c892925393b72b98de2"
 }

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

@@ -171,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

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