@oslokommune/punkt-react 17.1.3 → 18.0.0

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [18.0.0](https://github.com/oslokommune/punkt/compare/17.1.3...18.0.0) (2026-08-27)
+
+### ⚠ BREAKING CHANGES
+* Ny `shared-strings` og metoder for å overstyre strenger i komponenter (#3610). BREAKING CHANGE: **`strings`-propertyen på Elements** betyr nå "delvis overstyring" i stedet for "hele no.json".
+
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [17.1.3](https://github.com/oslokommune/punkt/compare/17.1.2...17.1.3) (2026-08-25)
 
 ### ⚠ BREAKING CHANGES

package/dist/components/backlink/BackLink.d.ts

@@ -1,5 +1,8 @@
 import { AnchorHTMLAttributes, ReactNode, Ref } from 'react';
+import { TPktStringsOverride } from '../../shared-strings';
 export interface IPktBackLink extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     href?: string;
     text?: string;
     ariaLabel?: string;

package/dist/components/breadcrumbs/Breadcrumbs.d.ts

@@ -1,9 +1,12 @@
 import { AnchorHTMLAttributes, ReactNode } from 'react';
+import { TPktStringsOverride } from '../../shared-strings';
 export interface IBreadcrumbs {
     text: string;
     href: string;
 }
 export interface IPktBreadcrumbs extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     breadcrumbs: IBreadcrumbs[];
     navigationType?: 'router' | 'anchor';
     renderLink?: (args: {

package/dist/components/calendar/types.d.ts

@@ -1,14 +1,15 @@
 import { IDateConstraints, TDateRangeMap } from '../../shared-types/calendar';
-export declare const DEFAULT_STRINGS: Required<IPktCalendarStrings>;
+import { TPktStringsOverride } from '../../shared-strings';
+/** Datonavn og navigasjonstekster slik kalender-underkomponentene forventer dem. */
 export interface IPktCalendarStrings {
-    month?: string;
-    year?: string;
-    days?: string[];
-    daysShort?: string[];
-    months?: string[];
-    week?: string;
-    prevMonth?: string;
-    nextMonth?: string;
+    month: string;
+    year: string;
+    days: string[];
+    daysShort: string[];
+    months: string[];
+    week: string;
+    prevMonth: string;
+    nextMonth: string;
 }
 export interface PktCalendarHandle {
     handleDateSelect: (selectedDate: Date | null) => void;
@@ -31,7 +32,8 @@ export interface IPktCalendar {
     withcontrols?: boolean;
     currentmonth?: Date | string | null;
     today?: string;
-    strings?: IPktCalendarStrings;
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     onDateSelected?: (selected: string[]) => void;
     onClose?: () => void;
     id?: string;
@@ -48,7 +50,7 @@ export type TDayViewData = {
 };
 export interface ICalendarState {
     componentId: string;
-    strings: Required<IPktCalendarStrings>;
+    strings: IPktCalendarStrings;
     year: number;
     month: number;
     activeSelected: string[];
@@ -92,7 +94,7 @@ export interface ICalendarState {
 }
 export interface ICalendarNavProps {
     componentId: string;
-    strings: Required<IPktCalendarStrings>;
+    strings: IPktCalendarStrings;
     year: number;
     month: number;
     earliest: string | null;

package/dist/components/checkbox/Checkbox.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, InputHTMLAttributes, ReactNode } from 'react';
+import { TPktStringsOverride } from '../../shared-strings';
 export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
     id: string;
     hasTile?: boolean;
@@ -14,9 +15,13 @@ export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
     hideLabel?: boolean;
     labelPosition?: 'right' | 'left';
     optionalTag?: boolean;
+    /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
     optionalText?: string;
     requiredTag?: boolean;
+    /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
     requiredText?: string;
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     tagText?: string | null;
     onChange?: ChangeEventHandler<HTMLInputElement>;
 }

package/dist/components/combobox/types.d.ts

@@ -1,3 +1,4 @@
+import { TPktStringsOverride } from '../../shared-strings';
 import { ChangeEvent, ChangeEventHandler, FocusEvent, KeyboardEvent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from 'react';
 import { IPktComboboxOption, TPktComboboxDisplayValue, TPktComboboxTagPlacement } from '../../shared-types/combobox';
 export interface IPktCombobox {
@@ -33,6 +34,8 @@ export interface IPktCombobox {
     useWrapper?: boolean;
     inline?: boolean;
     counter?: boolean;
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     hasFieldset?: boolean;
     inputSize?: 'small' | 'medium' | 'xsmall';
     onChange?: ChangeEventHandler<HTMLInputElement>;
@@ -41,6 +44,8 @@ export interface IPktCombobox {
     children?: ReactNode;
 }
 export interface IComboboxState {
+    /** Tekstoverstyring sendt inn på komponenten. */
+    strings?: TPktStringsOverride;
     id: string;
     inputId: string;
     listboxId: string;

package/dist/components/consent/strings.d.ts

@@ -1,85 +1 @@
-export declare const consentStrings: {
-    i18n: {
-        nb: {
-            contentPresentation: {
-                title: string;
-                description: string[];
-                buttons: {
-                    accept: string;
-                    reject: string;
-                    settings: string;
-                };
-            };
-            contentSettings: {
-                title: string;
-                description: string[];
-                buttons: {
-                    back: string;
-                    save: string;
-                };
-            };
-        };
-        en: {
-            contentPresentation: {
-                title: string;
-                description: string[];
-                buttons: {
-                    accept: string;
-                    reject: string;
-                    settings: string;
-                };
-            };
-            contentSettings: {
-                title: string;
-                description: string[];
-                buttons: {
-                    back: string;
-                    save: string;
-                };
-            };
-        };
-    };
-    cookies: ({
-        name: string;
-        defaultValue: null;
-        i18n: {
-            nb: {
-                title: string;
-                description: string;
-                buttons: {
-                    yes: string;
-                    no: string;
-                };
-            };
-            en: {
-                title: string;
-                description: string;
-                buttons: {
-                    yes: string;
-                    no: string;
-                };
-            };
-        };
-    } | {
-        name: string;
-        defaultValue: boolean;
-        i18n: {
-            nb: {
-                title: string;
-                description: string;
-                buttons: {
-                    yes: string;
-                    no: string;
-                };
-            };
-            en: {
-                title: string;
-                description: string;
-                buttons: {
-                    yes: string;
-                    no: string;
-                };
-            };
-        };
-    })[];
-};
+export { consentStrings } from '../../shared-strings/consent';

package/dist/components/datepicker/DateTags.d.ts

@@ -1,9 +1,9 @@
-import { IDatepickerStrings } from '../../shared-types/datepicker';
+import { TPktStringsOverride } from '../../shared-strings';
 interface DateTagsProps {
     dates: string[];
     dateformat: string;
     idBase: string;
-    strings?: IDatepickerStrings;
+    strings?: TPktStringsOverride;
     onDateRemoved: (date: string) => void;
 }
 export declare const DateTags: ({ dates, dateformat, idBase, strings, onDateRemoved, }: DateTagsProps) => import("react").JSX.Element;

package/dist/components/datepicker/types.d.ts

@@ -1,5 +1,5 @@
+import { TPktStrings, TPktStringsOverride } from '../../shared-strings';
 import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
-import { IDatepickerStrings } from '../../shared-types/datepicker';
 import { TPktInputSize } from '../../shared-types/size';
 export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
     id: string;
@@ -35,7 +35,8 @@ export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElemen
     requiredText?: string;
     tagText?: string;
     useWrapper?: boolean;
-    strings?: IDatepickerStrings;
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     onValueChange?: (values: string[]) => void;
     className?: string;
@@ -82,7 +83,9 @@ export interface IDatepickerState {
     today?: string;
     inputType: string;
     isIOSDevice: boolean;
-    strings: IDatepickerStrings;
+    strings: Pick<TPktStrings, 'generic' | 'datepicker' | 'validation'>;
+    /** Rå tekstoverstyring, til videresending til underkomponenter. */
+    stringsOverride?: TPktStringsOverride;
     inputClasses: string;
     buttonClasses: string;
     rangeLabelClasses: string;

package/dist/components/fileupload/DropZone.d.ts

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { TFileItemList, TUploadStrategy } from './types';
+import { TPktStringsOverride } from '../../shared-strings';
 /**
  * Props for the internal `DropZone` building block.
  *
@@ -9,6 +10,8 @@ import { TFileItemList, TUploadStrategy } from './types';
  * - optionally rendering hidden inputs with file IDs when `uploadStrategy="custom"`
  */
 interface IDropZoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width'> {
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     /** Called with `FileItem`s created from dropped/selected files. */
     onFilesAdded?: (files: TFileItemList) => void;
     /** Used for the native input `id` and related label/ARIA wiring. */

package/dist/components/fileupload/FileUpload.d.ts

@@ -1,6 +1,7 @@
 import { FC, HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
 import { ItemRenderers } from './QueueDisplay';
 import { FileItem, TFileItemList, TFileTransfer, TFileValidateDetail, TItemRenderer, TQueueItemOperation, TUploadStrategy } from './types';
+import { TPktStringsOverride } from '../../shared-strings';
 export { formatFileSize, parseFileSize } from '../../shared-utils/fileupload';
 /**
  * Shared props for `PktFileUpload` (both `form` and `custom` strategies).
@@ -76,6 +77,8 @@ interface IBaseFileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement
     tagText?: string | null;
     /** Marks the upload as required. Native validation is used in `form`; submit validation in `custom`. */
     required?: boolean;
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     /** Enable image preview modal (only applies to thumbnail renderer). */
     enableImagePreview?: boolean;
 }

package/dist/components/header/types.d.ts

@@ -1,5 +1,6 @@
 import { MouseEvent, ReactNode } from 'react';
 import { THeaderMenu, THeaderPosition, THeaderScrollBehavior, TLogOutButtonPlacement, TSlotMenuVariant, THeaderFooterApi, THeaderMenuLocale, IPktHeaderGlobal as ISharedPktHeaderGlobal } from '../../shared-types';
+import { TPktStringsOverride } from '../../shared-strings';
 export type { THeaderMenu, THeaderPosition, THeaderScrollBehavior, TLogOutButtonPlacement, TSlotMenuVariant, THeaderFooterApi, THeaderMenuLocale, };
 /** Which header variant `<PktHeader>` renders. */
 export type THeaderType = 'service' | 'global';
@@ -29,6 +30,8 @@ export interface UserMenuFooterItem {
     target: string | (() => void);
 }
 export interface IPktHeader {
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     children?: ReactNode;
     /** Additional CSS class name(s) to apply to the header */
     className?: string;
@@ -102,6 +105,8 @@ export interface IPktHeader {
  * (in shared-types) with React-specific callbacks and DOM props.
  */
 export interface IPktHeaderGlobal extends ISharedPktHeaderGlobal {
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     /** Additional CSS class name(s) to apply to the header */
     className?: string;
     /** Set dark mode on the header */

package/dist/components/index.d.ts

@@ -52,3 +52,7 @@ export { PktTextinput } from './textinput/Textinput';
 export { PktTimepicker } from './timepicker/Timepicker';
 export * from './interfaces';
 export * from './types';
+export { PktStringsProvider } from './strings/PktStringsProvider';
+export type { IPktStringsProvider } from './strings/PktStringsProvider';
+export { getPktStrings, nb as pktStringsNb, resetPktStrings, setPktStrings, subscribePktStrings, } from '../shared-strings';
+export type { TPktStrings, TPktStringsNamespace, TPktStringsOverride } from '../shared-strings';

package/dist/components/inputwrapper/InputWrapper.d.ts

@@ -1,16 +1,20 @@
 import { ReactNode, RefAttributes } from 'react';
+import { TPktStringsOverride } from '../../shared-strings';
 export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
     forId: string;
     label: string;
     helptext?: string | ReactNode;
     helptextDropdown?: string | ReactNode;
+    /** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
     helptextDropdownButton?: string;
     counter?: boolean;
     counterCurrent?: number;
     counterMaxLength?: number;
     optionalTag?: boolean;
+    /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
     optionalText?: string;
     requiredTag?: boolean;
+    /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
     requiredText?: string;
     tagText?: string | null;
     hasError?: boolean;
@@ -25,5 +29,7 @@ export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
     role?: string;
     counterPosition?: 'top' | 'bottom';
     size?: 'small' | 'medium' | 'xsmall';
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
 }
 export declare const PktInputWrapper: import('react').ForwardRefExoticComponent<Omit<IPktInputWrapper, "ref"> & RefAttributes<HTMLDivElement>>;

package/dist/components/radio/RadioButton.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, InputHTMLAttributes, ReactNode } from 'react';
+import { TPktStringsOverride } from '../../shared-strings';
 export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
     id: string;
     name: string;
@@ -11,9 +12,13 @@ export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
     hasError?: boolean;
     value?: string;
     optionalTag?: boolean;
+    /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
     optionalText?: string;
     requiredTag?: boolean;
+    /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
     requiredText?: string;
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     tagText?: string | null;
     onChange?: ChangeEventHandler<HTMLInputElement>;
 }

package/dist/components/searchinput/SearchInput.d.ts

@@ -1,5 +1,6 @@
 import { ChangeEvent, HTMLProps, ReactNode } from 'react';
 import { IPktSearchInputSuggestion } from '../../shared-types/searchinput';
+import { TPktStringsOverride } from '../../shared-strings';
 /**
  * React suggestion item: portable fields from {@link IPktSearchInputSuggestion}
  * plus optional rich content and per-row handler.
@@ -10,6 +11,8 @@ export type PktSearchInputSuggestion = Omit<IPktSearchInputSuggestion, 'title' |
     onClick?: () => void;
 };
 interface ISearch extends HTMLProps<HTMLInputElement> {
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     appearance?: 'local' | 'local-with-button' | 'global';
     inputSize?: 'small' | 'medium' | 'xsmall';
     disabled?: boolean;
@@ -17,6 +20,7 @@ interface ISearch extends HTMLProps<HTMLInputElement> {
     id: string;
     label?: string;
     name?: string;
+    /** @deprecated Bruk `strings={{ searchinput: { placeholder: '…' } }}` eller `setPktStrings()`. */
     placeholder?: string;
     suggestions?: PktSearchInputSuggestion[];
     value?: string | undefined;

package/dist/components/select/Select.d.ts

@@ -1,6 +1,9 @@
 import { ReactNode, SelectHTMLAttributes } from 'react';
+import { TPktStringsOverride } from '../../shared-strings';
 export type { IPktSelectOption, TSelectOption } from '../../shared-types/select';
 export interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     ariaDescribedby?: string;
     ariaLabelledby?: string;
     children?: ReactNode | ReactNode[];

package/dist/components/strings/PktStringsProvider.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { TPktStringsOverride } from '../../shared-strings';
+export declare const PktStringsContext: import('react').Context<TPktStringsOverride | undefined>;
+export interface IPktStringsProvider {
+    /** Tekstene som skal gjelde for dette undertreet. */
+    strings: TPktStringsOverride;
+    children?: ReactNode;
+}
+/**
+ * Overstyrer Punkt-tekster for et undertre.
+ *
+ * Providere kan nestes — en indre provider merges oppå den ytre, og en `strings`-prop
+ * på en enkelt komponent vinner uansett over begge.
+ *
+ * ```tsx
+ * <PktStringsProvider strings={{ forms: { optional: 'Kan stå tomt' } }}>
+ *   <PktTextinput id="navn" name="navn" label="Navn" />
+ * </PktStringsProvider>
+ * ```
+ */
+export declare const PktStringsProvider: ({ strings, children }: IPktStringsProvider) => import("react").JSX.Element;

package/dist/components/strings/strings-override.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/tag/Tag.d.ts

@@ -1,6 +1,9 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { TTagSkin } from '../../shared-types';
+import { TPktStringsOverride } from '../../shared-strings';
 interface BasePktTagProps {
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     skin?: TTagSkin;
     textStyle?: 'normal-text' | 'thin-text';
     size?: 'small' | 'medium' | 'large';

package/dist/components/textarea/Textarea.d.ts

@@ -1,6 +1,9 @@
 import { ChangeEventHandler, ReactNode, TextareaHTMLAttributes } from 'react';
 import { TPktInputSize } from '../../shared-types/size';
+import { TPktStringsOverride } from '../../shared-strings';
 export interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     id: string;
     ariaDescribedby?: string;
     ariaLabelledby?: string;

package/dist/components/textinput/Textinput.d.ts

@@ -1,5 +1,8 @@
 import { ChangeEventHandler, InputHTMLAttributes, ReactNode } from 'react';
+import { TPktStringsOverride } from '../../shared-strings';
 export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     id: string;
     ariaDescribedby?: string;
     ariaLabelledby?: string;

package/dist/components/timepicker/types.d.ts

@@ -1,6 +1,6 @@
+import { TPktStringsOverride } from '../../shared-strings';
 import { ChangeEvent, FocusEvent, InputHTMLAttributes, ReactNode } from 'react';
 import { TPktInputSize } from '../../shared-types/size';
-import { ITimepickerStrings } from '../../shared-types/timepicker';
 /**
  * Props for {@link PktTimepicker}: a React time picker with `HH:MM`, aligned with Elements `pkt-timepicker`.
  *
@@ -67,7 +67,8 @@ export interface IPktTimepicker extends Omit<InputHTMLAttributes<HTMLInputElemen
     /** Passed through to InputWrapper as `aria-describedby`. */
     ariaDescribedby?: string;
     /** Copy for hours, minutes, buttons, and popup. */
-    strings?: ITimepickerStrings;
+    /** Overstyrer tekster for denne komponenten. */
+    strings?: TPktStringsOverride;
     /** Change event from the hidden input (`e.target.value` is `HH:MM`). In React, `onChange` already fires on input. */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     /** Callback with the committed `HH:MM` string. */

package/dist/components/timepicker/useTimepickerState.d.ts

@@ -6,7 +6,15 @@ export declare function useTimepickerState(props: IPktTimepicker, ref: React.For
     containerRef: import('react').RefObject<HTMLDivElement | null>;
     outerClasses: string;
     inputSize: TPktInputSize;
-    strings: import('../../shared-types').ITimepickerStrings;
+    strings: {
+        hours: string;
+        minutes: string;
+        openPicker: string;
+        prevTime: string;
+        nextTime: string;
+        selectTime: string;
+    };
+    stringsOverride: import('../../shared-strings').TPktStringsOverride | undefined;
     label: string;
     disabled: boolean;
     required: boolean;