@byline/admin 6.2.1 → 6.4.0

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

@@ -0,0 +1,325 @@
+/**
+ * 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 { act } from 'react'
+
+import { defineAdminConfig } from '@byline/core'
+import { adminTranslations } from '@byline/i18n/admin'
+import { I18nProvider } from '@byline/i18n/react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@byline/ui/react', async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>()
+  const Pass = ({ children }: any) => <div>{children}</div>
+  const Modal: any = ({ children, isOpen }: any) => (isOpen ? <div>{children}</div> : null)
+  Modal.Container = Pass
+  Modal.Header = Pass
+  Modal.Content = Pass
+  Modal.Actions = Pass
+  return {
+    ...actual,
+    Modal,
+    Search: ({ onSearch }: any) => (
+      <input aria-label="search" onChange={(event) => onSearch?.(event.target.value)} />
+    ),
+    LoaderRing: () => <span />,
+  }
+})
+
+import { BylineFieldServicesProvider } from '../field-services-context'
+import { RelationPicker } from './relation-picker'
+
+const globalWithAct = globalThis as any
+globalWithAct.IS_REACT_ACT_ENVIRONMENT = true
+
+defineAdminConfig({
+  i18n: {
+    admin: { defaultLocale: 'en', locales: ['en'] },
+    content: { defaultLocale: 'en', locales: ['en'] },
+  },
+  collections: [
+    {
+      path: 'media',
+      labels: { singular: 'Media item', plural: 'Media' },
+      fields: [{ name: 'title', label: 'Title', type: 'text' }],
+    },
+  ],
+  slugifier: (value: string) => value.toLowerCase().trim().replace(/\s+/g, '-'),
+})
+
+const targetDefinition = {
+  path: 'media',
+  labels: { singular: 'Media item', plural: 'Media' },
+  useAsTitle: 'title',
+  fields: [{ name: 'title', label: 'Title', type: 'text' }],
+} as any
+
+const page = (docs: Array<{ id: string; title: string }>) => ({
+  docs: docs.map(({ id, title }) => ({ id, fields: { title } })),
+  meta: { totalPages: 1 },
+  included: { collection: { id: 'collection-1' } },
+})
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+const render = async (getCollectionDocuments: any, props: Record<string, unknown> = {}) => {
+  await act(async () => {
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <BylineFieldServicesProvider
+          services={{ getCollectionDocuments, uploadField: async () => ({}) } as any}
+        >
+          <RelationPicker
+            targetCollectionPath="media"
+            targetDefinition={targetDefinition}
+            displayField="title"
+            isOpen={true}
+            onSelect={() => {}}
+            onDismiss={() => {}}
+            {...(props as any)}
+          />
+        </BylineFieldServicesProvider>
+      </I18nProvider>
+    )
+  })
+}
+
+const refreshButton = () =>
+  container.querySelector<HTMLButtonElement>('.byline-field-relation-picker-refresh')
+
+const rowText = () =>
+  Array.from(container.querySelectorAll('.byline-field-relation-picker-rows li')).map((node) =>
+    (node.textContent ?? '').trim()
+  )
+
+const search = async (value: string) => {
+  const input = container.querySelector<HTMLInputElement>('input[aria-label="search"]')
+  if (input == null) throw new Error('search input not found')
+  // React's `onChange` is an `input` listener, and assigning `.value` directly
+  // is swallowed by its value tracker — drive the native setter.
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
+  await act(async () => {
+    setter?.call(input, value)
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+}
+
+/** The request argument of the most recent list call, failing loudly if absent. */
+const lastRequest = (mock: { mock: { calls: unknown[][] } }): any => {
+  const call = mock.mock.calls.at(-1)
+  if (call == null) throw new Error('no list request was made')
+  return call[0]
+}
+
+const clickRefresh = async () => {
+  await act(async () => {
+    refreshButton()?.click()
+  })
+}
+
+describe('relation picker refresh', () => {
+  it('re-runs the query and shows a document created since the picker opened', async () => {
+    let docs = [{ id: 'a', title: 'Apple' }]
+    const getCollectionDocuments = vi.fn(async () => page(docs))
+    await render(getCollectionDocuments)
+
+    expect(rowText().some((text) => text.includes('Apple'))).toBe(true)
+    expect(rowText().some((text) => text.includes('Banana'))).toBe(false)
+
+    // Stands in for the editor creating a document in the other tab.
+    docs = [
+      { id: 'a', title: 'Apple' },
+      { id: 'b', title: 'Banana' },
+    ]
+    await clickRefresh()
+
+    expect(rowText().some((text) => text.includes('Banana'))).toBe(true)
+  })
+
+  /**
+   * The reader may have typed a search before leaving to create the document.
+   * Refresh must re-run *their* query, not reset to an unfiltered first page.
+   */
+  it('preserves the search term across a refresh', async () => {
+    const getCollectionDocuments = vi.fn(async () => page([{ id: 'a', title: 'Apple' }]))
+    await render(getCollectionDocuments)
+
+    await search('app')
+    const callsAfterSearch = getCollectionDocuments.mock.calls.length
+    await clickRefresh()
+
+    expect(getCollectionDocuments.mock.calls.length).toBeGreaterThan(callsAfterSearch)
+    const lastCall = lastRequest(getCollectionDocuments)
+    expect(lastCall.params.query).toBe('app')
+  })
+
+  it('preserves the current page across a refresh', async () => {
+    const getCollectionDocuments = vi.fn(async () => ({
+      docs: [{ id: 'a', fields: { title: 'Apple' } }],
+      meta: { totalPages: 3 },
+      included: { collection: { id: 'collection-1' } },
+    }))
+    await render(getCollectionDocuments)
+
+    const next = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent?.trim() === 'Next'
+    )
+    if (next == null) throw new Error('Next button not found')
+    await act(async () => {
+      next.click()
+    })
+    expect(lastRequest(getCollectionDocuments).params.page).toBe(2)
+    await clickRefresh()
+
+    expect(lastRequest(getCollectionDocuments).params.page).toBe(2)
+  })
+
+  it('keeps a multi-select choice through a refresh', async () => {
+    const getCollectionDocuments = vi.fn(async () =>
+      page([
+        { id: 'a', title: 'Apple' },
+        { id: 'b', title: 'Banana' },
+      ])
+    )
+    const onSelectMany = vi.fn()
+    await render(getCollectionDocuments, { multiple: true, onSelectMany })
+
+    const firstChoice = container.querySelector<HTMLButtonElement>(
+      '.byline-field-relation-picker-rows li button'
+    )
+    if (firstChoice == null) throw new Error('First choice not found')
+    await act(async () => {
+      firstChoice.click()
+    })
+    expect(firstChoice.getAttribute('aria-pressed')).toBe('true')
+
+    await clickRefresh()
+
+    const selected = container.querySelectorAll('[aria-pressed="true"]')
+    expect(selected).toHaveLength(1)
+    expect(selected[0]?.textContent).toContain('Apple')
+    const confirm = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent?.trim() === 'Add selected (1)'
+    )
+    if (confirm == null) throw new Error('Selection confirmation not found')
+    await act(async () => {
+      confirm.click()
+    })
+    expect(onSelectMany).toHaveBeenCalledExactlyOnceWith([
+      {
+        targetDocumentId: 'a',
+        targetCollectionId: 'collection-1',
+        record: { id: 'a', fields: { title: 'Apple' } },
+      },
+    ])
+  })
+
+  it('keeps a single choice and confirms its refreshed record', async () => {
+    let title = 'Apple'
+    const getCollectionDocuments = vi.fn(async () => page([{ id: 'a', title }]))
+    const onSelect = vi.fn()
+    await render(getCollectionDocuments, { onSelect })
+
+    const choice = container.querySelector<HTMLButtonElement>(
+      '.byline-field-relation-picker-rows li button'
+    )
+    if (choice == null) throw new Error('Choice not found')
+    await act(async () => {
+      choice.click()
+    })
+    expect(choice.classList.contains('byline-field-relation-picker-row-selected')).toBe(true)
+
+    title = 'Updated Apple'
+    await clickRefresh()
+
+    const selected = container.querySelector('.byline-field-relation-picker-row-selected')
+    expect(selected?.textContent).toContain('Updated Apple')
+    const confirm = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent?.trim() === 'Select'
+    )
+    if (confirm == null) throw new Error('Select button not found')
+    expect(confirm.disabled).toBe(false)
+    await act(async () => {
+      confirm.click()
+    })
+    expect(onSelect).toHaveBeenCalledExactlyOnceWith({
+      targetDocumentId: 'a',
+      targetCollectionId: 'collection-1',
+      record: { id: 'a', fields: { title: 'Updated Apple' } },
+    })
+  })
+
+  /**
+   * A refresh issued while an earlier request is still in flight must win, even
+   * if the earlier one resolves last. The fetch effect's `cancelled` cleanup
+   * gives this for free — but only because refresh re-runs the effect rather
+   * than calling the service imperatively, which would bypass it.
+   */
+  it('ignores a superseded request that resolves after the refresh', async () => {
+    const resolvers: Array<(value: unknown) => void> = []
+    const getCollectionDocuments = vi.fn(
+      () =>
+        new Promise((resolve) => {
+          resolvers.push(resolve)
+        })
+    )
+    await render(getCollectionDocuments)
+
+    await clickRefresh()
+    expect(resolvers.length).toBeGreaterThanOrEqual(2)
+
+    // Resolve the newest first, then let the stale one land after it.
+    await act(async () => {
+      resolvers[resolvers.length - 1]?.(page([{ id: 'b', title: 'Banana' }]))
+    })
+    await act(async () => {
+      resolvers[0]?.(page([{ id: 'a', title: 'Apple' }]))
+    })
+
+    expect(rowText().some((text) => text.includes('Banana'))).toBe(true)
+    expect(rowText().some((text) => text.includes('Apple'))).toBe(false)
+  })
+
+  it('surfaces a refresh failure and recovers on a later refresh', async () => {
+    let shouldFail = false
+    const getCollectionDocuments = vi.fn(async () => {
+      if (shouldFail) throw new Error('network down')
+      return page([{ id: 'a', title: 'Apple' }])
+    })
+    await render(getCollectionDocuments)
+
+    shouldFail = true
+    await clickRefresh()
+    expect(container.querySelector('.byline-field-relation-picker-error')).not.toBeNull()
+
+    shouldFail = false
+    await clickRefresh()
+    expect(container.querySelector('.byline-field-relation-picker-error')).toBeNull()
+    expect(rowText().some((text) => text.includes('Apple'))).toBe(true)
+  })
+})

package/src/fields/relation/relation-picker.module.css

@@ -25,6 +25,38 @@
 :global(.byline-field-relation-picker-header) {
   padding-top: 1rem;
   margin-bottom: var(--spacing-8);
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+  flex-wrap: wrap;
+}
+
+/* Header actions: refresh, and the create link when the host permits it.
+   Stable override handle: `.byline-field-relation-picker-actions`. */
+.actions,
+:global(.byline-field-relation-picker-actions) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+/* Re-runs the current query. Stable override handle:
+   `.byline-field-relation-picker-refresh`. */
+.refresh,
+:global(.byline-field-relation-picker-refresh) {
+  white-space: nowrap;
+}
+
+/* Opens the target collection's create view in a new tab. Stable override
+   handle: `.byline-field-relation-picker-create`. */
+.create,
+:global(.byline-field-relation-picker-create) {
+  /* Rendered as an anchor so it behaves like a link, but it belongs to the
+     toolbar visually: drop the global anchor underline, and set no font size so
+     the button's own `xs` sizing governs rather than being overridden here. */
+  text-decoration: none;
+  white-space: nowrap;
 }
 
 .title,

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

@@ -133,8 +133,24 @@ export const RelationPicker = ({
   const [documents, setDocuments] = useState<any[]>([])
   const [totalPages, setTotalPages] = useState<number>(1)
   const [collectionId, setCollectionId] = useState<string | null>(null)
+  // Refresh is a dependency of the fetch effect rather than an imperative
+  // refetch, so re-running it goes through the effect's `cancelled` cleanup
+  // below: a superseded request that resolves late is discarded instead of
+  // overwriting newer results. Calling the service directly would lose that.
+  const [refreshNonce, setRefreshNonce] = useState(0)
 
-  const { getCollectionDocuments } = useBylineFieldServices()
+  const { getCollectionDocuments, canCreateInCollection, getCreateDocumentUrl } =
+    useBylineFieldServices()
+
+  // Both capabilities are optional, and the affordance needs both: without
+  // `getCreateDocumentUrl` there is nowhere to send the reader, and without
+  // `canCreateInCollection` their permission is unknowable — offering a link that
+  // leads to a refusal is worse than offering none. The check is cosmetic; the
+  // create view enforces the ability server-side regardless.
+  const createHref =
+    getCreateDocumentUrl != null && canCreateInCollection?.(targetCollectionPath) === true
+      ? getCreateDocumentUrl(targetCollectionPath)
+      : null
 
   const targetAdminConfig: CollectionAdminConfig | null =
     getCollectionAdminConfig(targetCollectionPath)
@@ -152,6 +168,12 @@ export const RelationPicker = ({
   }, [isOpen])
 
   // Fetch whenever the modal is open and the query / page changes.
+  //
+  // `refreshNonce` is a re-run trigger rather than a value this effect reads, so
+  // the exhaustive-dependencies rule sees it as surplus. It is not: bumping it is
+  // how the refresh button re-runs the fetch, and routing refresh through the
+  // effect is what makes the `cancelled` cleanup discard a superseded request.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: see above
   useEffect(() => {
     if (!isOpen) return
     let cancelled = false
@@ -213,6 +235,7 @@ export const RelationPicker = ({
     getCollectionDocuments,
     t,
     targetAdminConfig?.itemViewSort,
+    refreshNonce,
   ])
 
   const resolvedDisplayField =
@@ -264,6 +287,41 @@ export const RelationPicker = ({
       <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>
+          <div className={cx('byline-field-relation-picker-actions', styles.actions)}>
+            {/* Deliberately not disabled while loading: a request that never
+                settles must not leave the reader unable to retry, and a refresh
+                issued mid-flight supersedes the earlier one rather than racing
+                it. */}
+            <Button
+              type="button"
+              size="xs"
+              variant="outlined"
+              className={cx('byline-field-relation-picker-refresh', styles.refresh)}
+              onClick={() => setRefreshNonce((nonce) => nonce + 1)}
+            >
+              {t('fields.relation.picker.refresh')}
+            </Button>
+            {createHref != null && (
+              // Rendered as an anchor, styled as a button: keyboard activation and
+              // middle-click work without help and popup blockers leave real links
+              // alone, while `Button`'s `render` prop keeps it visually part of the
+              // toolbar. A new tab keeps this picker and the parent editor mounted,
+              // so unsaved work survives — the whole point of the affordance.
+              // `noopener` keeps the opened page out of `window.opener`.
+              <Button
+                size="xs"
+                variant="outlined"
+                className={cx('byline-field-relation-picker-create', styles.create)}
+                render={
+                  <a href={createHref} target="_blank" rel="noopener noreferrer">
+                    {t('fields.relation.picker.createNew', {
+                      label: targetDefinition?.labels.singular ?? targetCollectionPath,
+                    })}
+                  </a>
+                }
+              />
+            )}
+          </div>
         </Modal.Header>
         <Modal.Content>
           <div className={cx('byline-field-relation-picker-body', styles.body)}>

package/src/fields/select/select-field.tsx

@@ -11,6 +11,7 @@ import { ErrorText, Label, Select } from '@byline/ui/react'
 import cx from 'clsx'
 
 import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context'
+import { useScopedDomId } from '../../forms/form-dom-scope'
 import styles from './select-field.module.css'
 
 export const SelectField = ({
@@ -33,7 +34,7 @@ export const SelectField = ({
   const isDirty = useIsDirty(fieldPath)
   const fieldValue = useFieldValue<string | undefined>(fieldPath)
   const incomingValue = value ?? fieldValue ?? defaultValue ?? ''
-  const htmlId = id ?? fieldPath
+  const htmlId = useScopedDomId(fieldPath, id)
 
   return (
     <div className={`byline-field-select ${field.name}`}>
@@ -47,6 +48,7 @@ export const SelectField = ({
         />
       )}
       <Select<string>
+        disabled={field.readOnly}
         size="xs"
         variant="outlined"
         id={htmlId}
@@ -62,7 +64,7 @@ export const SelectField = ({
         }}
         className={cx(isDirty && ['byline-field-select-dirty', styles.dirty])}
       />
-      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
+      {fieldError && <ErrorText id={`${htmlId}-error`} text={fieldError} />}
     </div>
   )
 }

package/src/fields/text/text-field.tsx

@@ -13,6 +13,7 @@ import { Input, Label } from '@byline/ui/react'
 import cx from 'clsx'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { useScopedDomId } from '../../forms/form-dom-scope'
 import { LocaleBadge } from '../locale-badge'
 import styles from './text-field.module.css'
 
@@ -41,15 +42,15 @@ export const TextField = ({
   const fieldError = useFieldError(fieldPath)
   const fieldValue = useFieldValue<string | undefined>(fieldPath)
   const incomingValue = value ?? fieldValue ?? defaultValue ?? ''
-  const htmlId = id ?? fieldPath
+  const htmlId = useScopedDomId(fieldPath, id)
 
   const handleChange = useCallback(
     (value: string) => {
-      if (onChange) {
+      if (onChange && !field.readOnly) {
         onChange(value)
       }
     },
-    [onChange]
+    [onChange, field.readOnly]
   )
 
   // Custom component slots (from admin config)
@@ -121,6 +122,7 @@ export const TextField = ({
     }
     return (
       <Input
+        readOnly={field.readOnly}
         id={htmlId}
         name={field.name}
         label={suppressInputLabel ? undefined : field.label}

package/src/fields/text-area/text-area-field.tsx

@@ -13,6 +13,7 @@ import { Label, TextArea } from '@byline/ui/react'
 import cx from 'clsx'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { useScopedDomId } from '../../forms/form-dom-scope'
 import { LocaleBadge } from '../locale-badge'
 import styles from './text-area-field.module.css'
 
@@ -41,15 +42,15 @@ export const TextAreaField = ({
   const fieldError = useFieldError(fieldPath)
   const fieldValue = useFieldValue<string | undefined>(fieldPath)
   const incomingValue = value ?? fieldValue ?? defaultValue ?? ''
-  const htmlId = id ?? fieldPath
+  const htmlId = useScopedDomId(fieldPath, id)
 
   const handleChange = useCallback(
     (value: string) => {
-      if (onChange) {
+      if (onChange && !field.readOnly) {
         onChange(value)
       }
     },
-    [onChange]
+    [onChange, field.readOnly]
   )
 
   // Custom component slots (from admin config)
@@ -121,6 +122,7 @@ export const TextAreaField = ({
     }
     return (
       <TextArea
+        readOnly={field.readOnly}
         id={htmlId}
         name={field.name}
         label={suppressInputLabel ? undefined : field.label}

package/src/fields/use-field-change-handler.ts

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 
-import { useCallback } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 
 import type { Field, FieldBeforeChangeResult, FieldHookContext } from '@byline/core'
 import { normalizeHooks } from '@byline/core'
@@ -28,11 +28,31 @@ import { useFormContext } from '../forms/form-context'
  * to `setFieldValue` (no promises, no extra allocations).
  */
 export function useFieldChangeHandler(field: Field, path: string) {
-  const { setFieldValue, getFieldValue, getFieldValues, setFieldError, clearFieldError } =
-    useFormContext()
+  const {
+    setFieldValue,
+    getFieldValue,
+    getFieldValues,
+    setFieldError,
+    clearFieldError,
+    trackFieldChange,
+  } = useFormContext()
+
+  const generation = useRef(0)
+  const releasePending = useRef<(() => void) | undefined>(undefined)
+  useEffect(
+    () => () => {
+      generation.current++
+      releasePending.current?.()
+    },
+    []
+  )
 
   return useCallback(
     (value: any) => {
+      releasePending.current?.()
+      const invocation = ++generation.current
+      if (field.readOnly) return
+      const current = () => invocation === generation.current
       const hooks = field.hooks
 
       // ── fast path: no hooks defined ────────────────────────────
@@ -56,7 +76,9 @@ export function useFieldChangeHandler(field: Field, path: string) {
         // Raw store write for cross-field behaviour (e.g. mutual exclusivity
         // across array items). Deliberately does not run the target field's
         // own hooks — see FieldHookContext.setFieldValue.
-        setFieldValue,
+        setFieldValue: (target, next) => {
+          if (current()) setFieldValue(target, next)
+        },
       }
 
       clearFieldError(path)
@@ -70,12 +92,13 @@ export function useFieldChangeHandler(field: Field, path: string) {
         setFieldValue(path, value)
       }
 
-      void (async () => {
+      const pending = (async () => {
         try {
           // 1. beforeValidate (advisory — value is always committed)
           let advisoryError: string | undefined
           for (const fn of validateFns) {
             const result = (await fn(ctx)) as FieldBeforeChangeResult | undefined
+            if (!current()) return
             if (result?.error) {
               advisoryError = result.error
             }
@@ -87,6 +110,7 @@ export function useFieldChangeHandler(field: Field, path: string) {
           // 2. beforeChange
           for (const fn of changeFns) {
             const result = (await fn(ctx)) as FieldBeforeChangeResult | undefined
+            if (!current()) return
             if (result?.error) {
               setFieldError(path, result.error)
               return // block the change
@@ -97,20 +121,30 @@ export function useFieldChangeHandler(field: Field, path: string) {
           }
 
           // 3. commit the (possibly transformed) value and surface any advisory error.
-          // If there were no beforeChange hooks we already committed synchronously above;
-          // this call is a no-op if the value hasn't been altered by a hook.
-          setFieldValue(path, ctx.value)
+          if (!current()) return
+          if (changeFns.length > 0 || !Object.is(ctx.value, value)) setFieldValue(path, ctx.value)
           if (advisoryError) {
             setFieldError(path, advisoryError)
           }
         } catch (err) {
+          if (!current()) return
           // Surface unexpected hook errors as field errors rather than crashing
           const message = err instanceof Error ? err.message : 'Unexpected hook error'
           setFieldError(path, message)
         }
       })()
+      releasePending.current = trackFieldChange(pending)
     },
     // field reference is stable per render cycle; path is derived from props
-    [field, path, setFieldValue, getFieldValue, getFieldValues, setFieldError, clearFieldError]
+    [
+      field,
+      path,
+      setFieldValue,
+      getFieldValue,
+      getFieldValues,
+      setFieldError,
+      clearFieldError,
+      trackFieldChange,
+    ]
   )
 }