@byline/admin 5.1.3 → 5.2.0

package/dist/fields/relation/relation-display.jsx

@@ -1,118 +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 './relation-display.module.css';
-// ---------------------------------------------------------------------------
-// Shared render helpers used by both the relation picker modal rows and
-// the relation-summary tile on the edit form. Kept in lock-step so a row
-// rendered in the picker looks identical to the selected tile.
-// ---------------------------------------------------------------------------
-/**
- * Render a single row cell from a `ColumnDefinition`, reading the value
- * from the document's `fields` (with a fallback to top-level metadata like
- * `status`, `updated_at`, `path`). Honours both formatter shapes — plain
- * function → its return value, `{ component }` → the component is rendered.
- */
-export function PickerCell({ column, record, }) {
-    const name = String(column.fieldName);
-    const value = record?.fields?.[name] ?? record?.[name];
-    let content;
-    if (column.formatter) {
-        if (typeof column.formatter === 'function') {
-            content = column.formatter(value, record);
-        }
-        else {
-            const Comp = column.formatter.component;
-            content = <Comp value={value} record={record}/>;
-        }
-    }
-    else if (value == null) {
-        content = null;
-    }
-    else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-        content = String(value);
-    }
-    else {
-        content = null;
-    }
-    return (<div className={cx('byline-relation-cell', styles.cell, column.align === 'center' && ['byline-relation-cell-center', styles['cell-center']], column.align === 'right' && ['byline-relation-cell-right', styles['cell-right']], column.className)}>
-      {content}
-    </div>);
-}
-/** First top-level `text` field name on a collection, or null. */
-export function resolveFallbackDisplayField(def) {
-    if (!def)
-        return null;
-    const textField = def.fields.find((f) => f.type === 'text');
-    return textField?.name ?? null;
-}
-/** Resolve the row's primary label text from the document. */
-export function resolveRowLabel(doc, displayField) {
-    if (!doc)
-        return null;
-    if (displayField) {
-        const v = doc.fields?.[displayField];
-        if (typeof v === 'string' && v.length > 0)
-            return v;
-    }
-    if (typeof doc.fields?.title === 'string' && doc.fields.title.length > 0) {
-        return doc.fields.title;
-    }
-    if (typeof doc.path === 'string' && doc.path.length > 0)
-        return doc.path;
-    return null;
-}
-/**
- * Build the `fields` projection for the picker listing. Unions:
- *   - caller-supplied `displayField`
- *   - target schema's `useAsTitle` (always included, even when not visible)
- *   - every `fieldName` declared in the admin config's `picker` columns
- *   - `title` (metadata fallback for rows with no explicit picker columns)
- *
- * Note that the document `path` is top-level metadata on every list response
- * — it is always returned by `getCollectionDocuments` regardless of the
- * `fields` projection. Callers that need `{ title, path }` for downstream
- * normalisation (e.g. the rich-text link plugin) can rely on:
- *   - `record.fields[def.useAsTitle]` for the title
- *   - `record.path` for the path
- *
- * Returns `undefined` when no target definition is available, leaving the
- * listing endpoint to decide its own default projection.
- */
-export function resolveSelectFields(def, displayField, pickerColumns, extraFields) {
-    if (!def)
-        return undefined;
-    const out = new Set();
-    if (displayField)
-        out.add(displayField);
-    if (def.useAsTitle)
-        out.add(def.useAsTitle);
-    const fallback = resolveFallbackDisplayField(def);
-    if (fallback)
-        out.add(fallback);
-    if (pickerColumns) {
-        for (const col of pickerColumns) {
-            const name = String(col.fieldName);
-            if (def.fields.some((f) => f.name === name))
-                out.add(name);
-        }
-    }
-    // Extra non-display fields a consumer needs on `record.fields` (e.g. the
-    // inline-image modal seeding alt-text). Loaded but not rendered as columns.
-    if (extraFields) {
-        for (const name of extraFields) {
-            if (def.fields.some((f) => f.name === name))
-                out.add(name);
-        }
-    }
-    if (def.fields.some((f) => f.name === 'title'))
-        out.add('title');
-    if (out.size === 0)
-        return undefined;
-    return Array.from(out);
-}

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

@@ -1,108 +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 { getCollectionAdminConfig, getCollectionDefinition, isSingleton } from '@byline/core';
-import { useTranslation } from '@byline/i18n/react';
-import { Button, CloseIcon, EditIcon, ErrorText, HelpText, IconButton, Label, } from '@byline/ui/react';
-import cx from 'clsx';
-import { useFieldError, useFieldValue } from '../../forms/form-context';
-import styles from './relation-field.module.css';
-import { RelationPicker } from './relation-picker';
-import { RelationSummary } from './relation-summary';
-export const RelationField = ({ field, value, defaultValue, onChange, id, path, }) => {
-    const fieldPath = path ?? field.name;
-    const htmlId = id ?? fieldPath;
-    const fieldError = useFieldError(fieldPath);
-    const fieldValue = useFieldValue(fieldPath);
-    const incomingValue = fieldValue !== undefined
-        ? (fieldValue ?? null)
-        : (value ??
-            defaultValue ??
-            null);
-    // Resolve the target collection definition + admin config. The admin
-    // config drives the picker-column rendering inside RelationSummary so
-    // the selected tile matches the picker row exactly. Missing target →
-    // render an inline error and disable the picker.
-    const targetDefinition = getCollectionDefinition(field.targetCollection);
-    const targetDef = targetDefinition != null && !isSingleton(targetDefinition) ? targetDefinition : null;
-    const targetAdminConfig = getCollectionAdminConfig(field.targetCollection);
-    const { t } = useTranslation('byline-admin');
-    const [pickerOpen, setPickerOpen] = useState(false);
-    // Cached target document from the most recent picker selection. Lets the
-    // tile render real display data (name, thumbnail) immediately after a
-    // pick without a round trip. Cleared via the `targetDocumentId`
-    // comparison in the render path.
-    const [pickedRecord, setPickedRecord] = useState(null);
-    const handleSelect = (selection) => {
-        setPickerOpen(false);
-        if (selection.record) {
-            setPickedRecord({ id: selection.targetDocumentId, record: selection.record });
-        }
-        else {
-            setPickedRecord(null);
-        }
-        onChange?.({
-            targetDocumentId: selection.targetDocumentId,
-            targetCollectionId: selection.targetCollectionId,
-        });
-    };
-    const handleRemove = () => {
-        setPickedRecord(null);
-        onChange?.(null);
-    };
-    // Only carry the cached picker record through to the summary when it
-    // still matches the current value — guards against a stale cache after
-    // an external value change (e.g. patch rollback).
-    const cachedRecord = pickedRecord && incomingValue && pickedRecord.id === incomingValue.targetDocumentId
-        ? pickedRecord.record
-        : null;
-    const isUnknown = targetDef == null;
-    return (<div className={`byline-field-relation ${field.name}`}>
-      <div className={cx('byline-field-relation-header', styles.header)}>
-        <Label id={`${htmlId}-label`} htmlFor={htmlId} label={field.label ?? field.name} required={!field.optional}/>
-      </div>
-      {isUnknown ? (<div className={cx('byline-field-relation-error-tile', styles['error-tile'])}>
-          <span>
-            {t('fields.relation.unknownError', {
-                name: field.name,
-                target: field.targetCollection,
-            })}
-          </span>
-          <span className={cx('byline-field-relation-error-text', styles['error-text'])}>
-            {t('fields.relation.unknownHint')}
-          </span>
-        </div>) : (
-        // Rounded frame below the label wrapping the interactive body
-        // (selected tile or select button) — see `.frame` in the CSS module.
-        <div className={cx('byline-field-relation-frame', styles.frame)}>
-          {incomingValue ? (<div className={cx('byline-field-relation-tile', styles.tile)}>
-              <RelationSummary targetDefinition={targetDef} targetAdminConfig={targetAdminConfig} displayField={field.displayField} value={incomingValue} cachedRecord={cachedRecord}/>
-              <div className={cx('byline-field-relation-actions', styles.actions)}>
-                <IconButton id={htmlId} type="button" intent="noeffect" size="xs" aria-label={t('fields.relation.changeAriaLabel', {
-                    label: targetDef.labels.singular,
-                })} onClick={() => setPickerOpen(true)}>
-                  <EditIcon width="15px" height="15px"/>
-                </IconButton>
-                <IconButton type="button" intent="noeffect" size="xs" aria-label={t('fields.relation.removeAriaLabel', {
-                    label: targetDef.labels.singular,
-                })} onClick={handleRemove}>
-                  <CloseIcon width="15px" height="15px"/>
-                </IconButton>
-              </div>
-            </div>) : (<Button id={htmlId} size="xs" variant="outlined" intent="noeffect" type="button" onClick={() => setPickerOpen(true)}>
-              {t('fields.relation.selectButton', { label: targetDef.labels.singular })}
-            </Button>)}
-        </div>)}
-
-      {field.helpText != null && <HelpText text={field.helpText}/>}
-
-      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError}/>}
-
-      {!isUnknown && (<RelationPicker targetCollectionPath={field.targetCollection} targetDefinition={targetDef} displayField={field.displayField} isOpen={pickerOpen} onSelect={handleSelect} onDismiss={() => setPickerOpen(false)}/>)}
-    </div>);
-};

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

@@ -1,142 +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 { getCollectionAdminConfig, getCollectionDefinition, isSingleton } from '@byline/core';
-import { useTranslation } from '@byline/i18n/react';
-import { Button, CloseIcon, DraggableSortable, ErrorText, GripperVerticalIcon, HelpText, IconButton, Label, moveItem, PlusIcon, useSortable, } from '@byline/ui/react';
-import cx from 'clsx';
-import { useFieldError, useFieldValue, useFormContext } from '../../forms/form-context';
-import styles from './relation-field.module.css';
-import { RelationPicker } from './relation-picker';
-import { RelationSummary } from './relation-summary';
-const RelationManyTile = ({ id, children, onRemove, removeAriaLabel }) => {
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-        id,
-        transition: { duration: 250, easing: 'cubic-bezier(0, 0.2, 0.2, 1)' },
-    });
-    const style = {
-        transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
-        transition,
-        zIndex: isDragging ? 10 : 'auto',
-    };
-    return (<div ref={setNodeRef} style={style} className={cx('byline-field-relation-many-tile', styles['many-tile'], isDragging && ['byline-field-relation-many-tile-dragging', styles['many-tile-dragging']])}>
-      <button type="button" className={cx('byline-field-relation-many-grip', styles['many-grip'])} {...attributes} {...listeners}>
-        <GripperVerticalIcon />
-      </button>
-      <div className={cx('byline-field-relation-many-body', styles['many-body'])}>{children}</div>
-      <IconButton type="button" size="xs" intent="noeffect" aria-label={removeAriaLabel} className={cx('byline-field-relation-many-remove', styles['many-remove'])} onClick={onRemove}>
-        <CloseIcon width="14px" height="14px"/>
-      </IconButton>
-    </div>);
-};
-export const RelationManyField = ({ field, defaultValue, id, path }) => {
-    const fieldPath = path ?? field.name;
-    const htmlId = id ?? fieldPath;
-    const { t } = useTranslation('byline-admin');
-    const fieldError = useFieldError(fieldPath);
-    const { getFieldValue, setFieldValue } = useFormContext();
-    const targetDefinition = getCollectionDefinition(field.targetCollection);
-    const targetDef = targetDefinition != null && !isSingleton(targetDefinition) ? targetDefinition : null;
-    const targetAdminConfig = getCollectionAdminConfig(field.targetCollection);
-    const isUnknown = targetDef == null;
-    const targetLabel = targetDef?.labels.singular ?? field.targetCollection;
-    const [pickerOpen, setPickerOpen] = useState(false);
-    // Records handed back by the picker, keyed by target id — lets a freshly
-    // added tile render real display data (title / thumbnail) without a refetch.
-    const [pickedRecords, setPickedRecords] = useState({});
-    // Subscribe to the live array so reorders / adds / removes re-render.
-    const liveValue = useFieldValue(fieldPath);
-    const items = Array.isArray(liveValue)
-        ? liveValue
-        : Array.isArray(defaultValue)
-            ? defaultValue
-            : [];
-    const currentArray = () => {
-        const v = getFieldValue(fieldPath);
-        if (Array.isArray(v))
-            return v;
-        return Array.isArray(defaultValue) ? defaultValue : [];
-    };
-    const handleAddMany = (selections) => {
-        setPickerOpen(false);
-        const current = currentArray();
-        // Dedup the batch against the current array — a target may appear at most
-        // once. The picker already disables already-added rows, so this is a
-        // belt-and-braces guard for stale state (e.g. a concurrent remove).
-        const existing = new Set(current.map((v) => v.targetDocumentId));
-        const additions = selections.filter((s) => !existing.has(s.targetDocumentId));
-        if (additions.length === 0)
-            return;
-        const records = additions.filter((s) => s.record != null);
-        if (records.length > 0) {
-            setPickedRecords((prev) => {
-                const next = { ...prev };
-                for (const s of records)
-                    next[s.targetDocumentId] = s.record;
-                return next;
-            });
-        }
-        setFieldValue(fieldPath, [
-            ...current,
-            ...additions.map((s) => ({
-                targetDocumentId: s.targetDocumentId,
-                targetCollectionId: s.targetCollectionId,
-            })),
-        ]);
-    };
-    const handleRemove = (targetDocumentId) => {
-        setFieldValue(fieldPath, currentArray().filter((v) => v.targetDocumentId !== targetDocumentId));
-    };
-    const handleDragEnd = ({ moveFromIndex, moveToIndex, }) => {
-        if (moveFromIndex === moveToIndex)
-            return;
-        setFieldValue(fieldPath, moveItem(currentArray(), moveFromIndex, moveToIndex));
-    };
-    return (<div className={`byline-field-relation ${field.name}`}>
-      <div className={cx('byline-field-relation-header', styles.header)}>
-        <Label id={`${htmlId}-label`} htmlFor={htmlId} label={field.label ?? field.name} required={!field.optional}/>
-      </div>
-      {isUnknown ? (<div className={cx('byline-field-relation-error-tile', styles['error-tile'])}>
-          <span>
-            {t('fields.relation.unknownError', {
-                name: field.name,
-                target: field.targetCollection,
-            })}
-          </span>
-          <span className={cx('byline-field-relation-error-text', styles['error-text'])}>
-            {t('fields.relation.unknownHint')}
-          </span>
-        </div>) : (<>
-          {/* Rounded frame below the label wrapping the interactive
-                body (tile list and add button) — see `.frame` in the CSS
-                module. */}
-          <div className={cx('byline-field-relation-frame', styles.frame)}>
-            {items.length === 0 ? (<p className={cx('byline-field-relation-many-empty', styles['many-empty'])}>
-                {t('fields.relation.manyEmpty', { label: targetDef.labels.plural })}
-              </p>) : (<DraggableSortable ids={items.map((v) => v.targetDocumentId)} onDragEnd={handleDragEnd} className={cx('byline-field-relation-many', styles.many)}>
-                {items.map((value) => (<RelationManyTile key={value.targetDocumentId} id={value.targetDocumentId} onRemove={() => handleRemove(value.targetDocumentId)} removeAriaLabel={t('fields.relation.removeAriaLabel', { label: targetLabel })}>
-                    <RelationSummary targetDefinition={targetDef} targetAdminConfig={targetAdminConfig} displayField={field.displayField} value={value} cachedRecord={pickedRecords[value.targetDocumentId] ?? null}/>
-                  </RelationManyTile>))}
-              </DraggableSortable>)}
-
-            <div className={cx('byline-field-relation-many-add', styles['many-add'])}>
-              <Button id={htmlId} size="xs" variant="outlined" intent="noeffect" type="button" onClick={() => setPickerOpen(true)}>
-                <PlusIcon width="14px" height="14px"/>
-                {t('fields.relation.addButton', { label: targetLabel })}
-              </Button>
-            </div>
-          </div>
-
-          {field.helpText != null && <HelpText text={field.helpText}/>}
-
-          {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError}/>}
-
-          <RelationPicker multiple targetCollectionPath={field.targetCollection} targetDefinition={targetDef} displayField={field.displayField} isOpen={pickerOpen} excludeIds={items.map((v) => v.targetDocumentId)} onSelectMany={handleAddMany} onDismiss={() => setPickerOpen(false)}/>
-        </>)}
-    </div>);
-};

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

@@ -1,240 +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, useState } from 'react';
-import { getCollectionAdminConfig } from '@byline/core';
-import { useTranslation } from '@byline/i18n/react';
-import { Button, CheckIcon, LoaderRing, Modal, Search } from '@byline/ui/react';
-import cx from 'clsx';
-import { useBylineFieldServices } from '../field-services-context';
-import { PickerCell, resolveFallbackDisplayField, resolveRowLabel, resolveSelectFields, } from './relation-display';
-import styles from './relation-picker.module.css';
-const PAGE_SIZE = 15;
-export const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField, extraSelectFields, isOpen, multiple = false, excludeIds, onSelect, onSelectMany, onDismiss, }) => {
-    const [query, setQuery] = useState('');
-    const [page, setPage] = useState(1);
-    const { t } = useTranslation('byline-admin');
-    const [selectedDocumentId, setSelectedDocumentId] = useState(null);
-    // Multi-select state. A Map keyed by target id preserves pick order (the
-    // confirmed batch appends in that order) and carries each row's record so
-    // picks survive page/search changes that swap out `documents`.
-    const [selectedMap, setSelectedMap] = useState(() => new Map());
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const [documents, setDocuments] = useState([]);
-    const [totalPages, setTotalPages] = useState(1);
-    const [collectionId, setCollectionId] = useState(null);
-    const { getCollectionDocuments } = useBylineFieldServices();
-    const targetAdminConfig = getCollectionAdminConfig(targetCollectionPath);
-    const pickerColumns = targetAdminConfig?.itemView;
-    // Reset local state each time the modal opens so prior queries don't leak.
-    useEffect(() => {
-        if (isOpen) {
-            setQuery('');
-            setPage(1);
-            setSelectedDocumentId(null);
-            setSelectedMap(new Map());
-            setError(null);
-        }
-    }, [isOpen]);
-    // Fetch whenever the modal is open and the query / page changes.
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        let cancelled = false;
-        const selectFields = resolveSelectFields(targetDefinition, displayField, pickerColumns, extraSelectFields);
-        setLoading(true);
-        setError(null);
-        // Item-view sort: the target collection's `itemViewSort` (boot-validated)
-        // orders the picker independently of its list view's `defaultSort`.
-        // Passed as explicit params because the list server fn gives an explicit
-        // `order` top precedence; when absent the server falls back through
-        // `defaultSort` → `created_at desc` (or `order_key asc` for orderable
-        // collections) exactly as before.
-        const itemViewSort = targetAdminConfig?.itemViewSort;
-        getCollectionDocuments({
-            collection: targetCollectionPath,
-            params: {
-                page,
-                page_size: PAGE_SIZE,
-                query: query.length > 0 ? query : undefined,
-                fields: selectFields,
-                ...(itemViewSort != null
-                    ? { order: String(itemViewSort.field), desc: itemViewSort.direction === 'desc' }
-                    : {}),
-            },
-        })
-            .then((response) => {
-            if (cancelled)
-                return;
-            setDocuments(response.docs);
-            setTotalPages(response.meta.totalPages ?? 1);
-            setCollectionId(response.included.collection.id);
-        })
-            .catch((err) => {
-            if (cancelled)
-                return;
-            setError(err instanceof Error ? err.message : t('fields.relation.picker.loadFailed'));
-        })
-            .finally(() => {
-            if (!cancelled)
-                setLoading(false);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [
-        isOpen,
-        targetCollectionPath,
-        query,
-        page,
-        displayField,
-        extraSelectFields,
-        targetDefinition,
-        pickerColumns,
-        getCollectionDocuments,
-        t,
-        targetAdminConfig?.itemViewSort,
-    ]);
-    const resolvedDisplayField = displayField ??
-        targetDefinition?.useAsTitle ??
-        resolveFallbackDisplayField(targetDefinition) ??
-        null;
-    const handleSelect = useCallback(() => {
-        if (!selectedDocumentId || !collectionId || !onSelect)
-            return;
-        const record = documents.find((d) => d?.id === selectedDocumentId);
-        onSelect({
-            targetDocumentId: selectedDocumentId,
-            targetCollectionId: collectionId,
-            record,
-        });
-    }, [selectedDocumentId, collectionId, documents, onSelect]);
-    const handleSelectMany = useCallback(() => {
-        if (selectedMap.size === 0 || !collectionId || !onSelectMany)
-            return;
-        onSelectMany(Array.from(selectedMap, ([targetDocumentId, record]) => ({
-            targetDocumentId,
-            targetCollectionId: collectionId,
-            record,
-        })));
-    }, [selectedMap, collectionId, onSelectMany]);
-    const toggleSelected = useCallback((doc) => {
-        const id = doc.id;
-        setSelectedMap((prev) => {
-            const next = new Map(prev);
-            if (next.has(id)) {
-                next.delete(id);
-            }
-            else {
-                next.set(id, doc);
-            }
-            return next;
-        });
-    }, []);
-    const title = t('fields.relation.selectPickerTitle', {
-        label: targetDefinition?.labels.singular ?? targetCollectionPath,
-    });
-    return (<Modal isOpen={isOpen} onDismiss={onDismiss}>
-      <Modal.Container style={{ maxWidth: '600px', width: '100%' }}>
-        <Modal.Header className={cx('byline-field-relation-picker-header', styles.header)}>
-          <h3 className={cx('byline-field-relation-picker-title', styles.title)}>{title}</h3>
-        </Modal.Header>
-        <Modal.Content>
-          <div className={cx('byline-field-relation-picker-body', styles.body)}>
-            <Search onSearch={(q) => {
-            setPage(1);
-            setQuery(q ?? '');
-        }} onClear={() => {
-            setPage(1);
-            setQuery('');
-        }} inputSize="sm" placeholder={t('fields.relation.picker.searchPlaceholder')}/>
-
-            <div className={cx('byline-field-relation-picker-list', styles.list)}>
-              {loading && documents.length === 0 && (<div className={cx('byline-field-relation-picker-loading', styles.loading)}>
-                  <LoaderRing size={24} color="#888888"/>
-                </div>)}
-              {!loading && error && (<div className={cx('byline-field-relation-picker-error', styles.error)}>
-                  {error}
-                </div>)}
-              {!loading && !error && documents.length === 0 && (<div className={cx('byline-field-relation-picker-empty', styles.empty)}>
-                  {t('fields.relation.picker.empty')}
-                </div>)}
-              {documents.length > 0 && (<ul className={cx('byline-field-relation-picker-rows', styles.rows)}>
-                  {documents.map((doc) => {
-                const id = doc.id;
-                const selected = multiple ? selectedMap.has(id) : selectedDocumentId === id;
-                const excluded = multiple && (excludeIds?.includes(id) ?? false);
-                return (<li key={id}>
-                        <button type="button" disabled={excluded} aria-pressed={multiple ? selected : undefined} title={excluded ? t('fields.relation.picker.alreadyAdded') : undefined} className={cx('byline-field-relation-picker-row-button', styles['row-button'], multiple && [
-                        'byline-field-relation-picker-row-multi',
-                        styles['row-multi'],
-                    ], selected && [
-                        'byline-field-relation-picker-row-selected',
-                        styles['row-selected'],
-                    ], excluded && [
-                        'byline-field-relation-picker-row-added',
-                        styles['row-added'],
-                    ])} onClick={() => {
-                        if (excluded)
-                            return;
-                        if (multiple) {
-                            toggleSelected(doc);
-                        }
-                        else {
-                            setSelectedDocumentId(id);
-                        }
-                    }}>
-                          {multiple && (<span aria-hidden="true" className={cx('byline-field-relation-picker-check', styles.check, (selected || excluded) && [
-                            'byline-field-relation-picker-check-checked',
-                            styles['check-checked'],
-                        ])}>
-                              {(selected || excluded) && <CheckIcon width="12px" height="12px"/>}
-                            </span>)}
-                          {pickerColumns && pickerColumns.length > 0 ? (<div className={cx('byline-field-relation-picker-row-cells', styles['row-cells'])}>
-                              {pickerColumns.map((col) => (<PickerCell key={String(col.fieldName)} column={col} record={doc}/>))}
-                            </div>) : (<div className={cx('byline-field-relation-picker-row-stack', styles['row-stack'])}>
-                              <span className={cx('byline-field-relation-picker-row-label', styles['row-label'])}>
-                                {resolveRowLabel(doc, resolvedDisplayField) || id}
-                              </span>
-                              {typeof doc.path === 'string' && doc.path.length > 0 && (<span className={cx('byline-field-relation-picker-row-path', styles['row-path'])}>
-                                  {doc.path}
-                                </span>)}
-                            </div>)}
-                          {excluded && (<span className={cx('byline-field-relation-picker-added-hint', styles['added-hint'])}>
-                              {t('fields.relation.picker.alreadyAdded')}
-                            </span>)}
-                        </button>
-                      </li>);
-            })}
-                </ul>)}
-            </div>
-
-            {totalPages > 1 && (<div className={cx('byline-field-relation-picker-pager', styles.pager)}>
-                <Button size="xs" variant="outlined" intent="noeffect" type="button" disabled={page <= 1 || loading} onClick={() => setPage((p) => Math.max(1, p - 1))}>
-                  {t('common.pager.previous')}
-                </Button>
-                <span>{t('common.pager.pageOf', { page, total: totalPages })}</span>
-                <Button size="xs" variant="outlined" intent="noeffect" type="button" disabled={page >= totalPages || loading} onClick={() => setPage((p) => Math.min(totalPages, p + 1))}>
-                  {t('common.pager.next')}
-                </Button>
-              </div>)}
-          </div>
-        </Modal.Content>
-        <Modal.Actions>
-          <Button size="sm" intent="noeffect" type="button" onClick={onDismiss} className={cx('byline-field-relation-picker-action', styles.action)}>
-            {t('common.actions.cancel')}
-          </Button>
-          <Button size="sm" className={cx('byline-field-relation-picker-action', styles.action)} intent="primary" type="button" disabled={multiple ? selectedMap.size === 0 : !selectedDocumentId} onClick={multiple ? handleSelectMany : handleSelect}>
-            {multiple
-            ? t('fields.relation.picker.addSelected', { count: selectedMap.size })
-            : t('common.actions.select')}
-          </Button>
-        </Modal.Actions>
-      </Modal.Container>
-    </Modal>);
-};

package/dist/fields/relation/relation-summary.jsx

@@ -1,45 +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 { PickerCell, resolveFallbackDisplayField, resolveRowLabel } from './relation-display';
-import styles from './relation-summary.module.css';
-export function RelationSummary({ targetDefinition, targetAdminConfig, displayField, value, cachedRecord, }) {
-    const pickerColumns = targetAdminConfig?.itemView;
-    // Unresolved (deleted target).
-    if (value._resolved === false) {
-        return (<div className={cx('byline-relation-summary-stack', styles.stack)}>
-        <span className={cx('byline-relation-summary-kind', styles.kind)}>
-          {targetDefinition.labels.singular}
-        </span>
-        <span className={cx('byline-relation-summary-value-mono byline-relation-summary-missing', styles['value-mono'], styles.missing)}>
-          (target not found) {value.targetDocumentId}
-        </span>
-      </div>);
-    }
-    // Prefer the populated envelope's document; fall back to the cached
-    // picker record; finally fall back to rendering just the raw ref.
-    const record = (value._resolved === true && !value._cycle && value.document) || cachedRecord || null;
-    if (record && pickerColumns && pickerColumns.length > 0) {
-        return (<div className={cx('byline-relation-summary-row', styles.row)}>
-        {pickerColumns.map((col) => (<PickerCell key={String(col.fieldName)} column={col} record={record}/>))}
-      </div>);
-    }
-    const resolvedDisplayField = displayField ??
-        targetDefinition.useAsTitle ??
-        resolveFallbackDisplayField(targetDefinition) ??
-        null;
-    const label = record ? resolveRowLabel(record, resolvedDisplayField) : null;
-    return (<div className={cx('byline-relation-summary-stack', styles.stack)}>
-      <span className={cx('byline-relation-summary-kind', styles.kind)}>
-        {targetDefinition.labels.singular}
-      </span>
-      {label ? (<span className={cx('byline-relation-summary-value', styles.value)}>{label}</span>) : (<span className={cx('byline-relation-summary-value-mono', styles['value-mono'])}>
-          {value.targetDocumentId}
-        </span>)}
-    </div>);
-}