xmlui 0.7.13 → 0.7.15

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

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markdownComponentRenderer = exports.MarkdownMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const Markdown_module_scss_1 = __importDefault(require("./Markdown.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const MarkdownNative_1 = require("./MarkdownNative");
+const COMP = "Markdown";
+exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
+    description: `\`${COMP}\` displays plain text styled using markdown syntax.`,
+    themeVars: (0, themeVars_1.parseScssVar)(Markdown_module_scss_1.default.themeVars),
+    props: {
+        content: (0, ComponentDefs_1.d)("This property sets the markdown content to display."),
+        removeIndents: (0, ComponentDefs_1.d)("This boolean property specifies whether leading indents should be " +
+            "removed from the markdown content. If set to `true`, the shortest " +
+            "indent found at the start of the content lines is removed from the " +
+            "beginning of every line.", null, "boolean", false),
+    },
+    defaultThemeVars: {
+        "color-border-HorizontalRule": "$color-border",
+        "thickness-border-HorizontalRule": "1px",
+        "style-border-HorizontalRule": "solid",
+        "accent-Blockquote": "$color-primary",
+        "padding-Blockquote": "$space-2 $space-6",
+        "margin-Blockquote": "$space-2",
+        "padding-left-UnorderedList": "$space-6",
+        "padding-left-OrderedList": "$space-6",
+        "padding-left-ListItem": "$space-1",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+});
+exports.markdownComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.MarkdownMd, ({ node, extractValue, renderChild, layoutCss }) => {
+    const content = extractValue.asString(node.props.content);
+    return ((0, jsx_runtime_1.jsx)(MarkdownNative_1.Markdown, { layout: layoutCss, removeIndents: extractValue.asOptionalBoolean(node.props.removeIndents, false), children: content || renderChild(node.children) }));
+});

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

@@ -0,0 +1,107 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Markdown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Markdown_module_scss_1 = __importDefault(require("./Markdown.module.scss"));
+const react_markdown_1 = __importDefault(require("react-markdown"));
+const HeadingNative_1 = require("@components/Heading/HeadingNative");
+const TextNative_1 = require("../Text/TextNative");
+const LinkNative_1 = require("@components/Link/LinkNative");
+const ImageNative_1 = require("@components/Image/ImageNative");
+exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = false, children, layout }) {
+    if (typeof children !== "string") {
+        return null;
+    }
+    children = removeIndents ? removeTextIndents(children) : children;
+    const textLayoutToUse = { textAlign: layout === null || layout === void 0 ? void 0 : layout.textAlign };
+    return ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { components: {
+            h1({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, layout: textLayoutToUse, level: "h1", sx: { lineHeight: "initial" }, children: children }));
+            },
+            h2({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h2", sx: { lineHeight: "initial" }, children: children }));
+            },
+            h3({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h3", sx: { lineHeight: "initial" }, children: children }));
+            },
+            h4({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h4", sx: { lineHeight: "initial" }, children: children }));
+            },
+            h5({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h5", sx: { lineHeight: "initial" }, children: children }));
+            },
+            h6({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h6", sx: { lineHeight: "initial" }, children: children }));
+            },
+            p({ id, children }) {
+                return (0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, layout: textLayoutToUse, children: children });
+            },
+            code({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "code", children: children }));
+            },
+            pre({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "codefence", children: children }));
+            },
+            strong({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "strong", children: children }));
+            },
+            em({ id, children }) {
+                return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "em", children: children }));
+            },
+            blockquote({ children }) {
+                return (0, jsx_runtime_1.jsx)(Blockquote, { layout: textLayoutToUse, children: children });
+            },
+            ol({ children }) {
+                return (0, jsx_runtime_1.jsx)(OrderedList, { layout: textLayoutToUse, children: children });
+            },
+            ul({ children }) {
+                return (0, jsx_runtime_1.jsx)(UnorderedList, { layout: textLayoutToUse, children: children });
+            },
+            li({ children }) {
+                return (0, jsx_runtime_1.jsx)(ListItem, { layout: textLayoutToUse, children: children });
+            },
+            // This needs a parser plugin for the ~ and ~~ signs that are available via react-markdown-gfm
+            // or we implement our own parser?
+            // del: variant="deleted"
+            hr() {
+                return (0, jsx_runtime_1.jsx)(HorizontalRule, {});
+            },
+            a({ href, children }) {
+                return (0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, { to: href || "/", children: children });
+            },
+            img({ src, alt }) {
+                return (0, jsx_runtime_1.jsx)(ImageNative_1.Image, { src: src, alt: alt });
+            }
+        }, children: children }));
+});
+function removeTextIndents(input) {
+    const lines = input.split("\n");
+    // Find the shortest starting whitespace length
+    const minIndent = lines.reduce((min, line) => {
+        const match = line.match(/^\s*/);
+        const indentLength = match ? match[0].length : 0;
+        return line.trim() ? Math.min(min, indentLength) : min;
+    }, Infinity);
+    // Remove the shortest starting whitespace length from each line
+    const trimmedLines = lines.map((line) => line.startsWith(" ".repeat(minIndent)) ? line.slice(minIndent) : line);
+    return trimmedLines.join("\n");
+}
+const HorizontalRule = () => {
+    return (0, jsx_runtime_1.jsx)("hr", { className: Markdown_module_scss_1.default.horizontalRule });
+};
+const Blockquote = ({ children, layout }) => {
+    return (0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, style: layout, children: children });
+};
+const UnorderedList = ({ children, layout }) => {
+    return (0, jsx_runtime_1.jsx)("ul", { className: Markdown_module_scss_1.default.unorderedList, style: layout, children: children });
+};
+const OrderedList = ({ children, layout }) => {
+    return (0, jsx_runtime_1.jsx)("ol", { className: Markdown_module_scss_1.default.orderedList, style: layout, children: children });
+};
+const ListItem = ({ children, layout }) => {
+    return (0, jsx_runtime_1.jsx)("li", { className: Markdown_module_scss_1.default.listItem, style: layout, children: children });
+};

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("@components/Button/ButtonNative");
+const StackNative_1 = require("@components/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", layout: { 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 TextNative_1 = require("../Text/TextNative");
+const Dialog_module_scss_1 = __importDefault(require("./Dialog.module.scss"));
+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/ModalDialog/ModalDialog.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.modalViewComponentRenderer = exports.ModalDialogMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ModalDialog_module_scss_1 = __importDefault(require("./ModalDialog.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const base_utils_1 = require("@components-core/theming/themes/base-utils");
+const container_helpers_1 = require("@components/container-helpers");
+const ModalDialogNative_1 = require("./ModalDialogNative");
+const COMP = "ModalDialog";
+exports.ModalDialogMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component defines a modal dialog UI element that can be displayed over ` +
+        `the existing UI - triggered by some action.`,
+    props: {
+        fullScreen: (0, ComponentDefs_1.d)(`Toggles whether the dialog encompasses the whole UI (\`true\`) or not and has a minimum ` +
+            `width and height (\`false\`).`),
+        title: (0, ComponentDefs_1.d)(`Provides a prestyled heading to display the intent of the dialog.`),
+        closeButtonVisible: (0, ComponentDefs_1.d)(`Shows (\`true\`) or hides (\`false\`) the visibility of the close button on the dialog.`),
+        isInitiallyOpen: (0, ComponentDefs_1.d)(`This property sets whether the modal dialog appears open (\`true\`) or not (\`false\`) ` +
+            `when the page is it is defined on is rendered.`),
+    },
+    events: {
+        open: (0, ComponentDefs_1.d)(`This event is fired when the \`${COMP}\` is opened either via a \`when\` or an ` +
+            `imperative API call (\`open()\`).`),
+        close: (0, ComponentDefs_1.d)(`This event is fired when the close button is pressed or the user clicks outside ` +
+            `the \`${COMP}\`.`),
+    },
+    apis: {
+        close: (0, ComponentDefs_1.d)(`This method is used to close the \`${COMP}\`. Invoke it using \`modalId.close()\` ` +
+            `where \`modalId\` refers to a \`ModalDialog\` component.`),
+        open: (0, ComponentDefs_1.d)("This method imperatively opens the modal dialog. You can pass an arbitrary number " +
+            "of parameters to the method. In the \`ModalDialog\` instance, you can access those " +
+            "with the \`$paramq` and \`$params\` context values."),
+    },
+    contextVars: {
+        $param: (0, ComponentDefs_1.d)("This value represents the first parameters passed to the \`open()\` method to " +
+            "display the modal dialog."),
+        $params: (0, ComponentDefs_1.d)("This value represents the array of parameters passed to the \`open()\` method. " +
+            "You can use \`$params[0]\` to access the first and \`$params[1]\` to access the " +
+            "second (and so on) parameters. \`$param\` is the same as \`$params[0]\`."),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(ModalDialog_module_scss_1.default.themeVars),
+    defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`color-bg-${COMP}`]: "$color-bg-primary", [`color-bg-overlay-${COMP}`]: "$color-bg-overlay", [`color-text-${COMP}`]: "$color-text-primary", [`radius-${COMP}`]: "$radius", [`font-family-${COMP}`]: "$font-family", [`max-width-${COMP}`]: "450px", [`margin-bottom-title-${COMP}`]: "0", dark: {
+            [`color-bg-${COMP}`]: "$color-bg-primary",
+        } }),
+});
+exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ModalDialogMd, ({ node, extractValue, layoutCss, renderChild, lookupEventHandler, registerComponentApi, layoutContext }) => {
+    var _a, _b;
+    // gigantic hack: If the ModalDialog is not inside a ModalDialogFrame, wrap it in one
+    //   we do this through the layout context, render it through another render loop with the extra $param context var
+    //   (note the layoutContext and node on the MemoizedItem)
+    // one solution would be to have a renderChild that can take a contextVars argument
+    if (!(layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext._insideModalFrame)) {
+        return ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialogFrame, { isInitiallyOpen: node.when !== undefined, registerComponentApi: registerComponentApi, onClose: lookupEventHandler("close"), onOpen: lookupEventHandler("open"), renderDialog: ({ openParams, ref }) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node, renderChild: renderChild, layoutContext: { _insideModalFrame: true }, contextVars: { $param: openParams === null || openParams === void 0 ? void 0 : openParams[0], $params: openParams } }));
+            } }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { style: layoutCss, fullScreen: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.fullScreen), title: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.title), closeButtonVisible: extractValue.asOptionalBoolean(node.props.closeButtonVisible), children: renderChild(node.children, { type: "Stack" }) }));
+});

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

@@ -0,0 +1,167 @@
+"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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalDialog = exports.ModalDialogFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const ModalDialog_module_scss_1 = __importDefault(require("./ModalDialog.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const IconNative_1 = require("@components/Icon/IconNative");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const ButtonNative_1 = require("@components/Button/ButtonNative");
+const misc_1 = require("@components-core/utils/misc");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const Dialog = __importStar(require("@radix-ui/react-dialog"));
+const ModalVisibilityContext_1 = require("./ModalVisibilityContext");
+exports.ModalDialogFrame = react_1.default.forwardRef(({ isInitiallyOpen, onOpen, onClose, registerComponentApi, renderDialog }, ref) => {
+    const modalContextStateValue = useModalLocalOpenState(isInitiallyOpen, onOpen, onClose);
+    const { doOpen, doClose, isOpen, openParams } = modalContextStateValue;
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            open: doOpen,
+            close: doClose,
+        });
+    }, [doClose, doOpen, registerComponentApi]);
+    return isOpen ? ((0, jsx_runtime_1.jsx)(ModalStateContext.Provider, { value: modalContextStateValue, children: renderDialog({
+            openParams,
+            ref
+        }) })) : null;
+});
+const ModalStateContext = react_1.default.createContext(null);
+function useModalLocalOpenState(isInitiallyOpen, onOpen, onClose) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(isInitiallyOpen);
+    const isClosing = (0, react_1.useRef)(false);
+    const [openParams, setOpenParams] = (0, react_1.useState)(null);
+    const doOpen = (0, misc_1.useEvent)((...openParams) => {
+        setOpenParams(openParams);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        setIsOpen(true);
+    });
+    const doClose = (0, misc_1.useEvent)(() => __awaiter(this, void 0, void 0, function* () {
+        if (!isClosing.current) {
+            try {
+                isClosing.current = true;
+                const result = yield (onClose === null || onClose === void 0 ? void 0 : onClose());
+                if (result === false) {
+                    return;
+                }
+            }
+            finally {
+                isClosing.current = false;
+            }
+        }
+        setIsOpen(false);
+    }));
+    return (0, react_1.useMemo)(() => {
+        return {
+            isOpen,
+            doClose,
+            doOpen,
+            openParams,
+        };
+    }, [doClose, doOpen, isOpen, openParams]);
+}
+function useModalOpenState(isInitiallyOpen = true, onOpen, onClose) {
+    const modalStateContext = (0, react_1.useContext)(ModalStateContext);
+    const modalLocalOpenState = useModalLocalOpenState(isInitiallyOpen, onOpen, onClose);
+    return modalStateContext || modalLocalOpenState;
+}
+exports.ModalDialog = react_1.default.forwardRef(({ children, style, isInitiallyOpen, fullScreen, title, closeButtonVisible = true, onOpen, onClose, }, ref) => {
+    const { root } = (0, ThemeContext_1.useTheme)();
+    const modalRef = (0, react_1.useRef)(null);
+    const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, modalRef) : modalRef;
+    const { isOpen, doClose, doOpen } = useModalOpenState(isInitiallyOpen, onOpen, onClose);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isOpen) {
+            (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isOpen]);
+    // https://github.com/radix-ui/primitives/issues/2122#issuecomment-2140827998
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            // Pushing the change to the end of the call stack
+            const timer = setTimeout(() => {
+                document.body.style.pointerEvents = "";
+            }, 0);
+            return () => clearTimeout(timer);
+        }
+        else {
+            document.body.style.pointerEvents = "auto";
+        }
+    }, [isOpen]);
+    const registeredForms = (0, react_1.useRef)(new Set());
+    const modalVisibilityContextValue = (0, react_1.useMemo)(() => {
+        return {
+            registerForm: (id) => {
+                registeredForms.current.add(id);
+            },
+            unRegisterForm: (id) => {
+                registeredForms.current.delete(id);
+            },
+            amITheSingleForm: (id) => {
+                return registeredForms.current.size === 1 && registeredForms.current.has(id);
+            },
+            requestClose: () => {
+                return doClose();
+            },
+        };
+    }, [doClose]);
+    if (!root) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => (open ? doOpen() : doClose()), children: (0, jsx_runtime_1.jsxs)(Dialog.Portal, { container: root, children: [!fullScreen && (0, jsx_runtime_1.jsx)("div", { className: ModalDialog_module_scss_1.default.overlayBg }), (0, jsx_runtime_1.jsx)(Dialog.Overlay, { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.overlay, {
+                        [ModalDialog_module_scss_1.default.fullScreen]: fullScreen,
+                    }), children: (0, jsx_runtime_1.jsxs)(Dialog.Content, { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.content), onPointerDownOutside: (event) => {
+                            if (event.target instanceof Element &&
+                                event.target.closest("._debug-inspect-button") !== null) {
+                                //we prevent the auto modal close on clicking the inspect button
+                                event.preventDefault();
+                            }
+                        }, ref: composedRef, style: Object.assign(Object.assign({}, style), { gap: undefined }), children: [!!title && ((0, jsx_runtime_1.jsx)(Dialog.Title, { style: { marginTop: 0 }, children: (0, jsx_runtime_1.jsx)("header", { id: "dialogTitle", className: ModalDialog_module_scss_1.default.dialogTitle, children: title }) })), (0, jsx_runtime_1.jsx)("div", { className: ModalDialog_module_scss_1.default.innerContent, style: { gap: style === null || style === void 0 ? void 0 : style.gap }, children: (0, jsx_runtime_1.jsx)(ModalVisibilityContext_1.ModalVisibilityContext.Provider, { value: modalVisibilityContextValue, children: children }) }), closeButtonVisible && ((0, jsx_runtime_1.jsx)(Dialog.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", className: ModalDialog_module_scss_1.default.closeButton, "aria-label": "Close", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" }) }))] }) })] }) }));
+});
+exports.ModalDialog.displayName = "ModalDialog";

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

@@ -0,0 +1,60 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalFormClose = exports.ModalVisibilityContext = void 0;
+const react_1 = __importStar(require("react"));
+exports.ModalVisibilityContext = react_1.default.createContext(null);
+const useModalFormClose = () => {
+    const id = (0, react_1.useId)();
+    const { registerForm, unRegisterForm, requestClose, amITheSingleForm } = (0, react_1.useContext)(exports.ModalVisibilityContext) || {};
+    (0, react_1.useEffect)(() => {
+        if (registerForm) {
+            registerForm(id);
+            return () => {
+                unRegisterForm === null || unRegisterForm === void 0 ? void 0 : unRegisterForm(id);
+            };
+        }
+    }, [id, registerForm, unRegisterForm]);
+    return (0, react_1.useCallback)(() => {
+        if (!requestClose) {
+            return;
+        }
+        if (!amITheSingleForm(id)) {
+            return;
+        }
+        return requestClose();
+    }, [amITheSingleForm, id, requestClose]);
+};
+exports.useModalFormClose = useModalFormClose;

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

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navGroupComponentRenderer = exports.NavGroupMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const NavGroup_module_scss_1 = __importDefault(require("./NavGroup.module.scss"));
+const IconNative_1 = require("@components/Icon/IconNative");
+const NavLink_module_scss_1 = __importDefault(require("@components/NavLink/NavLink.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const NavGroupNative_1 = require("./NavGroupNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "NavGroup";
+exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`NavGroup\` component is a container for grouping related navigation targets ` +
+        `(\`NavLink\` components). It can be displayed as a submenu in the App's UI.`,
+    props: {
+        label: (0, metadata_helpers_1.dLabel)(),
+        icon: (0, ComponentDefs_1.d)(`This property defines an optional icon to display along with the \`${COMP}\` label.`),
+        to: (0, ComponentDefs_1.d)(`This property defines an optional navigation link.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NavGroup_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`color-bg-dropdown-${COMP}`]: "$color-bg-primary",
+        [`radius-dropdown-${COMP}`]: "$radius",
+        [`shadow-dropdown-${COMP}`]: "$shadow-spread",
+    },
+});
+exports.navGroupComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavGroupMd, ({ node, extractValue, renderChild }) => {
+    return ((0, jsx_runtime_1.jsx)(NavGroupNative_1.NavGroup, { label: extractValue.asDisplayText(node.props.label), to: extractValue.asOptionalString(node.props.to), icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue.asString(node.props.icon), className: NavLink_module_scss_1.default.icon }), node: node, renderChild: renderChild }));
+});