@rio-cloud/uikit-mcp 1.1.10 → 1.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/dist/doc-metadata.json +90 -90
- package/dist/docs/components/accentBar.md +1 -1
- package/dist/docs/components/activity.md +1 -1
- package/dist/docs/components/analyticsAnalysisOverlay.md +3 -1
- package/dist/docs/components/animatedNumber.md +1 -1
- package/dist/docs/components/animatedTextReveal.md +6 -6
- package/dist/docs/components/animations.md +22 -22
- package/dist/docs/components/appHeader.md +1 -1
- package/dist/docs/components/appLayout.md +27 -77
- package/dist/docs/components/appNavigationBar.md +1 -1
- package/dist/docs/components/areaCharts.md +7 -5
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
- package/dist/docs/components/assetTree.md +418 -364
- package/dist/docs/components/autosuggests.md +1 -1
- package/dist/docs/components/avatar.md +1 -1
- package/dist/docs/components/banner.md +2 -2
- package/dist/docs/components/barCharts.md +4 -2
- package/dist/docs/components/barList.md +10 -10
- package/dist/docs/components/basicMap.md +45 -1
- package/dist/docs/components/bottomSheet.md +1 -1
- package/dist/docs/components/button.md +1 -1
- package/dist/docs/components/buttonToolbar.md +1 -1
- package/dist/docs/components/calendarStripe.md +39 -35
- package/dist/docs/components/card.md +1 -1
- package/dist/docs/components/carousel.md +1 -1
- package/dist/docs/components/chartColors.md +3 -1
- package/dist/docs/components/chartsGettingStarted.md +3 -1
- package/dist/docs/components/chat.md +2 -2
- package/dist/docs/components/checkbox.md +3 -1
- package/dist/docs/components/circularProgress.md +8 -8
- package/dist/docs/components/clearableInput.md +1 -1
- package/dist/docs/components/collapse.md +4 -2
- package/dist/docs/components/composedCharts.md +17 -15
- package/dist/docs/components/contentLoader.md +1 -1
- package/dist/docs/components/dataTabs.md +1 -1
- package/dist/docs/components/datepickers.md +30 -28
- package/dist/docs/components/dayPicker.md +52 -2
- package/dist/docs/components/dayPickerCalendar.md +44 -24
- package/dist/docs/components/dialogs.md +1 -1
- package/dist/docs/components/divider.md +1 -1
- package/dist/docs/components/dropdowns.md +3253 -3241
- package/dist/docs/components/editableContent.md +1 -1
- package/dist/docs/components/expander.md +1 -1
- package/dist/docs/components/fade.md +1 -1
- package/dist/docs/components/fadeExpander.md +1 -1
- package/dist/docs/components/fadeUp.md +2 -2
- package/dist/docs/components/feedback.md +1 -1
- package/dist/docs/components/filePickers.md +1 -1
- package/dist/docs/components/formLabel.md +1 -1
- package/dist/docs/components/groupedItemList.md +1 -1
- package/dist/docs/components/htmlTable.md +69 -69
- package/dist/docs/components/iconList.md +4 -4
- package/dist/docs/components/imagePreloader.md +1 -1
- package/dist/docs/components/labeledElement.md +1 -1
- package/dist/docs/components/licensePlate.md +1 -1
- package/dist/docs/components/lineCharts.md +5 -3
- package/dist/docs/components/listMenu.md +1 -1
- package/dist/docs/components/loadMore.md +1 -1
- package/dist/docs/components/mainNavigation.md +1 -1
- package/dist/docs/components/mapCircle.md +1 -1
- package/dist/docs/components/mapCluster.md +3 -1
- package/dist/docs/components/mapContext.md +1 -1
- package/dist/docs/components/mapDraggableMarker.md +1 -1
- package/dist/docs/components/mapGettingStarted.md +39 -1
- package/dist/docs/components/mapInfoBubble.md +1 -1
- package/dist/docs/components/mapLayerGroup.md +1 -1
- package/dist/docs/components/mapMarker.md +3 -1
- package/dist/docs/components/mapPolygon.md +1 -1
- package/dist/docs/components/mapRoute.md +1 -1
- package/dist/docs/components/mapSettings.md +6 -1
- package/dist/docs/components/mapUtils.md +1 -1
- package/dist/docs/components/mapViewportHistory.md +287 -0
- package/dist/docs/components/multiselects.md +7 -1
- package/dist/docs/components/noData.md +1 -1
- package/dist/docs/components/notifications.md +1 -1
- package/dist/docs/components/numbercontrol.md +1 -1
- package/dist/docs/components/onboarding.md +1 -1
- package/dist/docs/components/page.md +1 -1
- package/dist/docs/components/pager.md +1 -1
- package/dist/docs/components/pieCharts.md +38 -36
- package/dist/docs/components/popover.md +1 -1
- package/dist/docs/components/position.md +1 -1
- package/dist/docs/components/radialBarCharts.md +27 -25
- package/dist/docs/components/radioCardGroup.md +1 -1
- package/dist/docs/components/radiobutton.md +3 -1
- package/dist/docs/components/releaseNotes.md +1 -1
- package/dist/docs/components/resizer.md +3 -1
- package/dist/docs/components/responsiveColumnStripe.md +3 -1
- package/dist/docs/components/responsiveVideo.md +1 -1
- package/dist/docs/components/rioglyph.md +1 -1
- package/dist/docs/components/rules.md +1 -1
- package/dist/docs/components/saveableInput.md +17 -17
- package/dist/docs/components/selects.md +168 -51
- package/dist/docs/components/sidebar.md +1 -1
- package/dist/docs/components/sliders.md +1 -1
- package/dist/docs/components/smoothScrollbars.md +3 -1
- package/dist/docs/components/spinners.md +1 -1
- package/dist/docs/components/states.md +15 -1
- package/dist/docs/components/statsWidgets.md +1 -1
- package/dist/docs/components/statusBar.md +3 -1
- package/dist/docs/components/stepButton.md +1 -1
- package/dist/docs/components/steppedProgressBars.md +1 -1
- package/dist/docs/components/subNavigation.md +1 -1
- package/dist/docs/components/supportMarker.md +1 -1
- package/dist/docs/components/svgImage.md +1 -1
- package/dist/docs/components/switch.md +3 -1
- package/dist/docs/components/table.md +1998 -221
- package/dist/docs/components/tableControls.md +5 -5
- package/dist/docs/components/tagManager.md +1 -1
- package/dist/docs/components/tags.md +1 -1
- package/dist/docs/components/teaser.md +3 -1
- package/dist/docs/components/textTruncateMiddle.md +1 -1
- package/dist/docs/components/timeline.md +1 -1
- package/dist/docs/components/timepicker.md +3 -1
- package/dist/docs/components/toggleButton.md +1 -1
- package/dist/docs/components/tooltip.md +5 -1
- package/dist/docs/components/tracker.md +1 -1
- package/dist/docs/components/virtualList.md +57 -57
- package/dist/docs/foundations.md +276 -110
- package/dist/docs/start/changelog.md +21 -1
- package/dist/docs/start/goodtoknow.md +8 -2
- package/dist/docs/start/guidelines/color-combinations.md +5 -1
- package/dist/docs/start/guidelines/custom-css.md +26 -2
- package/dist/docs/start/guidelines/custom-rioglyph.md +20 -2
- package/dist/docs/start/guidelines/formatting.md +2256 -249
- package/dist/docs/start/guidelines/iframe.md +37 -1
- package/dist/docs/start/guidelines/obfuscate-data.md +26 -2
- package/dist/docs/start/guidelines/print-css.md +16 -2
- package/dist/docs/start/guidelines/spinner.md +1 -1
- package/dist/docs/start/guidelines/state-in-url.md +1138 -11
- package/dist/docs/start/guidelines/supported-browsers.md +9 -2
- package/dist/docs/start/guidelines/writing.md +228 -2
- package/dist/docs/start/howto.md +160 -10
- package/dist/docs/start/intro.md +40 -2
- package/dist/docs/start/responsiveness.md +29 -1
- package/dist/docs/templates/ai-assistant.md +1 -1
- package/dist/docs/templates/common-table.md +9 -9
- package/dist/docs/templates/detail-views.md +2 -2
- package/dist/docs/templates/expandable-details.md +1 -1
- package/dist/docs/templates/feature-cards.md +37 -37
- package/dist/docs/templates/form-summary.md +15 -15
- package/dist/docs/templates/form-toggle.md +1 -1
- package/dist/docs/templates/list-blocks.md +135 -135
- package/dist/docs/templates/loading-progress.md +1 -1
- package/dist/docs/templates/options-panel.md +1 -1
- package/dist/docs/templates/panel-variants.md +1 -1
- package/dist/docs/templates/progress-cards.md +1 -1
- package/dist/docs/templates/progress-success.md +1 -1
- package/dist/docs/templates/settings-form.md +18 -18
- package/dist/docs/templates/stats-blocks.md +12 -12
- package/dist/docs/templates/table-panel.md +1 -1
- package/dist/docs/templates/usage-cards.md +1 -1
- package/dist/docs/utilities/classNames.md +89 -1
- package/dist/docs/utilities/deviceUtils.md +1 -1
- package/dist/docs/utilities/featureToggles.md +182 -2
- package/dist/docs/utilities/fuelTypeUtils.md +1 -1
- package/dist/docs/utilities/getTrackingAttributes.md +46 -1
- package/dist/docs/utilities/routeUtils.md +210 -2
- package/dist/docs/utilities/useAfterMount.md +1 -1
- package/dist/docs/utilities/useAutoAnimate.md +1 -1
- package/dist/docs/utilities/useAverage.md +1 -1
- package/dist/docs/utilities/useClickOutside.md +1 -1
- package/dist/docs/utilities/useClipboard.md +2 -2
- package/dist/docs/utilities/useCookies.md +1 -1
- package/dist/docs/utilities/useCount.md +1 -1
- package/dist/docs/utilities/useDarkMode.md +1 -1
- package/dist/docs/utilities/useDebugInfo.md +3 -3
- package/dist/docs/utilities/useDraggableElement.md +1 -1
- package/dist/docs/utilities/useEffectOnce.md +1 -1
- package/dist/docs/utilities/useElapsedTime.md +1 -1
- package/dist/docs/utilities/useElementSize.md +1 -1
- package/dist/docs/utilities/useEsc.md +1 -1
- package/dist/docs/utilities/useEvent.md +1 -1
- package/dist/docs/utilities/useFocusTrap.md +1 -1
- package/dist/docs/utilities/useFullscreen.md +1 -1
- package/dist/docs/utilities/useHover.md +1 -1
- package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
- package/dist/docs/utilities/useInterval.md +1 -1
- package/dist/docs/utilities/useIsFocusWithin.md +1 -1
- package/dist/docs/utilities/useKey.md +1 -1
- package/dist/docs/utilities/useLocalStorage.md +1 -1
- package/dist/docs/utilities/useLocationSuggestions.md +1 -1
- package/dist/docs/utilities/useMax.md +1 -1
- package/dist/docs/utilities/useMin.md +1 -1
- package/dist/docs/utilities/useMutationObserver.md +1 -1
- package/dist/docs/utilities/useOnScreen.md +1 -1
- package/dist/docs/utilities/useOnlineStatus.md +1 -1
- package/dist/docs/utilities/usePostMessage.md +1 -1
- package/dist/docs/utilities/usePostMessageSender.md +1 -1
- package/dist/docs/utilities/usePrevious.md +111 -1
- package/dist/docs/utilities/useResizeObserver.md +1 -1
- package/dist/docs/utilities/useRioCookieConsent.md +1 -1
- package/dist/docs/utilities/useScrollPosition.md +1 -1
- package/dist/docs/utilities/useSearch.md +1 -1
- package/dist/docs/utilities/useSearchHighlight.md +1 -1
- package/dist/docs/utilities/useSorting.md +1 -1
- package/dist/docs/utilities/useStateWithValidation.md +1 -1
- package/dist/docs/utilities/useSum.md +1 -1
- package/dist/docs/utilities/useTableExport.md +61 -61
- package/dist/docs/utilities/useTableSelection.md +72 -72
- package/dist/docs/utilities/useTimeout.md +1 -1
- package/dist/docs/utilities/useToggle.md +1 -1
- package/dist/docs/utilities/useUrlState.md +1 -1
- package/dist/docs/utilities/useWindowResize.md +1 -1
- package/dist/index.mjs +173 -69
- package/dist/search-synonyms.json +214 -76
- package/dist/version.json +2 -2
- package/package.json +4 -5
- package/dist/docs/components/mapRouteGenerator.md +0 -6
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Table
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/tableControls
|
|
6
|
-
*Captured:* 2026-04-
|
|
6
|
+
*Captured:* 2026-04-27T14:58:10.712Z
|
|
7
7
|
|
|
8
8
|
The toolbar and its content has to be implemented by each team itself. Please use the sample as a reference and adapt it accordingly.
|
|
9
9
|
|
|
@@ -146,7 +146,7 @@ export default TableToolbarDemo;
|
|
|
146
146
|
</tr>
|
|
147
147
|
<tr>
|
|
148
148
|
<td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
|
|
149
|
-
<td data-value="20" data-month="3" data-year="2026" class="rdtDay
|
|
149
|
+
<td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
|
|
150
150
|
<td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
|
|
151
151
|
<td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
|
|
152
152
|
<td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
|
|
@@ -155,7 +155,7 @@ export default TableToolbarDemo;
|
|
|
155
155
|
</tr>
|
|
156
156
|
<tr>
|
|
157
157
|
<td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
|
|
158
|
-
<td data-value="27" data-month="3" data-year="2026" class="rdtDay">27</td>
|
|
158
|
+
<td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
|
|
159
159
|
<td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
|
|
160
160
|
<td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
|
|
161
161
|
<td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
|
|
@@ -943,7 +943,7 @@ export default TableRowActionsDropdownDemo;
|
|
|
943
943
|
<div class="table-cell table-align-right table-vertical-align-middle padding-10" data-column="actions" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
|
|
944
944
|
<div class="table-cell-content overflow-hidden">
|
|
945
945
|
<div class="dropdown btn-group">
|
|
946
|
-
<button type="button" aria-label="Row actions" id="
|
|
946
|
+
<button type="button" aria-label="Row actions" id="s4gw9xkqb2" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
|
|
947
947
|
<span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
|
|
948
948
|
</span>
|
|
949
949
|
</button>
|
|
@@ -961,7 +961,7 @@ export default TableRowActionsDropdownDemo;
|
|
|
961
961
|
<div class="table-cell table-align-right table-vertical-align-middle padding-10" data-column="actions" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
|
|
962
962
|
<div class="table-cell-content overflow-hidden">
|
|
963
963
|
<div class="dropdown btn-group">
|
|
964
|
-
<button type="button" aria-label="Delivery run actions" id="
|
|
964
|
+
<button type="button" aria-label="Delivery run actions" id="b11cq37jd6f" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
|
|
965
965
|
<span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
|
|
966
966
|
</span>
|
|
967
967
|
</button>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/tagManager
|
|
6
|
-
*Captured:* 2026-04-
|
|
6
|
+
*Captured:* 2026-04-27T14:58:35.193Z
|
|
7
7
|
|
|
8
8
|
The TagManager allows to select and filter for existing tags as well as adding and removing them from a list of tags.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/teaser
|
|
6
|
-
*Captured:* 2026-04-
|
|
6
|
+
*Captured:* 2026-04-27T14:58:05.325Z
|
|
7
7
|
|
|
8
8
|
The teaser component was built to create all kinds of landing and/or single pages. for example, be used in dialogs or sidebars.
|
|
9
9
|
|
|
@@ -11,6 +11,8 @@ The teaser component was built to create all kinds of landing and/or single page
|
|
|
11
11
|
|
|
12
12
|
The demo page should only provide an insight into the combination possibilities.
|
|
13
13
|
|
|
14
|
+
> Note: Because of larger screens a wrapping container-fluid fluid-default should be added if you are not using the component within smaller container.
|
|
15
|
+
|
|
14
16
|
### Example: Example 1
|
|
15
17
|
|
|
16
18
|
Box headline
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/textTruncateMiddle
|
|
6
|
-
*Captured:* 2026-04-
|
|
6
|
+
*Captured:* 2026-04-27T14:58:06.887Z
|
|
7
7
|
|
|
8
8
|
TextTruncateMiddle truncates long text in the middle and keeps the end segment visible.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Pickers
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/timepicker
|
|
6
|
-
*Captured:* 2026-04-
|
|
6
|
+
*Captured:* 2026-04-27T14:57:45.238Z
|
|
7
7
|
|
|
8
8
|
## TimePicker
|
|
9
9
|
|
|
@@ -368,6 +368,8 @@ export default () => {
|
|
|
368
368
|
|
|
369
369
|
## TimePicker with dropdown
|
|
370
370
|
|
|
371
|
+
Shows a dropdown for faster time selection. Use minuteOffset to control the interval between dropdown values.
|
|
372
|
+
|
|
371
373
|
### Example: Example 4
|
|
372
374
|
|
|
373
375
|
Controlled component with dropdown
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Interaction
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/toggleButton
|
|
6
|
-
*Captured:* 2026-04-
|
|
6
|
+
*Captured:* 2026-04-27T14:57:26.112Z
|
|
7
7
|
|
|
8
8
|
This toggle button is based on the button component that can be used directly.
|
|
9
9
|
|
|
@@ -3,12 +3,14 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/tooltip
|
|
6
|
-
*Captured:* 2026-04-
|
|
6
|
+
*Captured:* 2026-04-27T14:58:35.893Z
|
|
7
7
|
|
|
8
8
|
In order to use a Tooltip on an element, wrap it with the OverlayTrigger component or use the SimpleTooltip component.
|
|
9
9
|
|
|
10
10
|
## Tooltips
|
|
11
11
|
|
|
12
|
+
> Note
|
|
13
|
+
|
|
12
14
|
By default Tooltips are not rendered on touch devices. This might lead to issues for test environments where the check for mobile evaluate to true simply because the required class name is not set on the document element.
|
|
13
15
|
|
|
14
16
|
To fix that, simply set the class in your test as follows:document.documentElement.classList.add('ua-desktop');
|
|
@@ -313,6 +315,8 @@ popperConfig={{
|
|
|
313
315
|
|
|
314
316
|
## SimpleTooltip
|
|
315
317
|
|
|
318
|
+
This component is for convenience and wraps the OverlayTrigger and the Tooltip itself.
|
|
319
|
+
|
|
316
320
|
### Example: Example 2
|
|
317
321
|
|
|
318
322
|
Simple tooltip with auto placement: Hover me Simple tooltip with bottom placement: Hover me
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Progress
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/tracker
|
|
6
|
-
*Captured:* 2026-04-
|
|
6
|
+
*Captured:* 2026-04-27T14:57:49.074Z
|
|
7
7
|
|
|
8
8
|
Compact visual tracker component for status indicators with optional per-block color and tooltip support.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/components/virtualList
|
|
6
|
-
*Captured:* 2026-04-
|
|
6
|
+
*Captured:* 2026-04-27T14:58:08.977Z
|
|
7
7
|
|
|
8
8
|
The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.
|
|
9
9
|
|
|
@@ -14,34 +14,35 @@ It allows a specified number of items outside the viewport for smoother scrollin
|
|
|
14
14
|
### Example: Example 1
|
|
15
15
|
|
|
16
16
|
Virtual list with 100 items Item 1
|
|
17
|
-
|
|
17
|
+
In, In pharetra ante elementum ac nunc in Duis
|
|
18
18
|
|
|
19
19
|
Item 2
|
|
20
|
-
|
|
20
|
+
Efficitur efficitur elit. molestie faucibus. in, tortor volutpat Duis tincidunt. ante purus
|
|
21
21
|
|
|
22
22
|
Item 3
|
|
23
|
-
|
|
23
|
+
Libero fringilla ut ligula dolor ligula sit Vivamus semper posuere est quis, viverra in,
|
|
24
24
|
|
|
25
25
|
Item 4
|
|
26
|
-
|
|
26
|
+
Consectetur pharetra nunc efficitur volutpat
|
|
27
27
|
|
|
28
28
|
Item 5
|
|
29
|
-
|
|
29
|
+
In nec dui aliquam adipiscing metus
|
|
30
30
|
|
|
31
31
|
Item 6
|
|
32
|
-
|
|
32
|
+
Elit. eget ac quis, semper. sem.
|
|
33
33
|
|
|
34
34
|
Item 7
|
|
35
|
-
|
|
35
|
+
Ut finibus hendrerit aliquam amet, consectetur
|
|
36
36
|
|
|
37
37
|
Item 8
|
|
38
|
-
|
|
38
|
+
Primis ac et scelerisque aliquam Sed pharetra fames consectetur lorem in
|
|
39
|
+
Lorem velit. nunc
|
|
39
40
|
|
|
40
41
|
Item 9
|
|
41
|
-
|
|
42
|
+
Duis pretium orci, consectetur condimentum sit ante in posuere vel purus ante primis sem. nunc
|
|
42
43
|
|
|
43
44
|
Item 10
|
|
44
|
-
|
|
45
|
+
Efficitur purus pharetra faucibus. primis purus
|
|
45
46
|
|
|
46
47
|
#### React (tsx)
|
|
47
48
|
|
|
@@ -94,61 +95,62 @@ export default () => {
|
|
|
94
95
|
<div class="VirtualListItemWrapper " data-index="0" style="position: absolute; transform: translateY(0px); width: 100%; will-change: transform;">
|
|
95
96
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
96
97
|
<div class="text-medium" data-test-ignore="text">Item 1</div>
|
|
97
|
-
<div class="word-break" data-test-ignore="text">
|
|
98
|
+
<div class="word-break" data-test-ignore="text">In, In pharetra ante elementum ac nunc in Duis</div>
|
|
98
99
|
</div>
|
|
99
100
|
</div>
|
|
100
|
-
<div class="VirtualListItemWrapper " data-index="1" style="position: absolute; transform: translateY(
|
|
101
|
+
<div class="VirtualListItemWrapper " data-index="1" style="position: absolute; transform: translateY(70px); width: 100%; will-change: transform;">
|
|
101
102
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
102
103
|
<div class="text-medium" data-test-ignore="text">Item 2</div>
|
|
103
|
-
<div class="word-break" data-test-ignore="text">
|
|
104
|
+
<div class="word-break" data-test-ignore="text">Efficitur efficitur elit. molestie faucibus. in, tortor volutpat Duis tincidunt. ante purus</div>
|
|
104
105
|
</div>
|
|
105
106
|
</div>
|
|
106
|
-
<div class="VirtualListItemWrapper " data-index="2" style="position: absolute; transform: translateY(
|
|
107
|
+
<div class="VirtualListItemWrapper " data-index="2" style="position: absolute; transform: translateY(140px); width: 100%; will-change: transform;">
|
|
107
108
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
108
109
|
<div class="text-medium" data-test-ignore="text">Item 3</div>
|
|
109
|
-
<div class="word-break" data-test-ignore="text">
|
|
110
|
+
<div class="word-break" data-test-ignore="text">Libero fringilla ut ligula dolor ligula sit Vivamus semper posuere est quis, viverra in,</div>
|
|
110
111
|
</div>
|
|
111
112
|
</div>
|
|
112
|
-
<div class="VirtualListItemWrapper " data-index="3" style="position: absolute; transform: translateY(
|
|
113
|
+
<div class="VirtualListItemWrapper " data-index="3" style="position: absolute; transform: translateY(210px); width: 100%; will-change: transform;">
|
|
113
114
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
114
115
|
<div class="text-medium" data-test-ignore="text">Item 4</div>
|
|
115
|
-
<div class="word-break" data-test-ignore="text">
|
|
116
|
+
<div class="word-break" data-test-ignore="text">Consectetur pharetra nunc efficitur volutpat</div>
|
|
116
117
|
</div>
|
|
117
118
|
</div>
|
|
118
|
-
<div class="VirtualListItemWrapper " data-index="4" style="position: absolute; transform: translateY(
|
|
119
|
+
<div class="VirtualListItemWrapper " data-index="4" style="position: absolute; transform: translateY(280px); width: 100%; will-change: transform;">
|
|
119
120
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
120
121
|
<div class="text-medium" data-test-ignore="text">Item 5</div>
|
|
121
|
-
<div class="word-break" data-test-ignore="text">
|
|
122
|
+
<div class="word-break" data-test-ignore="text">In nec dui aliquam adipiscing metus</div>
|
|
122
123
|
</div>
|
|
123
124
|
</div>
|
|
124
|
-
<div class="VirtualListItemWrapper " data-index="5" style="position: absolute; transform: translateY(
|
|
125
|
+
<div class="VirtualListItemWrapper " data-index="5" style="position: absolute; transform: translateY(350px); width: 100%; will-change: transform;">
|
|
125
126
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
126
127
|
<div class="text-medium" data-test-ignore="text">Item 6</div>
|
|
127
|
-
<div class="word-break" data-test-ignore="text">
|
|
128
|
+
<div class="word-break" data-test-ignore="text">Elit. eget ac quis, semper. sem.</div>
|
|
128
129
|
</div>
|
|
129
130
|
</div>
|
|
130
|
-
<div class="VirtualListItemWrapper " data-index="6" style="position: absolute; transform: translateY(
|
|
131
|
+
<div class="VirtualListItemWrapper " data-index="6" style="position: absolute; transform: translateY(420px); width: 100%; will-change: transform;">
|
|
131
132
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
132
133
|
<div class="text-medium" data-test-ignore="text">Item 7</div>
|
|
133
|
-
<div class="word-break" data-test-ignore="text">
|
|
134
|
+
<div class="word-break" data-test-ignore="text">Ut finibus hendrerit aliquam amet, consectetur</div>
|
|
134
135
|
</div>
|
|
135
136
|
</div>
|
|
136
|
-
<div class="VirtualListItemWrapper " data-index="7" style="position: absolute; transform: translateY(
|
|
137
|
+
<div class="VirtualListItemWrapper " data-index="7" style="position: absolute; transform: translateY(490px); width: 100%; will-change: transform;">
|
|
137
138
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
138
139
|
<div class="text-medium" data-test-ignore="text">Item 8</div>
|
|
139
|
-
<div class="word-break" data-test-ignore="text">
|
|
140
|
+
<div class="word-break" data-test-ignore="text">Primis ac et scelerisque aliquam Sed pharetra fames consectetur lorem in
|
|
141
|
+
Lorem velit. nunc</div>
|
|
140
142
|
</div>
|
|
141
143
|
</div>
|
|
142
|
-
<div class="VirtualListItemWrapper " data-index="8" style="position: absolute; transform: translateY(
|
|
144
|
+
<div class="VirtualListItemWrapper " data-index="8" style="position: absolute; transform: translateY(560px); width: 100%; will-change: transform;">
|
|
143
145
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
144
146
|
<div class="text-medium" data-test-ignore="text">Item 9</div>
|
|
145
|
-
<div class="word-break" data-test-ignore="text">
|
|
147
|
+
<div class="word-break" data-test-ignore="text">Duis pretium orci, consectetur condimentum sit ante in posuere vel purus ante primis sem. nunc</div>
|
|
146
148
|
</div>
|
|
147
149
|
</div>
|
|
148
150
|
<div class="VirtualListItemWrapper " data-index="9" style="position: absolute; transform: translateY(650px); width: 100%; will-change: transform;">
|
|
149
151
|
<div class="margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker">
|
|
150
152
|
<div class="text-medium" data-test-ignore="text">Item 10</div>
|
|
151
|
-
<div class="word-break" data-test-ignore="text">
|
|
153
|
+
<div class="word-break" data-test-ignore="text">Efficitur purus pharetra faucibus. primis purus</div>
|
|
152
154
|
</div>
|
|
153
155
|
</div>
|
|
154
156
|
</div>
|
|
@@ -174,35 +176,34 @@ export default () => {
|
|
|
174
176
|
|
|
175
177
|
Virtual list with 5000 items
|
|
176
178
|
Vehicle 1
|
|
177
|
-
|
|
179
|
+
Felis. dolor et libero Vivamus massa, efficitur consectetur consectetur efficitur ligula elit. Interdum
|
|
178
180
|
|
|
179
181
|
Vehicle 2
|
|
180
|
-
|
|
182
|
+
Primis eget amet, est ante ante lorem bibendum, semper sem. elementum
|
|
181
183
|
|
|
182
184
|
Vehicle 3
|
|
183
|
-
|
|
185
|
+
Adipiscing tincidunt. est Vivamus eget nec
|
|
184
186
|
|
|
185
187
|
Vehicle 4
|
|
186
|
-
|
|
188
|
+
Et neque. metus ac efficitur hendrerit
|
|
187
189
|
|
|
188
190
|
Vehicle 5
|
|
189
|
-
|
|
190
|
-
Lorem massa
|
|
191
|
+
Neque. Mauris malesuada tincidunt. Mauris condimentum
|
|
191
192
|
|
|
192
193
|
Vehicle 6
|
|
193
|
-
|
|
194
|
+
Ut massa ante ante nunc ipsum et
|
|
194
195
|
|
|
195
196
|
Vehicle 7
|
|
196
|
-
|
|
197
|
+
Sed primis eget ligula in, purus vitae in orci pharetra
|
|
197
198
|
|
|
198
199
|
Vehicle 8
|
|
199
|
-
|
|
200
|
+
Adipiscing et rutrum neque. fringilla
|
|
200
201
|
|
|
201
202
|
Vehicle 9
|
|
202
|
-
|
|
203
|
+
Condimentum efficitur Mauris in dui faucibus. rutrum
|
|
203
204
|
|
|
204
205
|
Vehicle 10
|
|
205
|
-
|
|
206
|
+
Viverra massa, ante felis. Sed ut ligula volutpat
|
|
206
207
|
|
|
207
208
|
#### React (tsx)
|
|
208
209
|
|
|
@@ -272,7 +273,7 @@ export default () => {
|
|
|
272
273
|
<div class="padding-20">
|
|
273
274
|
<label>Virtual list with 5000 items</label>
|
|
274
275
|
<div class="max-width-600 max-height-400 overflow-y-auto">
|
|
275
|
-
<div class="VirtualList overflow-y-auto border rounded" style="height:
|
|
276
|
+
<div class="VirtualList overflow-y-auto border rounded" style="height: 360000px; position: relative; overflow: visible;">
|
|
276
277
|
<div class="position-relative" style="height: auto;">
|
|
277
278
|
<div class="VirtualListItemContainer list-group">
|
|
278
279
|
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="0" style="position: absolute; transform: translateY(0px); width: 100%; will-change: transform;">
|
|
@@ -283,11 +284,11 @@ export default () => {
|
|
|
283
284
|
</div>
|
|
284
285
|
<div>
|
|
285
286
|
<div class="text-medium" data-test-ignore="text">Vehicle 1</div>
|
|
286
|
-
<div class="word-break" data-test-ignore="text">
|
|
287
|
+
<div class="word-break" data-test-ignore="text">Felis. dolor et libero Vivamus massa, efficitur consectetur consectetur efficitur ligula elit. Interdum</div>
|
|
287
288
|
</div>
|
|
288
289
|
</div>
|
|
289
290
|
</div>
|
|
290
|
-
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="1" style="position: absolute; transform: translateY(
|
|
291
|
+
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="1" style="position: absolute; transform: translateY(89px); width: 100%; will-change: transform;">
|
|
291
292
|
<div class="display-flex gap-15 align-items-center">
|
|
292
293
|
<div class="Avatar bg-lightest" style="height: 40px;">
|
|
293
294
|
<span class="Avatar-icon rioglyph rioglyph-truck ">
|
|
@@ -295,11 +296,11 @@ export default () => {
|
|
|
295
296
|
</div>
|
|
296
297
|
<div>
|
|
297
298
|
<div class="text-medium" data-test-ignore="text">Vehicle 2</div>
|
|
298
|
-
<div class="word-break" data-test-ignore="text">
|
|
299
|
+
<div class="word-break" data-test-ignore="text">Primis eget amet, est ante ante lorem bibendum, semper sem. elementum</div>
|
|
299
300
|
</div>
|
|
300
301
|
</div>
|
|
301
302
|
</div>
|
|
302
|
-
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="2" style="position: absolute; transform: translateY(
|
|
303
|
+
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="2" style="position: absolute; transform: translateY(159px); width: 100%; will-change: transform;">
|
|
303
304
|
<div class="display-flex gap-15 align-items-center">
|
|
304
305
|
<div class="Avatar bg-lightest" style="height: 40px;">
|
|
305
306
|
<span class="Avatar-icon rioglyph rioglyph-truck ">
|
|
@@ -307,7 +308,7 @@ export default () => {
|
|
|
307
308
|
</div>
|
|
308
309
|
<div>
|
|
309
310
|
<div class="text-medium" data-test-ignore="text">Vehicle 3</div>
|
|
310
|
-
<div class="word-break" data-test-ignore="text">
|
|
311
|
+
<div class="word-break" data-test-ignore="text">Adipiscing tincidunt. est Vivamus eget nec</div>
|
|
311
312
|
</div>
|
|
312
313
|
</div>
|
|
313
314
|
</div>
|
|
@@ -319,7 +320,7 @@ export default () => {
|
|
|
319
320
|
</div>
|
|
320
321
|
<div>
|
|
321
322
|
<div class="text-medium" data-test-ignore="text">Vehicle 4</div>
|
|
322
|
-
<div class="word-break" data-test-ignore="text">
|
|
323
|
+
<div class="word-break" data-test-ignore="text">Et neque. metus ac efficitur hendrerit</div>
|
|
323
324
|
</div>
|
|
324
325
|
</div>
|
|
325
326
|
</div>
|
|
@@ -331,8 +332,7 @@ export default () => {
|
|
|
331
332
|
</div>
|
|
332
333
|
<div>
|
|
333
334
|
<div class="text-medium" data-test-ignore="text">Vehicle 5</div>
|
|
334
|
-
<div class="word-break" data-test-ignore="text">
|
|
335
|
-
Lorem massa</div>
|
|
335
|
+
<div class="word-break" data-test-ignore="text">Neque. Mauris malesuada tincidunt. Mauris condimentum</div>
|
|
336
336
|
</div>
|
|
337
337
|
</div>
|
|
338
338
|
</div>
|
|
@@ -344,7 +344,7 @@ export default () => {
|
|
|
344
344
|
</div>
|
|
345
345
|
<div>
|
|
346
346
|
<div class="text-medium" data-test-ignore="text">Vehicle 6</div>
|
|
347
|
-
<div class="word-break" data-test-ignore="text">
|
|
347
|
+
<div class="word-break" data-test-ignore="text">Ut massa ante ante nunc ipsum et</div>
|
|
348
348
|
</div>
|
|
349
349
|
</div>
|
|
350
350
|
</div>
|
|
@@ -356,11 +356,11 @@ export default () => {
|
|
|
356
356
|
</div>
|
|
357
357
|
<div>
|
|
358
358
|
<div class="text-medium" data-test-ignore="text">Vehicle 7</div>
|
|
359
|
-
<div class="word-break" data-test-ignore="text">
|
|
359
|
+
<div class="word-break" data-test-ignore="text">Sed primis eget ligula in, purus vitae in orci pharetra</div>
|
|
360
360
|
</div>
|
|
361
361
|
</div>
|
|
362
362
|
</div>
|
|
363
|
-
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="7" style="position: absolute; transform: translateY(
|
|
363
|
+
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="7" style="position: absolute; transform: translateY(509px); width: 100%; will-change: transform;">
|
|
364
364
|
<div class="display-flex gap-15 align-items-center">
|
|
365
365
|
<div class="Avatar bg-lightest" style="height: 40px;">
|
|
366
366
|
<span class="Avatar-icon rioglyph rioglyph-truck ">
|
|
@@ -368,11 +368,11 @@ export default () => {
|
|
|
368
368
|
</div>
|
|
369
369
|
<div>
|
|
370
370
|
<div class="text-medium" data-test-ignore="text">Vehicle 8</div>
|
|
371
|
-
<div class="word-break" data-test-ignore="text">
|
|
371
|
+
<div class="word-break" data-test-ignore="text">Adipiscing et rutrum neque. fringilla</div>
|
|
372
372
|
</div>
|
|
373
373
|
</div>
|
|
374
374
|
</div>
|
|
375
|
-
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="8" style="position: absolute; transform: translateY(
|
|
375
|
+
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="8" style="position: absolute; transform: translateY(579px); width: 100%; will-change: transform;">
|
|
376
376
|
<div class="display-flex gap-15 align-items-center">
|
|
377
377
|
<div class="Avatar bg-lightest" style="height: 40px;">
|
|
378
378
|
<span class="Avatar-icon rioglyph rioglyph-truck ">
|
|
@@ -380,11 +380,11 @@ export default () => {
|
|
|
380
380
|
</div>
|
|
381
381
|
<div>
|
|
382
382
|
<div class="text-medium" data-test-ignore="text">Vehicle 9</div>
|
|
383
|
-
<div class="word-break" data-test-ignore="text">
|
|
383
|
+
<div class="word-break" data-test-ignore="text">Condimentum efficitur Mauris in dui faucibus. rutrum</div>
|
|
384
384
|
</div>
|
|
385
385
|
</div>
|
|
386
386
|
</div>
|
|
387
|
-
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="9" style="position: absolute; transform: translateY(
|
|
387
|
+
<div class="VirtualListItemWrapper list-group-item padding-y-15" data-index="9" style="position: absolute; transform: translateY(649px); width: 100%; will-change: transform;">
|
|
388
388
|
<div class="display-flex gap-15 align-items-center">
|
|
389
389
|
<div class="Avatar bg-lightest" style="height: 40px;">
|
|
390
390
|
<span class="Avatar-icon rioglyph rioglyph-truck ">
|
|
@@ -392,7 +392,7 @@ export default () => {
|
|
|
392
392
|
</div>
|
|
393
393
|
<div>
|
|
394
394
|
<div class="text-medium" data-test-ignore="text">Vehicle 10</div>
|
|
395
|
-
<div class="word-break" data-test-ignore="text">
|
|
395
|
+
<div class="word-break" data-test-ignore="text">Viverra massa, ante felis. Sed ut ligula volutpat</div>
|
|
396
396
|
</div>
|
|
397
397
|
</div>
|
|
398
398
|
</div>
|