xmlui 0.7.22 → 0.7.23

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

@@ -32,6 +32,15 @@ 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 };
 };
@@ -40,12 +49,12 @@ 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_1 = require("react");
+const react_2 = __importStar(require("react"));
 const lodash_es_1 = require("lodash-es");
 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 List_module_scss_1 = __importDefault(require("./List.module.scss"));
@@ -54,7 +63,7 @@ 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({
+exports.ListContext = react_2.default.createContext({
     isExpanded: (id) => false,
     toggleExpanded: (id, isExpanded) => { },
 });
@@ -65,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;
         }
@@ -81,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;
         }
@@ -105,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;
         }
@@ -162,8 +171,8 @@ const defaultItemRenderer = (item, id) => {
     return (0, jsx_runtime_1.jsx)(CardNative_1.Card, { title: title, subtitle: subtitle });
 };
 // 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 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,
@@ -171,23 +180,51 @@ const Item = (0, react_1.forwardRef)(({ children, style, index }, forwardedRef)
             [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) {
+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;
-    const virtualizerRef = (0, react_1.useRef)(null);
-    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 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) => {
+    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,
@@ -203,96 +240,150 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items
         orderBy,
         availableGroups,
     });
-    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;
+    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;
-            (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(rows.length - 1);
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(rows.length - 1, {
+                    align: "end",
+                });
+            });
         }
     }, [rows.length, scrollAnchor]);
-    const tryToFetchPrevPage = (0, react_1.useCallback)(() => {
+    (0, react_2.useEffect)(() => {
+        if (!virtualizerRef.current)
+            return;
+        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) {
-            isPrepend.current = true;
-            requestFetchPrevPage();
+            !pageInfo.isFetchingPrevPage &&
+            !isFetchingPrevPage.current) {
+            isFetchingPrevPage.current = true;
+            (function doFetch() {
+                return __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        yield requestFetchPrevPage();
+                    }
+                    finally {
+                        isFetchingPrevPage.current = false;
+                    }
+                });
+            })();
         }
     }, [pageInfo, requestFetchPrevPage]);
-    const tryToFetchNextPage = (0, react_1.useCallback)(() => {
+    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) {
-            requestFetchNextPage();
+            !pageInfo.isFetchingNextPage &&
+            !isFetchingNextPage.current) {
+            isFetchingNextPage.current = true;
+            (function doFetch() {
+                return __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        yield requestFetchNextPage();
+                    }
+                    finally {
+                        isFetchingNextPage.current = false;
+                    }
+                });
+            })();
         }
     }, [rows.length, pageInfo, requestFetchNextPage]);
-    const initiallyFetchedExtraPages = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
+    const initiallyFetchedExtraPages = (0, react_2.useRef)(false);
+    (0, react_2.useEffect)(() => {
         if (rows.length && !initiallyFetchedExtraPages.current) {
             initiallyFetchedExtraPages.current = true;
             tryToFetchPrevPage();
         }
     }, [rows.length, tryToFetchNextPage, tryToFetchPrevPage]);
-    const onScroll = (0, react_1.useCallback)(() => {
+    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;
+        }
         tryToFetchPrevPage();
         tryToFetchNextPage();
-    }, [tryToFetchNextPage, tryToFetchPrevPage]);
+    }, [scrollAnchor, tryToFetchNextPage, tryToFetchPrevPage]);
     const scrollToBottom = (0, misc_1.useEvent)(() => {
+        var _a;
         if (rows.length) {
-            virtualizerRef.current.scrollToIndex(rows.length - 1);
+            (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(rows.length - 1, {
+                align: "end",
+            });
         }
     });
     const scrollToTop = (0, misc_1.useEvent)(() => {
+        var _a;
         if (rows.length) {
-            virtualizerRef.current.scrollToIndex(0);
+            (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(0);
+        }
+    });
+    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);
         }
     });
-    (0, react_1.useLayoutEffect)(() => {
+    (0, react_2.useLayoutEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             scrollToBottom,
             scrollToTop,
+            scrollToIndex,
+            scrollToId
         });
-    }, [registerComponentApi, scrollToBottom, scrollToTop]);
-    const rowTypeContextValue = (0, react_1.useCallback)((index) => rows[index]._row_type, [rows]);
+    }, [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" }) }))), !loading && rows.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(List_module_scss_1.default.innerWrapper, {
+                        (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,
                             [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) => {
+                        }), "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 (sectionRenderer === null || sectionRenderer === void 0 ? void 0 : sectionRenderer(row, key)) || (0, jsx_runtime_1.jsx)("div", {}, key);
+                                        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 (sectionFooterRenderer === null || sectionFooterRenderer === void 0 ? void 0 : sectionFooterRenderer(row, key)) || (0, jsx_runtime_1.jsx)("div", {}, key);
+                                        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 itemRenderer(row, key) || (0, jsx_runtime_1.jsx)("div", {}, key);
+                                        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/Slider/Slider.js

@@ -13,7 +13,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const SliderNative_1 = require("./SliderNative");
 const COMP = "Slider";
 exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
-    status: "in progress",
+    status: "experimental",
     description: `The \`${COMP}\` component allows you to select a numeric value ` +
         `between a range specified by minimum and maximum values.`,
     props: {

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

@@ -19,6 +19,8 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         smoothScrolling: (0, ComponentDefs_1.d)(`This property indicates that smooth scrolling is used while scrolling the selected table ` +
             `of contents items into view.`),
+        maxHeadingLevel: (0, ComponentDefs_1.d)("Defines the maximum heading level to include in the table of contents. Headings " +
+            "with a level greater than this value will be excluded."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(TableOfContents_module_scss_1.default.themeVars),
     defaultThemeVars: {
@@ -69,6 +71,6 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.tableOfContentsRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TableOfContentsMd, ({ layoutCss, node, extractValue }) => {
-    var _a;
-    return ((0, jsx_runtime_1.jsx)(TableOfContentsNative_1.TableOfContents, { style: layoutCss, smoothScrolling: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.smoothScrolling) }));
+    var _a, _b;
+    return ((0, jsx_runtime_1.jsx)(TableOfContentsNative_1.TableOfContents, { style: layoutCss, smoothScrolling: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.smoothScrolling), maxHeadingLevel: extractValue.asOptionalNumber((_b = node.props) === null || _b === void 0 ? void 0 : _b.maxHeadingLevel) }));
 });

package/dist/scripts/src/components/TableOfContents/TableOfContentsNative.js

@@ -12,7 +12,7 @@ const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const classnames_1 = __importDefault(require("classnames"));
 const TableOfContents_module_scss_1 = __importDefault(require("./TableOfContents.module.scss"));
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
-exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ style, smoothScrolling }, forwardedRef) {
+exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ style, smoothScrolling, maxHeadingLevel = 6 }, forwardedRef) {
     const tocRef = (0, react_1.useRef)(null);
     const { headings, setObserveIntersection, activeAnchorId, setActiveAnchorId } = (0, TableOfContentsContext_1.useTableOfContents)();
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(tocRef, forwardedRef) : tocRef;
@@ -33,24 +33,29 @@ exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ sty
             }
         }
     }, [activeAnchorId, headings]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: TableOfContents_module_scss_1.default.nav, ref: ref, style: style, children: (0, jsx_runtime_1.jsx)("ul", { className: TableOfContents_module_scss_1.default.list, children: headings.map((value) => ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)(TableOfContents_module_scss_1.default.listItem, {
-                    [TableOfContents_module_scss_1.default.active]: value.id === activeAnchorId,
-                }), children: (0, jsx_runtime_1.jsx)(react_2.NavLink, { className: (0, classnames_1.default)(TableOfContents_module_scss_1.default.link, {
-                        [TableOfContents_module_scss_1.default.head_1]: value.level === 1,
-                        [TableOfContents_module_scss_1.default.head_2]: value.level === 2,
-                        [TableOfContents_module_scss_1.default.head_3]: value.level === 3,
-                        [TableOfContents_module_scss_1.default.head_4]: value.level === 4,
-                        [TableOfContents_module_scss_1.default.head_5]: value.level === 5,
-                        [TableOfContents_module_scss_1.default.head_6]: value.level === 6,
-                    }), to: `#${value.id}`, onClick: () => {
-                        if (smoothScrolling) {
-                            (0, scroll_into_view_if_needed_1.default)(value.anchor, {
-                                block: "start",
-                                inline: "start",
-                                behavior: "smooth",
-                                scrollMode: "if-needed",
-                            });
-                        }
-                        setActiveAnchorId(value.id);
-                    }, id: value.id, children: value.text }) }, value.id))) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: TableOfContents_module_scss_1.default.nav, ref: ref, style: style, children: (0, jsx_runtime_1.jsx)("ul", { className: TableOfContents_module_scss_1.default.list, children: headings.map((value) => {
+                if (value.level <= maxHeadingLevel) {
+                    return ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)(TableOfContents_module_scss_1.default.listItem, {
+                            [TableOfContents_module_scss_1.default.active]: value.id === activeAnchorId,
+                        }), children: (0, jsx_runtime_1.jsx)(react_2.NavLink, { className: (0, classnames_1.default)(TableOfContents_module_scss_1.default.link, {
+                                [TableOfContents_module_scss_1.default.head_1]: value.level === 1,
+                                [TableOfContents_module_scss_1.default.head_2]: value.level === 2,
+                                [TableOfContents_module_scss_1.default.head_3]: value.level === 3,
+                                [TableOfContents_module_scss_1.default.head_4]: value.level === 4,
+                                [TableOfContents_module_scss_1.default.head_5]: value.level === 5,
+                                [TableOfContents_module_scss_1.default.head_6]: value.level === 6,
+                            }), to: `#${value.id}`, onClick: () => {
+                                if (smoothScrolling) {
+                                    (0, scroll_into_view_if_needed_1.default)(value.anchor, {
+                                        block: "start",
+                                        inline: "start",
+                                        behavior: "smooth",
+                                        scrollMode: "if-needed",
+                                    });
+                                }
+                                setActiveAnchorId(value.id);
+                            }, id: value.id, children: value.text }) }, value.id));
+                }
+                return null;
+            }) }) }));
 });

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

@@ -115,6 +115,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.textComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextMd, ({ node, extractValue, layoutCss, renderChild }) => {
+    // TEMP: Need to use the resolveAndCleanProps function here and handle VariantTypes correctly
     const _a = node.props, { variant, maxLines, preserveLinebreaks, ellipses, value } = _a, variantSpecific = __rest(_a, ["variant", "maxLines", "preserveLinebreaks", "ellipses", "value"]);
     const variantSpecificProps = Object.fromEntries(Object.entries(variantSpecific)
         .filter(([key, _]) => abstractions_1.VariantPropsKeys.includes(key))

package/dist/scripts/src/components-core/LoaderComponent.js

@@ -30,6 +30,9 @@ function LoaderComponent({ node, state, dispatch, lookupAction, lookupSyncCallba
     }, [appContext, memoedVarsRef, referenceTrackedApi, state]);
     // --- Memoizes the action resolution by action definition value
     const memoedLookupSyncCallback = (0, react_1.useCallback)((action) => {
+        if (!action) {
+            return undefined;
+        }
         return lookupSyncCallback(valueExtractor(action), uid);
     }, [lookupSyncCallback, uid, valueExtractor]);
     const memoedLoaderInProgressChanged = (0, react_1.useCallback)((isInProgress) => {

package/dist/scripts/src/components-core/TableOfContentsContext.js

@@ -104,7 +104,17 @@ function TableOfContentsProvider({ children }) {
 function useTableOfContents() {
     const context = (0, react_1.useContext)(exports.TableOfContentsContext);
     if (!context) {
-        throw new Error("useTableOfContents must be used within a TableOfContentsProvider");
+        throw new Error(`The TableOfContents component can only be used inside a Page component.
+    <App>
+        <Pages>
+          <Page url="/">
+            <Heading>Harry Potter and the Sorcerer's Stone</Heading>
+            <TableOfContents />
+          </Page>
+        </Pages>
+    </App>
+    
+    `);
     }
     return context;
 }

package/dist/scripts/src/components-core/action/APICall.js

@@ -124,20 +124,20 @@ function updateQueriesWithResult(queryKeysToUpdate, optimisticValuesByQueryKeys,
             //pageable loader
             if (optimisticValue) {
                 draft.pages[draft.pages.length - 1] = draft.pages[draft.pages.length - 1].map((item) => item.id === optimisticValue.id && item._initiatorClientTxId === clientTxId
-                    ? result
+                    ? result || Object.assign(Object.assign({}, item), { _optimisticValue: undefined, _initiatorClientTxId: undefined })
                     : item);
             }
             else {
                 let updated = false;
                 draft.pages.forEach((page) => {
                     page === null || page === void 0 ? void 0 : page.forEach((item) => {
-                        if (item.id === result.id) {
+                        if (item.id === (result === null || result === void 0 ? void 0 : result.id)) {
                             Object.assign(item, result);
                             updated = true;
                         }
                     });
                 });
-                if (!updated) {
+                if (!updated && result) {
                     draft.pages[draft.pages.length - 1].push(result);
                 }
             }
@@ -146,7 +146,7 @@ function updateQueriesWithResult(queryKeysToUpdate, optimisticValuesByQueryKeys,
             if (optimisticValue) {
                 draft.forEach((item, index) => {
                     if (item.id === optimisticValue.id && item._initiatorClientTxId === clientTxId) {
-                        draft[index] = result;
+                        draft[index] = result || Object.assign(Object.assign({}, item), { _optimisticValue: undefined, _initiatorClientTxId: undefined });
                     }
                 });
             }
@@ -154,11 +154,11 @@ function updateQueriesWithResult(queryKeysToUpdate, optimisticValuesByQueryKeys,
                 let updated = false;
                 draft.forEach((item, index) => {
                     if (item.id === result.id) {
-                        draft[index] = result;
+                        draft[index] = result || Object.assign(Object.assign({}, item), { _optimisticValue: undefined, _initiatorClientTxId: undefined });
                         updated = true;
                     }
                 });
-                if (!updated) {
+                if (!updated && result) {
                     draft.push(result);
                 }
             }

package/dist/scripts/src/components-core/loader/PageableLoader.js

@@ -58,7 +58,7 @@ function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi
         let prevPageParam = undefined;
         const prevPageSelector = loader.props.prevPageSelector;
         if (prevPageSelector) {
-            prevPageParam = (0, extractParam_1.extractParam)({ $response: firstPage }, prevPageSelector.startsWith("{") ? prevPageSelector : `{$response.${prevPageSelector}}`);
+            prevPageParam = (0, extractParam_1.extractParam)({ $response: firstPage.filter(item => !item._optimisticValue) }, prevPageSelector.startsWith("{") ? prevPageSelector : `{$response.${prevPageSelector}}`);
         }
         if (!prevPageParam) {
             return undefined;
@@ -80,6 +80,9 @@ function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi
             nextPageParam: nextPageParam,
         };
     }, [loader.props.nextPageSelector]);
+    // useEffect(()=>{
+    //   console.log("TRANSFORM RESULT CHANGED", transformResult);
+    // }, [transformResult]);
     const { data, status, error, hasNextPage, isFetchingNextPage, hasPreviousPage, isFetchingPreviousPage, isFetching, refetch, fetchPreviousPage, fetchNextPage, } = (0, react_query_1.useInfiniteQuery)({
         queryKey,
         queryFn: (0, react_1.useCallback)((_a) => __awaiter(this, [_a], void 0, function* ({ signal, pageParam }) {

package/dist/scripts/src/components-core/utils/extractParam.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractParam = extractParam;
 exports.withStableObjectReference = withStableObjectReference;
 exports.shouldKeep = shouldKeep;
+exports.resolveAndCleanProps = resolveAndCleanProps;
 const react_1 = __importDefault(require("react"));
 const lodash_es_1 = require("lodash-es");
 const ParameterParser_1 = require("../script-runner/ParameterParser");
@@ -146,3 +147,46 @@ function shouldKeep(when, componentState, appContext) {
     }
     return extractParam(componentState, when, appContext, true);
 }
+/**
+ * Resolves props that can either be regular properties or URL resources.
+ * It also removes layoutCss props from regular properties.
+ * @param props Component (rest) props
+ * @param extractValue Value extractor function
+ * @param layoutCss Component styles
+ * @param resourceExtraction URL resource extractor function and array that specifies which props are URL resources
+ * @returns properties that are resolved and cleaned of CSS styles
+ */
+function resolveAndCleanProps(props, extractValue, layoutCss = {}, resourceExtraction) {
+    const { extractResourceUrl, resourceProps } = resourceExtraction !== null && resourceExtraction !== void 0 ? resourceExtraction : {};
+    const cleanedProps = cleanStyles(props, layoutCss);
+    const resultProps = {};
+    const result = Object.keys(cleanedProps).reduce((acc, propName) => {
+        if (resourceProps && extractResourceUrl && resourceProps.includes(propName)) {
+            acc[propName] = extractResourceUrl(cleanedProps[propName]);
+        }
+        else {
+            acc[propName] = extractValue(cleanedProps[propName]);
+        }
+        return acc;
+    }, resultProps);
+    return result;
+}
+/**
+ * Removes unnecessary style related properties so only layoutCss contains them.
+ * @param nodeProps properties to clean
+ * @param layoutCss which style properties to remove
+ * @returns only component-specific properties
+ */
+function cleanStyles(nodeProps, layoutCss = {}) {
+    if (nodeProps.hasOwnProperty("style")) {
+        delete nodeProps["style"];
+    }
+    if (nodeProps.hasOwnProperty("class")) {
+        delete nodeProps["class"];
+    }
+    return removeEntries(nodeProps, layoutCss);
+    function removeEntries(sourceObj, filterObj) {
+        const filterKeys = Object.keys(filterObj);
+        return Object.fromEntries(Object.entries(sourceObj).filter(([key]) => !filterKeys.includes(key)));
+    }
+}