@oslokommune/punkt-react 12.33.1 → 12.34.0

package/CHANGELOG.md

@@ -5,6 +5,32 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.34.0](https://github.com/oslokommune/punkt/compare/12.33.1...12.34.0) (2025-04-16)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Accordion i Punkt Elements (#2327) (#2379). - AccordionItem can now be used standalone 💄📝
+  - Use <slot/> in pkt-accordion instead of SlotController
+  - Add `aria-labelledBy` to provide opportunity to connect a heading to the accordion. 
+  - We no longer need to send in `toggleProps: { isOpen, onToggleClick }` as a object. We pull it out into the interface together with other props. 
+  - Docs and code examples are updated. 
+  
+  ---------
+  
+  Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.33.1](https://github.com/oslokommune/punkt/compare/12.33.0...12.33.1) (2025-04-14)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -7,7 +7,6 @@ import { default as default_2 } from 'react';
 import { FC } from 'react';
 import { FocusEventHandler } from 'react';
 import { ForwardedRef } from 'react';
-import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { HTMLProps } from 'react';
 import { InputHTMLAttributes } from 'react';
@@ -24,9 +23,9 @@ import { PktInputWrapper as PktInputWrapper_2 } from '@oslokommune/punkt-element
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
-import { RefAttributes } from 'react';
 import { SelectHTMLAttributes } from 'react';
 import { TextareaHTMLAttributes } from 'react';
+import { TPktAccordionSkin } from '@oslokommune/punkt-elements';
 import { TSelectOption } from '@oslokommune/punkt-elements';
 
 declare type Booleanish = boolean | 'true' | 'false';
@@ -59,37 +58,31 @@ declare interface InputProps extends default_2.InputHTMLAttributes<HTMLInputElem
     id: string;
 }
 
-export declare interface IPktAccordion {
-    className?: string;
-    children: ReactNode | ReactNode[];
-    /**
-     * @default compact: "false"
-     */
+export declare interface IPktAccordion extends PktElType {
     compact?: boolean;
     /**
      * @default skin: "borderless"
      */
-    skin?: 'borderless' | 'outlined' | 'beige' | 'blue';
+    skin?: TPktAccordionSkin;
+    /**
+     * @description A unique identifier to connect the accordion with a heading
+     */
+    ariaLabelledBy?: string;
+    /**
+     * @description A unique identifier to connect the accordion with a heading
+     */
+    ref?: LegacyRef<HTMLElement>;
 }
 
-export declare interface IPktAccordionItem {
-    children?: default_2.ReactNode | default_2.ReactNode[];
-    className?: string;
+export declare interface IPktAccordionItem extends Omit<PktElType, 'onClick'> {
+    compact?: boolean;
+    skin?: TPktAccordionSkin;
+    title?: string;
     defaultOpen?: boolean;
-    id: string;
-    title: string | default_2.ReactNode;
-    toggleProps?: IPktAccordionToggleProps;
-}
-
-/**
- * @param toggleProps
- *
- * @description Send in an "isOpen" boolean and "onToggleClick" function
- * to override the automatic toggling
- */
-declare interface IPktAccordionToggleProps {
-    isOpen: boolean;
-    onToggleClick: (e: default_2.MouseEvent, id: string) => void;
+    isOpen?: boolean;
+    id?: string;
+    onClick?: (e: PktEventWithTarget) => void;
+    ref?: LegacyRef<HTMLElement>;
 }
 
 export declare interface IPktAlert extends PktElType {
@@ -147,7 +140,7 @@ export declare interface IPktCheckbox extends InputHTMLAttributes<HTMLInputEleme
     defaultChecked?: boolean;
     disabled?: boolean;
     value?: string;
-    checkHelptext?: string | default_2.ReactNode | default_2.ReactNode[];
+    checkHelptext?: string | ReactNode | ReactNode[];
     isSwitch?: boolean;
     hideLabel?: boolean;
     labelPosition?: 'right' | 'left';
@@ -593,9 +586,9 @@ declare interface Link {
     openInNewTab?: boolean;
 }
 
-export declare const PktAccordion: ForwardRefExoticComponent<IPktAccordion & RefAttributes<HTMLDivElement>>;
+export declare const PktAccordion: FC<IPktAccordion>;
 
-export declare const PktAccordionItem: default_2.ForwardRefExoticComponent<IPktAccordionItem & default_2.RefAttributes<HTMLDetailsElement>>;
+export declare const PktAccordionItem: FC<IPktAccordionItem>;
 
 export declare const PktAlert: FC<IPktAlert>;
 
@@ -621,6 +614,10 @@ declare interface PktElType extends default_2.HTMLAttributes<HTMLElement> {
     id?: string;
 }
 
+declare interface PktEventWithTarget extends Event {
+    target: EventTarget & HTMLInputElement;
+}
+
 export declare const PktFooter: default_2.FC<IPktFooter>;
 
 export declare const PktFooterSimple: default_2.FC<IPktFooterSimple>;