xmlui 0.9.23 → 0.9.30

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/RadioGroup/RadioGroup.js

@@ -39,7 +39,8 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(RadioGroup_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`gap-${RGOption}`]: "$space-1_5",
-        [`borderWidth-${RGOption}`]: "2px",
+        [`borderWidth-${RGOption}`]: "1px",
+        [`backgroundColor-checked-${RGOption}-indicator`]: `$backgroundColor-primary`,
         [`backgroundColor-checked-${RGOption}--disabled]`]: `$borderColor-${RGOption}--disabled`,
         [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
         [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,

package/dist/scripts/src/components/RadioGroup/RadioGroupNative.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroupOption = exports.RadioGroup = void 0;
+exports.useRadioGroupValue = useRadioGroupValue;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const InnerRadioGroup = __importStar(require("@radix-ui/react-radio-group"));
@@ -89,16 +90,31 @@ exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup({ id, value = "
                         [RadioGroup_module_scss_1.default.disabled]: !enabled,
                     }), children: children }) }) }) }));
 });
+function useRadioGroupValue() {
+    const context = (0, react_1.useContext)(RadioGroupValidationStatusContext);
+    if (!context) {
+        throw new Error("useRadioGroupValue must be used within a RadioGroup");
+    }
+    const { value } = context;
+    const isChecked = (0, react_1.useCallback)((optionValue) => value === optionValue, [value]);
+    return {
+        value,
+        isChecked,
+    };
+}
 const RadioGroupOption = ({ value, label, enabled = true, optionRenderer, style, }) => {
     const id = (0, react_1.useId)();
     const validationContext = (0, react_1.useContext)(RadioGroupValidationStatusContext);
+    const { isChecked } = useRadioGroupValue();
     const statusStyles = (0, react_1.useMemo)(() => ({
         [RadioGroup_module_scss_1.default.disabled]: !enabled,
         [RadioGroup_module_scss_1.default.error]: value === validationContext.value && validationContext.status === "error",
         [RadioGroup_module_scss_1.default.warning]: value === validationContext.value && validationContext.status === "warning",
         [RadioGroup_module_scss_1.default.valid]: value === validationContext.value && validationContext.status === "valid",
     }), [enabled, validationContext.status, validationContext.value, value]);
-    const item = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles), value: value, disabled: !enabled, id: id, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.label, statusStyles), children: label !== null && label !== void 0 ? label : value })] })), [enabled, id, label, statusStyles, value]);
+    const item = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles, {
+                    [RadioGroup_module_scss_1.default.checked]: isChecked(value),
+                }), value: value, disabled: !enabled, id: id, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.label, statusStyles), children: label !== null && label !== void 0 ? label : value })] })), [enabled, id, label, statusStyles, value]);
     return ((0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.radioOptionContainer, style: style, children: optionRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: RadioGroup_module_scss_1.default.optionLabel, children: [(0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.itemContainer, children: item }), optionRenderer({
                     $checked: value === validationContext.value,
                 })] })) : (item) }, id));

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) => {

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

@@ -56,24 +56,28 @@ const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvid
 const OptionContext_1 = require("./OptionContext");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwardedRef) {
+    var _a;
     const { root } = (0, ThemeContext_1.useTheme)();
-    const { enabled, onBlur, autoFocus, onValueChange, validationStatus, children, value, height, style, placeholder, id, triggerRef, onFocus, options, } = props;
+    const { enabled, onBlur, autoFocus, onValueChange, validationStatus, value, height, style, placeholder, id, triggerRef, onFocus, options, children, readOnly, } = props;
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
-    const stringValue = value != undefined ? value + "" : null;
+    const stringValue = (0, react_1.useMemo)(() => {
+        return value != undefined ? value + "" : undefined;
+    }, [value]);
     const onValChange = (0, react_1.useCallback)((val) => {
         var _a;
-        const valueWithMatchingType = (_a = Array.from(options.values()).find((o) => o.value + "" === val)) === null || _a === void 0 ? void 0 : _a.value;
-        onValueChange(valueWithMatchingType);
+        if (readOnly) {
+            return;
+        }
+        const match = Array.from(options).find((o) => `${o.value}` === val);
+        onValueChange((_a = match === null || match === void 0 ? void 0 : match.value) !== null && _a !== void 0 ? _a : val);
     }, [onValueChange, options]);
-    return ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectOption, children: (0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: onValChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, { id: id, style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, {
-                        [Select_module_scss_1.default.error]: validationStatus === "error",
-                        [Select_module_scss_1.default.warning]: validationStatus === "warning",
-                        [Select_module_scss_1.default.valid]: validationStatus === "valid",
-                    }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: (0, jsx_runtime_1.jsx)(react_select_1.Value, { placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, 
-                        // position="popper"
-                        style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.Viewport, { className: (0, classnames_1.default)(Select_module_scss_1.default.selectViewport), children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: onValChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, { id: id, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, {
+                    [Select_module_scss_1.default.error]: validationStatus === "error",
+                    [Select_module_scss_1.default.warning]: validationStatus === "warning",
+                    [Select_module_scss_1.default.valid]: validationStatus === "valid",
+                }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: readOnly ? (((_a = Array.from(options).find((o) => `${o.value}` === stringValue)) === null || _a === void 0 ? void 0 : _a.label) || (0, jsx_runtime_1.jsx)("span", { children: placeholder })) : ((0, jsx_runtime_1.jsx)(react_select_1.Value, { placeholder: placeholder })) }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.SelectViewport, { className: Select_module_scss_1.default.selectViewport, role: "listbox", children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }));
 });
-exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, optionRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak, required = false, inProgress = false, inProgressNotificationMessage = "Loading...", }, ref) {
+exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, optionRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak = false, required = false, inProgress = false, inProgressNotificationMessage = "Loading...", readOnly = false, }, ref) {
     var _a;
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -81,6 +85,8 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
     const observer = (0, react_1.useRef)();
     const { root } = (0, ThemeContext_1.useTheme)();
     const [options, setOptions] = (0, react_1.useState)(new Set());
+    const generatedId = (0, react_1.useId)();
+    const inputId = id || generatedId;
     // Set initial state based on the initialValue prop
     (0, react_1.useEffect)(() => {
         if (initialValue !== undefined) {
@@ -114,7 +120,9 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                 : selectedValue;
         updateState({ value: newSelectedValue });
         onDidChange(newSelectedValue);
-        setOpen(false);
+        if (!multiSelect) {
+            setOpen(false);
+        }
     }, [multiSelect, value, updateState, onDidChange]);
     // Clear selected value
     const clearValue = (0, react_1.useCallback)(() => {
@@ -167,68 +175,71 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
         optionLabelRenderer,
         optionRenderer,
         onChange: toggleOption,
+        setOpen,
     }), [multiSelect, toggleOption, value, optionLabelRenderer, optionRenderer]);
-    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? ((0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption, children: [children, (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: ref, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { id: id, ref: setReferenceElement, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
-                                            [Select_module_scss_1.default.disabled]: !enabled,
-                                            [Select_module_scss_1.default.multi]: multiSelect,
-                                        }), placeholder: placeholder, autoFocus: autoFocus, children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
-                                                        var _a;
-                                                        return valueRenderer ? (valueRenderer(Array.from(options).find((o) => o.value === v), () => {
-                                                            toggleOption(v);
-                                                        })) : ((0, jsx_runtime_1.jsxs)("span", { className: Select_module_scss_1.default.badge, children: [(_a = Array.from(options).find((o) => o.value === v)) === null || _a === void 0 ? void 0 : _a.label, (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
-                                                                        event.stopPropagation();
-                                                                        toggleOption(v);
-                                                                    } })] }, v));
-                                                    }) }) })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder || "" }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
-                                                            event.stopPropagation();
-                                                            clearValue();
-                                                        } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }) }), open && ((0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (value, search, keywords) => {
+    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: (0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: ref, id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: searchable || multiSelect ? ((0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, { id: inputId, "aria-haspopup": "listbox", style: style, ref: setReferenceElement, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
+                                        [Select_module_scss_1.default.disabled]: !enabled,
+                                        [Select_module_scss_1.default.multi]: multiSelect,
+                                    }), placeholder: placeholder, autoFocus: autoFocus, children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
+                                                    var _a;
+                                                    return valueRenderer ? (valueRenderer(Array.from(options).find((o) => o.value === `${v}`), () => {
+                                                        toggleOption(v);
+                                                    })) : ((0, jsx_runtime_1.jsxs)("span", { className: Select_module_scss_1.default.badge, children: [(_a = Array.from(options).find((o) => o.value === `${v}`)) === null || _a === void 0 ? void 0 : _a.label, (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
+                                                                    event.stopPropagation();
+                                                                    toggleOption(v);
+                                                                } })] }, v));
+                                                }) }) })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
+                                                        event.stopPropagation();
+                                                        clearValue();
+                                                    } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }), open && ((0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (value, search, keywords) => {
                                                     const extendedValue = value + " " + keywords.join(" ");
                                                     if (extendedValue.toLowerCase().includes(search.toLowerCase()))
                                                         return 1;
                                                     return 0;
                                                 }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
                                                     // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
-                                                    (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] }) })] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { ref: ref, value: value, options: options, onValueChange: toggleOption, id: id, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: children || emptyListNode })) }) }));
+                                                    (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { readOnly: !!readOnly, ref: ref, value: value, options: options, onValueChange: toggleOption, id: inputId, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: options.size > 0
+                                ? Array.from(options).map((option) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, option.value)))
+                                : emptyListNode })) }), children] }) }) }));
 });
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {
     const id = (0, react_1.useId)();
-    const { label, value, enabled = true, keywords } = option;
-    const { value: selectedValue, onChange, multiSelect, optionLabelRenderer, optionRenderer, } = (0, SelectContext_1.useSelect)();
+    const { label, value, enabled = true, keywords, readOnly } = option;
+    const { value: selectedValue, onChange, multiSelect, optionLabelRenderer, optionRenderer, setOpen, } = (0, SelectContext_1.useSelect)();
     const selected = (0, react_1.useMemo)(() => {
         return Array.isArray(selectedValue) && multiSelect
             ? selectedValue.includes(value)
             : selectedValue === value;
     }, [selectedValue, value, multiSelect]);
-    return ((0, jsx_runtime_1.jsx)(cmdk_1.CommandItem, { id: id, ref: forwardedRef, disabled: !enabled, value: `${value}`, className: Select_module_scss_1.default.multiComboboxOption, onSelect: () => {
+    return ((0, jsx_runtime_1.jsx)(cmdk_1.CommandItem, { id: id, ref: forwardedRef, disabled: !enabled, value: value, className: Select_module_scss_1.default.multiComboboxOption, onSelect: () => {
+            if (readOnly) {
+                setOpen(false);
+                return;
+            }
             onChange(value);
         }, "data-state": selected ? "checked" : undefined, keywords: keywords, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiComboboxOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled, keywords }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }) }, id));
 });
 function HiddenOption(option) {
+    const { optionRenderer, label } = option;
     const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
     const [node, setNode] = (0, react_1.useState)(null);
     const opt = (0, react_1.useMemo)(() => {
         var _a, _b;
-        return Object.assign(Object.assign({}, option), { labelText: (_a = node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: [(_b = node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
+        return Object.assign(Object.assign({}, option), { label: (_a = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: [(_b = node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
     }, [option, node]);
     (0, react_1.useEffect)(() => {
         onOptionAdd(opt);
         return () => onOptionRemove(opt);
     }, [opt, onOptionAdd, onOptionRemove]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => setNode(el), style: { display: "none" }, children: option.label }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => setNode(el), style: { display: "none" }, children: optionRenderer === null || optionRenderer === void 0 ? void 0 : optionRenderer({}) }));
 }
 const SelectOption = react_1.default.forwardRef((option, ref) => {
     const { value, label, enabled = true } = option;
-    const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
-    const { optionLabelRenderer, optionRenderer, value: selectedValue, multiSelect } = (0, SelectContext_1.useSelect)();
-    (0, react_1.useLayoutEffect)(() => {
-        onOptionAdd(option);
-        return () => onOptionRemove(option);
-    }, [option, onOptionAdd, onOptionRemove]);
-    return ((0, jsx_runtime_1.jsx)(react_select_1.Item, { ref: ref, className: Select_module_scss_1.default.selectItem, value: value + "", disabled: !enabled, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectItemContent, children: optionRenderer ? (optionRenderer({
+    const { optionLabelRenderer, optionRenderer, value: selectedValue } = (0, SelectContext_1.useSelect)();
+    return ((0, jsx_runtime_1.jsx)(react_select_1.Item, { ref: ref, className: Select_module_scss_1.default.selectItem, value: value + "", disabled: !enabled, "data-state": selectedValue === value && "checked", children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectItemContent, children: optionRenderer ? (optionRenderer({
                 label,
                 value,
                 enabled,
-            }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_select_1.ItemText, { className: Select_module_scss_1.default.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label }) : label }), (0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }) })] })) }) }));
+            }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_select_1.ItemText, { className: Select_module_scss_1.default.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label }) : label }), selectedValue === value && ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }) }))] })) }) }));
 });
 SelectOption.displayName = "SelectOption";

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

@@ -7,7 +7,7 @@ const renderers_1 = require("../../components-core/renderers");
 const SelectionStoreNative_1 = require("./SelectionStoreNative");
 const COMP = "SelectionStore";
 exports.SelectionStoreMd = (0, ComponentDefs_1.createMetadata)({
-    status: "experimental",
+    status: "deprecated",
     description: `The \`${COMP}\` is a non-visual component that may wrap components (items) and manage ` +
         `their selection state to accommodate the usage of other actions.`,
     props: {

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

@@ -25,7 +25,6 @@ exports.SpinnerMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: false,
         },
-        themeColor: (0, ComponentDefs_1.d)(`(**NOT IMPLEMENTED YET**) The theme color of the component.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Spinner_module_scss_1.default.themeVars),
     defaultThemeVars: {

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

@@ -48,9 +48,11 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
         [`borderColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
         [`backgroundColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
-        [`backgroundColor-${COMP}`]: "$color-surface-400",
-        [`borderColor-${COMP}`]: "$color-surface-400",
-        [`backgroundColor-indicator-${COMP}`]: "$backgroundColor-primary",
+        [`backgroundColor-${COMP}`]: "$backgroundColor-primary",
+        [`borderColor-${COMP}`]: "$color-surface-200",
+        [`borderWidth-${COMP}`]: "1px",
+        [`backgroundColor-indicator-${COMP}`]: "$color-surface-200",
+        [`backgroundColor-indicator-checked-${COMP}`]: "$backgroundColor-primary",
         [`borderColor-checked-${COMP}`]: "$color-primary-500",
         [`backgroundColor-checked-${COMP}`]: "$color-primary-500",
         [`backgroundColor-${COMP}--disabled`]: "$color-surface-200",

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

@@ -62,6 +62,7 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
         [`border-width-${COMP}`]: "0",
         [`borderColor-${COMP}`]: "transparent",
         [`border-style-${COMP}`]: "solid",
+        [`paddingLeft-${COMP}Item`]: "$space-1",
         [`textTransform-${COMP}Item`]: "none",
         [`verticalAlign-${COMP}Item`]: "baseline",
         [`letterSpacing-${COMP}Item`]: "0",

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

@@ -66,7 +66,10 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`fontFamily-${COMP}-code`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-code`]: "$fontSize-small",
         [`borderWidth-${COMP}-code`]: "1px",
+        [`borderStyle-${COMP}-code`]: "solid",
+        [`borderRadius-${COMP}-code`]: "4px",
         [`paddingHorizontal-${COMP}-code`]: "$space-1",
+        [`paddingBottom-${COMP}-code`]: "2px",
         [`textDecorationLine-${COMP}-deleted`]: "line-through",
         [`textDecorationLine-${COMP}-inserted`]: "underline",
         [`fontFamily-${COMP}-keyboard`]: "$fontFamily-monospace",
@@ -81,6 +84,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${COMP}-sub`]: "$fontSize-smaller",
         [`verticalAlign-${COMP}-sub`]: "sub",
         [`fontStyle-${COMP}-var`]: "italic",
+        [`fontStyle-${COMP}-em`]: "italic",
         [`fontFamily-${COMP}-mono`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-title`]: "$fontSize-large",
         [`fontSize-${COMP}-subtitle`]: "$fontSize-medium",
@@ -100,13 +104,15 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`marginBottom-${COMP}-tableheading`]: "$space-4",
         [`paddingHorizontal-${COMP}-tableheading`]: "$space-1",
         [`fontWeight-${COMP}-tableheading`]: "$fontWeight-bold",
-        [`backgroundColor-${COMP}-code`]: "$color-surface-100",
-        [`borderColor-${COMP}-code`]: "$color-surface-200",
-        [`backgroundColor-${COMP}-keyboard`]: "$color-surface-200",
+        [`marginTop-${COMP}-markdown`]: "$space-3",
+        [`marginBottom-${COMP}-markdown`]: "$space-6",
+        [`fontSize-${COMP}-markdown`]: "$fontSize-normal",
+        [`backgroundColor-${COMP}-code`]: "rgba($color-surface-100-rgb, .4)",
+        [`borderColor-${COMP}-code`]: "$color-surface-300",
+        [`backgroundColor-${COMP}-keyboard`]: "rgba($color-surface-100-rgb, .4)",
         [`borderColor-${COMP}-keyboard`]: "$color-surface-300",
         [`backgroundColor-${COMP}-marked`]: "yellow",
         [`color-${COMP}-placeholder`]: "$color-surface-500",
-        [`backgroundColor-${COMP}-codefence`]: "$color-primary-100",
         [`color-${COMP}-codefence`]: "$color-surface-900",
         [`color-${COMP}-subheading`]: "$textColor-secondary",
         [`color-${COMP}-secondary`]: "$textColor-secondary",