xmlui 0.7.21 → 0.7.23

package/dist/scripts/src/components/List/ListNative.js

@@ -45,42 +45,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicHeightList = exports.ListContext = void 0;
+exports.ListNative = exports.ListContext = void 0;
 exports.useListData = useListData;
 exports.MemoizedSection = MemoizedSection;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const react_virtual_1 = require("@tanstack/react-virtual");
-const List_module_scss_1 = __importDefault(require("./List.module.scss"));
+const react_1 = require("react");
+const react_2 = __importStar(require("react"));
 const lodash_es_1 = require("lodash-es");
-const constants_1 = require("@components-core/constants");
-const ScrollContext_1 = require("@components-core/ScrollContext");
+const constants_1 = require("../../components-core/constants");
+const CardNative_1 = require("../Card/CardNative");
+const virtua_1 = require("virtua");
+const ScrollContext_1 = require("../../components-core/ScrollContext");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const CardNative_1 = require("@components/Card/CardNative");
-const TextNative_1 = require("@components/Text/TextNative");
-const SpinnerNative_1 = require("@components/Spinner/SpinnerNative");
-const hooks_1 = require("@components-core/utils/hooks");
-const container_helpers_1 = require("@components/container-helpers");
-const misc_1 = require("@components-core/utils/misc");
+const List_module_scss_1 = __importDefault(require("./List.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
-exports.ListContext = react_1.default.createContext({
+const misc_1 = require("../../components-core/utils/misc");
+const SpinnerNative_1 = require("../Spinner/SpinnerNative");
+const TextNative_1 = require("../Text/TextNative");
+const container_helpers_1 = require("../container-helpers");
+exports.ListContext = react_2.default.createContext({
     isExpanded: (id) => false,
     toggleExpanded: (id, isExpanded) => { },
 });
-const Item = ({ children, onHeightChanged, rowIndex, itemType }) => {
-    const ref = (0, react_1.useRef)(null);
-    (0, hooks_1.useResizeObserver)(ref, (0, react_1.useCallback)(() => {
-        onHeightChanged === null || onHeightChanged === void 0 ? void 0 : onHeightChanged(ref.current);
-    }, [onHeightChanged]));
-    return ((0, jsx_runtime_1.jsx)("div", { ref: (divElement) => {
-            onHeightChanged === null || onHeightChanged === void 0 ? void 0 : onHeightChanged(divElement);
-            ref.current = divElement;
-        }, className: (0, classnames_1.default)({
-            [List_module_scss_1.default.row]: itemType === RowType.ITEM,
-            [List_module_scss_1.default.section]: itemType === RowType.SECTION,
-            [List_module_scss_1.default.sectionFooter]: itemType === RowType.SECTION_FOOTER,
-        }), "data-list-item-type": itemType, "data-index": rowIndex, children: children }));
-};
 var RowType;
 (function (RowType) {
     RowType["SECTION"] = "SECTION";
@@ -88,7 +74,7 @@ var RowType;
     RowType["ITEM"] = "ITEM";
 })(RowType || (RowType = {}));
 function useListData({ groupsInitiallyExpanded = true, expanded = constants_1.EMPTY_OBJECT, items, limit, groupBy, orderBy, availableGroups, defaultGroups = constants_1.EMPTY_ARRAY, }) {
-    const sortedItems = (0, react_1.useMemo)(() => {
+    const sortedItems = (0, react_2.useMemo)(() => {
         if (!orderBy) {
             return items;
         }
@@ -104,19 +90,19 @@ function useListData({ groupsInitiallyExpanded = true, expanded = constants_1.EM
         const fieldDirectionsToOrderBy = arrayOrderBy.map((ob) => ob.direction);
         return (0, lodash_es_1.orderBy)(items, fieldSelectorsToOrderBy, fieldDirectionsToOrderBy);
     }, [items, orderBy]);
-    const cappedItems = (0, react_1.useMemo)(() => {
+    const cappedItems = (0, react_2.useMemo)(() => {
         if (!limit) {
             return sortedItems;
         }
         return sortedItems.slice(0, limit - 1);
     }, [sortedItems, limit]);
-    const sectionedItems = (0, react_1.useMemo)(() => {
+    const sectionedItems = (0, react_2.useMemo)(() => {
         if (groupBy === undefined) {
             return constants_1.EMPTY_OBJECT;
         }
         return (0, lodash_es_1.groupBy)(cappedItems, (item) => item[groupBy]);
     }, [cappedItems, groupBy]);
-    const sections = (0, react_1.useMemo)(() => {
+    const sections = (0, react_2.useMemo)(() => {
         if (groupBy === undefined) {
             return constants_1.EMPTY_ARRAY;
         }
@@ -128,7 +114,7 @@ function useListData({ groupsInitiallyExpanded = true, expanded = constants_1.EM
         }
         return foundSectionKeys;
     }, [groupBy, sectionedItems, defaultGroups, availableGroups]);
-    const rows = (0, react_1.useMemo)(() => {
+    const rows = (0, react_2.useMemo)(() => {
         if (groupBy === undefined) {
             return cappedItems;
         }
@@ -184,20 +170,61 @@ const defaultItemRenderer = (item, id) => {
     }
     return (0, jsx_runtime_1.jsx)(CardNative_1.Card, { title: title, subtitle: subtitle });
 };
-// TODO check this out: https://github.com/TanStack/virtual/discussions/195#discussioncomment-11170421
-exports.DynamicHeightList = (0, react_1.forwardRef)(function DynamicHeightList({ items = constants_1.EMPTY_ARRAY, itemRenderer = defaultItemRenderer, sectionRenderer, sectionFooterRenderer, loading, limit, groupBy, orderBy, availableGroups, scrollAnchor = "top", requestFetchPrevPage = lodash_es_1.noop, requestFetchNextPage = lodash_es_1.noop, selectedIndex, resetSelectedIndex = lodash_es_1.noop, pageInfo, idKey = "id", style, emptyListPlaceholder, groupsInitiallyExpanded = true, defaultGroups = constants_1.EMPTY_ARRAY, registerComponentApi, borderCollapse = true }, ref) {
+// eslint-disable-next-line react/display-name
+const Item = (0, react_2.forwardRef)(({ children, style, index }, forwardedRef) => {
+    const getItemType = (0, react_2.useContext)(ListItemTypeContext);
+    const itemType = getItemType(index) || RowType.ITEM;
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, ref: forwardedRef, className: (0, classnames_1.default)({
+            [List_module_scss_1.default.row]: itemType === RowType.ITEM,
+            [List_module_scss_1.default.section]: itemType === RowType.SECTION,
+            [List_module_scss_1.default.sectionFooter]: itemType === RowType.SECTION_FOOTER,
+        }), "data-list-item-type": itemType, "data-index": index, children: children }));
+});
+const ListItemTypeContext = (0, react_2.createContext)((index) => RowType.ITEM);
+/**
+ * Virtua's `shift` prop helps maintain scroll position when prepending items (like message history).
+ * Unfortunately it's finicky and must only be `true` when the beginning of the list changes, otherwise
+ * rendering gets broken (see: https://github.com/inokawa/virtua/issues/284).
+ *
+ * Virtua also requires `shift` to be correct on the same render pass when items are updated — so we can't
+ * just use `useEffect` and `useState` to monitor items and update `shift` since those will update _after_ the
+ * render pass. Instead, we use refs to check if the underlying data has changed on each render pass, and
+ * update a `shift` ref in the same pass.
+ *
+ * That's all encapsulated in this handy hook, to keep the logic out of the component.
+ */
+const useShift = (listData, idKey) => {
+    var _a, _b, _c;
+    const previousListData = (0, react_2.useRef)();
+    const shouldShift = (0, react_2.useRef)();
+    if (listData !== previousListData.current) {
+        if (((_a = listData === null || listData === void 0 ? void 0 : listData[0]) === null || _a === void 0 ? void 0 : _a[idKey]) !== ((_c = (_b = previousListData.current) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c[idKey])) {
+            shouldShift.current = true;
+        }
+        else {
+            shouldShift.current = false;
+        }
+        previousListData.current = listData;
+    }
+    return shouldShift.current;
+};
+exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items = constants_1.EMPTY_ARRAY, itemRenderer = defaultItemRenderer, sectionRenderer, sectionFooterRenderer, loading, limit, groupBy, orderBy, availableGroups, scrollAnchor = "top", requestFetchPrevPage = lodash_es_1.noop, requestFetchNextPage = lodash_es_1.noop, pageInfo, idKey = "id", style, emptyListPlaceholder, groupsInitiallyExpanded = true, defaultGroups = constants_1.EMPTY_ARRAY, registerComponentApi, borderCollapse = true, }, ref) {
     var _a;
-    // The scrollable element for your list
-    const scrollRef = (0, react_1.useContext)(ScrollContext_1.ScrollContext);
-    const parentRef = (0, react_1.useRef)(null);
+    const virtualizerRef = (0, react_2.useRef)(null);
+    const scrollRef = (0, react_2.useContext)(ScrollContext_1.ScrollContext);
+    const parentRef = (0, react_2.useRef)(null);
     const rootRef = ref ? (0, react_compose_refs_1.composeRefs)(parentRef, ref) : parentRef;
-    const rowsContainerRef = (0, react_1.useRef)(null);
-    const [suspendInfiniteLoad, setSuspendInfiniteLoad] = (0, react_1.useState)(scrollAnchor === "bottom");
-    const [expanded, setExpanded] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
-    const toggleExpanded = (0, react_1.useCallback)((id, isExpanded) => {
+    const hasOutsideScroll = scrollRef &&
+        (style === null || style === void 0 ? void 0 : style.maxHeight) === undefined &&
+        (style === null || style === void 0 ? void 0 : style.height) === undefined &&
+        (style === null || style === void 0 ? void 0 : style.flex) === undefined;
+    const scrollElementRef = hasOutsideScroll ? scrollRef : parentRef;
+    const shouldStickToBottom = (0, react_2.useRef)(scrollAnchor === "bottom");
+    const [expanded, setExpanded] = (0, react_2.useState)(constants_1.EMPTY_OBJECT);
+    const toggleExpanded = (0, react_2.useCallback)((id, isExpanded) => {
         setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [id]: isExpanded })));
     }, []);
-    const expandContextValue = (0, react_1.useMemo)(() => {
+    const expandContextValue = (0, react_2.useMemo)(() => {
         return {
             isExpanded: (id) => expanded[id] || (expanded[id] === undefined && groupsInitiallyExpanded),
             toggleExpanded,
@@ -213,207 +240,150 @@ exports.DynamicHeightList = (0, react_1.forwardRef)(function DynamicHeightList({
         orderBy,
         availableGroups,
     });
-    const hasOutsideScroll = scrollRef &&
-        (style === null || style === void 0 ? void 0 : style.maxHeight) === undefined &&
-        (style === null || style === void 0 ? void 0 : style.height) === undefined &&
-        (style === null || style === void 0 ? void 0 : style.flex) === undefined;
-    const scrollElementRef = hasOutsideScroll ? scrollRef : parentRef;
-    const overscan = 5;
-    const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
-        count: rows.length,
-        // paddingStart: scrollPaddingStart,
-        // paddingEnd: scrollPaddingEnd,
-        scrollMargin: !hasOutsideScroll ? 0 : ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0,
-        getScrollElement: (0, react_1.useCallback)(() => {
-            return scrollElementRef.current;
-        }, [scrollElementRef]),
-        estimateSize: (0, react_1.useCallback)(() => {
-            return 10;
-        }, []),
-        rangeExtractor: (0, react_1.useCallback)((range) => {
-            return (0, react_virtual_1.defaultRangeExtractor)(range);
-        }, []),
-        getItemKey: (0, react_1.useCallback)((index) => {
-            var _a;
-            return (_a = rows[index][idKey]) !== null && _a !== void 0 ? _a : index;
-        }, [idKey, rows]),
-        overscan: overscan,
-    });
-    const tryToScrollToIndex = (0, react_1.useCallback)((index, onFinished) => {
-        // console.log("SCROLLING TO INDEX", index);
-        rowVirtualizer.scrollToIndex(index);
-        requestAnimationFrame(() => {
-            onFinished === null || onFinished === void 0 ? void 0 : onFinished();
-        });
-    }, [rowVirtualizer]);
-    const scrollToBottom = (0, misc_1.useEvent)(() => {
-        if (rows.length) {
-            tryToScrollToIndex(rows.length - 1);
-        }
-    });
-    const scrollToTop = (0, misc_1.useEvent)(() => {
-        if (rows.length) {
-            tryToScrollToIndex(0);
-        }
-    });
-    (0, react_1.useLayoutEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            scrollToBottom,
-            scrollToTop,
-        });
-    }, [registerComponentApi, scrollToBottom, scrollToTop]);
-    const virtualItems = rowVirtualizer.getVirtualItems();
-    const totalSize = rowVirtualizer.getTotalSize();
-    (0, react_1.useEffect)(() => {
-        if (selectedIndex && rowVirtualizer) {
-            const index = virtualItems.findIndex((item) => item.key === selectedIndex);
-            tryToScrollToIndex(index);
-            resetSelectedIndex();
-        }
-    }, [resetSelectedIndex, rowVirtualizer, selectedIndex, tryToScrollToIndex, virtualItems]);
-    const prevTotalSize = (0, hooks_1.usePrevious)(totalSize);
-    const firstRenderedItem = virtualItems[0];
-    const lastRenderedItem = virtualItems[virtualItems.length - 1];
-    const initiallyScrolledToBottom = (0, react_1.useRef)(false);
-    (0, react_1.useLayoutEffect)(() => {
+    const shift = useShift(rows, idKey);
+    const initiallyScrolledToBottom = (0, react_2.useRef)(false);
+    (0, react_2.useEffect)(() => {
         if (rows.length && scrollAnchor === "bottom" && !initiallyScrolledToBottom.current) {
             initiallyScrolledToBottom.current = true;
-            tryToScrollToIndex(rows.length - 1);
-        }
-    }, [rows.length, scrollAnchor, tryToScrollToIndex]);
-    // restore scroll position when total size changes
-    (0, react_1.useLayoutEffect)(() => {
-        if (prevTotalSize &&
-            prevTotalSize !== totalSize &&
-            scrollAnchor === "bottom" //&&
-        ) {
-            const delta2 = totalSize - prevTotalSize;
-            setSuspendInfiniteLoad(true);
-            queueMicrotask(() => {
-                scrollElementRef.current.scrollBy({ left: 0, top: delta2 });
-                // console.log("scrolled to", scrollElementRef.current.scrollTop);
-                setSuspendInfiniteLoad(false);
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(rows.length - 1, {
+                    align: "end",
+                });
             });
         }
-    }, [
-        firstRenderedItem === null || firstRenderedItem === void 0 ? void 0 : firstRenderedItem.index,
-        prevTotalSize,
-        rowVirtualizer,
-        scrollAnchor,
-        scrollElementRef,
-        totalSize,
-    ]);
-    const suspendTimerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        // console.log({
-        //   suspendState: suspendInfiniteLoad,
-        //   pageInfo,
-        //   firstRenderedItem,
-        //   // visibleRange
-        // });
-        if (suspendInfiniteLoad) {
+    }, [rows.length, scrollAnchor]);
+    (0, react_2.useEffect)(() => {
+        if (!virtualizerRef.current)
             return;
-        }
-        if (!pageInfo) {
+        if (!shouldStickToBottom.current)
             return;
+        requestAnimationFrame(() => {
+            var _a;
+            (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(rows.length - 1, {
+                align: "end",
+            });
+        });
+    }, [rows]);
+    const isFetchingPrevPage = (0, react_2.useRef)(false);
+    const tryToFetchPrevPage = (0, react_2.useCallback)(() => {
+        if (virtualizerRef.current &&
+            virtualizerRef.current.findStartIndex() < 10 &&
+            pageInfo &&
+            pageInfo.hasPrevPage &&
+            !pageInfo.isFetchingPrevPage &&
+            !isFetchingPrevPage.current) {
+            isFetchingPrevPage.current = true;
+            (function doFetch() {
+                return __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        yield requestFetchPrevPage();
+                    }
+                    finally {
+                        isFetchingPrevPage.current = false;
+                    }
+                });
+            })();
         }
-        if (!firstRenderedItem) {
-            return;
+    }, [pageInfo, requestFetchPrevPage]);
+    const isFetchingNextPage = (0, react_2.useRef)(false);
+    const tryToFetchNextPage = (0, react_2.useCallback)(() => {
+        if (virtualizerRef.current &&
+            virtualizerRef.current.findEndIndex() + 10 > rows.length &&
+            pageInfo &&
+            pageInfo.hasNextPage &&
+            !pageInfo.isFetchingNextPage &&
+            !isFetchingNextPage.current) {
+            isFetchingNextPage.current = true;
+            (function doFetch() {
+                return __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        yield requestFetchNextPage();
+                    }
+                    finally {
+                        isFetchingNextPage.current = false;
+                    }
+                });
+            })();
         }
-        if (firstRenderedItem.index === 0 && pageInfo.hasPrevPage && !pageInfo.isFetchingPrevPage) {
-            (() => __awaiter(this, void 0, void 0, function* () {
-                setSuspendInfiniteLoad(true);
-                if (suspendTimerRef.current) {
-                    clearTimeout(suspendTimerRef.current);
-                }
-                // console.log("fetching prev page START", pageInfo);
-                yield requestFetchPrevPage();
-                // console.log("fetching prev page END", pageInfo);
-                suspendTimerRef.current = setTimeout(() => {
-                    setSuspendInfiniteLoad(false);
-                }, 500);
-            }))();
+    }, [rows.length, pageInfo, requestFetchNextPage]);
+    const initiallyFetchedExtraPages = (0, react_2.useRef)(false);
+    (0, react_2.useEffect)(() => {
+        if (rows.length && !initiallyFetchedExtraPages.current) {
+            initiallyFetchedExtraPages.current = true;
+            tryToFetchPrevPage();
         }
-    }, [firstRenderedItem, pageInfo, requestFetchPrevPage, suspendInfiniteLoad]);
-    (0, react_1.useEffect)(() => {
-        // console.log({
-        //   suspendState: suspendInfiniteLoad,
-        //   pageInfo,
-        //   lastRenderedItem,
-        //   itemsLength: items.length
-        //   // visibleRange
-        // });
-        if (suspendInfiniteLoad) {
+    }, [rows.length, tryToFetchNextPage, tryToFetchPrevPage]);
+    const onScroll = (0, react_2.useCallback)((offset) => {
+        if (!virtualizerRef.current)
             return;
+        if (scrollAnchor === "bottom") {
+            // The sum may not be 0 because of sub-pixel value when browser's window.devicePixelRatio has decimal value
+            shouldStickToBottom.current =
+                offset - virtualizerRef.current.scrollSize + virtualizerRef.current.viewportSize >= -1.5;
         }
-        if (!pageInfo) {
-            return;
+        tryToFetchPrevPage();
+        tryToFetchNextPage();
+    }, [scrollAnchor, tryToFetchNextPage, tryToFetchPrevPage]);
+    const scrollToBottom = (0, misc_1.useEvent)(() => {
+        var _a;
+        if (rows.length) {
+            (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(rows.length - 1, {
+                align: "end",
+            });
         }
-        if (!lastRenderedItem) {
-            return;
+    });
+    const scrollToTop = (0, misc_1.useEvent)(() => {
+        var _a;
+        if (rows.length) {
+            (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(0);
         }
-        if (lastRenderedItem.index === items.length - 1 &&
-            pageInfo.hasNextPage &&
-            !pageInfo.isFetchingNextPage) {
-            (() => __awaiter(this, void 0, void 0, function* () {
-                setSuspendInfiniteLoad(true);
-                if (suspendTimerRef.current) {
-                    clearTimeout(suspendTimerRef.current);
-                }
-                // console.log("fetching prev page START", pageInfo);
-                yield requestFetchNextPage();
-                // console.log("fetching prev page END", pageInfo);
-                suspendTimerRef.current = setTimeout(() => {
-                    setSuspendInfiniteLoad(false);
-                }, 500);
-            }))();
+    });
+    const scrollToIndex = (0, misc_1.useEvent)((index) => {
+        var _a;
+        (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index);
+    });
+    const scrollToId = (0, misc_1.useEvent)((id) => {
+        const index = rows === null || rows === void 0 ? void 0 : rows.findIndex((row) => row[idKey] === id);
+        if (index >= 0) {
+            scrollToIndex(index);
         }
-    }, [items.length, lastRenderedItem, pageInfo, requestFetchNextPage, suspendInfiniteLoad]);
-    const listContainerTransformY = !firstRenderedItem
-        ? 0
-        : firstRenderedItem.start - rowVirtualizer.options.scrollMargin;
-    return ((0, jsx_runtime_1.jsx)(exports.ListContext.Provider, { value: expandContextValue, children: (0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: List_module_scss_1.default.scrollParent, style: Object.assign({ overflow: hasOutsideScroll ? "initial" : "auto", maxHeight: "100%" }, style), children: [loading && virtualItems.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: List_module_scss_1.default.loadingWrapper, children: (0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, {}) })), !loading &&
-                    virtualItems.length === 0 &&
-                    (emptyListPlaceholder !== null && emptyListPlaceholder !== void 0 ? emptyListPlaceholder : ((0, jsx_runtime_1.jsx)("div", { className: List_module_scss_1.default.noRows, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "No data available" }) }))), ((!loading && virtualItems.length > 0) || items.length > 0) && ((0, jsx_runtime_1.jsx)("div", { ref: rowsContainerRef, style: {
-                        height: `${totalSize}px`,
-                        width: "100%",
-                        position: "relative",
-                    }, children: (0, jsx_runtime_1.jsx)("div", { "data-list-container": true, className: (0, classnames_1.default)({
-                            [List_module_scss_1.default.sectioned]: groupBy !== undefined,
+    });
+    (0, react_2.useLayoutEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            scrollToBottom,
+            scrollToTop,
+            scrollToIndex,
+            scrollToId
+        });
+    }, [registerComponentApi, scrollToBottom, scrollToId, scrollToIndex, scrollToTop]);
+    const rowTypeContextValue = (0, react_2.useCallback)((index) => rows[index]._row_type, [rows]);
+    return ((0, jsx_runtime_1.jsx)(ListItemTypeContext.Provider, { value: rowTypeContextValue, children: (0, jsx_runtime_1.jsx)(exports.ListContext.Provider, { value: expandContextValue, children: (0, jsx_runtime_1.jsxs)("div", { ref: rootRef, style: style, className: (0, classnames_1.default)(List_module_scss_1.default.outerWrapper, {
+                    [List_module_scss_1.default.hasOutsideScroll]: hasOutsideScroll,
+                }), children: [loading && rows.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: List_module_scss_1.default.loadingWrapper, children: (0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, {}) })), !loading &&
+                        rows.length === 0 &&
+                        (emptyListPlaceholder !== null && emptyListPlaceholder !== void 0 ? emptyListPlaceholder : ((0, jsx_runtime_1.jsx)("div", { className: List_module_scss_1.default.noRows, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "No data available" }) }))), rows.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(List_module_scss_1.default.innerWrapper, {
+                            [List_module_scss_1.default.reverse]: scrollAnchor === "bottom",
                             [List_module_scss_1.default.borderCollapse]: borderCollapse,
-                        }), style: {
-                            position: "absolute",
-                            top: 0,
-                            left: 0,
-                            width: "100%",
-                            transform: `translateY(${listContainerTransformY}px)`,
-                        }, children: virtualItems.map((virtualItem) => {
-                            var _a, _b;
-                            const item = rows[virtualItem.index];
-                            let key = virtualItem.key;
-                            let itemContent;
-                            switch (item._row_type) {
-                                case RowType.SECTION:
-                                    itemContent = (_a = sectionRenderer === null || sectionRenderer === void 0 ? void 0 : sectionRenderer(item, item[idKey])) !== null && _a !== void 0 ? _a : null;
-                                    key = `section_${key}`;
-                                    break;
-                                case RowType.SECTION_FOOTER:
-                                    itemContent = sectionFooterRenderer === null || sectionFooterRenderer === void 0 ? void 0 : sectionFooterRenderer(item, item[idKey]);
-                                    key = `section_footer_${key}`;
-                                    break;
-                                default:
-                                    itemContent = (_b = itemRenderer(item, item[idKey])) !== null && _b !== void 0 ? _b : null;
-                                    break;
-                            }
-                            return ((0, jsx_runtime_1.jsx)(Item, { onHeightChanged: rowVirtualizer.measureElement, rowIndex: virtualItem.index, itemType: item._row_type || RowType.ITEM, children: itemContent }, key));
-                        }) }) }))] }) }));
+                            [List_module_scss_1.default.sectioned]: groupBy !== undefined,
+                        }), "data-list-container": true, children: (0, jsx_runtime_1.jsx)(virtua_1.Virtualizer, { ref: virtualizerRef, scrollRef: scrollElementRef, shift: shift, onScroll: onScroll, startMargin: !hasOutsideScroll ? 0 : ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0, item: Item, children: rows.map((row) => {
+                                const key = row[idKey];
+                                switch (row._row_type) {
+                                    case RowType.SECTION:
+                                        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (sectionRenderer === null || sectionRenderer === void 0 ? void 0 : sectionRenderer(row, key)) || (0, jsx_runtime_1.jsx)("div", {}) }, key);
+                                    case RowType.SECTION_FOOTER:
+                                        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (sectionFooterRenderer === null || sectionFooterRenderer === void 0 ? void 0 : sectionFooterRenderer(row, key)) || (0, jsx_runtime_1.jsx)("div", {}) }, key);
+                                    default:
+                                        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: itemRenderer(row, key) || (0, jsx_runtime_1.jsx)("div", {}) }, key);
+                                }
+                            }) }) }))] }) }) }));
 });
 // --- Helper function for List item rendering
 function MemoizedSection({ node, renderChild, item, }) {
-    const { isExpanded, toggleExpanded } = (0, react_1.useContext)(exports.ListContext);
+    const { isExpanded, toggleExpanded } = (0, react_2.useContext)(exports.ListContext);
     const id = item.id;
     const expanded = isExpanded(id);
-    const sectionContext = (0, react_1.useMemo)(() => {
+    const sectionContext = (0, react_2.useMemo)(() => {
         return {
             isExpanded: expanded,
             toggle: () => {

package/dist/scripts/src/components/Logo/Logo.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logoComponentRenderer = exports.LogoMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("@components-core/renderers");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
 const LogoNative_1 = require("./LogoNative");
 const COMP = "Logo";
 exports.LogoMd = (0, ComponentDefs_1.createMetadata)({

package/dist/scripts/src/components/Logo/LogoNative.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Logo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ImageNative_1 = require("@components/Image/ImageNative");
-const AppHeaderNative_1 = require("@components/AppHeader/AppHeaderNative");
 const react_1 = require("react");
+const ImageNative_1 = require("../Image/ImageNative");
+const AppHeaderNative_1 = require("../AppHeader/AppHeaderNative");
 exports.Logo = (0, react_1.forwardRef)(function Logo({ style, }, forwardedRef) {
     const logoUrl = (0, AppHeaderNative_1.useLogoUrl)();
     if (!logoUrl) {

package/dist/scripts/src/components/Markdown/Markdown.js

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.markdownComponentRenderer = exports.MarkdownMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
 const Markdown_module_scss_1 = __importDefault(require("./Markdown.module.scss"));
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
 const MarkdownNative_1 = require("./MarkdownNative");
 const COMP = "Markdown";
 exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({

package/dist/scripts/src/components/Markdown/MarkdownNative.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Markdown = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Markdown_module_scss_1 = __importDefault(require("./Markdown.module.scss"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
-const HeadingNative_1 = require("@components/Heading/HeadingNative");
+const Markdown_module_scss_1 = __importDefault(require("./Markdown.module.scss"));
+const HeadingNative_1 = require("../Heading/HeadingNative");
 const TextNative_1 = require("../Text/TextNative");
-const LinkNative_1 = require("@components/Link/LinkNative");
-const ImageNative_1 = require("@components/Image/ImageNative");
+const LinkNative_1 = require("../Link/LinkNative");
+const ImageNative_1 = require("../Image/ImageNative");
 exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = false, children, style }) {
     if (typeof children !== "string") {
         return null;

package/dist/scripts/src/components/ModalDialog/ModalDialog.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.modalViewComponentRenderer = exports.ModalDialogMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ModalDialog_module_scss_1 = __importDefault(require("./ModalDialog.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const base_utils_1 = require("@components-core/theming/themes/base-utils");
-const container_helpers_1 = require("@components/container-helpers");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const base_utils_1 = require("../../components-core/theming/themes/base-utils");
+const container_helpers_1 = require("../container-helpers");
 const ModalDialogNative_1 = require("./ModalDialogNative");
 const COMP = "ModalDialog";
 exports.ModalDialogMd = (0, ComponentDefs_1.createMetadata)({

package/dist/scripts/src/components/ModalDialog/ModalDialogNative.js

@@ -48,14 +48,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalDialog = exports.ModalDialogFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const ModalDialog_module_scss_1 = __importDefault(require("./ModalDialog.module.scss"));
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const IconNative_1 = require("@components/Icon/IconNative");
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const ButtonNative_1 = require("@components/Button/ButtonNative");
-const misc_1 = require("@components-core/utils/misc");
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const Dialog = __importStar(require("@radix-ui/react-dialog"));
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const classnames_1 = __importDefault(require("classnames"));
+const ModalDialog_module_scss_1 = __importDefault(require("./ModalDialog.module.scss"));
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const misc_1 = require("../../components-core/utils/misc");
+const IconNative_1 = require("../Icon/IconNative");
+const ButtonNative_1 = require("../Button/ButtonNative");
 const ModalVisibilityContext_1 = require("./ModalVisibilityContext");
 exports.ModalDialogFrame = react_1.default.forwardRef(({ isInitiallyOpen, onOpen, onClose, registerComponentApi, renderDialog }, ref) => {
     const modalContextStateValue = useModalLocalOpenState(isInitiallyOpen, onOpen, onClose);
@@ -68,7 +68,7 @@ exports.ModalDialogFrame = react_1.default.forwardRef(({ isInitiallyOpen, onOpen
     }, [doClose, doOpen, registerComponentApi]);
     return isOpen ? ((0, jsx_runtime_1.jsx)(ModalStateContext.Provider, { value: modalContextStateValue, children: renderDialog({
             openParams,
-            ref
+            ref,
         }) })) : null;
 });
 const ModalStateContext = react_1.default.createContext(null);

package/dist/scripts/src/components/NavGroup/NavGroup.js

@@ -5,14 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.navGroupComponentRenderer = exports.NavGroupMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
 const NavGroup_module_scss_1 = __importDefault(require("./NavGroup.module.scss"));
-const IconNative_1 = require("@components/Icon/IconNative");
-const NavLink_module_scss_1 = __importDefault(require("@components/NavLink/NavLink.module.scss"));
-const themeVars_1 = require("@components-core/theming/themeVars");
+const NavLink_module_scss_1 = __importDefault(require("../NavLink/NavLink.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const IconNative_1 = require("../Icon/IconNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const NavGroupNative_1 = require("./NavGroupNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "NavGroup";
 exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`NavGroup\` component is a container for grouping related navigation targets ` +