@rio-cloud/uikit-mcp 1.1.3 → 1.1.4

package/dist/docs/components/saveableInput.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/saveableInput
-*Captured:* 2026-01-07T12:11:20.290Z
+*Captured:* 2026-01-14T09:07:07.787Z
 
 ## SaveableInput
 
@@ -261,29 +261,6 @@ export default () => (
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| placeholder | String | — | The input placeholder. |
-| value | String | — | The actual input value. |
-| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |
-| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |
-| errorMessage | string \| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the "isValid" prop is set to false. |
-| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false. |
-| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |
-| buttonStyle | string | primary | Defines the button style: default or primary. |
-| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |
-| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: `rioglyph-search`. |
-| unit | String \| ReactNode | — | Adds a given unit to the input. |
-| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
-| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |
-| onInputChange | (keyValue: string, inputValue: string) => void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |
-| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
-| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |
-| inputClassName | String | — | Additional classes to be set on the input itself. |
-| className | String | — | Additional classes to be set on the wrapper element. |
-
 ### Example: Example 2
 
 With error feedback and disabled save button
@@ -311,7 +288,7 @@ export default () => {
     };
 
     // Used to do some custom validation here...
-    const handleInputChange = (keyValue: string, inputValue: string) => {
+    const handleInputChange = (_keyValue: string, inputValue: string) => {
         setValue(inputValue);
     };
 
@@ -378,29 +355,6 @@ export default () => {
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| placeholder | String | — | The input placeholder. |
-| value | String | — | The actual input value. |
-| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |
-| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |
-| errorMessage | string \| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the "isValid" prop is set to false. |
-| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false. |
-| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |
-| buttonStyle | string | primary | Defines the button style: default or primary. |
-| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |
-| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: `rioglyph-search`. |
-| unit | String \| ReactNode | — | Adds a given unit to the input. |
-| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
-| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |
-| onInputChange | (keyValue: string, inputValue: string) => void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |
-| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
-| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |
-| inputClassName | String | — | Additional classes to be set on the input itself. |
-| className | String | — | Additional classes to be set on the wrapper element. |
-
 ### Example: Controlled SaveableInput
 
 Controlled SaveableInput
@@ -519,29 +473,6 @@ export default () => {
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| placeholder | String | — | The input placeholder. |
-| value | String | — | The actual input value. |
-| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |
-| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |
-| errorMessage | string \| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the "isValid" prop is set to false. |
-| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false. |
-| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |
-| buttonStyle | string | primary | Defines the button style: default or primary. |
-| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |
-| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: `rioglyph-search`. |
-| unit | String \| ReactNode | — | Adds a given unit to the input. |
-| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
-| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |
-| onInputChange | (keyValue: string, inputValue: string) => void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |
-| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
-| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |
-| inputClassName | String | — | Additional classes to be set on the input itself. |
-| className | String | — | Additional classes to be set on the wrapper element. |
-
 ### Example: Controlled SaveableInput with key validation
 
 Controlled SaveableInput with key validation
@@ -666,29 +597,6 @@ export default () => {
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| placeholder | String | — | The input placeholder. |
-| value | String | — | The actual input value. |
-| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |
-| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |
-| errorMessage | string \| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the "isValid" prop is set to false. |
-| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false. |
-| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |
-| buttonStyle | string | primary | Defines the button style: default or primary. |
-| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |
-| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: `rioglyph-search`. |
-| unit | String \| ReactNode | — | Adds a given unit to the input. |
-| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
-| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |
-| onInputChange | (keyValue: string, inputValue: string) => void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |
-| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
-| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |
-| inputClassName | String | — | Additional classes to be set on the input itself. |
-| className | String | — | Additional classes to be set on the wrapper element. |
-
 ## SaveableDateInput
 
 ### Example: SaveableDateInput (uncontrolled)
@@ -717,7 +625,7 @@ SuMoTuWeThFrSa
 25262728293031
 1234567
 
-01:11
+10:07
 
 Saved value:
 
@@ -773,7 +681,7 @@ SuMoTuWeThFrSa
 25262728293031
 1234567
 
-1:11 PM
+10:07 AM
 
 #### Summary
 
@@ -801,7 +709,7 @@ SuMoTuWeThFrSa
 25262728293031
 1234567
 
-01:11
+10:07
 
 Saved value:
 
@@ -857,7 +765,7 @@ SuMoTuWeThFrSa
 25262728293031
 1234567
 
-1:11 PM
+10:07 AM
 
 #### React (tsx)
 
@@ -1120,7 +1028,7 @@ export default () => {
                                         <td data-value="4" data-month="0" data-year="2026" class="rdtDay">4</td>
                                         <td data-value="5" data-month="0" data-year="2026" class="rdtDay">5</td>
                                         <td data-value="6" data-month="0" data-year="2026" class="rdtDay">6</td>
-                                        <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtToday">7</td>
+                                        <td data-value="7" data-month="0" data-year="2026" class="rdtDay">7</td>
                                         <td data-value="8" data-month="0" data-year="2026" class="rdtDay">8</td>
                                         <td data-value="9" data-month="0" data-year="2026" class="rdtDay">9</td>
                                         <td data-value="10" data-month="0" data-year="2026" class="rdtDay">10</td>
@@ -1129,7 +1037,7 @@ export default () => {
                                         <td data-value="11" data-month="0" data-year="2026" class="rdtDay">11</td>
                                         <td data-value="12" data-month="0" data-year="2026" class="rdtDay">12</td>
                                         <td data-value="13" data-month="0" data-year="2026" class="rdtDay">13</td>
-                                        <td data-value="14" data-month="0" data-year="2026" class="rdtDay">14</td>
+                                        <td data-value="14" data-month="0" data-year="2026" class="rdtDay rdtToday">14</td>
                                         <td data-value="15" data-month="0" data-year="2026" class="rdtDay">15</td>
                                         <td data-value="16" data-month="0" data-year="2026" class="rdtDay">16</td>
                                         <td data-value="17" data-month="0" data-year="2026" class="rdtDay">17</td>
@@ -1187,7 +1095,7 @@ export default () => {
                                 </span>
                             </span>
                             <div class="ClearableInput input-group">
-                                <input type="text" class="form-control" placeholder="Enter valid date" disabled="" value="2026-01-07 01:11" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;">
+                                <input type="text" class="form-control" placeholder="Enter valid date" disabled="" value="2026-01-14 10:07" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;">
                             </div>
                         </div>
                         <div class="rdtPicker">
@@ -1227,7 +1135,7 @@ export default () => {
                                             <td data-value="4" data-month="0" data-year="2026" class="rdtDay">4</td>
                                             <td data-value="5" data-month="0" data-year="2026" class="rdtDay">5</td>
                                             <td data-value="6" data-month="0" data-year="2026" class="rdtDay">6</td>
-                                            <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtActive rdtToday">7</td>
+                                            <td data-value="7" data-month="0" data-year="2026" class="rdtDay">7</td>
                                             <td data-value="8" data-month="0" data-year="2026" class="rdtDay">8</td>
                                             <td data-value="9" data-month="0" data-year="2026" class="rdtDay">9</td>
                                             <td data-value="10" data-month="0" data-year="2026" class="rdtDay">10</td>
@@ -1236,7 +1144,7 @@ export default () => {
                                             <td data-value="11" data-month="0" data-year="2026" class="rdtDay">11</td>
                                             <td data-value="12" data-month="0" data-year="2026" class="rdtDay">12</td>
                                             <td data-value="13" data-month="0" data-year="2026" class="rdtDay">13</td>
-                                            <td data-value="14" data-month="0" data-year="2026" class="rdtDay">14</td>
+                                            <td data-value="14" data-month="0" data-year="2026" class="rdtDay rdtActive rdtToday">14</td>
                                             <td data-value="15" data-month="0" data-year="2026" class="rdtDay">15</td>
                                             <td data-value="16" data-month="0" data-year="2026" class="rdtDay">16</td>
                                             <td data-value="17" data-month="0" data-year="2026" class="rdtDay">17</td>
@@ -1271,7 +1179,7 @@ export default () => {
                                     </tbody>
                                     <tfoot>
                                         <tr>
-                                            <td colspan="7" class="rdtTimeToggle">01:11</td>
+                                            <td colspan="7" class="rdtTimeToggle">10:07</td>
                                         </tr>
                                     </tfoot>
                                 </table>
@@ -1343,7 +1251,7 @@ export default () => {
                                             <td data-value="4" data-month="0" data-year="2026" class="rdtDay">4</td>
                                             <td data-value="5" data-month="0" data-year="2026" class="rdtDay">5</td>
                                             <td data-value="6" data-month="0" data-year="2026" class="rdtDay">6</td>
-                                            <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtToday">7</td>
+                                            <td data-value="7" data-month="0" data-year="2026" class="rdtDay">7</td>
                                             <td data-value="8" data-month="0" data-year="2026" class="rdtDay">8</td>
                                             <td data-value="9" data-month="0" data-year="2026" class="rdtDay">9</td>
                                             <td data-value="10" data-month="0" data-year="2026" class="rdtDay">10</td>
@@ -1352,7 +1260,7 @@ export default () => {
                                             <td data-value="11" data-month="0" data-year="2026" class="rdtDay">11</td>
                                             <td data-value="12" data-month="0" data-year="2026" class="rdtDay">12</td>
                                             <td data-value="13" data-month="0" data-year="2026" class="rdtDay">13</td>
-                                            <td data-value="14" data-month="0" data-year="2026" class="rdtDay">14</td>
+                                            <td data-value="14" data-month="0" data-year="2026" class="rdtDay rdtToday">14</td>
                                             <td data-value="15" data-month="0" data-year="2026" class="rdtDay">15</td>
                                             <td data-value="16" data-month="0" data-year="2026" class="rdtDay">16</td>
                                             <td data-value="17" data-month="0" data-year="2026" class="rdtDay">17</td>
@@ -1462,7 +1370,7 @@ export default () => {
                                             <td data-value="4" data-month="0" data-year="2026" class="rdtDay">4</td>
                                             <td data-value="5" data-month="0" data-year="2026" class="rdtDay">5</td>
                                             <td data-value="6" data-month="0" data-year="2026" class="rdtDay">6</td>
-                                            <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtToday">7</td>
+                                            <td data-value="7" data-month="0" data-year="2026" class="rdtDay">7</td>
                                             <td data-value="8" data-month="0" data-year="2026" class="rdtDay">8</td>
                                             <td data-value="9" data-month="0" data-year="2026" class="rdtDay">9</td>
                                             <td data-value="10" data-month="0" data-year="2026" class="rdtDay">10</td>
@@ -1471,7 +1379,7 @@ export default () => {
                                             <td data-value="11" data-month="0" data-year="2026" class="rdtDay">11</td>
                                             <td data-value="12" data-month="0" data-year="2026" class="rdtDay">12</td>
                                             <td data-value="13" data-month="0" data-year="2026" class="rdtDay">13</td>
-                                            <td data-value="14" data-month="0" data-year="2026" class="rdtDay">14</td>
+                                            <td data-value="14" data-month="0" data-year="2026" class="rdtDay rdtToday">14</td>
                                             <td data-value="15" data-month="0" data-year="2026" class="rdtDay">15</td>
                                             <td data-value="16" data-month="0" data-year="2026" class="rdtDay">16</td>
                                             <td data-value="17" data-month="0" data-year="2026" class="rdtDay">17</td>
@@ -1595,7 +1503,7 @@ export default () => {
                             </span>
                         </span>
                         <div class="ClearableInput input-group">
-                            <input type="text" class="form-control" disabled="" value="01/07/2026 1:11 PM" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;">
+                            <input type="text" class="form-control" disabled="" value="01/14/2026 10:07 AM" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;">
                         </div>
                     </div>
                     <div class="rdtPicker">
@@ -1635,7 +1543,7 @@ export default () => {
                                         <td data-value="4" data-month="0" data-year="2026" class="rdtDay">4</td>
                                         <td data-value="5" data-month="0" data-year="2026" class="rdtDay">5</td>
                                         <td data-value="6" data-month="0" data-year="2026" class="rdtDay">6</td>
-                                        <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtActive rdtToday">7</td>
+                                        <td data-value="7" data-month="0" data-year="2026" class="rdtDay">7</td>
                                         <td data-value="8" data-month="0" data-year="2026" class="rdtDay">8</td>
                                         <td data-value="9" data-month="0" data-year="2026" class="rdtDay">9</td>
                                         <td data-value="10" data-month="0" data-year="2026" class="rdtDay">10</td>
@@ -1644,7 +1552,7 @@ export default () => {
                                         <td data-value="11" data-month="0" data-year="2026" class="rdtDay">11</td>
                                         <td data-value="12" data-month="0" data-year="2026" class="rdtDay">12</td>
                                         <td data-value="13" data-month="0" data-year="2026" class="rdtDay">13</td>
-                                        <td data-value="14" data-month="0" data-year="2026" class="rdtDay">14</td>
+                                        <td data-value="14" data-month="0" data-year="2026" class="rdtDay rdtActive rdtToday">14</td>
                                         <td data-value="15" data-month="0" data-year="2026" class="rdtDay">15</td>
                                         <td data-value="16" data-month="0" data-year="2026" class="rdtDay">16</td>
                                         <td data-value="17" data-month="0" data-year="2026" class="rdtDay">17</td>
@@ -1679,7 +1587,7 @@ export default () => {
                                 </tbody>
                                 <tfoot>
                                     <tr>
-                                        <td colspan="7" class="rdtTimeToggle">1:11 PM</td>
+                                        <td colspan="7" class="rdtTimeToggle">10:07 AM</td>
                                     </tr>
                                 </tfoot>
                             </table>
@@ -1696,26 +1604,4 @@ export default () => {
         </div>
     </div>
 </div>
-```
-
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| placeholder | String | — | The input placeholder. |
-| value | Date \| Moment \| String | — | The actual input value. |
-| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |
-| errorMessage | string \| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the "isValid" prop is set to false. |
-| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false. |
-| onValueChanged | (value: Moment \| string, previousValue: Moment \| string \| Date) => void | — | Callback function triggered when the value changes and is saved. |
-| onInputChange | (value: Moment \| string, isValid: boolean) => void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |
-| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |
-| onExitEdit | (wasSaved: boolean) => void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |
-| onCancel | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
-| invalidExitBehavior | "stay-open" \| "reset-and-close" | "stay-open" | Behavior when trying to exit edit mode with invalid input: stay-open: Keep edit mode open until valid input is provided reset-and-close: Close edit mode and reset to initial value |
-| buttonStyle | "default" \| "primary" | — | Defines the button style: default or primary. |
-| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |
-| datePickerProps | DatePickerProps | — | Props passed directly to the date picker component. |
-| disabled | Boolean | false | Disables the component so the user cannot enter the edit mode. |
-| inputClassName | String | — | Additional classes to be set on the input itself. |
-| className | String | — | Additional classes to be set on the wrapper element. |
+```