@oslokommune/punkt-react 16.13.3 → 16.15.0

package/src/components/fileupload/extensions/Comments.tsx

@@ -2,17 +2,19 @@ import { useContext, useLayoutEffect, useRef } from 'react'
 
 import { PktButton } from '../../button/Button'
 import { PktIcon } from '../../icon/Icon'
-import { TFileAttributes, FileItem, PktFileUploadContext, TQueueItemOperation } from '../types'
 import { PktTextarea } from '../../textarea/Textarea'
+import { FileItem, PktFileUploadContext, TQueueItemOperation, TQueueOperationContext } from '../types'
 
-const COMMENT_SYMBOL = Symbol('comment')
+const COMMENTS_ATTRIBUTE = 'comments'
 
 export interface IComment {
   text: string
-  timestamp: Date
+  timestamp: string
 }
 
-const formatTimestamp = (date: Date): string => {
+const formatTimestamp = (iso: string): string => {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return iso
   const day = String(date.getDate()).padStart(2, '0')
   const month = String(date.getMonth() + 1).padStart(2, '0')
   const year = date.getFullYear()
@@ -23,11 +25,13 @@ const formatTimestamp = (date: Date): string => {
 
 const AddComment = ({
   fileItem,
+  disabled,
   closeOperationUi,
   onAddComment,
   existingComment,
 }: {
   fileItem: FileItem
+  disabled: boolean
   closeOperationUi: () => void
   onAddComment: (comment: IComment) => void
   existingComment?: IComment
@@ -38,10 +42,7 @@ const AddComment = ({
   const handleAddComment = () => {
     const text = inputRef.current?.value?.trim()
     if (text) {
-      onAddComment({
-        text,
-        timestamp: new Date(),
-      })
+      onAddComment({ text, timestamp: new Date().toISOString() })
     }
     closeOperationUi()
   }
@@ -62,127 +63,114 @@ const AddComment = ({
         rows={2}
         id={`comment-${fileItem.fileId}`}
         ref={inputRef}
+        disabled={disabled}
         defaultValue={existingComment?.text}
       />
 
-      <PktButton skin="secondary" size="small" onClick={handleAddComment}>
+      <PktButton skin="secondary" size="small" disabled={disabled} onClick={handleAddComment}>
         {isEditing ? 'Lagre kommentar' : 'Legg til kommentar'}
       </PktButton>
-      <PktButton skin="tertiary" size="small" onClick={closeOperationUi}>
+      <PktButton skin="tertiary" size="small" disabled={disabled} onClick={closeOperationUi}>
         Avbryt
       </PktButton>
     </>
   )
 }
 
-const ShowComments = ({
-  comments,
+const ShowComment = ({
+  comment,
+  disabled,
   onDeleteComment,
   onEditComment,
 }: {
-  comments?: IComment[]
-  onDeleteComment?: (index: number) => void
-  onEditComment?: (index: number) => void
-}) =>
-  comments && comments.length > 0 ? (
-    <div className="pkt-fileupload__queue-display__item__comments">
-      {comments.map((comment, index) => (
-        <div key={index} className="pkt-fileupload__queue-display__item__comment">
-          <div className="pkt-fileupload__queue-display__item__comment__content">
-            <span className="pkt-fileupload__queue-display__item__comment__text" aria-label="Kommentar tekst">
-              {comment.text}
-            </span>
-            <time className="pkt-fileupload__queue-display__item__comment__time">
-              {formatTimestamp(comment.timestamp)}
-            </time>
-          </div>
-          <div className="pkt-fileupload__queue-display__item__comment__actions">
-            {onDeleteComment && (
-              <button
-                type="button"
-                className="pkt-fileupload__queue-display__item__comment__action"
-                onClick={() => onDeleteComment(index)}
-                aria-label="Slett kommentar"
-              >
-                <PktIcon name="trash-can" />
-              </button>
-            )}
-            {onEditComment && (
-              <button
-                type="button"
-                className="pkt-fileupload__queue-display__item__comment__action"
-                onClick={() => onEditComment(index)}
-                aria-label="Rediger kommentar"
-              >
-                <PktIcon name="edit" />
-              </button>
-            )}
-          </div>
-        </div>
-      ))}
+  comment: IComment
+  disabled: boolean
+  onDeleteComment: () => void
+  onEditComment: () => void
+}) => (
+  <div className="pkt-fileupload__queue-display__item__comments">
+    <div className="pkt-fileupload__queue-display__item__comment">
+      <div className="pkt-fileupload__queue-display__item__comment__content">
+        <span className="pkt-fileupload__queue-display__item__comment__text" aria-label="Kommentar tekst">
+          {comment.text}
+        </span>
+        <time className="pkt-fileupload__queue-display__item__comment__time">
+          {formatTimestamp(comment.timestamp)}
+        </time>
+      </div>
+      <div className="pkt-fileupload__queue-display__item__comment__actions">
+        <button
+          type="button"
+          className="pkt-fileupload__queue-display__item__comment__action"
+          onClick={onEditComment}
+          disabled={disabled}
+          aria-label="Rediger kommentar"
+        >
+          <PktIcon name="edit" />
+        </button>
+        <button
+          type="button"
+          className="pkt-fileupload__queue-display__item__comment__action"
+          onClick={onDeleteComment}
+          disabled={disabled}
+          aria-label="Slett kommentar"
+        >
+          <PktIcon name="trash-can" />
+        </button>
+      </div>
     </div>
-  ) : null
+  </div>
+)
 
-const CommentHiddenInput = (props: { comments: IComment[] | undefined }) => {
+const CommentHiddenInput = ({ comments }: { comments: IComment[] | undefined }) => {
   const context = useContext(PktFileUploadContext)
   return (
     <input
       type="hidden"
       name={`${context.name}-comments`}
-      value={props.comments ? JSON.stringify(props.comments) : ''}
+      value={comments ? JSON.stringify(comments) : ''}
     />
   )
 }
 
-export const addCommentOperation = (attributes: TFileAttributes): TQueueItemOperation => {
-  const commentsAttribute = attributes<IComment[]>('comments')
-
-  const addComment = (fileId: string, newComment: IComment) => {
-    commentsAttribute.set(fileId, [newComment])
-  }
-
-  const deleteComment = (fileId: string, commentIndex: number) => {
-    const existingComments = commentsAttribute.get(fileId) || []
-    const newComments = existingComments.filter((_, i) => i !== commentIndex)
-    commentsAttribute.set(fileId, newComments.length > 0 ? newComments : undefined)
-  }
-
-  return {
-    // Only show button text when no comment exists yet
-    title: (fileItem: FileItem) => {
-      const comments = commentsAttribute.get(fileItem.fileId)
-      // If comment exists, return empty string to hide the button (icons are shown in renderContent)
-      if (comments && comments.length > 0) return ''
-      return 'Legg til kommentar'
-    },
-    renderExtendedUI: (fileItem: FileItem, closeOperationUi: () => void) => {
-      const existingComments = commentsAttribute.get(fileItem.fileId)
-      const existingComment = existingComments?.[0]
-      return (
-        <AddComment
-          fileItem={fileItem}
-          closeOperationUi={closeOperationUi}
-          onAddComment={(comment) => addComment(fileItem.fileId, comment)}
-          existingComment={existingComment}
-        />
-      )
-    },
-    renderContent: (fileItem: FileItem, activateOperation?: () => void, isOperationActive?: boolean) => {
-      // Hide comment preview when editing
-      if (isOperationActive) return null
-
-      const comments = commentsAttribute.get(fileItem.fileId)
-      return (
-        <ShowComments
-          comments={comments}
-          onDeleteComment={(index) => deleteComment(fileItem.fileId, index)}
-          onEditComment={activateOperation ? () => activateOperation() : undefined}
-        />
-      )
-    },
-    renderHidden: (fileItem: FileItem) => (
-      <CommentHiddenInput key={`comments${fileItem.fileId}`} comments={commentsAttribute.get(fileItem.fileId)} />
-    ),
-    symbol: COMMENT_SYMBOL,
-  }
+const getComments = (context: TQueueOperationContext): IComment[] =>
+  context.getAttribute<IComment[]>(COMMENTS_ATTRIBUTE) ?? []
+
+export const addCommentOperation: TQueueItemOperation = {
+  id: 'comment',
+  title: (fileItem) => {
+    const comments = (fileItem.attributes?.[COMMENTS_ATTRIBUTE] as IComment[] | undefined) ?? []
+    return comments.length > 0 ? '' : 'Legg til kommentar'
+  },
+  ariaLabel: 'Legg til kommentar',
+  renderExtendedUI: (context) => {
+    const existingComment = getComments(context)[0]
+    return (
+      <AddComment
+        fileItem={context.file}
+        disabled={context.disabled}
+        closeOperationUi={context.close}
+        onAddComment={(comment) => {
+          context.setAttribute(COMMENTS_ATTRIBUTE, [comment])
+        }}
+        existingComment={existingComment}
+      />
+    )
+  },
+  renderContent: (context) => {
+    if (context.isActive) return null
+    const comment = getComments(context)[0]
+    if (!comment) return null
+    return (
+      <ShowComment
+        comment={comment}
+        disabled={context.disabled}
+        onEditComment={context.activate}
+        onDeleteComment={() => context.setAttribute(COMMENTS_ATTRIBUTE, undefined)}
+      />
+    )
+  },
+  renderHidden: (context) => (
+    <CommentHiddenInput key={`comments${context.file.fileId}`} comments={context.getAttribute<IComment[]>(COMMENTS_ATTRIBUTE)} />
+  ),
 }

package/src/components/fileupload/extensions/Remove.tsx

@@ -1,10 +1,8 @@
-import { TFileId, FileItem, TQueueItemOperation } from '@/components/fileupload/types'
-
-const DELETE_SYMBOL = Symbol('deleteFile')
+import type { TFileId, TQueueItemOperation } from '@/components/fileupload/types'
 
 export const removeFileOperation = (onFileRemoved: (fileId: TFileId) => void): TQueueItemOperation => ({
+  id: 'remove',
   title: 'Slett',
   ariaLabel: 'Slett fil',
-  onClick: (fileItem: FileItem) => onFileRemoved(fileItem.fileId),
-  symbol: DELETE_SYMBOL,
+  onClick: ({ file }) => onFileRemoved(file.fileId),
 })

package/src/components/fileupload/extensions/Rename.tsx

@@ -1,17 +1,22 @@
 import { useContext, useId, useRef } from 'react'
 
+import { getDisplayFilename } from 'shared-utils/fileupload'
+
 import { PktButton } from '../../button/Button'
-import { TFileAttributes, FileItem, PktFileUploadContext, TQueueItemOperation } from '../types'
+import { PktFileUploadContext, TQueueItemOperation, TQueueOperationContext } from '../types'
 
-const RENAME_SYMBOL = Symbol('renameFile')
+interface IRenameFileProps {
+  initialValue: string
+  disabled: boolean
+  onSave: (newName: string) => void
+  onCancel: () => void
+}
 
-const RenameFile = (props: { value: string | undefined; onSave: (newName: string) => void; onCancel: () => void }) => {
+const RenameFile = ({ initialValue, disabled, onSave, onCancel }: IRenameFileProps) => {
   const inputRef = useRef<HTMLInputElement>(null)
   const inputId = useId()
 
-  const save = () => {
-    props.onSave(inputRef.current?.value ?? '')
-  }
+  const save = () => onSave(inputRef.current?.value ?? '')
 
   return (
     <>
@@ -23,57 +28,55 @@ const RenameFile = (props: { value: string | undefined; onSave: (newName: string
         ref={inputRef}
         type="text"
         autoFocus
-        defaultValue={props.value}
+        disabled={disabled}
+        defaultValue={initialValue}
         className="pkt-fileupload__queue-display__item__rename-input"
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault()
-            e.stopPropagation()
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault()
+            event.stopPropagation()
             save()
           }
-          if (e.key === 'Escape') {
-            e.preventDefault()
-            e.stopPropagation()
-            props.onCancel()
+          if (event.key === 'Escape') {
+            event.preventDefault()
+            event.stopPropagation()
+            onCancel()
           }
         }}
       />
-      <PktButton skin="secondary" size="small" onClick={() => props.onSave(inputRef.current!.value)}>
+      <PktButton skin="secondary" size="small" disabled={disabled} onClick={save}>
         Lagre
       </PktButton>
-      <PktButton skin="tertiary" size="small" onClick={props.onCancel}>
+      <PktButton skin="tertiary" size="small" disabled={disabled} onClick={onCancel}>
         Avbryt
       </PktButton>
     </>
   )
 }
 
-const RenameHiddenInput = (props: { targetFilename: string }) => {
+const RenameHiddenInput = ({ targetFilename }: { targetFilename: string }) => {
   const context = useContext(PktFileUploadContext)
-  return <input type="hidden" name={`${context.name}-targetFilename`} value={props.targetFilename} />
+  return <input type="hidden" name={`${context.name}-targetFilename`} value={targetFilename} />
 }
 
-export const renameFileOperation = (attributes: TFileAttributes): TQueueItemOperation => {
-  const targetFilenameAttribute = attributes<string>('targetFilename')
-  return {
-    title: 'Rediger',
-    ariaLabel: 'Rediger filnavn',
-    renderInlineUI: (fileItem: FileItem, closeOperationUi: () => void) => (
-      <RenameFile
-        value={targetFilenameAttribute.get(fileItem.fileId) || undefined}
-        onSave={(newName: string) => {
-          targetFilenameAttribute.set(fileItem.fileId, newName)
-          closeOperationUi()
-        }}
-        onCancel={closeOperationUi}
-      />
-    ),
-    renderHidden: (fileItem: FileItem) => (
-      <RenameHiddenInput
-        key={`rename${fileItem.fileId}`}
-        targetFilename={targetFilenameAttribute.get(fileItem.fileId) || fileItem.file.name}
-      />
-    ),
-    symbol: RENAME_SYMBOL,
-  }
+const resolveCurrentName = (context: TQueueOperationContext) =>
+  context.getAttribute<string>('targetFilename') || getDisplayFilename(context.file, '')
+
+export const renameFileOperation: TQueueItemOperation = {
+  id: 'rename',
+  title: 'Rediger',
+  ariaLabel: 'Rediger filnavn',
+  renderInlineUI: (context) => (
+    <RenameFile
+      initialValue={resolveCurrentName(context)}
+      disabled={context.disabled}
+      onSave={(newName: string) => {
+        const trimmed = newName.trim()
+        if (trimmed) context.setAttribute('targetFilename', trimmed)
+        context.close()
+      }}
+      onCancel={context.close}
+    />
+  ),
+  renderHidden: (context) => <RenameHiddenInput key={`rename${context.file.fileId}`} targetFilename={resolveCurrentName(context)} />,
 }

package/src/components/fileupload/hooks/index.ts

@@ -1,3 +1,4 @@
 export { useFileAttributes } from './useFileAttributes'
 export { useImagePreview } from './useImagePreview'
 export { useOperationState } from './useOperationState'
+export { useRequiredFormValidation } from './useRequiredFormValidation'

package/src/components/fileupload/hooks/useFileAttributes.ts

@@ -1,46 +1,54 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 
-import { TFileAttributes, TFileId, FileItem, TFileItemList } from '../types'
+import { FileItem, TFileAttributes, TFileId, TFileItemList, TQueueOperationContext } from '../types'
 
+/**
+ * Build accessors that let queue-item operations read and write per-file
+ * attributes without ever mutating the current `value` list. All changes are
+ * propagated via `onFileUpdated`, so controlled parents stay authoritative.
+ */
 export const useFileAttributes = (
   value: TFileItemList,
-  onFileUpdated: (TFileId: TFileId, updates: Partial<FileItem>) => void,
+  onFileUpdated: (fileId: TFileId, updates: Partial<FileItem>) => void,
 ) => {
+  const getAttributeForFile = useCallback(
+    <T>(fileId: TFileId, attributeName: string): T | undefined => {
+      const fileItem = value.find((file) => file.fileId === fileId)
+      return fileItem?.attributes?.[attributeName] as T | undefined
+    },
+    [value],
+  )
+
   const setAttributeForFile = useCallback(
-    (TFileId: TFileId, attributeName: string, attributeValue: any) => {
-      const fileItem = value.find((file) => file.fileId === TFileId)!
-      const attributes = fileItem.attributes || {}
-      fileItem.attributes = {
-        ...attributes,
-        [attributeName]: attributeValue,
+    (fileId: TFileId, attributeName: string, attributeValue: unknown) => {
+      const fileItem = value.find((file) => file.fileId === fileId)
+      if (!fileItem) return
+      const nextAttributes = { ...fileItem.attributes, [attributeName]: attributeValue }
+      if (attributeValue === undefined) {
+        delete nextAttributes[attributeName]
       }
-      onFileUpdated(TFileId, { attributes: fileItem.attributes })
+      onFileUpdated(fileId, { attributes: nextAttributes as FileItem['attributes'] })
     },
     [onFileUpdated, value],
   )
 
-  const getAttributeForFile = useCallback(
-    (fileId: TFileId, attributeName: string): any | undefined => {
-      const fileItem = value.find((file) => file.fileId === fileId)!
-      const attributes = fileItem.attributes || {}
-      return attributes[attributeName]
-    },
-    [value],
+  const fileAttributes: TFileAttributes = useMemo(
+    () =>
+      <T>(attributeName: string) => ({
+        get: (fileId: TFileId) => getAttributeForFile<T>(fileId, attributeName),
+        set: (fileId: TFileId, attributeValue: T | undefined) =>
+          setAttributeForFile(fileId, attributeName, attributeValue),
+      }),
+    [getAttributeForFile, setAttributeForFile],
   )
 
-  const fileAttributes: TFileAttributes = useCallback(
-    <T>(attributeName: string) => {
-      return {
-        get: (fileId: TFileId): T | undefined => {
-          return getAttributeForFile(fileId, attributeName)
-        },
-        set: (fileId: TFileId, attributeValue: T | undefined) => {
-          setAttributeForFile(fileId, attributeName, attributeValue)
-        },
-      }
-    },
+  const buildAttributeAccessors = useCallback(
+    (fileId: TFileId): Pick<TQueueOperationContext, 'getAttribute' | 'setAttribute'> => ({
+      getAttribute: <T>(name: string) => getAttributeForFile<T>(fileId, name),
+      setAttribute: (name, attributeValue) => setAttributeForFile(fileId, name, attributeValue),
+    }),
     [getAttributeForFile, setAttributeForFile],
   )
 
-  return { fileAttributes } as const
+  return { fileAttributes, buildAttributeAccessors } as const
 }

package/src/components/fileupload/hooks/useImagePreview.ts

@@ -1,5 +1,7 @@
 import { useCallback, useRef, useState } from 'react'
 
+import { navigateCyclic } from 'shared-utils/fileupload'
+
 import { TFileAndTransfer, TFileId } from '../types'
 
 export const useImagePreview = (previewableImages: TFileAndTransfer[]) => {
@@ -27,13 +29,7 @@ export const useImagePreview = (previewableImages: TFileAndTransfer[]) => {
   const navigate = useCallback(
     (direction: 'prev' | 'next') => {
       if (previewableImages.length === 0) return
-
-      setCurrentIndex((prev) => {
-        if (direction === 'prev') {
-          return prev <= 0 ? previewableImages.length - 1 : prev - 1
-        }
-        return prev >= previewableImages.length - 1 ? 0 : prev + 1
-      })
+      setCurrentIndex((prev) => navigateCyclic(prev, direction, previewableImages.length))
     },
     [previewableImages.length],
   )

package/src/components/fileupload/hooks/useOperationState.ts

@@ -1,25 +1,46 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { TFileId, TQueueItemOperation } from '../types'
 
 export const useOperationState = (queueItemOperations: TQueueItemOperation[]) => {
-  const [activatedSymbols, setActivatedSymbols] = useState<Record<TFileId, symbol>>({})
+  const [activatedIds, setActivatedIds] = useState<Record<TFileId, string>>({})
+
+  // If an operation is removed from the list while still referenced as "activated",
+  // the stored id would re-activate a freshly-added operation with the same id
+  // (e.g. an extension re-mounted). Drop any stale entries on list changes so the
+  // activation state can never refer to an operation that no longer exists.
+  useEffect(() => {
+    setActivatedIds((prev) => {
+      const validIds = new Set(queueItemOperations.map((op) => op.id))
+      let changed = false
+      const next: Record<TFileId, string> = {}
+      for (const [fileId, opId] of Object.entries(prev)) {
+        if (validIds.has(opId)) {
+          next[fileId] = opId
+        } else {
+          changed = true
+        }
+      }
+      return changed ? next : prev
+    })
+  }, [queueItemOperations])
 
   const getActivated = useCallback(
     (fileId: TFileId): TQueueItemOperation | undefined => {
-      const symbol = activatedSymbols[fileId]
-      if (!symbol) return undefined
-      return queueItemOperations.find((op) => op.symbol === symbol)
+      const id = activatedIds[fileId]
+      if (!id) return undefined
+      return queueItemOperations.find((op) => op.id === id)
     },
-    [activatedSymbols, queueItemOperations],
+    [activatedIds, queueItemOperations],
   )
 
   const activate = useCallback((fileId: TFileId, operation: TQueueItemOperation) => {
-    setActivatedSymbols((prev) => ({ ...prev, [fileId]: operation.symbol }))
+    setActivatedIds((prev) => ({ ...prev, [fileId]: operation.id }))
   }, [])
 
   const close = useCallback((fileId: TFileId) => {
-    setActivatedSymbols((prev) => {
+    setActivatedIds((prev) => {
+      if (!(fileId in prev)) return prev
       const updated = { ...prev }
       delete updated[fileId]
       return updated

package/src/components/fileupload/hooks/useRequiredFormValidation.ts

@@ -0,0 +1,43 @@
+import { RefObject, useEffect } from 'react'
+
+/**
+ * When `uploadStrategy="custom"` and the upload is marked `required`, the
+ * native `required` attribute can't do the work (the input isn't posted).
+ * This hook attaches a submit listener to the containing `<form>` that
+ * prevents submission if the queue is empty, and surfaces a validation
+ * error via `onMissingFiles`.
+ *
+ * Passive in `form` strategy — native validation handles that case.
+ */
+export const useRequiredFormValidation = (
+  fileInputRef: RefObject<HTMLInputElement>,
+  {
+    uploadStrategy,
+    required,
+    currentFileCount,
+    onMissingFiles,
+  }: {
+    uploadStrategy: 'form' | 'custom'
+    required: boolean
+    currentFileCount: number
+    onMissingFiles: () => void
+  },
+) => {
+  useEffect(() => {
+    if (uploadStrategy !== 'custom' || !required) return
+    const input = fileInputRef.current
+    const form = input?.form
+    if (!form) return
+
+    const handleFormSubmit = (event: SubmitEvent) => {
+      if (currentFileCount > 0) return
+      event.preventDefault()
+      onMissingFiles()
+    }
+
+    form.addEventListener('submit', handleFormSubmit)
+    return () => {
+      form.removeEventListener('submit', handleFormSubmit)
+    }
+  }, [fileInputRef, uploadStrategy, required, currentFileCount, onMissingFiles])
+}

package/src/components/fileupload/hooks.ts

@@ -2,3 +2,4 @@
 export { useFileAttributes } from './hooks/useFileAttributes'
 export { useImagePreview } from './hooks/useImagePreview'
 export { useOperationState } from './hooks/useOperationState'
+export { useRequiredFormValidation } from './hooks/useRequiredFormValidation'