@oslokommune/punkt-react 13.21.0 → 14.0.0

package/CHANGELOG.md

@@ -5,6 +5,50 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [14.0.0](https://github.com/oslokommune/punkt/compare/13.22.0...14.0.0) (2026-02-02)
+
+### ⚠ BREAKING CHANGES
+* Header (Service) (#3192) Nå også som custom element!. BREAKING CHANGE: Fjernet 'logIn' event (kun 'logOut' støttes nå)
+  BREAKING CHANGE: Erstattet 'fixed' prop med 'position' (verdier: 'fixed' | 'relative', default: 'fixed')
+  BREAKING CHANGE: Erstattet 'scrollToHide' prop med 'scrollBehavior' (verdier: 'hide' | 'none', default: 'hide')
+  BREAKING CHANGE: Erstattet 'showLogOutButton' med 'logOutButtonPlacement' (verdier: 'userMenu' | 'header' | 'both' | 'none', default: 'none')
+  BREAKING CHANGE: Fjernet 'showMenuButton' prop
+  BREAKING CHANGE: Fjernet 'user.shortname' fra user-objektet
+  BREAKING CHANGE: Fjernet 'representing.shortname' fra representing-objektet
+  BREAKING CHANGE: Endret 'userMenu.items.target' type fra 'string' til 'string | function'
+  BREAKING CHANGE: Utdatert 'userMenuFooter' og 'userOptions' props (bruk 'userMenu' i stedet)
+  BREAKING CHANGE: Fjernet default verdi for 'logoLink' (var `https://www.oslo.kommune.no/`)
+  
+  NYE FEATURES:
+  - Lagt til søkefunksjonalitet med props: 'showSearch', 'searchPlaceholder', 'searchValue'
+  - Nye events: 'onSearch' og 'onSearchChange' for søkeinteraksjon
+  - Nye events: 'logoClick' og 'serviceClick' for klikkhåndtering
+  - Nye React-props: 'logoClick' og 'serviceClick' callbacks
+  - Lagt til 'serviceLink' prop for tjenestenavnlenke
+  - Lagt til 'hideLogo' prop for å skjule Oslo-logoen
+  - Lagt til 'compact' prop for kompakt header-høyde
+  - Lagt til 'mobileBreakpoint' prop (default: 768px) for mobil-layout
+  - Lagt til 'tabletBreakpoint' prop (default: 1280px) for tablet-layout
+  - Lagt til 'openedMenu' prop for å kontrollere hvilken meny som er åpen ved oppstart
+  
+  FUNKSJONELLE ENDRINGER:
+  - Alle events har nå 'attribute' felt for custom element-støtte
+  - Forbedret type-dokumentasjon for 'user.lastLoggedIn' (string | Date)
+  - Forbedret type-dokumentasjon for 'representing.orgNumber' (string | number)
+
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.21.0](https://github.com/oslokommune/punkt/compare/13.20.0...13.21.0) (2026-01-30)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -286,24 +286,65 @@ export declare interface IPktFooterSimple extends HTMLAttributes<HTMLDivElement>
     onToggleConsent?: (e: CustomEvent) => void;
 }
 
-export declare interface IPktHeader extends HTMLAttributes<HTMLDivElement> {
-    logoLink?: string | (() => void);
+export declare interface IPktHeader {
+    children?: React.ReactNode;
+    /** Set dark mode on the header */
+    'data-mode'?: 'dark';
+    /** Hide the Oslo logo. Default: false (logo is shown) */
+    hideLogo?: boolean;
+    /** Link URL for the logo */
+    logoLink?: string;
+    /** Callback when logo is clicked */
+    logoClick?: (event: React.MouseEvent) => void;
+    /** Name of the service displayed in the header */
     serviceName?: string;
-    fixed?: boolean;
-    scrollToHide?: boolean;
+    /** Link URL for the service name */
+    serviceLink?: string;
+    /** Callback when service name is clicked */
+    serviceClick?: (event: React.MouseEvent) => void;
+    /** Use compact header height */
+    compact?: boolean;
+    /** User object with name, shortname, and lastLoggedIn */
     user?: User;
+    /** User menu items displayed in the dropdown */
     userMenu?: UserMenuItem[];
+    /** Representing object with name, shortname, and orgNumber */
     representing?: Representing;
-    userOptions?: UserMenuItem[];
-    userMenuFooter?: UserMenuFooterItem[];
+    /** Whether the user can change representation. Shows "Endre organisasjon" button */
     canChangeRepresentation?: boolean;
-    showMenuButton?: boolean;
-    showLogOutButton?: boolean;
-    openMenu?: () => void;
-    logOut?: () => void;
+    /** Callback when user clicks "Endre organisasjon" */
     changeRepresentation?: () => void;
-    children?: default_2.ReactNode | default_2.ReactNode[];
-}
+    /** @deprecated Use userMenu instead. Will show console.warn if used. */
+    userMenuFooter?: UserMenuFooterItem[];
+    /** @deprecated userOptions is no longer available. Use userMenu instead. */
+    userOptions?: UserMenuItem[];
+    /** Where to show the logout button: 'userMenu', 'header', 'both', or 'none' */
+    logOutButtonPlacement?: 'userMenu' | 'header' | 'both' | 'none';
+    /** Callback when user clicks logout */
+    logOut?: () => void;
+    /** Show search input in the header */
+    showSearch?: boolean;
+    /** Callback when user submits search (presses Enter) */
+    onSearch?: (query: string) => void;
+    /** Callback when search input value changes */
+    onSearchChange?: (query: string) => void;
+    /** Controlled value for the search input */
+    searchValue?: string;
+    /** Placeholder text for the search input. Default: "Søk" */
+    searchPlaceholder?: string;
+    /** Custom breakpoint for responsive behavior (grid layout) in pixels. Default: 1024 */
+    mobileBreakpoint?: number;
+    /** Custom breakpoint for tablet responsive behavior (interaction pattern) in pixels. Default: 1280 */
+    tabletBreakpoint?: number;
+    /** Which menu is initially open */
+    openedMenu?: TPktHeaderServiceMenu;
+    /** Header position. 'fixed' fixes to top of viewport, 'relative' follows document flow. Default: 'fixed' */
+    position?: 'fixed' | 'relative';
+    /** Scroll behavior. 'hide' hides header on scroll down, 'none' keeps it visible. Default: 'hide' */
+    scrollBehavior?: 'hide' | 'none';
+}
+
+export declare type IPktHeaderService = IPktHeader;
 
 declare interface IPktHeading_2 extends IPktHeading {
     children?: default_2.ReactNode | default_2.ReactNode[];
@@ -705,7 +746,21 @@ export declare const PktFooter: FC<IPktFooter>;
 
 export declare const PktFooterSimple: FC<IPktFooterSimple>;
 
-export declare const PktHeader: default_2.ForwardRefExoticComponent<IPktHeader & default_2.RefAttributes<HTMLDivElement>>;
+/**
+ * PktHeader - Main header component for Oslo kommune services
+ *
+ * This component provides a complete header solution with:
+ * - Logo and service name
+ * - User menu with login/logout functionality
+ * - Search functionality
+ * - Responsive mobile menu
+ * - Fixed positioning with scroll-to-hide
+ *
+ * TODO: Add `type` prop to switch between `service` and `global` header types
+ */
+export declare const PktHeader: ForwardRefExoticComponent<IPktHeader & RefAttributes<HTMLDivElement>>;
+
+export declare const PktHeaderService: ForwardRefExoticComponent<IPktHeader & RefAttributes<HTMLDivElement>>;
 
 export declare const PktHeading: FC<IPktHeading_2>;
 
@@ -776,8 +831,10 @@ export declare const PktTextarea: default_2.ForwardRefExoticComponent<IPktTextar
 
 export declare const PktTextinput: default_2.ForwardRefExoticComponent<IPktTextinput & default_2.RefAttributes<HTMLInputElement>>;
 
+/** Representing object for header components */
 declare interface Representing {
-    name?: string;
+    name: string;
+    /** @deprecated shortname is deprecated and will be removed in a future version */
     shortname?: string;
     orgNumber?: string | number;
 }
@@ -818,23 +875,29 @@ declare type TPktAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue';
 
 declare type TPktAccordionSkin_2 = 'borderless' | 'outlined' | 'beige' | 'blue';
 
+declare type TPktHeaderServiceMenu = 'none' | 'slot' | 'search' | 'user';
+
 declare type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light';
 
 declare type TSkin_2 = IPktTag['skin'];
 
 declare type TStepStatus = 'completed' | 'incomplete' | 'current';
 
+/** User object for header components */
 declare interface User {
-    name?: string;
+    name: string;
+    /** @deprecated shortname is deprecated and will be removed in a future version */
     shortname?: string;
     lastLoggedIn?: string | Date;
 }
 
+/** @deprecated Use UserMenuItem instead */
 declare interface UserMenuFooterItem {
     title: string;
     target: string | (() => void);
 }
 
+/** User menu item for header components */
 declare interface UserMenuItem {
     iconName?: string;
     title: string;