npm - @iress-oss/ids-mcp-server - Versions diffs - 6.0.0-alpha.8 → 6.0.0-alpha.9 - Mend

@iress-oss/ids-mcp-server 6.0.0-alpha.8 → 6.0.0-alpha.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/generated/docs/components_patterns-form-docs.md CHANGED Viewed

@@ -58,19 +58,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | pattern |
 string
@@ -144,19 +144,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 ### Validation
@@ -204,19 +204,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 ### Syncing state
@@ -420,6 +420,121 @@ string
  | \- |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
+### Supplementary content
+The `renderSupplementary` prop allows you to render additional content alongside the field that has access to the field props and state. This is useful for displaying dynamic information such as character counters, password strength meters, or custom help text that responds to user input.
+The render function receives two arguments:
+1.  `field`: An object containing the field props (id, name, value, onChange, onBlur, ref)
+2.  `state`: An object containing the field state (fieldState, formState)
+Common use cases include:
+*   **Character counters**: Display the current character count and maximum allowed
+*   **Password strength indicators**: Show password strength based on the current value
+*   **Dynamic hints**: Provide contextual help based on the field value
+*   **Custom validation feedback**: Display real-time validation feedback separate from error messages
+[](./iframe.html?id=patterns-form-formfield--render-supplementary)
+Hide codedrawOpen in CodeSandbox
+<IressFormField
+  hint\="Enter your feedback (max 200 characters)"
+  label\="Comment"
+  name\="comment"
+  render\={() \=> {}}
+  renderSupplementary\={() \=> {}}
+  rules\={{
+    maxLength: {
+      message: 'Comment must not exceed 200 characters',
+      value: 200
+    }
+  }}
+/>
+```
+#### Props
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| label |
+string
+ | \- | Comment |
+| name\* |
+Name of the field. It is used to identify the field in the form. It must be unique within the form.
+FieldPath
+ | \- |
+"comment"
+ |
+| readOnly |
+Text to be displayed instead of input field.
+boolean
+ | \- | Set boolean |
+| render\* |
+Render function to provide the control for the field. To ensure the field is correctly registered with the form, the control must be passed as props to the rendered component. (eg. `render={field => <IressInput {...field} />}`)
+( field: FormFieldRenderProps<T>, state: FormFieldRenderState<T>, ) => ReactNode
+ | \- | \- |
+| renderSupplementary |
+Render function to allow you to render supplementary content alongside the field, with access to the field props and state. This can be useful for rendering custom components that need to interact with the form state, such as character counters, password strength meters, or custom validation messages. (eg. `renderSupplementary={{ value } => <CharCount value={value} />}`)
+( field: FormFieldRenderProps<T>, state: FormFieldRenderState<T>, ) => ReactNode
+ | \- | \- |
+| rules |
+Validation rules, including: required, min, max, minLength, maxLength, pattern, validate
+intersection
+ | \- |
+Edit JSON
+rules :
+{
+*   maxLength :
+    {...} 2 keys
+}
+ |
+| Show Field props itemsField props | Show Field props items |
+| Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 ### Rules
 Use the `rules` prop on the `IressFormField` component to add validation rules. These are based on the [rules available in React Hook Forms](https://www.react-hook-form.com/api/useform/register/#options). The following rules are supported.
@@ -993,12 +1108,12 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
@@ -1089,19 +1204,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | pattern |
 string
@@ -1207,12 +1322,12 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
@@ -1345,19 +1460,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | onSubmit |
 \-
@@ -1848,12 +1963,12 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
@@ -1954,12 +2069,12 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
@@ -2030,19 +2145,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | pattern |
 string
@@ -2342,21 +2457,21 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 object
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | heading |
 string

package/generated/docs/components_patterns-form-recipes-docs.md CHANGED Viewed

@@ -129,19 +129,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 Switching between readonly and edit modes
@@ -327,19 +327,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 Alternative form validation
@@ -445,19 +445,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 Nested forms
@@ -603,19 +603,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 Form Groups
@@ -857,19 +857,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 Forms in expanders (lazy loading)
@@ -958,19 +958,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 Conditional fields (`useWatch`)
@@ -1085,19 +1085,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 Hidden inputs
@@ -1171,19 +1171,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 Validation depend on other fields
@@ -1350,19 +1350,19 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 Custom form field components
@@ -1711,17 +1711,17 @@ object
- | \- | Choose option...nonesubmitsave |
+ | \- | actionsChoose option...nonesubmitsave |
 | alert |
 \-
- | \- | Choose option...nonebasicAlert |
+ | \- | alertChoose option...nonebasicAlert |
 | children |
 array
- | \- | Choose option...nonesimplesupportedControlsreadOnly |
+ | \- | childrenChoose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |

package/generated/docs/components_patterns-loading-docs.md CHANGED Viewed

@@ -463,8 +463,6 @@ ReactNode
 <IressInline />
  | Set object |
 | pattern |
@@ -613,7 +611,7 @@ Record<number, ReactNode>
  | { } |
-RAW
+Edit JSON
 messageList :
@@ -668,8 +666,6 @@ This is a render prop that allows you to override the default progress rendering
 element
  | \- |
 | timeout |
@@ -956,8 +952,6 @@ ReactNode
 <IressText />
  | Set object |
 | estimatedFinishTime |
@@ -989,7 +983,7 @@ Record<number, ReactNode>
  | \- |
-RAW
+Edit JSON
 messageList :
@@ -1191,7 +1185,7 @@ union
  |
-bottomtopright
+positionbottomtopright
  |
 | renderButton |

package/generated/docs/components_patterns-shadow-docs.md CHANGED Viewed

@@ -39,7 +39,7 @@ ReactNode
  | \- |
-RAW
+Edit JSON
 children :
@@ -135,7 +135,7 @@ ReactNode
  | \- |
-RAW
+Edit JSON
 children :

package/generated/docs/components_sandbox-docs.md CHANGED Viewed

@@ -1,4 +1,4 @@
 Redirecting to CodeSandbox...
 -----------------------------
-[Click here to open CodeSandbox](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgC5xZKgDGA9qnjJUiBALYAOZATngAQBKMAhiR2BZl67AOQte_UQG4AOqgbM2XSXgAiAeQCy7QcLES-eALTphAehJQI1PDPmLWHYOwCSEuHAAKPVDCgANG4e3kIAbhCYLOwAvrpCIqIAAhAhxmSe5pFwxuRMFLZw9gr5ysmp8DkZcFnoOXnMfpQ16BBweObtAJ6wOCSexfLm5uzw1pSmbTwARrDGflgm4zDshvzGEoLwABbmFFBdxthKJg0FzfLkqO3sAIKMjOwAvOwAFACUzwB87MDy7KsYHgAK4sVDsAA87kqPj8UHY0wA5k9ZCAeFA8KivtDPOw1PAIIjwQBlLrtGAiWH-CHmHHeXz-L5yVAxZnybhGTRaPqGKicMhkPCvMwkYH0Ww4RFAgCisHFlAAQl1XOhXuIBXZ3gBCd44CQYGAsV7_SEc_g4Yl4FgQfhaMiYL4mgFQkJecKRQ2O8EAn0Q-6Pcxen2Q2mu91RIMhs14C1Wm14O0OgLyd7MkABOhwBVoHgsLpIMDouAwGIZtCYXDbPD0KDEEBXKg0RAgCFVmuR1u8dCR514CB4WDYkJ4glE9ik8n0Gl9gcwDvmbZdjvTe1dHuQ1phdiRFEgISCrE0zfzlfoNfyGltqBe9OZ7OoXP5xCFqDF0sgRh8ADWPClOAAVnAFB1g2ti0H83qopgjDUJgqAkDYcCoogvxOuwqJrJiSDoSAUA8FQ7Sosm3oAhhqimMIyE4XhBFYcRwaoikaTVLU9TCI0hRUai6KMNsPCoiaMTyDEt5tPej4FkWJYxDEQA).
+[Click here to open CodeSandbox](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgC5xZKgDGA9qnjJUiBALYAOZATngAQBKMAhiR2BZl67AOQte_UQG4AOqgbM2XSXgAiAeQCy7QcLES-eALTphAehJQI1PDPmLWHYOwCSEuHAAKPVDCgANG4e3kIAbhCYLOwAvrpCIqIAAhAhxmSe5pFwxuRMFLZw9gr5ysmp8DkZcFnoOXnMfpQ16BBweObtAJ6wOCSexfLm5uzw1pSmbTwARrDGflgm4zDshvzGEoLwABbmFFBdxthKJg0FzfLkqO3sAIKMjOwAvOwAFACUzwB87MDy7KsYHgAK4sVDsAA87kqPj8UHY0wA5k9ZCAeFA8KivtDPOw1PAIIjwQBlLrtGAiWH-CHmHHeXz-L5yVAxZnybhGTRaPqGKicMhkPCvMwkYH0Ww4RFAgCisHFlAAQl1XOhXuIBXZ3gBCd44CQYGAsV7_SEc_g4Yl4FgQfhaMiYL4mgFQkJecKRQ2O8EAn0Q-6Pcxen2Q2mu91RIMhs14C1Wm14O0OgLyd7MkABOhwBVoHgsLpIMDouAwGIZtCYXDbPD0KDEEBXKg0RAgCFVmuR1u8dCR514CB4WDYkJ4glE9ik8n0Gl9gcwDvmbZdjvTe1dHuQ1phdiRFEgISCrE0zfzlfoNfyGltqBe9OZ7OoXP5xCFqDF0sgRh8ADWPClOAAVnAFB1g2ti0H83qopgjDUJgqAkDYcCoogvxOuwqJrJiSDoSAUA8FQ7Sosm3oAhhqimMIyE4XhBFYcRwaoikaTVLU9TCI0hRUai6KMNsPBEWhZFGMY2wCl-xhgKw9Bcbh-HwFhJoxPIMS3m096PgWRYljEMRAA).

package/generated/docs/components_styling-props-colour-docs.md CHANGED Viewed

@@ -48,6 +48,8 @@ string
  | \- |
+color
  |
 `color`

package/generated/docs/components_styling-props-reference-docs.md CHANGED Viewed

@@ -20,7 +20,7 @@ Styling props reference
 | [color](/?path=/docs/styling-props-colour--docs#color) | color | [Colour](/?path=/docs/foundations-tokens-colour--docs) | Yes |
 | [focusable](/?path=/docs/styling-props-elevation--docs#focusable) | border and box-shadow | [Elevation](/?path=/docs/foundations-tokens-elevation--docs) | No |
 | [layerStyle](/?path=/docs/styling-props-elevation--docs#layerstyle) | border and box-shadow | [Elevation](/?path=/docs/foundations-tokens-elevation--docs) | Yes |
-| [maxWidth](/?path=/docs/styling-props-sizing--docs#container-widths) | max-width | N/A | Yes |
+| [maxWidth](/?path=/docs/styling-props-sizing--docs#container-widths) | max-width | N/A | No |
 | [m](/?path=/docs/styling-props-spacing--docs#margin) | margin | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
 | [mx](/?path=/docs/styling-props-spacing--docs#margin) | margin-inline | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
 | [my](/?path=/docs/styling-props-spacing--docs#margin) | margin-block | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
@@ -36,6 +36,7 @@ Styling props reference
 | [pl](/?path=/docs/styling-props-spacing--docs#padding) | padding-left | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
 | [pr](/?path=/docs/styling-props-spacing--docs#padding) | padding-right | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
 | [pt](/?path=/docs/styling-props-spacing--docs#padding) | padding-top | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
+| [scrollable](/?path=/docs/styling-props-scrollable--docs#scrollable) | Multiple properties | N/A | No |
 | [srOnly](/?path=/docs/styling-props-screen-readers--docs#sronly) | Multiple properties | N/A | Yes |
 | [stretch](/?path=/docs/styling-props-spacing--docs#stretch) | align-self: stretch and height: 100% | N/A | No |
 | [textAlign](/?path=/docs/styling-props-typography--docs#textalign) | text-align | N/A | Yes |
@@ -82,18 +83,14 @@ This will also work without JSX, allowing you to apply styling props to any elem
 ```
-`iressStyled`
+`IressStyled`
 -------------
-If you need your own component or a third-party component to accept styling props, you can use the `iressStyled` function to create a styled component that accepts styling props. This is similar to how you would use `styled-components` or `emotion`.
+The `IressStyled` component is a flexible wrapper that gives you direct access to all styling props. Use it when you need custom styling without creating a dedicated component or writing custom CSS.
-const MyComponent \= iressStyled('div', {
-  p: 'xs',
-  bg: 'colour.primary.surface',
-});
-<MyComponent\>
+<IressStyled p\="xs" bg\="colour.primary.surface"\>
   This div has extra small padding and a primary background colour.
-</MyComponent\>;
+</IressStyled\>
 ```