@oslokommune/punkt-react 15.3.0 → 15.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "15.3.0",
+  "version": "15.4.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": "^15.2.0",
+    "@oslokommune/punkt-elements": "^15.4.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": "^15.0.0",
-    "@oslokommune/punkt-css": "^15.2.0",
+    "@oslokommune/punkt-css": "^15.4.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": "0730d5feffa4c8d274daad9c7317dcf82b0f5b4f"
+  "gitHead": "0323bc56dc8636595ea48dd88dd966d363aac371"
 }

package/src/components/fileupload/DropZone.tsx

@@ -16,6 +16,8 @@ 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.
  *
@@ -61,7 +63,7 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
       onFilesAdded = () => {},
       name,
       uploadStrategy,
-      accept = '.pdf, .jpeg, .jpg, .png, .heic, .doc, .docx, .odt',
+      accept,
       isThumbnailView = false,
       disabled = false,
       srAnnouncementIds,
@@ -71,9 +73,18 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
   ) => {
     const fileInputRef = useRef<HTMLInputElement>(null)
 
+    const resolvedAccept = typeof accept === 'string' && accept.trim().length > 0 ? accept : undefined
     const acceptedFormatsReadableString = useMemo(
-      () => (accept?.split(/\s*,\s*/).map((format) => format.trim()) || []).join(', ').toUpperCase(),
-      [accept],
+      () =>
+        resolvedAccept
+          ? resolvedAccept
+              .split(/\s*,\s*/)
+              .map((format) => format.trim())
+              .filter(Boolean)
+              .join(', ')
+              .toUpperCase()
+          : DEFAULT_FORMATS_HELP_TEXT,
+      [resolvedAccept],
     )
 
     useImperativeHandle(forwardedRef, () => fileInputRef.current! as HTMLInputElement)
@@ -181,7 +192,7 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
           ref={fileInputRef}
           multiple={multiple}
           onChange={filesSelectedInDialog}
-          accept={accept}
+          accept={resolvedAccept}
           disabled={disabled}
           name={(uploadStrategy === 'form' && name) || undefined} // Ikke sett name hvis uploadStrategy er 'custom' - ignorerer ved POST
           aria-label={multiple ? 'Velg filer' : 'Velg fil'}

package/src/components/fileupload/FileUpload.tsx

@@ -240,6 +240,21 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
 
     const itemRenderer = typeof itemRendererProp === 'string' ? ItemRenderers[itemRendererProp] : itemRendererProp
     const isThumbnailView = itemRendererProp === 'thumbnail'
+    const explicitAccept = typeof props.accept === 'string' ? props.accept.trim() : undefined
+    const acceptFromAllowedFormats = useMemo(() => {
+      if (!allowedFormats || allowedFormats.length === 0) return undefined
+      return allowedFormats
+        .map((format) => format.trim())
+        .filter(Boolean)
+        .map((format) => {
+          const normalized = format.toLowerCase()
+          if (normalized.includes('/')) return normalized
+          if (normalized.startsWith('.')) return normalized
+          return `.${normalized}`
+        })
+        .join(', ')
+    }, [allowedFormats])
+    const resolvedAcceptForDropZone = explicitAccept || acceptFromAllowedFormats
 
     const effectiveRenameEnabled = renameFilesEnabled && !isThumbnailView
     const effectiveCommentsEnabled = addCommentsEnabled && !isThumbnailView
@@ -375,7 +390,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
             multiple={multiple}
             uploadStrategy={uploadStrategy}
             ref={forwardedRef}
-            accept={isThumbnailView ? '.jpeg, .jpg, .png, .gif, .webp, .heic' : props.accept}
+            accept={isThumbnailView ? '.jpeg, .jpg, .png, .gif, .webp, .heic' : resolvedAcceptForDropZone}
             isThumbnailView={isThumbnailView}
             disabled={disabled}
             srAnnouncementIds={srAnnouncementIds}
@@ -390,6 +405,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
             cancelTransfer={onFileRemoved}
             truncateTail={truncateTail}
             transfers={transfers}
+            uploadStrategy={uploadStrategy}
             ItemRenderer={itemRenderer}
             enableImagePreview={isThumbnailView && enableImagePreview}
             queueItemOperations={queueItemExtensions
@@ -411,7 +427,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
           hasError={hasError}
           optionalTag={optionalTag}
           requiredTag={requiredTag}
-          className="pkt-fileupload-wrapper"
+          className={classNames('pkt-fileupload-wrapper', { 'pkt-fileupload-wrapper--full-width': fullWidth })}
         >
           {fileUploadContent}
         </PktInputWrapper>

package/src/components/fileupload/QueueDisplay.tsx

@@ -7,6 +7,11 @@ import { FilenameRenderer, ImagePreviewModal, ThumbnailRenderer } from './Subcom
 import { TruncateContext } from './Truncate'
 import { TFileAndTransfer, FileItem, TFileItemList, TFileTransfer, TItemRenderer, TQueueItemOperation } from './types'
 
+const isImageFile = (item: TFileAndTransfer): boolean => {
+  if (item.file.type?.startsWith('image/')) return true
+  return /\.(jpe?g|png|gif|webp|heic|heif|bmp|svg)$/i.test(item.file.name || '')
+}
+
 // ============================================
 // Helper: Transform files with transfer status
 // ============================================
@@ -19,13 +24,17 @@ import { TFileAndTransfer, FileItem, TFileItemList, TFileTransfer, TItemRenderer
  * - then errors
  * - then everything else
  */
-const useFilesAndTransfers = (files: TFileItemList, transfers: TFileTransfer[]): TFileAndTransfer[] => {
+const useFilesAndTransfers = (
+  files: TFileItemList,
+  transfers: TFileTransfer[],
+  uploadStrategy: 'form' | 'custom',
+): TFileAndTransfer[] => {
   return useMemo(() => {
     const mapped = files.map((fileItem: FileItem) => {
       const transfer = transfers.find((t) => t.fileId === fileItem.fileId)
       return {
         ...fileItem,
-        progress: transfer?.progress ?? 'queued',
+        progress: transfer?.progress ?? (uploadStrategy === 'form' ? 'done' : 'queued'),
         errorMessage: transfer?.errorMessage,
         showProgress: transfer?.showProgress,
         lastProgress: transfer?.lastProgress,
@@ -35,7 +44,7 @@ const useFilesAndTransfers = (files: TFileItemList, transfers: TFileTransfer[]):
     // Sort order: in-progress first, then errors, then the rest
     const priority = { 'in-progress': 0, error: 1, idle: 2 } as const
     return mapped.sort((a, b) => priority[getProgressState(a.progress)] - priority[getProgressState(b.progress)])
-  }, [files, transfers])
+  }, [files, transfers, uploadStrategy])
 }
 
 // ============================================
@@ -46,7 +55,7 @@ const useFilesAndTransfers = (files: TFileItemList, transfers: TFileTransfer[]):
 const usePreviewableImages = (filesAndTransfers: TFileAndTransfer[], enabled: boolean): TFileAndTransfer[] => {
   return useMemo(() => {
     if (!enabled) return []
-    return filesAndTransfers.filter((item) => item.progress === 'done' && item.file.type.startsWith('image/'))
+    return filesAndTransfers.filter((item) => item.progress === 'done' && isImageFile(item))
   }, [filesAndTransfers, enabled])
 }
 
@@ -74,6 +83,8 @@ interface IQueueDisplay {
   truncateTail?: number
   /** Enable image preview modal (only affects thumbnail view). */
   enableImagePreview?: boolean
+  /** Upload mode decides default queue state when no transfer exists. */
+  uploadStrategy?: 'form' | 'custom'
 }
 
 // ============================================
@@ -88,9 +99,10 @@ export const QueueDisplay: FC<IQueueDisplay> = ({
   ItemRenderer = FilenameRenderer,
   truncateTail,
   enableImagePreview = false,
+  uploadStrategy = 'form',
 }) => {
   // Transform data
-  const filesAndTransfers = useFilesAndTransfers(files, transfers)
+  const filesAndTransfers = useFilesAndTransfers(files, transfers, uploadStrategy)
   const previewableImages = usePreviewableImages(filesAndTransfers, enableImagePreview)
 
   // State management

package/src/components/fileupload/QueueItemContent.tsx

@@ -4,6 +4,11 @@ import { PktIcon } from '..'
 import { OperationButton, TransferError, TransferInProgress } from './Subcomponents'
 import { TFileAndTransfer, TFileId, TItemRenderer, TQueueItemOperation, TTransferItemInProgress } from './types'
 
+const isImageFile = (item: TFileAndTransfer): boolean => {
+  if (item.file.type?.startsWith('image/')) return true
+  return /\.(jpe?g|png|gif|webp|heic|heif|bmp|svg)$/i.test(item.file.name || '')
+}
+
 type TProgressState = 'in-progress' | 'error' | 'idle'
 
 export const getProgressState = (progress: TFileAndTransfer['progress']): TProgressState => {
@@ -170,8 +175,7 @@ export const QueueItemContent: FC<IQueueItemContent> = ({
   onOpenPreview,
 }) => {
   const state = getProgressState(transferItem.progress)
-  const isPreviewable =
-    enableImagePreview && transferItem.progress === 'done' && transferItem.file.type.startsWith('image/')
+  const isPreviewable = enableImagePreview && transferItem.progress === 'done' && isImageFile(transferItem)
 
   switch (state) {
     case 'in-progress':

package/src/components/index.ts

@@ -11,6 +11,7 @@ export { PktCombobox } from './combobox/Combobox'
 export { PktConsent } from './consent/Consent'
 export { PktDatepicker } from './datepicker/Datepicker'
 export { PktFileUpload } from './fileupload/FileUpload'
+export { ItemRenderers } from './fileupload/QueueDisplay'
 export { PktFooter } from './footer/Footer'
 export { PktFooterSimple } from './footerSimple/FooterSimple'
 export { PktHeader } from './header/Header'
@@ -43,3 +44,4 @@ export { PktTag } from './tag/Tag'
 export { PktTextarea } from './textarea/Textarea'
 export { PktTextinput } from './textinput/Textinput'
 export * from './interfaces'
+export * from './types'

package/src/components/types.ts

@@ -0,0 +1,14 @@
+export { FileItem } from './fileupload/types'
+export type {
+  TFileAndTransfer,
+  TFileAttribute,
+  TFileAttributes,
+  TFileId,
+  TFileItemList,
+  TFileTransfer,
+  TItemRenderer,
+  TQueueItemExtension,
+  TQueueItemOperation,
+  TTransferItemInProgress,
+  TUploadStrategy,
+} from './fileupload/types'