@iress-oss/ids-mcp-server 5.14.2 → 5.20.1

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,9 +29,7 @@ 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; }
+```
 
 export const WithReadonlyDataForm \= () \=> {
   const \[values, setValues\] \= useState<FieldValues\>({
@@ -100,10 +100,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 +130,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,9 +153,7 @@ 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; }
+```
 
 export const SwitchEditReadonlyForm \= () \=> {
   const dependentOptions \= \[
@@ -215,7 +233,7 @@ export const SwitchEditReadonlyForm \= () \=> {
                       {...controlledProps}
                       readonly\={!editable}
                       onChange\={(
-                        e: React.ChangeEvent<HTMLSelectElement\>,
+                        \_e: React.ChangeEvent<HTMLSelectElement\>,
                         value?: FormControlValue,
                       ) \=> controlledProps.onChange(value)}
                     \>
@@ -259,26 +277,44 @@ 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; }
+```
 
 export const NativeValidationForm \= () \=> {
   const \[formData, setFormData\] \= useState({
@@ -355,10 +391,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.
+
+    const form = useForm();
+    return <IressForm form={form} />;
+    
+
+UseFormReturn
 
-[](#nested-forms)Nested forms
------------------------------
+
+
+ | \- | 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 +424,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,9 +438,7 @@ 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; }
+```
 
 interface FormData {
   name: string;
@@ -468,13 +522,33 @@ export const NestedFormsExample \= () \=> {
   );
 };
 
-Copy
+```
 
-[](#form-groups)Form Groups
----------------------------
+#### 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 |
+
+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,11 +580,7 @@ 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; }
-
-/\* eslint-disable @typescript-eslint/no-misused-promises \*/
+```
 
 interface Client {
   name: string | undefined;
@@ -638,7 +708,7 @@ export const FormGroups \= () \=> {
     defaultValues: defaultValues,
     mode: 'onBlur',
   });
-  const { control, handleSubmit, getValues } \= form;
+  const { control, getValues } \= form;
   const { fields, append, update, remove } \= useFieldArray({
     name: 'dependants',
     control,
@@ -649,7 +719,8 @@ export const FormGroups \= () \=> {
       <IressText element\="h1"\>Form groups</IressText\>
       <IressText element\="p"\>
         This is one form with child sections (not nested forms). Play around to        add/edit/delete child form sections:      </IressText\>
-      <IressHookForm<FormValues>        id="mainForm"        gutter="md"        form={form}
+      <IressHookForm<FormValues>        gutter="md"        form={form}
+        onSubmit={onSubmit}
         errorSummaryHeading="Please correct the following errors found for the form:"      >        <IressStack gutter\="md"\>
           <ClientSection control\={control} />
           {fields.map((field, index) \=> (
@@ -672,22 +743,35 @@ export const FormGroups \= () \=> {
             Add Dependant          </IressButton\>
         </IressStack\>
         <IressDivider />
-        <IressButton
-          type\="submit"
-          mode\="primary"
-          form\="mainForm"
-          onClick\={handleSubmit(onSubmit)}
-        \>
+        <IressButton type\="submit" mode\="primary"\>
           Submit All        </IressButton\>
       </IressHookForm\>
     </IressStack\>
   );
 };
 
-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.
 
@@ -696,13 +780,13 @@ 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; }
+```
 
 export const HiddenInputsForm \= () \=> {
   const form \= IressForm.useForm();
@@ -738,15 +822,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} />;
+    
 
-[](#validation-depend-on-other-fields)Validation depend on other fields
------------------------------------------------------------------------
+UseFormReturn
+
+
+
+ | \- | Set object |
+| Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
+
+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
 =================================
 
@@ -764,9 +868,7 @@ 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; }
+```
 
 interface FormData {
   primaryField: string;
@@ -879,14 +981,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 |

package/generated/docs/components_components-hide-docs.md

@@ -0,0 +1,293 @@
+Hide
+====
+
+Overview
+--------
+
+`IressHide` makes it easier for designers and developers to create adaptive designs that work for all screen sizes.
+
+[](./iframe.html?id=components-hide--default)
+
+Content to hide
+
+```
+
+{
+  args: {
+    children: 'Content to hide',
+    hiddenOn: {
+      xs: true,
+      lg: false
+    }
+  }
+}
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to hide.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Content to hide"
+
+ |
+| hiddenOn\* | 
+
+Content will be hidden on any screen sizes that are set to true.
+
+ResponsiveSizing
+
+
+
+ | \- | 
+
+RAW
+
+hiddenOn :
+
+{
+
+*   xs : true
+*   lg : false
+
+}
+
+
+
+
+
+
+
+ |
+| visuallyHidden | 
+
+If true, the content will not be visible, but will be available to screen readers
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+Usage
+-----
+
+### `hiddenOn`
+
+The `hiddenOn` prop accepts a `ResponsiveSizing<boolean>` object, which is an object that uses a breakpoint as a key, and a boolean as a value.
+
+It determines which screen sizes the component's children will be hidden on. It's set up as an object containing the following IDS breakpoints:
+
+Hide breakpoints
+| Breakpoint | Screen Widths |
+| --- | --- |
+| `xs` | Above 0px (inclusive) |
+| `sm` | Above 576px (inclusive) |
+| `md` | Above 768px (inclusive) |
+| `lg` | Above 1024px (inclusive) |
+| `xl` | Above 1200px (inclusive) |
+| `xxl` | Above 1500px (inclusive) |
+
+Behaviour
+---------
+
+If the breakpoint in the `hiddenOn` prop is set to true, the content will be hidden for both sighted users and screen reader users. If the value is false, or the breakpoint is omitted, the content will be visible.
+
+You don't need to include every breakpoint, just the ones where you want content to become hidden. If you want to hide content on medium screens and above, you can set `hiddenOn` like this:
+
+<IressHide hiddenOn\={{ md: true }} />
+
+```
+
+If you want to hide content only on certain screen sizes, you'll need to specify which screen size the content should become visible again on. To set content to be hidden on medium screens, and visible on extra large screens and above, you can do the following:
+
+<IressHide hiddenOn\={{ md: true, xl: false }} />
+
+```
+
+Examples
+--------
+
+### Hidden on
+
+Here are a few variations of the `hiddenOn` prop in action.
+
+[](./iframe.html?id=components-hide--hidden-on)
+
+This text is totally hidden on xs screens and above.
+
+This text is totally hidden on md screens and above.
+
+This text is totally hidden on md screens and below.
+
+This text is totally hidden on xs screens only.
+
+This text is totally hidden on xl screens only.
+
+```
+
+{
+  ...Default,
+  argTypes: {
+    ...disableArgTypes(\['children', 'hiddenOn'\])
+  },
+  render: args \=> {
+    const description \= args.visuallyHidden ? 'visually ' : 'totally ';
+    return <IressStack\>
+        <IressHide {...args} hiddenOn\={{
+        xs: true
+      }}\>
+          <IressText\>
+            This text is {description} hidden on xs screens and above.          </IressText\>
+        </IressHide\>
+        <IressHide {...args} hiddenOn\={{
+        md: true
+      }}\>
+          <IressText mode\="success"\>
+            This text is {description} hidden on md screens and above.          </IressText\>
+        </IressHide\>
+        <IressHide {...args} hiddenOn\={{
+        xs: true,
+        lg: false
+      }}\>
+          <IressText mode\="danger"\>
+            This text is {description} hidden on md screens and below.          </IressText\>
+        </IressHide\>
+        <IressHide {...args} hiddenOn\={{
+        xs: true,
+        sm: false
+      }}\>
+          <IressText mode\="info"\>
+            This text is {description} hidden on xs screens only.          </IressText\>
+        </IressHide\>
+        <IressHide {...args} hiddenOn\={{
+        xl: true,
+        xxl: false
+      }}\>
+          <IressText mode\="muted"\>
+            This text is {description} hidden on xl screens only.          </IressText\>
+        </IressHide\>
+      </IressStack\>;
+  }
+}
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to hide.
+
+ReactNode
+
+
+
+ | \- | \- |
+| hiddenOn\* | 
+
+Content will be hidden on any screen sizes that are set to true.
+
+ResponsiveSizing
+
+
+
+ | \- | \- |
+| visuallyHidden | 
+
+If true, the content will not be visible, but will be available to screen readers
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+### Visually hidden
+
+This `visuallyHidden` prop is used if you don't want content to be visible on screen, but you do want it to be available to screen reader users.
+
+[](./iframe.html?id=components-hide--visually-hidden)
+
+This text is visually hidden on xs screens and above.
+
+This text is visually hidden on md screens and above.
+
+This text is visually hidden on md screens and below.
+
+This text is visually hidden on xs screens only.
+
+This text is visually hidden on xl screens only.
+
+```
+
+{
+  ...HiddenOn,
+  args: {
+    ...HiddenOn.args,
+    visuallyHidden: true
+  }
+}
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to hide.
+
+ReactNode
+
+
+
+ | \- | \- |
+| hiddenOn\* | 
+
+Content will be hidden on any screen sizes that are set to true.
+
+ResponsiveSizing
+
+
+
+ | \- | \- |
+| visuallyHidden | 
+
+If true, the content will not be visible, but will be available to screen readers
+
+boolean
+
+
+
+ | \- | FalseTrue |
+
+Utility classes
+---------------
+
+To make it easier for developers to hide content, we've exposed the classes we use for the hide component as part of our global styles.
+
+This means you can use them without having to use the Hide component. Unlike the Hide component, the utility classes only apply to a single breakpoint:
+
+Hide breakpoints
+| Totally Hidden | Visually Hidden | Screen Widths |
+| --- | --- | --- |
+| `iress-hidden--xs` | `iress-sr-only--xs` | 0 - 575px |
+| `iress-hidden--sm` | `iress-sr-only--sm` | 576px - 767px |
+| `iress-hidden--md` | `iress-sr-only--md` | 768px - 1023px |
+| `iress-hidden--lg` | `iress-sr-only--lg` | 1024px - 1199px |
+| `iress-hidden--xl` | `iress-sr-only--xl` | 1200px - 1499px |
+| `iress-hidden--xxl` | `iress-sr-only--xxl` | 1500px and above |
+
+If you use `iress-hidden` or `iress-sr-only` without the breakpoint suffix, it will apply to all screen sizes.