@byline/admin 6.3.0 → 6.5.0

package/src/fields/blocks/blocks-field.tsx

@@ -20,6 +20,7 @@ import {
   Card,
   CloseIcon,
   DraggableSortable,
+  ErrorText,
   IconButton,
   Modal,
   moveItem,
@@ -29,8 +30,9 @@ import cx from 'clsx'
 
 import { defaultScalarForField } from '../../fields/field-helpers'
 import { GroupField } from '../../fields/group/group-field'
-import { SortableItem } from '../../fields/sortable-item'
-import { useFormContext } from '../../forms/form-context'
+import { SortableItem, StaticItem } from '../../fields/sortable-item'
+import { useFieldError, useFormContext } from '../../forms/form-context'
+import { useScopedDomId } from '../../forms/form-dom-scope'
 import { hasExistingIdTargets } from '../../forms/nested-path'
 import { moveRepeatingItems, repeatingItemId, repeatingItemPath } from '../../forms/repeating-items'
 import styles from './blocks-field.module.css'
@@ -59,6 +61,8 @@ export const BlocksField = ({
   const { appendPatch, getFieldValue, getFieldValues, removePendingUploadsUnder, setFieldStore } =
     useFormContext()
   const { t } = useTranslation('byline-admin')
+  const fieldError = useFieldError(path)
+  const htmlId = useScopedDomId(path)
   const [items, setItems] = useState<{ id: string; data: any }[]>([])
   const [showAddBlockModal, setShowAddBlockModal] = useState(false)
   const [pendingInsertIndex, setPendingInsertIndex] = useState<number | null>(null)
@@ -121,6 +125,7 @@ export const BlocksField = ({
     moveFromIndex: number
     moveToIndex: number
   }) => {
+    if (field.readOnly) return
     const currentArray = (getFieldValue(path) ?? defaultValue) as any[]
     if (!Array.isArray(currentArray)) return
 
@@ -138,6 +143,7 @@ export const BlocksField = ({
   }
 
   const handleAddItem = async (forcedVariantName?: string, atIndex?: number) => {
+    if (field.readOnly) return
     setShowAddBlockModal(false)
     setPendingInsertIndex(null)
 
@@ -184,6 +190,7 @@ export const BlocksField = ({
   }
 
   const handleRemoveItem = (index: number) => {
+    if (field.readOnly) return
     const currentArray = (getFieldValue(path) ?? defaultValue) as any[]
     if (!Array.isArray(currentArray) || index < 0 || index >= currentArray.length) return
 
@@ -241,6 +248,7 @@ export const BlocksField = ({
             type: 'group',
             name: subField.blockType,
             fields: subField.fields,
+            readOnly: field.readOnly,
             label: undefined,
           } as GroupFieldType
         }
@@ -256,16 +264,17 @@ export const BlocksField = ({
       />
     )
 
+    const Item = field.readOnly ? StaticItem : SortableItem
     return (
-      <SortableItem
+      <Item
         key={itemWrapper.id}
         id={itemWrapper.id}
         label={label ?? subField.blockType}
-        onAddBelow={() => handleInsertBelow(index)}
-        onRemove={() => handleRemoveItem(index)}
+        onAddBelow={field.readOnly ? undefined : () => handleInsertBelow(index)}
+        onRemove={field.readOnly ? undefined : () => handleRemoveItem(index)}
       >
         {body}
-      </SortableItem>
+      </Item>
     )
   }
 
@@ -286,7 +295,7 @@ export const BlocksField = ({
               setPendingInsertIndex(null)
               setShowAddBlockModal(true)
             }}
-            disabled={!selectedBlockName}
+            disabled={field.readOnly || !selectedBlockName}
             aria-label={t('fields.blocks.addBlockAriaLabel')}
             variant="outlined"
           >
@@ -298,7 +307,7 @@ export const BlocksField = ({
           <button
             type="button"
             tabIndex={-1}
-            disabled={!selectedBlockName}
+            disabled={field.readOnly || !selectedBlockName}
             onClick={() => {
               setPendingInsertIndex(null)
               setShowAddBlockModal(true)
@@ -368,6 +377,7 @@ export const BlocksField = ({
           </Modal.Content>
         </Modal.Container>
       </Modal>
+      {fieldError && <ErrorText id={`${htmlId}-error`} text={fieldError} />}
     </div>
   )
 }

package/src/fields/checkbox/checkbox-field.tsx

@@ -37,6 +37,7 @@ export const CheckboxField = ({
   return (
     <div className={`byline-field-checkbox ${field.name} ${styles['field-checkbox']}`}>
       <Checkbox
+        disabled={field.readOnly}
         id={htmlId}
         name={field.name}
         label={field.label}

package/src/fields/datetime/datetime-field.tsx

@@ -39,6 +39,7 @@ export const DateTimeField = ({
   return (
     <div className={`byline-field-datetime ${field.name}`}>
       <DatePicker
+        disabled={field.readOnly}
         id={htmlId}
         name={field.name}
         label={field.label}

package/src/fields/file/file-field.tsx

@@ -110,6 +110,7 @@ export const FileField = ({
   const uploadGated = field.upload?.requireSavedDocument === true && documentId == null
 
   const handleRemove = () => {
+    if (field.readOnly) return
     if (isPending) {
       removePendingUpload(fieldPath)
     }
@@ -146,7 +147,7 @@ export const FileField = ({
           >
             {t('fields.upload.requireSavedDocument')}
           </div>
-        ) : collectionPath ? (
+        ) : collectionPath && !field.readOnly ? (
           <FileUploadField
             field={field}
             collectionPath={collectionPath}
@@ -195,7 +196,7 @@ export const FileField = ({
                 intent="noeffect"
                 onClick={handleRemove}
                 size="xs"
-                disabled={isUploading}
+                disabled={isUploading || field.readOnly}
                 aria-label={t('fields.file.removeAriaLabel')}
               >
                 <CloseIcon width="15px" height="15px" />

package/src/fields/group/group-field.tsx

@@ -72,7 +72,7 @@ export const GroupField = ({
   fieldAdmin,
 }: GroupFieldProps) => {
   const htmlId = useScopedDomId(path ?? field.name)
-  const fieldError = useFieldError(field.name)
+  const fieldError = useFieldError(path ?? field.name)
   // Default value for a group field is a plain object: { rating: 5, comment: '...' }
   // Normalize to a plain object if not already one.
   const groupData = useMemo(() => {
@@ -107,7 +107,7 @@ export const GroupField = ({
           return (
             <FieldRenderer
               key={innerField.name}
-              field={innerField}
+              field={field.readOnly ? { ...innerField, readOnly: true } : innerField}
               defaultValue={groupData[innerField.name]}
               basePath={path}
               disableSorting={disableSorting}

package/src/fields/image/image-field.tsx

@@ -104,6 +104,7 @@ export const ImageField = ({
 
   // Handle remove, including cleanup of pending uploads
   const handleRemove = () => {
+    if (field.readOnly) return
     if (isPending) {
       removePendingUpload(fieldPath)
     }
@@ -137,7 +138,7 @@ export const ImageField = ({
           >
             {t('fields.upload.requireSavedDocument')}
           </div>
-        ) : collectionPath ? (
+        ) : collectionPath && !field.readOnly ? (
           <ImageUploadField
             field={field}
             collectionPath={collectionPath}
@@ -170,7 +171,7 @@ export const ImageField = ({
                 intent="noeffect"
                 onClick={handleRemove}
                 size="xs"
-                disabled={isUploading}
+                disabled={isUploading || field.readOnly}
                 aria-label={t('fields.image.removeAriaLabel')}
               >
                 <CloseIcon width="15px" height="15px" />

package/src/fields/relation/relation-field.tsx

@@ -104,6 +104,7 @@ export const RelationField = ({
     targetCollectionId: string
     record?: Record<string, any>
   }) => {
+    if (field.readOnly) return
     setPickerOpen(false)
     if (selection.record) {
       setPickedRecord({ id: selection.targetDocumentId, record: selection.record })
@@ -117,6 +118,7 @@ export const RelationField = ({
   }
 
   const handleRemove = () => {
+    if (field.readOnly) return
     setPickedRecord(null)
     onChange?.(null)
   }
@@ -168,6 +170,7 @@ export const RelationField = ({
               />
               <div className={cx('byline-field-relation-actions', styles.actions)}>
                 <IconButton
+                  disabled={field.readOnly}
                   id={htmlId}
                   type="button"
                   intent="noeffect"
@@ -180,6 +183,7 @@ export const RelationField = ({
                   <EditIcon width="15px" height="15px" />
                 </IconButton>
                 <IconButton
+                  disabled={field.readOnly}
                   type="button"
                   intent="noeffect"
                   size="xs"
@@ -194,6 +198,7 @@ export const RelationField = ({
             </div>
           ) : (
             <Button
+              disabled={field.readOnly}
               id={htmlId}
               size="xs"
               variant="outlined"

package/src/fields/relation/relation-many-field.tsx

@@ -61,12 +61,20 @@ interface RelationManyTileProps {
   id: string
   children: ReactNode
   onRemove: () => void
+  readOnly?: boolean
   removeAriaLabel: string
 }
 
-const RelationManyTile = ({ id, children, onRemove, removeAriaLabel }: RelationManyTileProps) => {
+const RelationManyTile = ({
+  id,
+  children,
+  onRemove,
+  removeAriaLabel,
+  readOnly,
+}: RelationManyTileProps) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id,
+    disabled: readOnly,
     transition: { duration: 250, easing: 'cubic-bezier(0, 0.2, 0.2, 1)' },
   })
 
@@ -87,6 +95,7 @@ const RelationManyTile = ({ id, children, onRemove, removeAriaLabel }: RelationM
       )}
     >
       <button
+        disabled={readOnly}
         type="button"
         className={cx('byline-field-relation-many-grip', styles['many-grip'])}
         {...attributes}
@@ -96,6 +105,7 @@ const RelationManyTile = ({ id, children, onRemove, removeAriaLabel }: RelationM
       </button>
       <div className={cx('byline-field-relation-many-body', styles['many-body'])}>{children}</div>
       <IconButton
+        disabled={readOnly}
         type="button"
         size="xs"
         intent="noeffect"
@@ -152,6 +162,7 @@ export const RelationManyField = ({ field, defaultValue, id, path }: RelationMan
   }
 
   const handleAddMany = (selections: RelationPickerSelection[]) => {
+    if (field.readOnly) return
     setPickerOpen(false)
     const current = currentArray()
     // Dedup the batch against the current array — a target may appear at most
@@ -178,6 +189,7 @@ export const RelationManyField = ({ field, defaultValue, id, path }: RelationMan
   }
 
   const handleRemove = (targetDocumentId: string) => {
+    if (field.readOnly) return
     setFieldValue(
       fieldPath,
       currentArray().filter((v) => v.targetDocumentId !== targetDocumentId)
@@ -191,7 +203,7 @@ export const RelationManyField = ({ field, defaultValue, id, path }: RelationMan
     moveFromIndex: number
     moveToIndex: number
   }) => {
-    if (moveFromIndex === moveToIndex) return
+    if (field.readOnly || moveFromIndex === moveToIndex) return
     setFieldValue(fieldPath, moveItem(currentArray(), moveFromIndex, moveToIndex))
   }
 
@@ -235,6 +247,7 @@ export const RelationManyField = ({ field, defaultValue, id, path }: RelationMan
               >
                 {items.map((value) => (
                   <RelationManyTile
+                    readOnly={field.readOnly}
                     key={value.targetDocumentId}
                     id={value.targetDocumentId}
                     onRemove={() => handleRemove(value.targetDocumentId)}
@@ -254,6 +267,7 @@ export const RelationManyField = ({ field, defaultValue, id, path }: RelationMan
 
             <div className={cx('byline-field-relation-many-add', styles['many-add'])}>
               <Button
+                disabled={field.readOnly}
                 id={htmlId}
                 size="xs"
                 variant="outlined"

package/src/fields/select/select-field.tsx

@@ -48,6 +48,7 @@ export const SelectField = ({
         />
       )}
       <Select<string>
+        disabled={field.readOnly}
         size="xs"
         variant="outlined"
         id={htmlId}

package/src/fields/text/text-field.tsx

@@ -46,11 +46,11 @@ export const TextField = ({
 
   const handleChange = useCallback(
     (value: string) => {
-      if (onChange) {
+      if (onChange && !field.readOnly) {
         onChange(value)
       }
     },
-    [onChange]
+    [onChange, field.readOnly]
   )
 
   // Custom component slots (from admin config)
@@ -122,6 +122,7 @@ export const TextField = ({
     }
     return (
       <Input
+        readOnly={field.readOnly}
         id={htmlId}
         name={field.name}
         label={suppressInputLabel ? undefined : field.label}

package/src/fields/text-area/text-area-field.tsx

@@ -46,11 +46,11 @@ export const TextAreaField = ({
 
   const handleChange = useCallback(
     (value: string) => {
-      if (onChange) {
+      if (onChange && !field.readOnly) {
         onChange(value)
       }
     },
-    [onChange]
+    [onChange, field.readOnly]
   )
 
   // Custom component slots (from admin config)
@@ -122,6 +122,7 @@ export const TextAreaField = ({
     }
     return (
       <TextArea
+        readOnly={field.readOnly}
         id={htmlId}
         name={field.name}
         label={suppressInputLabel ? undefined : field.label}

package/src/fields/use-field-change-handler.ts

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 
-import { useCallback } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 
 import type { Field, FieldBeforeChangeResult, FieldHookContext } from '@byline/core'
 import { normalizeHooks } from '@byline/core'
@@ -28,11 +28,31 @@ import { useFormContext } from '../forms/form-context'
  * to `setFieldValue` (no promises, no extra allocations).
  */
 export function useFieldChangeHandler(field: Field, path: string) {
-  const { setFieldValue, getFieldValue, getFieldValues, setFieldError, clearFieldError } =
-    useFormContext()
+  const {
+    setFieldValue,
+    getFieldValue,
+    getFieldValues,
+    setFieldError,
+    clearFieldError,
+    trackFieldChange,
+  } = useFormContext()
+
+  const generation = useRef(0)
+  const releasePending = useRef<(() => void) | undefined>(undefined)
+  useEffect(
+    () => () => {
+      generation.current++
+      releasePending.current?.()
+    },
+    []
+  )
 
   return useCallback(
     (value: any) => {
+      releasePending.current?.()
+      const invocation = ++generation.current
+      if (field.readOnly) return
+      const current = () => invocation === generation.current
       const hooks = field.hooks
 
       // ── fast path: no hooks defined ────────────────────────────
@@ -56,7 +76,9 @@ export function useFieldChangeHandler(field: Field, path: string) {
         // Raw store write for cross-field behaviour (e.g. mutual exclusivity
         // across array items). Deliberately does not run the target field's
         // own hooks — see FieldHookContext.setFieldValue.
-        setFieldValue,
+        setFieldValue: (target, next) => {
+          if (current()) setFieldValue(target, next)
+        },
       }
 
       clearFieldError(path)
@@ -70,12 +92,13 @@ export function useFieldChangeHandler(field: Field, path: string) {
         setFieldValue(path, value)
       }
 
-      void (async () => {
+      const pending = (async () => {
         try {
           // 1. beforeValidate (advisory — value is always committed)
           let advisoryError: string | undefined
           for (const fn of validateFns) {
             const result = (await fn(ctx)) as FieldBeforeChangeResult | undefined
+            if (!current()) return
             if (result?.error) {
               advisoryError = result.error
             }
@@ -87,6 +110,7 @@ export function useFieldChangeHandler(field: Field, path: string) {
           // 2. beforeChange
           for (const fn of changeFns) {
             const result = (await fn(ctx)) as FieldBeforeChangeResult | undefined
+            if (!current()) return
             if (result?.error) {
               setFieldError(path, result.error)
               return // block the change
@@ -97,20 +121,30 @@ export function useFieldChangeHandler(field: Field, path: string) {
           }
 
           // 3. commit the (possibly transformed) value and surface any advisory error.
-          // If there were no beforeChange hooks we already committed synchronously above;
-          // this call is a no-op if the value hasn't been altered by a hook.
-          setFieldValue(path, ctx.value)
+          if (!current()) return
+          if (changeFns.length > 0 || !Object.is(ctx.value, value)) setFieldValue(path, ctx.value)
           if (advisoryError) {
             setFieldError(path, advisoryError)
           }
         } catch (err) {
+          if (!current()) return
           // Surface unexpected hook errors as field errors rather than crashing
           const message = err instanceof Error ? err.message : 'Unexpected hook error'
           setFieldError(path, message)
         }
       })()
+      releasePending.current = trackFieldChange(pending)
     },
     // field reference is stable per render cycle; path is derived from props
-    [field, path, setFieldValue, getFieldValue, getFieldValues, setFieldError, clearFieldError]
+    [
+      field,
+      path,
+      setFieldValue,
+      getFieldValue,
+      getFieldValues,
+      setFieldError,
+      clearFieldError,
+      trackFieldChange,
+    ]
   )
 }

package/src/fields/use-field-condition.ts

@@ -27,7 +27,15 @@ import { get as getNestedValue } from '../forms/nested-path'
  * sibling scope, mirroring `FieldCondition`'s contract.
  *
  * Fields without a condition are always visible and no subscription is made.
+ *
+ * A condition that throws leaves the field visible. It runs on every form edit
+ * against live, partly-filled data, so a predicate that assumes a shape the
+ * editor has not reached yet would otherwise take the render down. Failing
+ * closed keeps the field editable and matches the validation walker, which
+ * treats the same failure as visible-and-invalid. The misconfiguration is
+ * reported once per field rather than on every keystroke.
  */
+const reportedConditionFailures = new WeakSet<Field>()
 export const useFieldCondition = (field: Field, basePath?: string): boolean => {
   const { getFieldValues, subscribeMeta } = useFormContext()
 
@@ -35,7 +43,15 @@ export const useFieldCondition = (field: Field, basePath?: string): boolean => {
     if (!field.condition) return true
     const data = getFieldValues()
     const siblingData = basePath ? (getNestedValue(data, basePath) ?? {}) : data
-    return Boolean(field.condition(data, siblingData))
+    try {
+      return Boolean(field.condition(data, siblingData))
+    } catch (error) {
+      if (!reportedConditionFailures.has(field)) {
+        reportedConditionFailures.add(field)
+        console.error(`Field condition threw for '${field.name}'; keeping the field visible`, error)
+      }
+      return true
+    }
   }, [field, basePath, getFieldValues])
 
   const [visible, setVisible] = useState<boolean>(evaluate)