fix: add wider range for stick to center boundaries

Author: pierpo

packages/lib/src/spatial-navigation/components/virtualizedList/SpatialNavigationVirtualizedList.test.tsx

@@ -335,15 +335,17 @@ describe('SpatialNavigationVirtualizedList', () => {
               renderItem={renderItem}
               data={data}
               itemSize={100}
-              numberOfRenderedItems={5}
-              numberOfItemsVisibleOnScreen={3}
               scrollBehavior="stick-to-center"
+              additionalItemsRendered={0}
             />
           </DefaultFocus>
         </SpatialNavigationRoot>,
       );
       act(() => jest.runAllTimers());
 
+      // Given this layout size, this item size, and the additional items rendered parameter:
+      //   - number of visible items on screen = 3
+      //   - total amount of items rendered = 5
       setComponentLayoutSize(listTestId, component, { width: 300, height: 300 });
 
       const listElement = await component.findByTestId(listTestId);
@@ -410,9 +412,8 @@ describe('SpatialNavigationVirtualizedList', () => {
               renderItem={renderItem}
               data={data.slice(0, 3)}
               itemSize={100}
-              numberOfRenderedItems={5}
-              numberOfItemsVisibleOnScreen={3}
               scrollBehavior="stick-to-center"
+              additionalItemsRendered={0}
             />
           </DefaultFocus>
         </SpatialNavigationRoot>,

packages/lib/src/spatial-navigation/components/virtualizedList/VirtualizedList.tsx

@@ -12,7 +12,11 @@ import { computeAllScrollOffsets } from './helpers/createScrollOffsetArray';
 import { getNumberOfItemsVisibleOnScreen } from './helpers/getNumberOfItemsVisibleOnScreen';
 import { getAdditionalNumberOfItemsRendered } from './helpers/getAdditionalNumberOfItemsRendered';
 
-export type ScrollBehavior = 'stick-to-start' | 'stick-to-center' | 'stick-to-end' | 'jump-on-scroll';
+export type ScrollBehavior =
+  | 'stick-to-start'
+  | 'stick-to-center'
+  | 'stick-to-end'
+  | 'jump-on-scroll';
 export interface VirtualizedListProps<T> {
   data: T[];
   renderItem: (args: { item: T; index: number }) => JSX.Element;

packages/lib/src/spatial-navigation/components/virtualizedList/helpers/getRange.test.ts

@@ -58,4 +58,39 @@ describe('getRange for custom virtualized list', () => {
     expect(expectedResult).toEqual(result);
     expect(console.error).toHaveBeenCalledTimes(1);
   });
+
+  describe('stick-to-center', () => {
+    it.each`
+      description                                                            | arraySize | focusIndex | result
+      ${'empty array'}                                                       | ${0}      | ${0}       | ${{ start: 0, end: 0 }}
+      ${'empty array and out of bounds focus'}                               | ${0}      | ${3}       | ${{ start: 0, end: 0 }}
+      ${'one element focused'}                                               | ${1}      | ${0}       | ${{ start: 0, end: 0 }}
+      ${'one element and out of bounds focus'}                               | ${1}      | ${12}      | ${{ start: 0, end: 0 }}
+      ${'small array with focus in the middle'}                              | ${5}      | ${3}       | ${{ start: 0, end: 4 }}
+      ${'bigger number of rendered items than data with range out of bound'} | ${5}      | ${12}      | ${{ start: 0, end: 4 }}
+      ${'focus at the beginning of big array focus 0'}                       | ${30}     | ${0}       | ${{ start: 0, end: 7 }}
+      ${'focus at the beginning of big array focus 1'}                       | ${30}     | ${1}       | ${{ start: 0, end: 7 }}
+      ${'focus at the beginning of big array focus 2'}                       | ${30}     | ${2}       | ${{ start: 0, end: 7 }}
+      ${'focus at the beginning of big array focus 3'}                       | ${30}     | ${3}       | ${{ start: 0, end: 7 }}
+      ${'focus at the beginning of big array focus 4, starts scrolling'}     | ${30}     | ${4}       | ${{ start: 1, end: 8 }}
+      ${'focus at the beginning of big array focus 5, scrolls'}              | ${30}     | ${5}       | ${{ start: 2, end: 9 }}
+      ${'focus in the middle of big array, must scroll'}                     | ${30}     | ${12}      | ${{ start: 9, end: 16 }}
+      ${'focus at the end of big array'}                                     | ${30}     | ${29}      | ${{ start: 22, end: 29 }}
+      ${'big array and focus out of bounds'}                                 | ${30}     | ${31}      | ${{ start: 22, end: 29 }}
+    `(
+      'should return proper range for array size $arraySize at index $focusIndex (case description: "$description")',
+      ({ arraySize, focusIndex, result }) => {
+        const input = new Array(arraySize).fill(1);
+        const expectedResult = getRange({
+          data: input,
+          currentlyFocusedItemIndex: focusIndex,
+          numberOfRenderedItems: 8,
+          numberOfItemsVisibleOnScreen: 4,
+          scrollBehavior: 'stick-to-center',
+        });
+
+        expect(expectedResult).toEqual(result);
+      },
+    );
+  });
 });

packages/lib/src/spatial-navigation/components/virtualizedList/helpers/getRange.ts

@@ -79,6 +79,7 @@ const getRawStartAndEndIndexes = ({
   scrollBehavior: ScrollBehavior;
 }) => {
   const halfNumberOfItemsNotVisible = numberOfItemsNotVisible / 2;
+  const stickToCenterBoundaries = (numberOfItemsVisibleOnScreen + numberOfItemsNotVisible - 1) / 2;
 
   switch (scrollBehavior) {
     case 'stick-to-start':
@@ -92,8 +93,8 @@ const getRawStartAndEndIndexes = ({
       };
     case 'stick-to-center':
       return {
-        rawStartIndex: currentlyFocusedItemIndex - (halfNumberOfItemsNotVisible + 1),
-        rawEndIndex: currentlyFocusedItemIndex + (halfNumberOfItemsNotVisible + 1),
+        rawStartIndex: currentlyFocusedItemIndex - stickToCenterBoundaries,
+        rawEndIndex: currentlyFocusedItemIndex + stickToCenterBoundaries,
       };
     case 'stick-to-end':
       return {