Editable Record Detail

Inline record editing with change tracking, validation, hidden fields, and a floating action bar.

Client Only

Installation

pnpm dlx @docyrus/cli add @docyrus/ui-editable-record-detail

UI Primitives(3 components)

npx shadcn@latest add action-bar button popover

Usage

import {
  EditableRecordDetail,
  EditableRecordDetailField,
  useEditableRecordDetail
} from "@docyrus/ui/components/editable-record-detail";

<EditableRecordDetail
  fields={fields}
  record={record}
  onSave={handleSave}
>
  <EditableRecordDetailField slug="name" />
  <EditableRecordDetailField slug="status" />
</EditableRecordDetail>

API Reference

EditableRecordDetailProps

Prop	Type	Default	Description
`fields`	`Array<RecordDetailField>`	—	Field configurations
`record`	`Record<string, unknown>`	—	Current record values keyed by field slug
`onSave`	`(changes: Array<FieldChange>, values: Record<string, unknown>) => void \| Promise<void>`	—	Called when save is triggered
`onCancel`	`() => void`	—	Called when cancel is triggered
`form`	`any`	—	External TanStack Form instance (skips internal macro-form)
`readOnly`	`boolean`	`false`	Whether all fields are read-only
`disabled`	`boolean`	`false`	Whether all fields are disabled
`trackChanges`	`boolean`	`true`	Whether changed fields should be visually highlighted
`actionBarSideOffset`	`number`	—	Side offset for the floating action bar
`children`	`ReactNode`	—	Content (EditableRecordDetailField components)
`className`	`string`	—	Additional CSS class

RecordDetailField

Property	Type	Default	Description
`field`	`IField`	—	Field configuration object
`enumOptions`	`Array<EnumOption>`	—	Enum options for select-based fields
`readOnly`	`boolean`	—	Whether this field is read-only
`required`	`boolean \| ((values: Record<string, unknown>) => boolean)`	—	Whether the field is required. Supports a callback for computed required based on other field values
`hidden`	`boolean \| ((values: Record<string, unknown>) => boolean)`	—	Whether the field should be hidden. Supports a callback for computed visibility based on other field values. Hidden fields are excluded from validation
`appSlug`	`string`	—	App slug for dynamic enum loading
`dataSourceSlug`	`string`	—	Data source slug for dynamic enum loading

EditableRecordDetailFieldProps

Prop	Type	Default	Description
`slug`	`string`	—	Field slug (looks up config from context)
`label`	`ReactNode`	—	Optional label override
`showLabel`	`boolean`	`true`	Render label + value row
`className`	`string`	—	Additional CSS class

useEditableRecordDetail

Hook to access the EditableRecordDetail context from within the provider.

Return	Type	Description
`form`	`any`	The form instance (internal macro-form or external)
`values`	`Record<string, unknown>`	Current record values
`changedFields`	`Set<string>`	Set of changed field slugs
`changedFieldCount`	`number`	Number of changed fields
`valuesVersion`	`number`	Counter that increments on every field value change. Use to trigger re-renders for cross-field reactivity
`isFieldChanged`	`(slug: string) => boolean`	Check if a specific field has changed
`getFieldValue`	`(slug: string) => unknown`	Get the current value of a field
`setFieldValue`	`(slug: string, value: unknown) => void`	Programmatically set a field value and trigger re-render
`getChanges`	`() => Array<FieldChange>`	Get all pending changes
`handleSave`	`() => Promise<void>`	Trigger save with validation
`handleCancel`	`() => void`	Discard all changes and reset to original values
`isSaving`	`boolean`	Whether a save is in progress

FieldChange

Property	Type	Description
`fieldSlug`	`string`	Field slug
`fieldName`	`string`	Field display name
`originalValue`	`unknown`	Value before change
`newValue`	`unknown`	Current value

Editable Record Detail

On this page