@rio-cloud/uikit-mcp 1.1.9 → 1.1.10

package/dist/docs/components/editableContent.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/editableContent
-*Captured:* 2026-03-06T10:40:11.074Z
+*Captured:* 2026-04-20T12:53:46.407Z
 
 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.
 
@@ -280,6 +280,7 @@ export default () => {
     };
 
     const handleCancelText = () => setIsEditMode(false);
+    const handleEnterEditMode = () => setIsEditMode(true);
 
     const handleValidation = (value: string) => !/\d/.test(value);
 
@@ -290,6 +291,7 @@ export default () => {
                 show={isEditMode}
                 onSave={handleSaveText}
                 onCancel={handleCancelText}
+                onEditMode={handleEnterEditMode}
                 onSaveValidation={handleValidation}
                 editorOffsetTop={1}
                 errorMessage={<span>Numbers are not allowed</span>}
@@ -774,96 +776,94 @@ const Demo2 = () => {
     );
 };
 
-export default () => {
-    return (
-        <>
-            <div className='display-grid grid-cols-2 grid-cols-3-md grid-auto-rows gap-15 margin-bottom-20'>
-                <div>
-                    <div className='text-size-16 text-color-danger'>Don't</div>
-                    <p>Avoid overuse in lists or tables. Avoid many repetitions of edit icons.</p>
-                    <ul className='list-group rounded border'>
-                        <li className='list-group-item'>
-                            <Demo1 />
-                        </li>
-                        <li className='list-group-item'>
-                            <Demo1 />
-                        </li>
-                        <li className='list-group-item'>
-                            <Demo1 />
-                        </li>
-                        <li className='list-group-item'>
-                            <Demo1 />
-                        </li>
-                        <li className='list-group-item'>
-                            <Demo1 />
-                        </li>
-                        <li className='list-group-item'>
-                            <Demo1 />
-                        </li>
-                        <li className='list-group-item'>
-                            <Demo1 />
-                        </li>
-                    </ul>
-                </div>
-                <div>
-                    <div className='text-size-16 text-color-success'>Do</div>
-                    <p>Use an underline to indicate editable text and use a hover icon on Desktop if possible.</p>
-                    <ul className='list-group rounded border'>
-                        <li className='list-group-item'>
-                            <Demo2 />
-                        </li>
-                        <li className='list-group-item'>
-                            <Demo2 />
-                        </li>
-                        <li className='list-group-item'>
-                            <Demo2 />
-                        </li>
-                        <li className='list-group-item'>
-                            <Demo2 />
-                        </li>
-                        <li className='list-group-item'>
-                            <Demo2 />
-                        </li>
-                        <li className='list-group-item'>
-                            <Demo2 />
-                        </li>
-                        <li className='list-group-item'>
-                            <Demo2 />
-                        </li>
-                    </ul>
-                </div>
-                <div className='grid-colspan-2 grid-colspan-1-md'>
-                    <div className='text-size-16 text-color-success'>Do</div>
-                    <p>
-                        Using the editable field in isolation like inside a panel header or a like, you can permanently
-                        show a edit icon.
-                    </p>
-                    <EditableContent editorOffsetTop={1}>
-                        <h5 className='display-flex align-items-center gap-5 text-thin cursor-pointer'>
-                            <span>Lorem ipsum dolor</span>
-                            <span className='rioglyph rioglyph-pencil' />
-                        </h5>
-                    </EditableContent>
-                    <hr />
-                    <EditableContent editorOffsetTop={1}>
-                        <div className='display-flex align-items-center gap-5 text-size-h4 text-thin cursor-pointer'>
-                            <span>Lorem ipsum dolor</span>
-                            <span className='rioglyph rioglyph-pencil' />
-                        </div>
-                    </EditableContent>
-                    <hr />
-                </div>
+export default () => (
+    <>
+        <div className='display-grid grid-cols-2 grid-cols-3-md grid-auto-rows gap-15 margin-bottom-20'>
+            <div>
+                <div className='text-size-16 text-color-danger'>Don't</div>
+                <p>Avoid overuse in lists or tables. Avoid many repetitions of edit icons.</p>
+                <ul className='list-group rounded border'>
+                    <li className='list-group-item'>
+                        <Demo1 />
+                    </li>
+                    <li className='list-group-item'>
+                        <Demo1 />
+                    </li>
+                    <li className='list-group-item'>
+                        <Demo1 />
+                    </li>
+                    <li className='list-group-item'>
+                        <Demo1 />
+                    </li>
+                    <li className='list-group-item'>
+                        <Demo1 />
+                    </li>
+                    <li className='list-group-item'>
+                        <Demo1 />
+                    </li>
+                    <li className='list-group-item'>
+                        <Demo1 />
+                    </li>
+                </ul>
             </div>
-            <b>
-                <Note>
-                    In general, don't make every cell in a table editable. The indication style would be too repetitive
-                    and the user does not expect this behavior as it is not implemented in other services like so.
-                    Strive for a common look and feel with regards to other services.
-                </Note>
-            </b>
-        </>
-    );
-};
+            <div>
+                <div className='text-size-16 text-color-success'>Do</div>
+                <p>Use an underline to indicate editable text and use a hover icon on Desktop if possible.</p>
+                <ul className='list-group rounded border'>
+                    <li className='list-group-item'>
+                        <Demo2 />
+                    </li>
+                    <li className='list-group-item'>
+                        <Demo2 />
+                    </li>
+                    <li className='list-group-item'>
+                        <Demo2 />
+                    </li>
+                    <li className='list-group-item'>
+                        <Demo2 />
+                    </li>
+                    <li className='list-group-item'>
+                        <Demo2 />
+                    </li>
+                    <li className='list-group-item'>
+                        <Demo2 />
+                    </li>
+                    <li className='list-group-item'>
+                        <Demo2 />
+                    </li>
+                </ul>
+            </div>
+            <div className='grid-colspan-2 grid-colspan-1-md'>
+                <div className='text-size-16 text-color-success'>Do</div>
+                <p>
+                    Using the editable field in isolation like inside a panel header or a like, you can permanently show
+                    a edit icon.
+                </p>
+                <EditableContent editorOffsetTop={1}>
+                    <h5 className='display-flex align-items-center gap-5 text-thin cursor-pointer'>
+                        <span>Lorem ipsum dolor</span>
+                        <span className='rioglyph rioglyph-pencil' />
+                    </h5>
+                </EditableContent>
+                <hr />
+                <EditableContent editorOffsetTop={1}>
+                    <div className='display-flex align-items-center gap-5 text-size-h4 text-thin cursor-pointer'>
+                        <span>Lorem ipsum dolor</span>
+                        <span className='rioglyph rioglyph-pencil' />
+                    </div>
+                </EditableContent>
+                <hr />
+            </div>
+        </div>
+        <b>
+            <Note>
+                In general, don't make every cell in a table editable. The indication style would be too repetitive and
+                the user does not expect this behavior as it is not implemented in other services like so. Strive for a
+                common look and feel with regards to other services.
+            </Note>
+        </b>
+    </>
+);
 ```
 
 #### HTML (html)
@@ -1016,7 +1016,7 @@ export default () => {
     </div>
 </div>
 <b>
-    <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0" data-capture-callout="true">
+    <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0">
         <div>
             <span class="label label-info label-condensed label-filled">Note</span>
         </div>

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-03-06T10:40:18.829Z
+*Captured:* 2026-04-20T12:53:53.995Z
 
 A simple panel component where the "panel-body" can be expanded.
 
@@ -125,6 +125,7 @@ export default () => {
 | 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. |
+| trackingAttributes | TrackingAttributes | — | Optional tracking attributes (e.g. from getTrackingAttributes) added to the panel header 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
@@ -622,6 +623,7 @@ const DynamicContent = () => {
 | 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. |
+| trackingAttributes | TrackingAttributes | — | Optional tracking attributes (e.g. from getTrackingAttributes) added to the panel header 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
@@ -891,6 +893,7 @@ export default () => {
 | └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. |
+| └trackingAttributes | TrackingAttributes | — | Optional tracking attributes (e.g. from getTrackingAttributes) added to the item header element. |
 | 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. |

package/dist/docs/components/fade.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Show/Hide
 *Source:* https://uikit.developers.rio.cloud/#/components/fade
-*Captured:* 2026-03-06T10:40:20.356Z
+*Captured:* 2026-04-20T12:53:55.866Z
 
 The Fade component fades in and out content with a given animation style.
 

package/dist/docs/components/fadeExpander.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Show/Hide
 *Source:* https://uikit.developers.rio.cloud/#/components/fadeExpander
-*Captured:* 2026-03-06T10:40:19.524Z
+*Captured:* 2026-04-20T12:53:53.559Z
 
 The FadeExpander component fades in and expands when the content.
 

package/dist/docs/components/fadeUp.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Show/Hide
 *Source:* https://uikit.developers.rio.cloud/#/components/fadeUp
-*Captured:* 2026-03-06T10:40:20.757Z
+*Captured:* 2026-04-20T12:53:55.260Z
 
 The FadeUp component fades in when the content appears on the screen. After it faded in, the element will stay on screen. This can be used in a scrolling scenario where elements should fade up when they scroll into view. Using the delay helps to stagger the animation.
 
@@ -77,17 +77,15 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget ma
 import FadeUp from '@rio-cloud/rio-uikit/FadeUp';
 import { dummyText } from '../../../utils/data';
 
-export default () => {
-    return (
-        <div className='max-width-500 max-height-500 overflow-auto padding-x-25'>
-            {Array.from({ length: 30 }, (_, index) => (
-                <FadeUp key={index} duration={0.5} delay={0.3}>
-                    <div className='bg-white rounded border padding-25 margin-bottom-15'>{dummyText}</div>
-                </FadeUp>
-            ))}
-        </div>
-    );
-};
+export default () => (
+    <div className='max-width-500 max-height-500 overflow-auto padding-x-25'>
+        {Array.from({ length: 30 }, (_, index) => (
+            <FadeUp key={index} duration={0.5} delay={0.3}>
+                <div className='bg-white rounded border padding-25 margin-bottom-15'>{dummyText}</div>
+            </FadeUp>
+        ))}
+    </div>
+);
 ```
 
 #### HTML (html)
@@ -244,33 +242,31 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget ma
 import FadeUp from '@rio-cloud/rio-uikit/FadeUp';
 import { dummyImage3by2, dummyTextExtraShort, dummyTextShort } from '../../../utils/data';
 
-export default () => {
-    return (
-        <div className='max-width-800 padding-x-25'>
-            <div className='display-flex align-items-center gap-25 margin-bottom-50'>
-                <div>
-                    <FadeUp delay={0.4}>
-                        <h1 className=''>Lorem ipsum dolor sit amet</h1>
-                    </FadeUp>
-                    <FadeUp delay={0.6}>
-                        <p className='text-color-dark'>{dummyTextExtraShort}</p>
-                    </FadeUp>
-                </div>
-                <FadeUp delay={1.0}>
-                    <img className='rounded-large' width={250} src={dummyImage3by2} alt='dummy' />
+export default () => (
+    <div className='max-width-800 padding-x-25'>
+        <div className='display-flex align-items-center gap-25 margin-bottom-50'>
+            <div>
+                <FadeUp delay={0.4}>
+                    <h1 className=''>Lorem ipsum dolor sit amet</h1>
+                </FadeUp>
+                <FadeUp delay={0.6}>
+                    <p className='text-color-dark'>{dummyTextExtraShort}</p>
                 </FadeUp>
             </div>
-
-            <FadeUp delay={1.3} className='display-grid grid-cols-1 grid-cols-3-md gap-15'>
-                {Array.from({ length: 3 }, (_, index) => (
-                    <FadeUp key={index} delay={1.5 + index * 0.2}>
-                        <div className='bg-white rounded border padding-25 margin-bottom-15'>{dummyTextShort}</div>
-                    </FadeUp>
-                ))}
+            <FadeUp delay={1.0}>
+                <img className='rounded-large' width={250} src={dummyImage3by2} alt='dummy' />
             </FadeUp>
         </div>
-    );
-};
+
+        <FadeUp delay={1.3} className='display-grid grid-cols-1 grid-cols-3-md gap-15'>
+            {Array.from({ length: 3 }, (_, index) => (
+                <FadeUp key={index} delay={1.5 + index * 0.2}>
+                    <div className='bg-white rounded border padding-25 margin-bottom-15'>{dummyTextShort}</div>
+                </FadeUp>
+            ))}
+        </FadeUp>
+    </div>
+);
 ```
 
 #### HTML (html)
@@ -282,7 +278,7 @@ export default () => {
             <div class="" style="opacity: 1; transform: none;">
                 <h1 class="">Lorem ipsum dolor sit amet</h1>
             </div>
-            <div class="" style="opacity: 0; transform: translateY(0.0299483px);">
+            <div class="" style="opacity: 0; transform: translateY(0.0042499px);">
                 <p class="text-color-dark">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</p>
             </div>

package/dist/docs/components/feedback.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/feedback
-*Captured:* 2026-03-06T10:40:59.233Z
+*Captured:* 2026-04-20T12:54:45.654Z
 
 ## FeedbackRating
 

package/dist/docs/components/filePickers.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Pickers
 *Source:* https://uikit.developers.rio.cloud/#/components/filePickers
-*Captured:* 2026-03-06T10:40:32.594Z
+*Captured:* 2026-04-20T12:54:06.459Z
 
 ## FilePicker
 

package/dist/docs/components/formLabel.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/formLabel
-*Captured:* 2026-03-06T10:40:42.813Z
+*Captured:* 2026-04-20T12:54:23.916Z
 
 A small convenience component for a form label or just a label style used without a form element.
 
@@ -158,39 +158,37 @@ import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
 import Button from '@rio-cloud/rio-uikit/Button';
 import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
 
-export default () => {
-    return (
-        <div className='display-flex flex-column gap-15 max-width-500'>
-            <p>
-                Labels for various sized elements using the <code>form-group-sm</code> and <code>form-group-lg</code>{' '}
-                class on the parent element.
-            </p>
-            <div className='form-group form-group-sm'>
-                <FormLabel htmlFor='sample-sm-input' supportingText='Lorem ipsum'>
-                    A label for a small form element
-                </FormLabel>
-                <input id='sample-sm-input' className='form-control' placeholder='Some input' />
-            </div>
+export default () => (
+    <div className='display-flex flex-column gap-15 max-width-500'>
+        <p>
+            Labels for various sized elements using the <code>form-group-sm</code> and <code>form-group-lg</code> class
+            on the parent element.
+        </p>
+        <div className='form-group form-group-sm'>
+            <FormLabel htmlFor='sample-sm-input' supportingText='Lorem ipsum'>
+                A label for a small form element
+            </FormLabel>
+            <input id='sample-sm-input' className='form-control' placeholder='Some input' />
+        </div>
 
-            <div className='form-group form-group-lg'>
-                <FormLabel htmlFor='sample-lg-input' supportingText='Lorem ipsum'>
-                    A label for a large form element
-                </FormLabel>
-                <input id='sample-lg-input' className='form-control' placeholder='Some input' />
-            </div>
+        <div className='form-group form-group-lg'>
+            <FormLabel htmlFor='sample-lg-input' supportingText='Lorem ipsum'>
+                A label for a large form element
+            </FormLabel>
+            <input id='sample-lg-input' className='form-control' placeholder='Some input' />
+        </div>
 
-            <div className='form-group form-group-lg'>
-                <FormLabel>A label for some large buttons</FormLabel>
-                <ButtonToolbar>
-                    <Button bsSize='lg'>Button</Button>
-                    <Button bsSize='lg' bsStyle='primary'>
-                        Button
-                    </Button>
-                </ButtonToolbar>
-            </div>
+        <div className='form-group form-group-lg'>
+            <FormLabel>A label for some large buttons</FormLabel>
+            <ButtonToolbar>
+                <Button bsSize='lg'>Button</Button>
+                <Button bsSize='lg' bsStyle='primary'>
+                    Button
+                </Button>
+            </ButtonToolbar>
         </div>
-    );
-};
+    </div>
+);
 ```
 
 #### HTML (html)

package/dist/docs/components/groupedItemList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/groupedItemList
-*Captured:* 2026-03-06T10:40:44.491Z
+*Captured:* 2026-04-20T12:54:27.162Z
 
 ## GroupedItemList
 
@@ -464,14 +464,10 @@ export default () => {
     );
 
     // Sorting function for groups by deliveryDate
-    const groupSortFunction = (groups: Group[]) => {
-        return naturalSortByProperty(groups, 'groupKey', sortOrder);
-    };
+    const groupSortFunction = (groups: Group[]) => naturalSortByProperty(groups, 'groupKey', sortOrder);
 
     // Sorting function for items within each group
-    const itemSortFunction = (items: LogisticItem[]) => {
-        return sortByProperty(items, 'name', itemSortOrder);
-    };
+    const itemSortFunction = (items: LogisticItem[]) => sortByProperty(items, 'name', itemSortOrder);
 
     return (
         <div>