@byline/admin 4.16.0 → 4.17.0

package/src/forms/form-renderer.tsx

@@ -11,8 +11,8 @@
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import type {
-  CollectionAdminConfig,
   Field,
+  FormAdminConfig,
   GroupDefinition,
   RowDefinition,
   TabSetDefinition,
@@ -82,7 +82,7 @@ export interface SystemFieldsSubmitPayload {
 export interface FormRendererProps {
   mode: 'create' | 'edit'
   fields: Field[]
-  onSubmit: (data: any) => void
+  onSubmit: (data: any) => void | Promise<void>
   onCancel: () => void
   onStatusChange?: (nextStatus: string) => Promise<void>
   onUnpublish?: () => Promise<void>
@@ -124,7 +124,7 @@ export interface FormRendererProps {
   workflowStatuses?: WorkflowStatus[]
   publishedVersion?: PublishedVersionInfo | null
   initialData?: Record<string, any>
-  adminConfig?: CollectionAdminConfig
+  adminConfig?: FormAdminConfig
   /**
    * Name of the schema field to render as the live form heading.
    * Sourced from `CollectionDefinition.useAsTitle` by the caller.
@@ -136,6 +136,20 @@ export interface FormRendererProps {
    * present the path widget renders in the sidebar.
    */
   useAsPath?: string
+  /**
+   * Whether the system path widget may render in the sidebar. Defaults to
+   * `true`, which preserves the historical behaviour of showing the widget
+   * whenever `useAsPath` is declared or the document envelope carries a
+   * `path`. Set `false` for a resource whose path is internal metadata and
+   * must never be presented or edited.
+   */
+  showPath?: boolean
+  /**
+   * Explicit form heading, used verbatim. Overrides both `useAsTitle`'s live
+   * value and the create/edit wording derived from `mode` — for a resource
+   * whose identity does not change when it is first materialised.
+   */
+  heading?: string
   /**
    * Opts the available-locales widget into the sidebar (below the path
    * widget). Sourced from `CollectionDefinition.advertiseLocales` by the
@@ -203,6 +217,8 @@ const FormContent = ({
   adminConfig,
   useAsTitle,
   useAsPath,
+  showPath = true,
+  heading,
   advertiseLocales,
   tree,
   headingLabel,
@@ -245,6 +261,8 @@ const FormContent = ({
   const [hasChanges, setHasChanges] = useState(hasChangesFn())
   const [statusBusy, setStatusBusy] = useState(false)
   const [isUploading, setIsUploading] = useState(false)
+  const submittingRef = useRef(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
   // Block-only "save first" guard. Set true when the editor triggers a
   // guarded action (status change, duplicate, copy-to-locale) while the form
   // is dirty — those actions operate on the saved version, so unsaved edits
@@ -336,7 +354,8 @@ const FormContent = ({
 
   // Live document heading — tracks the useAsTitle field as the user types
   const liveTitle = useFieldValue<string>(useAsTitle ?? '')
-  const heading =
+  const computedHeading =
+    heading ||
     liveTitle ||
     (headingLabel
       ? mode === 'create'
@@ -379,13 +398,27 @@ const FormContent = ({
     }
   }
 
-  // Emit the payload and optimistically clear dirty state (parity with the
-  // prior submit behaviour — the host surfaces failures via toast).
+  // Await the host handler. Resolution means the save succeeded and the clean
+  // baseline can be committed; rejection preserves dirty state so the editor
+  // does not lose work and the navigation guard keeps blocking. Host handlers
+  // that surface their own toast MUST rethrow afterwards.
+  // Re-entry guard lives in a ref so the callback identity does not change
+  // mid-flight; the mirrored state drives the Save button's disabled prop.
   const submitPayload = useCallback(
-    (payload: SystemFieldsSubmitPayload) => {
-      if (onSubmit && typeof onSubmit === 'function') {
-        onSubmit(payload)
+    async (payload: SystemFieldsSubmitPayload) => {
+      if (typeof onSubmit !== 'function') return
+      if (submittingRef.current) return
+      submittingRef.current = true
+      setIsSubmitting(true)
+      try {
+        await onSubmit(payload)
         resetHasChanges()
+      } catch {
+        // Intentionally swallowed here — the host has already reported the
+        // failure to the user. Dirty state is preserved by not resetting.
+      } finally {
+        submittingRef.current = false
+        setIsSubmitting(false)
       }
     },
     [onSubmit, resetHasChanges]
@@ -482,7 +515,7 @@ const FormContent = ({
         return
       }
 
-      submitPayload(payload)
+      await submitPayload(payload)
     })()
   }
 
@@ -582,7 +615,7 @@ const FormContent = ({
       aria-busy={isUploading}
     >
       <div className={cx('byline-form-heading-row', styles['heading-row'])}>
-        <h1 className={cx('byline-form-heading', styles.heading)}>{heading}</h1>
+        <h1 className={cx('byline-form-heading', styles.heading)}>{computedHeading}</h1>
         {/* Source-locale anchor indicator removed pending heading-layout work.
             To re-enable: render `<SourceLocaleBadge locale={sourceLocale} />`
             here from `initialData.sourceLocale` (mismatch-only is the intended
@@ -615,7 +648,7 @@ const FormContent = ({
             className={cx('byline-form-actions-button', styles['actions-button'])}
             size="sm"
             type="submit"
-            disabled={hasChanges === false || isUploading}
+            disabled={hasChanges === false || isUploading || isSubmitting}
           >
             {isUploading ? t('forms.actions.uploading') : t('common.actions.save')}
           </Button>
@@ -736,18 +769,19 @@ const FormContent = ({
           {layout.main.map((name) => renderItem(name))}
         </div>
         <div className={cx('byline-form-sidebar', styles.sidebar)}>
-          {(useAsPath ||
-            (typeof initialData?.path === 'string' && initialData.path.length > 0)) && (
-            <PathWidget
-              useAsPath={useAsPath}
-              collectionPath={collectionPath ?? ''}
-              defaultLocale={defaultLocale}
-              activeLocale={contentLocale}
-              mode={mode}
-              slugifier={pathSlugifier}
-              sourceLocked={pathSourceLocked}
-            />
-          )}
+          {showPath &&
+            (useAsPath ||
+              (typeof initialData?.path === 'string' && initialData.path.length > 0)) && (
+              <PathWidget
+                useAsPath={useAsPath}
+                collectionPath={collectionPath ?? ''}
+                defaultLocale={defaultLocale}
+                activeLocale={contentLocale}
+                mode={mode}
+                slugifier={pathSlugifier}
+                sourceLocked={pathSourceLocked}
+              />
+            )}
           {tree && mode === 'edit' && typeof initialData?.id === 'string' && (
             <TreePlacementWidget
               collectionPath={collectionPath ?? ''}
@@ -776,7 +810,7 @@ const FormContent = ({
           onConfirm={() => {
             const payload = pendingSystemFieldsSubmit
             setPendingSystemFieldsSubmit(null)
-            submitPayload(payload)
+            void submitPayload(payload)
           }}
         />
       )}

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

@@ -10,7 +10,7 @@
 
 import { useCallback, useEffect, useState } from 'react'
 
-import { getCollectionDefinition } from '@byline/core'
+import { getCollectionDefinition, isSingleton } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import { Button } from '@byline/ui/react'
 import cx from 'clsx'
@@ -49,7 +49,8 @@ export const TreePlacementWidget = ({
 }: TreePlacementWidgetProps) => {
   const { t } = useTranslation('byline-admin')
   const { getTreeAncestors, getTreeParent, placeTreeNode } = useBylineFieldServices()
-  const targetDefinition = getCollectionDefinition(collectionPath)
+  const definition = getCollectionDefinition(collectionPath)
+  const targetDefinition = definition != null && !isSingleton(definition) ? definition : null
 
   const [parent, setParent] = useState<{ id: string; title: string } | null>(null)
   // Whether the document has an edge row at all. `false` = *unplaced* (no row);

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

@@ -11,8 +11,8 @@
 import { useMemo } from 'react'
 
 import type {
-  CollectionAdminConfig,
   Field,
+  FormAdminConfig,
   GroupDefinition,
   LayoutDefinition,
   RowDefinition,
@@ -50,7 +50,7 @@ export interface FormLayout {
  * the `seen` set guards against a config that references a row/group cycle.
  */
 export function buildFieldToTabPath(
-  adminConfig: CollectionAdminConfig | undefined,
+  adminConfig: FormAdminConfig | undefined,
   fieldByName: Map<string, Field>,
   rowByName: Map<string, RowDefinition>,
   groupByName: Map<string, GroupDefinition>
@@ -90,7 +90,7 @@ export function buildFieldToTabPath(
  * Rebuilt only when `adminConfig` / `fields` change.
  */
 export function useFormLayout(
-  adminConfig: CollectionAdminConfig | undefined,
+  adminConfig: FormAdminConfig | undefined,
   fields: Field[]
 ): FormLayout {
   const fieldByName = useMemo(() => {

package/dist/forms/__probe-nested.test.node.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/forms/__probe-two.test.node.d.ts

@@ -1 +0,0 @@
-export {};