@oslokommune/punkt-react 16.13.3 → 16.15.0

package/src/components/fileupload/types.ts

@@ -1,5 +1,13 @@
 import { createContext, ReactElement, ReactNode } from 'react'
 
+import type {
+  IFileItem,
+  IFileTransfer,
+  IFileValidateDetail,
+  TFileUploadStrategy,
+  TTransferProgress,
+} from 'shared-types'
+
 import { uuidish } from '../../utils/stringutils'
 
 /** Unique identifier assigned to each selected file. */
@@ -11,11 +19,13 @@ export type TFileId = string
  * 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).
+ *
+ * Implements the shared `IFileItem` type from `shared-types`.
  */
-export class FileItem implements FileItem {
+export class FileItem implements IFileItem {
   fileId: TFileId
   file: File
-  attributes: Record<string, any> = {}
+  attributes: { targetFilename: string } & Record<string, unknown>
 
   constructor(file: File, fileId?: TFileId) {
     this.fileId = fileId || uuidish()
@@ -33,51 +43,58 @@ export const PktFileUploadContext = createContext<TPktFileUploadContext>({} as T
 /** 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)
-}
+/** Transfer status for a file when using `uploadStrategy="custom"` — aliased from `shared-types`. */
+export type TFileTransfer = IFileTransfer
 
 /** Upload mode: `form` posts the files on submit, `custom` posts file IDs and uploads separately. */
-export type TUploadStrategy = 'custom' | 'form'
+export type TUploadStrategy = TFileUploadStrategy
+
+/** Detail payload passed to the React `onFileValidate` escape hatch. */
+export type TFileValidateDetail = IFileValidateDetail
+
+/** Re-export for parity with Lit types. */
+export type { TTransferProgress }
+
 export type TFileAttribute<T> = {
   get: (fileId: TFileId) => T | undefined
   set: (fileId: TFileId, attributeValue: T | undefined) => void
 }
 export type TFileAttributes = <T>(attributeName: string) => TFileAttribute<T>
 
+/**
+ * Context passed to queue-item operations. Mirrors the Lit
+ * `TQueueOperationContext` so operations authored for one runtime are
+ * trivial to port to the other.
+ */
+export type TQueueOperationContext = {
+  file: FileItem
+  inputName: string
+  disabled: boolean
+  isActive: boolean
+  activate: () => void
+  close: () => void
+  getAttribute: <T>(name: string) => T | undefined
+  setAttribute: (name: string, value: unknown) => void
+}
+
+export type TQueueOperationLabel = string | ((fileItem: FileItem) => string)
+
 /**
  * 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`)
+ * Must carry a stable `id: string` — symbols are no longer supported.
  */
 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
+  id: string
+  title: TQueueOperationLabel
+  ariaLabel?: TQueueOperationLabel
+  onClick?: (context: TQueueOperationContext) => void
+  renderInlineUI?: (context: TQueueOperationContext) => ReactNode
+  renderExtendedUI?: (context: TQueueOperationContext) => ReactNode
+  renderContent?: (context: TQueueOperationContext) => ReactNode
+  renderHidden?: (context: TQueueOperationContext) => ReactNode
 }
 
-/** 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 }

package/src/components/fileupload/utils.ts

@@ -1,56 +1,5 @@
 /**
- * Utility functions for the FileUpload component
+ * Re-export of the shared fileupload utilities.
+ * Kept as a file entry so existing `import { parseFileSize } from './utils'` paths keep working.
  */
-
-/**
- * Parse a file size string (e.g. "5MB", "500KB") to bytes.
- * Also accepts raw numbers (returned as-is).
- *
- * @example
- * parseFileSize("5MB")    // 5242880
- * parseFileSize("500KB")  // 512000
- * parseFileSize("1GB")    // 1073741824
- * parseFileSize(1024)     // 1024
- */
-export const parseFileSize = (size: string | number): number => {
-  if (typeof size === 'number') return size
-
-  const match = size.trim().match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)$/i)
-  if (!match) {
-    console.warn(
-      `PktFileUpload: Invalid maxFileSize format "${size}". Use format like "5MB", "500KB", or a number in bytes.`,
-    )
-    return 0
-  }
-
-  const value = parseFloat(match[1])
-  const unit = match[2].toUpperCase()
-
-  switch (unit) {
-    case 'B':
-      return value
-    case 'KB':
-      return value * 1024
-    case 'MB':
-      return value * 1024 * 1024
-    case 'GB':
-      return value * 1024 * 1024 * 1024
-    default:
-      return value
-  }
-}
-
-/**
- * Format bytes to a human-readable string (e.g. "5 MB", "500 KB").
- *
- * @example
- * formatFileSize(5242880)  // "5 MB"
- * formatFileSize(512000)   // "500 KB"
- * formatFileSize(500)      // "500 B"
- */
-export const formatFileSize = (bytes: number): string => {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`
-  if (bytes < 1024 * 1024 * 1024) return `${Math.round(bytes / (1024 * 1024))} MB`
-  return `${Math.round(bytes / (1024 * 1024 * 1024))} GB`
-}
+export { parseFileSize, formatFileSize } from 'shared-utils/fileupload'

package/src/components/inputwrapper/InputWrapper.tsx

@@ -2,6 +2,7 @@
 
 import { ForwardedRef, forwardRef, type ReactNode, RefAttributes, useState } from 'react'
 
+import { useFocusModality } from '../../hooks/useFocusModality'
 import { PktAlert } from '../alert/Alert'
 import { PktButton } from '../button/Button'
 
@@ -64,6 +65,8 @@ export const PktInputWrapper = forwardRef(
   ) => {
     const [isHelpTextOpen, setIsHelpTextOpen] = useState(false)
 
+    const focusModality = useFocusModality<HTMLDivElement>(ref)
+
     const describedBy = ariaDescribedby || (helptext ? `${forId}-helptext` : undefined)
     const showCounter = !!counter
     const counterTop = showCounter && counterPosition === 'top'
@@ -189,7 +192,7 @@ export const PktInputWrapper = forwardRef(
     )
 
     return (
-      <div className={wrapperClasses} ref={ref} role={role}>
+      <div className={wrapperClasses} role={role} {...focusModality}>
         {hasFieldset ? (
           <fieldset className="pkt-inputwrapper__fieldset" aria-describedby={describedBy}>
             {content}

package/src/components/modal/Modal.tsx

@@ -5,6 +5,7 @@ import {
   ForwardedRef,
   forwardRef,
   HTMLAttributes,
+  MutableRefObject,
   ReactNode,
   Ref,
   useCallback,
@@ -51,18 +52,29 @@ export const PktModal = forwardRef(
     }: IPktModal,
     ref: ForwardedRef<HTMLDialogElement>,
   ) => {
-    const internalRef = useRef<HTMLDialogElement>(null)
-    const dialogRef = (ref as React.RefObject<HTMLDialogElement>) || internalRef
+    const internalRef = useRef<HTMLDialogElement | null>(null)
+
+    // Merge consumer ref + internal ref so we always have a working DOM handle
+    // for our own logic, regardless of whether the consumer passes a callback ref
+    // or an object ref (or nothing).
+    const setDialogRef = useCallback(
+      (node: HTMLDialogElement | null) => {
+        internalRef.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) (ref as MutableRefObject<HTMLDialogElement | null>).current = node
+      },
+      [ref],
+    )
 
     const close = useCallback(() => {
-      if (!dialogRef.current?.open) return
-      dialogRef.current?.close()
+      if (!internalRef.current?.open) return
+      internalRef.current.close()
       onClose?.()
-    }, [dialogRef, onClose])
+    }, [onClose])
 
     // Synkroniser scroll-lock med dialogens faktiske åpen/lukket-tilstand
     useEffect(() => {
-      const dialog = dialogRef.current
+      const dialog = internalRef.current
       if (!dialog) return
 
       const observer = new MutationObserver(() => {
@@ -74,28 +86,28 @@ export const PktModal = forwardRef(
       })
       observer.observe(dialog, { attributes: true, attributeFilter: ['open'] })
       return () => observer.disconnect()
-    }, [dialogRef])
+    }, [])
 
     // Deklarativ åpne/lukke via open-prop
     useEffect(() => {
       if (open) {
-        if (!dialogRef.current?.open) {
-          dialogRef.current?.showModal()
+        if (!internalRef.current?.open) {
+          internalRef.current?.showModal()
         }
       } else {
-        if (dialogRef.current?.open) {
-          dialogRef.current?.close()
+        if (internalRef.current?.open) {
+          internalRef.current.close()
         }
       }
-    }, [open, dialogRef])
+    }, [open])
 
     const handleBackdropClick = useCallback(
       (event: React.MouseEvent<HTMLDialogElement>) => {
-        if (closeOnBackdropClick && event.target === dialogRef.current) {
+        if (closeOnBackdropClick && event.target === internalRef.current) {
           close()
         }
       },
-      [closeOnBackdropClick, dialogRef, close],
+      [closeOnBackdropClick, close],
     )
 
     const handleNativeClose = useCallback(() => {
@@ -122,7 +134,7 @@ export const PktModal = forwardRef(
       <dialog
         {...props}
         className={classes}
-        ref={dialogRef}
+        ref={setDialogRef}
         aria-labelledby={headingText ? 'pkt-modal__headingText' : undefined}
         aria-describedby="pkt-modal__content"
         onClick={handleBackdropClick}

package/src/components/searchinput/SearchInput.tsx

@@ -2,6 +2,7 @@
 
 import { ChangeEvent, createElement, forwardRef, HTMLProps, ReactNode } from 'react'
 
+import { useFocusModality } from '../../hooks/useFocusModality'
 import { PktButton } from '../button/Button'
 
 interface SearchSuggestion {
@@ -74,22 +75,22 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
       fullwidth ? 'pkt-searchinput--fullwidth' : ''
     }`
 
-    let WrapperElement
-    if (action) {
-      // eslint-disable-next-line react/display-name
-      WrapperElement = (children: ReactNode) => (
-        <form role="search" className={wrapperClass} action={action} method={method}>
+    const focusModality = useFocusModality()
+
+    const wrapperProps = {
+      role: 'search',
+      className: wrapperClass,
+      ...focusModality,
+    }
+
+    const WrapperElement = (children: ReactNode) =>
+      action ? (
+        <form {...wrapperProps} action={action} method={method}>
           {children}
         </form>
+      ) : (
+        <div {...wrapperProps}>{children}</div>
       )
-    } else {
-      // eslint-disable-next-line react/display-name
-      WrapperElement = (children: ReactNode) => (
-        <div role="search" className={wrapperClass}>
-          {children}
-        </div>
-      )
-    }
 
     return WrapperElement(
       <>

package/src/components/types.ts

@@ -7,8 +7,8 @@ export type {
   TFileItemList,
   TFileTransfer,
   TItemRenderer,
-  TQueueItemExtension,
   TQueueItemOperation,
+  TQueueOperationContext,
   TTransferItemInProgress,
   TUploadStrategy,
 } from './fileupload/types'

package/src/components/fileupload/texts.ts

@@ -1,20 +0,0 @@
-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',
-}