@byline/admin 3.12.1 → 3.13.0

package/src/forms/status-transitions.test.node.ts

@@ -0,0 +1,87 @@
+/**
+ * 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 { WorkflowStatus } from '@byline/core'
+import { describe, expect, it } from 'vitest'
+
+import { computeStatusTransitions } from './status-transitions'
+
+const draft: WorkflowStatus = { name: 'draft', label: 'Draft' }
+const review: WorkflowStatus = { name: 'review', label: 'Review' }
+const published: WorkflowStatus = { name: 'published', label: 'Published' }
+const flow = [draft, review, published]
+
+describe('computeStatusTransitions', () => {
+  it('falls back to nextStatus when there is no workflow or no current status', () => {
+    expect(computeStatusTransitions(undefined, undefined, published)).toEqual({
+      primaryStatus: published,
+      secondaryStatuses: [],
+      isTerminal: false,
+    })
+    expect(computeStatusTransitions('draft', [], published)).toEqual({
+      primaryStatus: published,
+      secondaryStatuses: [],
+      isTerminal: false,
+    })
+    expect(computeStatusTransitions(undefined, flow, published)).toEqual({
+      primaryStatus: published,
+      secondaryStatuses: [],
+      isTerminal: false,
+    })
+  })
+
+  it('exposes no transitions for a single-status workflow', () => {
+    expect(computeStatusTransitions('draft', [draft], undefined)).toEqual({
+      primaryStatus: undefined,
+      secondaryStatuses: [],
+      isTerminal: false,
+    })
+  })
+
+  it('falls back to nextStatus when the current status is not in the workflow', () => {
+    expect(computeStatusTransitions('archived', flow, review)).toEqual({
+      primaryStatus: review,
+      secondaryStatuses: [],
+      isTerminal: false,
+    })
+  })
+
+  it('at the first step: primary is the forward step, no back-steps', () => {
+    const result = computeStatusTransitions('draft', flow, review)
+    expect(result.primaryStatus).toBe(review)
+    expect(result.isTerminal).toBe(false)
+    // Forward step is the primary, so it is filtered out of the dropdown.
+    expect(result.secondaryStatuses).toEqual([])
+  })
+
+  it('in the middle: primary is forward, dropdown offers reset-to-first', () => {
+    const result = computeStatusTransitions('review', flow, published)
+    expect(result.primaryStatus).toBe(published)
+    expect(result.isTerminal).toBe(false)
+    // Reset-to-first (draft) is surfaced; the forward step (published) is the
+    // primary and filtered out. The "back one step" is draft itself here, so
+    // it is not duplicated.
+    expect(result.secondaryStatuses).toEqual([draft])
+  })
+
+  it('at the terminal step: primary is the current status, back-steps in dropdown', () => {
+    const result = computeStatusTransitions('published', flow, undefined)
+    expect(result.primaryStatus).toBe(published)
+    expect(result.isTerminal).toBe(true)
+    // Both reset-to-first (draft) and back-one-step (review) are offered.
+    expect(result.secondaryStatuses).toEqual([draft, review])
+  })
+
+  it('terminal back-one-step is omitted when the previous is already the first', () => {
+    const twoStep = [draft, published]
+    const result = computeStatusTransitions('published', twoStep, undefined)
+    expect(result.isTerminal).toBe(true)
+    // Only reset-to-first (draft); no separate back-one-step since prev === first.
+    expect(result.secondaryStatuses).toEqual([draft])
+  })
+})

package/src/forms/status-transitions.ts

@@ -0,0 +1,86 @@
+/**
+ * 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 { WorkflowStatus } from '@byline/core'
+
+export interface StatusTransitions {
+  primaryStatus: WorkflowStatus | undefined
+  secondaryStatuses: WorkflowStatus[]
+  isTerminal: boolean
+}
+
+/**
+ * Compute the primary and secondary status transitions for the ComboButton.
+ * - Primary: the main action (forward step), or the current status itself
+ *   when the document has reached the final workflow step (terminal state).
+ * - Secondary: other available transitions to show as dropdown options.
+ * - isTerminal: true when the document is at the final workflow status —
+ *   the primary button renders as a non-actionable indicator and all
+ *   back-steps move into the dropdown.
+ */
+export function computeStatusTransitions(
+  currentStatus: string | undefined,
+  workflowStatuses: WorkflowStatus[] | undefined,
+  nextStatus: WorkflowStatus | undefined
+): StatusTransitions {
+  if (!workflowStatuses || workflowStatuses.length === 0 || !currentStatus) {
+    return { primaryStatus: nextStatus, secondaryStatuses: [], isTerminal: false }
+  }
+
+  // Single-status workflows (e.g. SINGLE_STATUS_WORKFLOW for lookups) have
+  // no transitions — short-circuit so the form shows only Close / Save.
+  if (workflowStatuses.length <= 1) {
+    return { primaryStatus: undefined, secondaryStatuses: [], isTerminal: false }
+  }
+
+  const currentIndex = workflowStatuses.findIndex((s) => s.name === currentStatus)
+  if (currentIndex === -1) {
+    return { primaryStatus: nextStatus, secondaryStatuses: [], isTerminal: false }
+  }
+
+  const isAtEnd = currentIndex === workflowStatuses.length - 1
+  const isAtStart = currentIndex === 0
+
+  // Collect all available target statuses
+  const availableTargets: WorkflowStatus[] = []
+
+  // Reset to first (if not at first)
+  if (!isAtStart && workflowStatuses[0]) {
+    availableTargets.push(workflowStatuses[0])
+  }
+
+  // Back one step (if not at start and the previous is not already the first)
+  const prev = workflowStatuses[currentIndex - 1]
+  if (currentIndex > 1 && prev) {
+    availableTargets.push(prev)
+  }
+
+  // Forward one step (if not at end) - this is the nextStatus
+  const next = workflowStatuses[currentIndex + 1]
+  if (!isAtEnd && next) {
+    availableTargets.push(next)
+  }
+
+  if (isAtEnd) {
+    // Terminal state: the primary button is a non-actionable indicator of the
+    // current status; both back-steps (revert to previous / reset to first)
+    // are surfaced in the dropdown.
+    return {
+      primaryStatus: workflowStatuses[currentIndex],
+      secondaryStatuses: availableTargets,
+      isTerminal: true,
+    }
+  }
+
+  // Not at end: primary is the forward step (nextStatus)
+  return {
+    primaryStatus: nextStatus,
+    secondaryStatuses: availableTargets.filter((s) => s.name !== nextStatus?.name),
+    isTerminal: false,
+  }
+}

package/src/forms/tree-placement-widget.module.css

@@ -0,0 +1,87 @@
+/**
+ * TreePlacementWidget — sidebar widget for placing a document within its
+ * collection's single-parent tree (the `tree: true` primitive).
+ *
+ * Override handles:
+ *   .byline-form-tree           — wrapper div
+ *   .byline-form-tree-current   — current-parent line
+ *   .byline-form-tree-actions   — actions row
+ *   .byline-form-tree-link      — text-button actions (move to top level / remove)
+ *   .byline-form-tree-error     — inline error
+ */
+
+.tree,
+:global(.byline-form-tree) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.heading,
+:global(.byline-form-tree-heading) {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.current,
+:global(.byline-form-tree-current) {
+  font-size: 0.875rem;
+}
+
+.parentLabel {
+  color: var(--gray-500);
+}
+
+.parentValue {
+  font-weight: 500;
+}
+
+.root {
+  font-style: italic;
+  font-weight: 400;
+  color: var(--gray-500);
+}
+
+.actions,
+:global(.byline-form-tree-actions) {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.link,
+:global(.byline-form-tree-link) {
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font-size: 0.8rem;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.link:disabled,
+:global(.byline-form-tree-link):disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.error,
+:global(.byline-form-tree-error) {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--danger-600, #c0392b);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/forms/tree-placement-widget.tsx

@@ -0,0 +1,202 @@
+'use client'
+
+/**
+ * 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 { getCollectionDefinition } from '@byline/core'
+import { useTranslation } from '@byline/i18n/react'
+import { Button } from '@byline/ui/react'
+import cx from 'classnames'
+
+import { useBylineFieldServices } from '../fields/field-services-context.js'
+import { RelationPicker } from '../fields/relation/relation-picker.js'
+import styles from './tree-placement-widget.module.css'
+
+export interface TreePlacementWidgetProps {
+  /** The collection path (`tree: true`). */
+  collectionPath: string
+  /** The logical id of the document being edited. */
+  documentId: string
+  /** The collection's `useAsTitle` field, used to label the chosen parent. */
+  useAsTitle?: string
+}
+
+/**
+ * Sidebar widget for placing the current document within its collection's
+ * single-parent document tree (the `tree: true` primitive — docs/DOCUMENT-TREE.md).
+ *
+ * The tree is document-grain and **unversioned**, so changes here write
+ * immediately (independent of the form's content save). The editor picks a
+ * parent through the collection's own relation picker — same search / columns
+ * UX as a relation field — or moves the document to the top level; the server
+ * enforces the cycle / same-collection invariants and fires the
+ * structural-change invalidation event.
+ *
+ * Renders only in edit mode (placement needs a persisted document) and only when
+ * the host wires the tree services. Stable override handle: `.byline-form-tree`.
+ */
+export const TreePlacementWidget = ({
+  collectionPath,
+  documentId,
+  useAsTitle,
+}: TreePlacementWidgetProps) => {
+  const { t } = useTranslation('byline-admin')
+  const { getTreeAncestors, getTreeParent, placeTreeNode } = useBylineFieldServices()
+  const targetDefinition = getCollectionDefinition(collectionPath)
+
+  const [parent, setParent] = useState<{ id: string; title: string } | null>(null)
+  // Whether the document has an edge row at all. `false` = *unplaced* (no row);
+  // `true` with a null `parent` = a *root*. Distinguishing the two drives the
+  // "Add to tree" (unplaced) vs "Top level" (root) display. Hosts that don't
+  // wire `getTreeParent` fall back to `true` — the pre-tri-state behaviour.
+  const [placed, setPlaced] = useState(true)
+  const [loading, setLoading] = useState(true)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [pickerOpen, setPickerOpen] = useState(false)
+
+  const treeServicesReady = getTreeAncestors != null && placeTreeNode != null
+
+  // Load the document's placement state and current parent on mount. The parent
+  // title comes from the (hydrated) ancestor chain; `getTreeParent` (when wired)
+  // tells unplaced from root, which the ancestor chain alone cannot.
+  useEffect(() => {
+    if (getTreeAncestors == null) return
+    let cancelled = false
+    setLoading(true)
+    Promise.all([
+      getTreeAncestors({ collection: collectionPath, documentId }),
+      getTreeParent?.({ collection: collectionPath, documentId }) ??
+        Promise.resolve({ placed: true, parentDocumentId: null }),
+    ])
+      .then(([ancestors, placement]) => {
+        if (cancelled) return
+        const immediate = ancestors.at(-1)
+        setParent(immediate ? { id: immediate.id, title: immediate.title } : null)
+        setPlaced(placement.placed)
+      })
+      .catch(() => {
+        if (!cancelled) setError(t('treeWidget.error'))
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [getTreeAncestors, getTreeParent, collectionPath, documentId, t])
+
+  // Place (or re-parent) the node, optimistically updating the current-parent
+  // display and reverting on a server rejection (e.g. a cycle). Any successful
+  // placement (including making the node a root) leaves it placed.
+  const place = useCallback(
+    async (parentDocumentId: string | null, optimistic: { id: string; title: string } | null) => {
+      if (placeTreeNode == null || busy) return
+      const previousParent = parent
+      const previousPlaced = placed
+      setError(null)
+      setBusy(true)
+      setParent(optimistic)
+      setPlaced(true)
+      try {
+        await placeTreeNode({ collection: collectionPath, documentId, parentDocumentId })
+      } catch {
+        setParent(previousParent)
+        setPlaced(previousPlaced)
+        setError(t('treeWidget.error'))
+      } finally {
+        setBusy(false)
+      }
+    },
+    [placeTreeNode, busy, parent, placed, collectionPath, documentId, t]
+  )
+
+  const handlePick = useCallback(
+    (selection: { targetDocumentId: string; record?: Record<string, any> }) => {
+      setPickerOpen(false)
+      const title = useAsTitle ? selection.record?.[useAsTitle] : undefined
+      place(selection.targetDocumentId, {
+        id: selection.targetDocumentId,
+        title: typeof title === 'string' && title.length > 0 ? title : selection.targetDocumentId,
+      })
+    },
+    [place, useAsTitle]
+  )
+
+  if (!treeServicesReady) return null
+
+  return (
+    <div className={cx('byline-form-tree', styles.tree)}>
+      <span className={cx('byline-form-tree-heading', styles.heading)}>
+        {t('treeWidget.label')}
+      </span>
+
+      <div className={cx('byline-form-tree-current', styles.current)}>
+        <span className={styles.parentLabel}>{t('treeWidget.parentPrefix')}</span>{' '}
+        {!placed ? (
+          <span className={cx(styles.parentValue, styles.root)}>{t('treeWidget.notInTree')}</span>
+        ) : parent ? (
+          <span className={styles.parentValue}>{parent.title}</span>
+        ) : (
+          <span className={cx(styles.parentValue, styles.root)}>{t('treeWidget.rootOption')}</span>
+        )}
+      </div>
+
+      <div className={cx('byline-form-tree-actions', styles.actions)}>
+        <Button
+          type="button"
+          size="xs"
+          variant="outlined"
+          intent="noeffect"
+          disabled={loading || busy}
+          onClick={() => setPickerOpen(true)}
+        >
+          {t('treeWidget.choose')}
+        </Button>
+        {!placed ? (
+          <button
+            type="button"
+            className={cx('byline-form-tree-link', styles.link)}
+            disabled={loading || busy}
+            onClick={() => place(null, null)}
+          >
+            {t('treeWidget.addToTree')}
+          </button>
+        ) : (
+          parent != null && (
+            <button
+              type="button"
+              className={cx('byline-form-tree-link', styles.link)}
+              disabled={busy}
+              onClick={() => place(null, null)}
+            >
+              {t('treeWidget.makeRoot')}
+            </button>
+          )
+        )}
+      </div>
+
+      {error != null && <p className={cx('byline-form-tree-error', styles.error)}>{error}</p>}
+
+      {targetDefinition != null && (
+        <RelationPicker
+          targetCollectionPath={collectionPath}
+          targetDefinition={targetDefinition}
+          displayField={useAsTitle}
+          isOpen={pickerOpen}
+          onSelect={handlePick}
+          onDismiss={() => setPickerOpen(false)}
+        />
+      )}
+
+      <span className={styles['sr-only']}>{t('treeWidget.srDescription')}</span>
+    </div>
+  )
+}

package/src/forms/use-form-layout.test.node.ts

@@ -0,0 +1,82 @@
+/**
+ * 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 { CollectionAdminConfig, Field, GroupDefinition, RowDefinition } from '@byline/core'
+import { describe, expect, it } from 'vitest'
+
+import { buildFieldToTabPath } from './use-form-layout'
+
+const field = (name: string): Field => ({ name, type: 'text', label: name }) as Field
+
+const fieldNames = ['title', 'body', 'seoTitle', 'seoDesc', 'note']
+const fieldByName = new Map<string, Field>(fieldNames.map((n) => [n, field(n)]))
+
+const rowByName = new Map<string, RowDefinition>([
+  ['seoRow', { name: 'seoRow', fields: ['seoTitle', 'seoDesc'] }],
+])
+const groupByName = new Map<string, GroupDefinition>([
+  ['seoGroup', { name: 'seoGroup', label: 'SEO', fields: ['seoRow'] }],
+])
+
+describe('buildFieldToTabPath', () => {
+  it('returns an empty map when there are no tab sets', () => {
+    const map = buildFieldToTabPath(undefined, fieldByName, rowByName, groupByName)
+    expect(map.size).toBe(0)
+  })
+
+  it('maps direct fields to their tab set + tab', () => {
+    const adminConfig = {
+      tabSets: [
+        {
+          name: 'main',
+          tabs: [
+            { name: 'content', label: 'Content', fields: ['title', 'body'] },
+            { name: 'meta', label: 'Meta', fields: ['note'] },
+          ],
+        },
+      ],
+    } as unknown as CollectionAdminConfig
+
+    const map = buildFieldToTabPath(adminConfig, fieldByName, rowByName, groupByName)
+    expect(map.get('title')).toEqual({ tabSetName: 'main', tabName: 'content' })
+    expect(map.get('body')).toEqual({ tabSetName: 'main', tabName: 'content' })
+    expect(map.get('note')).toEqual({ tabSetName: 'main', tabName: 'meta' })
+  })
+
+  it('recurses through rows and groups to reach nested fields', () => {
+    const adminConfig = {
+      tabSets: [
+        {
+          name: 'main',
+          tabs: [{ name: 'seo', label: 'SEO', fields: ['seoGroup'] }],
+        },
+      ],
+    } as unknown as CollectionAdminConfig
+
+    const map = buildFieldToTabPath(adminConfig, fieldByName, rowByName, groupByName)
+    // seoGroup → seoRow → [seoTitle, seoDesc]
+    expect(map.get('seoTitle')).toEqual({ tabSetName: 'main', tabName: 'seo' })
+    expect(map.get('seoDesc')).toEqual({ tabSetName: 'main', tabName: 'seo' })
+    // Container names themselves are not fields, so are not indexed.
+    expect(map.has('seoGroup')).toBe(false)
+    expect(map.has('seoRow')).toBe(false)
+  })
+
+  it('does not loop forever on a self-referential row cycle', () => {
+    const cyclicRows = new Map<string, RowDefinition>([
+      ['loop', { name: 'loop', fields: ['loop', 'title'] }],
+    ])
+    const adminConfig = {
+      tabSets: [{ name: 'main', tabs: [{ name: 't', label: 'T', fields: ['loop'] }] }],
+    } as unknown as CollectionAdminConfig
+
+    const map = buildFieldToTabPath(adminConfig, fieldByName, cyclicRows, groupByName)
+    // The cycle guard stops the re-visit; the real field is still indexed.
+    expect(map.get('title')).toEqual({ tabSetName: 'main', tabName: 't' })
+  })
+})

package/src/forms/use-form-layout.ts

@@ -0,0 +1,134 @@
+'use client'
+
+/**
+ * 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 { useMemo } from 'react'
+
+import type {
+  CollectionAdminConfig,
+  Field,
+  GroupDefinition,
+  LayoutDefinition,
+  RowDefinition,
+  TabSetDefinition,
+} from '@byline/core'
+
+/** Which tab set + tab a schema field is placed under. */
+export interface TabPath {
+  tabSetName: string
+  tabName: string
+}
+
+/**
+ * Derived lookup tables that drive the form's layout walk and per-tab error
+ * badges. All are pure derivations of `adminConfig` + `fields`; the startup
+ * validator guarantees every reachable name resolves and every schema field is
+ * placed at most once, so the consuming render-time lookups stay unguarded.
+ */
+export interface FormLayout {
+  /** Schema field name → field definition. */
+  fieldByName: Map<string, Field>
+  tabSetByName: Map<string, TabSetDefinition>
+  rowByName: Map<string, RowDefinition>
+  groupByName: Map<string, GroupDefinition>
+  /** Region placement; synthesised to `{ main: <all fields> }` when omitted. */
+  layout: LayoutDefinition
+  /** Reverse index: schema field name → which tab set + tab it lives in. */
+  fieldToTabPath: Map<string, TabPath>
+}
+
+/**
+ * Build the reverse index from schema field name to its enclosing tab set +
+ * tab. Fields not under any tab set (e.g. raw-field placement directly in
+ * `layout.main`) are absent from the map. Rows and groups are recursed into;
+ * the `seen` set guards against a config that references a row/group cycle.
+ */
+export function buildFieldToTabPath(
+  adminConfig: CollectionAdminConfig | undefined,
+  fieldByName: Map<string, Field>,
+  rowByName: Map<string, RowDefinition>,
+  groupByName: Map<string, GroupDefinition>
+): Map<string, TabPath> {
+  const map = new Map<string, TabPath>()
+  const visit = (
+    names: readonly string[],
+    tabSetName: string,
+    tabName: string,
+    seen: Set<string>
+  ) => {
+    for (const name of names) {
+      if (fieldByName.has(name)) {
+        map.set(name, { tabSetName, tabName })
+      } else if (seen.has(name)) {
+      } else if (rowByName.has(name)) {
+        const row = rowByName.get(name)!
+        const next = new Set(seen).add(name)
+        visit(row.fields, tabSetName, tabName, next)
+      } else if (groupByName.has(name)) {
+        const group = groupByName.get(name)!
+        const next = new Set(seen).add(name)
+        visit(group.fields, tabSetName, tabName, next)
+      }
+    }
+  }
+  for (const set of adminConfig?.tabSets ?? []) {
+    for (const tab of set.tabs) {
+      visit(tab.fields, set.name, tab.name, new Set())
+    }
+  }
+  return map
+}
+
+/**
+ * Memoise the layout primitives + lookup tables the form renderer walks.
+ * Rebuilt only when `adminConfig` / `fields` change.
+ */
+export function useFormLayout(
+  adminConfig: CollectionAdminConfig | undefined,
+  fields: Field[]
+): FormLayout {
+  const fieldByName = useMemo(() => {
+    const map = new Map<string, Field>()
+    for (const field of fields) {
+      if ('name' in field) map.set(field.name, field)
+    }
+    return map
+  }, [fields])
+
+  const tabSetByName = useMemo(() => {
+    const map = new Map<string, TabSetDefinition>()
+    for (const set of adminConfig?.tabSets ?? []) map.set(set.name, set)
+    return map
+  }, [adminConfig])
+
+  const rowByName = useMemo(() => {
+    const map = new Map<string, RowDefinition>()
+    for (const row of adminConfig?.rows ?? []) map.set(row.name, row)
+    return map
+  }, [adminConfig])
+
+  const groupByName = useMemo(() => {
+    const map = new Map<string, GroupDefinition>()
+    for (const group of adminConfig?.groups ?? []) map.set(group.name, group)
+    return map
+  }, [adminConfig])
+
+  // When `layout` is omitted, synthesise main = all schema fields in order.
+  const layout = useMemo<LayoutDefinition>(() => {
+    if (adminConfig?.layout) return adminConfig.layout
+    return { main: fields.filter((f) => 'name' in f).map((f) => (f as { name: string }).name) }
+  }, [adminConfig, fields])
+
+  const fieldToTabPath = useMemo(
+    () => buildFieldToTabPath(adminConfig, fieldByName, rowByName, groupByName),
+    [adminConfig, fieldByName, rowByName, groupByName]
+  )
+
+  return { fieldByName, tabSetByName, rowByName, groupByName, layout, fieldToTabPath }
+}