@oslokommune/punkt-react 12.17.0 → 12.17.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.17.0",
+  "version": "12.17.2",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.5",
-    "@oslokommune/punkt-elements": "^12.17.0",
+    "@oslokommune/punkt-elements": "^12.17.2",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.14.0",
-    "@oslokommune/punkt-css": "^12.15.0",
+    "@oslokommune/punkt-css": "^12.17.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -111,5 +111,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "dbe0cf072e3e48f6295734c4debc9d999c116289"
+  "gitHead": "998cf96281840a47cba5ba3e0c76e6fa1d2ed10e"
 }

package/src/components/datepicker/Datepicker.tsx

@@ -1,48 +1,52 @@
-import React, { ForwardRefExoticComponent, LegacyRef, ChangeEventHandler, FocusEventHandler } from 'react'
+import React, {
+  ForwardRefExoticComponent,
+  LegacyRef,
+  ChangeEventHandler,
+  FocusEventHandler,
+  ReactNode,
+  InputHTMLAttributes,
+} from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktDatepicker as PktEl } from '@oslokommune/punkt-elements'
-import type { PktElType, PktEventWithTarget } from '@/interfaces/IPktElements'
+import type { PktEventWithTarget } from '@/interfaces/IPktElements'
 
-interface IPktDatepicker extends Omit<PktElType, 'ref'> {
+export interface IPktDatepicker extends InputHTMLAttributes<HTMLInputElement> {
   value?: string | string[]
   label?: string
-  name?: string
   dateformat?: string
   multiple?: boolean
   maxlength?: number
-  disabled?: boolean
   range?: boolean
   weeknumbers?: boolean
   withcontrols?: boolean
   fullwidth?: boolean
-  min?: string | number | undefined
-  max?: string | number | undefined
   excludedates?: string[]
   excludeweekdays?: string[]
   currentmonth?: string
   calendarOpen?: boolean
-  required?: boolean
   requiredTag?: boolean
   requiredText?: string
   optionalTag?: boolean
   optionalText?: string
   useWrapper?: boolean
-  helptext?: string
-  helptextDropdown?: string
+  helptext?: string | ReactNode | ReactNode[]
+  helptextDropdown?: string | ReactNode | ReactNode[]
   helptextDropdownButton?: string
   hasError?: boolean
-  errorMessage?: string
+  errorMessage?: string | ReactNode | ReactNode[]
   strings?: any
-  ref?: LegacyRef<PktEl>
+  ref?: LegacyRef<HTMLInputElement>
   onChange?: ChangeEventHandler<HTMLInputElement>
   onInput?: ChangeEventHandler<HTMLInputElement>
   onBlur?: FocusEventHandler<HTMLInputElement>
   onFocus?: FocusEventHandler<HTMLInputElement>
   onValueChange?: (e: CustomEvent) => void
   onToggleHelpText?: (e: CustomEvent) => void
+  dataTestid?: string
+  skipForwardTestid?: boolean
 }
 
-export const PktDatepicker: ForwardRefExoticComponent<IPktDatepicker> = createComponent({
+export const PktDatepicker = createComponent({
   tagName: 'pkt-datepicker',
   elementClass: PktEl,
   react: React,
@@ -54,4 +58,4 @@ export const PktDatepicker: ForwardRefExoticComponent<IPktDatepicker> = createCo
     onValueChange: 'value-change' as EventName<CustomEvent>,
     onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
   },
-})
+}) as ForwardRefExoticComponent<IPktDatepicker>

package/src/components/textarea/Textarea.tsx

@@ -1,15 +1,20 @@
-import React, { ForwardRefExoticComponent, LegacyRef, ChangeEventHandler, FocusEventHandler, ReactNode } from 'react'
+import React, {
+  ForwardRefExoticComponent,
+  LegacyRef,
+  ChangeEventHandler,
+  FocusEventHandler,
+  ReactNode,
+  TextareaHTMLAttributes,
+} from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktTextarea as PktEl } from '@oslokommune/punkt-elements'
-import type { PktElType, PktEventWithTarget } from '@/interfaces/IPktElements'
+import type { PktEventWithTarget } from '@/interfaces/IPktElements'
 
-export interface IPktTextarea extends Omit<PktElType, 'ref'> {
-  id: string
+export interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   ariaDescribedby?: string
   ariaLabelledby?: string
   counter?: boolean
   counterMaxLength?: number
-  disabled?: boolean
   errorMessage?: string | ReactNode | ReactNode[]
   hasError?: boolean
   helptext?: string | ReactNode | ReactNode[]
@@ -17,34 +22,35 @@ export interface IPktTextarea extends Omit<PktElType, 'ref'> {
   helptextDropdownButton?: string
   inline?: boolean
   fullwidth?: boolean
-  label: string
-  name?: string
+  label?: string
   optionalTag?: boolean
   optionalText?: string
   requiredTag?: boolean
   requiredText?: string
-  placeholder?: string
-  rows?: number
   useWrapper?: boolean
   value?: string
-  ref?: LegacyRef<PktEl>
+  ref?: LegacyRef<HTMLTextAreaElement>
   onChange?: ChangeEventHandler<HTMLTextAreaElement>
   onInput?: ChangeEventHandler<HTMLTextAreaElement>
   onBlur?: FocusEventHandler<HTMLTextAreaElement>
   onFocus?: FocusEventHandler<HTMLTextAreaElement>
   onValueChange?: (e: CustomEvent) => void
   onToggleHelpText?: (e: CustomEvent) => void
+  dataTestid?: string
+  skipForwardTestid?: boolean
 }
 
-export const PktTextarea: ForwardRefExoticComponent<IPktTextarea> = createComponent({
+export const PktTextarea = createComponent({
   tagName: 'pkt-textarea',
   elementClass: PktEl,
   react: React,
   displayName: 'PktTextarea',
   events: {
     onChange: 'change' as EventName<PktEventWithTarget>,
+    onInput: 'change' as EventName<PktEventWithTarget>,
     onBlur: 'blur' as EventName<FocusEvent>,
     onFocus: 'focus' as EventName<FocusEvent>,
+    onValueChange: 'valueChange' as EventName<CustomEvent>,
     onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
   },
-})
+}) as ForwardRefExoticComponent<IPktTextarea>

package/src/components/textinput/Textinput.tsx

@@ -1,15 +1,19 @@
-import React, { ForwardRefExoticComponent, LegacyRef, ChangeEventHandler, FocusEventHandler, ReactNode } from 'react'
+import React, {
+  ForwardRefExoticComponent,
+  LegacyRef,
+  ChangeEventHandler,
+  FocusEventHandler,
+  ReactNode,
+  InputHTMLAttributes,
+} from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktTextinput as PktEl } from '@oslokommune/punkt-elements'
-import type { PktElType, PktEventWithTarget } from '@/interfaces/IPktElements'
+import type { PktEventWithTarget } from '@/interfaces/IPktElements'
 
-export interface IPktTextinput extends Omit<PktElType, 'ref'> {
-  id: string
+export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
   ariaLabelledby?: string
-  autocomplete?: string
   counter?: boolean
   counterMaxLength?: number
-  disabled?: boolean
   errorMessage?: string | ReactNode | ReactNode[]
   hasError?: boolean
   helptext?: string | ReactNode | ReactNode[]
@@ -18,37 +22,38 @@ export interface IPktTextinput extends Omit<PktElType, 'ref'> {
   iconNameRight?: string
   inline?: boolean
   fullwidth?: boolean
-  label: string
-  name?: string
+  label?: string
   optionalTag?: boolean
   optionalText?: string
   requiredTag?: boolean
   requiredText?: string
-  placeholder?: string
   prefix?: string
   suffix?: string
-  type?: string
   useWrapper?: boolean
   value?: string
   omitSearchIcon?: boolean
-  ref?: LegacyRef<PktEl>
+  ref?: LegacyRef<HTMLInputElement>
   onChange?: ChangeEventHandler<HTMLInputElement>
   onInput?: ChangeEventHandler<HTMLInputElement>
   onBlur?: FocusEventHandler<HTMLInputElement>
   onFocus?: FocusEventHandler<HTMLInputElement>
   onValueChange?: (e: CustomEvent) => void
   onToggleHelpText?: (e: CustomEvent) => void
+  dataTestid?: string
+  skipForwardTestid?: boolean
 }
 
-export const PktTextinput: ForwardRefExoticComponent<IPktTextinput> = createComponent({
+export const PktTextinput = createComponent({
   tagName: 'pkt-textinput',
   elementClass: PktEl,
   react: React,
   displayName: 'PktTextinput',
   events: {
     onChange: 'change' as EventName<PktEventWithTarget>,
+    onInput: 'input' as EventName<PktEventWithTarget>,
     onBlur: 'blur' as EventName<FocusEvent>,
     onFocus: 'focus' as EventName<FocusEvent>,
+    onValueChange: 'valueChange' as EventName<CustomEvent>,
     onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
   },
-})
+}) as ForwardRefExoticComponent<IPktTextinput>