@oslokommune/punkt-react 15.0.3 → 15.1.0

package/src/components/fileupload/Truncate.tsx

@@ -0,0 +1,137 @@
+import {
+  createContext,
+  HTMLAttributes,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+const MAX_LINES = 2
+
+const getLineHeightPx = (element: HTMLElement): number => {
+  const style = window.getComputedStyle(element)
+  const lineHeight = parseFloat(style.lineHeight)
+  if (!Number.isNaN(lineHeight) && lineHeight > 0) return lineHeight
+
+  // `line-height: normal` fallback (approx. 1.2 * font-size)
+  const fontSize = parseFloat(style.fontSize)
+  return (!Number.isNaN(fontSize) && fontSize > 0 ? fontSize : 16) * 1.2
+}
+
+const elementOverflowsLines = (measureEl: HTMLElement, lineHeightPx: number, maxLines: number): boolean => {
+  const maxHeight = lineHeightPx * maxLines
+  const height = measureEl.getBoundingClientRect().height
+  return height > maxHeight + 0.5
+}
+
+export interface IMiddleTruncate extends HTMLAttributes<HTMLSpanElement> {
+  children: string
+  tail?: number
+}
+
+type TTruncateContext = { tail: number | undefined }
+export const TruncateContext = createContext<TTruncateContext>({ tail: 5 })
+
+export const Truncate = ({ children, tail: tailProp, ...props }: IMiddleTruncate): JSX.Element => {
+  const firstPart = children
+  const context = useContext(TruncateContext)
+  const tail = tailProp !== undefined ? tailProp : context.tail || 0
+  const secondPart = children.length <= tail + 3 ? null : children.slice(-tail)
+  const showingSecondPart = secondPart !== null && tail > 0
+  const wrapperRef = useRef<HTMLSpanElement>(null)
+  const measureRef = useRef<HTMLSpanElement>(null)
+  const [isOverflowing, setIsOverflowing] = useState(false)
+
+  const computeOverflow = useCallback(() => {
+    const wrapper = wrapperRef.current
+    const measureEl = measureRef.current
+    if (!wrapper || !measureEl) return
+
+    const lineHeightPx = getLineHeightPx(wrapper)
+    setIsOverflowing(elementOverflowsLines(measureEl, lineHeightPx, MAX_LINES))
+  }, [])
+
+  const resizeObserver = useMemo(() => {
+    return new ResizeObserver((entries) => {
+      if (entries.some((entry) => entry.target === wrapperRef.current)) {
+        computeOverflow()
+      }
+    })
+  }, [computeOverflow])
+  useLayoutEffect(() => {
+    if (wrapperRef.current) {
+      resizeObserver.observe(wrapperRef.current)
+    }
+    computeOverflow()
+    return () => resizeObserver.disconnect()
+  }, [children, resizeObserver, computeOverflow])
+  return (
+    <span
+      ref={wrapperRef}
+      {...props}
+      data-pkt-truncate-part="wrapper"
+      style={{
+        maxWidth: '100%',
+        width: '100%',
+        display: 'grid',
+        gridTemplateColumns: 'minmax(0, 1fr) auto',
+        alignItems: 'end',
+        columnGap: '0.25rem',
+        overflow: 'hidden',
+        position: 'relative',
+        ...props.style,
+      }}
+    >
+      <span
+        data-pkt-truncate-part="first"
+        style={{
+          minWidth: 0,
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          WebkitLineClamp: MAX_LINES,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'normal',
+          overflowWrap: 'anywhere',
+        }}
+      >
+        {firstPart}
+      </span>
+      {tail !== 0 && (
+        <span
+          data-pkt-truncate-part="tail"
+          style={{
+            whiteSpace: 'nowrap',
+            display: isOverflowing ? 'inline' : 'none',
+            paddingRight: '0.5rem',
+          }}
+          aria-hidden={true}
+        >
+          {secondPart}
+        </span>
+      )}
+
+      {/* Hidden measuring element (full text, wraps normally) */}
+      <span
+        ref={measureRef}
+        aria-hidden={true}
+        data-pkt-truncate-part="measure"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          visibility: 'hidden',
+          pointerEvents: 'none',
+          whiteSpace: 'normal',
+          overflowWrap: 'anywhere',
+        }}
+      >
+        {children}
+      </span>
+    </span>
+  )
+}

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

@@ -0,0 +1,188 @@
+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'
+
+const COMMENT_SYMBOL = Symbol('comment')
+
+export interface IComment {
+  text: string
+  timestamp: Date
+}
+
+const formatTimestamp = (date: Date): string => {
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = date.getFullYear()
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${day}.${month}.${year} kl. ${hours}:${minutes}`
+}
+
+const AddComment = ({
+  fileItem,
+  closeOperationUi,
+  onAddComment,
+  existingComment,
+}: {
+  fileItem: FileItem
+  closeOperationUi: () => void
+  onAddComment: (comment: IComment) => void
+  existingComment?: IComment
+}) => {
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  const isEditing = !!existingComment
+
+  const handleAddComment = () => {
+    const text = inputRef.current?.value?.trim()
+    if (text) {
+      onAddComment({
+        text,
+        timestamp: new Date(),
+      })
+    }
+    closeOperationUi()
+  }
+
+  useLayoutEffect(() => {
+    const t = setTimeout(() => inputRef.current?.focus({ preventScroll: true }), 0)
+    return () => clearTimeout(t)
+  }, [fileItem.fileId])
+
+  return (
+    <>
+      <PktTextarea
+        autoFocus
+        label={isEditing ? 'Rediger kommentar' : 'Legg til kommentar'}
+        name={`comment-${fileItem.fileId}`}
+        className="pkt-fileupload__queue-display__item__comment-input"
+        placeholder="Skriv inn kommentar"
+        rows={2}
+        id={`comment-${fileItem.fileId}`}
+        ref={inputRef}
+        defaultValue={existingComment?.text}
+      />
+
+      <PktButton skin="secondary" size="small" onClick={handleAddComment}>
+        {isEditing ? 'Lagre kommentar' : 'Legg til kommentar'}
+      </PktButton>
+      <PktButton skin="tertiary" size="small" onClick={closeOperationUi}>
+        Avbryt
+      </PktButton>
+    </>
+  )
+}
+
+const ShowComments = ({
+  comments,
+  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>
+      ))}
+    </div>
+  ) : null
+
+const CommentHiddenInput = (props: { comments: IComment[] | undefined }) => {
+  const context = useContext(PktFileUploadContext)
+  return (
+    <input
+      type="hidden"
+      name={`${context.name}-comments`}
+      value={props.comments ? JSON.stringify(props.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,
+  }
+}

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

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

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

@@ -0,0 +1,79 @@
+import { useContext, useId, useRef } from 'react'
+
+import { PktButton } from '../../button/Button'
+import { TFileAttributes, FileItem, PktFileUploadContext, TQueueItemOperation } from '../types'
+
+const RENAME_SYMBOL = Symbol('renameFile')
+
+const RenameFile = (props: { value: string | undefined; onSave: (newName: string) => void; onCancel: () => void }) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const inputId = useId()
+
+  const save = () => {
+    props.onSave(inputRef.current?.value ?? '')
+  }
+
+  return (
+    <>
+      <label htmlFor={inputId} className="pkt-sr-only">
+        Endre filnavn
+      </label>
+      <input
+        id={inputId}
+        ref={inputRef}
+        type="text"
+        autoFocus
+        defaultValue={props.value}
+        className="pkt-fileupload__queue-display__item__rename-input"
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault()
+            e.stopPropagation()
+            save()
+          }
+          if (e.key === 'Escape') {
+            e.preventDefault()
+            e.stopPropagation()
+            props.onCancel()
+          }
+        }}
+      />
+      <PktButton skin="secondary" size="small" onClick={() => props.onSave(inputRef.current!.value)}>
+        Lagre
+      </PktButton>
+      <PktButton skin="tertiary" size="small" onClick={props.onCancel}>
+        Avbryt
+      </PktButton>
+    </>
+  )
+}
+
+const RenameHiddenInput = (props: { targetFilename: string }) => {
+  const context = useContext(PktFileUploadContext)
+  return <input type="hidden" name={`${context.name}-targetFilename`} value={props.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,
+  }
+}

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

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

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

@@ -0,0 +1,46 @@
+import { useCallback } from 'react'
+
+import { TFileAttributes, TFileId, FileItem, TFileItemList } from '../types'
+
+export const useFileAttributes = (
+  value: TFileItemList,
+  onFileUpdated: (TFileId: TFileId, updates: Partial<FileItem>) => void,
+) => {
+  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,
+      }
+      onFileUpdated(TFileId, { attributes: 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 = useCallback(
+    <T>(attributeName: string) => {
+      return {
+        get: (fileId: TFileId): T | undefined => {
+          return getAttributeForFile(fileId, attributeName)
+        },
+        set: (fileId: TFileId, attributeValue: T | undefined) => {
+          setAttributeForFile(fileId, attributeName, attributeValue)
+        },
+      }
+    },
+    [getAttributeForFile, setAttributeForFile],
+  )
+
+  return { fileAttributes } as const
+}

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

@@ -0,0 +1,42 @@
+import { useCallback, useRef, useState } from 'react'
+
+import { TFileAndTransfer, TFileId } from '../types'
+
+export const useImagePreview = (previewableImages: TFileAndTransfer[]) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const modalRef = useRef<HTMLDialogElement>(null)
+
+  const open = useCallback(
+    (fileId: TFileId) => {
+      const index = previewableImages.findIndex((item) => item.fileId === fileId)
+      if (index >= 0) {
+        setCurrentIndex(index)
+        setIsOpen(true)
+        modalRef.current?.showModal()
+      }
+    },
+    [previewableImages],
+  )
+
+  const close = useCallback(() => {
+    setIsOpen(false)
+    modalRef.current?.close()
+  }, [])
+
+  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
+      })
+    },
+    [previewableImages.length],
+  )
+
+  return { isOpen, currentIndex, modalRef, open, close, navigate }
+}

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

@@ -0,0 +1,30 @@
+import { useCallback, useState } from 'react'
+
+import { TFileId, TQueueItemOperation } from '../types'
+
+export const useOperationState = (queueItemOperations: TQueueItemOperation[]) => {
+  const [activatedSymbols, setActivatedSymbols] = useState<Record<TFileId, symbol>>({})
+
+  const getActivated = useCallback(
+    (fileId: TFileId): TQueueItemOperation | undefined => {
+      const symbol = activatedSymbols[fileId]
+      if (!symbol) return undefined
+      return queueItemOperations.find((op) => op.symbol === symbol)
+    },
+    [activatedSymbols, queueItemOperations],
+  )
+
+  const activate = useCallback((fileId: TFileId, operation: TQueueItemOperation) => {
+    setActivatedSymbols((prev) => ({ ...prev, [fileId]: operation.symbol }))
+  }, [])
+
+  const close = useCallback((fileId: TFileId) => {
+    setActivatedSymbols((prev) => {
+      const updated = { ...prev }
+      delete updated[fileId]
+      return updated
+    })
+  }, [])
+
+  return { getActivated, activate, close }
+}

package/src/components/fileupload/hooks.ts

@@ -0,0 +1,4 @@
+// Re-export all hooks from the hooks folder
+export { useFileAttributes } from './hooks/useFileAttributes'
+export { useImagePreview } from './hooks/useImagePreview'
+export { useOperationState } from './hooks/useOperationState'

package/src/components/fileupload/texts.ts

@@ -0,0 +1,20 @@
+export const uiMultipleTexts = {
+  dropFilesHere: 'Slipp filene her ...',
+  selectOrDragFiles: 'Dra filer hit for å laste dem opp eller ',
+  chooseFiles: 'velg filer',
+}
+export const uiSingleTexts: typeof uiMultipleTexts = {
+  dropFilesHere: 'Slipp filen her ...',
+  selectOrDragFiles: 'Dra en fil for å laste den opp eller ',
+  chooseFiles: 'velg en fil',
+}
+export const uiThumbnailMultipleTexts: typeof uiMultipleTexts = {
+  dropFilesHere: 'Slipp bildene her ...',
+  selectOrDragFiles: 'Dra bilder hit for å laste dem opp eller ',
+  chooseFiles: 'velg fra kamerarull',
+}
+export const uiThumbnailSingleTexts: typeof uiMultipleTexts = {
+  dropFilesHere: 'Slipp bildet her ...',
+  selectOrDragFiles: 'Dra et bilde for å laste det opp eller ',
+  chooseFiles: 'velg fra kamerarull',
+}

package/src/components/fileupload/types.ts

@@ -0,0 +1,94 @@
+import { createContext, ReactElement, ReactNode } from 'react'
+
+import { uuidish } from '../../utils/stringutils'
+
+/** Unique identifier assigned to each selected file. */
+export type TFileId = string
+
+/**
+ * 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).
+ */
+export class FileItem implements FileItem {
+  fileId: TFileId
+  file: File
+  attributes: Record<string, any> = {}
+
+  constructor(file: File, fileId?: TFileId) {
+    this.fileId = fileId || uuidish()
+    this.file = file
+    this.attributes = {
+      targetFilename: file.name,
+    }
+  }
+}
+
+/** Internal context used by queue item operations and hidden inputs. */
+export type TPktFileUploadContext = { name?: string; multiple: boolean; id?: string }
+export const PktFileUploadContext = createContext<TPktFileUploadContext>({} as TPktFileUploadContext)
+
+/** The value type for `PktFileUpload` (`value` / `defaultValue`). */
+export 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
+ */
+export type TFileTransfer = {
+  fileId: TFileId
+  progress: number | 'done' | 'error' | 'canceled' | 'queued' // i tilfelle number: 0-1
+  errorMessage?: string
+  showProgress?: boolean // true = show progress bar/file size, false = show "Laster opp..."/just error message
+  lastProgress?: number // Store progress value when error occurs (0-1)
+}
+
+/** Upload mode: `form` posts the files on submit, `custom` posts file IDs and uploads separately. */
+export type TUploadStrategy = 'custom' | 'form'
+export type TFileAttribute<T> = {
+  get: (fileId: TFileId) => T | undefined
+  set: (fileId: TFileId, attributeValue: T | undefined) => void
+}
+export type TFileAttributes = <T>(attributeName: string) => TFileAttribute<T>
+
+/**
+ * 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`)
+ */
+export 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
+}
+
+/** Factory that produces a queue item operation given access to file attributes. */
+export type TQueueItemExtension = (attributes: TFileAttributes) => TQueueItemOperation
+export type TFileAndTransfer = FileItem &
+  Pick<TFileTransfer, 'progress' | 'errorMessage' | 'showProgress' | 'lastProgress'>
+export type TTransferItemInProgress = TFileAndTransfer & { progress: number }
+
+/**
+ * Custom renderer for how a queue item is displayed (e.g. filename vs thumbnail grid).
+ *
+ * Must return a renderable React element (or `null`).
+ */
+export type TItemRenderer = (props: {
+  transferItem: TFileAndTransfer
+  queueItemOperations: Array<TQueueItemOperation>
+  onPreviewClick?: () => void
+}) => ReactElement | null