@byline/admin 3.14.0 → 3.15.0

package/dist/fields/relation/relation-column-formatter.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 type { CollectionDefinition, ColumnDefinition, ColumnFormatter, RelationField } from '@byline/core';
+/**
+ * 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 declare function formatRelationCellText(field: Pick<RelationField, 'hasMany'>, value: unknown, displayField: string | null): string | null;
+/**
+ * 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 declare function relationColumnFormatter(field: RelationField): ColumnFormatter;
+/**
+ * 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 declare function applyRelationColumnFormatters(columns: ColumnDefinition[], definition: CollectionDefinition): ColumnDefinition[];

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

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { getCollectionDefinition } from "@byline/core";
+import { resolveFallbackDisplayField, resolveRowLabel } from "./relation-display.js";
+const MAX_SHOWN = 3;
+function labelFor(env, displayField) {
+    if (null == env || false === env._resolved || null == env.document) return null;
+    return resolveRowLabel(env.document, displayField);
+}
+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)=>null != l && l.length > 0);
+    if (0 === labels.length) 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(', ');
+}
+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 null != text ? /*#__PURE__*/ jsx("span", {
+                className: "byline-relation-column",
+                children: text
+            }) : /*#__PURE__*/ jsx("span", {
+                className: "byline-relation-column-empty muted",
+                children: "—"
+            });
+        }
+    };
+}
+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;
+    });
+}
+export { applyRelationColumnFormatters, formatRelationCellText, relationColumnFormatter };

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
-import { getCollectionAdminConfig } from "@byline/core";
+import { getCollectionAdminConfig, resolveItemViewColumns } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Button, LoaderRing, Modal, Search } from "@byline/ui/react";
 import classnames from "classnames";
@@ -20,7 +20,7 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
     const [collectionId, setCollectionId] = useState(null);
     const { getCollectionDocuments } = useBylineFieldServices();
     const targetAdminConfig = getCollectionAdminConfig(targetCollectionPath);
-    const pickerColumns = targetAdminConfig?.picker;
+    const pickerColumns = resolveItemViewColumns(targetAdminConfig);
     useEffect(()=>{
         if (isOpen) {
             setQuery('');

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

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { resolveItemViewColumns } from "@byline/core";
 import classnames from "classnames";
 import { PickerCell, resolveFallbackDisplayField, resolveRowLabel } from "./relation-display.js";
 import relation_summary_module from "./relation-summary.module.js";
 function RelationSummary({ targetDefinition, targetAdminConfig, displayField, value, cachedRecord }) {
-    const pickerColumns = targetAdminConfig?.picker;
+    const pickerColumns = resolveItemViewColumns(targetAdminConfig);
     if (false === value._resolved) return /*#__PURE__*/ jsxs("div", {
         className: classnames('byline-relation-summary-stack', relation_summary_module.stack),
         children: [

package/dist/react.d.ts

@@ -45,6 +45,7 @@ export * from './fields/image/image-upload-field.js';
 export * from './fields/local-date-time.js';
 export * from './fields/locale-badge.js';
 export * from './fields/numerical/numerical-field.js';
+export * from './fields/relation/relation-column-formatter.js';
 export * from './fields/relation/relation-field.js';
 export * from './fields/relation/relation-many-field.js';
 export * from './fields/relation/relation-picker.js';

package/dist/react.js

@@ -16,6 +16,7 @@ export * from "./fields/image/image-upload-field.js";
 export * from "./fields/local-date-time.js";
 export * from "./fields/locale-badge.js";
 export * from "./fields/numerical/numerical-field.js";
+export * from "./fields/relation/relation-column-formatter.js";
 export * from "./fields/relation/relation-field.js";
 export * from "./fields/relation/relation-many-field.js";
 export * from "./fields/relation/relation-picker.js";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -156,10 +156,10 @@
     "uuid": "^14.0.0",
     "zod": "^4.4.3",
     "zod-form-data": "^3.0.1",
-    "@byline/auth": "3.14.0",
-    "@byline/ui": "3.14.0",
-    "@byline/core": "3.14.0",
-    "@byline/i18n": "3.14.0"
+    "@byline/auth": "3.15.0",
+    "@byline/core": "3.15.0",
+    "@byline/i18n": "3.15.0",
+    "@byline/ui": "3.15.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/fields/relation/relation-column-formatter.tsx

@@ -0,0 +1,119 @@
+/**
+ * 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 type {
+  CollectionDefinition,
+  ColumnDefinition,
+  ColumnFormatter,
+  RelationField,
+} from '@byline/core'
+import { getCollectionDefinition } from '@byline/core'
+
+import { resolveFallbackDisplayField, resolveRowLabel } from './relation-display'
+
+// ---------------------------------------------------------------------------
+// Built-in list-view column formatter for `relation` fields. Renders the
+// target's title (via the displayField → useAsTitle → first-text chain)
+// instead of a raw `target_document_id`. For `hasMany` relations it renders
+// the first few titles followed by "+N more".
+//
+// Requires the list read to populate relation columns (depth 1) — the list
+// server fn does this for relation columns so each cell value arrives as a
+// populated relation envelope (`{ targetDocumentId, _resolved, document }`)
+// or, for hasMany, an array of them.
+// ---------------------------------------------------------------------------
+
+interface RelationEnvelope {
+  targetDocumentId?: string
+  _resolved?: boolean
+  document?: Record<string, any>
+}
+
+/** Max titles shown for a hasMany cell before collapsing to "+N more". */
+const MAX_SHOWN = 3
+
+function labelFor(
+  env: RelationEnvelope | null | undefined,
+  displayField: string | null
+): string | null {
+  // 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: Pick<RelationField, 'hasMany'>,
+  value: unknown,
+  displayField: string | null
+): string | null {
+  const envelopes: RelationEnvelope[] = field.hasMany
+    ? Array.isArray(value)
+      ? (value as RelationEnvelope[])
+      : []
+    : value
+      ? [value as RelationEnvelope]
+      : []
+
+  const labels = envelopes
+    .map((env) => labelFor(env, displayField))
+    .filter((l): l is string => 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: RelationField): ColumnFormatter {
+  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: ColumnDefinition[],
+  definition: CollectionDefinition
+): ColumnDefinition[] {
+  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 as RelationField) }
+    }
+    return col
+  })
+}

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

@@ -9,7 +9,7 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import type { CollectionAdminConfig, CollectionDefinition } from '@byline/core'
-import { getCollectionAdminConfig } from '@byline/core'
+import { getCollectionAdminConfig, resolveItemViewColumns } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import { Button, LoaderRing, Modal, Search } from '@byline/ui/react'
 import cx from 'classnames'
@@ -102,7 +102,7 @@ export const RelationPicker = ({
 
   const targetAdminConfig: CollectionAdminConfig | null =
     getCollectionAdminConfig(targetCollectionPath)
-  const pickerColumns = targetAdminConfig?.picker
+  const pickerColumns = resolveItemViewColumns(targetAdminConfig)
 
   // Reset local state each time the modal opens so prior queries don't leak.
   useEffect(() => {

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

@@ -7,6 +7,7 @@
  */
 
 import type { CollectionAdminConfig, CollectionDefinition } from '@byline/core'
+import { resolveItemViewColumns } from '@byline/core'
 import cx from 'classnames'
 
 import { PickerCell, resolveFallbackDisplayField, resolveRowLabel } from './relation-display'
@@ -17,7 +18,7 @@ import styles from './relation-summary.module.css'
 //
 // Rendering priority (mirrors RelationPicker so the tile and picker rows
 // look identical):
-//   1. target `CollectionAdminConfig.picker` columns (full fidelity, with
+//   1. target `CollectionAdminConfig.itemView` columns (full fidelity, with
 //      formatters — e.g. MediaThumbnail + title)
 //   2. explicit `displayField` prop (from source schema's RelationField)
 //   3. `CollectionDefinition.useAsTitle`
@@ -62,7 +63,7 @@ export function RelationSummary({
   value,
   cachedRecord,
 }: RelationSummaryProps) {
-  const pickerColumns = targetAdminConfig?.picker
+  const pickerColumns = resolveItemViewColumns(targetAdminConfig)
 
   // Unresolved (deleted target).
   if (value._resolved === false) {

package/src/react.ts

@@ -48,6 +48,7 @@ export * from './fields/image/image-upload-field.js'
 export * from './fields/local-date-time.js'
 export * from './fields/locale-badge.js'
 export * from './fields/numerical/numerical-field.js'
+export * from './fields/relation/relation-column-formatter.js'
 export * from './fields/relation/relation-field.js'
 export * from './fields/relation/relation-many-field.js'
 export * from './fields/relation/relation-picker.js'