@oslokommune/punkt-react 16.13.3 → 16.15.0

package/src/components/fileupload/FileUpload.tsx

@@ -27,35 +27,39 @@ import {
   useState,
 } from 'react'
 
+import { defaultFileUploadStrings } from 'shared-types'
+import {
+  countFileTransferStates,
+  resolveAcceptAttribute,
+  THUMBNAIL_ACCEPT,
+  validateFile as sharedValidateFile,
+} from 'shared-utils/fileupload'
+
 import { PktAlert } from '../alert/Alert'
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 import { DropZone } from './DropZone'
 import { addCommentOperation } from './extensions/Comments'
 import { removeFileOperation } from './extensions/Remove'
 import { renameFileOperation } from './extensions/Rename'
-import { useFileAttributes } from './hooks'
+import { useFileAttributes, useRequiredFormValidation } from './hooks'
 import { ItemRenderers, QueueDisplay } from './QueueDisplay'
 import {
   TFileId,
   FileItem,
   TFileItemList,
   TFileTransfer,
+  TFileValidateDetail,
   TItemRenderer,
   PktFileUploadContext,
-  TQueueItemExtension,
+  TQueueItemOperation,
   TUploadStrategy,
 } from './types'
-import { formatFileSize, parseFileSize } from './utils'
 
 // Re-export for external use
-export { formatFileSize, parseFileSize } from './utils'
+export { formatFileSize, parseFileSize } from 'shared-utils/fileupload'
 
 /**
  * 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)
  */
 interface IBaseFileUploadProps
   extends Omit<
@@ -88,9 +92,9 @@ interface IBaseFileUploadProps
   /** Uncontrolled initial value (use either `value` or `defaultValue`, not both). */
   defaultValue?: TFileItemList
   /** Extra operations appended after built-ins (rename/comment). */
-  extraOperations?: Array<TQueueItemExtension>
+  extraOperations?: Array<TQueueItemOperation>
   /** Stretch to full container width (drop zone + queue). */
-  fullWidth?: boolean
+  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. */
@@ -101,6 +105,11 @@ interface IBaseFileUploadProps
   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). */
@@ -121,21 +130,13 @@ interface IBaseFileUploadProps
   enableImagePreview?: boolean
 }
 
-/** Props for `uploadStrategy="form"` (native file input submission). */
 interface IFileInputFileUploadProps
   extends IBaseFileUploadProps,
-  Omit<HTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> {
+    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
- */
 interface ImmediateFileUploadProps extends IBaseFileUploadProps {
   id: string
   uploadStrategy: 'custom'
@@ -156,17 +157,18 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
       uploadStrategy = 'form',
       addCommentsEnabled = false,
       renameFilesEnabled = false,
-      truncateTail,
+      truncateTail = 4,
       onFilesChanged,
       onFileUploadRequested,
       extraOperations = [],
       itemRenderer: itemRendererProp = ItemRenderers.filename,
-      fullWidth = false,
+      fullwidth = false,
       allowedFormats,
       formatErrorMessage,
-      maxFileSize, // default to 5 MB
+      maxFileSize,
       sizeErrorMessage,
       onFileValidation,
+      onFileValidate,
       errorMessage: externalErrorMessage,
       hasError: externalHasError = false,
       disabled = false,
@@ -189,64 +191,41 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
 
     const transfers = 'transfers' in props ? props.transfers : undefined
     const [validationError, setValidationError] = useState<string | null>(null)
+    const [addedAnnouncement, setAddedAnnouncement] = useState('')
+
+    useEffect(() => {
+      if (!addedAnnouncement) return
+      const t = setTimeout(() => setAddedAnnouncement(''), 1500)
+      return () => clearTimeout(t)
+    }, [addedAnnouncement])
 
-    // Combine external error with internal validation error
-    const hasError = externalHasError || !!validationError
-    const errorMessage = externalErrorMessage || validationError
+    const errorMessage = validationError ?? externalErrorMessage ?? null
+    const hasError = externalHasError || !!validationError || !!(externalErrorMessage && externalErrorMessage.trim())
     const errorMessageId = errorMessage ? `${id}-error` : undefined
     const helptextId = helptext ? `${id}-helptext` : undefined
     const describedBy = [ariaDescribedByProp, helptextId, errorMessageId].filter(Boolean).join(' ') || undefined
     const isAriaInvalid = hasError || ariaInvalidProp === true || ariaInvalidProp === 'true'
 
-    // Parse maxFileSize once (supports "5MB" strings or raw bytes)
-    const maxFileSizeBytes = maxFileSize ? parseFileSize(maxFileSize) : undefined
-
-    // Built-in validation function
     const validateFile = useCallback(
       (file: File): string | null => {
-        // 1. Check format if allowedFormats is specified
-        if (allowedFormats && allowedFormats.length > 0) {
-          const fileExtension = file.name.split('.').pop()?.toLowerCase() || ''
-          const fileMimeType = file.type.toLowerCase()
-
-          const isAllowed = allowedFormats.some((format) => {
-            const normalizedFormat = format.toLowerCase().replace(/^\./, '') // Remove leading dot if present
-
-            // Check MIME type patterns (e.g. 'image/*', 'application/pdf')
-            if (normalizedFormat.includes('/')) {
-              if (normalizedFormat.endsWith('/*')) {
-                const category = normalizedFormat.replace('/*', '')
-                return fileMimeType.startsWith(category + '/')
-              }
-              return fileMimeType === normalizedFormat
-            }
-
-            // Check file extension (e.g. 'pdf', 'jpg', '.png')
-            return fileExtension === normalizedFormat
-          })
-
-          if (!isAllowed) {
-            const formatsDisplay = allowedFormats.join(', ')
-            const defaultMessage = `Ugyldig filtype. Tillatte formater: ${formatsDisplay}`
-            return formatErrorMessage?.replace('{formats}', formatsDisplay) || defaultMessage
-          }
-        }
-
-        // 2. Check file size if maxFileSize is specified
-        if (maxFileSizeBytes && file.size > maxFileSizeBytes) {
-          const maxSizeDisplay = formatFileSize(maxFileSizeBytes)
-          const defaultMessage = `Filen er for stor. Maks størrelse er ${maxSizeDisplay}.`
-          return sizeErrorMessage?.replace('{maxSize}', maxSizeDisplay) || defaultMessage
-        }
+        const baseError = sharedValidateFile(file, {
+          allowedFormats,
+          maxFileSize,
+          formatErrorMessage,
+          sizeErrorMessage,
+          onFileValidation,
+        })
+        if (baseError) return baseError
 
-        // 3. Run custom validation if provided
-        if (onFileValidation) {
-          return onFileValidation(file)
+        if (onFileValidate) {
+          const detail: TFileValidateDetail = { file, errorMessage: null }
+          onFileValidate(detail)
+          if (detail.errorMessage) return detail.errorMessage
         }
 
         return null
       },
-      [allowedFormats, formatErrorMessage, maxFileSizeBytes, sizeErrorMessage, onFileValidation],
+      [allowedFormats, formatErrorMessage, maxFileSize, sizeErrorMessage, onFileValidation, onFileValidate],
     )
 
     if (valueProp !== undefined && defaultValue !== undefined) {
@@ -263,168 +242,120 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
     }
 
     const isControlled = valueProp !== undefined
-    const value = isControlled ? valueProp : defaultValue || []
+    const [internalValue, setInternalValue] = useState<TFileItemList>(() => defaultValue ?? [])
+    const value = isControlled ? (valueProp as TFileItemList) : internalValue
 
-    useEffect(() => {
-      if (uploadStrategy !== 'custom' || !required) return
-      const input = fileInputRef.current
-      const form = input?.form
-      if (!form) return
-
-      const handleFormSubmit = (event: SubmitEvent) => {
-        if (value.length > 0) return
-        event.preventDefault()
-        setValidationError('Velg minst én fil før du sender inn skjemaet.')
-      }
-
-      form.addEventListener('submit', handleFormSubmit)
-      return () => {
-        form.removeEventListener('submit', handleFormSubmit)
-      }
-    }, [required, uploadStrategy, value.length])
+    useRequiredFormValidation(fileInputRef, {
+      uploadStrategy,
+      required,
+      currentFileCount: value.length,
+      onMissingFiles: useCallback(() => setValidationError(defaultFileUploadStrings.requiredMissing), []),
+    })
 
     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 resolvedAcceptForDropZone = useMemo(() => {
+      const resolved = resolveAcceptAttribute(explicitAccept, allowedFormats)
+      return resolved || undefined
+    }, [explicitAccept, allowedFormats])
 
     const effectiveRenameEnabled = renameFilesEnabled && !isThumbnailView
     const effectiveCommentsEnabled = addCommentsEnabled && !isThumbnailView
 
     const onFilesAdded = useCallback(
       (addedFileItems: TFileItemList) => {
-        // Run validation on each file
         for (const fileItem of addedFileItems) {
           const error = validateFile(fileItem.file)
           if (error) {
             setValidationError(error)
-            return // Don't add any files if validation fails
+            return
           }
         }
 
-        // Clear any previous validation error
         setValidationError(null)
 
         const newValue: TFileItemList = multiple ? [...value, ...addedFileItems] : [addedFileItems[0]]
 
-        if (onFilesChanged) {
-          onFilesChanged(newValue)
-        }
+        const acceptedItems: TFileItemList = multiple ? addedFileItems : [addedFileItems[0]]
+        setAddedAnnouncement(
+          acceptedItems.length === 1
+            ? defaultFileUploadStrings.srFileAdded(acceptedItems[0].attributes.targetFilename)
+            : defaultFileUploadStrings.srFilesAdded(acceptedItems.length),
+        )
+
+        if (!isControlled) setInternalValue(newValue)
+        onFilesChanged?.(newValue)
+
         if (uploadStrategy === 'custom' && onFileUploadRequested) {
           addedFileItems.forEach((fileItem) => {
             onFileUploadRequested?.(fileItem)
           })
         }
       },
-      [onFilesChanged, value, multiple, uploadStrategy, onFileUploadRequested, validateFile],
+      [onFilesChanged, value, multiple, uploadStrategy, onFileUploadRequested, validateFile, isControlled],
     )
 
     const onFileUpdated = useCallback(
       (fileId: TFileId, updates: Partial<FileItem>) => {
         const newValue = value.map((fileItem) => (fileItem.fileId === fileId ? { ...fileItem, ...updates } : fileItem))
-        if (onFilesChanged) {
-          onFilesChanged(newValue)
-        }
+        if (!isControlled) setInternalValue(newValue)
+        onFilesChanged?.(newValue)
       },
-      [onFilesChanged, value],
+      [onFilesChanged, value, isControlled],
     )
 
     const onFileRemoved = useCallback(
       (fileId: TFileId) => {
         const newValue = value.filter((fileItem) => fileItem.fileId !== fileId)
-        if (onFilesChanged) {
-          onFilesChanged(newValue)
-        }
+        if (!isControlled) setInternalValue(newValue)
+        onFilesChanged?.(newValue)
         if ('onTransferCancelled' in props && props.onTransferCancelled) {
           props.onTransferCancelled?.(fileId)
         }
       },
-      [onFilesChanged, value, props],
-    )
-
-    const { fileAttributes } = useFileAttributes(value, onFileUpdated)
-
-    const queueItemExtensions = useMemo(
-      () =>
-        [
-          {
-            op: renameFileOperation,
-            enabled: effectiveRenameEnabled,
-          },
-          {
-            op: (attributes: Parameters<typeof addCommentOperation>[0]) => addCommentOperation(attributes),
-            enabled: effectiveCommentsEnabled,
-          },
-        ]
-          .filter(({ enabled }) => enabled)
-          .map(({ op }) => op)
-          .concat(...extraOperations),
-      [effectiveRenameEnabled, effectiveCommentsEnabled],
-    )
-
-    // Screen reader announcement IDs
-    const srAnnouncementIds = useMemo(
-      () => ({
-        uploaded: `${id}-uploaded`,
-        errors: `${id}-errors`,
-      }),
-      [id],
+      [onFilesChanged, value, props, isControlled],
     )
 
-    // Compute counts for screen reader announcements.
-    // F.eks. "1 av 3 filer lastet opp" eller "2 av 3 filer feilet"
-    const { totalCount, uploadedCount, failedCount } = useMemo(() => {
-      const totalCount = value.length
-      if (!transfers) {
-        return { totalCount, uploadedCount: 0, failedCount: 0 }
-      }
-
-      let uploadedCount = 0
-      let failedCount = 0
+    const { buildAttributeAccessors } = useFileAttributes(value, onFileUpdated)
 
-      for (const fileItem of value) {
-        const transfer = transfers.find((t) => t.fileId === fileItem.fileId)
-        if (transfer?.progress === 'done') uploadedCount++
-        if (transfer?.progress === 'error') failedCount++
-      }
+    const queueItemOperations = useMemo<TQueueItemOperation[]>(() => {
+      const operations: TQueueItemOperation[] = []
+      if (effectiveRenameEnabled) operations.push(renameFileOperation)
+      if (effectiveCommentsEnabled) operations.push(addCommentOperation)
+      operations.push(...extraOperations)
+      operations.push(removeFileOperation(onFileRemoved))
+      return operations
+    }, [effectiveRenameEnabled, effectiveCommentsEnabled, extraOperations, onFileRemoved])
 
-      return { totalCount, uploadedCount, failedCount }
-    }, [value, transfers])
+    const { totalCount, uploadedCount, failedCount } = useMemo(
+      () => countFileTransferStates(value, transfers),
+      [value, transfers],
+    )
 
-    const totalLabel = totalCount === 1 ? 'fil' : 'filer'
+    const totalLabel = defaultFileUploadStrings.fileLabel(totalCount)
 
     const fileUploadContent = (
       <div
         className={classNames('pkt-fileupload', {
-          'pkt-fileupload--full-width': fullWidth,
+          'pkt-fileupload--full-width': fullwidth,
           'pkt-fileupload--error': hasError,
           'pkt-fileupload--disabled': disabled,
         })}
         aria-disabled={disabled}
-        {...(disabled ? { inert: '' as any } : {})}
+        {...(disabled ? { inert: '' } : {})}
       >
         <PktFileUploadContext.Provider value={{ name: props.name || '', multiple: !!multiple, id }}>
-          {/* Screen reader announcements - visually hidden */}
-          <div id={srAnnouncementIds.uploaded} className="pkt-sr-only" aria-live="polite" aria-atomic="true">
-            {totalCount > 0 && uploadedCount > 0 && `${uploadedCount} av ${totalCount} ${totalLabel} lastet opp`}
+          <div className="pkt-sr-only" aria-live="polite" aria-atomic="true">
+            {addedAnnouncement ||
+              (totalCount > 0 && uploadedCount > 0
+                ? defaultFileUploadStrings.srFilesUploadedOfTotal(uploadedCount, totalCount, totalLabel)
+                : '')}
           </div>
-          <div id={srAnnouncementIds.errors} className="pkt-sr-only" aria-live="assertive" aria-atomic="true">
+          <div className="pkt-sr-only" aria-live="assertive" aria-atomic="true">
             {totalCount > 0 &&
               failedCount > 0 &&
-              `Feil ved opplasting: ${failedCount} av ${totalCount} ${totalLabel} feilet`}
+              defaultFileUploadStrings.srFilesFailedOfTotal(failedCount, totalCount, totalLabel)}
           </div>
 
           <DropZone
@@ -435,10 +366,9 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
             multiple={multiple}
             uploadStrategy={uploadStrategy}
             ref={fileInputRef}
-            accept={isThumbnailView ? '.jpeg, .jpg, .png, .gif, .webp, .heic' : resolvedAcceptForDropZone}
+            accept={isThumbnailView ? THUMBNAIL_ACCEPT : resolvedAcceptForDropZone}
             isThumbnailView={isThumbnailView}
             disabled={disabled}
-            srAnnouncementIds={srAnnouncementIds}
             required={required && uploadStrategy === 'form'}
             aria-required={required ? 'true' : undefined}
             aria-invalid={isAriaInvalid ? 'true' : undefined}
@@ -457,23 +387,25 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
               {errorMessage}
             </PktAlert>
           )}
-          <QueueDisplay
-            files={value}
-            cancelTransfer={onFileRemoved}
-            truncateTail={truncateTail}
-            transfers={transfers}
-            uploadStrategy={uploadStrategy}
-            ItemRenderer={itemRenderer}
-            enableImagePreview={isThumbnailView && enableImagePreview}
-            queueItemOperations={queueItemExtensions
-              .map((ext) => ext(fileAttributes))
-              .concat(removeFileOperation(onFileRemoved))}
-          />
+          {value.length > 0 && (
+            <QueueDisplay
+              files={value}
+              cancelTransfer={onFileRemoved}
+              truncateTail={truncateTail}
+              transfers={transfers}
+              uploadStrategy={uploadStrategy}
+              ItemRenderer={itemRenderer}
+              enableImagePreview={isThumbnailView && enableImagePreview}
+              disabled={disabled}
+              inputName={props.name || ''}
+              buildAttributeAccessors={buildAttributeAccessors}
+              queueItemOperations={queueItemOperations}
+            />
+          )}
         </PktFileUploadContext.Provider>
       </div>
     )
 
-    // Wrap with InputWrapper if label is provided
     if (label) {
       return (
         <PktInputWrapper
@@ -484,7 +416,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
           hasError={hasError}
           optionalTag={optionalTag}
           requiredTag={requiredTag}
-          className={classNames('pkt-fileupload-wrapper', { 'pkt-fileupload-wrapper--full-width': fullWidth })}
+          className={classNames('pkt-fileupload-wrapper', { 'pkt-fileupload-wrapper--full-width': fullwidth })}
         >
           {fileUploadContent}
         </PktInputWrapper>

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

@@ -24,14 +24,16 @@ const createMockFile = (name: string, type = 'text/plain'): File => new File(['c
 const createFileItem = (name: string, fileId?: string) => new FileItem(createMockFile(name), fileId)
 
 const expectVisibleFilename = (filename: string) => {
-  // Truncate renders a hidden measuring element with the same text.
-  // We assert against the visible "first" part to avoid duplicate matches.
-  expect(
-    screen.getByText(
-      (content, element) =>
-        content === filename && element?.getAttribute('data-pkt-truncate-part') === 'first',
-    ),
-  ).toBeInTheDocument()
+  // Truncate may render the filename as a single span (data-pkt-truncate-part="first")
+  // or as a head + tail pair when the name is long enough to split. Assemble the parts
+  // from each title element and assert the filename is found in at least one.
+  const titleElements = document.querySelectorAll('.pkt-fileupload__queue-display__item__title')
+  const reconstructed = Array.from(titleElements).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
+  })
+  expect(reconstructed).toContain(filename)
 }
 
 describe('QueueDisplay', () => {
@@ -219,4 +221,45 @@ describe('QueueDisplay', () => {
       expect(container.querySelector('.pkt-fileupload__queue-display__item__progress')).not.toBeInTheDocument()
     })
   })
+
+  describe('Sort order', () => {
+    it('renders queue items in the order: in-progress → error → done/queued', () => {
+      const initialValue: TFileItemList = [
+        createFileItem('done.pdf', 'done-1'),
+        createFileItem('failed.pdf', 'error-1'),
+        createFileItem('uploading.pdf', 'progress-1'),
+        createFileItem('queued.pdf', 'queued-1'),
+      ]
+      const transfers: TFileTransfer[] = [
+        { fileId: 'done-1', progress: 'done' },
+        { fileId: 'error-1', progress: 'error', errorMessage: 'failed' },
+        { fileId: 'progress-1', progress: 0.5, showProgress: true },
+        { fileId: 'queued-1', progress: 'queued' },
+      ]
+
+      const { container } = render(
+        <PktFileUpload
+          id="sort-order-test"
+          value={initialValue}
+          name="pktFileUpload"
+          uploadStrategy="custom"
+          onFileUploadRequested={vi.fn()}
+          transfers={transfers}
+          onFilesChanged={NOOP}
+        />,
+      )
+
+      // Reconstruct each filename from head + tail spans (middle-truncation may split it).
+      const queueItems = Array.from(
+        container.querySelectorAll<HTMLElement>('.pkt-fileupload__queue-display__item'),
+      )
+      const visibleNames = queueItems.map((item) => {
+        const head = item.querySelector<HTMLElement>('[data-pkt-truncate-part="first"]')?.textContent ?? ''
+        const tail = item.querySelector<HTMLElement>('[data-pkt-truncate-part="tail"]')?.textContent ?? ''
+        return (head + tail).trim()
+      })
+
+      expect(visibleNames).toEqual(['uploading.pdf', 'failed.pdf', 'done.pdf', 'queued.pdf'])
+    })
+  })
 })