xmlui 0.7.21 → 0.7.23

package/dist/scripts/src/components/container-helpers.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MemoizedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const constants_1 = require("@components-core/constants");
-const hooks_1 = require("@components-core/utils/hooks");
+const constants_1 = require("../components-core/constants");
+const hooks_1 = require("../components-core/utils/hooks");
 exports.MemoizedItem = (0, react_1.memo)(({ node, item, context, renderChild, layoutContext, contextVars = constants_1.EMPTY_OBJECT, itemKey = "$item", contextKey = "$context", }) => {
     const shallowMemoedContextVars = (0, hooks_1.useShallowCompareMemoize)(contextVars);
     const nodeWithItem = (0, react_1.useMemo)(() => {

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

@@ -48,10 +48,10 @@ exports.CompoundComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const misc_1 = require("@components-core/utils/misc");
+const misc_1 = require("./utils/misc");
 const hooks_1 = require("./utils/hooks");
 const lodash_es_1 = require("lodash-es");
-const constants_1 = require("@components-core/constants");
+const constants_1 = require("./constants");
 // Acts as a bridge between a compound component definition and its renderer.
 exports.CompoundComponent = (0, react_1.forwardRef)(({ node, lookupSyncCallback, lookupEventHandler, compound, api, scriptCollected, renderChild, extractValue, layoutContext, uid, updateState, }, forwardedRef) => {
     // --- Extract property values (resolve binding expressions)

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fragmentComponentRenderer = exports.FragmentMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
+const ComponentDefs_1 = require("../abstractions/ComponentDefs");
+const renderers_1 = require("./renderers");
 const COMP = "Fragment";
 exports.FragmentMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component encloses multiple child components into a single root component, so it can be used where only a single component definition is allowed.`,

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

@@ -9,12 +9,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_popper_1 = require("react-popper");
 const react_dom_1 = require("react-dom");
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const ModalDialogNative_1 = require("@components/ModalDialog/ModalDialogNative");
+const ThemeContext_1 = require("./theming/ThemeContext");
+const ModalDialogNative_1 = require("../components/ModalDialog/ModalDialogNative");
 const classnames_1 = __importDefault(require("classnames"));
-const XmluiCodeHighlighter_1 = require("@components-core/XmluiCodeHighlighter");
-const ButtonNative_1 = require("@components/Button/ButtonNative");
-const IconNative_1 = __importDefault(require("@components/Icon/IconNative"));
+const XmluiCodeHighlighter_1 = require("./XmluiCodeHighlighter");
+const ButtonNative_1 = require("../components/Button/ButtonNative");
+const IconNative_1 = __importDefault(require("../components/Icon/IconNative"));
 const InspectorButton_module_scss_1 = __importDefault(require("./InspectorButton.module.scss"));
 // --- The context object that is used to store the inspector information.
 const InspectorContext = (0, react_1.createContext)(null);

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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoaderComponent = LoaderComponent;
 const react_1 = require("react");
-const ComponentRegistryContext_1 = require("@components/ComponentRegistryContext");
+const ComponentRegistryContext_1 = require("../components/ComponentRegistryContext");
 const containers_1 = require("./abstractions/containers");
-const valueExtractor_1 = require("@components-core/rendering/valueExtractor");
-const hooks_1 = require("@components-core/utils/hooks");
+const valueExtractor_1 = require("./rendering/valueExtractor");
+const hooks_1 = require("./utils/hooks");
 function LoaderComponent({ node, state, dispatch, lookupAction, lookupSyncCallback, registerComponentApi, onUnmount, appContext, memoedVarsRef, }) {
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
     const uid = (0, react_1.useMemo)(() => Symbol(node.uid), [node.uid]);
@@ -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/RestApiProxy.js

@@ -43,10 +43,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_es_1 = require("lodash-es");
-const extractParam_1 = require("@components-core/utils/extractParam");
-const misc_1 = require("@components-core/utils/misc");
-const EngineError_1 = require("@components-core/EngineError");
-const process_statement_sync_1 = require("@components-core/script-runner/process-statement-sync");
+const extractParam_1 = require("./utils/extractParam");
+const misc_1 = require("./utils/misc");
+const EngineError_1 = require("./EngineError");
+const process_statement_sync_1 = require("./script-runner/process-statement-sync");
 function isAxiosResponse(response) {
     return "data" in response;
 }

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SlotHolder = exports.SlotMd = void 0;
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
+const ComponentDefs_1 = require("../abstractions/ComponentDefs");
+const renderers_1 = require("./renderers");
 const COMP = "Slot";
 exports.SlotMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",

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

@@ -99,12 +99,22 @@ function TableOfContentsProvider({ children }) {
             setActiveAnchorId,
         };
     }, [registerHeading, sortedHeadings, observeIntersection, activeId, setActiveAnchorId]);
-    return (0, jsx_runtime_1.jsx)(exports.TableOfContentsContext.Provider, { value: contextValue, children: children });
+    return ((0, jsx_runtime_1.jsx)(exports.TableOfContentsContext.Provider, { value: contextValue, children: 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/XmluiCodeHighlighter.js

@@ -50,9 +50,9 @@ exports.XmluiCodeHighlighter = XmluiCodeHighlighter;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const XmluiCodeHighlighter_module_scss_1 = __importDefault(require("./XmluiCodeHighlighter.module.scss"));
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const ThemeContext_1 = require("./theming/ThemeContext");
 const classnames_1 = __importDefault(require("classnames"));
-const renderers_1 = require("@components-core/renderers");
+const renderers_1 = require("./renderers");
 let highlighter = null;
 function XmluiCodeHighlighter({ value }) {
     const { activeThemeTone } = (0, ThemeContext_1.useTheme)();

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

@@ -15,11 +15,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.apiAction = void 0;
 exports.callApi = callApi;
 const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
-const RestApiProxy_1 = __importDefault(require("@components-core/RestApiProxy"));
-const actionUtils_1 = require("@components-core/utils/actionUtils");
-const extractParam_1 = require("@components-core/utils/extractParam");
 const immer_1 = require("immer");
-const misc_1 = require("@components-core/utils/misc");
+const actionUtils_1 = require("../utils/actionUtils");
+const extractParam_1 = require("../utils/extractParam");
+const misc_1 = require("../utils/misc");
+const RestApiProxy_1 = __importDefault(require("../RestApiProxy"));
 const actions_1 = require("./actions");
 function findQueryKeysToUpdate(updates, queryClient) {
     const queryKeysToUpdate = [];
@@ -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/action/FileDownloadAction.js

@@ -13,8 +13,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.downloadAction = void 0;
+const RestApiProxy_1 = __importDefault(require("../RestApiProxy"));
 const actions_1 = require("./actions");
-const RestApiProxy_1 = __importDefault(require("@components-core/RestApiProxy"));
 function download(_a, _b) {
     return __awaiter(this, arguments, void 0, function* ({ state, appContext }, { params, url, queryParams, method, rawBody, body, fileName, headers, }, { resolveBindingExpressions } = {}) {
         var _c;

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

@@ -13,10 +13,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.uploadAction = void 0;
+const extractParam_1 = require("../utils/extractParam");
+const actionUtils_1 = require("../utils/actionUtils");
+const RestApiProxy_1 = __importDefault(require("../RestApiProxy"));
 const actions_1 = require("./actions");
-const RestApiProxy_1 = __importDefault(require("@components-core/RestApiProxy"));
-const extractParam_1 = require("@components-core/utils/extractParam");
-const actionUtils_1 = require("@components-core/utils/actionUtils");
 function uploadFile(_a, _b) {
     return __awaiter(this, arguments, void 0, function* ({ appContext, state, lookupAction, uid }, { params, invalidates, onError, queryParams, asForm, file, headers, url, method, formParams, rawBody, body, chunkSizeInBytes, onProgress, }, { resolveBindingExpressions } = {}) {
         const stateContext = Object.assign(Object.assign({}, params), state);

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.navigateAction = void 0;
+const component_utils_1 = require("../../components/component-utils");
 const actions_1 = require("./actions");
-const component_utils_1 = require("@components/component-utils");
 function navigate({ navigate, location }, pathname, queryParams) {
     // https://stackoverflow.com/questions/37385570/how-to-know-if-react-router-can-go-back-to-display-back-button-in-react-app
     if (pathname === -1 && location.key === "default") {

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

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.timedAction = void 0;
-const misc_1 = require("@components-core/utils/misc");
+const misc_1 = require("../utils/misc");
 const actions_1 = require("./actions");
 function delay(_executionContext, timeoutInMs, callback) {
     return __awaiter(this, void 0, void 0, function* () {

package/dist/scripts/src/components-core/component-hooks.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useContentAlignment = useContentAlignment;
 const react_1 = require("react");
-const Stack_module_scss_1 = __importDefault(require("@components/Stack/Stack.module.scss"));
-const misc_1 = require("@components-core/utils/misc");
+const Stack_module_scss_1 = __importDefault(require("../components/Stack/Stack.module.scss"));
+const misc_1 = require("./utils/misc");
 // This react hooks prepares CSS style values according to the CSS flex semantics to combine orientation,
 // horizontal, and vertical alignments.
 function useContentAlignment(orientation, horizontal, vertical) {

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

@@ -69,4 +69,5 @@ exports.layoutOptionKeys = [
     "bottom",
     "left",
     "zoom",
+    "whiteSpace"
 ];

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

@@ -12,12 +12,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.apiLoaderRenderer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const misc_1 = require("../utils/misc");
+const extractParam_1 = require("../utils/extractParam");
+const renderers_1 = require("../renderers");
+const AppContext_1 = require("../AppContext");
 const Loader_1 = require("./Loader");
-const misc_1 = require("@components-core/utils/misc");
-const extractParam_1 = require("@components-core/utils/extractParam");
-const renderers_1 = require("@components-core/renderers");
-const AppContext_1 = require("@components-core/AppContext");
 /**
  * Represents a non-displayed React component, which handles the specified API loader
  */

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

@@ -16,15 +16,15 @@ exports.dataLoaderRenderer = exports.DataLoaderMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const RestApiProxy_1 = __importDefault(require("@components-core/RestApiProxy"));
-const extractParam_1 = require("@components-core/utils/extractParam");
-const DataLoaderQueryKeyGenerator_1 = require("@components-core/utils/DataLoaderQueryKeyGenerator");
-const PageableLoader_1 = require("@components-core/loader/PageableLoader");
-const Loader_1 = require("@components-core/loader/Loader");
-const AppContext_1 = require("@components-core/AppContext");
-const hooks_1 = require("@components-core/utils/hooks");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../renderers");
+const RestApiProxy_1 = __importDefault(require("../RestApiProxy"));
+const extractParam_1 = require("../utils/extractParam");
+const DataLoaderQueryKeyGenerator_1 = require("../utils/DataLoaderQueryKeyGenerator");
+const PageableLoader_1 = require("../loader/PageableLoader");
+const Loader_1 = require("../loader/Loader");
+const AppContext_1 = require("../AppContext");
+const hooks_1 = require("../utils/hooks");
 function DataLoader({ loader, state, registerComponentApi, onLoaded, onError, loaderInProgressChanged, loaderLoaded, loaderError, transformResult, }) {
     const appContext = (0, AppContext_1.useAppContext)();
     const url = (0, extractParam_1.extractParam)(state, loader.props.url, appContext);
@@ -32,6 +32,14 @@ function DataLoader({ loader, state, registerComponentApi, onLoaded, onError, lo
         return (0, extractParam_1.extractParam)(state, loader.props.queryParams, appContext);
     }, [appContext, loader.props.queryParams, state]);
     const queryParams = (0, hooks_1.useShallowCompareMemoize)(queryParamsInner);
+    const bodyInner = (0, react_1.useMemo)(() => {
+        return (0, extractParam_1.extractParam)(state, loader.props.body, appContext);
+    }, [appContext, loader.props.body, state]);
+    const body = (0, hooks_1.useShallowCompareMemoize)(bodyInner);
+    const rawBodyInner = (0, react_1.useMemo)(() => {
+        return (0, extractParam_1.extractParam)(state, loader.props.rawBody, appContext);
+    }, [appContext, loader.props.rawBody, state]);
+    const rawBody = (0, hooks_1.useShallowCompareMemoize)(rawBodyInner);
     const pagingDirection = (0, react_1.useMemo)(() => {
         if (loader.props.prevPageSelector && loader.props.nextPageSelector) {
             return "BIDIRECTIONAL";
@@ -57,7 +65,7 @@ function DataLoader({ loader, state, registerComponentApi, onLoaded, onError, lo
         });
     }), [api, loader.props, state]);
     const queryId = (0, react_1.useMemo)(() => {
-        return new DataLoaderQueryKeyGenerator_1.DataLoaderQueryKeyGenerator(url, queryParams, appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals.apiUrl).asKey();
+        return new DataLoaderQueryKeyGenerator_1.DataLoaderQueryKeyGenerator(url, queryParams, appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals.apiUrl, body, rawBody).asKey();
     }, [appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals.apiUrl, queryParams, url]);
     const stateRef = (0, react_1.useRef)({ state, appContext });
     stateRef.current = { state, appContext };

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

@@ -12,12 +12,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.externalDataLoaderRenderer = exports.ExternalDataLoaderMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const misc_1 = require("../utils/misc");
+const extractParam_1 = require("../utils/extractParam");
+const renderers_1 = require("../renderers");
+const AppContext_1 = require("../AppContext");
 const Loader_1 = require("./Loader");
-const misc_1 = require("@components-core/utils/misc");
-const extractParam_1 = require("@components-core/utils/extractParam");
-const renderers_1 = require("@components-core/renderers");
-const AppContext_1 = require("@components-core/AppContext");
 /**
  * Represents a non-displayed React component, which handles the specified API loader
  */

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

@@ -12,10 +12,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = Loader;
 const react_1 = require("react");
 const react_query_1 = require("@tanstack/react-query");
-const extractParam_1 = require("@components-core/utils/extractParam");
 const immer_1 = require("immer");
-const AppContext_1 = require("@components-core/AppContext");
-const hooks_1 = require("@components-core/utils/hooks");
+const extractParam_1 = require("../utils/extractParam");
+const AppContext_1 = require("../AppContext");
+const hooks_1 = require("../utils/hooks");
 function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, registerComponentApi, onLoaded, loaderLoaded, loaderInProgressChanged, loaderError, transformResult }) {
     const { uid } = loader;
     const appContext = (0, AppContext_1.useAppContext)();

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

@@ -12,12 +12,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.mockLoaderRenderer = exports.MockLoaderMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const misc_1 = require("../utils/misc");
+const extractParam_1 = require("../utils/extractParam");
+const renderers_1 = require("../renderers");
+const AppContext_1 = require("../AppContext");
 const Loader_1 = require("./Loader");
-const misc_1 = require("@components-core/utils/misc");
-const extractParam_1 = require("@components-core/utils/extractParam");
-const renderers_1 = require("@components-core/renderers");
-const AppContext_1 = require("@components-core/AppContext");
 function ApiLoader({ loader, loaderInProgressChanged, loaderError, loaderLoaded, state, }) {
     const appContext = (0, AppContext_1.useAppContext)();
     const waitTime = (0, extractParam_1.extractParam)(state, loader.props.waitTime, appContext);

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

@@ -46,9 +46,9 @@ exports.PageableLoader = PageableLoader;
 const react_1 = require("react");
 const react_query_1 = require("@tanstack/react-query");
 const immer_1 = __importStar(require("immer"));
-const extractParam_1 = require("@components-core/utils/extractParam");
-const AppContext_1 = require("@components-core/AppContext");
-const hooks_1 = require("@components-core/utils/hooks");
+const extractParam_1 = require("../utils/extractParam");
+const AppContext_1 = require("../AppContext");
+const hooks_1 = require("../utils/hooks");
 function PageableLoader({ state, loader, loaderFn, queryId, registerComponentApi, pollIntervalInSeconds, onLoaded, loaderInProgressChanged, loaderLoaded, loaderError, transformResult, }) {
     const { uid } = loader;
     const appContext = (0, AppContext_1.useAppContext)();
@@ -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/rendering/ComponentAdapter.js

@@ -49,25 +49,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const UnknownComponent_1 = __importDefault(require("./UnknownComponent"));
-const InvalidComponent_1 = __importDefault(require("./InvalidComponent"));
 const lodash_es_1 = require("lodash-es");
-const extractParam_1 = require("../utils/extractParam");
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const mergeProps_1 = require("@components-core/utils/mergeProps");
-const ComponentDecorator_1 = __importDefault(require("@components-core/ComponentDecorator"));
-const valueExtractor_1 = require("@components-core/rendering/valueExtractor");
-const constants_1 = require("@components-core/constants");
-const ComponentRegistryContext_1 = require("@components/ComponentRegistryContext");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const ApiBoundComponent_1 = require("@components-core/ApiBoundComponent");
+const extractParam_1 = require("../utils/extractParam");
+const ThemeContext_1 = require("../theming/ThemeContext");
+const mergeProps_1 = require("../utils/mergeProps");
+const ComponentDecorator_1 = __importDefault(require("../ComponentDecorator"));
+const valueExtractor_1 = require("../rendering/valueExtractor");
+const constants_1 = require("../constants");
+const ComponentRegistryContext_1 = require("../../components/ComponentRegistryContext");
+const ApiBoundComponent_1 = require("../ApiBoundComponent");
 const hooks_1 = require("../utils/hooks");
 const containers_1 = require("../abstractions/containers");
-const InspectorContext_1 = require("@components-core/InspectorContext");
-const SlotItem_1 = require("@components/SlotItem");
-const descriptorHelper_1 = require("@components-core/descriptorHelper");
-const style_compiler_1 = require("../../parsers/style-parser/style-compiler");
+const InspectorContext_1 = require("../InspectorContext");
+const SlotItem_1 = require("../../components/SlotItem");
+const descriptorHelper_1 = require("../descriptorHelper");
 const event_handlers_1 = require("../event-handlers");
+const UnknownComponent_1 = __importDefault(require("./UnknownComponent"));
+const InvalidComponent_1 = __importDefault(require("./InvalidComponent"));
+const layout_resolver_1 = require("../theming/layout-resolver");
 /**
  * This component's primary responsibility is to transform a particular component definition
  * into its React representation using the current rendering context.
@@ -164,7 +164,13 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
                 resolvedLayoutProps[key] = valueExtractor(safeNode.props[key], true);
             }
         });
-        return (0, style_compiler_1.compileLayout)(resolvedLayoutProps, themeVars, Object.assign(Object.assign({}, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current), { mediaSize: appContext.mediaSize }));
+        // --- New layout property resolution
+        return (0, layout_resolver_1.resolveLayoutProps)(resolvedLayoutProps, Object.assign(Object.assign({}, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current), { mediaSize: appContext.mediaSize }));
+        // --- Old layout property resolution
+        // return compileLayout(resolvedLayoutProps, themeVars, {
+        //   ...layoutContextRef?.current,
+        //   mediaSize: appContext.mediaSize,
+        // });
     }, [appContext.mediaSize, layoutContextRef, safeNode.props, themeVars, valueExtractor]);
     // --- As compileLayout generates new cssProps and nonCssProps objects every time, we need to
     // --- memoize them using shallow comparison to avoid unnecessary re-renders.

package/dist/scripts/src/components-core/rendering/ComponentWrapper.js

@@ -17,9 +17,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ComponentAdapter_1 = __importDefault(require("./ComponentAdapter"));
-const extractParam_1 = require("@components-core/utils/extractParam");
+const extractParam_1 = require("../utils/extractParam");
 const ContainerWrapper_1 = require("./ContainerWrapper");
+const ComponentAdapter_1 = __importDefault(require("./ComponentAdapter"));
 /**
  * The ComponentNode it the outermost React component wrapping an xmlui component.
  */

package/dist/scripts/src/components-core/rendering/Container.js

@@ -47,26 +47,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const containers_1 = require("@components-core/abstractions/containers");
-const AppContext_1 = require("@components-core/AppContext");
-const buildProxy_1 = require("@components-core/rendering/buildProxy");
-const DebugViewProvider_1 = require("@components-core/DebugViewProvider");
-const process_statement_async_1 = require("@components-core/script-runner/process-statement-async");
-const process_statement_sync_1 = require("@components-core/script-runner/process-statement-sync");
-const extractParam_1 = require("@components-core/utils/extractParam");
-const hooks_1 = require("@components-core/utils/hooks");
-const misc_1 = require("@components-core/utils/misc");
-const statementUtils_1 = require("@components-core/utils/statementUtils");
-const StateViewerNative_1 = require("@components/StateViewer/StateViewerNative");
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
 const lodash_es_1 = require("lodash-es");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const memoize_one_1 = __importDefault(require("memoize-one"));
-const react_1 = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
+const containers_1 = require("../abstractions/containers");
+const AppContext_1 = require("../AppContext");
+const buildProxy_1 = require("../rendering/buildProxy");
+const DebugViewProvider_1 = require("../DebugViewProvider");
+const process_statement_async_1 = require("../script-runner/process-statement-async");
+const process_statement_sync_1 = require("../script-runner/process-statement-sync");
+const extractParam_1 = require("../utils/extractParam");
+const hooks_1 = require("../utils/hooks");
+const misc_1 = require("../utils/misc");
+const statementUtils_1 = require("../utils/statementUtils");
+const StateViewerNative_1 = require("../../components/StateViewer/StateViewerNative");
 const renderChild_1 = require("./renderChild");
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const LoaderComponent_1 = require("@components-core/LoaderComponent");
-const constants_1 = require("@components-core/constants");
+const ThemeContext_1 = require("../theming/ThemeContext");
+const LoaderComponent_1 = require("../LoaderComponent");
+const constants_1 = require("../constants");
 // React component to display a view container and implement its behavior
 exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container({ node, componentState, dispatch: containerDispatch, parentDispatch, resolvedKey, version, setVersion, statePartChanged, registerComponentApi: containerRegisterComponentApi, parentRegisterComponentApi, layoutContextRef, parentRenderContext, memoedVarsRef, isImplicit, uidInfoRef: parentUidInfoRef, }, ref) {
     var _a;

package/dist/scripts/src/components-core/rendering/ContainerWrapper.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContainerWrapper = void 0;
 exports.isContainerLike = isContainerLike;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ErrorBoundary_1 = require("@components-core/rendering/ErrorBoundary");
 const react_1 = require("react");
+const ErrorBoundary_1 = require("../rendering/ErrorBoundary");
 const StateContainer_1 = require("./StateContainer");
 /**
  * This function checks if a particular component needs a wrapping container to

package/dist/scripts/src/components-core/rendering/InvalidComponent.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const InvalidComponent_module_scss_1 = __importDefault(require("./InvalidComponent.module.scss"));
-const constants_1 = require("@components-core/constants");
+const constants_1 = require("../constants");
 /**
  * This component displays run time errors found while the rendering engine
  * runs. If it finds an issue that hinders regular operation, it renders this

package/dist/scripts/src/components-core/rendering/StateContainer.js

@@ -5,26 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StateContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const immer_1 = __importDefault(require("immer"));
 const lodash_es_1 = require("lodash-es");
 const memoize_one_1 = __importDefault(require("memoize-one"));
-const containers_1 = require("@components-core/abstractions/containers");
-const constants_1 = require("@components-core/constants");
-const collectFnVarDeps_1 = require("@components-core/rendering/collectFnVarDeps");
-const reducer_1 = require("@components-core/rendering/reducer");
-const DebugViewProvider_1 = require("@components-core/DebugViewProvider");
-const ErrorBoundary_1 = require("@components-core/rendering/ErrorBoundary");
-const visitors_1 = require("@components-core/script-runner/visitors");
-const hooks_1 = require("@components-core/utils/hooks");
-const react_1 = require("react");
-const Container_1 = require("./Container");
 const react_2 = require("@remix-run/react");
+const containers_1 = require("../abstractions/containers");
+const constants_1 = require("../constants");
+const collectFnVarDeps_1 = require("../rendering/collectFnVarDeps");
+const reducer_1 = require("../rendering/reducer");
+const DebugViewProvider_1 = require("../DebugViewProvider");
+const ErrorBoundary_1 = require("../rendering/ErrorBoundary");
+const visitors_1 = require("../script-runner/visitors");
+const hooks_1 = require("../utils/hooks");
+const Container_1 = require("./Container");
 const code_behind_collect_1 = require("../../parsers/scripting/code-behind-collect");
-const AppContext_1 = require("@components-core/AppContext");
-const ParameterParser_1 = require("@components-core/script-runner/ParameterParser");
-const eval_tree_sync_1 = require("@components-core/script-runner/eval-tree-sync");
-const extractParam_1 = require("@components-core/utils/extractParam");
-const misc_1 = require("@components-core/utils/misc");
+const AppContext_1 = require("../AppContext");
+const ParameterParser_1 = require("../script-runner/ParameterParser");
+const eval_tree_sync_1 = require("../script-runner/eval-tree-sync");
+const extractParam_1 = require("../utils/extractParam");
+const misc_1 = require("../utils/misc");
 // A React component that wraps a view container into an error boundary
 // (it's a named function inside the memo, this way it will be visible with that name in the react devtools)
 exports.StateContainer = (0, react_1.memo)((0, react_1.forwardRef)(function StateContainer({ node, resolvedKey, parentState, parentStatePartChanged, parentRegisterComponentApi, parentDispatch, parentRenderContext, layoutContextRef, uidInfoRef, isImplicit, }, ref) {