@payload-onpage/react 0.2.0 → 0.3.0

package/src/ui/SettingsPanel.tsx

@@ -6,40 +6,29 @@
  * spacing…), checkboxes, numbers, dates, relationships, URLs and other plain
  * text, images that aren't on the page. Changes apply immediately.
  */
-import { fieldAtPath, getAt, relationTitle, toText, type SchemaField } from '@payload-onpage/core'
+import {
+  fieldAtPath,
+  getAt,
+  relationTitle,
+  rowFieldsOf,
+  toText,
+  isListField,
+  type ChoiceField,
+  type NumberField,
+  type ScalarField,
+  type SchemaField,
+  isReady,
+  type RefKey,
+} from '@payload-onpage/core'
 import { useId, useRef, useState, type KeyboardEvent, type RefObject } from 'react'
 import { useOnPage } from '../context.tsx'
 import type { Translate } from '../messages.ts'
-import type { TargetIndex } from '../types.ts'
+import { checkedOf } from '../editors/CheckboxEditor.tsx'
+import { selectedValues } from '../editors/SelectEditor.tsx'
+import { canEdit } from '../registry.ts'
+import { settable } from '../settings.ts'
 import { Dialog } from './Dialog.tsx'
 
-const SKIP = new Set(['id', 'blockType', 'blockName'])
-const TEXTUAL = new Set(['text', 'textarea', 'email', 'number', 'date', 'relationship', 'upload'])
-const INPUT_TYPES = new Set(['text', 'textarea', 'email', 'number'])
-
-function settable(field: SchemaField, path: string, key: string, targets: TargetIndex): boolean {
-  if (SKIP.has(field.name)) return false
-  const full = `${path}.${field.name}`
-  switch (field.type) {
-    case 'select':
-    case 'radio':
-    case 'checkbox':
-      return true
-    case 'group':
-      return (field.fields ?? []).some((f) => settable(f, full, key, targets))
-    default:
-      // Shown on the page? Edit it there.
-      return TEXTUAL.has(field.type) && !targets.find(key, full)
-  }
-}
-
-export const hasSettings = (
-  fields: SchemaField[],
-  path: string,
-  key: string,
-  targets: TargetIndex,
-): boolean => fields.some((f) => settable(f, path, key, targets))
-
 const display = (v: unknown, t: Translate): string => {
   if (v == null || v === '') return t('common.none')
   if (Array.isArray(v))
@@ -53,9 +42,9 @@ function TextInput({
   field,
   id,
 }: {
-  docKey: string
+  docKey: RefKey
   path: string
-  field: SchemaField
+  field: ScalarField | NumberField
   id: string
 }) {
   const { session, snap } = useOnPage()
@@ -92,14 +81,15 @@ function Segmented({
   field,
   labelId,
 }: {
-  docKey: string
+  docKey: RefKey
   path: string
-  field: SchemaField
+  field: ChoiceField
   labelId: string
 }) {
   const { session, snap } = useOnPage()
-  const options = field.options ?? []
-  const current = getAt(snap.docs[docKey]?.doc, path) ?? field.defaultValue ?? ''
+  const options = field.options
+  const current =
+    selectedValues(getAt(snap.docs[docKey]?.doc, path) ?? field.defaultValue, field)[0] ?? ''
   const index = Math.max(
     0,
     options.findIndex((o) => o.value === current),
@@ -148,54 +138,17 @@ function Control({
   id,
   labelId,
 }: {
-  docKey: string
+  docKey: RefKey
   path: string
   field: SchemaField
   anchor: RefObject<HTMLDivElement | null>
   id: string
   labelId: string
 }) {
-  const { session, snap, edit, t } = useOnPage()
+  const { session, snap, edit, editors, t } = useOnPage()
   const value = getAt(snap.docs[docKey]?.doc, path)
   const set = (v: unknown) => session.setValue(docKey, path, v)
-  if ((field.type === 'select' || field.type === 'radio') && !field.hasMany) {
-    const options = field.options ?? []
-    if (options.length <= 5)
-      return <Segmented docKey={docKey} path={path} field={field} labelId={labelId} />
-    return (
-      <select
-        id={id}
-        className="po-select"
-        value={toText(value ?? field.defaultValue)}
-        onChange={(e) => set(e.target.value || null)}
-        data-testid={`onpage-setting-${path}`}
-      >
-        {!field.required && <option value="">{t('common.none')}</option>}
-        {options.map((o) => (
-          <option key={o.value} value={o.value}>
-            {o.label}
-          </option>
-        ))}
-      </select>
-    )
-  }
-  if (field.type === 'checkbox') {
-    return (
-      <label className="po-check">
-        <input
-          type="checkbox"
-          checked={Boolean(value ?? field.defaultValue)}
-          onChange={(e) => set(e.target.checked)}
-          data-testid={`onpage-setting-${path}`}
-        />
-        {field.label}
-      </label>
-    )
-  }
-  if (INPUT_TYPES.has(field.type))
-    return <TextInput docKey={docKey} path={path} field={field} id={id} />
-  // Everything else opens its field editor, anchored to the panel row.
-  return (
+  const openEditor = (
     <button
       id={id}
       type="button"
@@ -208,9 +161,59 @@ function Control({
         : display(value, t)}
     </button>
   )
+  // A field with its own editor (e.g. `editor: 'color'`) opens it, whatever its type.
+  if (field.editor && canEdit(editors[field.editor], field)) return openEditor
+  switch (field.type) {
+    case 'select':
+    case 'radio': {
+      if (field.hasMany) return openEditor
+      if (field.options.length <= 5)
+        return <Segmented docKey={docKey} path={path} field={field} labelId={labelId} />
+      return (
+        <select
+          id={id}
+          className="po-select"
+          value={selectedValues(value ?? field.defaultValue, field)[0] ?? ''}
+          onChange={(e) => set(e.target.value || null)}
+          data-testid={`onpage-setting-${path}`}
+        >
+          {!field.required && <option value="">{t('common.none')}</option>}
+          {field.options.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      )
+    }
+    case 'checkbox':
+      return (
+        <label className="po-check">
+          <input
+            type="checkbox"
+            checked={checkedOf(value, field)}
+            onChange={(e) => set(e.target.checked)}
+            data-testid={`onpage-setting-${path}`}
+          />
+          {field.label}
+        </label>
+      )
+    case 'text':
+    case 'textarea':
+    case 'email':
+    case 'number':
+      return 'hasMany' in field && field.hasMany ? (
+        openEditor
+      ) : (
+        <TextInput docKey={docKey} path={path} field={field} id={id} />
+      )
+    default:
+      // Dates, relationships, images…: open the field editor, anchored to the panel row.
+      return openEditor
+  }
 }
 
-function Row({ docKey, path, field }: { docKey: string; path: string; field: SchemaField }) {
+function Row({ docKey, path, field }: { docKey: RefKey; path: string; field: SchemaField }) {
   const anchor = useRef<HTMLDivElement>(null)
   const id = useId()
   const labelId = `${id}-label`
@@ -234,7 +237,7 @@ function Row({ docKey, path, field }: { docKey: string; path: string; field: Sch
   )
 }
 
-function Fields({ docKey, fields, path }: { docKey: string; fields: SchemaField[]; path: string }) {
+function Fields({ docKey, fields, path }: { docKey: RefKey; fields: SchemaField[]; path: string }) {
   const { targets } = useOnPage()
   return (
     <>
@@ -246,7 +249,7 @@ function Fields({ docKey, fields, path }: { docKey: string; fields: SchemaField[
             return (
               <fieldset key={f.name} className="po-group">
                 <legend className="po-h4">{f.label}</legend>
-                <Fields docKey={docKey} fields={f.fields ?? []} path={full} />
+                <Fields docKey={docKey} fields={f.fields} path={full} />
               </fieldset>
             )
           }
@@ -260,11 +263,11 @@ export function SettingsPanel() {
   const { panel, setPanel, snap, t } = useOnPage()
   if (panel?.kind !== 'settings') return null
   const state = snap.docs[panel.key]
-  if (!state?.schema || !state.doc) return null
-  const owner = fieldAtPath(state.schema.fields, state.doc, panel.path)
+  if (!isReady(state)) return null
+  const owner = fieldAtPath(state.schema.fields, state.doc, panel.path)?.field
   // Row fields: the block's fields for a blocks row, the item fields for an array row.
   const fields =
-    owner?.field.type === 'blocks' ? (owner.block?.fields ?? []) : (owner?.field.fields ?? [])
+    owner && isListField(owner) ? (rowFieldsOf(owner, getAt(state.doc, panel.path)) ?? []) : []
   return (
     <Dialog
       variant="panel"

package/src/ui/ToolbarButton.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+/** An icon button in a toolbar: labelled for assistive tech, with the label (or a hint) as its tooltip. */
+export function ToolbarButton({
+  label,
+  hint,
+  icon,
+  onClick,
+  disabled,
+  danger,
+  testId,
+}: {
+  label: string
+  hint?: string
+  icon: ReactNode
+  onClick: () => void
+  disabled?: boolean
+  danger?: boolean
+  testId: string
+}) {
+  return (
+    <button
+      type="button"
+      className={`po-btn${danger ? ' is-danger' : ''}`}
+      disabled={disabled}
+      onClick={onClick}
+      aria-label={label}
+      title={hint ?? label}
+      data-testid={testId}
+    >
+      {icon}
+    </button>
+  )
+}

package/src/useEvent.ts

@@ -7,10 +7,12 @@ import { useCallback, useInsertionEffect, useRef } from 'react'
  * pattern). Our own, because the React bundled with Next.js 15 doesn't export
  * `useEffectEvent`. Call it from effects and event handlers, not during render.
  */
-export function useEvent<A extends unknown[], R>(fn: (...args: A) => R): (...args: A) => R {
+export function useEvent<F extends (...args: never[]) => unknown>(fn: F): F {
   const latest = useRef(fn)
   useInsertionEffect(() => {
     latest.current = fn
   })
-  return useCallback((...args: A) => latest.current(...args), [])
+  const stable = useCallback((...args: Parameters<F>) => latest.current(...args), [])
+  // The wrapper has F's exact signature: it forwards its arguments and result unchanged.
+  return stable as F
 }

package/src/useIsClient.ts

@@ -0,0 +1,15 @@
+import { useEffect, useSyncExternalStore } from 'react'
+import { injectStyles } from './styles.ts'
+
+const noopSubscribe = () => () => {}
+
+/** False during SSR and hydration, true after: for UI that only exists in the browser. */
+export const useIsClient = (): boolean =>
+  useSyncExternalStore(
+    noopSubscribe,
+    () => true,
+    () => false,
+  )
+
+/** Adds the editor's stylesheet to the page while mounted. */
+export const useEditorStyles = (): void => useEffect(() => injectStyles(), [])