@iress-oss/ids-mcp-server 5.15.0 → 5.20.2

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

@@ -1,8 +1,8 @@
-[](#recipes)Recipes
-===================
+Recipes
+=======
 
-[](#with-readonly-data)With readonly data
------------------------------------------
+With readonly data
+------------------
 
 You can use `IressForm` with readonly data by setting the `readonly` prop to `true` on controlled elements. This will disable those form controls, but will include the values in the form submission.
 
@@ -10,6 +10,8 @@ Please take note of the following when displaying read only data.
 
 *   It is best to keep readonly data in a separate section of the form, to further avoid confusion with editable fields.
 
+[](./iframe.html?id=components-form-recipes--with-readonly-data)
+
 User Details
 ------------
 
@@ -27,10 +29,24 @@ Email
 
 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; }
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressCol,
+  IressContainer,
+  IressDivider,
+  IressForm,
+  IressFormField,
+  IressInput,
+  IressModal,
+  IressRow,
+  IressStack,
+  IressTable,
+  IressText,
+} from '@/main';
+import { useState } from 'react';
+import { type FieldValues } from 'react-hook-form';
 export const WithReadonlyDataForm \= () \=> {
   const \[values, setValues\] \= useState<FieldValues\>({
     firstName: 'Leia',
@@ -100,10 +116,28 @@ export const WithReadonlyDataForm \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| form | 
+React hook form instance from `useForm`, use if you need more control over the internal state.
+
+    const form = useForm();
+    return <IressForm form={form} />;
+    
+
+UseFormReturn
+
+
 
-[](#switching-between-readonly-and-edit-modes)Switching between readonly and edit modes
----------------------------------------------------------------------------------------
+ | \- | Set object |
+| Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
+
+Switching between readonly and edit modes
+-----------------------------------------
 
 It is recommended to use a button to toggle between read-only and editable input modes.
 
@@ -112,6 +146,8 @@ Please take note of the following when switching between modes:
 *   Switching is done on a per-section basis, not on a per-field basis.
 *   When the user saves the data, it should switch back to read-only mode to avoid any confusion about whether the changes have been saved.
 
+[](./iframe.html?id=components-form-recipes--switch-edit-readonly)
+
 User Details
 ------------
 
@@ -133,10 +169,27 @@ dependents
 
 Edit
 
-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; }
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressCol,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressIcon,
+  IressInline,
+  IressInput,
+  IressModal,
+  IressRow,
+  IressSelect,
+  IressStack,
+  IressTable,
+  IressText,
+} from '@/main';
+import { useState } from 'react';
+import { type FieldValues } from 'react-hook-form';
+import { type FormControlValue } from '@/main';
 export const SwitchEditReadonlyForm \= () \=> {
   const dependentOptions \= \[
     { value: 0, label: '0' },
@@ -215,7 +268,7 @@ export const SwitchEditReadonlyForm \= () \=> {
                       {...controlledProps}
                       readonly\={!editable}
                       onChange\={(
-                        e: React.ChangeEvent<HTMLSelectElement\>,
+                        \_e: React.ChangeEvent<HTMLSelectElement\>,
                         value?: FormControlValue,
                       ) \=> controlledProps.onChange(value)}
                     \>
@@ -259,27 +312,55 @@ export const SwitchEditReadonlyForm \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| form | 
+React hook form instance from `useForm`, use if you need more control over the internal state.
+
+    const form = useForm();
+    return <IressForm form={form} />;
+    
+
+UseFormReturn
 
-[](#alternative-form-validation)Alternative form validation
------------------------------------------------------------
 
-`IressForm` is always recommended for all validation, as it is the cleanest way (least code) to provide the best form user experience for your users. Please visit the [`IressForm` documentation](./?path=/docs/components-form--docs) for different validation examples.
+
+ | \- | Set object |
+| Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
+
+Alternative form validation
+---------------------------
+
+`IressForm` is always recommended for all validation, as it is the cleanest way (least code) to provide the best form user experience for your users. Please visit the [`IressForm` documentation](/docs/components-form--docs) for different validation examples.
 
 However, if you have more complex requirements and you find `IressForm` too opinionated for your needs, you can always bring your own form validation using a native `form` element and the other IDS components such as `IressField`.
 
 Here is an example showcasing a form using the native form constraints API to achieve validation using IDS components. There are other libraries such as: [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi) or [Zod](https://zod.dev/)) which can improve scalability, with the downside being you will have to maintain all validation yourself.
 
+[](./iframe.html?id=components-form-recipes--native-validation)
+
 **\*Required Name**
 
 **\*Required Email address**
 
 Sign up
 
-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; }
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressInput,
+  IressStack,
+  IressButton,
+  IressField,
+  IressValidationMessage,
+  IressAlert,
+} from '@/main';
+import { useState } from 'react';
+import { type InputBaseElement } from '@/components/Input/InputBase/InputBase.types';
 export const NativeValidationForm \= () \=> {
   const \[formData, setFormData\] \= useState({
     name: '',
@@ -355,10 +436,28 @@ export const NativeValidationForm \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| form | 
+React hook form instance from `useForm`, use if you need more control over the internal state.
 
-[](#nested-forms)Nested forms
------------------------------
+    const form = useForm();
+    return <IressForm form={form} />;
+    
+
+UseFormReturn
+
+
+
+ | \- | Set object |
+| Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
+
+Nested forms
+------------
 
 Unfortunately, it is [forbidden to nest form elements as per the HTML specifications](https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form).
 
@@ -370,6 +469,8 @@ To achieve a similar effect, you can use multiple `IressForm` components, and tr
 
 The example here showcases triggering validation using the `form` attribute of `IressButton` and the `requestSubmit` method on the form element.
 
+[](./iframe.html?id=components-form-recipes--nested-forms)
+
 \*Required Name
 
 Add new dependant
@@ -382,10 +483,22 @@ Save
 
 Submit main formSubmit all forms
 
-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; }
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressDivider,
+  IressFieldGroup,
+  IressForm,
+  IressFormField,
+  IressInline,
+  IressInput,
+  IressModal,
+  IressPanel,
+  IressStack,
+  IressTable,
+} from '@/main';
+import { useState } from 'react';
 interface FormData {
   name: string;
 }
@@ -468,13 +581,33 @@ export const NestedFormsExample \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| form | 
+React hook form instance from `useForm`, use if you need more control over the internal state.
+
+    const form = useForm();
+    return <IressForm form={form} />;
+    
+
+UseFormReturn
 
-[](#form-groups)Form Groups
----------------------------
+
+
+ | \- | Set object |
+| Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
+
+Form Groups
+-----------
 
 Powered by [React Hook Form](https://react-hook-form.com/docs/usefieldarray)'s `useFieldArray`, this example allows you add/edit/delete multiple children sections within ONE form (not nested form).
 
+[](./iframe.html?id=components-form-recipes--form-groups)
+
 Form groups
 ===========
 
@@ -506,10 +639,28 @@ Add Dependant
 
 Submit All
 
-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; }
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressDivider,
+  IressFieldGroup,
+  IressFormField,
+  IressInline,
+  IressInput,
+  IressPanel,
+  IressStack,
+  IressText,
+  IressIcon,
+  IressCloseButton,
+  IressHookForm,
+} from '@/main';
+import {
+  useForm,
+  useFieldArray,
+  type Control,
+  type UseFormGetValues,
+} from 'react-hook-form';
 interface Client {
   name: string | undefined;
   salary: number | undefined;
@@ -678,10 +829,28 @@ export const FormGroups \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| form | 
+React hook form instance from `useForm`, use if you need more control over the internal state.
+
+    const form = useForm();
+    return <IressForm form={form} />;
+    
+
+UseFormReturn
+
+
+
+ | \- | Set object |
+| Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 
-[](#hidden-inputs)Hidden inputs
--------------------------------
+Hidden inputs
+-------------
 
 You can use hidden inputs to store data that you do not want to display to the user, but still need to include in the form submission. This is useful for storing metadata or other information that is not editable by the user.
 
@@ -690,14 +859,22 @@ Warning
 
 This is not a recommended practice, as it can lead to security issues if sensitive data is stored in hidden inputs. It is better to use a variable to store your data, and include it in the form submission using the `onSubmit` handler.
 
+[](./iframe.html?id=components-form-recipes--hidden-inputs)
+
 Visible Input
 
 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; }
+Hide codedrawOpen in CodeSandbox
 
+import {
+  IressButton,
+  IressForm,
+  IressFormField,
+  IressHookForm,
+  IressInput,
+  IressStack,
+} from '@/main';
 export const HiddenInputsForm \= () \=> {
   const form \= IressForm.useForm();
   const { register } \= form;
@@ -732,15 +909,35 @@ export const HiddenInputsForm \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| form | 
+React hook form instance from `useForm`, use if you need more control over the internal state.
+
+    const form = useForm();
+    return <IressForm form={form} />;
+    
+
+UseFormReturn
+
+
+
+ | \- | Set object |
+| Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 
-[](#validation-depend-on-other-fields)Validation depend on other fields
------------------------------------------------------------------------
+Validation depend on other fields
+---------------------------------
 
 This example shows how to validate one field based on another field's value.
 
 The budget amount input validates against the selected budget range using the custom `validateBudgetInput` rules.
 
+[](./iframe.html?id=components-form-recipes--validation-depend-on-other-fields)
+
 Validation depend on other fields
 =================================
 
@@ -758,10 +955,22 @@ 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; }
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressStack,
+  IressRow,
+  IressCol,
+  IressFormField,
+  IressInputCurrency,
+  IressSelect,
+  IressButton,
+  IressText,
+  IressDivider,
+} from '@/main';
+import { IressHookForm } from '../HookForm/HookForm';
+import { IressForm } from '../Form';
+import { useState } from 'react';
 interface FormData {
   primaryField: string;
   dependentField: string;
@@ -873,14 +1082,22 @@ export const ValidationDependOnOtherFields \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| form | 
+React hook form instance from `useForm`, use if you need more control over the internal state.
+
+    const form = useForm();
+    return <IressForm form={form} />;
+    
+
+UseFormReturn
+
 
-On this page
 
-*   [With readonly data](#with-readonly-data)
-*   [Switching between readonly and edit modes](#switching-between-readonly-and-edit-modes)
-*   [Alternative form validation](#alternative-form-validation)
-*   [Nested forms](#nested-forms)
-*   [Form Groups](#form-groups)
-*   [Hidden inputs](#hidden-inputs)
-*   [Validation depend on other fields](#validation-depend-on-other-fields)
+ | \- | Set object |
+| Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |