@oslokommune/punkt-react 13.6.16 → 13.8.0

package/CHANGELOG.md

@@ -5,6 +5,47 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.8.0](https://github.com/oslokommune/punkt/compare/13.7.0...13.8.0) (2025-10-15)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Ny måte å gjøre PktTabs med ny komponent PktTabItem (#3078). 
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [13.7.0](https://github.com/oslokommune/punkt/compare/13.6.16...13.7.0) (2025-10-14)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Massiv opprydding og oppdatering + fjerning av PktPreview i React (#3074). - Byttet React-tester til å bruke Vitest (så vi kan fjerne utdatert react-scripts som Facebook ikke lenger vedlikeholder og ga feilmeldinger i bygget vårt)
+  - Fjernet PktPreview fra React-pakken, da vi ikke lenger bruker denne i dokumentasjonen vår, og den skapte feilmeldinger i bygget vårt
+  - Oppdaterte Lerna, Vite, Vitest, ESLint, Typescript
+  - Oppdaterte omtrent alle React-komponenter til å ha moderne syntaks for bruk av dens metoder (Det er visst ønskelig at man skal gjøre `import { useState } from 'react'` istedenfor `import React from 'react'` og så bruke `React.useState`.)
+  - La til linting i Elements
+  - React-pakken gikk fra å være 1.6 megabyte til å være 365 kilobytes!!!
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.6.16](https://github.com/oslokommune/punkt/compare/13.6.15...13.6.16) (2025-10-14)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
 
 import { AnchorHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
+import { ChangeEvent } from 'react';
 import { ChangeEventHandler } from 'react';
+import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { FC } from 'react';
 import { FocusEventHandler } from 'react';
@@ -18,12 +21,15 @@ import { IPktProgressbar as IPktProgressbar_2 } from '@oslokommune/punkt-element
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LegacyRef } from 'react';
 import { LinkHTMLAttributes } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
+import { RefObject } from 'react';
 import { SelectHTMLAttributes } from 'react';
+import { SyntheticEvent } from 'react';
 import { TextareaHTMLAttributes } from 'react';
 
 declare type Booleanish = boolean | 'true' | 'false';
@@ -47,7 +53,7 @@ declare interface IBreadcrumbs {
     href: string;
 }
 
-declare interface InputProps extends default_2.InputHTMLAttributes<HTMLInputElement> {
+declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     /** The input's label */
     label?: string;
     /** The input's id */
@@ -79,8 +85,8 @@ export declare interface IPktAccordionItem {
     children?: ReactNode;
     name?: string;
     className?: string;
-    onClick?: (e: default_2.MouseEvent<HTMLDetailsElement>) => void;
-    onToggle?: (e: default_2.SyntheticEvent<HTMLDetailsElement>) => void;
+    onClick?: (e: MouseEvent_2<HTMLDetailsElement>) => void;
+    onToggle?: (e: SyntheticEvent<HTMLDetailsElement>) => void;
 }
 
 export declare interface IPktAlert extends PktElType {
@@ -101,12 +107,12 @@ export declare interface IPktBackLink extends ExtendedBackLink {
     onClick?: MouseEventHandler<HTMLAnchorElement>;
 }
 
-export declare interface IPktBreadcrumbs extends default_2.AnchorHTMLAttributes<HTMLAnchorElement> {
+export declare interface IPktBreadcrumbs extends AnchorHTMLAttributes<HTMLAnchorElement> {
     breadcrumbs: IBreadcrumbs[];
     navigationType?: 'router' | 'anchor';
 }
 
-export declare interface IPktButton extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+export declare interface IPktButton extends ButtonHTMLAttributes<HTMLButtonElement> {
     iconName?: string;
     secondIconName?: string;
     mode?: 'light' | 'dark';
@@ -144,7 +150,7 @@ export declare interface IPktCard extends PktElType {
     })[];
 }
 
-export declare interface IPktCheckbox extends default_2.InputHTMLAttributes<HTMLInputElement> {
+export declare interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
     id: string;
     hasTile?: boolean;
     disabled?: boolean;
@@ -219,7 +225,7 @@ export declare interface IPktDatepicker extends InputHTMLAttributes<HTMLInputEle
     skipForwardTestid?: boolean;
 }
 
-export declare interface IPktFooter extends default_2.HTMLAttributes<HTMLDivElement> {
+export declare interface IPktFooter extends HTMLAttributes<HTMLDivElement> {
     columnOne: Column;
     columnTwo: Column;
     socialLinks?: SocialLink[];
@@ -236,7 +242,7 @@ export declare interface IPktFooter extends default_2.HTMLAttributes<HTMLDivElem
     onToggleConsent?: (e: CustomEvent) => void;
 }
 
-export declare interface IPktFooterSimple extends default_2.HTMLAttributes<HTMLDivElement> {
+export declare interface IPktFooterSimple extends HTMLAttributes<HTMLDivElement> {
     links?: Array<{
         href: string;
         text: string;
@@ -366,7 +372,7 @@ export declare interface IPktModal extends PktElType {
 export declare interface IPktProgressbar extends ExtendedProgressbar {
 }
 
-export declare interface IPktRadioButton extends default_2.InputHTMLAttributes<HTMLInputElement> {
+export declare interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
     id: string;
     name: string;
     label: string;
@@ -431,7 +437,7 @@ export declare interface IPktStep {
     title: string;
 }
 
-export declare interface IPktStepper extends default_2.HTMLAttributes<HTMLOListElement> {
+export declare interface IPktStepper extends HTMLAttributes<HTMLOListElement> {
     /**
      * The index of the current active step
      */
@@ -474,10 +480,24 @@ export declare interface IPktTab {
     active?: boolean;
 }
 
+declare interface IPktTabItem {
+    children: ReactNode;
+    active?: boolean;
+    href?: string;
+    onClick?: (event: MouseEvent_2) => void;
+    icon?: string;
+    controls?: string;
+    tag?: string;
+    tagSkin?: TSkin_2;
+    index?: number;
+}
+
 declare interface IPktTabs {
     arrowNav?: boolean;
-    tabs: IPktTab[];
+    disableArrowNav?: boolean;
+    tabs?: IPktTab[];
     onTabSelected?: (index: number) => void;
+    children?: ReactNode;
 }
 
 export declare interface IPktTag extends PktElType {
@@ -589,43 +609,32 @@ declare interface ISearchForm extends ISearch {
 }
 
 declare interface ISearchInput extends ISearch {
-    onChange: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
 }
 
-declare interface ISpecObject {
-    name?: string;
-    'css-class'?: string;
-    'dark-mode'?: boolean;
-    isElement?: boolean;
-    props?: Record<string, TPropObject | string[] | number[]>;
-    events?: Record<string, TPropObject>;
-    slots?: Record<string, any>;
-    default?: any;
-}
-
-declare interface ITableBodyProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
+declare interface ITableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
     className?: string;
     children: React_2.ReactNode;
 }
 
-declare interface ITableDataCellProps extends React_2.HTMLAttributes<HTMLTableCellElement> {
+declare interface ITableDataCellProps extends HTMLAttributes<HTMLTableCellElement> {
     className?: string;
     children?: React_2.ReactNode;
     dataLabel?: string;
 }
 
-declare interface ITableHeaderCellProps extends React_2.HTMLAttributes<HTMLTableCellElement> {
+declare interface ITableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
     className?: string;
     children: React_2.ReactNode;
 }
 
-declare interface ITableHeaderProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
+declare interface ITableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
     className?: string;
     children: React_2.ReactNode;
 }
 
-declare interface ITableProps extends React_2.HTMLAttributes<HTMLTableElement> {
+declare interface ITableProps extends HTMLAttributes<HTMLTableElement> {
     compact?: boolean;
     skin?: 'basic' | 'zebra-blue';
     responsiveView?: boolean;
@@ -633,7 +642,7 @@ declare interface ITableProps extends React_2.HTMLAttributes<HTMLTableElement> {
     children: React_2.ReactNode;
 }
 
-declare interface ITableRowProps extends React_2.HTMLAttributes<HTMLTableRowElement> {
+declare interface ITableRowProps extends HTMLAttributes<HTMLTableRowElement> {
     className?: string;
     children: React_2.ReactNode;
 }
@@ -645,21 +654,21 @@ declare interface Link {
     openInNewTab?: boolean;
 }
 
-export declare const PktAccordion: default_2.ForwardRefExoticComponent<IPktAccordion & default_2.RefAttributes<HTMLDivElement>>;
+export declare const PktAccordion: ForwardRefExoticComponent<IPktAccordion & RefAttributes<HTMLDivElement>>;
 
-export declare const PktAccordionItem: default_2.ForwardRefExoticComponent<IPktAccordionItem & default_2.RefAttributes<HTMLDetailsElement>>;
+export declare const PktAccordionItem: ForwardRefExoticComponent<IPktAccordionItem & RefAttributes<HTMLDetailsElement>>;
 
 export declare const PktAlert: FC<IPktAlert>;
 
 export declare const PktBackLink: default_2.ForwardRefExoticComponent<IPktBackLink>;
 
-export declare const PktBreadcrumbs: default_2.ForwardRefExoticComponent<IPktBreadcrumbs & default_2.RefAttributes<HTMLAnchorElement>>;
+export declare const PktBreadcrumbs: ForwardRefExoticComponent<IPktBreadcrumbs & RefAttributes<HTMLAnchorElement>>;
 
-export declare const PktButton: default_2.ForwardRefExoticComponent<IPktButton & default_2.RefAttributes<HTMLButtonElement>>;
+export declare const PktButton: ForwardRefExoticComponent<IPktButton & RefAttributes<HTMLButtonElement>>;
 
 export declare const PktCard: FC<IPktCard>;
 
-export declare const PktCheckbox: default_2.ForwardRefExoticComponent<IPktCheckbox & default_2.RefAttributes<HTMLInputElement>>;
+export declare const PktCheckbox: ForwardRefExoticComponent<IPktCheckbox & RefAttributes<HTMLInputElement>>;
 
 export declare const PktCombobox: FC<IPktCombobox>;
 
@@ -667,17 +676,17 @@ export declare const PktConsent: ForwardRefExoticComponent<IPktConsent>;
 
 export declare const PktDatepicker: FC<IPktDatepicker>;
 
-declare interface PktElType extends default_2.HTMLAttributes<HTMLElement> {
+declare interface PktElType extends HTMLAttributes<HTMLElement> {
     className?: string;
-    style?: default_2.CSSProperties;
-    children?: default_2.ReactNode | default_2.ReactNode[];
-    ref?: default_2.RefObject<HTMLElement> | default_2.LegacyRef<HTMLElement>;
+    style?: CSSProperties;
+    children?: string | ReactNode | ReactNode[];
+    ref?: RefObject<HTMLElement> | LegacyRef<HTMLElement>;
     id?: string;
 }
 
-export declare const PktFooter: default_2.FC<IPktFooter>;
+export declare const PktFooter: FC<IPktFooter>;
 
-export declare const PktFooterSimple: default_2.FC<IPktFooterSimple>;
+export declare const PktFooterSimple: FC<IPktFooterSimple>;
 
 export declare const PktHeader: default_2.ForwardRefExoticComponent<IPktHeader & default_2.RefAttributes<HTMLDivElement>>;
 
@@ -699,7 +708,7 @@ export declare const PktIcon: FC<IPktIcon>;
  * <Input label="First name" id="firstName" validationMessage="First name is required" />
  *
  */
-export declare const PktInput: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
+export declare const PktInput: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
 
 export declare const PktInputWrapper: ForwardRefExoticComponent<Omit<IPktInputWrapper, "ref"> & RefAttributes<HTMLDivElement>>;
 
@@ -713,21 +722,19 @@ export declare const PktMessagebox: FC<IPktMessagebox>;
 
 export declare const PktModal: FC<IPktModal>;
 
-export declare const PktPreview: default_2.FC<PreviewProps>;
-
-export declare const PktPreviewWithJson: default_2.FC<PreviewProps_2>;
-
 export declare const PktProgressbar: default_2.ForwardRefExoticComponent<Omit<IPktProgressbar, "ref"> & default_2.RefAttributes<HTMLElement>>;
 
-export declare const PktRadioButton: default_2.ForwardRefExoticComponent<IPktRadioButton & default_2.RefAttributes<HTMLInputElement>>;
+export declare const PktRadioButton: ForwardRefExoticComponent<IPktRadioButton & RefAttributes<HTMLInputElement>>;
 
-export declare const PktSearchInput: default_2.ForwardRefExoticComponent<(Omit<ISearchForm, "ref"> | Omit<ISearchInput, "ref">) & default_2.RefAttributes<HTMLInputElement>>;
+export declare const PktSearchInput: ForwardRefExoticComponent<(Omit<ISearchForm, "ref"> | Omit<ISearchInput, "ref">) & RefAttributes<HTMLInputElement>>;
 
 export declare const PktSelect: ForwardRefExoticComponent<IPktSelectProps & RefAttributes<HTMLSelectElement>>;
 
 export declare const PktStep: ({ children, className, status, title }: IPktStep) => JSX_2.Element;
 
-export declare const PktStepper: default_2.ForwardRefExoticComponent<IPktStepper & default_2.RefAttributes<HTMLOListElement>>;
+export declare const PktStepper: ForwardRefExoticComponent<IPktStepper & RefAttributes<HTMLOListElement>>;
+
+export declare const PktTabItem: ForwardRefExoticComponent<IPktTabItem & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 export declare const PktTable: ({ className, compact, skin, responsiveView, children, ...props }: ITableProps) => JSX_2.Element;
 
@@ -741,7 +748,7 @@ export declare const PktTableHeaderCell: ({ className, children, ...props }: ITa
 
 export declare const PktTableRow: ({ className, children, ...props }: ITableRowProps) => JSX_2.Element;
 
-export declare const PktTabs: default_2.ForwardRefExoticComponent<IPktTabs & default_2.RefAttributes<HTMLDivElement>>;
+export declare const PktTabs: ForwardRefExoticComponent<IPktTabs & RefAttributes<HTMLDivElement>>;
 
 export declare const PktTag: FC<IPktTag>;
 
@@ -749,18 +756,6 @@ export declare const PktTextarea: default_2.ForwardRefExoticComponent<IPktTextar
 
 export declare const PktTextinput: default_2.ForwardRefExoticComponent<IPktTextinput & default_2.RefAttributes<HTMLInputElement>>;
 
-declare interface PreviewProps {
-    children?: ReactNode;
-    specs: ISpecObject;
-    fullWidth?: boolean;
-}
-
-declare interface PreviewProps_2 {
-    specs: Record<string, ISpecObject>;
-    previewJson: any;
-    fullWidth?: boolean;
-}
-
 declare interface Representing {
     name?: string;
     shortname?: string;
@@ -795,23 +790,10 @@ declare type TPktAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue';
 
 declare type TPktAccordionSkin_2 = 'borderless' | 'outlined' | 'beige' | 'blue';
 
-declare type TPropObject = {
-    name?: string;
-    description?: string;
-    type?: string | string[] | number | number[];
-    variant?: string;
-    converter?: string;
-    reflect?: boolean;
-    default?: any;
-    previewDefault?: any;
-    items?: TPropObject;
-    displayAsFalse?: boolean;
-    category?: string;
-    showIf?: Record<string, any>;
-};
-
 declare type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light';
 
+declare type TSkin_2 = IPktTag['skin'];
+
 declare type TStepStatus = 'completed' | 'incomplete' | 'current';
 
 declare interface User {