xmlui 0.10.11 → 0.10.13

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

@@ -89,6 +89,22 @@ exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup(_a, forwardedRe
             }
         }
     }, [autofocus]);
+    // --- Custom focus handler for label clicks
+    const focusActiveOption = (0, react_1.useCallback)(() => {
+        if (radioGroupRef.current) {
+            // First try to find the currently selected radio option
+            const selectedRadio = radioGroupRef.current.querySelector('[role="radio"][aria-checked="true"]');
+            if (selectedRadio) {
+                selectedRadio.focus();
+                return;
+            }
+            // If no option is selected, focus the first one
+            const firstRadio = radioGroupRef.current.querySelector('[role="radio"]');
+            if (firstRadio) {
+                firstRadio.focus();
+            }
+        }
+    }, []);
     // --- Handle the value change events for this input
     const updateValue = (0, react_1.useCallback)((value) => {
         updateState({ value });
@@ -120,7 +136,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, { 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, {
+    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, onLabelClick: focusActiveOption, 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 }) })) }) }));

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

@@ -160,10 +160,10 @@ exports.TableMd = (0, metadata_helpers_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Table_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`padding-heading-${COMP}`]: `$space-2 $space-0 $space-2 $space-2`,
-        [`padding-cell-${COMP}`]: "$space-2 $space-0 $space-2 $space-2",
+        [`padding-heading-${COMP}`]: `$space-2 $space-1 $space-2 $space-2`,
+        [`padding-cell-${COMP}`]: "$space-2 $space-1 $space-2 $space-2",
         [`paddingHorizontal-cell-first-${COMP}`]: "$space-5",
-        [`paddingHorizontal-cell-last-${COMP}`]: "$space-0",
+        [`paddingHorizontal-cell-last-${COMP}`]: "$space-1",
         [`border-cell-${COMP}`]: "1px solid $borderColor",
         [`outlineWidth-heading-${COMP}--focus`]: "$outlineWidth--focus",
         [`outlineStyle-heading-${COMP}--focus`]: "$outlineStyle--focus",
@@ -184,9 +184,12 @@ exports.TableMd = (0, metadata_helpers_1.createMetadata)({
         [`backgroundColor-heading-${COMP}--active`]: "$color-surface-300",
         [`backgroundColor-heading-${COMP}`]: "$color-surface-100",
         [`textColor-heading-${COMP}`]: "$color-surface-500",
+        [`border-${COMP}`]: "0px solid transparent",
+        [`borderBottom-last-row-${COMP}`]: `$borderBottom-cell-${COMP}`,
+        [`borderRadius-${COMP}`]: "$borderRadius",
     },
 });
-const TableWithColumns = (0, react_1.forwardRef)(({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, className, registerComponentApi, }, ref) => {
+const TableWithColumns = (0, react_1.memo)((0, react_1.forwardRef)(({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, className, registerComponentApi, }, ref) => {
     var _a, _b, _c, _d, _e, _f;
     const data = extractValue(node.props.items) || extractValue(node.props.data);
     const [columnIds, setColumnIds] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
@@ -242,7 +245,7 @@ const TableWithColumns = (0, react_1.forwardRef)(({ extractValue, node, renderCh
         return (0, jsx_runtime_1.jsx)(SelectionStoreNative_1.StandaloneSelectionStore, { children: tableContent });
     }
     return tableContent;
-});
+}));
 TableWithColumns.displayName = "TableWithColumns";
 exports.tableComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TableMd, ({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, className, registerComponentApi, }) => {
     return ((0, jsx_runtime_1.jsx)(TableWithColumns, { node: node, extractValue: extractValue, lookupEventHandler: lookupEventHandler, lookupSyncCallback: lookupSyncCallback, className: className, renderChild: renderChild, registerComponentApi: registerComponentApi }));

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

@@ -392,7 +392,7 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
                 rows.length > 0 &&
                 pagination &&
                 (paginationControlsLocation === "top" || paginationControlsLocation === "both") &&
-                paginationControls, (0, jsx_runtime_1.jsxs)("table", { className: Table_module_scss_1.default.table, ref: tableRef, style: { borderRight: "1px solid transparent" }, children: [!hideHeader && ((0, jsx_runtime_1.jsx)("thead", { style: { height: headerHeight }, className: Table_module_scss_1.default.headerWrapper, children: table.getHeaderGroups().map((headerGroup, headerGroupIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: (0, classnames_1.default)(Table_module_scss_1.default.headerRow, {
+                paginationControls, (0, jsx_runtime_1.jsxs)("table", { className: Table_module_scss_1.default.table, ref: tableRef, children: [!hideHeader && ((0, jsx_runtime_1.jsx)("thead", { style: { height: headerHeight }, className: Table_module_scss_1.default.headerWrapper, children: table.getHeaderGroups().map((headerGroup, headerGroupIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: (0, classnames_1.default)(Table_module_scss_1.default.headerRow, {
                                 [Table_module_scss_1.default.allSelected]: table.getIsAllRowsSelected(),
                             }), children: headerGroup.headers.map((header, headerIndex) => {
                                 var _a, _b, _c;

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

@@ -102,13 +102,11 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         [`borderRadius-${COMP}`]: "$borderRadius",
         [`borderStyle-${COMP}`]: "solid",
         [`fontSize-${COMP}`]: "$fontSize-sm",
-        [`lineHeight-${COMP}`]: "$lineHeight-sm",
         [`borderWidth-${COMP}`]: "$space-0",
         [`lineHeight-${COMP}-codefence`]: "1.5",
         [`fontWeight-${COMP}-abbr`]: "$fontWeight-bold",
         [`textTransform-${COMP}-abbr`]: "uppercase",
         [`fontSize-${COMP}-secondary`]: "$fontSize-sm",
-        [`lineHeight-${COMP}-secondary`]: "$lineHeight-sm",
         [`fontStyle-${COMP}-cite`]: "italic",
         [`textColor-${COMP}`]: "$textColor-primary",
         [`fontFamily-${COMP}`]: "$fontFamily",
@@ -116,7 +114,6 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         [`fontSize-${COMP}-codefence`]: "$fontSize-code",
         [`fontFamily-${COMP}-code`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-code`]: "$fontSize-sm",
-        [`lineHeight-${COMP}-code`]: "$lineHeight-xs",
         [`borderWidth-${COMP}-code`]: "1px",
         [`borderStyle-${COMP}-code`]: "solid",
         [`borderRadius-${COMP}-code`]: "4px",
@@ -126,37 +123,28 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         [`textDecorationLine-${COMP}-inserted`]: "underline",
         [`fontFamily-${COMP}-keyboard`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-keyboard`]: "$fontSize-sm",
-        [`lineHeight-${COMP}-keyboard`]: "$lineHeight-sm",
         [`fontWeight-${COMP}-keyboard`]: "$fontWeight-bold",
         [`borderWidth-${COMP}-keyboard`]: "1px",
         [`paddingHorizontal-${COMP}-keyboard`]: "$space-1",
         [`fontFamily-${COMP}-sample`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-sample`]: "$fontSize-sm",
-        [`lineHeight-${COMP}-sample`]: "$lineHeight-sm",
         [`fontSize-${COMP}-sup`]: "$fontSize-xs",
-        [`lineHeight-${COMP}-sup`]: "$lineHeight-xs",
         [`verticalAlignment-${COMP}-sup`]: "super",
         [`fontSize-${COMP}-sub`]: "$fontSize-xs",
-        [`lineHeight-${COMP}-sub`]: "$lineHeight-xs",
         [`verticalAlignment-${COMP}-sub`]: "sub",
         [`fontStyle-${COMP}-var`]: "italic",
         [`fontStyle-${COMP}-em`]: "italic",
         [`fontFamily-${COMP}-mono`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-title`]: "$fontSize-2xl",
-        [`lineHeight-${COMP}-title`]: "$lineHeight-2xl",
         [`fontSize-${COMP}-subtitle`]: "$fontSize-xl",
-        [`lineHeight-${COMP}-subtitle`]: "$lineHeight-xl",
         [`fontSize-${COMP}-small`]: "$fontSize-sm",
-        [`lineHeight-${COMP}-small`]: "$lineHeight-sm",
         [`letterSpacing-${COMP}-caption`]: "0.05rem",
         [`fontSize-${COMP}-placeholder`]: "$fontSize-xs",
-        [`lineHeight-${COMP}-placeholder`]: "$lineHeight-xs",
         [`fontFamily-${COMP}-codefence`]: "$fontFamily-monospace",
         [`paddingHorizontal-${COMP}-codefence`]: "$space-4",
         [`paddingVertical-${COMP}-codefence`]: "$space-3",
         [`paddingVertical-${COMP}-paragraph`]: "$space-1",
         [`fontSize-${COMP}-subheading`]: "$fontSize-H6",
-        [`lineHeight-${COMP}-subheading`]: "$lineHeight-sm",
         [`fontWeight-${COMP}-subheading`]: "$fontWeight-bold",
         [`letterSpacing-${COMP}-subheading`]: "0.04em",
         [`textTransform-${COMP}-subheading`]: "uppercase",
@@ -164,7 +152,6 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         [`marginBottom-${COMP}-tableheading`]: "$space-4",
         [`paddingHorizontal-${COMP}-tableheading`]: "$space-1",
         [`fontSize-${COMP}-tableheading`]: "$fontSize-H6",
-        [`lineHeight-${COMP}-tableheading`]: "$lineHeight-sm",
         [`fontWeight-${COMP}-tableheading`]: "$fontWeight-bold",
         [`backgroundColor-${COMP}-code`]: "rgb(from $color-surface-100 r g b / 0.4)",
         [`borderColor-${COMP}-code`]: "$color-surface-100",

package/dist/scripts/src/components/TextArea/TextAreaNative.js

@@ -98,6 +98,14 @@ exports.TextArea = (0, react_1.forwardRef)(function TextArea(_a, forwardedRef) {
     (0, react_1.useEffect)(() => {
         updateState({ value: initialValue }, { initial: true });
     }, [initialValue, updateState]);
+    (0, react_1.useEffect)(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [autoFocus, inputRef.current]);
     // --- Execute this function when the user copies the value
     const handleCopy = (event) => {
         if (allowCopy) {
@@ -185,7 +193,6 @@ exports.TextArea = (0, react_1.forwardRef)(function TextArea(_a, forwardedRef) {
         style: style,
         value: controlled ? value || "" : undefined,
         disabled: !enabled,
-        autoFocus,
         name: id,
         placeholder,
         required,

package/dist/scripts/src/components/Theme/NotificationToast.js

@@ -36,7 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationToast = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const react_hot_toast_1 = __importStar(require("react-hot-toast"));
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const TOASTER_CONTAINER_STYLE = {
     top: 40,
     right: 40,
@@ -48,6 +50,7 @@ const TOASTER_CONTAINER_STYLE = {
 let toasterMounted = false;
 const NotificationToast = ({ toastDuration }) => {
     const [shouldRender, setShouldRender] = (0, react_1.useState)(false);
+    const { root } = (0, ThemeContext_1.useTheme)();
     (0, react_1.useEffect)(() => {
         if (!toasterMounted) {
             toasterMounted = true;
@@ -56,6 +59,6 @@ const NotificationToast = ({ toastDuration }) => {
     }, []);
     if (!shouldRender)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_hot_toast_1.Toaster, { position: "top-right", containerStyle: TOASTER_CONTAINER_STYLE, toastOptions: { style: { padding: "12px 16px" }, duration: toastDuration }, children: (t) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => react_hot_toast_1.default.dismiss(t.id), children: (0, jsx_runtime_1.jsx)(react_hot_toast_1.ToastBar, { position: t.position, toast: t, style: { wordBreak: "break-word" }, children: ({ icon, message }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, message] })) }) })) }));
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(react_hot_toast_1.Toaster, { position: "top-right", containerStyle: TOASTER_CONTAINER_STYLE, toastOptions: { style: { padding: "12px 16px" }, duration: toastDuration }, children: (t) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => react_hot_toast_1.default.dismiss(t.id), children: (0, jsx_runtime_1.jsx)(react_hot_toast_1.ToastBar, { position: t.position, toast: t, style: { wordBreak: "break-word" }, children: ({ icon, message }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, message] })) }) })) }), root);
 };
 exports.NotificationToast = NotificationToast;

package/dist/scripts/src/components-core/CompoundComponent.js

@@ -52,8 +52,10 @@ const misc_1 = require("./utils/misc");
 const hooks_1 = require("./utils/hooks");
 const lodash_es_1 = require("lodash-es");
 const constants_1 = require("./constants");
+const mergeProps_1 = require("./utils/mergeProps");
 // Acts as a bridge between a compound component definition and its renderer.
-exports.CompoundComponent = (0, react_1.forwardRef)(({ node, lookupSyncCallback, lookupEventHandler, compound, api, scriptCollected, renderChild, extractValue, layoutContext, uid, updateState, }, forwardedRef) => {
+exports.CompoundComponent = (0, react_1.forwardRef)((_a, forwardedRef) => {
+    var { node, lookupSyncCallback, lookupEventHandler, compound, api, scriptCollected, renderChild, extractValue, layoutContext, uid, updateState, registerComponentApi, extractResourceUrl, appContext, state, lookupAction } = _a, restProps = __rest(_a, ["node", "lookupSyncCallback", "lookupEventHandler", "compound", "api", "scriptCollected", "renderChild", "extractValue", "layoutContext", "uid", "updateState", "registerComponentApi", "extractResourceUrl", "appContext", "state", "lookupAction"]);
     // --- Extract property values (resolve binding expressions)
     const resolvedPropsInner = (0, react_1.useMemo)(() => {
         const resolvedProps = {};
@@ -135,9 +137,7 @@ exports.CompoundComponent = (0, react_1.forwardRef)(({ node, lookupSyncCallback,
         ? Object.assign(Object.assign({}, layoutContext), { wrapChild: undefined }) : layoutContext;
     const ret = renderChild(nodeWithPropsAndEvents, safeLayoutContext, memoedParentRenderContext);
     if (forwardedRef && ret && (0, react_1.isValidElement)(ret)) {
-        return react_1.default.cloneElement(ret, {
-            ref: (0, react_compose_refs_1.composeRefs)(forwardedRef, ret.ref),
-        });
+        return react_1.default.cloneElement(ret, Object.assign({ ref: (0, react_compose_refs_1.composeRefs)(forwardedRef, ret.ref) }, (0, mergeProps_1.mergeProps)(ret.props, restProps)));
     }
     return react_1.default.isValidElement(ret) ? ret : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ret });
 });