@balena/ui-shared-components 9.7.7 → 9.7.8

package/dist/components/VirtualizedAutocomplete/index.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { color } from '@balena/design-tokens';
-import { Autocomplete, Box, ListItemButton } from '@mui/material';
+import { Autocomplete, Box, ListItemButton, Stack } from '@mui/material';
 import throttle from 'lodash/throttle';
 import * as React from 'react';
 import { VList } from 'virtua';
@@ -11,6 +11,7 @@ const ListboxComponent = (_a) => {
     const itemData = children.slice();
     const { itemCount, loadNextPage } = pagination;
     const [optionHeightsTotal, setOptionHeightsTotal] = React.useState(0);
+    const ref = React.useRef(null);
     React.useEffect(() => {
         if (!isNextPageLoading) {
             setOptionHeightsTotal(0);
@@ -26,14 +27,17 @@ const ListboxComponent = (_a) => {
             setOptionHeightsTotal(total);
         }
     }, [optionHeightsTotal]);
-    return (_jsxs(Box, Object.assign({}, props, { style: Object.assign(Object.assign({}, style), { padding: 0, height: document.documentElement.clientHeight * 0.4 < optionHeightsTotal
+    return (_jsxs(Stack, Object.assign({}, props, { style: Object.assign(Object.assign({}, style), { padding: 0, height: document.documentElement.clientHeight * 0.4 < optionHeightsTotal
                 ? '40vh'
-                : optionHeightsTotal, display: 'flex', flexDirection: 'column' }), children: [_jsx(VList, { style: {
+                : optionHeightsTotal }), children: [_jsx(VList, { ref: ref, style: {
                     flex: 1,
-                }, onRangeChange: async (_, lastItemIndex) => {
+                }, onScroll: async () => {
+                    if (!ref.current) {
+                        return;
+                    }
                     if (itemCount != null &&
-                        lastItemIndex + 1 === itemData.length &&
-                        lastItemIndex + 1 < itemCount) {
+                        itemData.length < itemCount &&
+                        ref.current.findEndIndex() + 50 > itemCount) {
                         await (loadNextPage === null || loadNextPage === void 0 ? void 0 : loadNextPage());
                     }
                 }, children: itemData.map((item, i) => (_createElement(Box, Object.assign({ component: ListItemButton }, item.props, (i < itemData.length - 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "9.7.7",
+  "version": "9.7.8",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -40,7 +40,7 @@
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.0",
     "typescript": "^5.5.2",
-    "virtua": "^0.36.0",
+    "virtua": "^0.37.3",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
@@ -114,6 +114,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2024-11-20T12:14:17.194Z"
+    "publishedAt": "2024-11-20T15:03:20.202Z"
   }
 }