Record inline edit

If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.

fields describes every field, keyed by API name: Record form's description, which extends Record detail's, with editable: false for a field people can't change and href for a lookup's link. values is the record. The same two render a read-only Record detail. Each RecordInlineEditField draws one field by name. Saving is the app's, so control mode: onSubmit gets the values, and the app passes pending and a failed save's errors back in, or the new values with mode set to "view". defaultMode only sets the mode it starts in.

Send changed, the values that differ from values, to updateRecord. When it's empty, set the mode back to "view" without a request. To lay out a page layout loaded at runtime, map its sections to RecordInlineEditSection and their field names to RecordInlineEditField, as Record form's Usage does.

RecordInlineEditFooter draws Cancel and Save on its own. To order the buttons or add one of the page's, pass them as children: RecordInlineEditCancel returns to view mode, and Save is Record form's RecordFormSubmit:

A field whose control Record form doesn't draw, like a multi-select picklist, takes a custom control as RecordInlineEditField's child, written with useRecordFormControl as in Record form. Edit mode draws it; view mode shows the value by the field's type.

The footer sticks to the bottom of its scroll container. For Lightning's footer, fixed to the bottom of the window, set it with className:

• RecordInlineEditSection is Record detail's section, an expandable slds-section over the record detail form layout (slds-form, slds-form__row, slds-form__item), drawn the same in both modes.
• In view mode, RecordInlineEditField is Record detail's field: slds-form-element_readonly with slds-form-element_edit and its pencil. In edit mode it's Record form's field, and a field people can't edit stays read-only with utility:lock where the pencil was.
• A changed field is slds-is-edited, with slds-form-element__undo's utility:undo button.
• RecordInlineEditMessages is Record form's error Alert.
• RecordInlineEditFooter is slds-docked-form-footer, sticky at the bottom of its scroll container rather than fixed to the window.

Known gaps:

• No multi-select picklist or rich text controls in edit mode, as in Record form. Draw them with a custom control. A relative time ("3 hours ago") stays read-only.
• No error popover next to the footer's buttons; the record's errors show above the sections.
• A pencil opens every editable field, as Lightning's record detail does. Editing one field alone, as a list view's cell does, isn't drawn.

• Each section's title is a heading with its toggle inside: h2 by default, for a record page whose header is the h1. Under another heading, set headingLevel one level below it.
• A pencil is named after its field, like "Edit Amount", an undo button "Undo Amount", and a lock "Locked Opportunity Owner".
• Cancel, or a save the app finishes by setting the mode to "view", returns focus to the pencil that started the edit, or to its section's toggle when that section was collapsed meanwhile.
• While pending, Save and Cancel are disabled, so the save's answer can't land on a newer edit. Fields stay editable.
• A save that fails moves focus to the first field with an error, or to the record's errors when none belongs to a field on the page, and opens every collapsed section until the edit ends.

• Two columns need about 584px. In a narrower container the fields stack in one column, in the same order.
• Labels follow Salesforce's display density by default (layout="auto"): above the values, and beside them when the page is compact (data-density="compact" on <html>). layout="stacked" or "horizontal" fixes it for one block.
• Beside means from a 48rem screen, whatever the block's own width; below that they stack.

• Control mode for a save: the block never leaves edit mode on its own, and never reads success from pending going false.
• Pass errors from state, a new object for each failed save. Errors left over from an earlier edit don't show when a new one starts.
• Pass null for an empty value, never "" or 0. A percent is a fraction: 0.6 for 60%. A lookup's value is its record ({ id, name }).
• A relative field must be editable: false. A datetime is an instant, shown and edited on timeZone's clock, so pass the user's time zone; a time is Salesforce's "HH:mm:ss.SSSZ", which no time zone moves.
• Give sections with the same title a value, or they share their open state.
• Keep the footer inside RecordInlineEdit: Save is a submit button. It and its children show only in edit mode. With children, keep a RecordFormSubmit and a RecordInlineEditCancel among them, or people can't save or leave edit mode.
• Never pass asChild or render.