xmlui 0.4.0

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

@@ -0,0 +1,189 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiBoundComponent = ApiBoundComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+function ApiBoundComponent({ uid, node, apiBoundProps, apiBoundEvents, renderChild, layoutContextRef, dynamicChildren, }) {
+    const wrappedWithAdapter = (0, react_1.useMemo)(() => {
+        function generateloaderUid(key) {
+            return `${node.uid}_data_${key}`;
+        }
+        const loaders = [...(node.loaders || [])];
+        const events = Object.assign({}, (node.events || {}));
+        const props = Object.assign({}, (node.props || {}));
+        const vars = Object.assign({}, (node.vars || {}));
+        const api = Object.assign({}, (node.api || {}));
+        apiBoundEvents.forEach((key) => {
+            const { type } = node.events[key];
+            switch (type) {
+                case "UploadAction": {
+                    const actionComponent = node.events[key];
+                    const { invalidates, asForm, formParams, queryParams, rawBody, body, url, headers, method, file } = actionComponent.props;
+                    const { success, error } = actionComponent.events || {};
+                    events[key] = `(eventArgs) => {
+            return Actions.upload({
+              asForm: ${JSON.stringify(asForm)}, 
+              formParams: ${JSON.stringify(formParams)}, 
+              queryParams: ${JSON.stringify(queryParams)}, 
+              rawBody: ${JSON.stringify(rawBody)}, 
+              body: ${JSON.stringify(body)}, 
+              url: ${JSON.stringify(url)}, 
+              headers: ${JSON.stringify(headers)}, 
+              method: ${JSON.stringify(method)}, 
+              file: ${JSON.stringify(file)}, 
+              params: { '$eventArgs': eventArgs }, 
+              onError: ${JSON.stringify(error)}, 
+              onSuccess: ${JSON.stringify(success)}, 
+              onProgress: eventArgs.onProgress, 
+              invalidates: ${invalidates === undefined ? undefined : JSON.stringify(invalidates)}  }, { resolveBindingExpressions: true });
+          }`;
+                    break;
+                }
+                case "DownloadAction": {
+                    const actionComponent = node.events[key];
+                    const { url, queryParams, rawBody, body, headers, method, fileName } = actionComponent.props;
+                    events[key] = `(eventArgs) => {
+            return Actions.download({
+              queryParams: ${JSON.stringify(queryParams)}, 
+              rawBody: ${JSON.stringify(rawBody)}, 
+              body: ${JSON.stringify(body)}, 
+              url: ${JSON.stringify(url)}, 
+              headers: ${JSON.stringify(headers)}, 
+              method: ${JSON.stringify(method)}, 
+              fileName: ${JSON.stringify(fileName)}, 
+              params: { '$eventArgs': eventArgs },
+            }, { resolveBindingExpressions: true });
+          }`;
+                    break;
+                }
+                case "ApiAction": {
+                    const actionComponent = node.events[key];
+                    const { when, uid } = actionComponent;
+                    const { confirmTitle, confirmMessage, confirmButtonLabel, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage, invalidates, updates, optimisticValue, getOptimisticValue, headers, payloadType, method, url, queryParams, rawBody, body, } = actionComponent.props;
+                    const { success, error, progress, beforeRequest } = actionComponent.events || {};
+                    events[key] = `(eventArgs, options) => {
+            return Actions.callApi({
+              uid: ${JSON.stringify(uid)},
+              headers: ${JSON.stringify(headers)}, 
+              method: ${JSON.stringify(method)}, 
+              url: ${JSON.stringify(url)}, 
+              queryParams: ${JSON.stringify(queryParams)}, 
+              rawBody: ${JSON.stringify(rawBody)}, 
+              body: ${JSON.stringify(body)} || (options?.passAsDefaultBody ? eventArgs : undefined), 
+              confirmTitle: ${JSON.stringify(confirmTitle)}, 
+              confirmMessage: ${JSON.stringify(confirmMessage)}, 
+              confirmButtonLabel: ${JSON.stringify(confirmButtonLabel)}, 
+              inProgressNotificationMessage: ${JSON.stringify(inProgressNotificationMessage)}, 
+              completedNotificationMessage: ${JSON.stringify(completedNotificationMessage)}, 
+              errorNotificationMessage: ${JSON.stringify(errorNotificationMessage)}, 
+              params: { '$eventArgs': eventArgs }, 
+              onError: ${JSON.stringify(error)}, 
+              onProgress: ${JSON.stringify(progress)}, 
+              beforeRequest: ${JSON.stringify(beforeRequest)}, 
+              onSuccess: ${JSON.stringify(success)}, 
+              updates: ${JSON.stringify(updates)}, 
+              optimisticValue: ${JSON.stringify(optimisticValue)}, 
+              payloadType: ${JSON.stringify(payloadType)}, 
+              getOptimisticValue: ${JSON.stringify(getOptimisticValue)}, 
+              invalidates: ${invalidates === undefined ? undefined : JSON.stringify(invalidates)}, 
+              when: ${when === undefined ? undefined : JSON.stringify(when)} }, { resolveBindingExpressions: true });
+          }`;
+                    break;
+                }
+                default: {
+                    throw new Error("Unknown event handler component type: ", type);
+                }
+            }
+        });
+        apiBoundProps.forEach((key) => {
+            const loaderUid = generateloaderUid(key);
+            const _a = node.props[key].props || node.props[key], { transformResult } = _a, operation = __rest(_a, ["transformResult"]);
+            const loaderEvents = {};
+            Object.entries(node.events || {}).forEach(([eventKey, value]) => {
+                if (eventKey.startsWith(key)) {
+                    const capitalizedEventName = eventKey.substring(key.length);
+                    const eventName = capitalizedEventName.charAt(0).toLowerCase() + capitalizedEventName.slice(1);
+                    loaderEvents[eventName] = value;
+                }
+            });
+            loaders.push({
+                type: "DataLoader",
+                uid: loaderUid,
+                props: Object.assign({}, operation),
+                events: loaderEvents,
+            });
+            if (transformResult) {
+                vars[`transform_${loaderUid}`] = transformResult;
+            }
+            api[`fetch_${key}`] = `() => { ${loaderUid}.refetch(); }`;
+            api[`update_${key}`] = `(updaterFn) => { ${loaderUid}.update(updaterFn); }`;
+            api[`addItem_${key}`] = `(element, index) => {  ${loaderUid}.addItem(element, index); }`;
+            api[`getItems_${key}`] = `() => { return ${loaderUid}.getItems(); }`;
+            api[`deleteItem_${key}`] = `(element) => { ${loaderUid}.deleteItem(element); }`;
+            let propKey = key;
+            if (key === "datasource") {
+                props[key] = undefined;
+                propKey = "data";
+            }
+            props[propKey] = `{ !!transform_${loaderUid} ? transform_${loaderUid}(${loaderUid}.value) : ${loaderUid}.value }`;
+            props.loading = `{${loaderUid}.inProgress}`;
+            props.pageInfo = `{${loaderUid}.pageInfo}`;
+            events.requestFetchPrevPage = `${loaderUid}.fetchPrevPage()`;
+            events.requestFetchNextPage = `${loaderUid}.fetchNextPage()`;
+        });
+        const wrapped = Object.assign(Object.assign({}, node), { containerUid: uid, apiBoundContainer: true, props,
+            events });
+        if (loaders.length) {
+            //to make sure that we don't wrap the component with a container if we don't have to
+            wrapped.loaders = loaders;
+        }
+        if (Object.keys(vars).length) {
+            //to make sure that we don't wrap the component with a container if we don't have to
+            wrapped.vars = vars;
+        }
+        if (Object.keys(api).length) {
+            //to make sure that we don't wrap the component with a container if we don't have to
+            wrapped.api = api;
+        }
+        return wrapped;
+    }, [apiBoundEvents, apiBoundProps, node, uid]);
+    // useEffect(() => {
+    //   console.log("wrapped with adapter changed", wrappedWithAdapter);
+    // }, [wrappedWithAdapter]);
+    const renderedChild = renderChild(wrappedWithAdapter, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current, dynamicChildren);
+    return react_1.default.isValidElement(renderedChild) ? renderedChild : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderedChild });
+}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppContext = void 0;
+exports.useAppContext = useAppContext;
+const react_1 = require("react");
+/**
+ * This object provides the React context of the application services, which we pass the root component, and thus all
+ * nested apps and components may use it.
+ */
+exports.AppContext = (0, react_1.createContext)(undefined);
+/**
+ * This React hook makes the current context of application services available within any component logic using
+ * the hook.
+ */
+function useAppContext() {
+    return (0, react_1.useContext)(exports.AppContext);
+}

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.childrenSlotHolder = exports.metadata = void 0;
+const renderers_1 = require("@components-core/renderers");
+exports.metadata = {
+    displayName: "ChildrenSlot",
+    description: "Placeholder in a reusable component. " +
+        "Signs the slot where the component's injected children should be rendered.",
+};
+exports.childrenSlotHolder = (0, renderers_1.createPropHolderComponent)("ChildrenSlot", exports.metadata);

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

@@ -0,0 +1,280 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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/container/valueExtractor");
+const constants_1 = require("@components-core/constants");
+const ViewComponentRegistryContext_1 = require("@components/ViewComponentRegistryContext");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const ApiBoundComponent_1 = require("@components-core/ApiBoundComponent");
+const hooks_1 = require("./utils/hooks");
+const containers_1 = require("./abstractions/containers");
+function useEventHandler(eventName, lookupEvent, shouldSkip) {
+    const onEvent = shouldSkip ? undefined : lookupEvent(eventName);
+    const eventHandler = (0, react_1.useCallback)((event) => {
+        if (onEvent) {
+            event.stopPropagation();
+            onEvent(event);
+        }
+    }, [onEvent]);
+    return !onEvent ? undefined : eventHandler;
+}
+function useMouseEventHandlers(lookupEvent, shouldSkip) {
+    const onClick = useEventHandler("click", lookupEvent, shouldSkip);
+    const onMouseLeave = useEventHandler("mouseLeave", lookupEvent, shouldSkip);
+    const onMouseEnter = useEventHandler("mouseEnter", lookupEvent, shouldSkip);
+    const onDoubleClick = useEventHandler("doubleClick", lookupEvent, shouldSkip);
+    if (shouldSkip) {
+        return constants_1.EMPTY_OBJECT;
+    }
+    return {
+        onClick,
+        onMouseLeave,
+        onMouseEnter,
+        onDoubleClick,
+    };
+}
+/**
+ * This component's primary responsibility is to transform a particular component definition
+ * into its React representation using the current rendering context.
+ *
+ * Its properties hold a transformed version of an `InnerRendererContext` (which describes the
+ * current rendering context). The modified version uses a stable reference to the layout context
+ * and provides a cleanup function (`onUnmount`) to call when the component is about to be disposed.
+ */
+const Component = (0, react_1.forwardRef)(function Component(_a, ref) {
+    var _b;
+    var { node, state, appContext, dispatch, lookupAction, lookupSyncCallback, renderChild, registerComponentApi, layoutCss, layoutNonCss, layoutContextRef, dynamicChildren, memoedVarsRef, onUnmount, childIndex } = _a, rest = __rest(_a, ["node", "state", "appContext", "dispatch", "lookupAction", "lookupSyncCallback", "renderChild", "registerComponentApi", "layoutCss", "layoutNonCss", "layoutContextRef", "dynamicChildren", "memoedVarsRef", "onUnmount", "childIndex"]);
+    // --- Memoizes the node object with a safe version that contains empty objects for props and events
+    // --- were they no props or events defined
+    const safeNode = (0, react_1.useMemo)(() => {
+        return Object.assign(Object.assign({}, node), { props: node.props || constants_1.EMPTY_OBJECT, events: node.events || constants_1.EMPTY_OBJECT });
+    }, [node]);
+    // --- Each component receives a unique identifier
+    const uid = (0, react_1.useMemo)(() => Symbol(safeNode.uid), [safeNode.uid]);
+    // --- Takes care the component cleanup function is called when the component is about to be disposed
+    (0, react_1.useEffect)(() => {
+        return () => {
+            onUnmount(uid);
+        };
+    }, [onUnmount, uid]);
+    const componentRegistry = (0, ViewComponentRegistryContext_1.useComponentRegistry)();
+    const { getResourceUrl } = (0, ThemeContext_1.useTheme)();
+    // --- Memoizes component API registration
+    const memoedRegisterComponentApi = (0, react_1.useCallback)((api) => {
+        registerComponentApi(uid, api);
+    }, [registerComponentApi, uid]);
+    // --- Memoizes the state update function
+    const memoedUpdateState = (0, react_1.useCallback)((componentState) => {
+        dispatch(componentStateChanged(uid, componentState));
+    }, [dispatch, uid]);
+    // --- Memoizes the action resolution by action definition value
+    const memoedLookupAction = (0, react_1.useCallback)((action, actionOptions) => {
+        return lookupAction(action, uid, actionOptions);
+    }, [lookupAction, uid]);
+    // --- Memoizes the lookupSyncCallback function's call
+    const memoedLookupSyncCallback = (0, react_1.useCallback)((action) => {
+        return lookupSyncCallback(action, uid);
+    }, [lookupSyncCallback, uid]);
+    // --- Memoizes event handler resolution by event name
+    const memoedLookupEventHandler = (0, react_1.useCallback)((eventName, actionOptions) => {
+        var _a;
+        const action = (_a = safeNode.events) === null || _a === void 0 ? void 0 : _a[eventName];
+        return lookupAction(action, uid, Object.assign({ eventName }, actionOptions));
+    }, [lookupAction, safeNode.events, uid]);
+    // --- Get the tracked APIs of the compomnent
+    const referenceTrackedApi = (0, hooks_1.useReferenceTrackedApi)(state);
+    // --- Memoizes the value extractor object
+    const valueExtractor = (0, react_1.useMemo)(() => {
+        return (0, valueExtractor_1.createValueExtractor)(state, appContext, referenceTrackedApi, memoedVarsRef);
+    }, [appContext, memoedVarsRef, referenceTrackedApi, state]);
+    // --- Memoizes the resource URL extraction function
+    const extractResourceUrl = (0, react_1.useCallback)((url) => {
+        const extractedUrl = valueExtractor(url);
+        return getResourceUrl(extractedUrl);
+    }, [getResourceUrl, valueExtractor]);
+    // --- Obtain the component renderer and descriptor from the component registry
+    const { renderer, descriptor, isCompoundComponent } = componentRegistry.lookupComponentRenderer(safeNode.type) || {};
+    // --- Memoizes the renderChild function
+    const memoedRenderChild = (0, react_1.useCallback)((children, lc, rc) => {
+        return renderChild(children, lc, rc || dynamicChildren);
+    }, [renderChild, dynamicChildren]);
+    // --- Memoizes the node object with the resolved children. If the children contain a `ChildrenSlot`,
+    // --- the resolved children (DynamicChildComponentDef) are used instead of the original children.
+    const memoedNode = (0, react_1.useMemo)(() => {
+        const children = [];
+        let didResolve = false;
+        if (Array.isArray(safeNode.children)) {
+            safeNode.children.forEach((child) => {
+                if (child.type === "ChildrenSlot") {
+                    didResolve = true;
+                    if (dynamicChildren) {
+                        children.push(...dynamicChildren);
+                    }
+                }
+                else {
+                    children.push(child);
+                }
+            });
+        }
+        // --- Because of performance reasons, we only return the changed `safeNode` if we resolve the
+        // --- rendered children to a `ChildrenSlot`; otherwise, we return the original reference.
+        if (didResolve) {
+            return Object.assign(Object.assign({}, safeNode), { children });
+        }
+        return safeNode;
+    }, [safeNode, dynamicChildren]);
+    const apiBoundProps = (0, react_1.useMemo)(() => getApiBoundItems(safeNode.props, "Datasource"), [safeNode.props]);
+    const apiBoundEvents = (0, react_1.useMemo)(() => getApiBoundItems(safeNode.events, "ApiAction", "DownloadAction", "UploadAction"), [safeNode.events]);
+    const isApiBound = apiBoundProps.length > 0 || apiBoundEvents.length > 0;
+    const mouseEventHandlers = useMouseEventHandlers(memoedLookupEventHandler, (descriptor === null || descriptor === void 0 ? void 0 : descriptor.nonVisual) || isApiBound);
+    // --- API-bound components provide helpful behavior out of the box, such as transforming API-bound
+    // --- events and properties. This extra functionality is implemented in `ApiBoundComponent`.
+    if (isApiBound) {
+        return ((0, jsx_runtime_1.jsx)(ApiBoundComponent_1.ApiBoundComponent, { uid: uid, renderChild: memoedRenderChild, node: memoedNode, apiBoundEvents: apiBoundEvents, apiBoundProps: apiBoundProps, layoutContextRef: layoutContextRef, dynamicChildren: dynamicChildren }, safeNode.uid));
+    }
+    // --- No special behavior, let's render the component according to its definition.
+    let renderedNode = null;
+    let renderingError = null;
+    try {
+        // --- Assemble the renderer context we pass down the rendering chain
+        const rendererContext = {
+            node: memoedNode,
+            state: state[uid] || constants_1.EMPTY_OBJECT,
+            updateState: memoedUpdateState,
+            appContext,
+            extractValue: valueExtractor,
+            lookupEventHandler: memoedLookupEventHandler,
+            lookupAction: memoedLookupAction,
+            lookupSyncCallback: memoedLookupSyncCallback,
+            extractResourceUrl,
+            renderChild: memoedRenderChild,
+            registerComponentApi: memoedRegisterComponentApi,
+            layoutCss,
+            layoutNonCss,
+            layoutContext: layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current,
+            uid,
+            childIndex,
+        };
+        if (!renderer) {
+            console.error(`Component '${safeNode.type}' is not available. Did you forget to register it?`);
+            return (0, jsx_runtime_1.jsx)(UnknownComponent_1.default, { message: `${safeNode.type}` });
+        }
+        // --- Render the component using the renderer function obtained from the component registry
+        renderedNode = renderer(rendererContext);
+        // --- Components may have a `testId` property for E2E testing purposes. Inject the value of `testId`
+        // --- into the DOM object of the rendered React component.
+        if (
+        // --- The component has its "id" (internally, "uid") or "testId" property defined
+        (memoedNode.uid !== undefined || memoedNode.testId !== undefined) &&
+            (
+            // --- The app context indicates test mode
+            appContext === null || appContext === void 0 ? void 0 : appContext.decorateComponentsWithTestId) &&
+            // --- The component is visual
+            (descriptor === null || descriptor === void 0 ? void 0 : descriptor.nonVisual) !== true &&
+            // --- The component is not opaque
+            (descriptor === null || descriptor === void 0 ? void 0 : descriptor.opaque) !== true) {
+            // --- Use `ComponentDecorator` to inject the `data-testid` attribute into the component.
+            const testId = memoedNode.testId || memoedNode.uid;
+            const resolvedUid = (0, extractParam_1.extractParam)(state, testId, appContext, true);
+            renderedNode = ((0, jsx_runtime_1.jsx)(ComponentDecorator_1.default, { attr: { "data-testid": resolvedUid }, allowOnlyRefdChild: isCompoundComponent || safeNode.type === "ModalDialog", ref: ref, children: (0, react_1.cloneElement)(renderedNode, Object.assign({}, (0, mergeProps_1.mergeProps)(Object.assign(Object.assign({}, renderedNode.props), mouseEventHandlers), rest))) }));
+        }
+        // --- The current layout context may suggest to wrap the rendered node.
+        if ((_b = layoutContextRef.current) === null || _b === void 0 ? void 0 : _b.wrapChild) {
+            renderedNode = layoutContextRef.current.wrapChild(rendererContext, renderedNode, descriptor);
+        }
+    }
+    catch (e) {
+        // --- Mark the potential rendering error and display it
+        renderingError = (e === null || e === void 0 ? void 0 : e.message) || "Internal error";
+        console.error(e);
+    }
+    // --- The rendering process may result in errors. If so, we render an error message.
+    if (renderingError) {
+        return ((0, jsx_runtime_1.jsx)(InvalidComponent_1.default, { errors: [renderingError], node: safeNode, children: renderedNode }));
+    }
+    // --- If we have a single React node with forwarded reference, let's merge the "rest"
+    // --- properties with it.
+    if ((ref || !(0, lodash_es_1.isEmpty)(mouseEventHandlers)) && renderedNode && react_1.default.isValidElement(renderedNode)) {
+        // --- For radix UI/accessibility, read more here:
+        // --- https://www.radix-ui.com/primitives/docs/guides/composition
+        return (0, react_1.cloneElement)(renderedNode, Object.assign({ ref: ref ? (0, react_compose_refs_1.composeRefs)(ref, renderedNode.ref) : undefined }, (0, mergeProps_1.mergeProps)(Object.assign(Object.assign({}, renderedNode.props), mouseEventHandlers), rest)));
+    }
+    // --- If the rendering resulted in multiple React nodes, wrap them in a fragment.
+    return react_1.default.isValidElement(renderedNode) ? renderedNode : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderedNode });
+});
+/**
+ * This function gets the API-bound component properties. A property is API-bound if its value is a
+ * component definition with one of the `type` values passed to this function.
+ * @param items Hash object of component properties
+ * @param type Types to consider as API-bound properties
+ * @returns List of API-bound property names
+ */
+function getApiBoundItems(items, ...type) {
+    const ret = [];
+    if (!items) {
+        return ret;
+    }
+    const entries = Object.entries(items);
+    for (let i = 0; i < entries.length; i++) {
+        const [key, value] = entries[i];
+        if ((0, lodash_es_1.isPlainObject)(value) && type.includes(value.type)) {
+            ret.push(key);
+        }
+    }
+    return ret;
+}
+function componentStateChanged(uid, state) {
+    return {
+        type: containers_1.ContainerActionKind.COMPONENT_STATE_CHANGED,
+        payload: {
+            uid,
+            state,
+        },
+    };
+}
+exports.default = Component;

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

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+/**
+ * This component decorates a React element's DOM node (through a React ref) with the specified
+ * attributes. We use this component to add test IDs to particular components.
+ */
+const ComponentDecorator = (0, react_1.forwardRef)((props, forwardedRef) => {
+    const [parentElement, setParentElement] = (0, react_1.useState)(null);
+    // --- We wrap the component in a `Fragment`, if it has a parent element; otherwise, we use a `div`
+    const Wrapper = parentElement ? react_1.default.Fragment : "div";
+    const ref = (0, react_1.useRef)(null);
+    const itemRef = (0, react_1.useRef)(null);
+    const targetIndex = (0, react_1.useRef)(0);
+    // --- When the component mounts, we find the index of the component in its parent
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement) {
+            targetIndex.current = Array.from(ref.current.parentElement.children).indexOf(ref.current);
+            setParentElement(ref.current.parentElement);
+            return;
+        }
+    }, []);
+    // --- When the component mounts, we add the attributes to the component's DOM node
+    (0, react_1.useEffect)(() => {
+        let node = itemRef.current || (parentElement === null || parentElement === void 0 ? void 0 : parentElement.children[targetIndex.current]) || null;
+        if (props.allowOnlyRefdChild) {
+            node = itemRef.current;
+        }
+        Object.entries(props.attr).forEach(([key, value]) => {
+            node === null || node === void 0 ? void 0 : node.setAttribute(key, value);
+        });
+    }, [parentElement, targetIndex, props.attr, props.allowOnlyRefdChild]);
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { ref: parentElement ? undefined : ref, children: (0, react_1.cloneElement)(props.children, {
+            ref: forwardedRef ? (0, react_compose_refs_1.composeRefs)(itemRef, forwardedRef) : itemRef,
+        }) }));
+});
+exports.default = ComponentDecorator;