@byline/admin 5.1.3 → 5.2.0

package/dist/fields/image/image-field.jsx

@@ -1,183 +0,0 @@
-/**
- * This Source Code is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- *
- * Copyright (c) Infonomic Company Limited
- */
-import { useState } from 'react';
-import { isPendingStoredFileValue, } from '@byline/core';
-import { useTranslation } from '@byline/i18n/react';
-import { CloseIcon, ErrorText, HelpText, IconButton, ImageLightbox, Label, LoaderRing, } from '@byline/ui/react';
-import cx from 'clsx';
-import { useFieldError, useFieldValue, useFormContext, useIsDirty, useIsFieldUploading, } from '../../forms/form-context';
-import { useFieldChangeHandler } from '../use-field-change-handler';
-import styles from './image-field.module.css';
-import { ImageUploadField } from './image-upload-field';
-export const ImageField = ({ field, value, defaultValue, onChange: _onChange, path, }) => {
-    const fieldPath = path ?? field.name;
-    const fieldError = useFieldError(fieldPath);
-    const isDirty = useIsDirty(fieldPath);
-    const fieldValue = useFieldValue(fieldPath);
-    const isUploading = useIsFieldUploading(fieldPath);
-    // `collectionPath` comes from form context rather than a prop: it is
-    // constant for the form, and prop-drilling it meant any container that
-    // forgot to forward it silently rendered this widget read-only.
-    const { removePendingUpload, documentId, collectionPath } = useFormContext();
-    const { t } = useTranslation('byline-admin');
-    // Re-use the standard field change handler so patches are emitted correctly.
-    const handleChange = useFieldChangeHandler(field, fieldPath);
-    // When the field has been explicitly set (dirty), use the field value from
-    // form state — even if it's null (user clicked Remove). Only fall back to
-    // the prop / defaultValue when the field hasn't been touched yet.
-    const incomingValue = isDirty
-        ? (fieldValue ?? null)
-        : (value ?? fieldValue ?? defaultValue ?? null);
-    // Check if this is a pending upload (selected but not yet uploaded)
-    const isPending = isPendingStoredFileValue(incomingValue);
-    // Old placeholder check for backwards compatibility
-    const isOldPlaceholder = (v) => {
-        if (!v || typeof v !== 'object')
-            return false;
-        const maybe = v;
-        return maybe.storageProvider === 'placeholder' && maybe.storagePath === 'pending';
-    };
-    // Show upload widget only if no value or old placeholder
-    const showUploadWidget = incomingValue == null || isOldPlaceholder(incomingValue);
-    // `upload.requireSavedDocument` gate: until the document is persisted,
-    // render a "save first" notice in place of the upload zone. Server-side
-    // upload hooks that depend on save-time state (counters, document id)
-    // rely on this; existing stored values still render normally below.
-    const uploadGated = field.upload?.requireSavedDocument === true && documentId == null;
-    // Prefer the generated thumbnail variant for the preview tile. SVGs and
-    // other bypass types have no variants — fall back to the original.
-    const thumbVariant = incomingValue && !isPendingStoredFileValue(incomingValue)
-        ? incomingValue.variants?.find((v) => v.name === 'thumbnail')
-        : undefined;
-    const previewUrl = thumbVariant?.storageUrl ?? incomingValue?.storageUrl;
-    // Handle remove, including cleanup of pending uploads
-    const handleRemove = () => {
-        if (isPending) {
-            removePendingUpload(fieldPath);
-        }
-        handleChange(null);
-    };
-    // Lightbox state — only enabled for stored (non-pending) images that have a
-    // resolvable original storageUrl.
-    const [lightboxOpen, setLightboxOpen] = useState(false);
-    const canOpenLightbox = !isPending && !!incomingValue?.storageUrl;
-    const htmlId = fieldPath;
-    return (<div className={`byline-field-image ${field.name}`}>
-      <div className={cx('byline-field-image-header', styles.header)}>
-        <Label id={htmlId} htmlFor={htmlId} label={field.label ?? field.name} required={!field.optional}/>
-      </div>
-
-      {showUploadWidget ? (uploadGated ? (<div className={cx('byline-field-image-empty', styles.empty)} role="note" data-testid="upload-require-saved-document">
-            {t('fields.upload.requireSavedDocument')}
-          </div>) : collectionPath ? (<ImageUploadField field={field} collectionPath={collectionPath} fieldPath={fieldPath} onUploaded={(uploaded) => {
-                handleChange(uploaded);
-            }}/>) : (<div className={cx('byline-field-image-empty', styles.empty)}>
-            {t('fields.image.empty')}
-          </div>)) : (<div className={cx('byline-field-image-tile', styles.tile)}>
-          {isUploading && (<div className={cx('byline-field-image-uploading', styles.uploading)} aria-live="polite" aria-busy="true">
-              <LoaderRing />
-            </div>)}
-          {/* Remove button — shown when an image is set (including pending) */}
-          {collectionPath && (<div className={cx('byline-field-image-remove', styles.remove)}>
-              <IconButton type="button" intent="noeffect" onClick={handleRemove} size="xs" disabled={isUploading} aria-label={t('fields.image.removeAriaLabel')}>
-                <CloseIcon width="15px" height="15px"/>
-              </IconButton>
-            </div>)}
-          {/* Preview */}
-          {previewUrl && (<div className={cx('byline-field-image-preview-wrap', styles['preview-wrap'])}>
-              {canOpenLightbox ? (<button type="button" onClick={() => setLightboxOpen(true)} aria-label={t('fields.image.openLightboxAriaLabel')} className={cx('byline-field-image-preview-button', styles['preview-button'])}>
-                  <img src={previewUrl} alt={incomingValue.originalFilename ?? incomingValue.filename} className={cx('byline-field-image-preview', styles.preview, incomingValue.mimeType === 'image/svg+xml' && [
-                        'byline-field-image-preview-svg',
-                        styles['preview-svg'],
-                    ])}/>
-                </button>) : (<img src={previewUrl} alt={incomingValue.originalFilename ?? incomingValue.filename} className={cx('byline-field-image-preview', styles.preview, incomingValue.mimeType === 'image/svg+xml' && [
-                        'byline-field-image-preview-svg',
-                        styles['preview-svg'],
-                    ])}/>)}
-              {/* Pending upload badge */}
-              {isPending && (<div className={cx('byline-field-image-pending', styles.pending)}>
-                  {t('fields.fileMeta.pendingUpload')}
-                </div>)}
-            </div>)}
-          {/* Metadata */}
-          <div className={cx('byline-field-image-meta', styles.meta)}>
-            <div>
-              <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
-                {t('fields.fileMeta.filename')}
-              </span>{' '}
-              {incomingValue?.filename}
-            </div>
-            <div>
-              <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
-                {t('fields.fileMeta.original')}
-              </span>{' '}
-              {incomingValue?.originalFilename}
-            </div>
-            <div>
-              <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
-                {t('fields.fileMeta.type')}
-              </span>{' '}
-              {incomingValue?.mimeType}
-            </div>
-            <div>
-              <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
-                {t('fields.fileMeta.size')}
-              </span>{' '}
-              {incomingValue?.fileSize}
-            </div>
-            {isPending ? (<div>
-                <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
-                  {t('fields.fileMeta.status')}
-                </span>{' '}
-                <span className={cx('byline-field-image-meta-pending', styles['meta-pending'])}>
-                  {t('fields.fileMeta.willUploadOnSave')}
-                </span>
-              </div>) : (<>
-                <div>
-                  <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
-                    {t('fields.fileMeta.storage')}
-                  </span>{' '}
-                  {incomingValue?.storageProvider}
-                </div>
-                {incomingValue?.imageWidth != null && (<div>
-                    <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
-                      {t('fields.imageMeta.dimensions')}
-                    </span>{' '}
-                    {incomingValue.imageWidth}
-                    {incomingValue.imageHeight != null ? `×${incomingValue.imageHeight}` : ''}
-                  </div>)}
-                {incomingValue?.imageFormat != null && (<div>
-                    <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
-                      {t('fields.imageMeta.format')}
-                    </span>{' '}
-                    {incomingValue.imageFormat}
-                  </div>)}
-                <div>
-                  <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
-                    {t('fields.imageMeta.thumbnail')}
-                  </span>{' '}
-                  {thumbVariant
-                    ? t('fields.imageMeta.thumbnailGenerated')
-                    : t('fields.imageMeta.thumbnailPending')}
-                </div>
-              </>)}
-          </div>
-        </div>)}
-
-      {field.helpText && <HelpText text={field.helpText}/>}
-
-      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError}/>}
-
-      {canOpenLightbox && incomingValue?.storageUrl && (<ImageLightbox isOpen={lightboxOpen} onDismiss={() => setLightboxOpen(false)} src={incomingValue.storageUrl} alt={incomingValue.originalFilename ?? incomingValue.filename} downloadFilename={incomingValue.originalFilename ?? incomingValue.filename} title={incomingValue.originalFilename ?? incomingValue.filename} meta={{
-                width: incomingValue.imageWidth,
-                height: incomingValue.imageHeight,
-                fileSize: incomingValue.fileSize,
-                mimeType: incomingValue.mimeType,
-            }}/>)}
-    </div>);
-};

package/dist/fields/image/image-upload-field.jsx

@@ -1,157 +0,0 @@
-/**
- * This Source Code is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- *
- * Copyright (c) Infonomic Company Limited
- */
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { createPendingStoredFileValue, } from '@byline/core';
-import { useTranslation } from '@byline/i18n/react';
-import cx from 'clsx';
-import { useFormContext } from '../../forms/form-context';
-import styles from './image-upload-field.module.css';
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-export const ImageUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded, accept = 'image/*', }) => {
-    const inputRef = useRef(null);
-    const mountedRef = useRef(true);
-    const [status, setStatus] = useState('idle');
-    const [errorMessage, setErrorMessage] = useState(null);
-    const [isDragOver, setIsDragOver] = useState(false);
-    const { addPendingUpload } = useFormContext();
-    const { t } = useTranslation('byline-admin');
-    useEffect(() => {
-        mountedRef.current = true;
-        return () => {
-            mountedRef.current = false;
-        };
-    }, []);
-    // -------------------------------------------------------------------------
-    // Core file selection logic (deferred upload)
-    // -------------------------------------------------------------------------
-    const handleFileSelected = useCallback((file) => {
-        setStatus('processing');
-        setErrorMessage(null);
-        // Basic client-side validation
-        if (!file.type.startsWith('image/')) {
-            setStatus('error');
-            setErrorMessage(t('fields.image.upload.errors.notAnImage'));
-            return;
-        }
-        // Create a blob URL for immediate preview
-        const previewUrl = URL.createObjectURL(file);
-        // Extract image dimensions for the pending value
-        const img = new Image();
-        img.onload = () => {
-            if (!mountedRef.current) {
-                URL.revokeObjectURL(previewUrl);
-                return;
-            }
-            // SVGs without explicit width/height attrs (viewBox-only) report naturalWidth/Height = 0.
-            // Skip dimensions when zero so they are stored as null (scalable, no fixed size).
-            const w = img.naturalWidth;
-            const h = img.naturalHeight;
-            const dimensions = w > 0 && h > 0 ? { width: w, height: h } : undefined;
-            // Create the pending stored file value
-            const pendingValue = createPendingStoredFileValue(file, previewUrl, dimensions);
-            // Register the pending upload in form context
-            if (!addPendingUpload(fieldPath, {
-                file,
-                previewUrl,
-                collectionPath,
-            })) {
-                return;
-            }
-            setStatus('idle');
-            onUploaded(pendingValue);
-        };
-        img.onerror = () => {
-            URL.revokeObjectURL(previewUrl);
-            if (!mountedRef.current)
-                return;
-            setStatus('error');
-            setErrorMessage(t('fields.image.upload.errors.cannotRead'));
-        };
-        img.src = previewUrl;
-    }, [collectionPath, fieldPath, addPendingUpload, onUploaded, t]);
-    // -------------------------------------------------------------------------
-    // File input
-    // -------------------------------------------------------------------------
-    const handleFileChange = useCallback((e) => {
-        const file = e.target.files?.[0];
-        if (file)
-            handleFileSelected(file);
-        // Reset so re-selecting the same file fires the event again.
-        e.target.value = '';
-    }, [handleFileSelected]);
-    const handleBrowseClick = useCallback(() => {
-        inputRef.current?.click();
-    }, []);
-    // -------------------------------------------------------------------------
-    // Drag and drop
-    // -------------------------------------------------------------------------
-    const handleDragOver = useCallback((e) => {
-        e.preventDefault();
-        setIsDragOver(true);
-    }, []);
-    const handleDragLeave = useCallback((e) => {
-        e.preventDefault();
-        setIsDragOver(false);
-    }, []);
-    const handleDrop = useCallback((e) => {
-        e.preventDefault();
-        setIsDragOver(false);
-        const file = e.dataTransfer.files?.[0];
-        if (file)
-            handleFileSelected(file);
-    }, [handleFileSelected]);
-    // -------------------------------------------------------------------------
-    // Render
-    // -------------------------------------------------------------------------
-    const isProcessing = status === 'processing';
-    return (<div className={cx('byline-field-image-upload', styles.root)}>
-      {/* Hidden native file input */}
-      <input ref={inputRef} type="file" accept={accept} className={cx('byline-field-image-upload-input', styles.input)} onChange={handleFileChange} disabled={isProcessing} aria-hidden="true" tabIndex={-1}/>
-
-      {/* Drop zone */}
-      <div role="button" tabIndex={0} aria-label={t('fields.image.upload.zoneAriaLabel')} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop} onClick={handleBrowseClick} onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                handleBrowseClick();
-            }
-        }} className={cx('byline-field-image-upload-zone', styles.zone, isDragOver &&
-            !isProcessing && ['byline-field-image-upload-zone-active', styles['zone-active']], isProcessing && ['byline-field-image-upload-zone-busy', styles['zone-busy']])}>
-        {isProcessing ? (<>
-            {/* Spinner */}
-            <svg className={cx('byline-field-image-upload-spinner', styles.spinner)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-              <circle style={{ opacity: 0.25 }} cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
-              <path style={{ opacity: 0.75 }} fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
-            </svg>
-            <span className={cx('byline-field-image-upload-label', styles.label)}>
-              {t('fields.image.upload.processing')}
-            </span>
-          </>) : (<>
-            {/* Upload icon */}
-            <svg xmlns="http://www.w3.org/2000/svg" className={cx('byline-field-image-upload-icon', styles.icon)} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
-              <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
-            </svg>
-            <span className={cx('byline-field-image-upload-label', styles.label)}>
-              {t('fields.image.upload.label')}{' '}
-              <span className={cx('byline-field-image-upload-action', styles.action)}>
-                {t('fields.image.upload.browse')}
-              </span>
-            </span>
-            <span className={cx('byline-field-image-upload-hint', styles.hint)}>
-              {t('fields.image.upload.hint')}
-            </span>
-          </>)}
-      </div>
-
-      {/* Error message */}
-      {status === 'error' && errorMessage && (<p className={cx('byline-field-image-upload-error', styles.error)} role="alert">
-          {errorMessage}
-        </p>)}
-    </div>);
-};

package/dist/fields/local-date-time.jsx

@@ -1,69 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-// undefined will use the user's locale
-const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
-    year: 'numeric',
-    month: 'short', // <- short month text (locale-aware)
-    day: '2-digit',
-    hour: 'numeric',
-    minute: 'numeric',
-});
-const dateFormatter = new Intl.DateTimeFormat(undefined, {
-    year: 'numeric',
-    month: 'short', // <- short month text (locale-aware)
-    day: '2-digit',
-});
-/**
- * Client-side date/time formatter that displays dates in the user's local timezone.
- *
- * This component avoids hydration mismatches by:
- * 1. Rendering a placeholder on the server/initial render
- * 2. Updating to the correctly formatted date after hydration
- *
- * Use this instead of formatDateTime when you need to display dates
- * in the user's local timezone rather than UTC.
- */
-export function LocalDateTime({ value, mode = 'datetime', className, fallback = '—', }) {
-    const [formattedDate, setFormattedDate] = useState(null);
-    useEffect(() => {
-        if (value == null) {
-            setFormattedDate(null);
-            return;
-        }
-        const date = typeof value === 'string' ? Date.parse(value) : value.getTime();
-        if (Number.isNaN(date)) {
-            setFormattedDate('Error');
-            return;
-        }
-        const formatter = mode === 'datetime' ? dateTimeFormatter : dateFormatter;
-        setFormattedDate(formatter.format(date));
-    }, [value, mode]);
-    // Show fallback during SSR and before useEffect runs
-    if (formattedDate === null) {
-        return <span className={className}>{value ? '...' : fallback}</span>;
-    }
-    return <span className={className}>{formattedDate}</span>;
-}
-/**
- * Formats a date string to the user's local timezone.
- *
- * WARNING: Only use this in client components where hydration
- * mismatches are acceptable or managed. For most cases, prefer
- * the <LocalDateTime /> component.
- */
-export function formatLocalDateTime(value) {
-    if (value == null)
-        return '—';
-    const date = typeof value === 'string' ? Date.parse(value) : value.getTime();
-    if (Number.isNaN(date))
-        return 'Error';
-    return dateTimeFormatter.format(date);
-}
-export function formatLocalDate(value) {
-    if (value == null)
-        return '—';
-    const date = typeof value === 'string' ? Date.parse(value) : value.getTime();
-    if (Number.isNaN(date))
-        return 'Error';
-    return dateFormatter.format(date);
-}

package/dist/fields/locale-badge.jsx

@@ -1,19 +0,0 @@
-/**
- * This Source Code is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- *
- * Copyright (c) Infonomic Company Limited
- */
-import cx from 'clsx';
-import styles from './locale-badge.module.css';
-/**
- * Small inline badge shown next to the label of a field that has
- * `localized: true` in its schema definition. Indicates which locale
- * the editor is currently working in.
- *
- * Stable override handle: `.byline-locale-badge`.
- */
-export const LocaleBadge = ({ locale }) => (<span aria-hidden="true" title={`Localised — editing ${locale.toUpperCase()} content`} className={cx('byline-locale-badge', styles.badge)}>
-    {locale}
-  </span>);

package/dist/fields/numerical/numerical-field.jsx

@@ -1,93 +0,0 @@
-/**
- * This Source Code is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- *
- * Copyright (c) Infonomic Company Limited
- */
-import { useEffect, useState } from 'react';
-import { normalizeNumericValue } from '@byline/core';
-import { Input } from '@byline/ui/react';
-import { useFieldError, useFieldValue } from '../../forms/form-context';
-const COMPLETE_NUMERIC_RE = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/;
-export const NumericalField = ({ field, value, defaultValue, onChange, id, path, components, }) => {
-    const fieldPath = path ?? field.name;
-    const fieldError = useFieldError(fieldPath);
-    const fieldValue = useFieldValue(fieldPath);
-    const incomingValue = value !== undefined ? value : fieldValue !== undefined ? fieldValue : (defaultValue ?? null);
-    const htmlId = id ?? fieldPath;
-    const canonicalDisplay = incomingValue == null ? '' : String(incomingValue);
-    const [displayValue, setDisplayValue] = useState(canonicalDisplay);
-    const [isEditing, setIsEditing] = useState(false);
-    useEffect(() => {
-        if (!isEditing)
-            setDisplayValue(canonicalDisplay);
-    }, [canonicalDisplay, isEditing]);
-    const canonicalize = (nextValue) => {
-        if (nextValue == null || (typeof nextValue === 'string' && nextValue.trim() === ''))
-            return null;
-        if (field.type === 'counter')
-            return undefined;
-        if (typeof nextValue === 'string' && !COMPLETE_NUMERIC_RE.test(nextValue.trim())) {
-            return undefined;
-        }
-        try {
-            return normalizeNumericValue(field.type, nextValue, fieldPath);
-        }
-        catch {
-            return undefined;
-        }
-    };
-    const commit = (nextValue) => {
-        const canonical = canonicalize(nextValue);
-        if (canonical !== undefined)
-            onChange?.(canonical);
-        return canonical;
-    };
-    // Custom component slots (from admin config)
-    const slots = components;
-    const CustomLabel = slots?.Label;
-    const CustomHelpText = slots?.HelpText;
-    const CustomField = slots?.Field;
-    const BeforeField = slots?.beforeField;
-    const AfterField = slots?.afterField;
-    // Shared props available to every slot component
-    const slotBaseProps = {
-        field: field,
-        path: fieldPath,
-        value: incomingValue,
-        error: fieldError,
-        id: htmlId,
-    };
-    const hasCustomLabel = !!CustomLabel;
-    const suppressInputLabel = hasCustomLabel;
-    const suppressInputHelpText = !!CustomHelpText;
-    // ── Label rendering ──────────────────────────────────────────
-    const renderLabel = () => {
-        if (hasCustomLabel) {
-            return <CustomLabel {...slotBaseProps} label={field.label} required={!field.optional}/>;
-        }
-        return null;
-    };
-    // ── Field input rendering ────────────────────────────────────
-    const renderInput = () => {
-        if (CustomField) {
-            return (<CustomField {...slotBaseProps} onChange={(nextValue) => commit(nextValue)} defaultValue={defaultValue} placeholder={field.placeholder}/>);
-        }
-        return (<Input type="text" inputMode={field.type === 'integer' || field.type === 'counter' ? 'numeric' : 'decimal'} step={field.type === 'integer' || field.type === 'counter' ? 1 : 'any'} id={htmlId} name={field.name} label={suppressInputLabel ? undefined : field.label} required={!field.optional} readOnly={field.readOnly} helpText={suppressInputHelpText ? undefined : field.helpText} value={displayValue} onFocus={() => setIsEditing(true)} onChange={(e) => {
-                setDisplayValue(e.target.value);
-                commit(e.target.value);
-            }} onBlur={() => {
-                setIsEditing(false);
-                const canonical = commit(displayValue);
-                setDisplayValue(canonical === undefined ? canonicalDisplay : (canonical?.toString() ?? ''));
-            }} error={fieldError != null} errorText={fieldError}/>);
-    };
-    return (<div className={`byline-field-${field.type} ${field.name}`}>
-      {renderLabel()}
-      {BeforeField && <BeforeField {...slotBaseProps}/>}
-      {renderInput()}
-      {AfterField && <AfterField {...slotBaseProps}/>}
-      {CustomHelpText && <CustomHelpText {...slotBaseProps} helpText={field.helpText}/>}
-    </div>);
-};

package/dist/fields/relation/relation-column-formatter.jsx

@@ -1,74 +0,0 @@
-/**
- * This Source Code is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- *
- * Copyright (c) Infonomic Company Limited
- */
-import { getCollectionDefinition } from '@byline/core';
-import { resolveFallbackDisplayField, resolveRowLabel } from './relation-display';
-/** Max titles shown for a hasMany cell before collapsing to "+N more". */
-const MAX_SHOWN = 3;
-function labelFor(env, displayField) {
-    // Unresolved (deleted / out-of-scope target) or not populated → no title.
-    if (env == null || env._resolved === false || env.document == null)
-        return null;
-    return resolveRowLabel(env.document, displayField);
-}
-/**
- * Pure text projection of a relation cell: the target's title for a single
- * relation, or "A, B, +N more" for `hasMany`. Unresolved targets are skipped;
- * an all-empty cell yields `null` (the formatter renders a muted dash).
- *
- * `displayField` is the resolved chain
- * (`field.displayField` → target `useAsTitle` → first text field).
- */
-export function formatRelationCellText(field, value, displayField) {
-    const envelopes = field.hasMany
-        ? Array.isArray(value)
-            ? value
-            : []
-        : value
-            ? [value]
-            : [];
-    const labels = envelopes
-        .map((env) => labelFor(env, displayField))
-        .filter((l) => l != null && l.length > 0);
-    if (labels.length === 0)
-        return null;
-    if (!field.hasMany)
-        return labels[0] ?? null;
-    const shown = labels.slice(0, MAX_SHOWN);
-    const extra = labels.length - shown.length;
-    return extra > 0 ? `${shown.join(', ')}, +${extra} more` : shown.join(', ');
-}
-/**
- * The built-in `{ component }` column formatter for a `relation` field. Resolves
- * the target collection's `useAsTitle` at render time and renders the cell text.
- */
-export function relationColumnFormatter(field) {
-    return {
-        component: ({ value }) => {
-            const targetDef = getCollectionDefinition(field.targetCollection);
-            const displayField = field.displayField ?? targetDef?.useAsTitle ?? resolveFallbackDisplayField(targetDef);
-            const text = formatRelationCellText(field, value, displayField);
-            return text != null ? (<span className="byline-relation-column">{text}</span>) : (<span className="byline-relation-column-empty muted">—</span>);
-        },
-    };
-}
-/**
- * Return a copy of `columns` with {@link relationColumnFormatter} applied to any
- * `relation`-typed column that doesn't already declare its own formatter, so
- * relation cells render target titles by default. Other columns are untouched.
- */
-export function applyRelationColumnFormatters(columns, definition) {
-    return columns.map((col) => {
-        if (col.formatter)
-            return col;
-        const field = definition.fields.find((f) => f.name === String(col.fieldName));
-        if (field?.type === 'relation') {
-            return { ...col, formatter: relationColumnFormatter(field) };
-        }
-        return col;
-    });
-}