@oslokommune/punkt-react 12.37.6 → 12.37.7

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.37.7](https://github.com/oslokommune/punkt/compare/12.37.6...12.37.7) (2025-05-13)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* Støtte nextjs med 'use client' på alle React-komponenter (#2537). 
+
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.37.0](https://github.com/oslokommune/punkt/compare/12.36.2...12.37.0) (2025-05-05)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -343,7 +343,7 @@ export declare interface IPktRadioButton extends InputHTMLAttributes<HTMLInputEl
     defaultChecked?: boolean;
     disabled?: boolean;
     value?: string;
-    checkHelptext?: string | default_2.ReactNode | default_2.ReactNode[];
+    checkHelptext?: string | ReactNode | ReactNode[];
     ref?: ForwardedRef<HTMLInputElement>;
     onChange?: ChangeEventHandler<HTMLInputElement>;
     onInput?: ChangeEventHandler<HTMLInputElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.37.6",
+  "version": "12.37.7",
   "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": "424c529acc9bd6f1ce9063cd79e7e39bcdac27a2"
+  "gitHead": "5f647c136479cb172fa233080b8bef8c33f948e4"
 }

package/src/components/accordion/Accordion.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
 import { createComponent } from '@lit/react'
 import React, { ForwardRefExoticComponent, LegacyRef } from 'react'

package/src/components/accordion/AccordionItem.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardRefExoticComponent, LegacyRef, ReactElement, forwardRef } from 'react'
 import { PktElConstructor, PktElType, PktEventWithTarget } from '@/interfaces/IPktElements'
 import { createComponent, EventName } from '@lit/react'

package/src/components/alert/Alert.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktAlert as PktElAlert } from '@oslokommune/punkt-elements'

package/src/components/backlink/BackLink.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardRefExoticComponent, LegacyRef, AnchorHTMLAttributes, MouseEventHandler } from 'react'
 import { createComponent } from '@lit/react'
 import { PktBackLink as PktElBackLink } from '@oslokommune/punkt-elements'

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef, forwardRef } from 'react'
 import { Link } from 'react-router-dom'
 

package/src/components/button/Button.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   LegacyRef,

package/src/components/card/Card.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ReactElement, forwardRef, ReactNode, ForwardedRef } from 'react'
 import { createComponent } from '@lit/react'
 import { PktCard as PktElCard } from '@oslokommune/punkt-elements'

package/src/components/checkbox/Checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ChangeEventHandler,
   FocusEventHandler,

package/src/components/combobox/Combobox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   ReactNode,

package/src/components/consent/Consent.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardRefExoticComponent, LegacyRef } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktConsent as PktElConsent } from '@oslokommune/punkt-elements'

package/src/components/datepicker/Datepicker.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   LegacyRef,

package/src/components/footer/Footer.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 
 import { PktIcon } from '../icon/Icon'

package/src/components/footerSimple/FooterSimple.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 
 import { PktIcon } from '../icon/Icon'

package/src/components/header/Header.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import React, { ForwardedRef, forwardRef, HTMLAttributes } from 'react'
 

package/src/components/heading/Heading.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { createComponent } from '@lit/react'
 import { FC, forwardRef } from 'react'
 import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'

package/src/components/helptext/Helptext.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardRefExoticComponent, ReactNode, LegacyRef, FC, forwardRef, HTMLAttributes } from 'react'
 import { PktHelptext as PktElHelptext } from '@oslokommune/punkt-elements'
 import { createComponent, EventName } from '@lit/react'

package/src/components/icon/Icon.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC } from 'react'
 
 import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'

package/src/components/input/Input.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef } from 'react'
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {

package/src/components/inputwrapper/InputWrapper.tsx

@@ -1,12 +1,6 @@
-import React, {
-  FC,
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  LegacyRef,
-  ReactElement,
-  ReactNode,
-} from 'react'
+'use client'
+
+import React, { FC, forwardRef, ForwardRefExoticComponent, LegacyRef, ReactElement, ReactNode } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktInputWrapper as PktEl } from '@oslokommune/punkt-elements'
 import type { PktElType } from '@/interfaces/IPktElements'

package/src/components/link/Link.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktLink as PktElLink } from '@oslokommune/punkt-elements'

package/src/components/linkcard/LinkCard.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktLinkCard as PktElLinkCard } from '@oslokommune/punkt-elements'

package/src/components/loader/Loader.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, ForwardedRef, FC, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktLoader as PktElLoader } from '@oslokommune/punkt-elements'

package/src/components/messagebox/Messagebox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktMessagebox as PktElMessagebox } from '@oslokommune/punkt-elements'

package/src/components/modal/Modal.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktModal as PktElModal } from '@oslokommune/punkt-elements'

package/src/components/preview/Preview.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { cloneElement, isValidElement, ReactNode, useRef, useState } from 'react'
 import reactElementToJSXString from 'react-element-to-jsx-string'
 import * as prettier from 'prettier/standalone'

package/src/components/preview/PreviewPropEditor.tsx

@@ -1,4 +1,6 @@
-import { ChangeEvent, FC } from 'react'
+'use client'
+
+import { FC } from 'react'
 import { PktCheckbox } from '../checkbox/Checkbox'
 import { PktDatepicker } from '../datepicker/Datepicker'
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'

package/src/components/preview/PreviewSpecs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 import { PktTable } from '../table/Table'
 import { PktTableHeader } from '../table/TableHeader'

package/src/components/progressbar/Progressbar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, ForwardedRef, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktProgressbar as PktElProgressbar } from '@oslokommune/punkt-elements'

package/src/components/radio/RadioButton.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ChangeEventHandler,
   FocusEventHandler,
@@ -19,7 +21,7 @@ export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
   defaultChecked?: boolean
   disabled?: boolean
   value?: string
-  checkHelptext?: string | React.ReactNode | React.ReactNode[]
+  checkHelptext?: string | ReactNode | ReactNode[]
 
   ref?: ForwardedRef<HTMLInputElement>
   onChange?: ChangeEventHandler<HTMLInputElement>

package/src/components/searchinput/SearchInput.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ChangeEvent, forwardRef, HTMLProps, ReactNode } from 'react'
 
 import { PktButton } from '../button/Button'
@@ -151,7 +153,8 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
                     }`,
                     type: suggestion.onClick ? 'button' : undefined,
                     onClick: () => handleSuggestionClick(suggestion.onClick, index),
-                    onKeyUp: (event: { key: string }) => event.key === "Enter" && handleSuggestionClick(suggestion.onClick, index)
+                    onKeyUp: (event: { key: string }) =>
+                      event.key === 'Enter' && handleSuggestionClick(suggestion.onClick, index),
                   },
                   <>
                     {suggestion.title && <h3 className="pkt-searchinput__suggestion-title">{suggestion.title}</h3>}

package/src/components/select/Select.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   ReactNode,

package/src/components/stepper/Step.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import cn from 'classnames'
 
 export type TStepStatus = 'completed' | 'incomplete' | 'current'

package/src/components/stepper/Stepper.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { ReactElement, Ref, forwardRef } from 'react'
 import { IPktStep } from './Step'
 import classNames from 'classnames'

package/src/components/table/Table.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableBody.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableData.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 
 interface TableDataProps {

package/src/components/table/TableDataCell.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableHeader.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableHeaderCell.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableRow.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/tabs/Tabs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, Ref, useRef, useEffect, KeyboardEvent, Fragment } from 'react'
 import { PktIcon } from '../icon/Icon'
 import { PktTag } from '../tag/Tag'

package/src/components/tag/Tag.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktTag as PktElTag } from '@oslokommune/punkt-elements'

package/src/components/textarea/Textarea.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   LegacyRef,

package/src/components/textinput/Textinput.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   LegacyRef,

package/src/components/childrenWrapper/childrenWrapper.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-interface childrenWrapperProps {
-  wrapperType?: 'div' | 'span'; 
-  children?: React.ReactNode | React.ReactNode[];
-}
-
-export function childrenWrapper<P>(
-  Component: React.ComponentType<P>, 
-  defaultWrapper: 'div' | 'span' = 'div'
-): React.FC<P & childrenWrapperProps> { return ({ wrapperType = defaultWrapper, children, ...props }) => {
-    const Tag = wrapperType;
-
-    return (
-      <Component {...(props as P)}>
-        <Tag className="pkt-contents">{children}</Tag>
-      </Component>
-    );
-  };
-}