xmlui 0.9.23 → 0.9.25

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,

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",
+            } }) }));
+}

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

@@ -0,0 +1,46 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RadixTooltip = __importStar(require("@radix-ui/react-tooltip"));
+const Tooltip_module_scss_1 = __importDefault(require("./Tooltip.module.scss"));
+const Tooltip = ({ trigger, label }) => {
+    return ((0, jsx_runtime_1.jsx)(RadixTooltip.Provider, { children: (0, jsx_runtime_1.jsxs)(RadixTooltip.Root, { children: [(0, jsx_runtime_1.jsx)(RadixTooltip.Trigger, { asChild: true, children: trigger }), (0, jsx_runtime_1.jsx)(RadixTooltip.Portal, { children: (0, jsx_runtime_1.jsx)(RadixTooltip.Content, { side: "bottom", align: "start", className: Tooltip_module_scss_1.default.TooltipContent, children: label }) })] }) }));
+};
+exports.Tooltip = Tooltip;

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

@@ -33,6 +33,9 @@ exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
         startIcon: (0, metadata_helpers_1.dStartIcon)(),
         endText: (0, metadata_helpers_1.dEndText)(),
         endIcon: (0, metadata_helpers_1.dEndIcon)(),
+        gap: {
+            description: "This property defines the gap between the adornments and the input area.",
+        },
         hasSpinBox: {
             description: `This boolean prop shows (\`true\`) or hides (\`false\`) the spinner buttons for the input field.`,
             valueType: "boolean",
@@ -73,5 +76,5 @@ exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(NumberBox_module_scss_1.default.themeVars),
 });
 exports.numberBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NumberBoxMd, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, { style: layoutCss, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue.asOptionalString(node.props.initialValue), step: extractValue(node.props.step), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), maxLength: extractValue(node.props.maxLength), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+    return ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, { style: layoutCss, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue.asOptionalString(node.props.initialValue), step: extractValue(node.props.step), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), gap: extractValue.asOptionalString(node.props.gap), endIcon: extractValue.asOptionalString(node.props.endIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), maxLength: extractValue(node.props.maxLength), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
 });

package/dist/scripts/src/components/NumberBox/NumberBoxNative.js

@@ -48,7 +48,7 @@ const IconNative_1 = require("../Icon/IconNative");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ButtonNative_1 = require("../Button/ButtonNative");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
-exports.NumberBox = (0, react_1.forwardRef)(function NumberBox({ id, value, initialValue, style, enabled = true, placeholder, validationStatus = "none", hasSpinBox = true, step, integersOnly = false, zeroOrPositive = false, min = zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, max = numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, maxLength, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
+exports.NumberBox = (0, react_1.forwardRef)(function NumberBox({ id, value, initialValue, style, enabled = true, placeholder, validationStatus = "none", hasSpinBox = true, step, integersOnly = false, zeroOrPositive = false, min = zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, max = numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, maxLength, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
     var _a;
     // Ensure the provided minimum is not smaller than the 0 if zeroOrPositive is set to true
     min = Math.max(zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, min);
@@ -288,7 +288,7 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox({ id, value, init
             }), tabIndex: -1, onFocus: () => {
                 var _a;
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: NumberBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, { [NumberBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: NumberBox_module_scss_1.default.adornment }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "up", type: "button", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevrondown", size: "sm" }) })] }))] }) }));
+            }, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: NumberBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, { [NumberBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: NumberBox_module_scss_1.default.adornment }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "up", type: "button", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevrondown", size: "sm" }) })] }))] }) }));
 });
 function applyStep(valueStrRep, step, min, max, integersOnly) {
     const currentValue = (0, numberbox_abstractions_1.toUsableNumber)(valueStrRep, integersOnly);

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

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const metadata_helpers_1 = require("../metadata-helpers");
-const OptionTypeProvider_1 = require("../Option/OptionTypeProvider");
+const OptionTypeProvider_1 = require("./OptionTypeProvider");
 const container_helpers_1 = require("../container-helpers");
 const COMP = "Option";
 exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
@@ -21,6 +21,7 @@ exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
         enabled: (0, metadata_helpers_1.dEnabled)(),
         optionTemplate: (0, ComponentDefs_1.d)("This property is used to define a custom option template"),
     },
+    childrenAsTemplate: "optionTemplate",
 });
 const OptionNative = (0, react_1.memo)((props) => {
     const OptionType = (0, OptionTypeProvider_1.useOptionType)();
@@ -34,5 +35,5 @@ exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
     const optionTemplate = node.props.optionTemplate;
     return ((0, jsx_runtime_1.jsx)(OptionNative, { optionRenderer: optionTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: optionTemplate, renderChild: renderChild, contextVars: contextVars, layoutContext: layoutContext }))
-            : undefined, value: extractValue(node.props.value), label: extractValue.asOptionalString(node.props.label) || renderChild(node.children), enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss }));
+            : undefined, value: extractValue(node.props.value), label: extractValue.asOptionalString(node.props.label) || extractValue(node.props.value), enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss }));
 });

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

@@ -83,7 +83,9 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SelectMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: extractValue.asOptionalBoolean(node.props.multiSelect), style: layoutCss, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), updateState: updateState, searchable: extractValue.asOptionalBoolean(node.props.searchable), initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), optionLabelRenderer: node.props.optionLabelTemplate
+    const multiSelect = extractValue.asOptionalBoolean(node.props.multiSelect);
+    const searchable = extractValue.asOptionalBoolean(node.props.searchable);
+    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: multiSelect, style: layoutCss, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), updateState: updateState, searchable: searchable, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), optionLabelRenderer: node.props.optionLabelTemplate
             ? (item) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionLabelTemplate, item: item, renderChild: renderChild }));
             }
@@ -91,8 +93,8 @@ exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
             ? (item, val, inTrigger) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, contextVars: {
                         $selectedValue: val,
-                        $inTrigger: inTrigger
-                    }, renderChild: (...args) => ((0, jsx_runtime_1.jsx)(react_select_1.SelectItemText, { children: renderChild(...args) })) }));
+                        $inTrigger: inTrigger,
+                    }, renderChild: (...args) => multiSelect || searchable ? (renderChild(...args)) : ((0, jsx_runtime_1.jsx)(react_select_1.SelectItemText, { children: renderChild(...args) })) }));
             }
             : undefined, valueRenderer: node.props.valueTemplate
             ? (item, removeItem) => {