@oslokommune/punkt-react 17.1.3 → 18.1.0

package/src/components/fileupload/FileUpload.tsx

@@ -27,7 +27,7 @@ import {
   useState,
 } from 'react'
 
-import { defaultFileUploadStrings } from 'shared-types'
+import { type IPktFileUploadBase } from 'shared-types'
 import {
   countFileTransferStates,
   resolveAcceptAttribute,
@@ -52,91 +52,51 @@ import {
   TItemRenderer,
   PktFileUploadContext,
   TQueueItemOperation,
-  TUploadStrategy,
 } from './types'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import { formatString, plural } from 'shared-strings'
 
-// Re-export for external use
 export { formatFileSize, parseFileSize } from 'shared-utils/fileupload'
 
 /**
  * Shared props for `PktFileUpload` (both `form` and `custom` strategies).
  */
-interface IBaseFileUploadProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width' | 'defaultValue'
-> {
+interface IBaseFileUploadProps
+  extends
+    Omit<
+      IPktFileUploadBase,
+      | 'helptext'
+      | 'helptextDropdown'
+      | 'itemRenderer'
+      | 'extraOperations'
+      | 'value'
+      | 'defaultValue'
+      | 'onFilesChanged'
+      | 'onFileUploadRequested'
+    >,
+    Omit<
+      InputHTMLAttributes<HTMLInputElement>,
+      'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width' | 'defaultValue' | 'name'
+    > {
   /** Called with the next file list when files are added/removed/updated. */
   onFilesChanged?: (files: TFileItemList) => void
-  /** Allow selecting/dropping multiple files. */
-  multiple?: boolean
-  /** Controlled value (recommended). */
-  value?: TFileItemList
-  /** Upload mode. Defaults to `"form"`. */
-  uploadStrategy?: TUploadStrategy
-  /** Field name. Used for native input (`form`) or hidden ID inputs (`custom`). */
-  name: string
-  /** Enable comment operation (disabled automatically in thumbnail view). */
-  addCommentsEnabled?: boolean
-  /** Enable rename operation (disabled automatically in thumbnail view). */
-  renameFilesEnabled?: boolean
-  /** Renderer for queue items (`filename`, `thumbnail`, or custom function). */
-  itemRenderer?: keyof typeof ItemRenderers | TItemRenderer
-  /** Number of trailing characters to keep when truncating long filenames. */
-  truncateTail?: number
   /**
    * Called immediately when a file is added in `uploadStrategy="custom"`.
    * Use it to start uploading the file and update `transfers`.
    */
   onFileUploadRequested?: (fileItem: FileItem) => void
+  /** Controlled value (recommended). */
+  value?: TFileItemList
   /** Uncontrolled initial value (use either `value` or `defaultValue`, not both). */
   defaultValue?: TFileItemList
-  /** Extra operations appended after built-ins (rename/comment). */
-  extraOperations?: Array<TQueueItemOperation>
-  /** Stretch to full container width (drop zone + queue). */
-  fullwidth?: boolean
-  /** Allowed formats for built-in validation (extensions like `pdf`, or MIME patterns like `image/*`). */
-  allowedFormats?: string[]
-  /** Custom message for invalid format. Use `{formats}` placeholder. */
-  formatErrorMessage?: string
-  /** Max file size (e.g. `"5MB"` or bytes). */
-  maxFileSize?: string | number
-  /** Custom message for size validation. Use `{maxSize}` placeholder. */
-  sizeErrorMessage?: string
-  /** Optional additional validation hook (runs after built-in format/size checks). Return string to block. */
-  onFileValidation?: (file: File) => string | null
-  /**
-   * Low-level validation escape hatch — Lit parity with the `file-validate` CustomEvent.
-   * Receives a detail object whose `errorMessage` can be mutated; set it to reject the file.
-   */
-  onFileValidate?: (detail: TFileValidateDetail) => void
-  /** External/programmatic error message shown under the component. */
-  errorMessage?: string
-  /** External error flag (combined with internal validation errors). */
-  hasError?: boolean
-  /** Disable the whole component (no interaction). */
-  disabled?: boolean
-  /** Optional label/title (wraps the component in `PktInputWrapper`). */
-  label?: string
+  /** Renderer for queue items (`filename`, `thumbnail`, or custom function). */
+  itemRenderer?: keyof typeof ItemRenderers | TItemRenderer
   /** Help text under the label. */
   helptext?: string | ReactNode
   /** Expandable help text (dropdown). */
   helptextDropdown?: string | ReactNode
-  /** Button label for expandable help text. */
-  helptextDropdownButton?: string
-  /** Shows an "optional" tag. */
-  optionalTag?: boolean
-  /** Label text for the optional tag. */
-  optionalText?: string
-  /** Shows a "required" tag. */
-  requiredTag?: boolean
-  /** Label text for the required tag. */
-  requiredText?: string
-  /** Extra tag next to the label. */
-  tagText?: string | null
-  /** Marks the upload as required. Native validation is used in `form`; submit validation in `custom`. */
-  required?: boolean
-  /** Enable image preview modal (only applies to thumbnail renderer). */
-  enableImagePreview?: boolean
+  /** Extra operations appended after built-ins (rename/comment). */
+  extraOperations?: Array<TQueueItemOperation>
 }
 
 interface IFileInputFileUploadProps
@@ -193,6 +153,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
       enableImagePreview = false,
       ['aria-describedby']: ariaDescribedByProp,
       ['aria-invalid']: ariaInvalidProp,
+      strings,
       ...props
     }: IPktFileUpload,
     forwardedRef,
@@ -203,6 +164,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
     useImperativeHandle(forwardedRef, () => fileInputRef.current as HTMLInputElement, [])
 
     const transfers = 'transfers' in props ? props.transfers : undefined
+    const fileuploadStrings = usePktStrings(['fileupload'], strings).fileupload
     const [validationError, setValidationError] = useState<string | null>(null)
     const [addedAnnouncement, setAddedAnnouncement] = useState('')
 
@@ -262,7 +224,10 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
       uploadStrategy,
       required,
       currentFileCount: value.length,
-      onMissingFiles: useCallback(() => setValidationError(defaultFileUploadStrings.requiredMissing), []),
+      onMissingFiles: useCallback(
+        () => setValidationError(fileuploadStrings.requiredMissing),
+        [fileuploadStrings],
+      ),
     })
 
     const itemRenderer = typeof itemRendererProp === 'string' ? ItemRenderers[itemRendererProp] : itemRendererProp
@@ -293,8 +258,10 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
         const acceptedItems: TFileItemList = multiple ? addedFileItems : [addedFileItems[0]]
         setAddedAnnouncement(
           acceptedItems.length === 1
-            ? defaultFileUploadStrings.srFileAdded(acceptedItems[0].attributes.targetFilename)
-            : defaultFileUploadStrings.srFilesAdded(acceptedItems.length),
+            ? formatString(fileuploadStrings.srFileAdded, {
+                filename: acceptedItems[0].attributes.targetFilename,
+              })
+            : formatString(fileuploadStrings.srFilesAdded, { count: acceptedItems.length }),
         )
 
         if (!isControlled) setInternalValue(newValue)
@@ -306,7 +273,16 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
           })
         }
       },
-      [onFilesChanged, value, multiple, uploadStrategy, onFileUploadRequested, validateFile, isControlled],
+      [
+        onFilesChanged,
+        value,
+        multiple,
+        uploadStrategy,
+        onFileUploadRequested,
+        validateFile,
+        isControlled,
+        fileuploadStrings,
+      ],
     )
 
     const onFileUpdated = useCallback(
@@ -346,7 +322,11 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
       [value, transfers],
     )
 
-    const totalLabel = defaultFileUploadStrings.fileLabel(totalCount)
+    const totalLabel = plural(
+      totalCount,
+      fileuploadStrings.fileLabelOne,
+      fileuploadStrings.fileLabelOther,
+    )
 
     const fileUploadContent = (
       <div
@@ -362,13 +342,21 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
           <div className="pkt-sr-only" aria-live="polite" aria-atomic="true">
             {addedAnnouncement ||
               (totalCount > 0 && uploadedCount > 0
-                ? defaultFileUploadStrings.srFilesUploadedOfTotal(uploadedCount, totalCount, totalLabel)
+                ? formatString(fileuploadStrings.srFilesUploadedOfTotal, {
+                    uploaded: uploadedCount,
+                    total: totalCount,
+                    label: totalLabel,
+                  })
                 : '')}
           </div>
           <div className="pkt-sr-only" aria-live="assertive" aria-atomic="true">
             {totalCount > 0 &&
               failedCount > 0 &&
-              defaultFileUploadStrings.srFilesFailedOfTotal(failedCount, totalCount, totalLabel)}
+              formatString(fileuploadStrings.srFilesFailedOfTotal, {
+                failed: failedCount,
+                total: totalCount,
+                label: totalLabel,
+              })}
           </div>
 
           <DropZone
@@ -387,6 +375,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
             aria-invalid={isAriaInvalid ? 'true' : undefined}
             aria-describedby={describedBy}
             hasVisibleLabel={!!label}
+            strings={strings}
           />
           {hasError && errorMessage && (
             <PktAlert
@@ -423,6 +412,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
       return (
         <div className="pkt-fileupload-component">
           <PktInputWrapper
+            strings={strings}
             forId={id}
             label={label}
             helptext={helptext}

package/src/components/header/HeaderGlobal.tsx

@@ -14,6 +14,7 @@ import { PktHeaderUserMenu } from '../headerUserMenu/UserMenu'
 import { PktIcon } from '../icon/Icon'
 import { PktSearchInput } from '../searchinput/SearchInput'
 import { IPktHeaderGlobal } from './types'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
 const defaultLogoPath = 'https://punkt-cdn.oslo.kommune.no/latest/logos/'
 
@@ -56,6 +57,7 @@ export const PktHeaderGlobal = forwardRef(
       tabletBreakpoint = 1024,
       onDataLoaded,
       onDataError,
+      strings,
     }: IPktHeaderGlobal,
     ref: ForwardedRef<HTMLElement>,
   ) => {
@@ -251,10 +253,11 @@ export const PktHeaderGlobal = forwardRef(
 
     const showLogoutInUserMenu = logOutButtonPlacement === 'userMenu' || logOutButtonPlacement === 'both'
 
+    const headerStrings = usePktStrings(['header'], strings).header
     const search = localeData?.search
     const contact = localeData?.header?.contact
-    const menuText = localeData?.i18n?.menu || 'Meny'
-    const searchText = localeData?.i18n?.search || 'Søk'
+    const menuText = localeData?.i18n?.menu || headerStrings.menu
+    const searchText = localeData?.i18n?.search || headerStrings.search
     const isMenuOpen = openMenu === 'menu'
     const isUserOpen = openMenu === 'user'
     const isSearchOpen = openMenu === 'search'

package/src/components/header/HeaderService.tsx

@@ -26,6 +26,7 @@ import { PktTextinput } from '../textinput/Textinput'
 import { DEFAULT_HEADER_LOGO_LINK } from 'shared-types'
 
 import { IPktHeader, Representing, THeaderMenu, User, UserMenuFooterItem, UserMenuItem } from './types'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
 export type { Representing, THeaderMenu, User, UserMenuFooterItem, UserMenuItem }
 export type IPktHeaderService = IPktHeader
@@ -58,7 +59,7 @@ export const PktHeaderService = forwardRef(
       onSearch,
       onSearchChange,
       searchValue,
-      searchPlaceholder = 'Søk',
+      searchPlaceholder,
       representing,
       serviceLink,
       serviceClick,
@@ -77,6 +78,7 @@ export const PktHeaderService = forwardRef(
       scrollBehavior = 'hide',
       slotMenuVariant = 'icon-only',
       slotMenuText = 'Meny',
+      strings,
     }: IPktHeaderService,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
@@ -92,6 +94,9 @@ export const PktHeaderService = forwardRef(
       }
     }, [userMenuFooter])
 
+    const headerStrings = usePktStrings(['header'], strings).header
+    const resolvedSearchPlaceholder = searchPlaceholder ?? headerStrings.search
+
     // Warning for userOptions - no longer available
     useEffect(() => {
       if (userOptions) {
@@ -341,7 +346,7 @@ export const PktHeaderService = forwardRef(
                   onClick={() => handleMenuToggle('slot')}
                   aria-expanded={openMenu === 'slot'}
                   aria-controls="mobile-slot-menu"
-                  aria-label="Åpne meny"
+                  aria-label={headerStrings.openMenu}
                 >
                   {slotMenuText}
                 </PktButton>
@@ -375,7 +380,7 @@ export const PktHeaderService = forwardRef(
                       state={openMenu === 'search' ? 'active' : 'normal'}
                       aria-expanded={openMenu === 'search'}
                       aria-controls="mobile-search-menu"
-                      aria-label="Åpne søkefelt"
+                      aria-label={headerStrings.openSearch}
                     >
                       Søk
                     </PktButton>
@@ -392,9 +397,9 @@ export const PktHeaderService = forwardRef(
                           id="mobile-search-menu"
                           className="pkt-header-service__search-input"
                           type="search"
-                          label="Søk"
+                          label={headerStrings.search}
                           useWrapper={false}
-                          placeholder={searchPlaceholder}
+                          placeholder={resolvedSearchPlaceholder}
                           value={searchValue}
                           autoFocus
                           fullwidth={true}
@@ -413,9 +418,9 @@ export const PktHeaderService = forwardRef(
                     id="header-service-search"
                     className="pkt-header-service__search-input"
                     type="search"
-                    label="Søk"
+                    label={headerStrings.search}
                     useWrapper={false}
-                    placeholder={searchPlaceholder}
+                    placeholder={resolvedSearchPlaceholder}
                     value={searchValue}
                     onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange?.(e.target.value)}
                     onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {

package/src/components/header/types.ts

@@ -9,6 +9,7 @@ import type {
   THeaderMenuLocale,
   IPktHeaderGlobal as ISharedPktHeaderGlobal,
 } from 'shared-types'
+import type { TPktStringsOverride } from 'shared-strings'
 
 export type {
   THeaderMenu,
@@ -53,6 +54,9 @@ export interface UserMenuFooterItem {
 }
 
 export interface IPktHeader {
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
+
   children?: ReactNode
   /** Additional CSS class name(s) to apply to the header */
   className?: string
@@ -127,6 +131,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/src/components/index.ts

@@ -52,3 +52,13 @@ 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, IPktStringsProps } from 'shared-strings'

package/src/components/inputwrapper/InputWrapper.tsx

@@ -3,6 +3,8 @@
 import { ForwardedRef, forwardRef, type ReactNode, RefAttributes } from 'react'
 
 import { useFocusModality } from '../../hooks/useFocusModality'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import { formatString, type TPktStringsOverride } from 'shared-strings'
 import { counterStatusId, isCounterExceeded } from 'shared-utils/forms/described-by'
 import { PktAlert } from '../alert/Alert'
 import { PktHelptext } from '../helptext/Helptext'
@@ -12,13 +14,16 @@ export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
   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
@@ -33,6 +38,8 @@ export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
   role?: string
   counterPosition?: 'top' | 'bottom'
   size?: 'small' | 'medium' | 'xsmall'
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
 }
 
 export const PktInputWrapper = forwardRef(
@@ -47,9 +54,9 @@ export const PktInputWrapper = forwardRef(
       counterCurrent = 0,
       counterMaxLength,
       optionalTag = false,
-      optionalText = 'Valgfritt',
+      optionalText,
       requiredTag = false,
-      requiredText = 'Må fylles ut',
+      requiredText,
       tagText = null,
       hasError = false,
       errorMessage,
@@ -63,10 +70,12 @@ export const PktInputWrapper = forwardRef(
       role,
       counterPosition = 'bottom',
       size = 'medium',
+      strings,
     }: IPktInputWrapper,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
     const focusModality = useFocusModality<HTMLDivElement>(ref)
+    const s = usePktStrings(['forms', 'validation'], strings)
 
     const describedBy = ariaDescribedby || (helptext ? `${forId}-helptext` : undefined)
     const showCounter = !!counter
@@ -95,7 +104,12 @@ export const PktInputWrapper = forwardRef(
             {counterMaxLength ? `/${counterMaxLength}` : ''}
           </div>
           <div className="pkt-sr-only" id={counterStatusId(forId)} aria-live="polite">
-            {counterExceeded ? `Du har brukt ${counterCurrent} av ${counterMaxLength} tegn` : ''}
+            {counterExceeded
+              ? formatString(s.validation.counterExceeded, {
+                  current: counterCurrent,
+                  max: counterMaxLength ?? 0,
+                })
+              : ''}
           </div>
         </>
       ) : null
@@ -104,8 +118,16 @@ export const PktInputWrapper = forwardRef(
       return (
         <>
           {tagText && <span className={tagClasses + ` pkt-tag--gray`}>{tagText}</span>}
-          {optionalTag && <span className={tagClasses + ` pkt-tag--blue-light`}>{optionalText}</span>}
-          {requiredTag && <span className={tagClasses + ` pkt-tag--beige`}>{requiredText}</span>}
+          {optionalTag && (
+            <span className={tagClasses + ` pkt-tag--blue-light`}>
+              {optionalText ?? s.forms.optional}
+            </span>
+          )}
+          {requiredTag && (
+            <span className={tagClasses + ` pkt-tag--beige`}>
+              {requiredText ?? s.forms.required}
+            </span>
+          )}
         </>
       )
     }
@@ -148,7 +170,7 @@ export const PktInputWrapper = forwardRef(
           forId={forId}
           helptext={visibleHelptext}
           helptextDropdown={helptextDropdown}
-          helptextDropdownButton={helptextDropdownButton}
+          helptextDropdownButton={helptextDropdownButton ?? s.forms.readMore}
         />
       )
     }

package/src/components/link/Link.tsx

@@ -2,6 +2,7 @@
 
 import classNames from 'classnames'
 import { AnchorHTMLAttributes, FC, LinkHTMLAttributes, ReactNode } from 'react'
+import type { TRenderLink } from 'shared-types'
 
 import { PktIcon } from '../icon/Icon'
 
@@ -12,12 +13,7 @@ interface IPktLink extends LinkHTMLAttributes<HTMLAnchorElement> {
   iconPosition?: string | undefined
   external?: boolean
   target?: string | undefined
-  renderLink?: (args: {
-    href: string
-    className: string
-    children: ReactNode
-    props: AnchorHTMLAttributes<HTMLAnchorElement>
-  }) => ReactNode
+  renderLink?: TRenderLink<ReactNode, AnchorHTMLAttributes<HTMLAnchorElement>>
 }
 
 export const PktLink: FC<IPktLink> = ({

package/src/components/radio/RadioButton.tsx

@@ -6,6 +6,8 @@ import {
   ReactElement,
   ReactNode,
 } from 'react'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import type { TPktStringsOverride } from 'shared-strings'
 
 export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
   id: string
@@ -19,9 +21,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>
 }
@@ -43,11 +49,13 @@ export const PktRadioButton = forwardRef(
       optionalText,
       requiredTag,
       requiredText,
+      strings,
       tagText,
       ...props
     }: IPktRadioButton,
     ref: ForwardedRef<HTMLInputElement>,
   ): ReactElement => {
+    const s = usePktStrings(['forms'], strings)
     const classes = [className, 'pkt-input-check'].filter(Boolean).join(' ')
 
     const inputTileClasses = [
@@ -75,8 +83,16 @@ export const PktRadioButton = forwardRef(
       return (
         <>
           {tagText && <span className={tagClasses + ` pkt-tag--gray`}>{tagText}</span>}
-          {optionalTag && <span className={tagClasses + ` pkt-tag--blue-light`}>{optionalText}</span>}
-          {requiredTag && <span className={tagClasses + ` pkt-tag--beige`}>{requiredText}</span>}
+          {optionalTag && (
+            <span className={tagClasses + ` pkt-tag--blue-light`}>
+              {optionalText ?? s.forms.optional}
+            </span>
+          )}
+          {requiredTag && (
+            <span className={tagClasses + ` pkt-tag--beige`}>
+              {requiredText ?? s.forms.required}
+            </span>
+          )}
         </>
       )
     }

package/src/components/searchinput/SearchInput.tsx

@@ -6,6 +6,8 @@ import type { IPktSearchInputSuggestion } from 'shared-types/searchinput'
 
 import { useFocusModality } from '../../hooks/useFocusModality'
 import { PktButton } from '../button/Button'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import type { TPktStringsOverride } from 'shared-strings'
 
 /**
  * React suggestion item: portable fields from {@link IPktSearchInputSuggestion}
@@ -18,6 +20,9 @@ export type PktSearchInputSuggestion = Omit<IPktSearchInputSuggestion, 'title' |
 }
 
 interface ISearch extends HTMLProps<HTMLInputElement> {
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
+
   appearance?: 'local' | 'local-with-button' | 'global'
   inputSize?: 'small' | 'medium' | 'xsmall'
   disabled?: boolean
@@ -25,6 +30,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
@@ -54,7 +60,7 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
       id,
       label,
       name,
-      placeholder = 'Søk…',
+      placeholder,
       suggestions,
       value = '',
       action,
@@ -62,10 +68,14 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
       onChange,
       onSearch,
       onSuggestionClick,
+      strings,
       ...props
     },
     ref,
   ) => {
+    const s = usePktStrings(['searchinput'], strings)
+    const resolvedPlaceholder = placeholder ?? s.searchinput.placeholder
+
     const handleSuggestionActivate = (cb: (() => void) | undefined, index: number) => {
       if (cb) {
         cb()
@@ -130,7 +140,7 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
             type="search"
             name={name || id}
             id={id}
-            placeholder={placeholder}
+            placeholder={resolvedPlaceholder}
             defaultValue={value}
             disabled={disabled}
             autoComplete="off"
@@ -167,7 +177,7 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
               })
             }
           >
-            {label || placeholder}
+            {label || resolvedPlaceholder}
           </PktButton>
         </div>
 

package/src/components/select/Select.tsx

@@ -4,10 +4,13 @@ import { ForwardedRef, forwardRef, ReactNode, SelectHTMLAttributes } from 'react
 
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 import { describedByIds } from 'shared-utils/forms/described-by'
+import type { 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[]
@@ -60,6 +63,7 @@ export const PktSelect = forwardRef(
       useWrapper = true,
       hasFieldset,
       inputSize = 'medium',
+      strings,
       ...props
     }: IPktSelectProps,
     ref: ForwardedRef<HTMLSelectElement>,
@@ -69,6 +73,7 @@ export const PktSelect = forwardRef(
     return (
       <div className={outerClasses}>
         <PktInputWrapper
+          strings={strings}
           forId={`${id}-input`}
           label={label}
           helptext={helptext}