@oslokommune/punkt-react 12.3.6 → 12.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.3.6",
+  "version": "12.3.8",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.1.0",
     "@oslokommune/punkt-css": "^12.3.4",
-    "@oslokommune/punkt-elements": "^12.3.4",
+    "@oslokommune/punkt-elements": "^12.3.8",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -102,5 +102,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "38d5fcf019c1a3a657d95f065d222f1ab927810c"
+  "gitHead": "be4a7ca19fb67b079fe05d9901f891a10ebd02d4"
 }

package/src/components/accordion/Accordion.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { ReactNode, Ref, forwardRef } from 'react'
 
 export interface IPktAccordion {

package/src/components/accordion/AccordionItem.tsx

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

package/src/components/alert/Alert.tsx

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

package/src/components/backlink/BackLink.tsx

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

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,116 +1,76 @@
-'use client'
+import React, { ForwardedRef, forwardRef } from 'react'
+import { Link } from 'react-router-dom'
 
-import React, { ForwardedRef, forwardRef } from 'react';
-import { Link } from 'react-router-dom';
-
-import PktIcon from '../icon/Icon'; // Import your Icon component
+import PktIcon from '../icon/Icon' // Import your Icon component
 
 export interface IBreadcrumbs {
-    text: string;
-    href: string;
+  text: string
+  href: string
 }
 
 export interface IPktBreadcrumbs extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    breadcrumbs: IBreadcrumbs[];
-    navigationType?: 'router' | 'anchor';
+  breadcrumbs: IBreadcrumbs[]
+  navigationType?: 'router' | 'anchor'
 }
 
-
 export const PktBreadcrumbs = forwardRef(
-    ({ breadcrumbs, navigationType, className, ...props }: IPktBreadcrumbs, ref: ForwardedRef<HTMLAnchorElement>) => {
-
-        // Slice the breadcrumb to maximum links
-        const slicedBreadcrumbs = breadcrumbs.slice(0, 4);
-        // Define the backLink function
-        const backLink = slicedBreadcrumbs[slicedBreadcrumbs.length - 2];
-
-        // Define the classes
-        const classes = [
-            className,
-            'pkt-breadcrumbs',
-        ].filter(Boolean)
-            .join(' ')
-
-
-        // If navigationType is router, then use react-router Link, else use anchor tag
-        // Mobile and desktop have different markup
-        return (
-            <nav ref={ref} aria-label="brødsmulemeny" className={classes}>
-
-                <ol className="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
-                    {slicedBreadcrumbs.map((item, index) => (
-                        <li
-                            key={`breadcrumb-${index}`}
-                            className="pkt-breadcrumbs__item"
-                        >
-
-                            {index === slicedBreadcrumbs.length - 1 ? (
-                                <span className="pkt-breadcrumbs__label" aria-current="true">
-                                    <span className="pkt-breadcrumbs__text">{item.text}</span>
-                                </span>
-                            ) : (
-                                navigationType === 'router' ? (
-                                    <Link
-                                        to={item.href}
-                                        className="pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link"
-                                        {...props}
-                                    >
-                                        <PktIcon
-                                            className="pkt-icon pkt-breadcrumbs__icon pkt-link__icon"
-                                            name="chevron-thin-right"
-                                        />
-                                        <span className="pkt-breadcrumbs__text">{item.text}</span>
-                                    </Link>
-
-                                ) : (
-                                    <a
-                                        href={item.href}
-                                        className="pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link"
-                                        {...props}
-                                    >
-                                        <PktIcon
-                                            className="pkt-icon pkt-breadcrumbs__icon pkt-link__icon"
-                                            name="chevron-thin-right"
-                                        />
-                                        <span className="pkt-breadcrumbs__text">{item.text}</span>
-                                    </a>
-                                )
-
-                            )}
-                        </li>
-                    ))}
-                </ol>
-
-                {
-                    navigationType === 'router' ? (
-                        <Link
-                            to={backLink.href}
-                            className="pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile"
-                            {...props}
-                        >
-                            <PktIcon
-                                className="pkt-back-link__icon pkt-icon pkt-link__icon"
-                                name="chevron-thin-left"
-                            />
-                            <span className="pkt-breadcrumbs__text">{backLink.text}</span>
-                        </Link>
-                    ) : (
-                        <a
-                            href={backLink.href}
-                            className="pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile"
-                            {...props}
-                        >
-                            <PktIcon
-                                className="pkt-back-link__icon pkt-icon pkt-link__icon"
-                                name="chevron-thin-left"
-                            />
-                            <span className="pkt-breadcrumbs__text">{backLink.text}</span>
-                        </a>
-                    )
-                }
-            </nav>
-        );
-    }
-);
-
-export default PktBreadcrumbs;
+  ({ breadcrumbs, navigationType, className, ...props }: IPktBreadcrumbs, ref: ForwardedRef<HTMLAnchorElement>) => {
+    // Slice the breadcrumb to maximum links
+    const slicedBreadcrumbs = breadcrumbs.slice(0, 4)
+    // Define the backLink function
+    const backLink = slicedBreadcrumbs[slicedBreadcrumbs.length - 2]
+
+    // Define the classes
+    const classes = [className, 'pkt-breadcrumbs'].filter(Boolean).join(' ')
+
+    // If navigationType is router, then use react-router Link, else use anchor tag
+    // Mobile and desktop have different markup
+    return (
+      <nav ref={ref} aria-label="brødsmulemeny" className={classes}>
+        <ol className="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
+          {slicedBreadcrumbs.map((item, index) => (
+            <li key={`breadcrumb-${index}`} className="pkt-breadcrumbs__item">
+              {index === slicedBreadcrumbs.length - 1 ? (
+                <span className="pkt-breadcrumbs__label" aria-current="true">
+                  <span className="pkt-breadcrumbs__text">{item.text}</span>
+                </span>
+              ) : navigationType === 'router' ? (
+                <Link
+                  to={item.href}
+                  className="pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link"
+                  {...props}
+                >
+                  <PktIcon className="pkt-icon pkt-breadcrumbs__icon pkt-link__icon" name="chevron-thin-right" />
+                  <span className="pkt-breadcrumbs__text">{item.text}</span>
+                </Link>
+              ) : (
+                <a
+                  href={item.href}
+                  className="pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link"
+                  {...props}
+                >
+                  <PktIcon className="pkt-icon pkt-breadcrumbs__icon pkt-link__icon" name="chevron-thin-right" />
+                  <span className="pkt-breadcrumbs__text">{item.text}</span>
+                </a>
+              )}
+            </li>
+          ))}
+        </ol>
+
+        {navigationType === 'router' ? (
+          <Link to={backLink.href} className="pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile" {...props}>
+            <PktIcon className="pkt-back-link__icon pkt-icon pkt-link__icon" name="chevron-thin-left" />
+            <span className="pkt-breadcrumbs__text">{backLink.text}</span>
+          </Link>
+        ) : (
+          <a href={backLink.href} className="pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile" {...props}>
+            <PktIcon className="pkt-back-link__icon pkt-icon pkt-link__icon" name="chevron-thin-left" />
+            <span className="pkt-breadcrumbs__text">{backLink.text}</span>
+          </a>
+        )}
+      </nav>
+    )
+  },
+)
+
+export default PktBreadcrumbs

package/src/components/button/Button.tsx

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

package/src/components/card/Card.tsx

@@ -1,5 +1,3 @@
-'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,5 +1,3 @@
-'use client'
-
 import React, { ForwardedRef, forwardRef } from 'react'
 
 export interface IPktCheckbox extends React.InputHTMLAttributes<HTMLInputElement> {

package/src/components/datepicker/Datepicker.tsx

@@ -1,7 +1,7 @@
 import React, { FC, LegacyRef } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktDatepicker as PktEl } from '@oslokommune/punkt-elements'
-import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
+import type { PktElType, PktElConstructor, PktEventWithTarget } from '@/interfaces/IPktElements'
 
 interface IPktDatepicker extends PktElType {
   value?: string | string[]
@@ -15,7 +15,7 @@ interface IPktDatepicker extends PktElType {
   range?: boolean
   weeknumbers?: boolean
   withcontrols?: boolean
-  fullWidth?: boolean
+  fullwidth?: boolean
   min?: string | number | undefined
   max?: string | number | undefined
   excludedates?: string[]
@@ -35,7 +35,7 @@ interface IPktDatepicker extends PktElType {
   strings?: any
   className?: string
   ref?: LegacyRef<HTMLElement>
-  onChange?: (e: Event) => void
+  onChange?: (e: PktEventWithTarget) => void
   onValueChange?: (e: CustomEvent) => void
   onToggleHelpText?: (e: CustomEvent) => void
 }
@@ -46,7 +46,7 @@ export const PktDatepicker: FC<IPktDatepicker> = createComponent({
   react: React,
   displayName: 'PktDatepicker',
   events: {
-    onChange: 'change' as EventName<Event>,
+    onChange: 'change' as EventName<PktEventWithTarget>,
     onValueChange: 'value-change' as EventName<CustomEvent>,
     onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
   },

package/src/components/footer/Footer.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import React from 'react'
 
 import { PktIcon } from '../icon/Icon'
@@ -32,7 +30,13 @@ export interface IPktFooter extends React.HTMLAttributes<HTMLDivElement> {
   tilgjengelighetLink?: string
 }
 
-export const PktFooter: React.FC<IPktFooter> = ({ columnOne, columnTwo, socialLinks, className, personvernOgInfoLink = "https://www.oslo.kommune.no/personvern-og-informasjonskapsler/", tilgjengelighetLink = "https://www.oslo.kommune.no/tilgjengelighet/"
+export const PktFooter: React.FC<IPktFooter> = ({
+  columnOne,
+  columnTwo,
+  socialLinks,
+  className,
+  personvernOgInfoLink = 'https://www.oslo.kommune.no/personvern-og-informasjonskapsler/',
+  tilgjengelighetLink = 'https://www.oslo.kommune.no/tilgjengelighet/',
 }) => {
   const classNames = [className, 'pkt-footer'].filter(Boolean).join(' ')
   return (
@@ -81,10 +85,7 @@ export const PktFooter: React.FC<IPktFooter> = ({ columnOne, columnTwo, socialLi
             <h2 className="pkt-footer__title">Om nettstedet</h2>
             <ul className="pkt-footer__list">
               <li className="pkt-footer__list-item">
-                <a
-                  className="pkt-footer__link"
-                  href={personvernOgInfoLink}
-                >
+                <a className="pkt-footer__link" href={personvernOgInfoLink}>
                   <PktIcon className="pkt-footer__link-icon" name="chevron-right" />
                   Personvern og informasjonskapsler
                 </a>
@@ -104,10 +105,7 @@ export const PktFooter: React.FC<IPktFooter> = ({ columnOne, columnTwo, socialLi
               {socialLinks
                 .filter((link) => link.language)
                 .map((link, index) => (
-                  <div
-                    key={`sociallinks-language-${index}`}
-                    className="pkt-footer__social-language"
-                  >
+                  <div key={`sociallinks-language-${index}`} className="pkt-footer__social-language">
                     <a
                       href={link.href}
                       aria-label={`til ${link.language} versjon av nettsiden`}

package/src/components/footerSimple/FooterSimple.tsx

@@ -1,25 +1,23 @@
-'use client'
+import React from 'react'
 
-import React from 'react';
-
-import { PktIcon } from '../icon/Icon';
+import { PktIcon } from '../icon/Icon'
 
 export interface IPktFooterSimple extends React.HTMLAttributes<HTMLDivElement> {
   links?: Array<{
-    href: string;
-    text: string;
-    external?: boolean;
-    openInNewTab?: boolean;
-  }>;
+    href: string
+    text: string
+    external?: boolean
+    openInNewTab?: boolean
+  }>
   personvernOgInfoLink?: string
   tilgjengelighetLink?: string
 }
 
 export const PktFooterSimple: React.FC<IPktFooterSimple> = ({
   links = [],
-  personvernOgInfoLink = "https://www.oslo.kommune.no/personvern-og-informasjonskapsler/",
-  tilgjengelighetLink = "https://www.oslo.kommune.no/tilgjengelighet/",
-  className
+  personvernOgInfoLink = 'https://www.oslo.kommune.no/personvern-og-informasjonskapsler/',
+  tilgjengelighetLink = 'https://www.oslo.kommune.no/tilgjengelighet/',
+  className,
 }) => {
   const classNames = [className, 'pkt-footer-simple'].filter(Boolean).join(' ')
   return (
@@ -34,10 +32,7 @@ export const PktFooterSimple: React.FC<IPktFooterSimple> = ({
                 target={link.openInNewTab ? '_blank' : '_self'}
                 rel={link.openInNewTab ? 'noopener noreferrer' : undefined}
               >
-                <PktIcon
-                  className="pkt-footer-simple__link-icon"
-                  name="chevron-right"
-                />
+                <PktIcon className="pkt-footer-simple__link-icon" name="chevron-right" />
                 {link.text}
               </a>
             </li>
@@ -57,5 +52,5 @@ export const PktFooterSimple: React.FC<IPktFooterSimple> = ({
         </ul>
       </div>
     </footer>
-  );
-};
+  )
+}

package/src/components/header/Header.tsx

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

package/src/components/icon/Icon.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import React, { useContext, useEffect, useState } from 'react'
 
 import { PktIconContext } from './IconContext'

package/src/components/icon/IconContext.tsx

@@ -1,11 +1,9 @@
-'use client'
+import { createContext } from 'react'
 
-import { createContext } from "react";
-
-import defaultIconFetcher from "./DefaultIconFetcher";
+import defaultIconFetcher from './DefaultIconFetcher'
 
 export type IconFetcher = {
   fetchIcon: (name: string, path: string | undefined) => Promise<string | null>
-};
+}
 
-export const PktIconContext = createContext<IconFetcher>(defaultIconFetcher);
+export const PktIconContext = createContext<IconFetcher>(defaultIconFetcher)

package/src/components/input/Input.tsx

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

package/src/components/inputwrapper/InputWrapper.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import React, { ForwardedRef, forwardRef, ReactNode, RefAttributes, useState } from 'react'
 
 import { PktAlert } from '../alert/Alert'

package/src/components/link/Link.tsx

@@ -1,5 +1,3 @@
-'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,11 +1,9 @@
-'use client'
-
 import React, { ForwardedRef, forwardRef } from 'react'
 
 import { PktIcon } from '../icon/Icon'
 
 export interface IPktLinkCard extends React.HTMLAttributes<HTMLAnchorElement> {
-  skin?: 'normal' | 'blue' | 'beige' | 'beige-outline' | 'green' | 'grey' | 'gray' | 'grey-outline'| 'gray-outline'
+  skin?: 'normal' | 'blue' | 'beige' | 'beige-outline' | 'green' | 'grey' | 'gray' | 'grey-outline' | 'gray-outline'
   title?: string
   href?: string
   iconName?: string

package/src/components/loader/Loader.tsx

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

package/src/components/preview/Preview.tsx

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

package/src/components/preview/PreviewSpecs.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import React from 'react'
 import { PktTable } from '../table/Table'
 import { PktTableHeader } from '../table/TableHeader'
@@ -97,6 +95,7 @@ export const PktPreviewSpecs: React.FC<{ specs: ISpecObject }> = ({ specs }) =>
               <PktTableRow>
                 <PktTableHeaderCell>Event</PktTableHeaderCell>
                 <PktTableHeaderCell>Beskrivelse</PktTableHeaderCell>
+                <PktTableHeaderCell>Type</PktTableHeaderCell>
               </PktTableRow>
             </PktTableHeader>
             <PktTableBody>
@@ -108,6 +107,7 @@ export const PktPreviewSpecs: React.FC<{ specs: ISpecObject }> = ({ specs }) =>
                   <PktTableDataCell dataLabel="Beskrivelse">
                     <span dangerouslySetInnerHTML={{ __html: value.description || '' }}></span>
                   </PktTableDataCell>
+                  <PktTableDataCell dataLabel="Type">{value.type}</PktTableDataCell>
                 </PktTableRow>
               ))}
             </PktTableBody>

package/src/components/progressbar/Progressbar.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import React, { useState, useEffect, useRef, CSSProperties, forwardRef, HTMLAttributes, ForwardedRef } from 'react'
 import classNames from 'classnames'
 import { v4 as uuidv4 } from 'uuid'

package/src/components/radio/RadioButton.tsx

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

package/src/components/searchinput/SearchInput.tsx

@@ -1,6 +1,4 @@
-'use client'
-
-import React, { forwardRef, HTMLProps, ReactNode } from 'react'
+import React, { ChangeEvent, forwardRef, HTMLProps, ReactNode } from 'react'
 
 import { PktButton } from '../button/Button'
 
@@ -66,6 +64,10 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
       }
     }
 
+    const handleNoOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+      value = e.target.value
+    }
+
     const wrapperClass = `pkt-searchinput pkt-searchinput--${appearance} ${
       fullwidth ? 'pkt-searchinput--fullwidth' : ''
     }`
@@ -103,7 +105,7 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
               aria-autocomplete="list"
               ref={ref}
               aria-controls={`${id}-suggestions`}
-              onChange={onChange}
+              onChange={onChange ? onChange : handleNoOnChange}
               {...props}
             />
             <PktButton
@@ -114,8 +116,22 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
               color={appearance === 'global' ? 'yellow' : undefined}
               type="submit"
               disabled={disabled}
-              onClick={onSearch && (() => onSearch(value))}
-              onKeyUp={onSearch && ((event) => event.key === 'Enter' && onSearch(value))}
+              onClick={
+                onSearch &&
+                ((event) => {
+                  event.preventDefault()
+                  onSearch(value)
+                })
+              }
+              onKeyUp={
+                onSearch &&
+                ((event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault()
+                    onSearch(value)
+                  }
+                })
+              }
             >
               {label || placeholder}
             </PktButton>

package/src/components/select/Select.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import React, { ForwardedRef, forwardRef, ReactNode, SelectHTMLAttributes } from 'react'
 
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'

package/src/components/stepper/Step.tsx

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

package/src/components/stepper/Stepper.tsx

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

package/src/components/table/Table.tsx

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

package/src/components/table/TableBody.tsx

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

package/src/components/table/TableData.tsx

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

package/src/components/table/TableDataCell.tsx

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

package/src/components/table/TableHeader.tsx

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

package/src/components/table/TableHeaderCell.tsx

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

package/src/components/table/TableRow.tsx

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