feat: pass current scroll position to hosting app. set initial scroll position (#837)

apis/nucleus/src/components/listbox/ListBox.jsx

@@ -69,6 +69,8 @@ export default function ListBox({
   dense = false,
   keyboard = {},
   showGray = true,
+  scrollState,
+  sortByState,
   selectDisabled = () => false,
 }) {
   const [layout] = useLayout(model);
@@ -164,8 +166,8 @@ export default function ListBox({
     local.current.validPages = false;
     if (loaderRef.current) {
       loaderRef.current.resetloadMoreItemsCache(true);
-      // Skip scrollToItem if we are in selections
-      if (layout && layout.qSelectionInfo.qInSelections) {
+      // Skip scrollToItem if we are in selections, or if we dont sort by state.
+      if ((layout && layout.qSelectionInfo.qInSelections) || sortByState === 0) {
         return;
       }
       loaderRef.current._listRef.scrollToItem(0);
@@ -188,6 +190,14 @@ export default function ListBox({
     setPages(instantPages);
   }, [instantPages]);
 
+  const [initScrollPosIsSet, setInitScrollPosIsSet] = useState(false);
+  useEffect(() => {
+    if (scrollState && !initScrollPosIsSet && loaderRef.current) {
+      loaderRef.current._listRef.scrollToItem(scrollState.initScrollPos);
+      setInitScrollPosIsSet(true);
+    }
+  }, [loaderRef.current]);
+
   if (!layout) {
     return null;
   }
@@ -240,7 +250,12 @@ export default function ListBox({
               showGray,
             }}
             itemSize={itemSize}
-            onItemsRendered={onItemsRendered}
+            onItemsRendered={(renderProps) => {
+              if (scrollState) {
+                scrollState.setScrollPos(renderProps.visibleStopIndex);
+              }
+              onItemsRendered({ ...renderProps });
+            }}
             ref={ref}
           >
             {RowColumn}

apis/nucleus/src/components/listbox/ListBoxInline.jsx

@@ -47,6 +47,8 @@ export default function ListBoxInline({ app, fieldIdentifier, stateName = '$', o
     dense = false,
     selectDisabled = () => false,
     showGray = true,
+    sortByState = 1,
+    scrollState = undefined,
   } = options;
   let { frequencyMode, histogram = false } = options;
 
@@ -108,7 +110,7 @@ export default function ListBoxInline({ app, fieldIdentifier, stateName = '$', o
       qDef: {
         qSortCriterias: [
           {
-            qSortByState: 1,
+            qSortByState: sortByState,
             qSortByAscii: 1,
             qSortByNumeric: 1,
             qSortByLoadOrder: 1,
@@ -331,6 +333,8 @@ export default function ListBoxInline({ app, fieldIdentifier, stateName = '$', o
               selectDisabled={selectDisabled}
               keyboard={keyboard}
               showGray={showGray}
+              scrollState={scrollState}
+              sortByState={sortByState}
             />
           )}
         </AutoSizer>

apis/nucleus/src/index.js

@@ -132,6 +132,8 @@ const mergeConfigs = (base, c) => ({
  * @property {function():boolean} [options.selectDisabled=] Define a function which tells when selections are disabled (true) or enabled (false). By default, always returns false.
  * @property {PromiseFunction} [options.fetchStart] A function called when the Listbox starts fetching data. Receives the fetch request promise as an argument.
  * @property {ReceiverFunction} [options.update] A function which receives an update function which upon call will trigger a data fetch.
+ * @property {{setScrollPos:function(number):void, initScrollPos:number}} [options.scrollState=] Object including a setScrollPos function that sets current scroll position index. A initial scroll position index.
+ * @property {number=} [options.sortByState=1] Sort by state, detault 1 = sort descending, 0 = no sorting, -1 sort ascending.
  */
 
 /**