@oslokommune/punkt-react 15.0.3 → 15.1.0

package/CHANGELOG.md

@@ -5,6 +5,37 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [15.1.0](https://github.com/oslokommune/punkt/compare/15.0.4...15.1.0) (2026-02-16)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Fileupload (#3115). * add stateless controlled FileUpload with form/custom upload modes
+  * Controlled API (value + onFilesChanged) with generated file IDs (FileItemList)
+  * Drag & drop + file dialog, single/multiple selection
+  * form submit or custom immediate upload via onFileUploadRequested + hidden ID inputs
+  * Queue display with remove/rename/comment extensions + custom item renderer (incl. thumbnail + preview modal)
+  * responsive fileupload
+  * Built-in validation (format + max size + custom hook) and accessible status/error announcements
+  * add docs
+  * style FU according to Figma design
+  * re-usable `PreviewCodeTabs example`
+  ------
+  Co-authored-by: Vidar Ramdal <vramdal@gmail.com>
+  Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
+  Co-authored-by: miichu <mythng94@gmail.com@gmail.com>
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [15.0.3](https://github.com/oslokommune/punkt/compare/15.0.2...15.0.3) (2026-02-13)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -73,11 +73,111 @@ declare type ExtendedLoader = IPktLoader_2 & PktElType;
 
 declare type ExtendedProgressbar = IPktProgressbar_2 & PktElType;
 
+/**
+ * A selected file plus metadata used by the FileUpload UI.
+ *
+ * Notes:
+ * - A `fileId` is generated automatically if omitted.
+ * - `attributes.targetFilename` is the filename shown in the queue and may be updated by extensions (e.g. rename).
+ */
+declare class FileItem implements FileItem {
+    fileId: TFileId;
+    file: File;
+    attributes: Record<string, any>;
+    constructor(file: File, fileId?: TFileId);
+}
+
+/**
+ * Shared props for `PktFileUpload` (both `form` and `custom` strategies).
+ *
+ * The component can be used as:
+ * - **controlled**: pass `value` + `onFilesChanged`
+ * - **uncontrolled**: pass `defaultValue` (internal state is not stored; you still receive new lists via callbacks)
+ */
+declare interface IBaseFileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width' | 'defaultValue'> {
+    /** 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;
+    /** Uncontrolled initial value (use either `value` or `defaultValue`, not both). */
+    defaultValue?: TFileItemList;
+    /** Extra operations appended after built-ins (rename/comment). */
+    extraOperations?: Array<TQueueItemExtension>;
+    /** 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;
+    /** 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;
+    /** Help text under the label. */
+    helptext?: string | ReactNode;
+    /** Show "Valgfritt" tag in wrapper. */
+    optionalTag?: boolean;
+    /** Show "Må fylles ut" tag in wrapper. */
+    requiredTag?: boolean;
+    /** Enable image preview modal (only applies to thumbnail renderer). */
+    enableImagePreview?: boolean;
+}
+
 declare interface IBreadcrumbs {
     text: string;
     href: string;
 }
 
+/** Props for `uploadStrategy="form"` (native file input submission). */
+declare interface IFileInputFileUploadProps extends IBaseFileUploadProps, Omit<HTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> {
+    uploadStrategy?: 'form';
+    onFileUploadRequested?: never;
+}
+
+/**
+ * Props for `uploadStrategy="custom"` (upload handled externally).
+ *
+ * Requirements:
+ * - `transfers` must be provided (to render status/progress)
+ * - `onFileUploadRequested` is called for each added file
+ */
+declare interface ImmediateFileUploadProps extends IBaseFileUploadProps {
+    id: string;
+    uploadStrategy: 'custom';
+    transfers: Array<TFileTransfer>;
+    onFileUploadRequested: (fileItem: FileItem) => void;
+    onTransferCancelled?: (fileItemId: string) => void;
+}
+
 declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     /** The input's label */
     label?: string;
@@ -293,6 +393,8 @@ export declare interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInp
     className?: string;
 }
 
+export declare type IPktFileUpload = IFileInputFileUploadProps | ImmediateFileUploadProps;
+
 export declare interface IPktFooter extends HTMLAttributes<HTMLDivElement> {
     columnOne: Column;
     columnTwo: Column;
@@ -755,6 +857,8 @@ declare interface ITableRowProps extends HTMLAttributes<HTMLTableRowElement> {
     children: ReactNode;
 }
 
+declare const ItemRenderers: Record<string, TItemRenderer>;
+
 declare interface Link {
     href: string;
     text: string;
@@ -803,6 +907,8 @@ declare interface PktElType extends HTMLAttributes<HTMLElement> {
     id?: string;
 }
 
+export declare const PktFileUpload: FC<IPktFileUpload>;
+
 export declare const PktFooter: FC<IPktFooter>;
 
 export declare const PktFooterSimple: FC<IPktFooterSimple>;
@@ -926,16 +1032,83 @@ declare type TCardPadding = 'none' | 'default';
 
 declare type TCardTagPosition = 'top' | 'bottom';
 
+declare type TFileAndTransfer = FileItem & Pick<TFileTransfer, 'progress' | 'errorMessage' | 'showProgress' | 'lastProgress'>;
+
+declare type TFileAttribute<T> = {
+    get: (fileId: TFileId) => T | undefined;
+    set: (fileId: TFileId, attributeValue: T | undefined) => void;
+};
+
+declare type TFileAttributes = <T>(attributeName: string) => TFileAttribute<T>;
+
+/** Unique identifier assigned to each selected file. */
+declare type TFileId = string;
+
+/** The value type for `PktFileUpload` (`value` / `defaultValue`). */
+declare type TFileItemList = Array<FileItem>;
+
+/**
+ * Transfer status for a file when using `uploadStrategy="custom"`.
+ *
+ * - `progress`: `0..1` during upload, or a state (`queued`, `done`, `error`, `canceled`)
+ * - `showProgress`: if false, UI uses indeterminate "Laster opp..." style instead of progress bar
+ * - `lastProgress`: used to render a "failed at X%" bar when an upload errors
+ */
+declare type TFileTransfer = {
+    fileId: TFileId;
+    progress: number | 'done' | 'error' | 'canceled' | 'queued';
+    errorMessage?: string;
+    showProgress?: boolean;
+    lastProgress?: number;
+};
+
+/**
+ * Custom renderer for how a queue item is displayed (e.g. filename vs thumbnail grid).
+ *
+ * Must return a renderable React element (or `null`).
+ */
+declare type TItemRenderer = (props: {
+    transferItem: TFileAndTransfer;
+    queueItemOperations: Array<TQueueItemOperation>;
+    onPreviewClick?: () => void;
+}) => ReactElement | null;
+
 declare type TPktAccordionSkin = TAccordionSkin;
 
 declare type TPktAccordionSkin_2 = TAccordionSkin;
 
+/** Factory that produces a queue item operation given access to file attributes. */
+declare type TQueueItemExtension = (attributes: TFileAttributes) => TQueueItemOperation;
+
+/**
+ * An operation that can be attached to a queue item (rename, comment, remove, etc).
+ *
+ * An operation may:
+ * - be a simple action (`onClick`)
+ * - render inline UI (e.g. rename)
+ * - render extended UI (e.g. comments)
+ * - render hidden inputs for form submission (`renderHidden`)
+ */
+declare type TQueueItemOperation = {
+    title: string | ((fileItem: FileItem) => string);
+    ariaLabel?: string | ((fileItem: FileItem) => string);
+    onClick?: (transferItem: FileItem) => void;
+    renderInlineUI?: (fileItem: FileItem, closeOperationUi: () => void) => ReactNode;
+    renderExtendedUI?: (fileItem: FileItem, closeOperationUi: () => void) => ReactNode;
+    renderContent?: (fileItem: FileItem, activateOperation?: () => void, isOperationActive?: boolean) => ReactNode;
+    renderHidden?: (fileItem: FileItem) => ReactNode;
+    symbol: symbol;
+};
+
 declare type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light';
 
 declare type TSkin_2 = IPktTag['skin'];
 
 declare type TStepStatus = 'completed' | 'incomplete' | 'current';
 
+/** Upload mode: `form` posts the files on submit, `custom` posts file IDs and uploads separately. */
+declare type TUploadStrategy = 'custom' | 'form';
+
 /** User object for header components */
 declare interface User {
     name: string;