xmlui 0.10.10 → 0.10.12

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

@@ -60,6 +60,8 @@ const InputAdornment_1 = require("../Input/InputAdornment");
 const ButtonNative_1 = require("../Button/ButtonNative");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const parts_1 = require("../../components-core/parts");
+const PART_SPINNER_UP = "spinnerUp";
+const PART_SPINNER_DOWN = "spinnerDown";
 // Default props for NumberBox component
 exports.defaultProps = {
     enabled: true,
@@ -140,45 +142,83 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
     // --- Register stepper logic to buttons
     useLongPress(upButton.current, handleIncStep);
     useLongPress(downButton.current, handleDecStep);
-    // --- This logic prevenst the user from typing invalid characters (in the current typing context)
-    const handleOnBeforeInput = (event) => {
-        var _a, _b;
-        // --- Prevent the default behavior for some characters
-        let shouldPreventDefault = false;
-        const currentValue = (_a = event.target.value) !== null && _a !== void 0 ? _a : "";
-        const currentPos = event.target.selectionStart;
+    // --- Shared character validation logic
+    const processCharacterInput = (0, react_1.useCallback)((char, currentValue, currentPos, predictedValue, isForPaste = false) => {
         // --- Are the caret after the exponential separator?
-        const beforeCaret = currentValue.substring(0, event.target.selectionStart);
-        // --- If "expPos" is -1, the caret is not after the exponential separator
+        const beforeCaret = currentValue.substring(0, currentPos);
         const expPos = beforeCaret.indexOf(numberbox_abstractions_1.EXPONENTIAL_SEPARATOR);
-        switch (event.data) {
+        let shouldAccept = true;
+        let shouldPreventDefault = false;
+        let newValue = currentValue;
+        let newPos = currentPos;
+        switch (char) {
             case "-":
+                shouldAccept = false;
                 shouldPreventDefault = true;
+                if (zeroOrPositive) {
+                    // --- No minus sign allowed
+                    break;
+                }
                 if (expPos === -1) {
                     // --- Change the first char to "-" if we are before the exponential separator and it's not already there
                     if (!currentValue.startsWith("-")) {
-                        setNewValue("-" + currentValue, currentPos + 1);
+                        newValue = "-" + currentValue;
+                        newPos = currentPos + 1;
                     }
                 }
                 else {
                     // --- Change the char after the exponential separator to "-" if it's not already there
                     if (currentValue[expPos + 1] !== "-") {
-                        setNewValue(currentValue.substring(0, expPos + 1) + "-" + currentValue.substring(expPos + 1), currentPos + 1);
+                        newValue =
+                            currentValue.substring(0, expPos + 1) + "-" + currentValue.substring(expPos + 1);
+                        newPos = currentPos + 1;
                     }
                 }
                 break;
             case "+":
+                shouldAccept = false;
                 shouldPreventDefault = true;
                 if (expPos === -1) {
                     // --- Remove the first char if it's "-" and we are before the exponential separator
                     if (currentValue.startsWith("-")) {
-                        setNewValue(currentValue.substring(1), currentPos - 1);
+                        newValue = currentValue.substring(1);
+                        newPos = Math.max(0, currentPos - 1);
                     }
                 }
                 else {
                     // --- Remove the char after the exponential separator if it's "-"
                     if (currentValue[expPos + 1] === "-") {
-                        setNewValue(currentValue.substring(0, expPos + 1) + currentValue.substring(expPos + 2), currentPos - 1);
+                        newValue = currentValue.substring(0, expPos + 1) + currentValue.substring(expPos + 2);
+                        newPos = Math.max(expPos + 1, currentPos - 1);
+                    }
+                }
+                break;
+            case "0":
+                // --- Prevent leading zeros (before decimal or exponential separator)
+                if (currentValue === "0") {
+                    shouldAccept = false;
+                    shouldPreventDefault = true;
+                }
+                break;
+            case "1":
+            case "2":
+            case "3":
+            case "4":
+            case "5":
+            case "6":
+            case "7":
+            case "8":
+            case "9":
+                // --- Replace leading zero with this digit
+                if (currentValue === "0" && currentPos === 1) {
+                    if (isForPaste) {
+                        newValue = char;
+                        shouldAccept = false; // Don't add it again for paste
+                    }
+                    else {
+                        newValue = char;
+                        newPos = 1;
+                        shouldPreventDefault = true;
                     }
                 }
                 break;
@@ -186,97 +226,170 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
                 // --- Prevent multiple decimal separators (integers only),
                 // --- or decimal separator after the exponential separator
                 if (integersOnly || currentValue.includes(numberbox_abstractions_1.DECIMAL_SEPARATOR) || expPos !== -1) {
+                    shouldAccept = false;
+                    shouldPreventDefault = true;
+                }
+                else if (predictedValue.startsWith(numberbox_abstractions_1.DECIMAL_SEPARATOR) && currentPos === 0) {
+                    newValue = "0" + predictedValue;
+                    newPos = currentPos + 2;
                     shouldPreventDefault = true;
                 }
                 break;
             case numberbox_abstractions_1.EXPONENTIAL_SEPARATOR:
                 // --- Prevent exponential notation for integers
                 if (integersOnly) {
+                    shouldAccept = false;
                     shouldPreventDefault = true;
                     break;
                 }
-                // --- Prevent multiple exponential separators (and too many digits after it)
-                if (currentValue.includes(numberbox_abstractions_1.EXPONENTIAL_SEPARATOR) ||
-                    tooManyDigitsAfterExponentialSeparator(currentPos, 2)) {
+                // --- Prevent multiple exponential separators
+                if (currentValue.includes(numberbox_abstractions_1.EXPONENTIAL_SEPARATOR)) {
+                    shouldAccept = false;
                     shouldPreventDefault = true;
                 }
                 break;
             default:
-                let newInput = event.data;
-                const selectionStart = event.target.selectionStart;
-                // --- Test for multi-character input (perhaps paste)
-                if (((_b = event.data) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-                    // --- Decide whether to accept the optional sign character
-                    if (newInput.startsWith("-")) {
-                        if (selectionStart > 0) {
-                            shouldPreventDefault = true;
-                            break;
-                        }
-                    }
-                    else if (newInput.startsWith("+")) {
+                // --- Only allow digits for single characters
+                if (char >= "0" && char <= "9") {
+                    // --- Prevent digits before minus sign
+                    if (currentValue.startsWith("-") && currentPos === 0) {
+                        shouldAccept = false;
                         shouldPreventDefault = true;
                         break;
                     }
-                    // --- Replace the selection with the new input
-                    const newValue = currentValue.substring(0, selectionStart) +
-                        newInput +
-                        currentValue.substring(event.target.selectionEnd);
-                    // --- Check for integers
-                    if (integersOnly && !numberbox_abstractions_1.INT_REGEXP.test(newValue)) {
-                        // --- The result is not an integer, drop the pasted input
-                        shouldPreventDefault = true;
-                    }
-                    else if (!numberbox_abstractions_1.FLOAT_REGEXP.test(newValue)) {
-                        // --- The result is not a loat, drop the pasted input
-                        shouldPreventDefault = true;
+                    // --- For beforeInput, check for too many digits after exponential separator
+                    if (!isForPaste && expPos !== -1) {
+                        const tooManyDigitsAfterExponentialSeparator = (pos, maxDigits) => {
+                            let numDigitsAfter = 0;
+                            while (pos < currentValue.length) {
+                                if (/\d/.test(currentValue[pos++])) {
+                                    numDigitsAfter++;
+                                }
+                                else {
+                                    numDigitsAfter = maxDigits + 1;
+                                    break;
+                                }
+                            }
+                            return numDigitsAfter > maxDigits;
+                        };
+                        if (tooManyDigitsAfterExponentialSeparator(expPos + 1, 1)) {
+                            shouldAccept = false;
+                            shouldPreventDefault = true;
+                        }
                     }
-                    break;
                 }
-                // --- Single character input
-                // --- Prevent non-digit characters
-                if (event.data < "0" || event.data > "9") {
+                else {
+                    // --- Reject non-digit characters
+                    shouldAccept = false;
+                    shouldPreventDefault = true;
+                }
+                break;
+        }
+        return { shouldAccept, newValue, newPos, shouldPreventDefault };
+    }, [integersOnly, zeroOrPositive]);
+    // --- This logic prevents the user from typing invalid characters (in the current typing context)
+    const handleOnBeforeInput = (event) => {
+        var _a, _b;
+        const currentValue = (_a = event.target.value) !== null && _a !== void 0 ? _a : "";
+        const currentPos = event.target.selectionStart;
+        const expectedNewValue = currentValue.substring(0, currentPos) +
+            event.data +
+            currentValue.substring(event.target.selectionEnd);
+        // --- Handle multi-character input (paste) through the legacy path
+        if (((_b = event.data) === null || _b === void 0 ? void 0 : _b.length) > 1) {
+            let shouldPreventDefault = false;
+            const selectionStart = event.target.selectionStart;
+            let newInput = event.data;
+            // --- Decide whether to accept the optional sign character
+            if (newInput.startsWith("-")) {
+                if (selectionStart > 0) {
                     shouldPreventDefault = true;
-                    break;
                 }
-                // --- Prevent digits before minus sign
-                if (currentValue.startsWith("-") && selectionStart === 0) {
+            }
+            else if (newInput.startsWith("+")) {
+                shouldPreventDefault = true;
+            }
+            if (!shouldPreventDefault) {
+                // --- Check for integers
+                if (integersOnly && !numberbox_abstractions_1.INT_REGEXP.test(expectedNewValue)) {
+                    // --- The result is not an integer, drop the pasted input
                     shouldPreventDefault = true;
-                    break;
                 }
-                // --- Prevent too many digits after the exponential separator
-                if (expPos !== -1 && tooManyDigitsAfterExponentialSeparator(expPos + 1, 1)) {
-                    // --- Caret after the exponential separator
-                    // --- Prevent typing a digi if more than 2 digits after the exponential separator
+                else if (!numberbox_abstractions_1.FLOAT_REGEXP.test(expectedNewValue)) {
+                    // --- The result is not a float, drop the pasted input
                     shouldPreventDefault = true;
                 }
-                break;
+            }
+            if (shouldPreventDefault) {
+                event.preventDefault();
+            }
+            return;
         }
-        // --- Done.
-        if (shouldPreventDefault) {
+        // --- Single character processing
+        const result = processCharacterInput(event.data, currentValue, currentPos, expectedNewValue, false);
+        if (result.shouldPreventDefault) {
             event.preventDefault();
         }
-        return;
-        // --- Helpers
-        function tooManyDigitsAfterExponentialSeparator(pos, maxDigits) {
-            let numDigitsAfter = 0;
-            while (pos < currentValue.length) {
-                if (/\d/.test(currentValue[pos++])) {
-                    numDigitsAfter++;
-                }
-                else {
-                    numDigitsAfter = maxDigits + 1;
-                    break;
-                }
+        // --- Apply value changes if needed
+        if (result.newValue !== currentValue) {
+            const setNewValue = (newValue, pos) => {
+                var _a;
+                event.target.value = newValue;
+                updateValue(newValue, newValue);
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(pos, pos);
+            };
+            setNewValue(result.newValue, result.newPos);
+        }
+    };
+    // --- Handle paste events by applying the same character validation logic
+    const handleOnPaste = (0, react_1.useCallback)((event) => {
+        var _a, _b, _c;
+        event.preventDefault();
+        const pastedText = event.clipboardData.getData("text/plain");
+        if (!pastedText)
+            return;
+        const inputElement = event.currentTarget;
+        const currentValue = (_a = inputElement.value) !== null && _a !== void 0 ? _a : "";
+        const selectionStart = (_b = inputElement.selectionStart) !== null && _b !== void 0 ? _b : 0;
+        const selectionEnd = (_c = inputElement.selectionEnd) !== null && _c !== void 0 ? _c : 0;
+        const expectedNewValue = currentValue.substring(0, selectionStart) +
+            pastedText +
+            currentValue.substring(selectionEnd);
+        // --- Start with the value before the selection
+        let resultValue = currentValue.substring(0, selectionStart);
+        let currentPos = selectionStart;
+        // --- Process each character from the pasted text
+        for (let i = 0; i < pastedText.length; i++) {
+            const char = pastedText[i];
+            const result = processCharacterInput(char, resultValue, currentPos, expectedNewValue, true);
+            if (result.shouldAccept) {
+                resultValue =
+                    resultValue.substring(0, currentPos) + char + resultValue.substring(currentPos);
+                currentPos++;
+            }
+            else if (result.newValue !== resultValue) {
+                // --- Handle special cases like sign changes or zero replacement
+                resultValue = result.newValue;
+                currentPos = result.newPos;
             }
-            return numDigitsAfter > maxDigits;
         }
-        function setNewValue(newValue, pos) {
-            var _a;
-            event.target.value = newValue;
-            updateValue(newValue, newValue);
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(pos, pos);
+        // --- Add the rest of the original value after the selection
+        resultValue += currentValue.substring(selectionEnd);
+        // --- Final validation - ensure the result is a valid number format
+        let isValidFinal = false;
+        if (integersOnly) {
+            isValidFinal = numberbox_abstractions_1.INT_REGEXP.test(resultValue) || resultValue === "" || resultValue === "-";
         }
-    };
+        else {
+            isValidFinal = numberbox_abstractions_1.FLOAT_REGEXP.test(resultValue) || resultValue === "" || resultValue === "-";
+        }
+        // --- Apply the result if valid
+        if (isValidFinal) {
+            inputElement.value = resultValue;
+            updateValue(resultValue, resultValue);
+            inputElement.setSelectionRange(currentPos, currentPos);
+        }
+    }, [processCharacterInput, updateValue, integersOnly]);
     // --- Setting steppers with keyboard
     const handleOnKey = (0, react_1.useCallback)((event) => {
         if (event.code === "ArrowUp") {
@@ -293,9 +406,26 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
     }, [onFocus]);
     const handleOnBlur = (0, react_1.useCallback)(() => {
-        setValueStrRep((0, numberbox_abstractions_1.mapToRepresentation)(value));
+        var _a, _b;
+        // --- Get the current input value
+        const currentInputValue = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+        // --- Check if we need to add a trailing zero
+        let finalValue = currentInputValue;
+        if (!integersOnly && currentInputValue.endsWith(numberbox_abstractions_1.DECIMAL_SEPARATOR)) {
+            // --- Add trailing zero if the value ends with decimal separator
+            finalValue = currentInputValue + "0";
+            // --- Update the input and state with the new value
+            if (inputRef.current) {
+                inputRef.current.value = finalValue;
+            }
+            updateValue(finalValue, finalValue);
+        }
+        else {
+            // --- Use the standard representation mapping
+            setValueStrRep((0, numberbox_abstractions_1.mapToRepresentation)(value));
+        }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [value, onBlur]);
+    }, [value, onBlur, integersOnly, updateValue]);
     const focus = (0, react_1.useCallback)(() => {
         var _a;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -323,7 +453,7 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_START_ADORNMENT, text: startText, iconName: startIcon, className: (0, classnames_1.default)(NumberBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, "data-part-id": parts_1.PART_INPUT, 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, { "data-part-id": parts_1.PART_END_ADORNMENT, text: endText, iconName: endIcon, className: (0, classnames_1.default)(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", role: "spinbutton", 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: spinnerUpIcon || "spinnerUp:NumberBox", fallback: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", role: "spinbutton", 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: spinnerDownIcon || "spinnerDown:NumberBox", fallback: "chevrondown", size: "sm" }) })] }))] }) })));
+                    }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onPaste: handleOnPaste, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, text: endText, iconName: endIcon, className: (0, classnames_1.default)(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-part-id": PART_SPINNER_UP, "data-spinner": "up", type: "button", role: "spinbutton", 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: spinnerUpIcon || "spinnerUp:NumberBox", fallback: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_SPINNER_DOWN, "data-spinner": "down", type: "button", role: "spinbutton", 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: spinnerDownIcon || "spinnerDown:NumberBox", fallback: "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

@@ -30,13 +30,13 @@ exports.OptionMd = (0, metadata_helpers_1.createMetadata)({
 exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, className, renderChild, layoutContext }) => {
     var _a, _b;
     const label = extractValue.asOptionalString(node.props.label);
-    const value = extractValue.asOptionalString(node.props.value);
+    let value = extractValue(node.props.value);
     if (label === undefined && value === undefined) {
         return null;
     }
     const hasTextNodeChild = ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) === 1 && (node.children[0].type === "TextNode" || node.children[0].type === "TextNodeCData");
     const textNodeChild = hasTextNodeChild ? renderChild(node.children) : undefined;
-    return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { label: label || textNodeChild, value: value || label, enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, optionRenderer: ((_b = node.children) === null || _b === void 0 ? void 0 : _b.length) > 0
+    return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { label: label || textNodeChild, value: value !== undefined && value !== "" ? value : label, enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, optionRenderer: ((_b = node.children) === null || _b === void 0 ? void 0 : _b.length) > 0
             ? !hasTextNodeChild ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.children, renderChild: renderChild, contextVars: contextVars, layoutContext: layoutContext })) : undefined
             : undefined, children: !hasTextNodeChild && renderChild(node.children) }));
 });

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

@@ -1,13 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionNative = exports.defaultProps = void 0;
+exports.convertOptionValue = convertOptionValue;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const OptionTypeProvider_1 = require("./OptionTypeProvider");
 // Default props for Option component
 exports.defaultProps = {
-    enabled: true
+    enabled: true,
 };
+function convertOptionValue(value) {
+    if (typeof value !== "string" &&
+        (typeof value !== "number" ||
+            (typeof value === "number" && isNaN(value))) &&
+        typeof value !== "boolean" &&
+        value !== null) {
+        return "";
+    }
+    return value;
+}
 exports.OptionNative = (0, react_1.memo)((props) => {
     const OptionType = (0, OptionTypeProvider_1.useOptionType)();
     if (!OptionType) {

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

@@ -17,7 +17,11 @@ exports.RadioGroupMd = (0, metadata_helpers_1.createMetadata)({
     description: "`RadioGroup` creates a mutually exclusive selection interface where users can " +
         "choose only one option from a group of radio buttons. It manages the selection " +
         "state and ensures that selecting one option automatically deselects all others in " +
-        "the group.",
+        "the group." +
+        "\n\n" +
+        "Radio options store their values as strings. Numbers and booleans are converted to strings " +
+        "when assigned, while objects, functions and arrays default to an empty string unless resolved " +
+        "via binding expressions.",
     props: {
         initialValue: Object.assign(Object.assign({}, (0, metadata_helpers_1.dInitialValue)()), { defaultValue: RadioGroupNative_1.defaultProps.initialValue }),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
@@ -52,10 +56,10 @@ exports.RadioGroupMd = (0, metadata_helpers_1.createMetadata)({
         [`backgroundColor-${RGOption}--disabled`]: "$backgroundColor--disabled",
         [`backgroundColor-checked-${RGOption}`]: "$color-primary-500",
         [`backgroundColor-checked-${RGOption}--disabled`]: `$textColor--disabled`,
-        [`fontSize-${RGOption}`]: "$fontSize-small",
+        [`fontSize-${RGOption}`]: "$fontSize-sm",
         [`fontWeight-${RGOption}`]: "$fontWeight-bold",
     },
 });
 exports.radioGroupRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadioGroupMd, ({ node, extractValue, className, state, updateState, lookupEventHandler, renderChild, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroup, { enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, updateState: updateState, validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), children: renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroup, { autofocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, updateState: updateState, validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), children: renderChild(node.children) }));
 });

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

@@ -58,32 +58,47 @@ const misc_1 = require("../../components-core/utils/misc");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvider"));
 const RadioItemNative_1 = require("./RadioItemNative");
+const OptionNative_1 = require("../Option/OptionNative");
 exports.defaultProps = {
     value: "",
     initialValue: "",
     enabled: true,
     validationStatus: "none",
     required: false,
+    readOnly: false,
 };
 const RadioGroupStatusContext = (0, react_1.createContext)({
     status: "none",
     enabled: exports.defaultProps.enabled,
 });
 exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup(_a, forwardedRef) {
-    var { id, value = exports.defaultProps.value, initialValue = exports.defaultProps.initialValue, enabled = exports.defaultProps.enabled, validationStatus = exports.defaultProps.validationStatus, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, children, registerComponentApi, style, className } = _a, rest = __rest(_a, ["id", "value", "initialValue", "enabled", "validationStatus", "label", "labelPosition", "labelWidth", "labelBreak", "required", "updateState", "onDidChange", "onFocus", "onBlur", "children", "registerComponentApi", "style", "className"]);
+    var { id, value = exports.defaultProps.value, initialValue = exports.defaultProps.initialValue, autofocus, enabled = exports.defaultProps.enabled, validationStatus = exports.defaultProps.validationStatus, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, readOnly = exports.defaultProps.readOnly, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, children, registerComponentApi, style, className } = _a, rest = __rest(_a, ["id", "value", "initialValue", "autofocus", "enabled", "validationStatus", "label", "labelPosition", "labelWidth", "labelBreak", "required", "readOnly", "updateState", "onDidChange", "onFocus", "onBlur", "children", "registerComponentApi", "style", "className"]);
     const [focused, setFocused] = react_1.default.useState(false);
+    const radioGroupRef = (0, react_1.useRef)(null);
     // --- Initialize the related field with the input's initial value
     (0, react_1.useEffect)(() => {
-        updateState({ value: initialValue }, { initial: true });
+        updateState({ value: (0, OptionNative_1.convertOptionValue)(initialValue) }, { initial: true });
     }, [initialValue, updateState]);
+    // --- Handle autofocus by focusing the first radio option
+    (0, react_1.useEffect)(() => {
+        if (autofocus && radioGroupRef.current) {
+            // Find the first radio item element
+            const firstRadioItem = radioGroupRef.current.querySelector('[role="radio"]');
+            if (firstRadioItem) {
+                firstRadioItem.focus();
+            }
+        }
+    }, [autofocus]);
     // --- Handle the value change events for this input
     const updateValue = (0, react_1.useCallback)((value) => {
         updateState({ value });
         onDidChange(value);
     }, [onDidChange, updateState]);
     const onInputChange = (0, react_1.useCallback)((value) => {
+        if (readOnly)
+            return;
         updateValue(value);
-    }, [updateValue]);
+    }, [updateValue, readOnly]);
     // --- Manage obtaining and losing the focus
     const handleOnFocus = (0, react_1.useCallback)((ev) => {
         setFocused(true);
@@ -105,7 +120,7 @@ exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup(_a, forwardedRe
     const contextValue = (0, react_1.useMemo)(() => {
         return { value, setValue: updateValue, status: validationStatus, enabled };
     }, [value, updateValue, validationStatus, enabled]);
-    return ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
+    return ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { ref: radioGroupRef, id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, required: required, "aria-readonly": readOnly, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
                         [RadioGroup_module_scss_1.default.focused]: focused,
                         [RadioGroup_module_scss_1.default.disabled]: !enabled,
                     }), children: children }) })) }) }));
@@ -120,7 +135,7 @@ const RadioGroupOption = ({ value, label, enabled = true, optionRenderer, style,
         [RadioGroup_module_scss_1.default.valid]: value === radioGroupContext.value && radioGroupContext.status === "valid",
     }), [enabled, radioGroupContext, value]);
     const item = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RadioItemNative_1.UnwrappedRadioItem, { id: id, value: value, checked: value === radioGroupContext.value, disabled: !enabled, statusStyles: 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, radioGroupContext]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOptionContainer, className), 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({
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOptionContainer, className), style: style, "data-radio-item": true, 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 === radioGroupContext.value,
                     $setChecked: radioGroupContext.setValue,
                 })] })) : (item) }, id));

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

@@ -43,6 +43,7 @@ const RadioGroup_module_scss_1 = __importDefault(require("./RadioGroup.module.sc
 const InnerRadioGroup = __importStar(require("@radix-ui/react-radio-group"));
 const constants_1 = require("../../components-core/constants");
 const classnames_1 = __importDefault(require("classnames"));
+const OptionNative_1 = require("../Option/OptionNative");
 exports.defaultProps = {
     checked: false,
     value: "",
@@ -56,6 +57,6 @@ const UnwrappedRadioItem = ({ id, checked = exports.defaultProps.checked, value
     const onInputChange = (0, react_1.useCallback)((_) => {
         onDidChange(value);
     }, [onDidChange, value]);
-    return ((0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles), id: id, value: value, checked: checked, disabled: disabled, onClick: onInputChange, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }));
+    return ((0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles), id: id, value: (0, OptionNative_1.convertOptionValue)(value), checked: checked, disabled: disabled, onClick: onInputChange, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }));
 };
 exports.UnwrappedRadioItem = UnwrappedRadioItem;

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

@@ -94,7 +94,7 @@ exports.SelectMd = (0, metadata_helpers_1.createMetadata)({
         [`borderWidth-menu-${COMP}`]: "1px",
         [`borderColor-menu-${COMP}`]: "$borderColor",
         [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
-        [`fontSize-${COMP}-badge`]: "$fontSize-small",
+        [`fontSize-${COMP}-badge`]: "$fontSize-sm",
         [`paddingHorizontal-${COMP}-badge`]: "$space-2_5",
         [`paddingVertical-${COMP}-badge`]: "$space-0_5",
         [`borderRadius-${COMP}-badge`]: "$borderRadius",

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

@@ -295,7 +295,7 @@ const SelectOption = react_2.default.forwardRef((option, ref) => {
         onOptionAdd(opt);
         return () => onOptionRemove(opt);
     }, [opt, onOptionAdd, onOptionRemove]);
-    return ((0, jsx_runtime_1.jsxs)(react_select_1.Item, { ref: ref, className: (0, classnames_1.default)(Select_module_scss_1.default.selectItem, className), value: value + "", textValue: label || ((_a = visibleContentRef.current) === null || _a === void 0 ? void 0 : _a.textContent), disabled: !enabled, onClick: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(react_select_1.Item, { ref: ref, className: (0, classnames_1.default)(Select_module_scss_1.default.selectItem, className), value: value, textValue: label || ((_a = visibleContentRef.current) === null || _a === void 0 ? void 0 : _a.textContent), disabled: !enabled, onClick: (event) => {
             event.stopPropagation();
         }, onMouseEnter: (event) => {
             // Ensure hover state is applied even in DropdownMenu context

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

@@ -19,6 +19,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Spinner_module_scss_1 = __importDefault(require("./Spinner.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
+const PART_RING = "ring";
 exports.defaultProps = {
     delay: 400,
     fullScreen: false,
@@ -40,8 +41,8 @@ exports.Spinner = (0, react_1.forwardRef)(function Spinner(_a, forwardedRef) {
     }
     else {
         if (fullScreen) {
-            return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { role: "status", "aria-label": "Loading", className: Spinner_module_scss_1.default.fullScreenSpinnerWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(Spinner_module_scss_1.default["lds-ring"], className), style: style, ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }) })));
+            return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { role: "status", "aria-label": "Loading", className: Spinner_module_scss_1.default.fullScreenSpinnerWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(Spinner_module_scss_1.default["lds-ring"], className), style: style, ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)("div", { "data-part-id": PART_RING }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }) })));
         }
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(Spinner_module_scss_1.default["lds-ring"], className), role: "status", "aria-label": "Loading", style: style, ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] })));
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(Spinner_module_scss_1.default["lds-ring"], className), role: "status", "aria-label": "Loading", style: style, ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)("div", { "data-part-id": PART_RING }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] })));
     }
 });

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

@@ -37,6 +37,7 @@ exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
             `of the ${COMP} besides its label.`),
     },
     events: {
+        click: (0, metadata_helpers_1.dClick)(COMP),
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
         lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),
@@ -79,5 +80,5 @@ exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SwitchMd, ({ node, extractValue, className, updateState, state, lookupEventHandler, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), 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), variant: "switch", registerComponentApi: registerComponentApi }));
+    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), onClick: lookupEventHandler("click"), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), 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), variant: "switch", registerComponentApi: registerComponentApi }));
 });

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

@@ -171,7 +171,7 @@ exports.TableMd = (0, metadata_helpers_1.createMetadata)({
         [`fontSize-heading-${COMP}`]: "$fontSize-tiny",
         [`fontWeight-heading-${COMP}`]: "$fontWeight-bold",
         [`textTransform-heading-${COMP}`]: "uppercase",
-        [`fontSize-row-${COMP}`]: "$fontSize-small",
+        [`fontSize-row-${COMP}`]: "$fontSize-sm",
         // [`backgroundColor-${COMP}`]: "transparent",
         // [`backgroundColor-row-${COMP}`]: "inherit",
         [`backgroundColor-selected-${COMP}--hover`]: `$backgroundColor-row-${COMP}--hover`,