@ringcentral/spring-ui 1.11.2 → 1.13.0

package/VirtualizedList.js

@@ -1,85 +1,139 @@
-import { createContext, useContext, forwardRef, isValidElement, useRef, useState, useImperativeHandle, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
-import { useForkRef, useVirtuosoExternalWindow, useEventCallback, logInDev } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { Virtuoso } from 'react-virtuoso';
-import { u as useAnimationFrame } from './chunks/useAnimationFrame.js';
-import { L as List } from './chunks/List.js';
-import './chunks/useListNavigation.js';
-import 'tabbable';
+import { createContext, forwardRef, isValidElement, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { logInDev, useEventCallback, useForkRef, useVirtuosoExternalWindow } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { Virtuoso } from "react-virtuoso";
+import { List as List_List } from "./List.js";
+import { useAnimationFrame } from "./chunks/6335.js";
+
+
 
 const VirtualizedItemPropsContext = createContext(null);
-const useVirtualizedItemPropsContext = () => useContext(VirtualizedItemPropsContext);
+const useVirtualizedItemPropsContext = ()=>useContext(VirtualizedItemPropsContext);
+
+
+
+
+
+
+
+
+
+
+
+
 
-const VirtuosoList = forwardRef((props, ref) => {
+
+const DATA_ITEM_INDEX_ATTR = 'data-item-index';
+const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { children: childrenProp, context, style, ...rest } = props;
-    const { searchAndFocusItemHandler, isScrolling, ListProps, listActions, listRef, itemContentRenderer, data, keepInvisibleItems, computeItemKey, } = context;
+    const { searchAndFocusItemHandler, isScrolling, ListProps, listActions, listRef, itemContentRenderer, data, keepInvisibleItems, computeItemKey } = context;
     const handleListRef = useForkRef(listRef, ref);
     let rangeStart = null;
     let rangeEnd = null;
     let children = childrenProp;
     if (keepInvisibleItems && computeItemKey && Array.isArray(childrenProp)) {
         const firstChild = childrenProp[0];
-        if (firstChild && isValidElement(firstChild)) {
-            const index = Number(firstChild.props?.['data-item-index']);
+        if (firstChild && /*#__PURE__*/ isValidElement(firstChild)) {
+            const index = Number(firstChild.props[DATA_ITEM_INDEX_ATTR]);
             rangeStart = Number.isNaN(index) ? null : index;
         }
         const lastChild = childrenProp.at(-1);
-        if (lastChild && isValidElement(lastChild)) {
-            const index = Number(lastChild.props?.['data-item-index']);
+        if (lastChild && /*#__PURE__*/ isValidElement(lastChild)) {
+            const index = Number(lastChild.props[DATA_ITEM_INDEX_ATTR]);
             rangeEnd = Number.isNaN(index) ? null : index;
         }
         children = [
-            ...(rangeStart !== null
-                ? keepInvisibleItems
-                    .filter((itemIndex) => itemIndex < rangeStart)
-                    .map((itemIndex) => {
-                    const itemData = data ? data[itemIndex] : itemIndex;
-                    return (jsx(InnerItem, { "data-sticky-index": itemIndex, style: {
-                            left: 0,
-                            top: 0,
-                            position: 'absolute',
-                        }, children: itemContentRenderer(itemIndex, itemData, context) }, computeItemKey(itemIndex, itemData, context)));
-                })
-                : []),
+            ...rangeStart !== null ? keepInvisibleItems// oxlint-disable-next-line @typescript-eslint/no-non-null-assertion
+            .filter((itemIndex)=>itemIndex < rangeStart).map((itemIndex)=>{
+                const itemData = data ? data[itemIndex] : itemIndex;
+                return /*#__PURE__*/ jsx(InnerItem, {
+                    "data-sticky-index": itemIndex,
+                    style: {
+                        left: 0,
+                        top: 0,
+                        position: 'absolute'
+                    },
+                    children: itemContentRenderer(itemIndex, itemData, context)
+                }, computeItemKey(itemIndex, itemData, context));
+            }) : [],
             ...childrenProp,
-            ...(rangeEnd !== null
-                ? keepInvisibleItems
-                    .filter((itemIndex) => itemIndex > rangeEnd)
-                    .map((itemIndex) => {
-                    const itemData = data ? data[itemIndex] : itemIndex;
-                    return (jsx(InnerItem, { "data-sticky-index": itemIndex, style: {
-                            left: 0,
-                            bottom: 0,
-                            position: 'absolute',
-                        }, children: itemContentRenderer(itemIndex, itemData, context) }, computeItemKey(itemIndex, itemData, context)));
-                })
-                : []),
+            ...rangeEnd !== null ? keepInvisibleItems// oxlint-disable-next-line @typescript-eslint/no-non-null-assertion
+            .filter((itemIndex)=>itemIndex > rangeEnd).map((itemIndex)=>{
+                const itemData = data ? data[itemIndex] : itemIndex;
+                return /*#__PURE__*/ jsx(InnerItem, {
+                    "data-sticky-index": itemIndex,
+                    style: {
+                        left: 0,
+                        bottom: 0,
+                        position: 'absolute'
+                    },
+                    children: itemContentRenderer(itemIndex, itemData, context)
+                }, computeItemKey(itemIndex, itemData, context));
+            }) : []
         ];
     }
-    return (jsx(List, { ...ListProps, ...rest, actions: listActions, style: {
+    return /*#__PURE__*/ jsx(List_List, {
+        ...ListProps,
+        ...rest,
+        actions: listActions,
+        style: {
             ...ListProps?.style,
             ...style,
-            ...(isScrolling ? { pointerEvents: 'none' } : undefined),
-            position: 'relative',
-        }, preventContainerScroll: false, ref: handleListRef, searchAndFocusItemHandler: searchAndFocusItemHandler, children: children }));
+            // optimize list scrolling
+            ...isScrolling ? {
+                pointerEvents: 'none'
+            } : undefined,
+            // for prop `keepInvisibleItems`
+            position: 'relative'
+        },
+        preventContainerScroll: false,
+        ref: handleListRef,
+        searchAndFocusItemHandler: searchAndFocusItemHandler,
+        children: children
+    });
 });
-const Scroller = forwardRef((props, ref) => {
+const Scroller = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { children, context, ...rest } = props;
     const handleRef = useForkRef(ref, context?.scrollerRef);
-    return (jsx("div", { ...rest, ref: handleRef, tabIndex: undefined, children: children }));
+    return /*#__PURE__*/ jsx("div", {
+        ...rest,
+        ref: handleRef,
+        tabIndex: undefined,
+        children: children
+    });
 });
-const InnerItem = (props) => {
+const InnerItem = (props)=>{
     const { children, ...rest } = props;
-    return (jsx(VirtualizedItemPropsContext.Provider, { value: rest, children: children }));
+    return /*#__PURE__*/ jsx(VirtualizedItemPropsContext.Provider, {
+        value: rest,
+        children: children
+    });
 };
 const Item = InnerItem;
-const VirtuosoComponents = { Item, Scroller, List: VirtuosoList };
+const VirtuosoComponents = {
+    Item: Item,
+    Scroller: Scroller,
+    List: VirtuosoList
+};
+
 
-const VirtualizedList = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'VirtualizedList' });
+
+
+
+
+
+
+const VirtualizedList = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'VirtualizedList'
+    });
     const { children, totalCount, data, isScrolling: handleScroll, rangeChanged: handleRangeChanged, virtuosoActions, actions, ListProps, isItemDisabled, infinite = false, isReady = true, context, components, keepInvisibleItems, computeItemKey, firstFocusIndex = 0, ...rest } = props;
-    const listRangeRef = useRef({ startIndex: -1, endIndex: -1 });
+    const listRangeRef = useRef({
+        startIndex: -1,
+        endIndex: -1
+    });
     const [isScrolling, setIsScrolling] = useState(false);
     const listRef = useRef(null);
     const virtuosoRef = useRef(null);
@@ -88,51 +142,60 @@ const VirtualizedList = forwardRef((inProps, ref) => {
     const itemRenderedPromiseRef = useRef(null);
     const { requestAnimationFrame } = useAnimationFrame();
     const externalWindowProps = useVirtuosoExternalWindow();
-    const isItemRendered = (index) => {
+    const isItemRendered = (index)=>{
         const { startIndex, endIndex } = listRangeRef.current;
         return index <= endIndex && index >= startIndex;
     };
-    const focusItemByIndex = (index) => {
-        if (!isReady) {
-            new Promise((resolve) => {
+    const focusItemByIndex = (index)=>{
+        /**
+     * If the component isn't ready, we need to defer the focus action until the component is ready.
+     * This is necessary if a parent component is waiting for some height calculation of the list to
+     * be performed before it actually renders the list. If we didn't do this the component would not
+     * know where to scroll to/would scroll to an incorrect position as it has not yet fully rendered.
+     */ if (!isReady) {
+            new Promise((resolve)=>{
                 initialFocusItemByIndexPromiseRef.current = resolve;
-            }).then(() => {
-                requestAnimationFrame(() => focusByIndexAction(index));
+            }).then(()=>{
+                // Wrap in rAF to ensure height has truly settled before focusing
+                requestAnimationFrame(()=>focusByIndexAction(index));
             });
-        }
-        else {
-            const focusTarget = () => {
+        } else {
+            const focusTarget = ()=>{
                 const targetItem = listRef.current?.querySelector(`[data-item-index="${index}"]`);
                 if (process.env.NODE_ENV !== 'production' && !targetItem) {
                     logInDev({
                         scope: 'VirtualizedList',
                         level: 'warn',
-                        message: `Can't find the target item with index \`${index}\`. Please ensure \`getSelectedIndex\` can find the index in your data array.`,
+                        message: `Can't find the target item with index \`${index}\`. Please ensure \`getSelectedIndex\` can find the index in your data array.`
                     });
                 }
                 targetItem?.focus();
             };
             if (!isItemRendered(index)) {
-                new Promise((resolve) => {
-                    itemRenderedPromiseRef.current = { resolve, itemIndex: index };
-                }).then(() => {
+                new Promise((resolve)=>{
+                    itemRenderedPromiseRef.current = {
+                        resolve,
+                        itemIndex: index
+                    };
+                }).then(()=>{
                     focusTarget();
                 });
-                virtuosoRef.current?.scrollToIndex({ index, align: 'center' });
-            }
-            else {
+                virtuosoRef.current?.scrollToIndex({
+                    index,
+                    align: 'center'
+                });
+            } else {
                 focusTarget();
             }
         }
     };
-    const isDisabled = (index) => {
-        if (!isItemDisabled)
-            return false;
+    const isDisabled = (index)=>{
+        if (!isItemDisabled) return false;
         return isItemDisabled(index);
     };
-    const searchAndFocusItemHandler = (searchElementOption) => {
+    const searchAndFocusItemHandler = (searchElementOption)=>{
         const firstItemIndex = 0;
-        const lastItemIndex = (() => {
+        const lastItemIndex = (()=>{
             if (data) {
                 return data.length - 1;
             }
@@ -144,17 +207,17 @@ const VirtualizedList = forwardRef((inProps, ref) => {
             if (searchElementOption === 'first') {
                 startIndex = firstFocusIndex;
                 direction = 'down';
-            }
-            else {
+            } else {
                 startIndex = lastItemIndex;
                 direction = 'up';
             }
             if (!isDisabled(startIndex)) {
                 focusItemByIndex(startIndex);
-                return { focused: true };
+                return {
+                    focused: true
+                };
             }
-        }
-        else {
+        } else {
             startIndex = Number(searchElementOption.baseElement.dataset['itemIndex']);
             direction = searchElementOption.direction;
         }
@@ -163,69 +226,75 @@ const VirtualizedList = forwardRef((inProps, ref) => {
         if (direction === 'up') {
             do {
                 if (pointer - 1 < firstItemIndex) {
+                    // disabled focus loop when infinite is true
                     if (infinite) {
                         pointer = startIndex;
-                    }
-                    else {
+                    } else {
                         pointer = lastItemIndex;
                     }
                     isAfterBaseElement = false;
-                }
-                else {
+                } else {
                     pointer--;
                 }
                 if (!isDisabled(pointer)) {
                     break;
                 }
-            } while (pointer !== startIndex);
-        }
-        else {
+            }while (pointer !== startIndex);
+        } else {
             do {
                 if (pointer + 1 > lastItemIndex) {
+                    // disabled focus loop when infinite is true
                     if (infinite) {
                         pointer = startIndex;
-                    }
-                    else {
+                    } else {
                         pointer = firstItemIndex;
                     }
                     isAfterBaseElement = false;
-                }
-                else {
+                } else {
                     pointer++;
                 }
                 if (!isDisabled(pointer)) {
                     break;
                 }
-            } while (pointer !== startIndex);
+            }while (pointer !== startIndex);
         }
         if (isDisabled(pointer)) {
-            return { focused: false };
+            return {
+                focused: false
+            };
         }
         focusItemByIndex(pointer);
-        return typeof searchElementOption === 'string'
-            ? { focused: true }
-            : { focused: true, isAfterBaseElement };
+        return typeof searchElementOption === 'string' ? {
+            focused: true
+        } : {
+            focused: true,
+            isAfterBaseElement
+        };
     };
     const listActions = useRef(null);
-    const focusByIndexAction = useEventCallback((i) => {
+    const focusByIndexAction = useEventCallback((i)=>{
         if (isDisabled(i)) {
             listActions.current?.focus();
-        }
-        else {
+        } else {
             focusItemByIndex(i);
         }
     });
-    useImperativeHandle(actions, () => ({
-        focus: () => {
-            listActions.current?.focus();
-        },
-        focusByIndex: focusByIndexAction,
-    }), [focusByIndexAction]);
-    useEffect(() => {
+    useImperativeHandle(actions, ()=>({
+            focus: ()=>{
+                listActions.current?.focus();
+            },
+            focusByIndex: focusByIndexAction
+        }), [
+        focusByIndexAction
+    ]);
+    useEffect(()=>{
+        // Execute the initial focus item by index promise when the list is ready
         if (isReady) {
             initialFocusItemByIndexPromiseRef.current?.();
         }
-    }, [isReady]);
+    }, [
+        isReady
+    ]);
     const virtuosoContext = {
         listRef,
         scrollerRef: ref,
@@ -236,9 +305,29 @@ const VirtualizedList = forwardRef((inProps, ref) => {
         data,
         keepInvisibleItems,
         itemContentRenderer: children,
-        computeItemKey: computeItemKey,
+        computeItemKey: computeItemKey
     };
-    return (jsx(Virtuoso, { className: "sui-virtualized-list", ...externalWindowProps, ref: handleVirtuosoRef, increaseViewportBy: 200, ...(computeItemKey ? { computeItemKey } : undefined), ...rest, context: { ...context, ...virtuosoContext }, components: { ...VirtuosoComponents, ...components }, totalCount: totalCount, data: data, rangeChanged: (range) => {
+    return /*#__PURE__*/ jsx(Virtuoso, {
+        className: "sui-virtualized-list",
+        ...externalWindowProps,
+        ref: handleVirtuosoRef,
+        // pre-render, make scroll smooth when move focus
+        increaseViewportBy: 200,
+        ...computeItemKey ? {
+            computeItemKey
+        } : undefined,
+        ...rest,
+        context: {
+            ...context,
+            ...virtuosoContext
+        },
+        components: {
+            ...VirtuosoComponents,
+            ...components
+        },
+        totalCount: totalCount,
+        data: data,
+        rangeChanged: (range)=>{
             listRangeRef.current = range;
             const itemRenderedPromise = itemRenderedPromiseRef.current;
             if (itemRenderedPromise) {
@@ -249,11 +338,21 @@ const VirtualizedList = forwardRef((inProps, ref) => {
                 }
             }
             handleRangeChanged?.(range);
-        }, isScrolling: (isScrolling) => {
+        },
+        isScrolling: (isScrolling)=>{
             setIsScrolling(isScrolling);
             handleScroll?.(isScrolling);
-        }, itemContent: children }));
+        },
+        itemContent: children
+    });
 });
 VirtualizedList.displayName = 'SuiVirtualizedList';
 
+
+
+
+
+
+
+
 export { VirtualizedItemPropsContext, VirtualizedList, VirtuosoComponents, useVirtualizedItemPropsContext };