create-react-admin-template 0.0.0-stage → 0.1.0

package/template/src/components/AppPageForm/PageForm.tsx

@@ -0,0 +1,765 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ChangeEvent,
+  type CSSProperties,
+  type FormEvent,
+  type ReactElement,
+  type RefAttributes,
+} from 'react'
+import { useLocale } from '@/locale'
+import { useUnsavedChangesRegistration } from '@/context/UnsavedChangesProvider'
+import { FileUpload } from '@/components/FileUpload'
+import { toPageFormCssUnit } from './config'
+import { clonePageFormModel, createPageFormController } from './controller'
+import { resolvePageFormMessages } from './messages'
+import { createPageFormOptionsController } from './options'
+import type {
+  PageFormFieldRendererProps,
+  PageFormHandle,
+  PageFormContext,
+  PageFormFeedbackOption,
+  PageFormOptionsSnapshot,
+  PageFormProps,
+  PageFormRecord,
+  PageFormRenderContext,
+  ResolvedIFormItem,
+} from './types'
+
+const EMPTY_DEPENDENCIES: Readonly<Record<string, unknown>> = Object.freeze({})
+const OPTION_PREFIX = 'page-form-option-'
+
+const isOptionCancellation = (error: unknown) =>
+  error === 'superseded' || error === 'invalidated' || error === 'destroyed'
+
+const resolveFeedback = <TContext,>(
+  option: PageFormFeedbackOption<TContext> | undefined,
+  context: TContext,
+  fallback: string
+) => {
+  if (option === false) return undefined
+  if (option === undefined || option === true) return fallback
+  if (typeof option === 'string') return option || undefined
+  const result = option(context)
+  return typeof result === 'string' && result ? result : undefined
+}
+
+const optionToken = (index: number) => `${OPTION_PREFIX}${index}`
+const optionIndex = (token: string) =>
+  token.startsWith(OPTION_PREFIX)
+    ? Number(token.slice(OPTION_PREFIX.length))
+    : -1
+
+function PageFormInner<TModel extends PageFormRecord>(
+  props: PageFormProps<TModel>,
+  forwardedRef: React.ForwardedRef<PageFormHandle<TModel>>
+) {
+  const {
+    model,
+    config,
+    formType = 'add',
+    submitLoading = false,
+    bProtectUnsavedChanges = true,
+    dependencies: dependenciesProp,
+    remoteOptionLoader,
+    renderers,
+    controlRenderers,
+    className,
+    actionsPlacement = 'top',
+    onModelChange,
+    onChange,
+    onDirtyChange,
+    onSubmit,
+    onSuccess,
+    onValidationFailed,
+    onReset,
+    onError,
+    onRemoteError,
+    renderActions,
+    renderRight,
+    renderFooter,
+    renderField,
+  } = props
+  const { strLocale } = useLocale()
+  const objMessages = useMemo(
+    () => resolvePageFormMessages(strLocale, config.messages),
+    [config.messages, strLocale]
+  )
+  const objLocalizedConfig = useMemo(
+    () => ({ ...config, messages: objMessages }),
+    [config, objMessages]
+  )
+  const reactId = useId().replace(/[^a-zA-Z0-9]/g, '')
+  const dependencies = dependenciesProp ?? EMPTY_DEPENDENCIES
+  const formElementRef = useRef<HTMLFormElement>(null)
+  const lastEmittedModelRef = useRef<TModel | undefined>(undefined)
+  const emittedModelTimerRef = useRef<number | undefined>(undefined)
+  const loadedQueriesRef = useRef(
+    new Map<string, ResolvedIFormItem<TModel>['optionsQuery']>()
+  )
+  const destroyTimerRef = useRef<number | undefined>(undefined)
+  const [controller] = useState(() =>
+    createPageFormController(objLocalizedConfig, model, formType, dependencies)
+  )
+  const [optionsController] = useState(() =>
+    createPageFormOptionsController(remoteOptionLoader)
+  )
+  const [feedback, setFeedback] = useState<{
+    message: string
+    tone: 'error' | 'success'
+  }>()
+  const nFileResetRevisionRef = useRef(0)
+
+  const subscribe = useCallback(
+    (listener: () => void) =>
+      controller.subscribe(listener, { snapshot: 'shared' }),
+    [controller]
+  )
+  const getSnapshot = useCallback(
+    () => controller.getSharedSnapshot(),
+    [controller]
+  )
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+  useUnsavedChangesRegistration({
+    bIsDirty: snapshot.isDirty,
+    bEnabled: bProtectUnsavedChanges,
+  })
+  useEffect(() => {
+    onDirtyChange?.(snapshot.isDirty, controller.getSnapshot())
+  }, [controller, onDirtyChange, snapshot.isDirty])
+  const subscribeOptions = useCallback(
+    (listener: () => void) => optionsController.subscribe(listener),
+    [optionsController]
+  )
+  const getOptionsSnapshot = useCallback(
+    () => optionsController.getSnapshot(),
+    [optionsController]
+  )
+  const optionsSnapshot: PageFormOptionsSnapshot = useSyncExternalStore(
+    subscribeOptions,
+    getOptionsSnapshot,
+    getOptionsSnapshot
+  )
+  const resolvedConfig = controller.getResolvedConfig()
+
+  useEffect(() => {
+    controller.replaceConfig(objLocalizedConfig)
+    optionsController.invalidate()
+    loadedQueriesRef.current.clear()
+  }, [controller, objLocalizedConfig, optionsController])
+  useEffect(() => controller.setFormType(formType), [controller, formType])
+  useEffect(
+    () => controller.setDependencies(dependencies),
+    [controller, dependencies]
+  )
+  useEffect(() => {
+    const objEmittedModel = lastEmittedModelRef.current
+    if (objEmittedModel) {
+      window.clearTimeout(emittedModelTimerRef.current)
+      emittedModelTimerRef.current = undefined
+      lastEmittedModelRef.current = undefined
+      if (model !== objEmittedModel) controller.replaceModel(model, false)
+      return
+    }
+    nFileResetRevisionRef.current += 1
+    controller.replaceModel(model, true)
+  }, [controller, model])
+  useEffect(() => {
+    optionsController.setRemoteOptionLoader(remoteOptionLoader)
+  }, [optionsController, remoteOptionLoader])
+
+  useEffect(() => {
+    resolvedConfig.formItems.forEach((item) => {
+      if (
+        !item.optionsQuery ||
+        loadedQueriesRef.current.get(item.prop) === item.optionsQuery
+      ) {
+        return
+      }
+      loadedQueriesRef.current.set(item.prop, item.optionsQuery)
+      void optionsController.loadFieldOptions(item).catch((error: unknown) => {
+        if (!isOptionCancellation(error)) onError?.(error)
+      })
+    })
+  }, [onError, optionsController, resolvedConfig.formItems])
+
+  useEffect(() => {
+    const context: PageFormContext<TModel> = {
+      model: snapshot.model,
+      formType,
+      dependencies,
+    }
+    resolvedConfig.formItems.forEach((item) => {
+      if (item.type !== 'remoteSelect' || !item.remoteSelectConfig) return
+      void optionsController
+        .ensureRemoteOptions(item, context)
+        .catch((error: unknown) => {
+          if (!isOptionCancellation(error)) onRemoteError?.(error, item.prop)
+        })
+    })
+  }, [
+    dependencies,
+    formType,
+    onRemoteError,
+    optionsController,
+    resolvedConfig.formItems,
+    snapshot.model,
+  ])
+
+  useEffect(() => {
+    window.clearTimeout(destroyTimerRef.current)
+    return () => {
+      window.clearTimeout(emittedModelTimerRef.current)
+      destroyTimerRef.current = window.setTimeout(() => {
+        optionsController.destroy()
+        controller.destroy()
+      }, 0)
+    }
+  }, [controller, optionsController])
+
+  const emitModel = useCallback(
+    (prop: string, value: unknown) => {
+      const nextModel = clonePageFormModel(controller.getSharedSnapshot().model)
+      lastEmittedModelRef.current = nextModel
+      onModelChange?.(nextModel)
+      onChange?.(prop, value, nextModel)
+      window.clearTimeout(emittedModelTimerRef.current)
+      emittedModelTimerRef.current = window.setTimeout(() => {
+        if (lastEmittedModelRef.current === nextModel) {
+          lastEmittedModelRef.current = undefined
+        }
+      }, 0)
+    },
+    [controller, onChange, onModelChange]
+  )
+  const updateField = useCallback(
+    (item: ResolvedIFormItem<TModel>, value: unknown) => {
+      controller.updateField(item.prop, value)
+      emitModel(item.prop, value)
+      item.onChange?.(value)
+    },
+    [controller, emitModel]
+  )
+  const scrollToIssue = useCallback(() => {
+    if (resolvedConfig.scrollToFirstError === false) return
+    const prop = controller.getSharedSnapshot().validation.firstIssue?.prop
+    if (!prop) return
+    formElementRef.current
+      ?.querySelector<HTMLElement>(`[data-page-form-prop="${prop}"]`)
+      ?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }, [controller, resolvedConfig.scrollToFirstError])
+  const validate = useCallback(async () => {
+    const result = await controller.validate()
+    if (!result.valid) scrollToIssue()
+    return result
+  }, [controller, scrollToIssue])
+  const submit = useCallback(async () => {
+    setFeedback(undefined)
+    try {
+      const outcome = await controller.submit({
+        onValidated: (validatedModel, validatedFormType) =>
+          onSubmit?.(validatedModel, validatedFormType),
+      })
+      if (outcome.status === 'invalid') {
+        onValidationFailed?.(controller.getSnapshot())
+        scrollToIssue()
+      }
+      if (outcome.status === 'success') {
+        onSuccess?.(outcome.result, outcome.model)
+        const message = resolveFeedback(
+          resolvedConfig.feedback?.success,
+          {
+            model: outcome.model,
+            formType,
+            dependencies,
+            result: outcome.result,
+          },
+          formType === 'add'
+            ? resolvedConfig.messages.strCreateSuccess
+            : resolvedConfig.messages.strSaveSuccess
+        )
+        if (message) setFeedback({ message, tone: 'success' })
+      }
+      return outcome
+    } catch (error) {
+      onError?.(error)
+      const message = resolveFeedback(
+        resolvedConfig.feedback?.error,
+        {
+          model: clonePageFormModel(snapshot.model),
+          formType,
+          dependencies,
+          error,
+        },
+        error instanceof Error
+          ? error.message
+          : resolvedConfig.messages.strSubmitFailed
+      )
+      if (message) setFeedback({ message, tone: 'error' })
+      return undefined
+    }
+  }, [
+    controller,
+    dependencies,
+    formType,
+    onError,
+    onSubmit,
+    onSuccess,
+    onValidationFailed,
+    resolvedConfig.feedback,
+    resolvedConfig.messages,
+    scrollToIssue,
+    snapshot.model,
+  ])
+  const reset = useCallback(() => {
+    nFileResetRevisionRef.current += 1
+    const nextModel = controller.reset()
+    optionsController.invalidate()
+    lastEmittedModelRef.current = nextModel
+    onModelChange?.(nextModel)
+    onReset?.(nextModel)
+    const message = resolveFeedback(
+      resolvedConfig.feedback?.reset,
+      { model: nextModel, formType, dependencies },
+      resolvedConfig.messages.strResetSuccess
+    )
+    if (message) setFeedback({ message, tone: 'success' })
+    return nextModel
+  }, [
+    controller,
+    dependencies,
+    formType,
+    onModelChange,
+    onReset,
+    optionsController,
+    resolvedConfig.feedback?.reset,
+    resolvedConfig.messages.strResetSuccess,
+  ])
+
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      validate,
+      submit,
+      reset,
+      updateFormItem: (prop, patch) => {
+        controller.updateFormItem(prop, patch)
+        optionsController.invalidate(prop)
+      },
+      getController: () => controller,
+      isDirty: () => controller.hasDirtyChanges(),
+    }),
+    [controller, optionsController, reset, submit, validate]
+  )
+
+  if (!resolvedConfig.inited) return null
+  const loading =
+    snapshot.loading || submitLoading || Boolean(resolvedConfig.submitLoading)
+  const renderContext: PageFormRenderContext<TModel> = {
+    model: snapshot.model,
+    loading,
+    isDirty: snapshot.isDirty,
+    submit,
+    reset,
+  }
+  const containerStyle: CSSProperties = {
+    width: toPageFormCssUnit(resolvedConfig.width),
+    maxWidth: toPageFormCssUnit(resolvedConfig.maxWidth),
+  }
+  const fieldsStyle: CSSProperties = resolvedConfig.inline
+    ? {
+        gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${resolvedConfig.itemWidth}px), 1fr))`,
+      }
+    : { gridTemplateColumns: 'minmax(0, 1fr)' }
+  const actions = renderActions ? (
+    renderActions(renderContext)
+  ) : (
+    <>
+      <button
+        type='button'
+        disabled={loading || resolvedConfig.disableSubmit}
+        onClick={() => void submit()}
+      >
+        {loading
+          ? resolvedConfig.messages.strSubmitting
+          : resolvedConfig.confirmButtonText}
+      </button>
+      {resolvedConfig.resetBtn ? (
+        <button type='button' disabled={loading} onClick={reset}>
+          {resolvedConfig.resetButtonText}
+        </button>
+      ) : null}
+    </>
+  )
+  const renderActionArea = (placement: 'top' | 'bottom') =>
+    actionsPlacement === placement && actions != null ? (
+      <div className='hgw-page-form__actions' data-placement={placement}>
+        {actions}
+      </div>
+    ) : null
+
+  const loadRemote = (
+    item: ResolvedIFormItem<TModel>,
+    request: { keyword?: string } = {}
+  ) => {
+    const context: PageFormContext<TModel> = {
+      model: snapshot.model,
+      formType,
+      dependencies,
+    }
+    void optionsController
+      .loadRemoteOptions(item, context, request)
+      .catch((error: unknown) => {
+        if (!isOptionCancellation(error)) onRemoteError?.(error, item.prop)
+      })
+  }
+
+  const renderDefaultControl = (
+    field: PageFormFieldRendererProps<TModel>,
+    controlId: string
+  ) => {
+    const { item, value, disabled, options, remoteOptions, update, blur } =
+      field
+    if (item.type === 'file') {
+      if (!item.fileConfig) {
+        throw new Error(
+          `PageForm file field "${item.prop}" requires fileConfig`
+        )
+      }
+      const objFileContext: PageFormContext<TModel> = {
+        model: snapshot.model,
+        formType,
+        dependencies,
+      }
+      return (
+        <FileUpload
+          key={`${item.prop}-${nFileResetRevisionRef.current}`}
+          bDisabled={disabled || item.readonly}
+          bMultiple={item.multiple}
+          fnUpload={item.fileConfig.fnUpload}
+          objValidation={item.fileConfig.objValidation}
+          strClassName={item.fileConfig.strClassName}
+          strInputAriaLabel={item.label}
+          strInputId={controlId}
+          strSelectText={item.fileConfig.strSelectText}
+          fnOnError={(objError) => {
+            item.fileConfig?.fnOnError?.(objError, objFileContext)
+            onError?.(objError)
+          }}
+          fnOnSuccess={update}
+        />
+      )
+    }
+    if (item.type === 'component') {
+      const Renderer = item.renderer ? renderers?.[item.renderer] : undefined
+      return Renderer ? <Renderer {...field} /> : null
+    }
+    if (item.type === 'radio') {
+      return (
+        <div className='hgw-page-form__radio' role='radiogroup'>
+          {options.map((option) => (
+            <label key={String(option.value)}>
+              <input
+                type='radio'
+                name={item.prop}
+                checked={Object.is(option.value, value)}
+                disabled={disabled || option.disabled}
+                onChange={() => update(option.value)}
+              />
+              {option.label}
+            </label>
+          ))}
+        </div>
+      )
+    }
+    if (item.type === 'select') {
+      const selected = Array.isArray(value) ? value : [value]
+      const tokens = options
+        .map((option, index) =>
+          selected.some((entry) => Object.is(entry, option.value))
+            ? optionToken(index)
+            : undefined
+        )
+        .filter((entry): entry is string => Boolean(entry))
+      return (
+        <select
+          id={controlId}
+          multiple={item.multiple}
+          disabled={disabled}
+          value={item.multiple ? tokens : (tokens[0] ?? '')}
+          onChange={(event) => {
+            const values = Array.from(event.currentTarget.selectedOptions)
+              .map((option) => options[optionIndex(option.value)]?.value)
+              .filter((entry) => entry !== undefined)
+            update(item.multiple ? values : (values[0] ?? ''))
+          }}
+        >
+          {item.clearable && !item.multiple ? (
+            <option value=''>
+              {item.placeholder || resolvedConfig.messages.strSelectPlaceholder}
+            </option>
+          ) : null}
+          {options.map((option, index) => (
+            <option
+              key={`${String(option.value)}-${index}`}
+              value={optionToken(index)}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </option>
+          ))}
+        </select>
+      )
+    }
+    if (item.type === 'remoteSelect' && item.remoteSelectConfig) {
+      const remote = item.remoteSelectConfig
+      const selected = Array.isArray(value) ? value : [value]
+      const tokens = remoteOptions
+        .map((option, index) =>
+          selected.some((entry) => Object.is(entry, option[remote.valueKey]))
+            ? optionToken(index)
+            : undefined
+        )
+        .filter((entry): entry is string => Boolean(entry))
+      const updateRemote = (nextValue: unknown) => {
+        controller.updateField(item.prop, nextValue)
+        emitModel(item.prop, nextValue)
+        remote.onChange?.(optionsController.resolveSelection(item, nextValue))
+        item.onChange?.(nextValue)
+      }
+      return (
+        <div className='hgw-page-form__remote-select'>
+          {item.filterable && remote.dynamicQuery !== false ? (
+            <input
+              type='search'
+              aria-label={resolvedConfig.messages.fnSearchAriaLabel(item.label)}
+              placeholder={
+                item.placeholder || resolvedConfig.messages.strSearchPlaceholder
+              }
+              disabled={disabled}
+              onChange={(event) =>
+                loadRemote(item, { keyword: event.target.value })
+              }
+            />
+          ) : null}
+          <select
+            id={controlId}
+            multiple={item.multiple}
+            disabled={disabled}
+            value={item.multiple ? tokens : (tokens[0] ?? '')}
+            onFocus={field.remoteOpen}
+            onChange={(event) => {
+              const values = Array.from(event.currentTarget.selectedOptions)
+                .map(
+                  (option) =>
+                    remoteOptions[optionIndex(option.value)]?.[remote.valueKey]
+                )
+                .filter((entry) => entry !== undefined)
+              updateRemote(item.multiple ? values : (values[0] ?? ''))
+            }}
+          >
+            {item.clearable && !item.multiple ? (
+              <option value=''>
+                {item.placeholder ||
+                  resolvedConfig.messages.strSelectPlaceholder}
+              </option>
+            ) : null}
+            {remoteOptions.map((option, index) => (
+              <option
+                key={`${String(option[remote.valueKey])}-${index}`}
+                value={optionToken(index)}
+              >
+                {String(option[remote.labelKey] ?? '')}
+              </option>
+            ))}
+          </select>
+          {field.loading ? (
+            <span role='status'>{resolvedConfig.messages.strLoading}</span>
+          ) : null}
+        </div>
+      )
+    }
+    if (item.type === 'date' || item.type === 'datetime') {
+      return (
+        <input
+          id={controlId}
+          type={item.type === 'datetime' ? 'datetime-local' : 'date'}
+          value={String(value ?? '')}
+          disabled={disabled}
+          readOnly={item.readonly}
+          onChange={(event) => update(event.currentTarget.value)}
+        />
+      )
+    }
+    if (item.inputType === 'textarea') {
+      return (
+        <textarea
+          id={controlId}
+          name={item.prop}
+          rows={item.rows}
+          maxLength={item.maxLength}
+          placeholder={item.placeholder}
+          value={String(value ?? '')}
+          disabled={disabled}
+          readOnly={item.readonly}
+          onBlur={blur}
+          onChange={(event) => update(event.currentTarget.value)}
+        />
+      )
+    }
+    const handleInput = (event: ChangeEvent<HTMLInputElement>) => {
+      const nextValue = event.currentTarget.value
+      update(
+        item.inputType === 'number' && nextValue !== ''
+          ? Number(nextValue)
+          : nextValue
+      )
+    }
+    return (
+      <input
+        id={controlId}
+        name={item.prop}
+        type={item.inputType === 'number' ? 'number' : item.inputType}
+        value={String(value ?? '')}
+        disabled={disabled}
+        readOnly={item.readonly}
+        maxLength={item.maxLength}
+        placeholder={item.placeholder}
+        onBlur={blur}
+        onChange={handleInput}
+      />
+    )
+  }
+
+  const renderControl = (item: ResolvedIFormItem<TModel>) => {
+    const value = (snapshot.model as Record<string, unknown>)[item.prop]
+    const issue = snapshot.validation.issues.find(
+      (entry) => entry.prop === item.prop
+    )
+    const field: PageFormFieldRendererProps<TModel> = {
+      item,
+      model: snapshot.model,
+      value,
+      disabled: resolvedConfig.preventAll || item.disabled,
+      loading: Boolean(optionsSnapshot.loading[item.prop]),
+      options: optionsSnapshot.fieldOptions[item.prop] ?? item.options,
+      remoteOptions: optionsSnapshot.remoteOptions[item.prop] ?? [],
+      issue,
+      update: (nextValue) => updateField(item, nextValue),
+      blur: () => item.onblur?.(value),
+      remoteQuery: (keyword) => loadRemote(item, { keyword }),
+      remoteOpen: () => loadRemote(item),
+    }
+    const override = renderField?.(field)
+    if (override !== undefined) return override
+    const controlRenderer = controlRenderers?.[item.type]
+    return controlRenderer
+      ? controlRenderer(field)
+      : renderDefaultControl(field, `${reactId}-${item.prop}`)
+  }
+
+  const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    void submit()
+  }
+  return (
+    <section
+      className={['hgw-page-form', className].filter(Boolean).join(' ')}
+      style={containerStyle}
+    >
+      {renderActionArea('top')}
+      <div
+        className={
+          renderRight
+            ? 'hgw-page-form__content has-right'
+            : 'hgw-page-form__content'
+        }
+      >
+        <form
+          ref={formElementRef}
+          className='hgw-page-form__fields'
+          style={fieldsStyle}
+          onSubmit={handleFormSubmit}
+          onKeyDown={(event) => {
+            if (
+              event.key === 'Enter' &&
+              resolvedConfig.enterToSubmit &&
+              !(event.target instanceof HTMLTextAreaElement)
+            ) {
+              event.preventDefault()
+              void submit()
+            }
+          }}
+        >
+          {resolvedConfig.formItems.map((item) => {
+            if (!item.vIf) return null
+            const issue = snapshot.validation.issues.find(
+              (entry) => entry.prop === item.prop
+            )
+            return (
+              <div
+                key={item.prop}
+                data-page-form-prop={item.prop}
+                className={[
+                  'hgw-page-form__field',
+                  !item.vShow ? 'is-hidden' : '',
+                  item.block ? 'is-block' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                style={
+                  item.inputWidth
+                    ? { width: item.inputWidth, maxWidth: '100%' }
+                    : undefined
+                }
+              >
+                <label htmlFor={`${reactId}-${item.prop}`}>
+                  {item.required ? <span aria-hidden='true'>*</span> : null}
+                  {item.label}
+                </label>
+                {renderControl(item)}
+                {issue ? (
+                  <p className='hgw-page-form__error' role='alert'>
+                    {issue.message}
+                  </p>
+                ) : null}
+              </div>
+            )
+          })}
+        </form>
+        {renderRight ? (
+          <aside className='hgw-page-form__right'>
+            {renderRight(snapshot.model)}
+          </aside>
+        ) : null}
+      </div>
+      {feedback ? (
+        <p
+          className={`hgw-page-form__feedback is-${feedback.tone}`}
+          role={feedback.tone === 'error' ? 'alert' : 'status'}
+        >
+          {feedback.message}
+        </p>
+      ) : null}
+      {renderFooter ? (
+        <footer className='hgw-page-form__footer'>
+          {renderFooter(snapshot.model)}
+        </footer>
+      ) : null}
+      {renderActionArea('bottom')}
+    </section>
+  )
+}
+
+export const PageForm = forwardRef(PageFormInner) as <
+  TModel extends PageFormRecord,
+>(
+  props: PageFormProps<TModel> & RefAttributes<PageFormHandle<TModel>>
+) => ReactElement | null