@oslokommune/punkt-react 13.0.1 → 13.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.0.1",
+  "version": "13.0.3",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -112,5 +112,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "70e58130f5507903eb6053396d5226d8e5fec9c1"
+  "gitHead": "9e0607440983576ee5baff7f3304e13857fa11d1"
 }

package/src/components/checkbox/Checkbox.tsx

@@ -47,7 +47,7 @@ export const PktCheckbox = forwardRef(
             type="checkbox"
             id={id}
             disabled={disabled}
-            defaultChecked={defaultChecked || checked}
+            {...(checked !== undefined ? { checked } : { defaultChecked })}
             {...props}
           />
           <label className="pkt-input-check__input-label" htmlFor={id}>

package/src/components/radio/RadioButton.tsx

@@ -47,7 +47,7 @@ export const PktRadioButton = forwardRef(
             name={name}
             disabled={disabled}
             className={`pkt-input-check__input-checkbox ${hasError ? 'pkt-input-check__input-checkbox--error' : ''}`}
-            defaultChecked={defaultChecked || checked}
+            {...(checked !== undefined ? { checked } : { defaultChecked })}
             {...props}
           />
           <label className="pkt-input-check__input-label" htmlFor={id}>

package/src/components/textarea/Textarea.tsx

@@ -1,13 +1,13 @@
 'use client'
 
-import {
+import React, {
   ChangeEvent,
+  ChangeEventHandler,
   ForwardedRef,
   forwardRef,
   ReactNode,
   TextareaHTMLAttributes,
   useEffect,
-  useRef,
   useState,
 } from 'react'
 
@@ -43,7 +43,7 @@ export interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement
   readOnly?: boolean
   required?: boolean
   skipForwardTestid?: boolean
-  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>
 }
 
 export const PktTextarea = forwardRef(
@@ -89,8 +89,6 @@ export const PktTextarea = forwardRef(
     const labelId = `${inputId}-label` // id til label elementet og sendes inn til aria-labelledby i input (genereres i InputWrapper)
     const labelledBy = ariaLabelledby || labelId
 
-    const internalRef = useRef<HTMLTextAreaElement>(null)
-
     const [counterCurrent, setCounterCurrent] = useState(0)
 
     const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
@@ -101,9 +99,10 @@ export const PktTextarea = forwardRef(
     }
 
     useEffect(() => {
-      typeof ref === 'function' && ref(internalRef.current)
-      counter && setCounterCurrent(internalRef?.current?.value?.length || 0)
-    }, [ref])
+      if (value !== undefined) {
+        setCounterCurrent(value?.length || 0)
+      }
+    }, [value])
 
     return (
       <PktInputWrapper
@@ -128,11 +127,11 @@ export const PktTextarea = forwardRef(
         counterMaxLength={counterMaxLength}
       >
         <textarea
-          ref={internalRef}
+          ref={ref}
           className={`pkt-input ${fullwidth ? 'pkt-input--fullwidth' : ''} ${
             counterMaxLength && counterCurrent > counterMaxLength ? 'pkt-input--counter-error' : ''
           }`}
-          name={`${name || id}-input`}
+          name={`${name || id}`}
           id={inputId}
           placeholder={placeholder}
           disabled={disabled}

package/src/components/textinput/Textinput.tsx

@@ -4,11 +4,11 @@ import React, {
   ForwardedRef,
   forwardRef,
   InputHTMLAttributes,
-  useRef,
   useEffect,
   useState,
   ChangeEvent,
   ReactNode,
+  ChangeEventHandler,
 } from 'react'
 
 import { PktIcon } from '../icon/Icon'
@@ -52,7 +52,7 @@ export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
   readonly?: boolean
   required?: boolean
   dataTestid?: string
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
+  onChange?: ChangeEventHandler<HTMLInputElement>
   skipForwardTestid?: boolean
 }
 
@@ -115,10 +115,7 @@ export const PktTextinput = forwardRef(
     const labelledBy = ariaLabelledby || labelId
 
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-      const newValue = event.currentTarget.value
-      if (counter) {
-        setCounterCurrent(newValue?.length || 0)
-      }
+      counter && setCounterCurrent(event.currentTarget?.value?.length || 0)
       if (onChange) {
         onChange(event)
       }