@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/editableContent.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/editableContent
-*Captured:* 2026-01-07T12:11:16.758Z
+*Captured:* 2026-02-03T14:04:18.154Z
 
 The EditableContent component allows for inline editing text or other values. To make sure the user can recognize such an element, it's best to mark the text or content with a dotted line depending on the situation and where it is placed. Alternatively, you can place the "pencil" icon next to the content. Especially on mobile where no hover is available, the editable content must be marked permanently.
 
@@ -64,24 +64,24 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | — | Visibility flag used to control edit mode from outside. |
+| show | boolean | undefined | Visibility flag used to control edit mode from outside. |
 | onSave | (value: string) => void | — | Callback function triggered when the save button is clicked. |
 | onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |
 | onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |
-| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |
+| onBlur | VoidFunction | — | Callback function triggered when input looses it's focus. |
 | onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |
 | onSaveValidation | (value: string) => boolean | — | Validation function to intercept saving and prevent save on error. |
 | isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |
-| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
-| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |
-| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
-| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
-| size | String | md | Defines the input and button size. Use "lg" for headlines. |
-| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
-| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |
-| inputClassName | String | — | Additional classes to be set on the editor input itself. |
-| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |
-| className | String | — | Additional classes to be set on the text wrapper element. |
+| errorMessage | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
+| customEditor | React.ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. |
+| editorOffsetTop | number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
+| editorOffsetLeft | number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
+| size | 'md' \| 'lg' | 'md' | Defines the input and button size. Use 'lg' for headlines. |
+| allowResize | boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
+| inputRows | number | 1 | Defines the number of rows to use by the internal textarea component. When a single line is used, the input is saved on "enter" key. |
+| inputClassName | string | — | Additional classes to be set on the editor input itself. |
+| editorClassName | string | — | Additional classes to be set on the editor wrapper element. |
+| className | string | — | Additional classes to be set on the text wrapper element. |
 
 ### Example: Headline that can change
 
@@ -162,24 +162,24 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | — | Visibility flag used to control edit mode from outside. |
+| show | boolean | undefined | Visibility flag used to control edit mode from outside. |
 | onSave | (value: string) => void | — | Callback function triggered when the save button is clicked. |
 | onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |
 | onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |
-| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |
+| onBlur | VoidFunction | — | Callback function triggered when input looses it's focus. |
 | onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |
 | onSaveValidation | (value: string) => boolean | — | Validation function to intercept saving and prevent save on error. |
 | isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |
-| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
-| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |
-| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
-| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
-| size | String | md | Defines the input and button size. Use "lg" for headlines. |
-| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
-| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |
-| inputClassName | String | — | Additional classes to be set on the editor input itself. |
-| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |
-| className | String | — | Additional classes to be set on the text wrapper element. |
+| errorMessage | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
+| customEditor | React.ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. |
+| editorOffsetTop | number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
+| editorOffsetLeft | number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
+| size | 'md' \| 'lg' | 'md' | Defines the input and button size. Use 'lg' for headlines. |
+| allowResize | boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
+| inputRows | number | 1 | Defines the number of rows to use by the internal textarea component. When a single line is used, the input is saved on "enter" key. |
+| inputClassName | string | — | Additional classes to be set on the editor input itself. |
+| editorClassName | string | — | Additional classes to be set on the editor wrapper element. |
+| className | string | — | Additional classes to be set on the text wrapper element. |
 
 ### Example: Example 3
 
@@ -248,24 +248,24 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | — | Visibility flag used to control edit mode from outside. |
+| show | boolean | undefined | Visibility flag used to control edit mode from outside. |
 | onSave | (value: string) => void | — | Callback function triggered when the save button is clicked. |
 | onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |
 | onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |
-| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |
+| onBlur | VoidFunction | — | Callback function triggered when input looses it's focus. |
 | onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |
 | onSaveValidation | (value: string) => boolean | — | Validation function to intercept saving and prevent save on error. |
 | isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |
-| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
-| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |
-| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
-| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
-| size | String | md | Defines the input and button size. Use "lg" for headlines. |
-| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
-| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |
-| inputClassName | String | — | Additional classes to be set on the editor input itself. |
-| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |
-| className | String | — | Additional classes to be set on the text wrapper element. |
+| errorMessage | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
+| customEditor | React.ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. |
+| editorOffsetTop | number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
+| editorOffsetLeft | number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
+| size | 'md' \| 'lg' | 'md' | Defines the input and button size. Use 'lg' for headlines. |
+| allowResize | boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
+| inputRows | number | 1 | Defines the number of rows to use by the internal textarea component. When a single line is used, the input is saved on "enter" key. |
+| inputClassName | string | — | Additional classes to be set on the editor input itself. |
+| editorClassName | string | — | Additional classes to be set on the editor wrapper element. |
+| className | string | — | Additional classes to be set on the text wrapper element. |
 
 ### Example: Example 4
 
@@ -348,24 +348,24 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | — | Visibility flag used to control edit mode from outside. |
+| show | boolean | undefined | Visibility flag used to control edit mode from outside. |
 | onSave | (value: string) => void | — | Callback function triggered when the save button is clicked. |
 | onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |
 | onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |
-| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |
+| onBlur | VoidFunction | — | Callback function triggered when input looses it's focus. |
 | onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |
 | onSaveValidation | (value: string) => boolean | — | Validation function to intercept saving and prevent save on error. |
 | isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |
-| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
-| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |
-| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
-| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
-| size | String | md | Defines the input and button size. Use "lg" for headlines. |
-| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
-| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |
-| inputClassName | String | — | Additional classes to be set on the editor input itself. |
-| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |
-| className | String | — | Additional classes to be set on the text wrapper element. |
+| errorMessage | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
+| customEditor | React.ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. |
+| editorOffsetTop | number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
+| editorOffsetLeft | number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
+| size | 'md' \| 'lg' | 'md' | Defines the input and button size. Use 'lg' for headlines. |
+| allowResize | boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
+| inputRows | number | 1 | Defines the number of rows to use by the internal textarea component. When a single line is used, the input is saved on "enter" key. |
+| inputClassName | string | — | Additional classes to be set on the editor input itself. |
+| editorClassName | string | — | Additional classes to be set on the editor wrapper element. |
+| className | string | — | Additional classes to be set on the text wrapper element. |
 
 ### Example: Example 5
 
@@ -422,24 +422,24 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | — | Visibility flag used to control edit mode from outside. |
+| show | boolean | undefined | Visibility flag used to control edit mode from outside. |
 | onSave | (value: string) => void | — | Callback function triggered when the save button is clicked. |
 | onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |
 | onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |
-| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |
+| onBlur | VoidFunction | — | Callback function triggered when input looses it's focus. |
 | onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |
 | onSaveValidation | (value: string) => boolean | — | Validation function to intercept saving and prevent save on error. |
 | isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |
-| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
-| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |
-| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
-| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
-| size | String | md | Defines the input and button size. Use "lg" for headlines. |
-| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
-| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |
-| inputClassName | String | — | Additional classes to be set on the editor input itself. |
-| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |
-| className | String | — | Additional classes to be set on the text wrapper element. |
+| errorMessage | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
+| customEditor | React.ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. |
+| editorOffsetTop | number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
+| editorOffsetLeft | number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
+| size | 'md' \| 'lg' | 'md' | Defines the input and button size. Use 'lg' for headlines. |
+| allowResize | boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
+| inputRows | number | 1 | Defines the number of rows to use by the internal textarea component. When a single line is used, the input is saved on "enter" key. |
+| inputClassName | string | — | Additional classes to be set on the editor input itself. |
+| editorClassName | string | — | Additional classes to be set on the editor wrapper element. |
+| className | string | — | Additional classes to be set on the text wrapper element. |
 
 ### Example: Example 6
 
@@ -566,24 +566,24 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | — | Visibility flag used to control edit mode from outside. |
+| show | boolean | undefined | Visibility flag used to control edit mode from outside. |
 | onSave | (value: string) => void | — | Callback function triggered when the save button is clicked. |
 | onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |
 | onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |
-| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |
+| onBlur | VoidFunction | — | Callback function triggered when input looses it's focus. |
 | onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |
 | onSaveValidation | (value: string) => boolean | — | Validation function to intercept saving and prevent save on error. |
 | isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |
-| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
-| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |
-| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
-| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
-| size | String | md | Defines the input and button size. Use "lg" for headlines. |
-| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
-| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |
-| inputClassName | String | — | Additional classes to be set on the editor input itself. |
-| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |
-| className | String | — | Additional classes to be set on the text wrapper element. |
+| errorMessage | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
+| customEditor | React.ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. |
+| editorOffsetTop | number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
+| editorOffsetLeft | number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
+| size | 'md' \| 'lg' | 'md' | Defines the input and button size. Use 'lg' for headlines. |
+| allowResize | boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
+| inputRows | number | 1 | Defines the number of rows to use by the internal textarea component. When a single line is used, the input is saved on "enter" key. |
+| inputClassName | string | — | Additional classes to be set on the editor input itself. |
+| editorClassName | string | — | Additional classes to be set on the editor wrapper element. |
+| className | string | — | Additional classes to be set on the text wrapper element. |
 
 ### Example: Example 7
 
@@ -711,24 +711,24 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | — | Visibility flag used to control edit mode from outside. |
+| show | boolean | undefined | Visibility flag used to control edit mode from outside. |
 | onSave | (value: string) => void | — | Callback function triggered when the save button is clicked. |
 | onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |
 | onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |
-| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |
+| onBlur | VoidFunction | — | Callback function triggered when input looses it's focus. |
 | onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |
 | onSaveValidation | (value: string) => boolean | — | Validation function to intercept saving and prevent save on error. |
 | isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |
-| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
-| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |
-| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
-| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
-| size | String | md | Defines the input and button size. Use "lg" for headlines. |
-| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
-| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |
-| inputClassName | String | — | Additional classes to be set on the editor input itself. |
-| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |
-| className | String | — | Additional classes to be set on the text wrapper element. |
+| errorMessage | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
+| customEditor | React.ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. |
+| editorOffsetTop | number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
+| editorOffsetLeft | number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
+| size | 'md' \| 'lg' | 'md' | Defines the input and button size. Use 'lg' for headlines. |
+| allowResize | boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
+| inputRows | number | 1 | Defines the number of rows to use by the internal textarea component. When a single line is used, the input is saved on "enter" key. |
+| inputClassName | string | — | Additional classes to be set on the editor input itself. |
+| editorClassName | string | — | Additional classes to be set on the editor wrapper element. |
+| className | string | — | Additional classes to be set on the text wrapper element. |
 
 ## Usage guidelines
 
@@ -1107,21 +1107,21 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | — | Visibility flag used to control edit mode from outside. |
+| show | boolean | undefined | Visibility flag used to control edit mode from outside. |
 | onSave | (value: string) => void | — | Callback function triggered when the save button is clicked. |
 | onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |
 | onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |
-| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |
+| onBlur | VoidFunction | — | Callback function triggered when input looses it's focus. |
 | onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |
 | onSaveValidation | (value: string) => boolean | — | Validation function to intercept saving and prevent save on error. |
 | isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |
-| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
-| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |
-| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
-| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
-| size | String | md | Defines the input and button size. Use "lg" for headlines. |
-| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
-| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |
-| inputClassName | String | — | Additional classes to be set on the editor input itself. |
-| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |
-| className | String | — | Additional classes to be set on the text wrapper element. |
+| errorMessage | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |
+| customEditor | React.ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. |
+| editorOffsetTop | number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |
+| editorOffsetLeft | number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |
+| size | 'md' \| 'lg' | 'md' | Defines the input and button size. Use 'lg' for headlines. |
+| allowResize | boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |
+| inputRows | number | 1 | Defines the number of rows to use by the internal textarea component. When a single line is used, the input is saved on "enter" key. |
+| inputClassName | string | — | Additional classes to be set on the editor input itself. |
+| editorClassName | string | — | Additional classes to be set on the editor wrapper element. |
+| className | string | — | Additional classes to be set on the text wrapper element. |

package/dist/docs/components/expander.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Show/Hide
 *Source:* https://uikit.developers.rio.cloud/#components/expander
-*Captured:* 2026-01-07T12:11:22.960Z
+*Captured:* 2026-02-03T14:04:24.384Z
 
 A simple panel component where the "panel-body" can be expanded.
 
@@ -117,22 +117,21 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| title | String / Node | — | The title to be shown in the expander header. |
-| bsStyle | String | 'blank' | Component visual or contextual style variants. Possible values are: 'default' 'separator' 'blank' 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |
-| iconLeft | Boolean | false | Defines if the icon will be align left, otherwise it is aligned right. |
-| open | Boolean | false | Defines if the panel will be opened or closed by default. The open/closed state will be handled internally |
-| unmountOnExit | Boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |
-| className | String | — | Additional classes to be set on the wrapper element. |
-| iconClassName | String | — | Additional classes added to the chevron icon |
-| headerClassName | String | — | Additional classes to be set on the panel header. |
-| titleClassName | String | — | Additional classes to be set on the header title. |
-| bodyClassName | String | — | Additional classes to be set on the panel body. |
+| title | string \| React.ReactNode | — | The title to be shown in the expander header. |
+| bsStyle | 'blank' \| 'default' \| 'separator' \| 'primary' \| 'secondary' \| 'info' \| 'warning' \| 'danger' \| 'success' | 'blank' | Component visual or contextual style variants. |
+| iconLeft | boolean | false | Defines if the icon will be align left, otherwise it is aligned right. |
+| open | boolean | false | Defines if the panel will be opened or closed by default. The open/closed state will be handled internally. |
+| unmountOnExit | boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |
 | onToggle | (isOpen: boolean) => void | — | Callback function for when the header is clicked and the expander toggles. |
 | onEntered | VoidFunction | — | Callback fired after the component has expanded. |
 | onExited | VoidFunction | — | Callback fired after the component has collapsed. |
 | onAnimationStart | VoidFunction | — | Callback fired when the animation starts for either expand or collapse. |
-| children | Node | — | Any element to be rendered inside the panel body. |
-| children | Function | — | Providing a function enables the "render props" approach. The function gets the isOpen state passed and is responsible for rendering the custom content. |
+| headerClassName | string | — | Additional classes to be set on the panel header. |
+| titleClassName | string | — | Additional classes to be set on the header title. |
+| bodyClassName | string | — | Additional classes to be set on the panel body. |
+| iconClassName | string | — | Additional classes added to the chevron icon |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| children | React.ReactNode \| ((isOpen: boolean) => React.ReactNode \| JSX.Element) | — | Any element to be rendered inside the panel body. Providing a function enables the render prop approach. See https://reactjs.org/docs/render-props.html The function gets the isOpen state passed and is responsible for rendering the custom content. |
 
 ### Example: Default
 
@@ -277,8 +276,8 @@ export default () => (
                     bsStyle='separator'
                     bodyClassName='padding-top-5 padding-x-0'
                 >
-                    {(open: boolean) => {
-                        console.log(`isOpen: ${open}`);
+                    {isOpen => {
+                        console.log(`isOpen: ${isOpen}`);
                         return content2;
                     }}
                 </ExpanderPanel>
@@ -291,8 +290,8 @@ export default () => (
                     bsStyle='separator'
                     bodyClassName='padding-top-5 padding-right-20'
                 >
-                    {(open: boolean) => {
-                        console.log(`isOpen: ${open}`);
+                    {isOpen => {
+                        console.log(`isOpen: ${isOpen}`);
                         return content2;
                     }}
                 </ExpanderPanel>
@@ -300,8 +299,8 @@ export default () => (
             <div className='grid-colspan-1 grid-colspan-2-lg'>
                 <label className='text-color-dark'>Primary</label>
                 <ExpanderPanel title='Lorem ipsum' titleClassName='text-normal' bsStyle='primary'>
-                    {(open: boolean) => {
-                        console.log(`isOpen: ${open}`);
+                    {isOpen => {
+                        console.log(`isOpen: ${isOpen}`);
                         return content2;
                     }}
                 </ExpanderPanel>
@@ -309,37 +308,37 @@ export default () => (
             <div className='grid-colspan-1 grid-colspan-2-lg'>
                 <label className='text-color-dark'>Primary</label>
                 <ExpanderPanel title='Header with icon left' titleClassName='text-normal' iconLeft bsStyle='primary'>
-                    {(open: boolean) => {
-                        console.log(`isOpen: ${open}`);
+                    {isOpen => {
+                        console.log(`isOpen: ${isOpen}`);
                         return content2;
                     }}
                 </ExpanderPanel>
             </div>
-            <div className=''>
+            <div>
                 <label className='text-color-dark'>Secondary</label>
                 <ExpanderPanel title='Lorem ipsum' bsStyle='secondary'>
                     {dummyTextExtraShort}
                 </ExpanderPanel>
             </div>
-            <div className=''>
+            <div>
                 <label className='text-color-dark'>Info</label>
                 <ExpanderPanel title='Lorem ipsum' bsStyle='info'>
                     {dummyTextExtraShort}
                 </ExpanderPanel>
             </div>
-            <div className=''>
+            <div>
                 <label className='text-color-dark'>Warning</label>
                 <ExpanderPanel title='Lorem ipsum' bsStyle='warning'>
                     {dummyTextExtraShort}
                 </ExpanderPanel>
             </div>
-            <div className=''>
+            <div>
                 <label className='text-color-dark'>Danger</label>
                 <ExpanderPanel title='Lorem ipsum' bsStyle='danger'>
                     {dummyTextExtraShort}
                 </ExpanderPanel>
             </div>
-            <div className=''>
+            <div>
                 <label className='text-color-dark'>success</label>
                 <ExpanderPanel title='Lorem ipsum' bsStyle='success'>
                     {dummyTextExtraShort}
@@ -386,7 +385,7 @@ const DynamicContent = () => {
         const idString = event.currentTarget.getAttribute('data-id');
         if (idString) {
             const id = Number.parseInt(idString, 10);
-            if (!isNaN(id)) {
+            if (!Number.isNaN(id)) {
                 setListItems(listItems.filter(item => item.id !== id));
             }
         }
@@ -542,7 +541,7 @@ const DynamicContent = () => {
                 </div>
             </div>
         </div>
-        <div class="">
+        <div>
             <label class="text-color-dark">Secondary</label>
             <div class="expander-panel panel panel-secondary" aria-label="expander panel">
                 <div class="panel-heading" aria-label="panel heading">
@@ -552,7 +551,7 @@ const DynamicContent = () => {
                 </div>
             </div>
         </div>
-        <div class="">
+        <div>
             <label class="text-color-dark">Info</label>
             <div class="expander-panel panel panel-info" aria-label="expander panel">
                 <div class="panel-heading" aria-label="panel heading">
@@ -562,7 +561,7 @@ const DynamicContent = () => {
                 </div>
             </div>
         </div>
-        <div class="">
+        <div>
             <label class="text-color-dark">Warning</label>
             <div class="expander-panel panel panel-warning" aria-label="expander panel">
                 <div class="panel-heading" aria-label="panel heading">
@@ -572,7 +571,7 @@ const DynamicContent = () => {
                 </div>
             </div>
         </div>
-        <div class="">
+        <div>
             <label class="text-color-dark">Danger</label>
             <div class="expander-panel panel panel-danger" aria-label="expander panel">
                 <div class="panel-heading" aria-label="panel heading">
@@ -582,7 +581,7 @@ const DynamicContent = () => {
                 </div>
             </div>
         </div>
-        <div class="">
+        <div>
             <label class="text-color-dark">success</label>
             <div class="expander-panel panel panel-success" aria-label="expander panel">
                 <div class="panel-heading" aria-label="panel heading">
@@ -656,22 +655,21 @@ const DynamicContent = () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| title | String / Node | — | The title to be shown in the expander header. |
-| bsStyle | String | 'blank' | Component visual or contextual style variants. Possible values are: 'default' 'separator' 'blank' 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |
-| iconLeft | Boolean | false | Defines if the icon will be align left, otherwise it is aligned right. |
-| open | Boolean | false | Defines if the panel will be opened or closed by default. The open/closed state will be handled internally |
-| unmountOnExit | Boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |
-| className | String | — | Additional classes to be set on the wrapper element. |
-| iconClassName | String | — | Additional classes added to the chevron icon |
-| headerClassName | String | — | Additional classes to be set on the panel header. |
-| titleClassName | String | — | Additional classes to be set on the header title. |
-| bodyClassName | String | — | Additional classes to be set on the panel body. |
+| title | string \| React.ReactNode | — | The title to be shown in the expander header. |
+| bsStyle | 'blank' \| 'default' \| 'separator' \| 'primary' \| 'secondary' \| 'info' \| 'warning' \| 'danger' \| 'success' | 'blank' | Component visual or contextual style variants. |
+| iconLeft | boolean | false | Defines if the icon will be align left, otherwise it is aligned right. |
+| open | boolean | false | Defines if the panel will be opened or closed by default. The open/closed state will be handled internally. |
+| unmountOnExit | boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |
 | onToggle | (isOpen: boolean) => void | — | Callback function for when the header is clicked and the expander toggles. |
 | onEntered | VoidFunction | — | Callback fired after the component has expanded. |
 | onExited | VoidFunction | — | Callback fired after the component has collapsed. |
 | onAnimationStart | VoidFunction | — | Callback fired when the animation starts for either expand or collapse. |
-| children | Node | — | Any element to be rendered inside the panel body. |
-| children | Function | — | Providing a function enables the "render props" approach. The function gets the isOpen state passed and is responsible for rendering the custom content. |
+| headerClassName | string | — | Additional classes to be set on the panel header. |
+| titleClassName | string | — | Additional classes to be set on the header title. |
+| bodyClassName | string | — | Additional classes to be set on the panel body. |
+| iconClassName | string | — | Additional classes added to the chevron icon |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| children | React.ReactNode \| ((isOpen: boolean) => React.ReactNode \| JSX.Element) | — | Any element to be rendered inside the panel body. Providing a function enables the render prop approach. See https://reactjs.org/docs/render-props.html The function gets the isOpen state passed and is responsible for rendering the custom content. |
 
 ## ExpanderList
 
@@ -956,15 +954,17 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| items | Array of Objects | [] | List of items to be rendered |
-| └id | String / Number | — | The "id" property is used to know which item is expanded. It will also be used to control the component from the outside. It can be a number or a string. If there is no "id" provided, a unique id is internally generated which will be used internally for the uncontrolled case. |
-| └header | String / Node | — | The header content. |
-| └body | String / Node | — | The body content. If there is no "body" provided, the list item is not expandable. |
-| └open | Boolean | — | Defines if the item will be expanded or closed by default. |
-| └className | String | — | Additional classes to be set on list item node. |
-| └headerClassName | String | — | Additional classes to be set on "expander-list-header" node. |
-| └bodyClassName | String | — | Additional classes to be set on "expander-list-body" node. |
-| rounded | Boolean | true | Defines whether the "expander-list-body" is rounded or not. |
-| border | Boolean | true | Defines whether the "expander-list-body" has a border or not. |
-| unmountOnExit | Boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |
-| className | String | — | Additional classes to be set on the unordered list itself. |
+| items | ExpanderListItem[] | — | List of items to be rendered. The expanded state can be defined via the items open prop. |
+| └id | string \| number | — | The "id" property is used to know which item is expanded. It will also be used to control the component from the outside. It can be a number or a string. If there is no "id" provided, a unique id is internally generated which will be used internally for the uncontrolled case.' |
+| └header | string \| React.ReactNode | — | The header content. |
+| └body | string \| React.ReactNode | — | The body content. If there is no "body" provided, the list item is not expandable. |
+| └open | boolean | — | Defines if the item will be expanded or closed by default. |
+| └onOpen | VoidFunction | — | Callback fired when item toggles to open after a click. |
+| └onClose | VoidFunction | — | Callback fired when item toggles to close after a click. |
+| └headerClassName | string | — | Additional classes to be set on "expander-list-header" node. |
+| └bodyClassName | string | — | Additional classes to be set on "expander-list-body" node. |
+| └className | string | — | Additional classes to be set on list item node. |
+| rounded | boolean | true | Defines whether the "expander-list-body" is rounded or not. |
+| bordered | boolean | true | Defines whether the "expander-list-body" has a border or not. |
+| unmountOnExit | boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |
+| className | string | — | Additional classes to be set on the unordered list itself. |