@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/barList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Progress
 *Source:* https://uikit.developers.rio.cloud/#components/barList
-*Captured:* 2026-01-07T12:11:32.933Z
+*Captured:* 2026-02-03T14:04:36.191Z
 
 ## BarList
 
@@ -180,21 +180,21 @@ const transportData = [
             <div class="display-flex justify-content-between gap-15">
                 <div class="width-100pct space-y-5">
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 49.4673%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 49.7361%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 31.4876%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 31.7867%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <div class="text-color-darker">Warehouse efficiency</div>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 15.2012%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 15.4802%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
@@ -239,21 +239,21 @@ const transportData = [
             <div class="display-flex justify-content-between gap-15 flex-row-reverse gap-10">
                 <div class="width-100pct space-y-5">
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 49.4673%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 49.7361%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 31.4876%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 31.7867%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <div class="text-color-darker">Warehouse efficiency</div>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 15.2012%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 15.4802%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
@@ -307,22 +307,11 @@ const transportData = [
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| data | BarListRow<T>[] | — | Array of bar row data to be rendered. |
-| valueFormatter | (value: number) => string \| React.ReactElement | — | Optional function to format the numeric value displayed on the right side of each bar. |
-| referenceValue | number | max(data.value) | A reference value used to calculate relative widths. If not provided, the maximum value in the data array will be used. |
-| showAnimation | boolean | false | Whether to animate the bar width transitions using Framer Motion. |
-| onSelectRow | (payload: BarListRow<T>) => void | — | Callback fired when a bar is clicked. Receives the full data object of the selected bar. |
-| sortOrder | 'asc' \| 'desc' \| 'none' | 'none' | The sort order for the bars. |
-| rowHeight | number | 32 | Height of each bar row in pixels. |
-| opacity | number | 0.5 | Opacity applied to non-hovered bars. Value should be between 0 and 1. |
-| barColor | string | 'bg-highlight-light' | CSS class or color string used for the active/progress portion of each bar. |
-| labelColor | string | 'text-color-darker' | CSS class or color string used for the text labels. |
-| background | string | 'bg-transparent' | CSS class or color string used for the bar background. |
-| className | string | — | Additional classes for the wrapper element. |
+#### Props (json)
+
+```json
+valueFormatter={(value) => `${value}%`}
+```
 
 ### Example: 95
 
@@ -454,14 +443,14 @@ const transportData = [
                 </div>
             </div>
             <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
-                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 48.6505%;">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 48.958%;">
                 </div>
                 <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                     <div class="text-color-darker">Stored in warehouse</div>
                 </div>
             </div>
             <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
-                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 92.5858%;">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 93.9138%;">
                 </div>
                 <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                     <div class="text-color-darker">Shipped packages</div>
@@ -499,19 +488,8 @@ const transportData = [
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| data | BarListRow<T>[] | — | Array of bar row data to be rendered. |
-| valueFormatter | (value: number) => string \| React.ReactElement | — | Optional function to format the numeric value displayed on the right side of each bar. |
-| referenceValue | number | max(data.value) | A reference value used to calculate relative widths. If not provided, the maximum value in the data array will be used. |
-| showAnimation | boolean | false | Whether to animate the bar width transitions using Framer Motion. |
-| onSelectRow | (payload: BarListRow<T>) => void | — | Callback fired when a bar is clicked. Receives the full data object of the selected bar. |
-| sortOrder | 'asc' \| 'desc' \| 'none' | 'none' | The sort order for the bars. |
-| rowHeight | number | 32 | Height of each bar row in pixels. |
-| opacity | number | 0.5 | Opacity applied to non-hovered bars. Value should be between 0 and 1. |
-| barColor | string | 'bg-highlight-light' | CSS class or color string used for the active/progress portion of each bar. |
-| labelColor | string | 'text-color-darker' | CSS class or color string used for the text labels. |
-| background | string | 'bg-transparent' | CSS class or color string used for the bar background. |
-| className | string | — | Additional classes for the wrapper element. |
+#### Props (json)
+
+```json
+valueFormatter={(value) => `${value}%`}
+```

package/dist/docs/components/basicMap.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#components/basicMap
-*Captured:* 2026-01-07T12:12:13.590Z
+*Captured:* 2026-02-03T14:05:23.833Z
 
 The following map shows labels for locale de
 

package/dist/docs/components/bottomSheet.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#components/bottomSheet
-*Captured:* 2026-01-07T12:11:07.966Z
+*Captured:* 2026-02-03T14:04:08.526Z
 
 The TimedBottomSheet is a wrapper component for the BottomSheet that allows to control it's visibility via timers and to use the localStorage to save user interaction for handling it's visibility.
 
@@ -80,21 +80,21 @@ const content = (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |
-| onClose | Function | () => {}) | Callback for when the sheet closes. |
-| width | Number / String | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a "max-width-xxx" via className to control it better. |
-| height | Number / String | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |
-| title | Node / String | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |
-| showCloseButton | Boolean | true | Defines whether or not the close button is shown. |
-| showMaximizeButton | Boolean | false | Defines whether or not the maximize button in the header is shown. |
-| onHeightChange | Function | () => {} | The callback function triggered when the maximize button is clicked and the height changes. |
-| detach | Boolean | false | Set to "true" to detach the bottom sheet from the left side and the bottom and create a little offset. |
-| detachOffset | Number | 15 | Defines the amount of pixels for the sheet. |
-| hasBackdrop | Boolean | false | Set to "true" to render a modal like backdrop to emphasize the bottom sheet. |
-| onBackdropClick | Function | () => {} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |
-| bodyRef | React Ref | — | A react ref added to the bottom sheet body. |
-| bodyClassName | String | — | Additional classes to be set on the body element. |
-| className | String | — | Additional classes to be set on the wrapping element. |
+| show | boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |
+| onClose | (isShown: boolean) => void | — | Callback for when the sheet closes. |
+| width | number \| string | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a max-width-xxx via className to control it better. |
+| height | number \| string | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |
+| title | string \| ReactNode | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |
+| showCloseButton | boolean | true | Defines whether or not the close button is shown. |
+| showMaximizeButton | boolean | false | Defines whether or not the maximize button in the header is shown. |
+| onHeightChange | VoidFunction | () => {} | The callback function triggered when the maximize button is clicked and the height changes. |
+| detach | boolean | false | Set to true to detach the bottom sheet from the left side and the bottom and create a little offset. |
+| detachOffset | number | 15 | Defines the amount of pixels for the sheet. |
+| hasBackdrop | boolean | false | Set to true to render a modal like backdrop to emphasize the bottom sheet. |
+| onBackdropClick | VoidFunction | () => {} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |
+| bodyRef | MutableRefObject<HTMLDivElement \| null> | — | A react ref added to the bottom sheet body. |
+| bodyClassName | string | — | Additional classes to be set on the body element. |
+| className | string | — | Additional classes to be set on the wrapping element. |
 
 ### Example: Example 2
 
@@ -223,21 +223,21 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |
-| onClose | Function | () => {}) | Callback for when the sheet closes. |
-| width | Number / String | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a "max-width-xxx" via className to control it better. |
-| height | Number / String | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |
-| title | Node / String | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |
-| showCloseButton | Boolean | true | Defines whether or not the close button is shown. |
-| showMaximizeButton | Boolean | false | Defines whether or not the maximize button in the header is shown. |
-| onHeightChange | Function | () => {} | The callback function triggered when the maximize button is clicked and the height changes. |
-| detach | Boolean | false | Set to "true" to detach the bottom sheet from the left side and the bottom and create a little offset. |
-| detachOffset | Number | 15 | Defines the amount of pixels for the sheet. |
-| hasBackdrop | Boolean | false | Set to "true" to render a modal like backdrop to emphasize the bottom sheet. |
-| onBackdropClick | Function | () => {} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |
-| bodyRef | React Ref | — | A react ref added to the bottom sheet body. |
-| bodyClassName | String | — | Additional classes to be set on the body element. |
-| className | String | — | Additional classes to be set on the wrapping element. |
+| show | boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |
+| onClose | (isShown: boolean) => void | — | Callback for when the sheet closes. |
+| width | number \| string | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a max-width-xxx via className to control it better. |
+| height | number \| string | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |
+| title | string \| ReactNode | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |
+| showCloseButton | boolean | true | Defines whether or not the close button is shown. |
+| showMaximizeButton | boolean | false | Defines whether or not the maximize button in the header is shown. |
+| onHeightChange | VoidFunction | () => {} | The callback function triggered when the maximize button is clicked and the height changes. |
+| detach | boolean | false | Set to true to detach the bottom sheet from the left side and the bottom and create a little offset. |
+| detachOffset | number | 15 | Defines the amount of pixels for the sheet. |
+| hasBackdrop | boolean | false | Set to true to render a modal like backdrop to emphasize the bottom sheet. |
+| onBackdropClick | VoidFunction | () => {} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |
+| bodyRef | MutableRefObject<HTMLDivElement \| null> | — | A react ref added to the bottom sheet body. |
+| bodyClassName | string | — | Additional classes to be set on the body element. |
+| className | string | — | Additional classes to be set on the wrapping element. |
 
 ### Example: Example 3
 
@@ -340,21 +340,21 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |
-| onClose | Function | () => {}) | Callback for when the sheet closes. |
-| width | Number / String | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a "max-width-xxx" via className to control it better. |
-| height | Number / String | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |
-| title | Node / String | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |
-| showCloseButton | Boolean | true | Defines whether or not the close button is shown. |
-| showMaximizeButton | Boolean | false | Defines whether or not the maximize button in the header is shown. |
-| onHeightChange | Function | () => {} | The callback function triggered when the maximize button is clicked and the height changes. |
-| detach | Boolean | false | Set to "true" to detach the bottom sheet from the left side and the bottom and create a little offset. |
-| detachOffset | Number | 15 | Defines the amount of pixels for the sheet. |
-| hasBackdrop | Boolean | false | Set to "true" to render a modal like backdrop to emphasize the bottom sheet. |
-| onBackdropClick | Function | () => {} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |
-| bodyRef | React Ref | — | A react ref added to the bottom sheet body. |
-| bodyClassName | String | — | Additional classes to be set on the body element. |
-| className | String | — | Additional classes to be set on the wrapping element. |
+| show | boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |
+| onClose | (isShown: boolean) => void | — | Callback for when the sheet closes. |
+| width | number \| string | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a max-width-xxx via className to control it better. |
+| height | number \| string | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |
+| title | string \| ReactNode | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |
+| showCloseButton | boolean | true | Defines whether or not the close button is shown. |
+| showMaximizeButton | boolean | false | Defines whether or not the maximize button in the header is shown. |
+| onHeightChange | VoidFunction | () => {} | The callback function triggered when the maximize button is clicked and the height changes. |
+| detach | boolean | false | Set to true to detach the bottom sheet from the left side and the bottom and create a little offset. |
+| detachOffset | number | 15 | Defines the amount of pixels for the sheet. |
+| hasBackdrop | boolean | false | Set to true to render a modal like backdrop to emphasize the bottom sheet. |
+| onBackdropClick | VoidFunction | () => {} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |
+| bodyRef | MutableRefObject<HTMLDivElement \| null> | — | A react ref added to the bottom sheet body. |
+| bodyClassName | string | — | Additional classes to be set on the body element. |
+| className | string | — | Additional classes to be set on the wrapping element. |
 
 ### Example: Example 4
 
@@ -444,21 +444,21 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| show | Boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |
-| onClose | Function | () => {}) | Callback for when the sheet closes. |
-| width | Number / String | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a "max-width-xxx" via className to control it better. |
-| height | Number / String | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |
-| title | Node / String | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |
-| showCloseButton | Boolean | true | Defines whether or not the close button is shown. |
-| showMaximizeButton | Boolean | false | Defines whether or not the maximize button in the header is shown. |
-| onHeightChange | Function | () => {} | The callback function triggered when the maximize button is clicked and the height changes. |
-| detach | Boolean | false | Set to "true" to detach the bottom sheet from the left side and the bottom and create a little offset. |
-| detachOffset | Number | 15 | Defines the amount of pixels for the sheet. |
-| hasBackdrop | Boolean | false | Set to "true" to render a modal like backdrop to emphasize the bottom sheet. |
-| onBackdropClick | Function | () => {} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |
-| bodyRef | React Ref | — | A react ref added to the bottom sheet body. |
-| bodyClassName | String | — | Additional classes to be set on the body element. |
-| className | String | — | Additional classes to be set on the wrapping element. |
+| show | boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |
+| onClose | (isShown: boolean) => void | — | Callback for when the sheet closes. |
+| width | number \| string | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a max-width-xxx via className to control it better. |
+| height | number \| string | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |
+| title | string \| ReactNode | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |
+| showCloseButton | boolean | true | Defines whether or not the close button is shown. |
+| showMaximizeButton | boolean | false | Defines whether or not the maximize button in the header is shown. |
+| onHeightChange | VoidFunction | () => {} | The callback function triggered when the maximize button is clicked and the height changes. |
+| detach | boolean | false | Set to true to detach the bottom sheet from the left side and the bottom and create a little offset. |
+| detachOffset | number | 15 | Defines the amount of pixels for the sheet. |
+| hasBackdrop | boolean | false | Set to true to render a modal like backdrop to emphasize the bottom sheet. |
+| onBackdropClick | VoidFunction | () => {} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |
+| bodyRef | MutableRefObject<HTMLDivElement \| null> | — | A react ref added to the bottom sheet body. |
+| bodyClassName | string | — | Additional classes to be set on the body element. |
+| className | string | — | Additional classes to be set on the wrapping element. |
 
 ## TimedBottomSheet
 
@@ -543,7 +543,7 @@ export const FeedbackBottomSheet = ({ onClose }: { onClose: VoidFunction }) => {
         }, HIDE_AFTER_SUBMIT_IN_MS);
     };
 
-    const sendFeedback = (messageToSend: string, featureRating: number | undefined) => {
+    const sendFeedback = (messageToSend: string, _featureRating: number | undefined) => {
         console.log(`Sending email with message \n${messageToSend}`);
     };
 
@@ -707,15 +707,15 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| dismissed | Boolean | false | The "dismissed" flag can be used to tell this component that the user has clicked on the content of the component like a button or a link. In this case, the bottom sheet will store a flag in the localStorage to hide the bottom sheet for the next time and it will close the sheet right away. |
-| featureName | String | 0 | The "featureName" prop is used to name the localStorage flag that is used to control the visibility. It should be unique to avoid conflicts with other timed bottom sheets. |
-| localStoragePrefix | String | — | A prefix that will be used for the local storage flag to store whether the bottom sheet should be hidden. Use this prefix for your service name for instance. |
-| showAfter | Number | 0 | Defines the time in milliseconds when the bottom sheet shall be shown. Default value is 0 to show it right away. |
-| hideAfter | Number | 3_600_000 | Defines the time in milliseconds when the bottom sheet hides itself automatically. Default value is 3_600_000 to hide it after 1 hour. In this case, the localStorage flag is not set and the bottom sheet will be shown on the next page load. |
-| alwaysOn | Boolean | false | With this enabled, the BottomSheet will not hide automatically. |
-| showCloseButton | Boolean | true | Enables or disabled the close button. |
-| width | Number | — | Optional width of the bottom sheet. Alternatively, you can set a `max-width-xxx` via className instead. |
-| cleanupLocalStorage | Boolean | false | Flag to allow to remove the localStorage flag again once the component is not needed anymore. |
-| onClose | () => void | — | Callback function that gets triggered when the user closed the bottom sheet with the close button. |
-| bodyClassName | String | — | Optional className to be set on the body. |
-| className | String | — | Optional className to be set on the component. Use this to define a max-width value. |
+| dismissed | boolean | false | The dismissed flag can be used to tell this component that the user has clicked on the content of the component like a button or a link. In this case, the bottom sheet will store a flag in the localStorage to hide the bottom sheet for the next time and it will close the sheet right away. |
+| featureName | string | — | The featureName prop is used to name the localStorage flag that is used to control the visibility. It should be unique to avoid conflicts with other timed bottom sheets. |
+| showAfter | number | 0 | Defines the time in milliseconds when the bottom sheet shall be shown. Default value is 0 to show it right away. |
+| hideAfter | number | 3_600_000 | Defines the time in milliseconds when the bottom sheet hides itself automatically. Default value is 3_600_000 to hide it after 1 hour. In this case, the localStorage flag is not set and the bottom sheet will be shown on the next page load. |
+| alwaysOn | boolean | false | With this enabled, the BottomSheet will not hide automatically. |
+| showCloseButton | boolean | true | Enables or disabled the close button. |
+| width | number | — | Optional width of the bottom sheet. Alternatively, you can set a max-width-xxx via className instead. |
+| cleanupLocalStorage | boolean | false | Flag to allow to remove the localStorage flag again once the component is not needed anymore. |
+| localStoragePrefix | string | — | A prefix that will be used for the local storage flag to store whether the bottom sheet should be hidden. Use this prefix for your service name for instance. |
+| onClose | () => void | () => {} | Callback function that gets triggered when the user closed the bottom sheet with the close button. |
+| bodyClassName | string | 'padding-25 margin-right-25' | Optional className to be set on the body. |
+| className | string | — | Optional className to be set on the component. Use this to define a max-width value. |