| <!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>docs/api/components/one | react-declarative</title><meta name="description" content="Documentation for react-declarative"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">react-declarative</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">react-declarative</a></li><li><a href="docs_api_components_one.html">docs/api/components/one</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="one-component-full-props-and-api-reference" class="tsd-anchor"></a><h1 class="tsd-anchor-link">One component: full props and API reference<a href="#one-component-full-props-and-api-reference" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p><code>One</code> is the core form-rendering component in react-declarative. You describe your form as a flat array of field descriptors (the <code>fields</code> prop), provide a data source via <code>handler</code> or <code>data</code>, and <code>One</code> takes care of rendering, validation, and change propagation. The component is generic over three type parameters: <code>Data</code> (the shape of your form object), <code>Payload</code> (extra context passed to field callbacks), and <code>Field</code> (defaults to <code>TypedField<Data, Payload></code>).</p> |
| <pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">One</span><span class="hl-1">, </span><span class="hl-2">FieldType</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"react-declarative"</span><span class="hl-1">;</span><br/><br/><span class="hl-4">interface</span><span class="hl-1"> </span><span class="hl-7">IUserForm</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">name</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">email</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">age</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">fields</span><span class="hl-1"> = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">"name"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">"Full name"</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">"email"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">"Email address"</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">"age"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">"Age"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">inputType:</span><span class="hl-1"> </span><span class="hl-3">"number"</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-0">default</span><span class="hl-1"> </span><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">UserForm</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-7">One</span><span class="hl-1"><</span><span class="hl-7">IUserForm</span><span class="hl-1">></span><br/><span class="hl-1"> </span><span class="hl-8">fields</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">fields</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">handler</span><span class="hl-1">=</span><span class="hl-4">{async</span><span class="hl-9"> () </span><span class="hl-4">=></span><span class="hl-9"> ({ </span><span class="hl-2">name:</span><span class="hl-9"> </span><span class="hl-3">"Alice"</span><span class="hl-9">, </span><span class="hl-2">email:</span><span class="hl-9"> </span><span class="hl-3">"alice@example.com"</span><span class="hl-9">, </span><span class="hl-2">age:</span><span class="hl-9"> </span><span class="hl-16">30</span><span class="hl-9"> })</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">onChange</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-9">(</span><span class="hl-2">data</span><span class="hl-9">, </span><span class="hl-2">initial</span><span class="hl-9">) </span><span class="hl-4">=></span><span class="hl-9"> {</span><br/><span class="hl-9"> </span><span class="hl-0">if</span><span class="hl-9"> (</span><span class="hl-1">!</span><span class="hl-2">initial</span><span class="hl-9">) </span><span class="hl-2">console</span><span class="hl-9">.</span><span class="hl-5">log</span><span class="hl-9">(</span><span class="hl-3">"changed:"</span><span class="hl-9">, </span><span class="hl-2">data</span><span class="hl-9">);</span><br/><span class="hl-9"> }</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-6">/></span><br/><span class="hl-1"> );</span><br/><span class="hl-1">}</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <a id="data" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Data<a href="#data" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="fields--field-required" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>fields</code> — <code>Field[]</code> (required)<a href="#fields--field-required" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Array of field descriptors that define the form layout and inputs. Each descriptor is a <code>TypedField<Data, Payload></code> object with at minimum a <code>type</code> (e.g. <code>FieldType.Text</code>) and <code>name</code> matching a key in <code>Data</code>.</p> |
| <hr> |
| <a id="handler--onehandler" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>handler</code> — <code>OneHandler<Data, Payload></code><a href="#handler--onehandler" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Data source for the form. Accepts a plain <code>Data</code> object, a synchronous function <code>(payload: Payload) => Data | null</code>, or an async function returning <code>Promise<Data | null></code>. Called once on mount (and on <code>reloadSubject</code> emission) to populate the form. Use <code>handler</code> when data must be fetched; use <code>data</code> for controlled, React-state-owned values.</p> |
| <hr> |
| <a id="data--data--null" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>data</code> — <code>Data | null</code><a href="#data--data--null" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Alternative to <code>handler</code> for React developers who prefer a controlled pattern. Pass your data object directly; <code>One</code> re-renders whenever this prop changes. Cannot be used simultaneously with <code>handler</code>.</p> |
| <hr> |
| <a id="payload--payload----payload" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>payload</code> — <code>Payload | (() => Payload)</code><a href="#payload--payload----payload" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Arbitrary context object passed through to every field callback (<code>isVisible</code>, <code>isDisabled</code>, <code>validate</code>, etc.) and to <code>handler</code>. Use it to thread user identity, permissions, or other cross-cutting state into your field definitions without adding it to <code>Data</code>.</p> |
| <hr> |
| <a id="context--record" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>context</code> — <code>Record<string, any></code><a href="#context--record" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Similar to <code>payload</code> but participates in change detection. Updates to <code>context</code> trigger field re-renders, making it suitable for values that your field visibility or validation logic depends on dynamically.</p> |
| <hr> |
| <a id="callbacks" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Callbacks<a href="#callbacks" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="onchange--data-data-initial-boolean--void" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>onChange</code> — <code>(data: Data, initial: boolean) => void</code><a href="#onchange--data-data-initial-boolean--void" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Called every time any field value changes. <code>data</code> is the full, up-to-date form object. <code>initial</code> is <code>true</code> only for the first emission that fires immediately after <code>handler</code> resolves — use this flag to distinguish the initial hydration from user edits.</p> |
| <hr> |
| <a id="onfocus--name-string-data-data-payload-payload-onvaluechange-value-value--void-onchange-data-data--void--void" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>onFocus</code> — <code>(name: string, data: Data, payload: Payload, onValueChange: (value: Value) => void, onChange: (data: Data) => void) => void</code><a href="#onfocus--name-string-data-data-payload-payload-onvaluechange-value-value--void-onchange-data-data--void--void" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Called when a field receives focus. Receives the field name, current form data, payload, and two imperative helpers to push a new field value or a full data object from inside the callback.</p> |
| <hr> |
| <a id="onblur--name-string-data-data-payload-payload-onvaluechange-value-value--void-onchange-data-data--void--void" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>onBlur</code> — <code>(name: string, data: Data, payload: Payload, onValueChange: (value: Value) => void, onChange: (data: Data) => void) => void</code><a href="#onblur--name-string-data-data-payload-payload-onvaluechange-value-value--void-onchange-data-data--void--void" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Called when a field loses focus. Same signature as <code>onFocus</code>.</p> |
| <hr> |
| <a id="onclick--name-string-data-data-payload-payload-onvaluechange-value-value--void-onchange-data-data--void-e-reactmouseevent--void--promise" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>onClick</code> — <code>(name: string, data: Data, payload: Payload, onValueChange: (value: Value) => void, onChange: (data: Data) => void, e: React.MouseEvent) => void | Promise<void></code><a href="#onclick--name-string-data-data-payload-payload-onvaluechange-value-value--void-onchange-data-data--void-e-reactmouseevent--void--promise" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Called when the user clicks a field. The native <code>MouseEvent</code> is provided as the last argument. Useful for custom action fields or triggering navigation on click.</p> |
| <hr> |
| <a id="onmenu--name-string-action-string-data-data-payload-payload-onvaluechange-value-value--void-onchange-data-data--void--void" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>onMenu</code> — <code>(name: string, action: string, data: Data, payload: Payload, onValueChange: (value: Value) => void, onChange: (data: Data) => void) => void</code><a href="#onmenu--name-string-action-string-data-data-payload-payload-onvaluechange-value-value--void-onchange-data-data--void--void" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Called when the user picks an item from a field's context menu. <code>action</code> is the string identifier of the chosen menu item.</p> |
| <hr> |
| <a id="onready----void" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>onReady</code> — <code>() => void</code><a href="#onready----void" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Fired once after all fields have completed their first render. Use this as a signal that the form is fully interactive, for example to focus a field programmatically.</p> |
| <hr> |
| <a id="oninvalid--name-string-msg-string-payload-payload--void" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>onInvalid</code> — <code>(name: string, msg: string, payload: Payload) => void</code><a href="#oninvalid--name-string-msg-string-payload-payload--void" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Called whenever a field fails validation. <code>name</code> is the field's data key and <code>msg</code> is the validation error string returned by the field's <code>validate</code> function.</p> |
| <hr> |
| <a id="onloadstart--source-string--void" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>onLoadStart</code> — <code>(source: string) => void</code><a href="#onloadstart--source-string--void" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Called when an async operation (such as the <code>handler</code> fetch) begins. <code>source</code> identifies which part of the component triggered the load.</p> |
| <hr> |
| <a id="onloadend--isok-boolean-source-string--void" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>onLoadEnd</code> — <code>(isOk: boolean, source: string) => void</code><a href="#onloadend--isok-boolean-source-string--void" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Called when an async operation completes. <code>isOk</code> is <code>false</code> if the operation threw an error.</p> |
| <hr> |
| <a id="fallback--e-error--void" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>fallback</code> — <code>(e: Error) => void</code><a href="#fallback--e-error--void" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Error handler invoked if <code>handler</code> rejects. Use this to show a toast or navigate away rather than letting the error propagate silently.</p> |
| <hr> |
| <a id="layout" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Layout<a href="#layout" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="classname--string" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>className</code> — <code>string</code><a href="#classname--string" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>CSS class applied to the root group element.</p> |
| <hr> |
| <a id="style--reactcssproperties" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>style</code> — <code>React.CSSProperties</code><a href="#style--reactcssproperties" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Inline styles applied to the root group element.</p> |
| <hr> |
| <a id="sx--sxprops" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>sx</code> — <code>SxProps</code><a href="#sx--sxprops" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>MUI <code>sx</code> prop applied to the root group element, giving you access to the theme and responsive breakpoints.</p> |
| <hr> |
| <a id="baseline--boolean" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>baseline</code> — <code>boolean</code><a href="#baseline--boolean" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>When <code>true</code>, all fields are anchored to the bottom edge of their row, aligning multi-height fields along a common baseline.</p> |
| <hr> |
| <a id="nobaseline--boolean" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>noBaseline</code> — <code>boolean</code><a href="#nobaseline--boolean" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>When <code>true</code>, fields and layouts are anchored to the top edge instead. Overrides <code>baseline</code>.</p> |
| <hr> |
| <a id="outlinepaper--boolean" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>outlinePaper</code> — <code>boolean</code><a href="#outlinepaper--boolean" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Converts any <code>FieldType.Paper</code> layout in the schema into a <code>FieldType.Outline</code> style, which renders with a visible border instead of an elevated card background.</p> |
| <hr> |
| <a id="transparentpaper--boolean" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>transparentPaper</code> — <code>boolean</code><a href="#transparentpaper--boolean" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Renders <code>FieldType.Paper</code> layouts with a transparent background.</p> |
| <hr> |
| <a id="flags" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Flags<a href="#flags" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="readonly--boolean" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>readonly</code> — <code>boolean</code><a href="#readonly--boolean" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>When <code>true</code>, all input fields are rendered in a read-only state. Values are visible but not editable.</p> |
| <hr> |
| <a id="disabled--boolean" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>disabled</code> — <code>boolean</code><a href="#disabled--boolean" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>When <code>true</code>, all input fields are disabled. Unlike <code>readonly</code>, disabled fields typically render with reduced opacity and do not receive focus.</p> |
| <hr> |
| <a id="dirty--boolean" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>dirty</code> — <code>boolean</code><a href="#dirty--boolean" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>When <code>true</code>, validation errors are shown immediately on all fields without waiting for the user to focus or blur them.</p> |
| <hr> |
| <a id="features--record--string----string--record" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>features</code> — <code>Record<string, Value> | string[] | (() => string[] | Record<string, Value>)</code><a href="#features--record--string----string--record" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Business feature flags that control field visibility. Fields in your schema can declare a <code>features</code> list; only fields whose features intersect this set are rendered. Pass an array of active feature names or a record mapping feature names to values.</p> |
| <hr> |
| <a id="advanced" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Advanced<a href="#advanced" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="apiref--reactref" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>apiRef</code> — <code>React.Ref<IOneApi></code><a href="#apiref--reactref" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Attach a ref to receive the <code>IOneApi</code> imperative handle, which lets you trigger reloads, read current values, or force re-validation from outside the component.</p> |
| <hr> |
| <a id="changedelay--number" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>changeDelay</code> — <code>number</code><a href="#changedelay--number" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Debounce delay in milliseconds applied to <code>onChange</code> emissions. Useful when you want to reduce the frequency of server round-trips triggered by rapid typing.</p> |
| <hr> |
| <a id="fielddebounce--number" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>fieldDebounce</code> — <code>number</code><a href="#fielddebounce--number" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Debounce in milliseconds applied specifically to <code>FieldType.Text</code> inputs before their value is committed to the form state.</p> |
| <hr> |
| <a id="reloadsubject--tsubject" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>reloadSubject</code> — <code>TSubject<void></code><a href="#reloadsubject--tsubject" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>RxJS-like subject. Emit on it to trigger a fresh call to <code>handler</code>, re-hydrating the form without unmounting.</p> |
| <hr> |
| <a id="changesubject--tsubject" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>changeSubject</code> — <code>TSubject<Data></code><a href="#changesubject--tsubject" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Subject that, when emitted, calls <code>change(data, true)</code> — treating the emission as an initial data replacement rather than a user edit.</p> |
| <hr> |
| <a id="updatesubject--tsubject" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>updateSubject</code> — <code>TSubject<Data></code><a href="#updatesubject--tsubject" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Subject that, when emitted, calls <code>change(data, false)</code> — treating the emission as an incremental update.</p> |
| <hr> |
| <a id="readtransform--value-string--string-name-string-data-data-payload-payload--value" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>readTransform</code> — <code>(value: string | string[], name: string, data: Data, payload: Payload) => Value</code><a href="#readtransform--value-string--string-name-string-data-data-payload-payload--value" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Transform applied when reading a field value out of <code>Data</code> before displaying it. Use this to deserialize stored values (e.g. convert a comma-separated string to an array).</p> |
| <hr> |
| <a id="writetransform--value-string--string-name-string-data-data-payload-payload--value" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>writeTransform</code> — <code>(value: string | string[], name: string, data: Data, payload: Payload) => Value</code><a href="#writetransform--value-string--string-name-string-data-data-payload-payload--value" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Transform applied when writing a field value back into <code>Data</code>. The inverse of <code>readTransform</code>.</p> |
| <hr> |
| <a id="slots--partial" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>slots</code> — <code>Partial<ISlotFactoryContext></code><a href="#slots--partial" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Override the default slot components used to render individual field types. Each key in <code>ISlotFactoryContext</code> corresponds to a <code>FieldType</code> and accepts a custom React component.</p> |
| </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#one-component-full-props-and-api-reference"><span>One component: full props and API reference</span></a><ul><li><a href="#data"><span>Data</span></a></li><li><ul><li><a href="#fields--field-required"><span>fields — <wbr/>Field[] (required)</span></a></li><li><a href="#handler--onehandler"><span>handler — <wbr/>One<wbr/>Handler<<wbr/>Data, <wbr/>Payload></span></a></li><li><a href="#data--data--null"><span>data — <wbr/>Data | null</span></a></li><li><a href="#payload--payload----payload"><span>payload — <wbr/>Payload | (() => <wbr/>Payload)</span></a></li><li><a href="#context--record"><span>context — <wbr/>Record<string, any></span></a></li></ul></li><li><a href="#callbacks"><span>Callbacks</span></a></li><li><ul><li><a href="#onchange--data-data-initial-boolean--void"><span>on<wbr/>Change — (data: <wbr/>Data, initial: boolean) => void</span></a></li><li><a href="#onfocus--name-string-data-data-payload-payload-onvaluechange-value-value--void-onchange-data-data--void--void"><span>on<wbr/>Focus — (name: string, data: <wbr/>Data, payload: <wbr/>Payload, on<wbr/>Value<wbr/>Change: (value: <wbr/>Value) => void, on<wbr/>Change: (data: <wbr/>Data) => void) => void</span></a></li><li><a href="#onblur--name-string-data-data-payload-payload-onvaluechange-value-value--void-onchange-data-data--void--void"><span>on<wbr/>Blur — (name: string, data: <wbr/>Data, payload: <wbr/>Payload, on<wbr/>Value<wbr/>Change: (value: <wbr/>Value) => void, on<wbr/>Change: (data: <wbr/>Data) => void) => void</span></a></li><li><a href="#onclick--name-string-data-data-payload-payload-onvaluechange-value-value--void-onchange-data-data--void-e-reactmouseevent--void--promise"><span>on<wbr/>Click — (name: string, data: <wbr/>Data, payload: <wbr/>Payload, on<wbr/>Value<wbr/>Change: (value: <wbr/>Value) => void, on<wbr/>Change: (data: <wbr/>Data) => void, e: <wbr/>React.<wbr/>Mouse<wbr/>Event) => void | <wbr/>Promise<void></span></a></li><li><a href="#onmenu--name-string-action-string-data-data-payload-payload-onvaluechange-value-value--void-onchange-data-data--void--void"><span>on<wbr/>Menu — (name: string, action: string, data: <wbr/>Data, payload: <wbr/>Payload, on<wbr/>Value<wbr/>Change: (value: <wbr/>Value) => void, on<wbr/>Change: (data: <wbr/>Data) => void) => void</span></a></li><li><a href="#onready----void"><span>on<wbr/>Ready — () => void</span></a></li><li><a href="#oninvalid--name-string-msg-string-payload-payload--void"><span>on<wbr/>Invalid — (name: string, msg: string, payload: <wbr/>Payload) => void</span></a></li><li><a href="#onloadstart--source-string--void"><span>on<wbr/>Load<wbr/>Start — (source: string) => void</span></a></li><li><a href="#onloadend--isok-boolean-source-string--void"><span>on<wbr/>Load<wbr/>End — (is<wbr/>Ok: boolean, source: string) => void</span></a></li><li><a href="#fallback--e-error--void"><span>fallback — (e: <wbr/>Error) => void</span></a></li></ul></li><li><a href="#layout"><span>Layout</span></a></li><li><ul><li><a href="#classname--string"><span>class<wbr/>Name — string</span></a></li><li><a href="#style--reactcssproperties"><span>style — <wbr/>React.CSSProperties</span></a></li><li><a href="#sx--sxprops"><span>sx — <wbr/>Sx<wbr/>Props</span></a></li><li><a href="#baseline--boolean"><span>baseline — boolean</span></a></li><li><a href="#nobaseline--boolean"><span>no<wbr/>Baseline — boolean</span></a></li><li><a href="#outlinepaper--boolean"><span>outline<wbr/>Paper — boolean</span></a></li><li><a href="#transparentpaper--boolean"><span>transparent<wbr/>Paper — boolean</span></a></li></ul></li><li><a href="#flags"><span>Flags</span></a></li><li><ul><li><a href="#readonly--boolean"><span>readonly — boolean</span></a></li><li><a href="#disabled--boolean"><span>disabled — boolean</span></a></li><li><a href="#dirty--boolean"><span>dirty — boolean</span></a></li><li><a href="#features--record--string----string--record"><span>features — <wbr/>Record<string, <wbr/>Value> | string[] | (() => string[] | <wbr/>Record<string, <wbr/>Value>)</span></a></li></ul></li><li><a href="#advanced"><span>Advanced</span></a></li><li><ul><li><a href="#apiref--reactref"><span>api<wbr/>Ref — <wbr/>React.<wbr/>Ref<IOne<wbr/>Api></span></a></li><li><a href="#changedelay--number"><span>change<wbr/>Delay — number</span></a></li><li><a href="#fielddebounce--number"><span>field<wbr/>Debounce — number</span></a></li><li><a href="#reloadsubject--tsubject"><span>reload<wbr/>Subject — TSubject<void></span></a></li><li><a href="#changesubject--tsubject"><span>change<wbr/>Subject — TSubject<<wbr/>Data></span></a></li><li><a href="#updatesubject--tsubject"><span>update<wbr/>Subject — TSubject<<wbr/>Data></span></a></li><li><a href="#readtransform--value-string--string-name-string-data-data-payload-payload--value"><span>read<wbr/>Transform — (value: string | string[], name: string, data: <wbr/>Data, payload: <wbr/>Payload) => <wbr/>Value</span></a></li><li><a href="#writetransform--value-string--string-name-string-data-data-payload-payload--value"><span>write<wbr/>Transform — (value: string | string[], name: string, data: <wbr/>Data, payload: <wbr/>Payload) => <wbr/>Value</span></a></li><li><a href="#slots--partial"><span>slots — <wbr/>Partial<ISlot<wbr/>Factory<wbr/>Context></span></a></li></ul></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">react-declarative</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html> |
|
|
