@byline/admin 6.2.1 → 6.4.0

package/dist/fields/relation/relation-many-field.js

@@ -5,12 +5,14 @@ import { useTranslation } from "@byline/i18n/react";
 import { Button, CloseIcon, DraggableSortable, ErrorText, GripperVerticalIcon, HelpText, IconButton, Label, PlusIcon, moveItem, useSortable } from "@byline/ui/react";
 import clsx from "clsx";
 import { useFieldError, useFieldValue, useFormContext } from "../../forms/form-context.js";
+import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import relation_field_module from "./relation-field.module.js";
 import { RelationPicker } from "./relation-picker.js";
 import { RelationSummary } from "./relation-summary.js";
-const RelationManyTile = ({ id, children, onRemove, removeAriaLabel })=>{
+const RelationManyTile = ({ id, children, onRemove, removeAriaLabel, readOnly })=>{
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
         id,
+        disabled: readOnly,
         transition: {
             duration: 250,
             easing: 'cubic-bezier(0, 0.2, 0.2, 1)'
@@ -30,6 +32,7 @@ const RelationManyTile = ({ id, children, onRemove, removeAriaLabel })=>{
         ]),
         children: [
             /*#__PURE__*/ jsx("button", {
+                disabled: readOnly,
                 type: "button",
                 className: clsx('byline-field-relation-many-grip', relation_field_module["many-grip"]),
                 ...attributes,
@@ -41,6 +44,7 @@ const RelationManyTile = ({ id, children, onRemove, removeAriaLabel })=>{
                 children: children
             }),
             /*#__PURE__*/ jsx(IconButton, {
+                disabled: readOnly,
                 type: "button",
                 size: "xs",
                 intent: "noeffect",
@@ -57,7 +61,7 @@ const RelationManyTile = ({ id, children, onRemove, removeAriaLabel })=>{
 };
 const RelationManyField = ({ field, defaultValue, id, path })=>{
     const fieldPath = path ?? field.name;
-    const htmlId = id ?? fieldPath;
+    const htmlId = useScopedDomId(fieldPath, id);
     const { t } = useTranslation('byline-admin');
     const fieldError = useFieldError(fieldPath);
     const { getFieldValue, setFieldValue } = useFormContext();
@@ -76,6 +80,7 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
         return Array.isArray(defaultValue) ? defaultValue : [];
     };
     const handleAddMany = (selections)=>{
+        if (field.readOnly) return;
         setPickerOpen(false);
         const current = currentArray();
         const existing = new Set(current.map((v)=>v.targetDocumentId));
@@ -98,10 +103,11 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
         ]);
     };
     const handleRemove = (targetDocumentId)=>{
+        if (field.readOnly) return;
         setFieldValue(fieldPath, currentArray().filter((v)=>v.targetDocumentId !== targetDocumentId));
     };
     const handleDragEnd = ({ moveFromIndex, moveToIndex })=>{
-        if (moveFromIndex === moveToIndex) return;
+        if (field.readOnly || moveFromIndex === moveToIndex) return;
         setFieldValue(fieldPath, moveItem(currentArray(), moveFromIndex, moveToIndex));
     };
     return /*#__PURE__*/ jsxs("div", {
@@ -145,6 +151,7 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
                                 onDragEnd: handleDragEnd,
                                 className: clsx('byline-field-relation-many', relation_field_module.many),
                                 children: items.map((value)=>/*#__PURE__*/ jsx(RelationManyTile, {
+                                        readOnly: field.readOnly,
                                         id: value.targetDocumentId,
                                         onRemove: ()=>handleRemove(value.targetDocumentId),
                                         removeAriaLabel: t('fields.relation.removeAriaLabel', {
@@ -162,6 +169,7 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
                             /*#__PURE__*/ jsx("div", {
                                 className: clsx('byline-field-relation-many-add', relation_field_module["many-add"]),
                                 children: /*#__PURE__*/ jsxs(Button, {
+                                    disabled: field.readOnly,
                                     id: htmlId,
                                     size: "xs",
                                     variant: "outlined",
@@ -185,7 +193,7 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
                         text: field.helpText
                     }),
                     fieldError && /*#__PURE__*/ jsx(ErrorText, {
-                        id: `${field.name}-error`,
+                        id: `${htmlId}-error`,
                         text: fieldError
                     }),
                     /*#__PURE__*/ jsx(RelationPicker, {

package/dist/fields/relation/relation-picker.js

@@ -19,7 +19,9 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
     const [documents, setDocuments] = useState([]);
     const [totalPages, setTotalPages] = useState(1);
     const [collectionId, setCollectionId] = useState(null);
-    const { getCollectionDocuments } = useBylineFieldServices();
+    const [refreshNonce, setRefreshNonce] = useState(0);
+    const { getCollectionDocuments, canCreateInCollection, getCreateDocumentUrl } = useBylineFieldServices();
+    const createHref = null != getCreateDocumentUrl && canCreateInCollection?.(targetCollectionPath) === true ? getCreateDocumentUrl(targetCollectionPath) : null;
     const targetAdminConfig = getCollectionAdminConfig(targetCollectionPath);
     const pickerColumns = targetAdminConfig?.itemView;
     useEffect(()=>{
@@ -77,7 +79,8 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
         pickerColumns,
         getCollectionDocuments,
         t,
-        targetAdminConfig?.itemViewSort
+        targetAdminConfig?.itemViewSort,
+        refreshNonce
     ]);
     const resolvedDisplayField = displayField ?? targetDefinition?.useAsTitle ?? resolveFallbackDisplayField(targetDefinition) ?? null;
     const handleSelect = useCallback(()=>{
@@ -127,12 +130,40 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
                 width: '100%'
             },
             children: [
-                /*#__PURE__*/ jsx(Modal.Header, {
+                /*#__PURE__*/ jsxs(Modal.Header, {
                     className: clsx('byline-field-relation-picker-header', relation_picker_module.header),
-                    children: /*#__PURE__*/ jsx("h3", {
-                        className: clsx('byline-field-relation-picker-title', relation_picker_module.title),
-                        children: title
-                    })
+                    children: [
+                        /*#__PURE__*/ jsx("h3", {
+                            className: clsx('byline-field-relation-picker-title', relation_picker_module.title),
+                            children: title
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: clsx('byline-field-relation-picker-actions', relation_picker_module.actions),
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    type: "button",
+                                    size: "xs",
+                                    variant: "outlined",
+                                    className: clsx('byline-field-relation-picker-refresh', relation_picker_module.refresh),
+                                    onClick: ()=>setRefreshNonce((nonce)=>nonce + 1),
+                                    children: t('fields.relation.picker.refresh')
+                                }),
+                                null != createHref && /*#__PURE__*/ jsx(Button, {
+                                    size: "xs",
+                                    variant: "outlined",
+                                    className: clsx('byline-field-relation-picker-create', relation_picker_module.create),
+                                    render: /*#__PURE__*/ jsx("a", {
+                                        href: createHref,
+                                        target: "_blank",
+                                        rel: "noopener noreferrer",
+                                        children: t('fields.relation.picker.createNew', {
+                                            label: targetDefinition?.labels.singular ?? targetCollectionPath
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ jsx(Modal.Content, {
                     children: /*#__PURE__*/ jsxs("div", {

package/dist/fields/relation/relation-picker.module.js

@@ -1,6 +1,9 @@
 import "./relation-picker_module.css";
 const relation_picker_module = {
     header: "header-quQOWP",
+    actions: "actions-s42_zl",
+    refresh: "refresh-CVQwEV",
+    create: "create-Ol3jYM",
     title: "title-nX1CSv",
     body: "body-S2EcHm",
     list: "list-UFzd89",

package/dist/fields/relation/relation-picker_module.css

@@ -1,6 +1,26 @@
 :is(.header-quQOWP, .byline-field-relation-picker-header) {
   margin-bottom: var(--spacing-8);
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--spacing-8);
+  flex-wrap: wrap;
   padding-top: 1rem;
+  display: flex;
+}
+
+:is(.actions-s42_zl, .byline-field-relation-picker-actions) {
+  align-items: center;
+  gap: var(--spacing-8);
+  display: flex;
+}
+
+:is(.refresh-CVQwEV, .byline-field-relation-picker-refresh) {
+  white-space: nowrap;
+}
+
+:is(.create-Ol3jYM, .byline-field-relation-picker-create) {
+  white-space: nowrap;
+  text-decoration: none;
 }
 
 :is(.title-nX1CSv, .byline-field-relation-picker-title) {

package/dist/fields/select/select-field.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ErrorText, Label, Select } from "@byline/ui/react";
 import clsx from "clsx";
 import { useFieldError, useFieldValue, useIsDirty } from "../../forms/form-context.js";
+import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import select_field_module from "./select-field.module.js";
 const SelectField = ({ field, value, defaultValue, onChange, id, path })=>{
     const fieldPath = path ?? field.name;
@@ -9,7 +10,7 @@ const SelectField = ({ field, value, defaultValue, onChange, id, path })=>{
     const isDirty = useIsDirty(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
     const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
-    const htmlId = id ?? fieldPath;
+    const htmlId = useScopedDomId(fieldPath, id);
     return /*#__PURE__*/ jsxs("div", {
         className: `byline-field-select ${field.name}`,
         children: [
@@ -21,6 +22,7 @@ const SelectField = ({ field, value, defaultValue, onChange, id, path })=>{
                 className: clsx('byline-field-select-label', select_field_module.label)
             }),
             /*#__PURE__*/ jsx(Select, {
+                disabled: field.readOnly,
                 size: "xs",
                 variant: "outlined",
                 id: htmlId,
@@ -43,7 +45,7 @@ const SelectField = ({ field, value, defaultValue, onChange, id, path })=>{
                 ])
             }),
             fieldError && /*#__PURE__*/ jsx(ErrorText, {
-                id: `${field.name}-error`,
+                id: `${htmlId}-error`,
                 text: fieldError
             })
         ]

package/dist/fields/text/text-field.js

@@ -3,6 +3,7 @@ import { useCallback } from "react";
 import { Input, Label } from "@byline/ui/react";
 import clsx from "clsx";
 import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import { LocaleBadge } from "../locale-badge.js";
 import text_field_module from "./text-field.module.js";
 const TextField = ({ field, value, defaultValue, onChange, id, path, locale, components })=>{
@@ -10,11 +11,12 @@ const TextField = ({ field, value, defaultValue, onChange, id, path, locale, com
     const fieldError = useFieldError(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
     const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
-    const htmlId = id ?? fieldPath;
+    const htmlId = useScopedDomId(fieldPath, id);
     const handleChange = useCallback((value)=>{
-        if (onChange) onChange(value);
+        if (onChange && !field.readOnly) onChange(value);
     }, [
-        onChange
+        onChange,
+        field.readOnly
     ]);
     const slots = components;
     const CustomLabel = slots?.Label;
@@ -72,6 +74,7 @@ const TextField = ({ field, value, defaultValue, onChange, id, path, locale, com
             placeholder: field.placeholder
         });
         return /*#__PURE__*/ jsx(Input, {
+            readOnly: field.readOnly,
             id: htmlId,
             name: field.name,
             label: suppressInputLabel ? void 0 : field.label,

package/dist/fields/text-area/text-area-field.js

@@ -3,6 +3,7 @@ import { useCallback } from "react";
 import { Label, TextArea } from "@byline/ui/react";
 import clsx from "clsx";
 import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+import { useScopedDomId } from "../../forms/form-dom-scope.js";
 import { LocaleBadge } from "../locale-badge.js";
 import text_area_field_module from "./text-area-field.module.js";
 const TextAreaField = ({ field, value, defaultValue, onChange, id, path, locale, components })=>{
@@ -10,11 +11,12 @@ const TextAreaField = ({ field, value, defaultValue, onChange, id, path, locale,
     const fieldError = useFieldError(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
     const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
-    const htmlId = id ?? fieldPath;
+    const htmlId = useScopedDomId(fieldPath, id);
     const handleChange = useCallback((value)=>{
-        if (onChange) onChange(value);
+        if (onChange && !field.readOnly) onChange(value);
     }, [
-        onChange
+        onChange,
+        field.readOnly
     ]);
     const slots = components;
     const CustomLabel = slots?.Label;
@@ -72,6 +74,7 @@ const TextAreaField = ({ field, value, defaultValue, onChange, id, path, locale,
             placeholder: field.placeholder
         });
         return /*#__PURE__*/ jsx(TextArea, {
+            readOnly: field.readOnly,
             id: htmlId,
             name: field.name,
             label: suppressInputLabel ? void 0 : field.label,

package/dist/fields/use-field-change-handler.js

@@ -1,9 +1,19 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { normalizeHooks } from "@byline/core";
 import { useFormContext } from "../forms/form-context.js";
 function useFieldChangeHandler(field, path) {
-    const { setFieldValue, getFieldValue, getFieldValues, setFieldError, clearFieldError } = useFormContext();
+    const { setFieldValue, getFieldValue, getFieldValues, setFieldError, clearFieldError, trackFieldChange } = useFormContext();
+    const generation = useRef(0);
+    const releasePending = useRef(void 0);
+    useEffect(()=>()=>{
+            generation.current++;
+            releasePending.current?.();
+        }, []);
     return useCallback((value)=>{
+        releasePending.current?.();
+        const invocation = ++generation.current;
+        if (field.readOnly) return;
+        const current = ()=>invocation === generation.current;
         const hooks = field.hooks;
         const validateFns = normalizeHooks(hooks?.beforeValidate);
         const changeFns = normalizeHooks(hooks?.beforeChange);
@@ -16,30 +26,37 @@ function useFieldChangeHandler(field, path) {
             path,
             field,
             operation: 'change',
-            setFieldValue
+            setFieldValue: (target, next)=>{
+                if (current()) setFieldValue(target, next);
+            }
         };
         clearFieldError(path);
         if (0 === changeFns.length) setFieldValue(path, value);
-        (async ()=>{
+        const pending = (async ()=>{
             try {
                 let advisoryError;
                 for (const fn of validateFns){
                     const result = await fn(ctx);
+                    if (!current()) return;
                     if (result?.error) advisoryError = result.error;
                     if (result?.value !== void 0) ctx.value = result.value;
                 }
                 for (const fn of changeFns){
                     const result = await fn(ctx);
+                    if (!current()) return;
                     if (result?.error) return void setFieldError(path, result.error);
                     if (result?.value !== void 0) ctx.value = result.value;
                 }
-                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;
                 const message = err instanceof Error ? err.message : 'Unexpected hook error';
                 setFieldError(path, message);
             }
         })();
+        releasePending.current = trackFieldChange(pending);
     }, [
         field,
         path,
@@ -47,7 +64,8 @@ function useFieldChangeHandler(field, path) {
         getFieldValue,
         getFieldValues,
         setFieldError,
-        clearFieldError
+        clearFieldError,
+        trackFieldChange
     ]);
 }
 export { useFieldChangeHandler };

package/dist/fields/use-field-condition.d.ts

@@ -6,19 +6,4 @@
  * Copyright (c) Infonomic Company Limited
  */
 import type { Field } from '@byline/core';
-/**
- * Evaluate a field's visibility `condition` against live form data.
- *
- * Subscribes to the form's meta listeners — fired on every field commit, the
- * same loop `TabDefinition.condition` rides — and recomputes the predicate.
- * The consumer only re-renders when the boolean actually flips, so a stable
- * condition costs one function call per form edit, no reconciliation.
- *
- * `basePath` is the field's sibling scope: the enclosing group / array item
- * (e.g. `files[0].filesGroup` for `files[0].filesGroup.thumbnailPage`).
- * Root-level fields pass no basePath and receive the full form data as their
- * sibling scope, mirroring `FieldCondition`'s contract.
- *
- * Fields without a condition are always visible and no subscription is made.
- */
 export declare const useFieldCondition: (field: Field, basePath?: string) => boolean;

package/dist/fields/use-field-condition.js

@@ -1,13 +1,22 @@
 import { useCallback, useEffect, useState } from "react";
 import { useFormContext } from "../forms/form-context.js";
 import { get } from "../forms/nested-path.js";
+const reportedConditionFailures = new WeakSet();
 const useFieldCondition = (field, basePath)=>{
     const { getFieldValues, subscribeMeta } = useFormContext();
     const evaluate = useCallback(()=>{
         if (!field.condition) return true;
         const data = getFieldValues();
         const siblingData = basePath ? get(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,

package/dist/forms/form-context.d.ts

@@ -78,7 +78,9 @@ interface FormContextType {
     hasChanges: () => boolean;
     resetHasChanges: () => void;
     runFieldHooks: (fields: Field[]) => Promise<FormError[]>;
-    validateForm: (fields: Field[]) => FormError[];
+    validateForm: (fields: Field[], additionalErrors?: FormError[]) => FormError[];
+    trackFieldChange: (pending: Promise<void>) => () => void;
+    waitForFieldChanges: () => Promise<void>;
     errors: FormError[];
     getErrors: () => FormError[];
     clearErrors: () => void;
@@ -131,11 +133,6 @@ export declare const FormProvider: ({ children, initialData, documentId, collect
  * Returns the current value (or `null` when no override is set).
  */
 export declare const useSystemPath: () => string | null;
-/**
- * Subscribe to the system `availableLocales` slot edited by the
- * available-locales widget. Returns the current advertised set (or `[]` when
- * nothing is advertised / not yet surfaced).
- */
 export declare const useSystemAvailableLocales: () => string[];
 export declare const useFormStore: () => FormContextType;
 export declare const useFieldError: (name: string) => string | undefined;
@@ -144,11 +141,5 @@ export declare const useFormMeta: () => {
 };
 export declare const useIsDirty: (name: string) => boolean;
 export declare const useFieldValue: <T = any>(name: string) => T | undefined;
-/**
- * Subscribe to a single field's upload-in-flight state. Returns `true` while
- * the form orchestrator is actively transporting this field's pending upload
- * (between the `setFieldUploading(path, true)` and the matching `false`
- * emitted by the upload executor's progress callback).
- */
 export declare const useIsFieldUploading: (fieldPath: string) => boolean;
 export {};