@oslokommune/punkt-react 16.13.3 → 16.15.0

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

@@ -0,0 +1,73 @@
+/**
+ * fileupload.ts
+ *
+ * Type definitions for the fileupload component.
+ * Used by both Elements and React implementations.
+ */
+export type TUploadStrategy = 'form' | 'custom';
+export type TFileUploadItemRenderer = 'filename' | 'thumbnail';
+export type TFilesChangedReason = 'add' | 'remove' | 'update';
+export type TFileValidator = (file: File) => string | null;
+export type TTransferProgress = number | 'done' | 'error' | 'canceled' | 'queued';
+/** A selected file plus metadata used by the FileUpload UI. */
+export interface IFileItem {
+    fileId: string;
+    file?: File;
+    attributes: {
+        targetFilename: string;
+    } & Record<string, unknown>;
+}
+/** Transfer status for a file when using `uploadStrategy="custom"`. */
+export interface IFileTransfer {
+    fileId: string;
+    progress: TTransferProgress;
+    errorMessage?: string;
+    showProgress?: boolean;
+    lastProgress?: number;
+}
+/** Detail payload for the `file-validate` event (Lit) / callback equivalent (React). */
+export interface IFileValidateDetail {
+    file: File;
+    errorMessage: string | null;
+}
+/** Detail payload for `transfer-cancelled` event / `onTransferCancelled` callback. */
+export interface ITransferCancelledDetail {
+    fileId: string;
+    file?: File;
+    attributes: {
+        targetFilename: string;
+    } & Record<string, unknown>;
+}
+/** Detail payload for the `files-changed` event. */
+export interface IFilesChangedDetail {
+    files: IFileItem[];
+    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

@@ -15,3 +15,5 @@ export type { ITimepickerStrings } from './timepicker';
 export { defaultTimepickerStrings } from './timepicker';
 export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, TProgressbarStatusType, TProgressbarTitlePosition, } from './progressbar';
 export type { IPktComboboxOption, TPktComboboxTagSkin, TPktComboboxDisplayValue, TPktComboboxTagPlacement, } from './combobox';
+export type { TUploadStrategy as TFileUploadStrategy, TFileUploadItemRenderer, TFilesChangedReason, TFileValidator, TTransferProgress, IFileItem, IFileTransfer, IFileValidateDetail, ITransferCancelledDetail, IFilesChangedDetail, IFileUploadStrings, } from './fileupload';
+export { defaultFileUploadStrings } from './fileupload';

package/dist/shared-utils/fileupload/announcements.d.ts

@@ -0,0 +1,11 @@
+import type { IFileItem, IFileTransfer } from '../../shared-types';
+export interface IFileUploadCounts {
+    totalCount: number;
+    uploadedCount: number;
+    failedCount: number;
+}
+/**
+ * Count how many files have reached `done` vs `error` based on the supplied
+ * transfer list. Pure — both runtimes share this for their aria-live summaries.
+ */
+export declare function countFileTransferStates(files: IFileItem[], transfers: IFileTransfer[] | undefined): IFileUploadCounts;

package/dist/shared-utils/fileupload/filename.d.ts

@@ -0,0 +1,13 @@
+/** MIME / accept fallback for the thumbnail view (image-only upload mode). */
+export declare const THUMBNAIL_ACCEPT = ".jpeg, .jpg, .png, .gif, .webp, .heic";
+/**
+ * Resolve the display name for a file item, preferring the (possibly renamed)
+ * `attributes.targetFilename`, falling back to the underlying File, and finally
+ * a localized "unknown file" label.
+ */
+export declare function getDisplayFilename(item: {
+    file?: File | null;
+    attributes?: {
+        targetFilename?: string;
+    };
+}, fallback?: string): string;

package/dist/shared-utils/fileupload/focus-trap.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Build a list of focusable elements inside a container (same selector used by
+ * Lit and React fileupload preview modals). Hidden elements are filtered out.
+ */
+export declare function getFocusableElements(container: HTMLElement | null | undefined): HTMLElement[];
+/**
+ * Keyboard handler that wraps Tab / Shift-Tab focus around the first and last
+ * focusable elements inside a container. Returns `true` if the event was handled.
+ *
+ * Call from a `keydown` listener on the modal root.
+ */
+export declare function trapTabInside(event: KeyboardEvent, container: HTMLElement | null | undefined): boolean;

package/dist/shared-utils/fileupload/formats.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Normalize an `allowedFormats` value (array or undefined) to lowercase, trimmed, non-empty tokens.
+ */
+export declare function normalizeAllowedFormats(formats: string[] | undefined | null): string[];
+/**
+ * Parse a native `accept` attribute value (comma-separated) into normalized tokens.
+ */
+export declare function parseAcceptTokens(accept: string | undefined | null): string[];
+/**
+ * Return `true` when a file matches one of the normalized allowed-format tokens.
+ * Supports plain extensions (`'pdf'`, `'.pdf'`), exact MIME types (`'application/pdf'`),
+ * and wildcards (`'image/*'`).
+ */
+export declare function matchesAllowedFormat(token: string, fileExtension: string, fileMimeType: string): boolean;
+/**
+ * Check whether a `File` matches any of the allowed formats.
+ * An empty list is treated as "accept everything".
+ */
+export declare function isFileAllowed(file: File, allowedFormats: string[]): boolean;
+/**
+ * Build a `accept=""` string from allowed formats, falling back to an explicit accept when provided.
+ */
+export declare function resolveAcceptAttribute(explicitAccept: string | undefined, allowedFormats: string[] | undefined): string;
+/** Human-readable token for the "Format: …" help line. */
+export declare function formatTokenForDisplay(token: string): string;
+/**
+ * Produce the "Format: PDF, JPG, …" list used under the drop zone.
+ * Falls back to `accept` tokens when `allowedFormats` is empty.
+ */
+export declare function getSupportedFormatsText(allowedFormats: string[] | undefined, accept: string | undefined): string;

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

@@ -0,0 +1,15 @@
+/**
+ * Shared fileupload utilities for use by both Elements and React packages.
+ */
+export { parseFileSize, formatFileSize } from './size';
+export { normalizeAllowedFormats, parseAcceptTokens, matchesAllowedFormat, isFileAllowed, resolveAcceptAttribute, formatTokenForDisplay, getSupportedFormatsText, } from './formats';
+export { validateFile, applyErrorTemplate, isImageFileLike } from './validation';
+export type { IValidateFileOptions } from './validation';
+export { getProgressState, mergeFilesAndTransfers } from './transfers';
+export type { IFileAndTransfer, TProgressState } from './transfers';
+export { getFocusableElements, trapTabInside } from './focus-trap';
+export { splitFilenameForTruncation } from './truncate';
+export { navigateCyclic } from './navigation';
+export { countFileTransferStates } from './announcements';
+export type { IFileUploadCounts } from './announcements';
+export { getDisplayFilename, THUMBNAIL_ACCEPT } from './filename';

package/dist/shared-utils/fileupload/navigation.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Step an index forward or backward with wrap-around. Used by the image
+ * preview modal in both runtimes. Returns `0` for an empty list.
+ */
+export declare function navigateCyclic(currentIndex: number, direction: 'prev' | 'next', length: number): number;

package/dist/shared-utils/fileupload/size.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Parse a file-size string like `"5MB"`, `"500KB"`, `"1GB"`, or a raw byte number.
+ * Returns `undefined` for invalid input and logs a warning.
+ *
+ * @example
+ *   parseFileSize('5MB')   // 5_242_880
+ *   parseFileSize('500KB') // 512_000
+ *   parseFileSize(1024)    // 1024
+ */
+export declare function parseFileSize(size: string | number | undefined | null): number | undefined;
+/** Format bytes to a compact human-readable string (e.g. `"500 KB"`, `"5 MB"`). */
+export declare function formatFileSize(bytes: number): string;

package/dist/shared-utils/fileupload/transfers.d.ts

@@ -0,0 +1,17 @@
+import type { IFileItem, IFileTransfer, TFileUploadStrategy, TTransferProgress } from '../../shared-types';
+export type TProgressState = 'in-progress' | 'error' | 'idle';
+/** Bucket a raw progress value into a sort-priority class. */
+export declare function getProgressState(progress: TTransferProgress): TProgressState;
+export interface IFileAndTransfer extends IFileItem {
+    progress: TTransferProgress;
+    errorMessage?: string;
+    showProgress?: boolean;
+    lastProgress?: number;
+}
+/**
+ * Merge a `FileItem[]` list with a `TFileTransfer[]` list and sort by priority
+ * (in-progress first, then errors, then done/queued).
+ *
+ * Used by both Lit (`getFilesAndTransfers`) and React (`useFilesAndTransfers`).
+ */
+export declare function mergeFilesAndTransfers(files: IFileItem[], transfers: IFileTransfer[] | undefined, uploadStrategy: TFileUploadStrategy): IFileAndTransfer[];

package/dist/shared-utils/fileupload/truncate.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Decide how to split a filename for middle-truncation (head + fixed-length tail,
+ * so the extension stays visible).
+ *
+ * Returns `null` when no split should happen — either the caller didn't ask for
+ * a tail, or the filename is so short that splitting would produce visual noise
+ * (we use a threshold of `tail + 3` characters, same as the React Truncate
+ * component has used since it was introduced).
+ */
+export declare function splitFilenameForTruncation(filename: string, tail: number | undefined): {
+    head: string;
+    tail: string;
+} | null;

package/dist/shared-utils/fileupload/validation.d.ts

@@ -0,0 +1,24 @@
+import type { TFileValidator } from '../../shared-types';
+export interface IValidateFileOptions {
+    allowedFormats?: string[];
+    maxFileSize?: string | number;
+    formatErrorMessage?: string;
+    sizeErrorMessage?: string;
+    onFileValidation?: TFileValidator;
+}
+/** Apply `{formats}` / `{maxSize}` placeholders to a user-supplied message, falling back to the default. */
+export declare function applyErrorTemplate(template: string | undefined | null, fallback: string, placeholders: Record<string, string>): string;
+/**
+ * Run the shared validation pipeline (format → size → user callback).
+ * Returns the first error string, or `null` if the file is accepted.
+ *
+ * The `onFileValidation` callback is called last and can veto an otherwise-valid file.
+ */
+export declare function validateFile(file: File, options: IValidateFileOptions): string | null;
+/** Detect whether a file (or an item with `.file` and `.attributes.targetFilename`) is an image. */
+export declare function isImageFileLike(input: {
+    file?: File | null;
+    attributes?: {
+        targetFilename?: string;
+    };
+}): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.13.3",
+  "version": "16.15.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^16.13.2",
+    "@oslokommune/punkt-elements": "^16.15.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^16.13.2",
-    "@oslokommune/punkt-css": "^16.13.3",
+    "@oslokommune/punkt-css": "^16.15.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0a14763e4a1d49a5c8dccf51dc0dfc08a6d05cb1"
+  "gitHead": "5147b31531bab9ff64963a1f091a717bb93d35cf"
 }

package/src/components/fileupload/DropZone.tsx

@@ -12,12 +12,11 @@ import {
   useState,
 } from 'react'
 
+import { defaultFileUploadStrings } from 'shared-types'
+
 import { PktIcon } from '..'
-import { uiMultipleTexts, uiSingleTexts, uiThumbnailMultipleTexts, uiThumbnailSingleTexts } from './texts'
 import { FileItem, TFileItemList, TUploadStrategy } from './types'
 
-const DEFAULT_FORMATS_HELP_TEXT = '.PDF, .JPEG, .JPG, .PNG, .HEIC, .DOC, .DOCX, .ODT'
-
 /**
  * Props for the internal `DropZone` building block.
  *
@@ -48,11 +47,6 @@ interface IDropZoneProps
   isThumbnailView?: boolean
   /** Disables all interaction. */
   disabled?: boolean
-  /** IDs for screen reader announcements (uploaded/errors). */
-  srAnnouncementIds?: {
-    uploaded: string
-    errors: string
-  }
   /** Whether the file input already has an external visible label associated with it. */
   hasVisibleLabel?: boolean
 }
@@ -68,7 +62,6 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
       accept,
       isThumbnailView = false,
       disabled = false,
-      srAnnouncementIds,
       hasVisibleLabel = false,
       ...inputProps
     }: IDropZoneProps,
@@ -86,7 +79,7 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
               .filter(Boolean)
               .join(', ')
               .toUpperCase()
-          : DEFAULT_FORMATS_HELP_TEXT,
+          : '',
       [resolvedAccept],
     )
 
@@ -94,11 +87,31 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
 
     const [isDragActive, setIsDragActive] = useState(false)
 
-    const uiTexts: typeof uiMultipleTexts = useMemo(() => {
+    const uiTexts = useMemo(() => {
       if (isThumbnailView) {
-        return multiple ? uiThumbnailMultipleTexts : uiThumbnailSingleTexts
+        return multiple
+          ? {
+              dragInactive: defaultFileUploadStrings.dropZoneDragMultipleThumbnail,
+              dragActive: defaultFileUploadStrings.dropZoneDragActiveMultipleThumbnail,
+              openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogMultipleThumbnail,
+            }
+          : {
+              dragInactive: defaultFileUploadStrings.dropZoneDragSingleThumbnail,
+              dragActive: defaultFileUploadStrings.dropZoneDragActiveSingleThumbnail,
+              openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogSingleThumbnail,
+            }
       }
-      return multiple ? uiMultipleTexts : uiSingleTexts
+      return multiple
+        ? {
+            dragInactive: defaultFileUploadStrings.dropZoneDragMultiple,
+            dragActive: defaultFileUploadStrings.dropZoneDragActiveMultiple,
+            openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogMultiple,
+          }
+        : {
+            dragInactive: defaultFileUploadStrings.dropZoneDragSingle,
+            dragActive: defaultFileUploadStrings.dropZoneDragActiveSingle,
+            openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogSingle,
+          }
     }, [multiple, isThumbnailView])
 
     const populateNativeFileInput = useCallback(
@@ -133,11 +146,7 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
       const selectedFiles = (event.target as HTMLInputElement).files!
       const userCancelledFileSelectionDialog = selectedFiles.length === 0
       if (userCancelledFileSelectionDialog) {
-        if (multiple) {
-          populateNativeFileInput(value)
-        } else {
-          // onFilesChanged([]) // TODO: Nullstill ved avbryt i enkel opplasting?
-        }
+        populateNativeFileInput(value)
         return
       }
       filesAdded(Array.from(selectedFiles))
@@ -211,10 +220,10 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
           <PktIcon name={'attachment'} className="pkt-fileupload__drop-zone__placeholder__icon" aria-hidden="true" />
           <p className={'pkt-fileupload__drop-zone__placeholder__title'}>
             {isDragActive ? (
-              `${uiTexts.dropFilesHere} ...`
+              `${uiTexts.dragActive} ...`
             ) : (
               <>
-                {uiTexts.selectOrDragFiles}{' '}
+                {uiTexts.dragInactive}{' '}
                 <button
                   className="pkt-fileupload__drop-zone__placeholder__title__open-file-dialog"
                   onClick={(e) => {
@@ -224,12 +233,16 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
                   }}
                   type="button"
                 >
-                  {uiTexts.chooseFiles}
+                  {uiTexts.openFileDialog}
                 </button>
               </>
             )}
           </p>
-          <p className={'pkt-fileupload__drop-zone__placeholder__formats'}>Format: {acceptedFormatsReadableString}</p>
+          {acceptedFormatsReadableString ? (
+            <p className={'pkt-fileupload__drop-zone__placeholder__formats'}>
+              {defaultFileUploadStrings.supportedFormatsPrefix} {acceptedFormatsReadableString}
+            </p>
+          ) : null}
         </div>
       </div>
     )

package/src/components/fileupload/FileUpload.test.tsx

@@ -69,13 +69,21 @@ if (!global.ResizeObserver) {
 
 const NOOP = () => {}
 
-const getVisibleFilenameNode = (filename: string) =>
-  screen.queryByText(
-    (content, element) => content === filename && element?.getAttribute('data-pkt-truncate-part') === 'first',
-  )
+const reconstructFilenamesFromTitles = (): string[] => {
+  const titles = document.querySelectorAll('.pkt-fileupload__queue-display__item__title')
+  return Array.from(titles).map((title) => {
+    const head = title.querySelector('[data-pkt-truncate-part="first"]')?.textContent ?? ''
+    const tail = title.querySelector('[data-pkt-truncate-part="tail"]')?.textContent ?? ''
+    return head + tail
+  })
+}
 
 const expectVisibleFilename = (filename: string) => {
-  expect(getVisibleFilenameNode(filename)).toBeInTheDocument()
+  expect(reconstructFilenamesFromTitles()).toContain(filename)
+}
+
+const expectNoVisibleFilename = (filename: string) => {
+  expect(reconstructFilenamesFromTitles()).not.toContain(filename)
 }
 
 const makeFilesPropWritable = (fileInput: HTMLInputElement) => {
@@ -102,18 +110,18 @@ function createFileItem(name: string, fileId?: string) {
 
 describe('PktFileUpload', () => {
   describe('Rendering', () => {
-    it('should render the drop zone with default placeholder text for multiple files', () => {
+    it('should render the drop zone without format hint by default for multiple files', () => {
       render(<PktFileUpload multiple name={'pktFileUpload'} />)
 
       expect(screen.getByText(/Dra filer hit for å laste dem opp eller/)).toBeInTheDocument()
       expect(screen.getByText('velg filer')).toBeInTheDocument()
-      expect(screen.getByText(/Format: .PDF, .JPEG, .JPG, .PNG, .HEIC, .DOC, .DOCX, .ODT/)).toBeInTheDocument()
+      expect(screen.queryByText(/^Format:/)).not.toBeInTheDocument()
     })
 
     it('should render the drop zone with single file text when multiple is false', () => {
       render(<PktFileUpload name={'pktFileUpload'} />)
 
-      expect(screen.getByText(/Dra en fil for å laste den opp eller/)).toBeInTheDocument()
+      expect(screen.getByText(/Dra en fil hit for å laste den opp eller/)).toBeInTheDocument()
       expect(screen.getByText('velg en fil')).toBeInTheDocument()
     })
 
@@ -372,7 +380,7 @@ describe('PktFileUpload', () => {
 
       rerender(<PktFileUpload value={updatedValue} name={'pktFileUpload'} onFilesChanged={NOOP} />)
 
-      expect(getVisibleFilenameNode('file1.pdf')).not.toBeInTheDocument()
+      expectNoVisibleFilename('file1.pdf')
       expectVisibleFilename('file2.pdf')
     })
 
@@ -413,6 +421,102 @@ describe('PktFileUpload', () => {
       const closeIcon = container.querySelector('pkt-icon[name="close-circle"]')
       expect(closeIcon).toBeInTheDocument()
     })
+
+    it('disabled mode prevents remove buttons from firing', () => {
+      const onFilesChanged = vi.fn()
+      const initialValue: TFileItemList = [createFileItem('locked.pdf', 'lock-1')]
+      render(
+        <PktFileUpload
+          value={initialValue}
+          name="pktFileUpload"
+          disabled
+          onFilesChanged={onFilesChanged}
+        />,
+      )
+
+      const removeButton = screen.getByRole('button', { name: /Slett fil/ })
+      removeButton.click()
+
+      expect(onFilesChanged).not.toHaveBeenCalled()
+    })
+
+    it('calls onTransferCancelled with the file id when removing in custom strategy', () => {
+      const onTransferCancelled = vi.fn()
+      const onFilesChanged = vi.fn()
+      const initialValue: TFileItemList = [createFileItem('uploading.pdf', 'cancel-1')]
+
+      render(
+        <PktFileUpload
+          id="cancel-upload"
+          name="pktFileUpload"
+          uploadStrategy="custom"
+          value={initialValue}
+          onFilesChanged={onFilesChanged}
+          onFileUploadRequested={vi.fn()}
+          onTransferCancelled={onTransferCancelled}
+          transfers={[{ fileId: 'cancel-1', progress: 0.4, showProgress: true }]}
+        />,
+      )
+
+      const cancelButton = screen.getByRole('button', { name: /Avbryt opplasting/ })
+      cancelButton.click()
+
+      expect(onTransferCancelled).toHaveBeenCalledTimes(1)
+      expect(onTransferCancelled).toHaveBeenCalledWith('cancel-1')
+      expect(onFilesChanged).toHaveBeenCalledTimes(1)
+      expect(onFilesChanged.mock.calls[0][0]).toEqual([])
+    })
+  })
+
+  describe('extraOperations', () => {
+    it('renders custom operation buttons and forwards a context to onClick', () => {
+      const seen: Array<{ fileId: string; isActive: boolean }> = []
+      const initialValue: TFileItemList = [createFileItem('star-me.pdf', 'star-1')]
+      render(
+        <PktFileUpload
+          name="pktFileUpload"
+          value={initialValue}
+          onFilesChanged={NOOP}
+          extraOperations={[
+            {
+              id: 'star',
+              title: 'Stjernemerk',
+              ariaLabel: 'Stjernemerk fil',
+              onClick: (context) =>
+                seen.push({ fileId: context.file.fileId, isActive: context.isActive }),
+            },
+          ]}
+        />,
+      )
+
+      const button = screen.getByRole('button', { name: /Stjernemerk fil/ })
+      button.click()
+
+      expect(seen).toEqual([{ fileId: 'star-1', isActive: false }])
+    })
+
+    it('renderInlineUI swaps in custom UI when activated', () => {
+      const initialValue: TFileItemList = [createFileItem('inline.pdf', 'inline-1')]
+      render(
+        <PktFileUpload
+          name="pktFileUpload"
+          value={initialValue}
+          onFilesChanged={NOOP}
+          extraOperations={[
+            {
+              id: 'edit-inline',
+              title: 'Inline rediger',
+              renderInlineUI: () => <span data-testid="custom-inline">Custom inline UI</span>,
+            },
+          ]}
+        />,
+      )
+
+      const button = screen.getByRole('button', { name: /Inline rediger/ })
+      fireEvent.click(button)
+
+      expect(screen.getByTestId('custom-inline')).toBeInTheDocument()
+    })
   })
 
   describe('Accessibility', () => {
@@ -515,6 +619,57 @@ describe('PktFileUpload', () => {
     })
   })
 
+  describe('onFileValidate escape hatch', () => {
+    it('runs after built-in validation, receives the file, and can reject by setting errorMessage', () => {
+      const onFileValidate = vi.fn((detail: { file: File; errorMessage: string | null }) => {
+        if (detail.file.name.endsWith('.exe')) detail.errorMessage = 'Blokkert av onFileValidate'
+      })
+      render(<PktFileUpload multiple name="pktFileUpload" onFileValidate={onFileValidate} />)
+
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement
+      fireEvent.change(fileInput, { target: { files: [createMockFile('malware.exe')] } })
+
+      expect(onFileValidate).toHaveBeenCalledTimes(1)
+      expect(onFileValidate.mock.calls[0][0].file.name).toBe('malware.exe')
+      expect(screen.getByText('Blokkert av onFileValidate')).toBeInTheDocument()
+    })
+
+    it('allows the file through when errorMessage stays null', () => {
+      const onFilesChanged = vi.fn()
+      const onFileValidate = vi.fn() // touches nothing, so errorMessage stays null
+      render(
+        <PktFileUpload
+          name="pktFileUpload"
+          onFilesChanged={onFilesChanged}
+          onFileValidate={onFileValidate}
+        />,
+      )
+
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement
+      fireEvent.change(fileInput, { target: { files: [createMockFile('ok.pdf')] } })
+
+      expect(onFileValidate).toHaveBeenCalledTimes(1)
+      expect(onFilesChanged).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not run when a built-in validator (allowedFormats) already rejects the file', () => {
+      const onFileValidate = vi.fn()
+      render(
+        <PktFileUpload
+          name="pktFileUpload"
+          allowedFormats={['pdf']}
+          onFileValidate={onFileValidate}
+        />,
+      )
+
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement
+      fireEvent.change(fileInput, { target: { files: [createMockFile('nope.png')] } })
+
+      expect(onFileValidate).not.toHaveBeenCalled()
+      expect(screen.getByText(/Ugyldig filtype/)).toBeInTheDocument()
+    })
+  })
+
   describe('Form submission values', () => {
     it('blocks custom strategy submit when required and no files are selected', () => {
       const { container } = render(
@@ -543,7 +698,7 @@ describe('PktFileUpload', () => {
       expect(submitWasPrevented).toBe(true)
       expect(fileInput).toHaveAttribute('aria-invalid', 'true')
       expect(fileInput).toHaveAttribute('aria-describedby', 'custom-required-upload-error')
-      expect(screen.getByText('Velg minst én fil før du sender inn skjemaet.')).toBeInTheDocument()
+      expect(screen.getByText('Du må laste opp minst én fil.')).toBeInTheDocument()
     })
 
     it('should populate file input with selected files for form submission', () => {