@iress-oss/ids-mcp-server 0.0.1-dev.4 → 0.0.1

package/{generated/docs → docs/ids}/components-form-docs.md

@@ -68,7 +68,231 @@ Mode
 
 DiffOldNew
 
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { IressForm, IressField, IressInput, IressCheckboxGroup, IressCheckbox } from '@iress/components';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { IressForm, IressFormField, IressInput, IressCheckboxGroup, IressCheckbox } from '@iress-oss/ids-components';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">export const App = () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">const ConditionalFields = () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // We need to create our own state to manage the visibility of the fields, </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // Instead of creating our own state, we can now use the form state via the useWatch hook, </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // which means we have two sources of truth potentially making our code harder to maintain</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // meaning we still have a single source of truth</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const [show, setShow] = useState(['name']);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const show = IressForm.useWatch({ name: 'show'});</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  return (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">      &lt;IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    &lt;&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        &lt;IressField label="Show fields"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;IressCheckboxGroup value={show} onChange={(newValues) =&gt; setShow(newValues)}&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        label="Show fields" </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        name="show"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        render={(controlledProps) =&gt; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          &lt;IressCheckboxGroup {...controlledProps}&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">            &lt;IressCheckbox value="name"&gt;Name&lt;/IressCheckbox&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">            &lt;IressCheckbox value="email"&gt;Email&lt;/IressCheckbox&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">          &lt;/IressCheckboxGroup&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        {show.includes('name') &amp;&amp; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;IressField label="Name"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      {show?.includes('name') &amp;&amp; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">            &lt;IressInput name="name" /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          label="Name" </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          name="name"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        {show.includes('email') &amp;&amp; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          render={(controlledProps) =&gt; &lt;IressInput {...controlledProps} /&gt;}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;IressField label="Email"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">            &lt;IressInput name="email" type="email" /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      {show?.includes('email') &amp;&amp; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">      &lt;/IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          label="Email" </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          name="email"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          render={(controlledProps) =&gt; &lt;IressInput {...controlledProps} type="email" /&gt;}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">     &lt;/&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  );</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">};</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-10regm7-empty-line css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">export const App = () =&gt; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  &lt;IressForm defaultValues={{ show: ['name'] }}&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    &lt;ConditionalFields /&gt; </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  &lt;/IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">);</pre></td></tr></tbody></table>
+\-
+
+import { IressForm, IressField, IressInput, IressCheckboxGroup, IressCheckbox } from '@iress/components';
+
++
+
+import { IressForm, IressFormField, IressInput, IressCheckboxGroup, IressCheckbox } from '@iress/ids-components';
+
+\-
+
+export const App = () => {
+
++
+
+const ConditionalFields = () => {
+
+\-
+
+  // We need to create our own state to manage the visibility of the fields, 
+
++
+
+  // Instead of creating our own state, we can now use the form state via the useWatch hook, 
+
+\-
+
+  // which means we have two sources of truth potentially making our code harder to maintain
+
++
+
+  // meaning we still have a single source of truth
+
+\-
+
+  const \[show, setShow\] = useState(\['name'\]);
+
++
+
+  const show = IressForm.useWatch({ name: 'show'});
+
+  return (
+
+\-
+
+      <IressForm>
+
++
+
+    <>
+
+\-
+
+        <IressField label="Show fields">
+
++
+
+      <IressFormField 
+
+\-
+
+          <IressCheckboxGroup value={show} onChange={(newValues) => setShow(newValues)}>
+
++
+
+        label="Show fields" 
+
++
+
+        name="show"
+
++
+
+        render={(controlledProps) => (
+
++
+
+          <IressCheckboxGroup {...controlledProps}>
+
+            <IressCheckbox value="name">Name</IressCheckbox>
+
+            <IressCheckbox value="email">Email</IressCheckbox>
+
+          </IressCheckboxGroup>
+
+\-
+
+        </IressField>
+
++
+
+        )}
+
+\-
+
+        {show.includes('name') && (
+
++
+
+      />
+
+\-
+
+          <IressField label="Name">
+
++
+
+      {show?.includes('name') && (
+
+\-
+
+            <IressInput name="name" />
+
++
+
+        <IressFormField 
+
+\-
+
+          </IressField>
+
++
+
+          label="Name" 
+
+\-
+
+        )}
+
++
+
+          name="name"
+
+\-
+
+        {show.includes('email') && (
+
++
+
+          render={(controlledProps) => <IressInput {...controlledProps} />}
+
+\-
+
+          <IressField label="Email">
+
++
+
+        />
+
+\-
+
+            <IressInput name="email" type="email" />
+
++
+
+      )}
+
+\-
+
+          </IressField>
+
++
+
+      {show?.includes('email') && (
+
+\-
+
+        )}
+
++
+
+        <IressFormField 
+
+\-
+
+      </IressForm>
+
++
+
+          label="Email" 
+
++
+
+          name="email"
+
++
+
+          render={(controlledProps) => <IressInput {...controlledProps} type="email" />}
+
++
+
+        />
+
++
+
+      )}
+
++
+
+     </>
+
+  );
+
+};
+
++
+
++
+
+export const App = () => (
+
++
+
+  <IressForm defaultValues={{ show: \['name'\] }}>
+
++
+
+    <ConditionalFields /> 
+
++
+
+  </IressForm>
+
++
+
+);
 
 ### [](#validation)Validation
 
@@ -86,7 +310,105 @@ Mode
 
 DiffOldNew
 
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { IressForm, IressField, IressInput, IressButton } from '@iress/components';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { IressForm, IressFormField, IressInput, IressButton } from '@iress-oss/ids-components';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">export const App = () =&gt; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  &lt;IressForm valueMissing="{{fieldName}} needs to be filled in!"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  &lt;IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    &lt;IressField label="Name"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">      &lt;IressInput name="name" required /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      label="Name"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      name="name"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    &lt;IressField label="Email"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      render={(controlledProps) =&gt; &lt;IressInput {...controlledProps} /&gt;}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">      &lt;IressInput name="email" maxLength={10} /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      rules={{ required: 'Name needs to be filled in!' }}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      label="Email"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      name="email"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      render={(controlledProps) =&gt; &lt;IressInput {...controlledProps} type="email" maxLength={10} /&gt;}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      rules={{ maxLength: 10 }}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    &lt;IressButton type="submit" mode="primary"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">      Sign up</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    &lt;/IressButton&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  &lt;/IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">);</pre></td></tr></tbody></table>
+\-
+
+import { IressForm, IressField, IressInput, IressButton } from '@iress/components';
+
++
+
+import { IressForm, IressFormField, IressInput, IressButton } from '@iress/ids-components';
+
+export const App = () => (
+
+\-
+
+  <IressForm valueMissing="{{fieldName}} needs to be filled in!">
+
++
+
+  <IressForm>
+
+\-
+
+    <IressField label="Name">
+
++
+
+    <IressFormField 
+
+\-
+
+      <IressInput name="name" required />
+
++
+
+      label="Name"
+
+\-
+
+    </IressField>
+
++
+
+      name="name"
+
+\-
+
+    <IressField label="Email">
+
++
+
+      render={(controlledProps) => <IressInput {...controlledProps} />}
+
+\-
+
+      <IressInput name="email" maxLength={10} />
+
++
+
+      rules={{ required: 'Name needs to be filled in!' }}
+
+\-
+
+    </IressField>
+
++
+
+    />
+
++
+
+    <IressFormField 
+
++
+
+      label="Email"
+
++
+
+      name="email"
+
++
+
+      render={(controlledProps) => <IressInput {...controlledProps} type="email" maxLength={10} />}
+
++
+
+      rules={{ maxLength: 10 }}
+
++
+
+    />
+
+    <IressButton type="submit" mode="primary">
+
+      Sign up
+
+    </IressButton>
+
+  </IressForm>
+
+);
 
 ### [](#syncing-state)Syncing state
 
@@ -413,7 +735,39 @@ A boolean which, if `true`, indicates that the input must have a value before th
 
 Validate
 
-Show code
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressForm\>
+  <IressStack gutter\="lg"\>
+    <IressFormField
+      hint\=""
+      label\="Default message"
+      name\="IressInput-default"
+      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
+      rules\={{
+        required: true
+      }}
+    />
+    <IressFormField
+      hint\=""
+      label\="Custom message"
+      name\="IressInput-custom"
+      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
+      rules\={{
+        required: 'Please check this field'
+      }}
+    />
+    <IressButton
+      mode\="primary"
+      type\="submit"
+    \>
+      Validate    </IressButton\>
+  </IressStack\>
+</IressForm\>
+
+Copy
 
 #### [](#maxlength)`maxLength`
 
@@ -715,7 +1069,7 @@ Hide code
       name\="IressInputDate-default"
       render\={(controlledProps) \=> <IressInput {...controlledProps} />}
       rules\={{
-        minDate: new Date('2025-06-27T03:58:57.380Z')
+        minDate: new Date('2025-05-15T02:18:51.404Z')
       }}
     />
     <IressFormField
@@ -726,7 +1080,7 @@ Hide code
       rules\={{
         minDate: {
           message: 'Please enter a date after today!',
-          value: new Date('2025-06-27T03:58:57.380Z')
+          value: new Date('2025-05-15T02:18:51.404Z')
         }
       }}
     />
@@ -768,7 +1122,7 @@ Hide code
       name\="IressInputDate-default"
       render\={(controlledProps) \=> <IressInput {...controlledProps} />}
       rules\={{
-        maxDate: new Date('2025-06-27T03:58:57.380Z')
+        maxDate: new Date('2025-05-15T02:18:51.404Z')
       }}
     />
     <IressFormField
@@ -779,7 +1133,7 @@ Hide code
       rules\={{
         maxDate: {
           message: 'Please enter a date before today!',
-          value: new Date('2025-06-27T03:58:57.380Z')
+          value: new Date('2025-05-15T02:18:51.404Z')
         }
       }}
     />
@@ -942,7 +1296,7 @@ import {
   IressInput,
   IressStack,
   IressButton,
-} from '@iress-oss/ids-components';
+} from '@iress/ids-components';
 import { useState } from 'react';
 interface FieldValues {
   name?: string;
@@ -1195,7 +1549,7 @@ import {
   IressFormField,
   IressInput,
   IressButton,
-} from '@iress-oss/ids-components';
+} from '@iress/ids-components';
 import { useState } from 'react';
 import { FieldErrors } from 'react-hook-form';
 interface FieldValues {
@@ -1443,7 +1797,7 @@ import {
   IressStack,
   IressToasterProvider,
   useToaster,
-} from '@iress-oss/ids-components';
+} from '@iress/ids-components';
 import { useRef } from 'react';
 interface FieldValues {
   name?: string;
@@ -1545,7 +1899,7 @@ import {
   IressStack,
   IressFormField,
   IressInput,
-} from '@iress-oss/ids-components';
+} from '@iress/ids-components';
 import { useRef } from 'react';
 interface FieldValues {
   name?: string;
@@ -1593,333 +1947,6 @@ export const FormReset \= () \=> {
 
 Copy
 
-### [](#custom-form-field-components)Custom form field components
-
-You can integrate custom components within `IressFormField` to create enhanced form experiences.
-
-This demo showcases how to embed a custom `TranscriptTextBox` component into `IressFormField` while leveraging its built-in validation rules, error handling, and state management without additional implementation.
-
-**Reminder:** When building custom form components, avoid managing error message state internally. This helps maintain the IressForm as the single source of truth and ensures consistent, predictable UI behavior.
-
-Key features demonstrated:
-
-*   **Universal Integration Pattern**: Shows how any custom component can be embedded in IressFormField
-*   **Built-in Validation**: Leverages IressFormField's validation rules with custom validation logic
-*   **Multiple Error Messages**: Displays simultaneous validation errors (e.g., wrong file type AND too large)
-*   **Drag & Drop**: Files can be dragged and dropped directly onto the textarea
-*   **File Upload Button**: Traditional file selection via button click
-*   **Visual Feedback**: UI changes during drag operations with border and background updates
-*   **Form State Management**: Automatically integrates with form context using controlled props
-*   **File Management**: Display uploaded files with remove functionality using `IressPanel`
-
-Custom FormField Components
-===========================
-
-This demo showcases how to embed any custom component (TranscriptTextBox) into IressFormField while leveraging its form validation, error handling, and state management without additional implementation. When building custom form components, avoid managing error message state internally. This helps maintain the IressForm as the single source of truth and ensures consistent, predictable UI behavior.
-
-\*Required Transcript
-
-Upload or copy and paste transcript here
-
-Upload
-
-Submit
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import React, { useState } from 'react';
-
-interface TranscriptFormValues {
-  transcript: TranscriptData | string;
-}
-interface TranscriptData {
-  content: string;
-  size?: number;
-  type: 'file' | 'text';
-  extension?: string;
-  fileName?: string;
-  rejectedReasons?: REJECTION\_REASONS\[\];
-}
-interface TranscriptTextBoxProps {
-  value: TranscriptData | string;
-  onChange: (data: TranscriptData) \=> void;
-  placeholder?: string;
-  rows?: number;
-  style?: React.CSSProperties;
-  allowedExtensions?: string\[\];
-  maxSizeInMB?: number;
-}
-interface SubmittedValuesDisplayProps {
-  submittedValues: TranscriptFormValues | null;
-  title?: string;
-}
-enum REJECTION\_REASONS {
-  TYPE \= 'type',
-  SIZE \= 'size',
-}
-const validateFile \=
-  (allowedExtensions: string\[\], maxSizeInMB: number) \=>
-  (data: TranscriptData | string) \=> {
-    if (
-      !!data &&
-      typeof data \=== 'object' &&
-      data.type \=== 'file' &&
-      Array.isArray(data.rejectedReasons) &&
-      data.rejectedReasons.length \> 0
-    ) {
-      const errors: string\[\] \= \[\];
-      if (data.rejectedReasons.includes(REJECTION\_REASONS.TYPE)) {
-        errors.push(\`Only .${allowedExtensions.join(', ')} accepted\`);
-      }
-      if (data.rejectedReasons.includes(REJECTION\_REASONS.SIZE)) {
-        errors.push(\`File size must be less than ${maxSizeInMB}MB\`);
-      }
-      if (errors.length \> 0) {
-        return errors.join('. ');
-      }
-    }
-    return true;
-  };
-const TranscriptTextBox \= ({
-  value,
-  onChange,
-  placeholder \= 'Copy and paste transcripts OR drag and drop / upload recordings, transcripts or documents here (.txt format).',
-  rows \= 10,
-  style,
-  allowedExtensions \= \['txt'\],
-  maxSizeInMB \= 10,
-}: TranscriptTextBoxProps) \=> {
-  // Extract content and file info from value
-  const currentData \=
-    typeof value \=== 'string'
-      ? { content: value, type: 'text' as const }
-      : value;
-  const currentFile \=
-    currentData?.type \=== 'file' &&
-    (!currentData.rejectedReasons || currentData.rejectedReasons.length \=== 0)
-      ? {
-          name: currentData.fileName ?? 'Unknown file',
-          size: currentData.size,
-        }
-      : null;
-  const createTranscriptData \= (
-    content: string,
-    type: 'file' | 'text',
-    additionalData?: Partial<TranscriptData\>,
-  ): TranscriptData \=> ({
-    content,
-    type,
-    ...additionalData,
-  });
-  const handleFileRead \= (file: File) \=> {
-    const reader \= new FileReader();
-    reader.onload \= (e) \=> {
-      const content \= e.target?.result as string;
-      onChange(
-        createTranscriptData(content, 'file', {
-          size: file.size,
-          extension: file.name.split('.').pop()?.toLowerCase(),
-          fileName: file.name,
-        }),
-      );
-    };
-    reader.onerror \= () \=> {
-      // Let parent handle errors through validation
-      onChange(
-        createTranscriptData('', 'file', {
-          fileName: file.name,
-        }),
-      );
-    };
-    reader.readAsText(file);
-  };
-  const handleTextChange \= (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement\>,
-    textContent: string,
-  ) \=> {
-    onChange(createTranscriptData(textContent, 'text'));
-  };
-  const onFileSelected \= (files: File\[\]) \=> {
-    if (files.length \=== 0) return;
-    const file \= files\[0\];
-    handleFileRead(file);
-  };
-  const { getRootProps, getInputProps, open, isDragActive } \= useDropzone({
-    multiple: false,
-    noClick: true,
-    maxSize: maxSizeInMB \* 1024 \* 1024,
-    accept: allowedExtensions.reduce(
-      (acc, ext) \=> {
-        const mimeType \=
-          ext \=== 'txt' ? 'text/plain' : 'application/octet-stream';
-        acc\[mimeType\] \= acc\[mimeType\] || \[\];
-        acc\[mimeType\].push(\`.${ext}\`);
-        return acc;
-      },
-      {} as Record<string, string\[\]\>,
-    ),
-    onDrop: (acceptedFiles, rejectedFiles) \=> {
-      if (acceptedFiles.length \> 0) {
-        onFileSelected(acceptedFiles);
-        return;
-      }
-      if (rejectedFiles.length \> 0) {
-        const rejectedFile \= rejectedFiles\[0\];
-        const { file, errors } \= rejectedFile;
-        // Map error codes to rejection reasons
-        const errorCodeMap \= {
-          'file-invalid-type': REJECTION\_REASONS.TYPE,
-          'file-too-large': REJECTION\_REASONS.SIZE,
-        } as const;
-        const rejectedReasons \= errors          .map((error) \=> errorCodeMap\[error.code as keyof typeof errorCodeMap\])
-          .filter((reason): reason is REJECTION\_REASONS \=> Boolean(reason));
-        onChange(
-          createTranscriptData('', 'file', {
-            fileName: file.name,
-            rejectedReasons,
-          }),
-        );
-      }
-    },
-  });
-  const handleUploadClick \= () \=> {
-    open();
-  };
-  const removeFile \= () \=> {
-    onChange(createTranscriptData('', 'text'));
-  };
-  return (
-    <IressStack gutter\="sm"\>
-      <div {...getRootProps()} style\={{ position: 'relative' }}\>
-        <input {...getInputProps()} />
-        <IressInput
-          value\={currentData?.content || ''}
-          onChange\={handleTextChange}
-          rows\={rows}
-          placeholder\={isDragActive ? 'Drop your file here...' : placeholder}
-          style\={{
-            boxSizing: 'border-box',
-            border: isDragActive ? '1px dashed #007acc' : undefined,
-            backgroundColor: isDragActive ? '#f0f8ff' : undefined,
-            ...style,
-          }}
-        />
-      </div\>
-      {currentFile && (
-        <IressPanel\>
-          <IressInline horizontalAlign\="between" verticalAlign\="middle"\>
-            <IressText\>📄 {currentFile.name}</IressText\>
-            <IressButton mode\="secondary" onClick\={removeFile}\>
-              Remove            </IressButton\>
-          </IressInline\>
-        </IressPanel\>
-      )}
-      <IressButton
-        mode\="secondary"
-        onClick\={handleUploadClick}
-        prepend\={<IressIcon name\="upload" />}
-      \>
-        Upload      </IressButton\>
-    </IressStack\>
-  );
-};
-const SubmittedValuesDisplay: React.FC<SubmittedValuesDisplayProps\> \= ({
-  submittedValues,
-  title \= 'Submitted Values:',
-}) \=> {
-  if (!submittedValues) {
-    return null;
-  }
-  return (
-    <IressPanel\>
-      <IressStack gutter\="sm"\>
-        <IressText variant\="bold"\>{title}</IressText\>
-        <IressText\>
-          <strong\>Type:</strong\>
-          {typeof submittedValues.transcript \=== 'string'
-            ? 'text'
-            : submittedValues.transcript.type}
-        </IressText\>
-        <IressText\>
-          <strong\>Content:</strong\>
-          {typeof submittedValues.transcript \=== 'string'
-            ? submittedValues.transcript
-            : submittedValues.transcript.content}
-        </IressText\>
-        {typeof submittedValues.transcript \=== 'object' &&
-          submittedValues.transcript.fileName && (
-            <IressText\>
-              <strong\>File Name:</strong\> {submittedValues.transcript.fileName}
-            </IressText\>
-          )}
-        {typeof submittedValues.transcript \=== 'object' &&
-          submittedValues.transcript.size && (
-            <IressText\>
-              <strong\>File Size:</strong\>
-              {(submittedValues.transcript.size / 1024).toFixed(2)} KB            </IressText\>
-          )}
-      </IressStack\>
-    </IressPanel\>
-  );
-};
-const Heading \= () \=> {
-  return (
-    <\>
-      <IressText element\="h1"\>Custom FormField Components</IressText\>
-      <IressText element\="p"\>
-        This demo showcases how to embed any custom component        (TranscriptTextBox) into IressFormField while leveraging its form        validation, error handling, and state management without additional        implementation. When building custom form components, avoid managing        error message state internally. This helps maintain the IressForm as the        single source of truth and ensures consistent, predictable UI behavior.      </IressText\>
-    </\>
-  );
-};
-export const CustomFormFieldComponents \= (
-  args: IressFormProps<TranscriptFormValues\>,
-) \=> {
-  const \[submittedValues, setSubmittedValues\] \=
-    useState<TranscriptFormValues | null\>(null);
-  const allowedExtensions \= \['txt'\];
-  const maxSizeInMB \= 0.1;
-  const handleSubmit \= (data: TranscriptFormValues) \=> {
-    setSubmittedValues(data);
-    console.log('Form submitted:', data);
-  };
-  return (
-    <\>
-      <Heading />
-      <IressForm<TranscriptFormValues>        {...args}
-        mode="onChange"        hiddenErrorSummary        onSubmit={handleSubmit}
-        defaultValues={{ transcript: { content: '', type: 'text' } }}
-      >        <IressStack gutter\="md"\>
-          <IressFormField
-            label\="Transcript"
-            name\="transcript"
-            hint\="Upload or copy and paste transcript here"
-            render\={(controlledProps) \=> (
-              <TranscriptTextBox
-                {...controlledProps}
-                allowedExtensions\={allowedExtensions}
-                maxSizeInMB\={maxSizeInMB}
-              />
-            )}
-            rules\={{
-              required: 'Transcript is required',
-              validate: {
-                file: validateFile(allowedExtensions, maxSizeInMB),
-              },
-            }}
-          />
-          <IressButton type\="submit" mode\="primary"\>
-            Submit          </IressButton\>
-          <SubmittedValuesDisplay submittedValues\={submittedValues} />
-        </IressStack\>
-      </IressForm\>
-    </\>
-  );
-};
-
-Copy
-
 ### [](#forms-in-expanders-lazy-loading)Forms in expanders (lazy loading)
 
 If you are using forms in expanders, or in other scenarios when the loading of the form may be delayed, it is recommended to only load the form when it is required. This will improve performance of your application, and make it more predictable. It may also fix act warnings in tests if you are seeing some appearing due to conditionally loaded `IressForm` elements.
@@ -1939,7 +1966,7 @@ import {
   IressFormProps,
   IressInput,
   IressStack,
-} from '@iress-oss/ids-components';
+} from '@iress/ids-components';
 import { useState } from 'react';
 interface FieldValues {
   name?: string;
@@ -2031,7 +2058,7 @@ import {
   IressInput,
   IressStack,
   IressText,
-} from '@iress-oss/ids-components';
+} from '@iress/ids-components';
 interface FieldValues {
   show?: string\[\];
   name?: string;
@@ -2374,7 +2401,7 @@ If you are using React Hook Forms in your application, please ensure it is the s
 
 The version we are using in IDS is:
 
-yarn add react-hook-form@7.53.1
+yarn add react-hook-form@7.55.0
 
 On this page
 
@@ -2398,7 +2425,6 @@ On this page
     *   [values](#values)
     *   [Disable validation](#disable-validation)
     *   [Resetting the form](#resetting-the-form)
-    *   [Custom form field components](#custom-form-field-components)
     *   [Forms in expanders (lazy loading)](#forms-in-expanders-lazy-loading)
     *   [Conditional fields (useWatch)](#conditional-fields-usewatch)
 *   [IressHookForm](#iresshookform)