@oslokommune/punkt-react 15.4.7 → 16.0.1

package/CHANGELOG.md

@@ -5,6 +5,79 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.1.0](https://github.com/oslokommune/punkt/compare/16.0.0...16.1.0) (2026-03-09)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* Datepicker trenger preventDefault på klikk for å overstyre native kalender (#3363). 
+
+
+### Chores
+Ingen
+
+---
+
+
+## [16.0.0](https://github.com/oslokommune/punkt/compare/15.4.7...16.0.0) (2026-03-06)
+
+### ⚠ BREAKING CHANGES
+* Massiv opprydding i PktCombobox (#3327). BREAKING CHANGE: **HTML-attributter har fått kebab-case-navn.** Påvirker kun de som setter disse via HTML-attributter. Property-bruk og React-props er uendret.
+  
+  BREAKING CHANGE:  **onValueChange i React** er nå en direkte callback (values: string[]) => void i stedet for CustomEvent
+  
+  **Refaktorering**
+  
+  - Delte typer flyttet til `shared-types/combobox.ts` (IPktComboboxOption, TPktComboboxTagPlacement osv.)
+  - Delte utils flyttet til `shared-utils/combobox/` (option-søk, logikk, typeahead, tastaturnavigasjon)
+  - `combobox-utils.ts` med Lit-spesifikke hjelpere (keyboard, focus-out, selection, input-state)
+  - `combobox-types.ts` som re-eksporterer fra shared-types for bakoverkompatibilitet
+  - Listbox refaktorert til å bruke shared-utils i stedet for inline-logikk
+  
+  **Spec-korreksjoner i combobox.json**
+  
+  - `multiple` default rettet fra `true` til `false`
+  - `typeahead` default rettet fra `true` til `false`
+  - `tagPlacement` default fjernet (var ugyldig `"top"`)
+  - `searchPlaceholder` lagt til (manglet)
+  
+  **Kebab-case i Elements-attributter**
+  
+  | Gammel | Ny |
+  |---|---|
+  | `defaultoptions` | `default-options` |
+  | `allowuserinput` | `allow-user-input` |
+  | `includesearch` | `include-search` |
+  | `searchplaceholder` | `search-placeholder` |
+  | `displayvalueas` | `display-value-as` |
+  | `tagplacement` | `tag-placement` |
+  
+  **fra feat(css,elements,react): Combobox – fjernet knapp, fikset ARIA (https://github.com/oslokommune/punkt/pull/3348)**
+  - Fjernet pilknappen. Dette viste seg å være _betraktelig_ mer komplisert enn jeg skulle ønske, men det ble også en betydelig forbedret brukeropplevelse og en bedre løsning for skjermlesere.
+  - Gjort sånn at placeholder på felter med input _faktisk_ er en placeholder og ikke bare en span som later som den er en placeholder.
+  - Fiksa så ARIA henger mye mer på greip.
+  - Fiksa https://github.com/oslokommune/punkt/issues/3345, problem med foreldreløs "for"
+  - Fiksa https://github.com/oslokommune/punkt/issues/3335, problem med å legge til samme verdi flere ganger i multiple med allowUserInput
+  - For tags som er _inni_ combobox har jeg nå lagt til navigasjon med piltaster. ARIA Authoring Practices Guide har per nå ingen etablerte mønstre for tags _inni_ en combobox, så jeg har sett på Material UI for å se hvilket mønster de har gått for. Der har de et mønster hvor piltaster setter fokus på tags inni, og man kan bruke backspace for å fjerne et aktivt valg (eller det siste valget dersom ingen er valgt).
+  - Splitta opp combobox i Elements i fire filer og organisert dem i klasser som utvides i en kjede. Den beste løsningen jeg klarte å finne for å dele opp koden i mindre bolker. Elements er ikke helt som React, og mange fler ting var avhengig av hverandre.
+
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [15.4.7](https://github.com/oslokommune/punkt/compare/15.4.6...15.4.7) (2026-03-05)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -6,14 +6,13 @@ import { ChangeEventHandler } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { FC } from 'react';
-import { FocusEventHandler } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { HTMLProps } from 'react';
 import { IDatepickerStrings } from '../../../../../shared-types/datepicker';
 import { InputHTMLAttributes } from 'react';
 import { IPktBackLink as IPktBackLink_2 } from '@oslokommune/punkt-elements';
-import { IPktCombobox as IPktCombobox_2 } from '@oslokommune/punkt-elements';
+import { IPktComboboxOption } from '../../../../../shared-types/combobox';
 import { IPktConsent as IPktConsent_2 } from '@oslokommune/punkt-elements';
 import { IPktHeading } from '@oslokommune/punkt-elements';
 import { IPktLoader as IPktLoader_2 } from '@oslokommune/punkt-elements';
@@ -41,6 +40,8 @@ import { THeaderScrollBehavior } from '../../../../../shared-types';
 import { TLayout } from '../../../../../shared-types';
 import { TLogOutButtonPlacement } from '../../../../../shared-types';
 import { TMessageboxSkin } from '../../../../../shared-types';
+import { TPktComboboxDisplayValue } from '../../../../../shared-types/combobox';
+import { TPktComboboxTagPlacement } from '../../../../../shared-types/combobox';
 import { TSlotMenuVariant } from '../../../../../shared-types';
 
 declare interface BasePktTagProps {
@@ -67,8 +68,6 @@ declare interface Column {
 
 declare type ExtendedBackLink = Omit<IPktBackLink_2, 'text'> & AnchorHTMLAttributes<HTMLAnchorElement>;
 
-declare type ExtendedCombobox = Omit<IPktCombobox_2, 'helptext'> & SelectHTMLAttributes<HTMLSelectElement>;
-
 declare type ExtendedLoader = IPktLoader_2 & PktElType;
 
 declare type ExtendedProgressbar = IPktProgressbar_2 & PktElType;
@@ -338,17 +337,41 @@ export declare interface IPktCheckbox extends InputHTMLAttributes<HTMLInputEleme
     onChange?: ChangeEventHandler<HTMLInputElement>;
 }
 
-export declare interface IPktCombobox extends ExtendedCombobox {
-    helptext?: string | ReactNode | ReactNode[];
-    ref?: LegacyRef<HTMLSelectElement>;
-    onClick?: MouseEventHandler<HTMLSelectElement>;
-    onChange?: ChangeEventHandler<HTMLSelectElement>;
-    onInput?: ChangeEventHandler<HTMLSelectElement>;
-    onBlur?: FocusEventHandler<HTMLSelectElement>;
-    onFocus?: FocusEventHandler<HTMLSelectElement>;
-    onValueChange?: (e: CustomEvent) => void;
-    onToggleHelpText?: (e: CustomEvent) => void;
+export declare interface IPktCombobox {
+    value?: string | string[];
+    defaultValue?: string | string[];
+    options?: IPktComboboxOption[];
+    defaultOptions?: IPktComboboxOption[];
+    multiple?: boolean;
+    maxlength?: number;
+    typeahead?: boolean;
+    includeSearch?: boolean;
+    allowUserInput?: boolean;
+    displayValueAs?: TPktComboboxDisplayValue;
+    tagPlacement?: TPktComboboxTagPlacement;
+    searchPlaceholder?: string;
+    name?: string;
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    label?: string;
+    helptext?: string | ReactNode;
+    helptextDropdown?: string | ReactNode;
+    helptextDropdownButton?: string;
+    hasError?: boolean;
+    errorMessage?: string | ReactNode;
+    fullwidth?: boolean;
+    requiredTag?: boolean;
+    requiredText?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    tagText?: string;
     useWrapper?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onValueChange?: (values: string[]) => void;
+    className?: string;
+    children?: ReactNode;
 }
 
 declare interface IPktConsent extends IPktConsent_2 {
@@ -893,7 +916,7 @@ export declare const PktCard: FC<IPktCard>;
 
 export declare const PktCheckbox: ForwardRefExoticComponent<IPktCheckbox & RefAttributes<HTMLInputElement>>;
 
-export declare const PktCombobox: FC<IPktCombobox>;
+export declare const PktCombobox: ForwardRefExoticComponent<IPktCombobox & RefAttributes<HTMLDivElement>>;
 
 export declare const PktConsent: ForwardRefExoticComponent<IPktConsent>;