xmlui 0.9.21 → 0.9.25

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

@@ -0,0 +1,282 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.observePlaygroundPattern = observePlaygroundPattern;
+exports.parseSegmentProps = parseSegmentProps;
+exports.parsePlaygroundPattern = parsePlaygroundPattern;
+exports.convertPlaygroundPatternToMarkdown = convertPlaygroundPatternToMarkdown;
+function observePlaygroundPattern(content) {
+    const startPattern = "```xmlui-pg";
+    const endPattern = "```";
+    const startIndex = content.indexOf(startPattern);
+    if (startIndex === -1) {
+        return null; // No match for the start pattern
+    }
+    // Find the end of the start pattern
+    const startContentIndex = content.indexOf("\n", startIndex);
+    if (startContentIndex === -1) {
+        return null; // Malformed pattern, no newline after start
+    }
+    // Search for the end pattern after the start content
+    let endIndex = startContentIndex;
+    while (endIndex !== -1) {
+        endIndex = content.indexOf(endPattern, endIndex + 1);
+        if (endIndex !== -1) {
+            // Check if the end pattern is not part of {pg-content} (escaped with backticks)
+            const precedingChar = content[endIndex - 1];
+            if (precedingChar !== "\\") {
+                return [
+                    startIndex,
+                    endIndex + endPattern.length,
+                    content.substring(startIndex, endIndex + endPattern.length),
+                ];
+            }
+        }
+    }
+    return null; // No valid end pattern found
+}
+function parseSegmentProps(input) {
+    const segment = {};
+    // --- Match the "display" flag
+    if (/\bdisplay\b/.test(input)) {
+        segment.display = true;
+    }
+    // --- Match the "copy" flag
+    if (/\bcopy\b/.test(input)) {
+        segment.copy = true;
+    }
+    // --- Match the "noPopup" flag
+    if (/\bnoPopup\b/.test(input)) {
+        segment.noPopup = true;
+    }
+    // Match the "highlights" pattern
+    const highlightsMatch = input.match(/\{([^\}]+)\}/);
+    if (highlightsMatch) {
+        const highlights = highlightsMatch[1].split(",").map((range) => {
+            if (range.includes("-")) {
+                const [start, end] = range.split("-").map(Number);
+                return [start, end]; // Represent ranges as [start, end]
+            }
+            return Number(range); // Represent single numbers as numbers
+        });
+        segment.highlights = highlights;
+    }
+    // Match the "filename" property
+    const filenameMatch = input.match(/\bfilename="([^"]+)"/);
+    if (filenameMatch) {
+        segment.filename = filenameMatch[1];
+    }
+    // Match the "name" property
+    const nameMatch = input.match(/\bname="([^"]+)"/);
+    if (nameMatch) {
+        segment.name = nameMatch[1];
+    }
+    // Match the "height" property
+    const heightMatch = input.match(/\bheight="([^"]+)"/);
+    if (heightMatch) {
+        segment.height = heightMatch[1];
+    }
+    return segment;
+}
+function parsePlaygroundPattern(content) {
+    var _a, _b, _c, _d;
+    const pattern = {};
+    const match = observePlaygroundPattern(content);
+    if (!match) {
+        return pattern;
+    }
+    // --- Extract the pattern content
+    const [_startIndex, _endIndex, patternContent] = match;
+    const lines = patternContent.split("\n");
+    pattern.default = parseSegmentProps(lines[0].trim());
+    let segmentContent = "";
+    let currentMode = "";
+    let foundSegment = false;
+    let order = 0;
+    for (let i = 1; i < lines.length - 1; i++) {
+        const line = lines[i];
+        if (line.startsWith("---app")) {
+            const appSegment = parseSegmentProps(line);
+            pattern.app = Object.assign({}, appSegment);
+            closeCurrentMode("app");
+        }
+        else if (line.startsWith("---comp")) {
+            closeCurrentMode("comp");
+            const compSegment = parseSegmentProps(line);
+            (_a = pattern.components) !== null && _a !== void 0 ? _a : (pattern.components = []);
+            pattern.components.push(compSegment);
+        }
+        else if (line.startsWith("---config")) {
+            const configSegment = parseSegmentProps(line);
+            (_b = pattern.config) !== null && _b !== void 0 ? _b : (pattern.config = Object.assign({}, configSegment));
+            closeCurrentMode("config");
+        }
+        else if (line.startsWith("---api")) {
+            const apiSegment = parseSegmentProps(line);
+            (_c = pattern.api) !== null && _c !== void 0 ? _c : (pattern.api = Object.assign({}, apiSegment));
+            closeCurrentMode("api");
+        }
+        else if (line.startsWith("---desc")) {
+            closeCurrentMode("desc");
+            const descSegment = parseSegmentProps(line);
+            (_d = pattern.descriptions) !== null && _d !== void 0 ? _d : (pattern.descriptions = []);
+            pattern.descriptions.push(descSegment);
+        }
+        else {
+            // Append the line to the current segment content
+            segmentContent += line + "\n";
+        }
+    }
+    // --- Handle the last segment
+    if (foundSegment) {
+        closeCurrentMode("");
+    }
+    else {
+        pattern.app = Object.assign(Object.assign({}, pattern.default), { content: segmentContent, order });
+    }
+    return pattern;
+    function closeCurrentMode(newMode) {
+        foundSegment = true;
+        switch (currentMode) {
+            case "app":
+                pattern.app.content = segmentContent;
+                pattern.app.order = order++;
+                break;
+            case "comp":
+                pattern.components[pattern.components.length - 1].content = segmentContent;
+                pattern.components[pattern.components.length - 1].order = order++;
+                break;
+            case "config":
+                pattern.config.content = segmentContent;
+                pattern.config.order = order++;
+                break;
+            case "api":
+                pattern.api.content = segmentContent;
+                pattern.api.order = order++;
+                break;
+            case "desc":
+                pattern.descriptions[pattern.descriptions.length - 1].content = segmentContent;
+                pattern.descriptions[pattern.descriptions.length - 1].order = order++;
+                break;
+        }
+        segmentContent = "";
+        currentMode = newMode;
+    }
+}
+function convertPlaygroundPatternToMarkdown(content) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const pattern = parsePlaygroundPattern(content);
+    // --- Determine max order for segments
+    let maxOrder = 0;
+    if (((_a = pattern.app) === null || _a === void 0 ? void 0 : _a.order) > maxOrder) {
+        maxOrder = pattern.app.order;
+    }
+    if (((_b = pattern.config) === null || _b === void 0 ? void 0 : _b.order) > maxOrder) {
+        maxOrder = pattern.config.order;
+    }
+    if (((_c = pattern.api) === null || _c === void 0 ? void 0 : _c.order) > maxOrder) {
+        maxOrder = pattern.api.order;
+    }
+    if (pattern.descriptions) {
+        pattern.descriptions.forEach((desc) => {
+            if (desc.order > maxOrder) {
+                maxOrder = desc.order;
+            }
+        });
+    }
+    if (pattern.components) {
+        pattern.components.forEach((comp) => {
+            if (comp.order > maxOrder) {
+                maxOrder = comp.order;
+            }
+        });
+    }
+    // --- Assemble the final markdown content
+    let markdownContent = "";
+    const pgContent = { noPopup: (_d = pattern.default) === null || _d === void 0 ? void 0 : _d.noPopup };
+    // --- Extract optional playground attributes
+    if (pattern.default.height) {
+        pgContent.height = pattern.default.height;
+    }
+    if (pattern.default.name) {
+        pgContent.name = pattern.default.name;
+    }
+    // --- Iterate through segments
+    for (let i = 0; i <= maxOrder; i++) {
+        let segment;
+        let type = "";
+        if (((_e = pattern.app) === null || _e === void 0 ? void 0 : _e.order) === i) {
+            segment = pattern.app;
+            type = "app";
+        }
+        else if (((_f = pattern.config) === null || _f === void 0 ? void 0 : _f.order) === i) {
+            segment = pattern.config;
+            type = "config";
+        }
+        else if (((_g = pattern.api) === null || _g === void 0 ? void 0 : _g.order) === i) {
+            segment = pattern.api;
+            type = "api";
+        }
+        if (!segment && pattern.descriptions) {
+            const descSegment = pattern.descriptions.find((desc) => desc.order === i);
+            if (descSegment) {
+                segment = descSegment;
+                type = "desc";
+            }
+        }
+        if (!segment && pattern.components) {
+            const compSegment = pattern.components.find((comp) => comp.order === i);
+            if (compSegment) {
+                segment = compSegment;
+                type = "comp";
+            }
+        }
+        if (segment === undefined) {
+            continue; // Skip if no segment found
+        }
+        // --- Assemble the app
+        // --- Assemble segment attributes
+        let segmentAttrs = `${segment.copy ? "copy" : ""} ` +
+            `${segment.filename ? `filename="${segment.filename}"` : ""} ` +
+            `${segment.name ? `name="${segment.name}"` : ""}`;
+        if (segment.highlights && segment.highlights.length > 0) {
+            const highlights = segment.highlights
+                .map((highlight) => Array.isArray(highlight) ? `${highlight[0]}-${highlight[1]}` : highlight)
+                .join(",");
+            segmentAttrs += `{${highlights}}`;
+        }
+        segmentAttrs = segmentAttrs.trim().replace(/\s+/g, " ");
+        switch (type) {
+            case "app":
+                if (segment.display) {
+                    markdownContent += "```xmlui " + segmentAttrs + "\n" + segment.content + "```\n\n";
+                }
+                pgContent.app = segment.content;
+                break;
+            case "config":
+                if (segment.display) {
+                    markdownContent += "```json " + segmentAttrs + "\n" + segment.content + "```\n\n";
+                }
+                pgContent.config = segment.content;
+                break;
+            case "api":
+                // --- Never display API segments
+                pgContent.api = segment.content;
+                break;
+            case "comp":
+                if (segment.display) {
+                    markdownContent += "```xmlui " + segmentAttrs + "\n" + segment.content + "```\n\n";
+                }
+                (_h = pgContent.components) !== null && _h !== void 0 ? _h : (pgContent.components = []);
+                pgContent.components.push(segment.content);
+                break;
+            case "desc":
+                markdownContent += segment.content + "\n";
+                break;
+        }
+    }
+    // --- Convert the JSON representation of pgContent to a base64 string
+    const jsonString = JSON.stringify(pgContent);
+    const base64String = btoa(jsonString);
+    markdownContent += '<samp data-pg-content="' + base64String + '"></samp>\n\n';
+    return markdownContent;
+}

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

@@ -0,0 +1,116 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmationModalContextProvider = exports.useConfirm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const ButtonNative_1 = require("../Button/ButtonNative");
+const StackNative_1 = require("../Stack/StackNative");
+const Dialog_1 = require("./Dialog");
+const ConfirmationModalContext = react_1.default.createContext({
+    confirm: (title, message, actionLabel) => __awaiter(void 0, void 0, void 0, function* () { return false; }),
+});
+const useConfirm = () => (0, react_1.useContext)(ConfirmationModalContext);
+exports.useConfirm = useConfirm;
+const ConfirmationModalContextProvider = ({ children }) => {
+    // State
+    const [showConfirmationModal, setShowConfirmationModal] = (0, react_1.useState)(false);
+    const [title, setTitle] = (0, react_1.useState)("Are you sure?");
+    const [message, setMessage] = (0, react_1.useState)();
+    const [buttons, setButtons] = (0, react_1.useState)([]);
+    // Refs and other
+    const resolver = (0, react_1.useRef)(null);
+    const buttonsRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (showConfirmationModal) {
+            setTimeout(() => {
+                var _a;
+                const focusable = (_a = buttonsRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("button");
+                if (focusable) {
+                    focusable[focusable.length - 1].focus();
+                }
+            }, 0);
+        }
+    }, [showConfirmationModal]);
+    const handleShow = (0, react_1.useCallback)((title, message, actionLabel) => __awaiter(void 0, void 0, void 0, function* () {
+        if (typeof title === "string") {
+            setTitle(title);
+            setButtons([
+                {
+                    label: actionLabel || "Ok",
+                    value: true,
+                },
+            ]);
+            setMessage(message);
+        }
+        else {
+            setTitle(title.title);
+            setButtons(title.buttons);
+            setMessage(title.message);
+        }
+        setShowConfirmationModal(true);
+        return new Promise(function (resolve) {
+            resolver.current = resolve;
+        });
+    }), []);
+    const handleOk = (0, react_1.useCallback)((value) => {
+        resolver.current && resolver.current(value);
+        setShowConfirmationModal(false);
+    }, []);
+    const handleCancel = (0, react_1.useCallback)(() => {
+        resolver.current && resolver.current(false);
+        setShowConfirmationModal(false);
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            confirm: handleShow,
+        };
+    }, [handleShow]);
+    return ((0, jsx_runtime_1.jsxs)(ConfirmationModalContext.Provider, { value: contextValue, children: [children, showConfirmationModal && ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: title, description: message, isOpen: true, onClose: handleCancel, buttons: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { width: "100%", gap: "1em" }, ref: buttonsRef, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", size: "sm", onClick: handleCancel, children: "Cancel" }), buttons.length > 1 ? (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }) : undefined, buttons.map(({ label, value, variant = "solid", themeColor = "attention" }, index) => {
+                            return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: variant, themeColor: themeColor, size: "sm", type: "submit", onClick: () => {
+                                    handleOk(value);
+                                }, children: label }, index));
+                        })] }) }))] }));
+};
+exports.ConfirmationModalContextProvider = ConfirmationModalContextProvider;

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Dialog_module_scss_1 = __importDefault(require("./Dialog.module.scss"));
+const TextNative_1 = require("../Text/TextNative");
+const ModalDialogNative_1 = require("./ModalDialogNative");
+/**
+ * Dialog component that is customizable with action buttons. The children prop accepts React elements.
+ *
+ * Note that clicking outside of the dialog or pressing Escape will call the onClose function.
+ * Thus, if you want to stop that from firing, do so in the onClose function from outside.
+ */
+const Dialog = ({ title, description, children, isOpen, onClose, buttons, }) => {
+    return ((0, jsx_runtime_1.jsxs)(ModalDialogNative_1.ModalDialog, { onClose: onClose, isInitiallyOpen: isOpen, title: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: Dialog_module_scss_1.default.dialogContent, children: [(0, jsx_runtime_1.jsx)("div", { id: "dialogDesc", children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: description }) }), children] }), !!buttons && (0, jsx_runtime_1.jsx)("footer", { className: Dialog_module_scss_1.default.dialogActions, children: buttons })] }));
+};
+exports.Dialog = Dialog;

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

@@ -18,8 +18,8 @@ const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
 exports.defaultProps = {
     iconHorizontalExpanded: "chevronleft",
     iconHorizontalCollapsed: "chevronright",
-    iconVerticalExpanded: "chevronup",
-    iconVerticalCollapsed: "chevrondown",
+    iconVerticalExpanded: "chevrondown",
+    iconVerticalCollapsed: "chevronright",
 };
 const NavGroupContext = (0, react_1.createContext)({
     level: -1,
@@ -34,8 +34,7 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
     let inline = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" ||
         (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky" ||
-        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-full-header" ||
-        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-constrained-width";
+        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-full-header";
     if (navPanelContext !== null) {
         inline = navPanelContext.inDrawer;
     }
@@ -47,7 +46,7 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
             iconVerticalCollapsed: iconVerticalCollapsed !== null && iconVerticalCollapsed !== void 0 ? iconVerticalCollapsed : exports.defaultProps.iconVerticalCollapsed,
             iconVerticalExpanded: iconVerticalExpanded !== null && iconVerticalExpanded !== void 0 ? iconVerticalExpanded : exports.defaultProps.iconVerticalExpanded,
         };
-    }, [level]);
+    }, [iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, level]);
     return ((0, jsx_runtime_1.jsx)(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to })) }));
 });
 const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, initiallyExpanded = false, }, ref) {

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

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nestedAppComponentRenderer = exports.NestedAppMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NestedApp_module_scss_1 = __importDefault(require("./NestedApp.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const NestedAppNative_1 = require("./NestedAppNative");
+const COMP = "NestedApp";
+exports.NestedAppMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The ${COMP} component allows you to nest an entire xmlui app into another one.
+`,
+    props: {
+        app: {
+            description: "The source markup of the app to be nested",
+        },
+        api: {
+            description: "This property defines an optional emulated API to be used with the nested app.",
+        },
+        components: {
+            description: "This property defines an optional list of components to be used with the nested app.",
+        },
+        config: {
+            description: "You can define the nested app's configuration with this property.",
+        },
+        activeTheme: {
+            description: "This property defines the active theme for the nested app.",
+        },
+        activeTone: {
+            description: "This property defines the active tone for the nested app.",
+        },
+        title: {
+            description: "The title of the nested app.",
+        },
+        height: {
+            description: "The height of the nested app.",
+        },
+        allowPlaygroundPopup: {
+            description: "This property defines whether the nested app can be opened in the xmlui playground.",
+        },
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NestedApp_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`marginTop-${COMP}`]: "$space-3",
+        [`marginBottom-${COMP}`]: "$space-3",
+        [`padding-${COMP}`]: "$space-4",
+        [`paddingTop-${COMP}`]: "$space-3",
+        [`borderRadius-${COMP}`]: "$space-4",
+        [`backgroundColor-frame-${COMP}`]: "$color-primary-100",
+        [`gap-frame-${COMP}`]: "$space-4",
+        [`fontWeight-header-${COMP}`]: "$fontWeight-bold",
+    },
+});
+exports.nestedAppComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NestedAppMd, ({ node, extractValue }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return ((0, jsx_runtime_1.jsx)(NestedAppNative_1.NestedApp, { app: (_a = node.props) === null || _a === void 0 ? void 0 : _a.app, api: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.api), components: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.components), config: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.config), activeTheme: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.activeTheme), activeTone: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.activeTone), title: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.title), height: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.height), allowPlaygroundPopup: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.allowPlaygroundPopup) }));
+});

package/dist/scripts/src/components/NestedApp/NestedAppNative.js

@@ -0,0 +1,125 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NestedApp = NestedApp;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_1 = __importDefault(require("react-dom/client"));
+const NestedApp_module_scss_1 = __importDefault(require("./NestedApp.module.scss"));
+const AppRoot_1 = require("../../components-core/rendering/AppRoot");
+const lia_1 = require("react-icons/lia");
+const rx_1 = require("react-icons/rx");
+const xmlui_parser_1 = require("../../components-core/xmlui-parser");
+const ApiInterceptorProvider_1 = require("../../components-core/interception/ApiInterceptorProvider");
+const ErrorBoundary_1 = require("../../components-core/rendering/ErrorBoundary");
+const browser_1 = require("msw/browser");
+const Tooltip_1 = require("./Tooltip");
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const constants_1 = require("../../components-core/constants");
+function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = true, }) {
+    const rootRef = (0, react_1.useRef)(null);
+    const shadowRef = (0, react_1.useRef)(null);
+    const contentRootRef = (0, react_1.useRef)(null);
+    const nestedAppId = (0, react_1.useId)();
+    const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
+    const theme = (0, ThemeContext_1.useTheme)();
+    const toneToApply = activeTone || (config === null || config === void 0 ? void 0 : config.defaultTone) || (theme === null || theme === void 0 ? void 0 : theme.activeThemeTone);
+    const apiWorker = (0, react_1.useMemo)(() => {
+        if (typeof document !== "undefined") {
+            return (0, browser_1.setupWorker)();
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        apiWorker === null || apiWorker === void 0 ? void 0 : apiWorker.start({
+            onUnhandledRequest: "bypass",
+            quiet: true,
+        });
+        return () => apiWorker === null || apiWorker === void 0 ? void 0 : apiWorker.stop();
+    }, [apiWorker]);
+    // console.log("apiWorker", apiWorker);
+    const mock = (0, react_1.useMemo)(() => {
+        return api
+            ? Object.assign(Object.assign({ type: "in-memory" }, api), { apiUrl: "/api" }) : undefined;
+    }, [api]);
+    //console.log("mock", mock);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!shadowRef.current && rootRef.current) {
+            // Clone existing style and link tags
+            shadowRef.current = rootRef.current.attachShadow({ mode: "open" });
+            const styleSheets = document.querySelectorAll('style, link[rel="stylesheet"]');
+            styleSheets.forEach((el) => {
+                if (el.hasAttribute("data-theme-root")) {
+                    return;
+                }
+                shadowRef.current.appendChild(el.cloneNode(true));
+            });
+        }
+        if (!contentRootRef.current && shadowRef.current) {
+            contentRootRef.current = client_1.default.createRoot(shadowRef.current);
+        }
+        let { errors, component, erroneousCompoundComponentName } = (0, xmlui_parser_1.xmlUiMarkupToComponent)(`<Fragment xmlns:XMLUIExtensions="component-ns">${app}</Fragment>`);
+        if (errors.length > 0) {
+            component = (0, xmlui_parser_1.errReportComponent)(errors, "Main.xmlui", erroneousCompoundComponentName);
+        }
+        const compoundComponents = (components !== null && components !== void 0 ? components : []).map((src) => {
+            const isErrorReportComponent = typeof src !== "string";
+            if (isErrorReportComponent) {
+                return src;
+            }
+            let { errors, component, erroneousCompoundComponentName } = (0, xmlui_parser_1.xmlUiMarkupToComponent)(src);
+            if (errors.length > 0) {
+                return (0, xmlui_parser_1.errReportComponent)(errors, `nested xmlui`, erroneousCompoundComponentName);
+            }
+            return component;
+        });
+        let globalProps = Object.assign(Object.assign({ name: config === null || config === void 0 ? void 0 : config.name }, ((config === null || config === void 0 ? void 0 : config.appGlobals) || {})), { apiUrl: "" });
+        // css variables are leaking into to shadow dom, so we reset them here
+        const themeVarReset = {};
+        Object.keys(theme.themeStyles).forEach((key) => {
+            themeVarReset[key] = "initial";
+        });
+        (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: (0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: apiWorker, children: (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.spacer }), allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                                            // TODO: Open the app in a new window
+                                        }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "Edit code in new window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                                            setRefreshVersion(refreshVersion + 1);
+                                        }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] }), (0, jsx_runtime_1.jsx)("div", { style: Object.assign({ height }, themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
+                                    compoundComponents,
+                                    themes: config === null || config === void 0 ? void 0 : config.themes,
+                                }, resources: config === null || config === void 0 ? void 0 : config.resources }, `app-${nestedAppId}-${refreshVersion}`) })] }) }) }));
+    }, [
+        activeTheme,
+        allowPlaygroundPopup,
+        apiWorker,
+        app,
+        components,
+        config === null || config === void 0 ? void 0 : config.appGlobals,
+        config === null || config === void 0 ? void 0 : config.defaultTheme,
+        config === null || config === void 0 ? void 0 : config.name,
+        config === null || config === void 0 ? void 0 : config.resources,
+        config === null || config === void 0 ? void 0 : config.themes,
+        height,
+        mock,
+        nestedAppId,
+        refreshVersion,
+        theme.themeStyles,
+        title,
+        toneToApply,
+    ]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            var _a;
+            (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.unmount();
+            contentRootRef.current = null;
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.nestedApp, children: (0, jsx_runtime_1.jsx)("div", { ref: rootRef, style: {
+                width: "100%",
+                height: "100%",
+                overflow: "auto",
+                position: "relative",
+                isolation: "isolate",
+            } }) }));
+}