xmlui 0.7.21 → 0.7.22

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

@@ -32,55 +32,32 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 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 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 hooks_1 = require("../../components-core/utils/hooks");
+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"));
+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_1.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";
@@ -184,15 +161,28 @@ 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_1.forwardRef)(({ children, style, index }, forwardedRef) => {
+    const getItemType = (0, react_1.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_1.createContext)((index) => RowType.ITEM);
+exports.ListNative = (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, 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 virtualizerRef = (0, react_1.useRef)(null);
     const scrollRef = (0, react_1.useContext)(ScrollContext_1.ScrollContext);
     const parentRef = (0, react_1.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 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 [expanded, setExpanded] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
     const toggleExpanded = (0, react_1.useCallback)((id, isExpanded) => {
         setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [id]: isExpanded })));
@@ -213,47 +203,61 @@ 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 isPrepend = (0, react_1.useRef)(false);
+    const prevRows = (0, hooks_1.usePrevious)(rows);
+    (0, react_1.useLayoutEffect)(() => {
+        if ((prevRows === null || prevRows === void 0 ? void 0 : prevRows.length) < rows.length) {
+            isPrepend.current = false;
+        }
+    }, [rows.length, prevRows === null || prevRows === void 0 ? void 0 : prevRows.length]);
+    const initiallyScrolledToBottom = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (rows.length && scrollAnchor === "bottom" && !initiallyScrolledToBottom.current) {
+            initiallyScrolledToBottom.current = true;
+            (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(rows.length - 1);
+        }
+    }, [rows.length, scrollAnchor]);
+    const tryToFetchPrevPage = (0, react_1.useCallback)(() => {
+        if (virtualizerRef.current &&
+            virtualizerRef.current.findStartIndex() < 10 &&
+            pageInfo &&
+            pageInfo.hasPrevPage &&
+            !pageInfo.isFetchingPrevPage) {
+            isPrepend.current = true;
+            requestFetchPrevPage();
+        }
+    }, [pageInfo, requestFetchPrevPage]);
+    const tryToFetchNextPage = (0, react_1.useCallback)(() => {
+        if (virtualizerRef.current &&
+            virtualizerRef.current.findEndIndex() + 10 > rows.length &&
+            pageInfo &&
+            pageInfo.hasNextPage &&
+            !pageInfo.isFetchingNextPage) {
+            requestFetchNextPage();
+        }
+    }, [rows.length, pageInfo, requestFetchNextPage]);
+    const initiallyFetchedExtraPages = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (rows.length && !initiallyFetchedExtraPages.current) {
+            initiallyFetchedExtraPages.current = true;
+            tryToFetchPrevPage();
+        }
+    }, [rows.length, tryToFetchNextPage, tryToFetchPrevPage]);
+    const onScroll = (0, react_1.useCallback)(() => {
+        if (!virtualizerRef.current)
+            return;
+        tryToFetchPrevPage();
+        tryToFetchNextPage();
+    }, [tryToFetchNextPage, tryToFetchPrevPage]);
     const scrollToBottom = (0, misc_1.useEvent)(() => {
         if (rows.length) {
-            tryToScrollToIndex(rows.length - 1);
+            virtualizerRef.current.scrollToIndex(rows.length - 1);
         }
     });
     const scrollToTop = (0, misc_1.useEvent)(() => {
         if (rows.length) {
-            tryToScrollToIndex(0);
+            virtualizerRef.current.scrollToIndex(0);
         }
     });
     (0, react_1.useLayoutEffect)(() => {
@@ -262,151 +266,26 @@ exports.DynamicHeightList = (0, react_1.forwardRef)(function DynamicHeightList({
             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)(() => {
-        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);
-            });
-        }
-    }, [
-        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) {
-            return;
-        }
-        if (!pageInfo) {
-            return;
-        }
-        if (!firstRenderedItem) {
-            return;
-        }
-        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);
-            }))();
-        }
-    }, [firstRenderedItem, pageInfo, requestFetchPrevPage, suspendInfiniteLoad]);
-    (0, react_1.useEffect)(() => {
-        // console.log({
-        //   suspendState: suspendInfiniteLoad,
-        //   pageInfo,
-        //   lastRenderedItem,
-        //   itemsLength: items.length
-        //   // visibleRange
-        // });
-        if (suspendInfiniteLoad) {
-            return;
-        }
-        if (!pageInfo) {
-            return;
-        }
-        if (!lastRenderedItem) {
-            return;
-        }
-        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);
-            }))();
-        }
-    }, [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,
+    const rowTypeContextValue = (0, react_1.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" }) }))), !loading && 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: isPrepend.current, 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 (sectionRenderer === null || sectionRenderer === void 0 ? void 0 : sectionRenderer(row, key)) || (0, jsx_runtime_1.jsx)("div", {}, key);
+                                    case RowType.SECTION_FOOTER:
+                                        return (sectionFooterRenderer === null || sectionFooterRenderer === void 0 ? void 0 : sectionFooterRenderer(row, key)) || (0, jsx_runtime_1.jsx)("div", {}, key);
+                                    default:
+                                        return itemRenderer(row, key) || (0, jsx_runtime_1.jsx)("div", {}, key);
+                                }
+                            }) }) }))] }) }) }));
 });
 // --- Helper function for List item rendering
 function MemoizedSection({ node, renderChild, item, }) {

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 ` +

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

@@ -7,15 +7,15 @@ exports.NavGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dropdown_menu_1 = require("@radix-ui/react-dropdown-menu");
+const classnames_1 = __importDefault(require("classnames"));
 const NavGroup_module_scss_1 = __importDefault(require("./NavGroup.module.scss"));
-const IconNative_1 = require("@components/Icon/IconNative");
-const NavLinkNative_1 = require("@components/NavLink/NavLinkNative");
-const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
-const NavPanelNative_1 = require("@components/NavPanel/NavPanelNative");
-const constants_1 = require("@components-core/constants");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const mergeProps_1 = require("@components-core/utils/mergeProps");
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const constants_1 = require("../../components-core/constants");
+const mergeProps_1 = require("../../components-core/utils/mergeProps");
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const IconNative_1 = require("../Icon/IconNative");
+const NavLinkNative_1 = require("../NavLink/NavLinkNative");
+const AppLayoutContext_1 = require("../App/AppLayoutContext");
+const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
 const NavGroupContext = (0, react_1.createContext)({
     level: -1,
 });

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.navLinkComponentRenderer = exports.NavLinkMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NavLink_module_scss_1 = __importDefault(require("./NavLink.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const IconNative_1 = require("@components/Icon/IconNative");
-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 metadata_helpers_1 = require("../metadata-helpers");
+const IconNative_1 = require("../Icon/IconNative");
 const NavLinkNative_1 = require("./NavLinkNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "NavLink";
 exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component defines a navigation target (app navigation menu item) within ` +

package/dist/scripts/src/components/NavLink/NavLinkNative.js

@@ -17,13 +17,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavLink = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const NavLink_module_scss_1 = __importDefault(require("./NavLink.module.scss"));
 const react_2 = require("@remix-run/react");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const AppNative_1 = require("@components/App/AppNative");
-const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
-const NavPanelNative_1 = require("@components/NavPanel/NavPanelNative");
-const component_utils_1 = require("@components/component-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const NavLink_module_scss_1 = __importDefault(require("./NavLink.module.scss"));
+const component_utils_1 = require("../component-utils");
+const AppNative_1 = require("../App/AppNative");
+const AppLayoutContext_1 = require("../App/AppLayoutContext");
+const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
 exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
     var { 
     /* eslint-disable react/prop-types */

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.navPanelRenderer = exports.NavPanelMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NavPanel_module_scss_1 = __importDefault(require("./NavPanel.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 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 metadata_helpers_1 = require("../metadata-helpers");
 const NavPanelNative_1 = require("./NavPanelNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "NavPanel";
 exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` is a placeholder within \`App\` to define the app's navigation (menu) structure.`,

package/dist/scripts/src/components/NavPanel/NavPanelNative.js

@@ -39,13 +39,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavPanel = exports.NavPanelContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const NavPanel_module_scss_1 = __importDefault(require("./NavPanel.module.scss"));
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const LogoNative_1 = require("@components/Logo/LogoNative");
-const ScrollContext_1 = require("@components-core/ScrollContext");
-const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
-const AppNative_1 = require("@components/App/AppNative");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const classnames_1 = __importDefault(require("classnames"));
+const NavPanel_module_scss_1 = __importDefault(require("./NavPanel.module.scss"));
+const ScrollContext_1 = require("../../components-core/ScrollContext");
+const LogoNative_1 = require("../Logo/LogoNative");
+const AppLayoutContext_1 = require("../App/AppLayoutContext");
+const AppNative_1 = require("../App/AppNative");
 exports.NavPanelContext = react_1.default.createContext(null);
 const contextValue = {
     inDrawer: true,