@oslokommune/punkt-react 17.1.2 → 18.0.0

package/dist/shared-strings/consent.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Tekster og informasjonskapsel-oppsett for samtykkedialogen.
+ *
+ * Denne ligger utenfor `nb.ts` fordi formen er en annen: en liste med
+ * informasjonskapsler som hver har egne tekster per språk, ikke et flatt
+ * namespace. Den deles av Elements og React slik at de to ikke kommer i utakt.
+ */
+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: boolean;
+        i18n: {
+            nb: {
+                title: string;
+                description: string;
+                buttons: {
+                    yes: string;
+                    no: string;
+                };
+            };
+            en: {
+                title: string;
+                description: string;
+                buttons: {
+                    yes: string;
+                    no: string;
+                };
+            };
+        };
+    }[];
+};

package/dist/shared-strings/format.d.ts

@@ -0,0 +1,21 @@
+import type { TPktStringParams } from './types';
+/**
+ * Setter verdier inn i `{navn}`-plassholdere.
+ *
+ * ```ts
+ * formatString('Verdien må være større enn eller lik {min}.', { min: 5 })
+ * // → 'Verdien må være større enn eller lik 5.'
+ * ```
+ *
+ * En plassholder uten tilsvarende verdi blir stående urørt, slik at en ufullstendig
+ * overstyring gir synlig, feilsøkbar tekst i stedet for et tomt felt.
+ */
+export declare function formatString(template: string, params?: TPktStringParams): string;
+/**
+ * Velger entalls- eller flertallsform.
+ *
+ * ```ts
+ * plural(count, s.fileLabelOne, s.fileLabelOther)
+ * ```
+ */
+export declare function plural(count: number, one: string, other: string): string;

package/dist/shared-strings/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Delt tekstkatalog for Punkt.
+ *
+ * Alle UI-tekster i designsystemet defineres i `nb.ts` og brukes derfra av både
+ * `@oslokommune/punkt-elements` og `@oslokommune/punkt-react`. Konsumenter kan
+ * overstyre tekster globalt med `setPktStrings()` eller per komponentinstans via
+ * `strings`-propen.
+ */
+export { nb } from './nb';
+export { formatString, plural } from './format';
+export { getPktStrings, resetPktStrings, setPktStrings, subscribePktStrings } from './store';
+export { resolveNamespace, resolveStrings } from './resolve';
+export type { TPktStringParams, TPktStrings, TPktStringsNamespace, TPktStringsOverride, TPktStringsShape, TPktStringValue, } from './types';
+export { consentStrings } from './consent';

package/dist/shared-strings/nb.d.ts

@@ -0,0 +1,118 @@
+export declare const nb: {
+    /** Tekster som går igjen på tvers av flere komponenter. */
+    generic: {
+        from: string;
+        to: string;
+        close: string;
+    };
+    /** Etiketter og hjelpetekst rundt skjemafelt. */
+    forms: {
+        optional: string;
+        required: string;
+        readMore: string;
+    };
+    /** Valideringsmeldinger. Nøkkelnavnene følger `ValidityState` der det finnes et tilsvarende flagg. */
+    validation: {
+        valueMissing: string;
+        typeMismatch: string;
+        patternMismatch: string;
+        tooShort: string;
+        tooLong: string;
+        rangeUnderflow: string;
+        rangeOverflow: string;
+        rangeUnderflowMin: string;
+        rangeOverflowMax: string;
+        stepMismatch: string;
+        timeStepMismatch: string;
+        timeStepMismatchHour: string;
+        timeStepMismatchHalfHour: string;
+        dateUnderflow: string;
+        dateOverflow: string;
+        counterExceeded: string;
+    };
+    /** Måneds- og dagsnavn. Listene må ha henholdsvis 12 og 7 elementer. */
+    dates: {
+        month: string;
+        year: string;
+        week: string;
+        days: string[];
+        daysShort: string[];
+        months: string[];
+        monthsShort: string[];
+    };
+    calendar: {
+        prevMonth: string;
+        nextMonth: string;
+    };
+    datepicker: {
+        openPicker: string;
+        deleteDate: string;
+    };
+    timepicker: {
+        hours: string;
+        minutes: string;
+        openPicker: string;
+        prevTime: string;
+        nextTime: string;
+        selectTime: string;
+    };
+    searchinput: {
+        placeholder: string;
+        submit: string;
+    };
+    backlink: {
+        label: string;
+    };
+    breadcrumbs: {
+        ariaLabel: string;
+    };
+    tag: {
+        remove: string;
+    };
+    header: {
+        search: string;
+        menu: string;
+        openMenu: string;
+        openSearch: string;
+    };
+    listbox: {
+        searchLabel: string;
+        searchPlaceholder: string;
+    };
+    combobox: {
+        noResults: string;
+        maxSelected: string;
+        tooManySelected: string;
+        alreadySelected: string;
+        valueAdded: string;
+        noValidValue: string;
+    };
+    fileupload: {
+        dropZoneDragMultiple: string;
+        dropZoneDragSingle: string;
+        dropZoneDragMultipleThumbnail: string;
+        dropZoneDragSingleThumbnail: string;
+        dropZoneDragActiveMultiple: string;
+        dropZoneDragActiveSingle: string;
+        dropZoneDragActiveMultipleThumbnail: string;
+        dropZoneDragActiveSingleThumbnail: string;
+        dropZoneOpenFileDialogMultiple: string;
+        dropZoneOpenFileDialogSingle: string;
+        dropZoneOpenFileDialogMultipleThumbnail: string;
+        dropZoneOpenFileDialogSingleThumbnail: string;
+        supportedFormatsPrefix: string;
+        invalidFormat: string;
+        sizeTooLarge: string;
+        requiredMissing: string;
+        genericValidationRejection: string;
+        unknownFilename: string;
+        previewFallbackName: string;
+        previewImage: string;
+        fileLabelOne: string;
+        fileLabelOther: string;
+        srFileAdded: string;
+        srFilesAdded: string;
+        srFilesUploadedOfTotal: string;
+        srFilesFailedOfTotal: string;
+    };
+};

package/dist/shared-strings/resolve.d.ts

@@ -0,0 +1,12 @@
+import type { TPktStrings, TPktStringsNamespace, TPktStringsOverride } from './types';
+/** Slår opp ett namespace. */
+export declare function resolveNamespace<K extends TPktStringsNamespace>(ns: K, ...layers: Array<TPktStringsOverride | undefined>): TPktStrings[K];
+/**
+ * Slår opp flere namespace på én gang.
+ *
+ * ```ts
+ * const s = resolveStrings(['forms', 'validation'], this.strings)
+ * s.forms.optional
+ * ```
+ */
+export declare function resolveStrings<NS extends TPktStringsNamespace>(namespaces: readonly NS[], ...layers: Array<TPktStringsOverride | undefined>): Pick<TPktStrings, NS>;

package/dist/shared-strings/store.d.ts

@@ -0,0 +1,27 @@
+import type { TPktStringsOverride } from './types';
+/**
+ * Global tekstoverstyring. Tilstanden ligger på `globalThis` bak en
+ * `Symbol.for()`-nøkkel, slik at `punkt-react` og `punkt-elements` deler én og
+ * samme store på tvers av modulgrafer.
+ */
+type TListener = () => void;
+/**
+ * Overstyrer tekster for hele applikasjonen. Kall det én gang ved oppstart.
+ * Flere kall merges sammen, namespace for namespace.
+ *
+ * ```ts
+ * setPktStrings({ forms: { optional: 'Frivillig' } })
+ * ```
+ */
+export declare function setPktStrings(overrides: TPktStringsOverride): void;
+/**
+ * Gjeldende globale overstyringer. Identiteten endrer seg ved hvert
+ * `setPktStrings()`-kall, så den kan brukes direkte som snapshot i
+ * `useSyncExternalStore`.
+ */
+export declare function getPktStrings(): TPktStringsOverride;
+/** Nullstiller til de innebygde tekstene. Ment for tester. */
+export declare function resetPktStrings(): void;
+/** Abonnerer på endringer. Returnerer en funksjon som melder av. */
+export declare function subscribePktStrings(listener: TListener): () => void;
+export {};

package/dist/shared-strings/types.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Typene for tekstkatalogen. Katalogen er nøyaktig to nivåer dyp:
+ * namespace → nøkkel → string | string[].
+ */
+import type { nb } from './nb';
+/** En enkelt tekstverdi. Lister brukes for måneds- og dagsnavn. */
+export type TPktStringValue = string | readonly string[];
+/** Formen alle språkbundler må følge. */
+export type TPktStringsShape = Record<string, Record<string, TPktStringValue>>;
+/**
+ * Hele katalogen, utledet fra bokmålsbundelen slik at `nb.ts` er det eneste
+ * stedet en nøkkel defineres.
+ */
+export type TPktStrings = typeof nb;
+/** Navnet på et namespace i katalogen, f.eks. `'forms'` eller `'searchinput'`. */
+export type TPktStringsNamespace = keyof TPktStrings;
+/**
+ * Delvis overstyring av katalogen. Generisk over namespace slik at en komponent
+ * kan smalne typen til de namespacene den faktisk bruker:
+ *
+ * ```ts
+ * strings?: TPktStringsOverride<'forms' | 'validation' | 'searchinput'>
+ * ```
+ */
+export type TPktStringsOverride<NS extends TPktStringsNamespace = TPktStringsNamespace> = {
+    [K in NS]?: Partial<TPktStrings[K]>;
+};
+/** Verdier som kan settes inn i en `{plassholder}`. */
+export type TPktStringParams = Record<string, string | number>;

package/dist/shared-types/fileupload.d.ts

@@ -44,30 +44,3 @@ export interface IFilesChangedDetail {
     reason: TFilesChangedReason;
     changedFileIds?: string[];
 }
-/** Default Norwegian Bokmål strings used by both implementations. */
-export interface IFileUploadStrings {
-    dropZoneDragMultiple: string;
-    dropZoneDragSingle: string;
-    dropZoneDragMultipleThumbnail: string;
-    dropZoneDragSingleThumbnail: string;
-    dropZoneDragActiveMultiple: string;
-    dropZoneDragActiveSingle: string;
-    dropZoneDragActiveMultipleThumbnail: string;
-    dropZoneDragActiveSingleThumbnail: string;
-    dropZoneOpenFileDialogMultiple: string;
-    dropZoneOpenFileDialogSingle: string;
-    dropZoneOpenFileDialogMultipleThumbnail: string;
-    dropZoneOpenFileDialogSingleThumbnail: string;
-    supportedFormatsPrefix: string;
-    invalidFormatDefault: (formats: string) => string;
-    sizeTooLargeDefault: (maxSize: string) => string;
-    requiredMissing: string;
-    genericValidationRejection: string;
-    unknownFilename: string;
-    fileLabel: (count: number) => string;
-    srFileAdded: (filename: string) => string;
-    srFilesAdded: (count: number) => string;
-    srFilesUploadedOfTotal: (uploaded: number, total: number, label: string) => string;
-    srFilesFailedOfTotal: (failed: number, total: number, label: string) => string;
-}
-export declare const defaultFileUploadStrings: IFileUploadStrings;

package/dist/shared-types/index.d.ts

@@ -21,5 +21,4 @@ export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, T
 export type { IPktComboboxOption, TPktComboboxTagSkin, TPktComboboxDisplayValue, TPktComboboxTagPlacement, } from './combobox';
 export type { IPktSelectOption, TSelectOption } from './select';
 export type { TPktSearchInputAppearance, TPktSearchInputMethod, IPktSearchInputSuggestion, IPktSearchInput, } from './searchinput';
-export type { TUploadStrategy as TFileUploadStrategy, TFileUploadItemRenderer, TFilesChangedReason, TFileValidator, TTransferProgress, IFileItem, IFileTransfer, IFileValidateDetail, ITransferCancelledDetail, IFilesChangedDetail, IFileUploadStrings, } from './fileupload';
-export { defaultFileUploadStrings } from './fileupload';
+export type { TUploadStrategy as TFileUploadStrategy, TFileUploadItemRenderer, TFilesChangedReason, TFileValidator, TTransferProgress, IFileItem, IFileTransfer, IFileValidateDetail, ITransferCancelledDetail, IFilesChangedDetail, } from './fileupload';

package/dist/shared-utils/combobox/index.d.ts

@@ -8,3 +8,4 @@ export { isLetterOrSpace, createTypeaheadHandler, findTypeaheadOptionMatch } fro
 export { getInputKeyAction, isArrowToggleKey, getInputValueAction, checkForMatches, getSingleValueForInput, } from './input-utils';
 export type { TInputKeyAction, TFocusOutAction, IFocusOutResult, ICheckForMatchesResult, } from './input-utils';
 export { focusAndScrollIntoView, getOptionElements, focusNextOption, focusPreviousOption, focusFirstOption, focusLastOption, focusFirstOrSelectedOption, } from './keyboard-navigation';
+export type { TComboboxMessageKey } from './messages';

package/dist/shared-utils/combobox/input-utils.d.ts

@@ -1,3 +1,4 @@
+import type { TComboboxMessageKey } from './messages';
 /**
  * Shared combobox input utility functions used by both Elements and React packages.
  * Covers keyboard actions, focus-out validation, match checking, and input display.
@@ -23,7 +24,7 @@ export interface IFocusOutResult {
 export declare const getInputValueAction: (inputValue: string, currentValues: string[], options: IPktComboboxOption[], allowUserInput: boolean, multiple: boolean) => IFocusOutResult;
 export interface ICheckForMatchesResult {
     addValueText: string | null;
-    userInfoMessage: string;
+    userInfoMessage: TComboboxMessageKey;
     shouldRemoveValue: boolean;
     shouldResetInput: boolean;
 }

package/dist/shared-utils/combobox/messages.d.ts

@@ -0,0 +1,7 @@
+import type { TPktStrings } from '../../shared-strings';
+/**
+ * Nøkkelen til en statusmelding i comboboxen, eller tom streng når det ikke er
+ * noe å melde. Utvalgslogikken her returnerer nøkler i stedet for ferdig tekst,
+ * slik at Elements og React kan slå opp teksten i sin egen tekstkatalog.
+ */
+export type TComboboxMessageKey = keyof TPktStrings['combobox'] | '';

package/dist/shared-utils/combobox/option-utils.d.ts

@@ -1,3 +1,4 @@
+import type { TComboboxMessageKey } from './messages';
 /**
  * Shared combobox option utility functions used by both Elements and React packages.
  * Only framework-agnostic functions belong here.
@@ -46,5 +47,5 @@ export declare const findTypeaheadMatches: (options: IPktComboboxOption[], searc
  */
 export declare const getSearchInfoMessage: (searchValue: string, selectedValues: string[], options: IPktComboboxOption[], allowUserInput: boolean) => {
     addValueText: string | null;
-    userInfoMessage: string;
+    userInfoMessage: TComboboxMessageKey;
 };

package/dist/shared-utils/combobox/selection-manager.d.ts

@@ -1,3 +1,4 @@
+import type { TComboboxMessageKey } from './messages';
 /**
  * Shared combobox selection management functions used by both Elements and React packages.
  * Only framework-agnostic functions belong here.
@@ -20,7 +21,7 @@ export interface IToggleSelectionResult {
     options: IPktComboboxOption[];
     shouldOptionsBeOpen: boolean;
     shouldResetInput: boolean;
-    userInfoMessage: string;
+    userInfoMessage: TComboboxMessageKey;
     searchValue: string;
     newUserOption: IPktComboboxOption | null;
 }
@@ -47,7 +48,7 @@ export declare const deselectOption: (value: string | null, currentValues: strin
 export declare const selectAllOptions: (options: IPktComboboxOption[], maxlength: number | null) => {
     values: string[];
     options: IPktComboboxOption[];
-    userInfoMessage: string;
+    userInfoMessage: TComboboxMessageKey;
 };
 /**
  * Clears all selections.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "17.1.2",
+  "version": "18.0.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -44,8 +44,8 @@
     "@eslint/compat": "^2.1.0",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
-    "@oslokommune/punkt-assets": "^17.1.2",
-    "@oslokommune/punkt-css": "^17.1.2",
+    "@oslokommune/punkt-assets": "^18.0.0",
+    "@oslokommune/punkt-css": "^18.0.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -102,5 +102,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "51f7f8d53f738720e275a3d9492b26f7ff16b88a"
+  "gitHead": "057d0045ccd1af4d0f6591f0e2b0e5ab6fda3843"
 }

package/src/components/backlink/BackLink.tsx

@@ -3,8 +3,13 @@
 import { AnchorHTMLAttributes, forwardRef, ReactNode, Ref } from 'react'
 
 import { PktIcon } from '../icon/Icon'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import type { 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
@@ -18,7 +23,10 @@ export interface IPktBackLink extends Omit<AnchorHTMLAttributes<HTMLAnchorElemen
 }
 
 export const PktBackLink = forwardRef<HTMLElement, IPktBackLink>(
-  ({ href = '/', text = 'Forsiden', ariaLabel, renderLink, className, ...props }, ref) => {
+  (
+    { href = '/', text = 'Forsiden', ariaLabel, renderLink, className, strings, ...props },
+    ref,
+  ) => {
     const linkChildren = (
       <>
         <PktIcon className="pkt-back-link__icon pkt-icon pkt-link__icon" name="chevron-thin-left" aria-hidden="true" />
@@ -34,10 +42,11 @@ export const PktBackLink = forwardRef<HTMLElement, IPktBackLink>(
         </a>
       ))
 
+    const s = usePktStrings(['backlink'], strings)
     const classes = ['pkt-back-link', className].filter(Boolean).join(' ')
 
     return (
-      <nav className={classes} aria-label={ariaLabel || 'Gå tilbake til forrige side'} ref={ref}>
+      <nav className={classes} aria-label={ariaLabel || s.backlink.label} ref={ref}>
         {linkRenderer({
           href,
           className: 'pkt-link pkt-link--icon-left',

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -4,6 +4,8 @@ import { ForwardedRef, forwardRef, type AnchorHTMLAttributes, type ReactNode } f
 import { Link } from 'react-router-dom'
 
 import { PktIcon } from '../icon/Icon'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import type { TPktStringsOverride } from 'shared-strings'
 
 export interface IBreadcrumbs {
   text: string
@@ -11,6 +13,9 @@ export interface IBreadcrumbs {
 }
 
 export interface IPktBreadcrumbs extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
+
   breadcrumbs: IBreadcrumbs[]
   navigationType?: 'router' | 'anchor'
   renderLink?: (args: {
@@ -23,7 +28,7 @@ export interface IPktBreadcrumbs extends AnchorHTMLAttributes<HTMLAnchorElement>
 
 export const PktBreadcrumbs = forwardRef(
   (
-    { breadcrumbs, navigationType, renderLink, className, ...props }: IPktBreadcrumbs,
+    { breadcrumbs, navigationType, renderLink, className, strings, ...props }: IPktBreadcrumbs,
     ref: ForwardedRef<HTMLAnchorElement>,
   ) => {
     const slicedBreadcrumbs = breadcrumbs
@@ -31,6 +36,7 @@ export const PktBreadcrumbs = forwardRef(
     const backLink = slicedBreadcrumbs[slicedBreadcrumbs.length - 2]
 
     // Define the classes
+    const s = usePktStrings(['breadcrumbs'], strings)
     const classes = [className, 'pkt-breadcrumbs'].filter(Boolean).join(' ')
 
     // Create a default renderLink implementation based on navigationType
@@ -50,7 +56,7 @@ export const PktBreadcrumbs = forwardRef(
 
     // Mobile and desktop have different markup
     return (
-      <nav ref={ref} aria-label="brødsmulemeny" className={classes}>
+      <nav ref={ref} aria-label={s.breadcrumbs.ariaLabel} className={classes}>
         <ol className="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
           {slicedBreadcrumbs.map((item, index) => (
             <li key={`breadcrumb-${index}`} className="pkt-breadcrumbs__item">

package/src/components/calendar/Calendar.core.test.tsx

@@ -223,7 +223,7 @@ describe('PktCalendar', () => {
 
     test('handles custom day strings', () => {
       const { container } = createCalendar({
-        strings: { daysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'] },
+        strings: { dates: { daysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'] } },
       })
 
       const dayHeaders = container.querySelectorAll('.pkt-calendar__day-name')
@@ -235,10 +235,12 @@ describe('PktCalendar', () => {
       const { container } = createCalendar({
         withcontrols: true,
         strings: {
-          months: [
-            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
-          ],
+          dates: {
+            months: [
+              'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+            ],
+          },
         },
       })
 

package/src/components/calendar/types.ts

@@ -1,38 +1,17 @@
 import type { IDateConstraints, TDateRangeMap } from 'shared-types/calendar'
 
-export const DEFAULT_STRINGS: Required<IPktCalendarStrings> = {
-  month: 'Måned',
-  year: 'År',
-  days: ['Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag', 'Søndag'],
-  daysShort: ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'],
-  months: [
-    'Januar',
-    'Februar',
-    'Mars',
-    'April',
-    'Mai',
-    'Juni',
-    'Juli',
-    'August',
-    'September',
-    'Oktober',
-    'November',
-    'Desember',
-  ],
-  week: 'Uke',
-  prevMonth: 'Forrige måned',
-  nextMonth: 'Neste måned',
-}
+import type { 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 {
@@ -64,7 +43,8 @@ export interface IPktCalendar {
   today?: string
 
   // Localization
-  strings?: IPktCalendarStrings
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
 
   // Callbacks
   onDateSelected?: (selected: string[]) => void
@@ -87,7 +67,7 @@ export type TDayViewData = {
 
 export interface ICalendarState {
   componentId: string
-  strings: Required<IPktCalendarStrings>
+  strings: IPktCalendarStrings
 
   // Navigation
   year: number
@@ -148,7 +128,7 @@ export interface ICalendarState {
 
 export interface ICalendarNavProps {
   componentId: string
-  strings: Required<IPktCalendarStrings>
+  strings: IPktCalendarStrings
   year: number
   month: number
   earliest: string | null

package/src/components/calendar/useCalendarState.ts

@@ -17,7 +17,8 @@ import {
   getKeyDirection,
 } from 'shared-utils/calendar/keyboard-navigation'
 
-import { DEFAULT_STRINGS, type IPktCalendar, type ICalendarState } from './types'
+import { type IPktCalendar, type ICalendarState } from './types'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
 export function useCalendarState(props: IPktCalendar): ICalendarState {
   const {
@@ -43,7 +44,20 @@ export function useCalendarState(props: IPktCalendar): ICalendarState {
   const generatedId = useId()
   const componentId = idProp ?? generatedId
 
-  const strings = useMemo(() => ({ ...DEFAULT_STRINGS, ...stringsProp }), [stringsProp])
+  const catalog = usePktStrings(['dates', 'calendar'], stringsProp)
+  const strings = useMemo(
+    () => ({
+      month: catalog.dates.month,
+      year: catalog.dates.year,
+      week: catalog.dates.week,
+      days: catalog.dates.days,
+      daysShort: catalog.dates.daysShort,
+      months: catalog.dates.months,
+      prevMonth: catalog.calendar.prevMonth,
+      nextMonth: catalog.calendar.nextMonth,
+    }),
+    [catalog],
+  )
 
   const todayDate = useMemo(
     () => (todayProp ? parseISODateString(todayProp) : todayInTz()),