xmlui 0.9.10 → 0.9.12

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

@@ -0,0 +1,395 @@
+"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.NumberBox2 = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const NumberBox_module_scss_1 = __importDefault(require("./NumberBox.module.scss"));
+const constants_1 = require("../../components-core/constants");
+const misc_1 = require("../../components-core/utils/misc");
+const numberbox_abstractions_1 = require("./numberbox-abstractions");
+const IconNative_1 = require("../Icon/IconNative");
+const InputAdornment_1 = require("../Input/InputAdornment");
+const ButtonNative_1 = require("../Button/ButtonNative");
+const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
+const lodash_es_1 = require("lodash-es");
+const number_1 = require("@internationalized/number");
+exports.NumberBox2 = (0, react_1.forwardRef)(function NumberBox2({ id, style, value, initialValue, zeroOrPositive = false, min = zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, max = numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, maxFractionDigits = 3, enabled = true, placeholder, step, integersOnly = false, validationStatus = "none", hasSpinBox = true, 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) {
+    var _a, _b, _c;
+    const inputRef = (0, react_1.useRef)(null);
+    const upButton = (0, react_1.useRef)(null);
+    const downButton = (0, react_1.useRef)(null);
+    // Formatter & Parser
+    const locale = "en-US";
+    const formatOptions = (0, react_1.useMemo)(() => {
+        return {
+            useGrouping: false,
+            minimumFractionDigits: 0,
+            maximumFractionDigits: integersOnly ? 0 : maxFractionDigits,
+        };
+    }, [maxFractionDigits, integersOnly]);
+    const formatter = useNumberFormatter(locale, formatOptions);
+    const parser = useNumberParser(locale, formatOptions);
+    min = (0, numberbox_abstractions_1.clamp)((_a = (0, numberbox_abstractions_1.toUsableNumber)(min, true)) !== null && _a !== void 0 ? _a : (zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE), (zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE), numberbox_abstractions_1.NUMBERBOX_MAX_VALUE);
+    max = (0, numberbox_abstractions_1.clamp)((_b = (0, numberbox_abstractions_1.toUsableNumber)(max, true)) !== null && _b !== void 0 ? _b : (zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE), (zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE), numberbox_abstractions_1.NUMBERBOX_MAX_VALUE);
+    const initializeValue = (0, react_1.useCallback)((value, defaultValue = "") => {
+        return (0, numberbox_abstractions_1.isEmptyLike)(value) || (0, lodash_es_1.isNaN)(parser.parse(value.toString()))
+            ? defaultValue
+            : formatter.format((0, numberbox_abstractions_1.clamp)(+value, min, max));
+    }, [formatter, parser, min, max]);
+    // --- Convert to representable string value (from number | null | undefined)
+    const [valueStrRep, setValueStrRep] = react_1.default.useState(initializeValue(value));
+    (0, react_1.useLayoutEffect)(() => {
+        setValueStrRep(initializeValue(value));
+    }, [value, initializeValue]);
+    const onFixCursorPosition = useCursorCorrection(valueStrRep, inputRef);
+    const _step = (_c = (0, numberbox_abstractions_1.toUsableNumber)(step, true)) !== null && _c !== void 0 ? _c : numberbox_abstractions_1.DEFAULT_STEP;
+    const inputMode = (0, react_1.useMemo)(() => {
+        // The inputMode attribute influences the software keyboard that is shown on touch devices.
+        // Browsers and operating systems are quite inconsistent about what keys are available.
+        // We choose between numeric and decimal based on whether we allow negative and fractional numbers,
+        // and based on testing on various devices to determine what keys are available in each inputMode.
+        const hasDecimals = formatter.resolvedOptions().maximumFractionDigits > 0;
+        return hasDecimals ? "decimal" : "numeric";
+    }, [formatter]);
+    // --- Initialize the related field with the input's initial value
+    (0, react_1.useEffect)(() => {
+        updateState({ value: initialValue }, { initial: true });
+    }, [initialValue, updateState]);
+    const clampInputValue = (0, react_1.useCallback)((value) => {
+        return (0, numberbox_abstractions_1.clamp)(value, min, max);
+    }, [min, max]);
+    const clampAndSaveInput = (0, react_1.useCallback)((value) => {
+        if ((0, numberbox_abstractions_1.isEmptyLike)(value)) {
+            updateState({ value: null });
+            return;
+        }
+        value = value.toString();
+        // Set to empty state if input value is empty
+        if (!value.length) {
+            updateState({ value: null });
+            return;
+        }
+        let parsedValue = parser.parse(value);
+        parsedValue = clampInputValue(parsedValue);
+        // if it failed to parse, then reset input to formatted version of current number
+        if ((0, lodash_es_1.isNaN)(parsedValue)) {
+            updateState({ value });
+            return;
+        }
+        // value representation needs to be synchronized with the last parsed value
+        setValueStrRep((lastVal) => {
+            const formatted = formatter.format(parsedValue);
+            if (lastVal !== formatted) {
+                return formatted;
+            }
+            return lastVal;
+        });
+        updateState({ value: parsedValue });
+    }, [clampInputValue, updateState, parser, formatter]);
+    // --- Stepper logic
+    const increment = (0, react_1.useCallback)(() => {
+        if (!enabled)
+            return;
+        if (readOnly)
+            return;
+        const currentValue = (0, numberbox_abstractions_1.isEmptyLike)(value) || (0, lodash_es_1.isNaN)(value) ? "0" : value.toString();
+        const newValue = handleChangingValue(currentValue, parser, "increase", _step, min, max);
+        updateState({ value: newValue });
+    }, [value, enabled, readOnly, parser, _step, min, max, updateState]);
+    const decrement = (0, react_1.useCallback)(() => {
+        if (!enabled)
+            return;
+        if (readOnly)
+            return;
+        const currentValue = (0, numberbox_abstractions_1.isEmptyLike)(value) || (0, lodash_es_1.isNaN)(value) ? "0" : value.toString();
+        const newValue = handleChangingValue(currentValue, parser, "decrease", _step, min, max);
+        updateState({ value: newValue });
+    }, [value, enabled, readOnly, parser, _step, min, max, updateState]);
+    // --- Register stepper logic to buttons
+    useLongPress(upButton.current, increment);
+    useLongPress(downButton.current, decrement);
+    // --- Handle input
+    const _onBeforeInput = (0, react_1.useCallback)((event) => {
+        var _a, _b, _c;
+        const target = event.target;
+        const nextValue = parser.parse(target.value.slice(0, (_a = target.selectionStart) !== null && _a !== void 0 ? _a : undefined) +
+            ((_b = event.nativeEvent.data) !== null && _b !== void 0 ? _b : "") +
+            target.value.slice((_c = target.selectionEnd) !== null && _c !== void 0 ? _c : undefined)).toString();
+        // pre-validate
+        if (!parser.isValidPartialNumber(nextValue, min, max)) {
+            event.preventDefault();
+        }
+    }, [parser, min, max]);
+    const _onChange = (0, react_1.useCallback)((event) => {
+        const strValue = event.target.value;
+        let parsed = clampInputValue(parser.parse(event.target.value));
+        if (integersOnly && Number.isInteger(parsed)) {
+            parsed = Math.trunc(parsed);
+        }
+        // NOTE: This is the most important part.
+        // We only synchronize values when they are a valid number
+        // Otherwise we only update the local string representation and
+        // synchronize the value from state when the input is blurred.
+        if (canSynchronizeValue(strValue, locale, formatOptions)) {
+            updateState({ value: parsed });
+        }
+        else {
+            setValueStrRep(strValue);
+        }
+        // TODO: this needs to be adjusted based on the number of group separators (no group separators yet)
+        onFixCursorPosition(event);
+        onDidChange(parsed);
+    }, [
+        clampInputValue,
+        parser,
+        onDidChange,
+        locale,
+        formatOptions,
+        onFixCursorPosition,
+        updateState,
+        integersOnly,
+    ]);
+    const _onFocus = (0, react_1.useCallback)(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const _onBlur = (0, react_1.useCallback)((event) => {
+        const value = event.target.value;
+        clampAndSaveInput(value);
+        onBlur();
+    }, [clampAndSaveInput, onBlur]);
+    const _onKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === "Enter") {
+            clampAndSaveInput(value);
+        }
+        if (event.code === "ArrowUp") {
+            event.preventDefault();
+            increment();
+        }
+        if (event.code === "ArrowDown") {
+            event.preventDefault();
+            decrement();
+        }
+    }, [clampAndSaveInput, increment, decrement, value]);
+    // --- Register API events
+    const focus = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [autoFocus]);
+    const setValue = (0, misc_1.useEvent)((newValue) => {
+        updateState({ value: newValue });
+    });
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+            setValue,
+        });
+    }, [focus, registerComponentApi, setValue]);
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(NumberBox_module_scss_1.default.inputRoot, {
+                [NumberBox_module_scss_1.default.readOnly]: readOnly,
+                [NumberBox_module_scss_1.default.disabled]: !enabled,
+                [NumberBox_module_scss_1.default.noSpinBox]: !hasSpinBox,
+                [NumberBox_module_scss_1.default.error]: validationStatus === "error",
+                [NumberBox_module_scss_1.default.warning]: validationStatus === "warning",
+                [NumberBox_module_scss_1.default.valid]: validationStatus === "valid",
+            }), 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, ref: inputRef, type: "text", placeholder: placeholder, required: required, readOnly: readOnly, disabled: !enabled, inputMode: inputMode, className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input), value: valueStrRep, min: min, max: max, autoFocus: autoFocus, onBeforeInput: _onBeforeInput, onChange: _onChange, onFocus: _onFocus, onBlur: _onBlur, onKeyDown: _onKeyDown }), (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 useNumberFormatter(locale, options) {
+    return (0, react_1.useMemo)(() => {
+        return new number_1.NumberFormatter(locale, options);
+    }, [locale, options]);
+}
+function useNumberParser(locale, options) {
+    return (0, react_1.useMemo)(() => {
+        return new number_1.NumberParser(locale, options);
+    }, [locale, options]);
+}
+function useLongPress(elementRef, action, delay = 500) {
+    const timeoutId = (0, react_1.useRef)(0);
+    const intervalId = (0, react_1.useRef)(0);
+    const savedAction = (0, react_1.useRef)(action);
+    // Remember the latest action callback, since it is different every render
+    (0, react_1.useEffect)(() => {
+        savedAction.current = action;
+    }, [action]);
+    (0, react_1.useEffect)(() => {
+        const onMouseDown = () => {
+            var _a;
+            (_a = savedAction.current) === null || _a === void 0 ? void 0 : _a.call(savedAction);
+            timeoutId.current = window.setTimeout(() => {
+                intervalId.current = window.setInterval(() => {
+                    var _a;
+                    (_a = savedAction.current) === null || _a === void 0 ? void 0 : _a.call(savedAction);
+                }, 100);
+            }, delay);
+        };
+        const onMouseUp = () => {
+            clearTimeout(timeoutId.current);
+            clearInterval(intervalId.current);
+        };
+        const onMouseOut = () => {
+            clearTimeout(timeoutId.current);
+            clearInterval(intervalId.current);
+        };
+        elementRef === null || elementRef === void 0 ? void 0 : elementRef.addEventListener("mousedown", onMouseDown);
+        elementRef === null || elementRef === void 0 ? void 0 : elementRef.addEventListener("mouseup", onMouseUp);
+        elementRef === null || elementRef === void 0 ? void 0 : elementRef.addEventListener("mouseout", onMouseOut);
+        return () => {
+            elementRef === null || elementRef === void 0 ? void 0 : elementRef.removeEventListener("mousedown", onMouseDown);
+            elementRef === null || elementRef === void 0 ? void 0 : elementRef.removeEventListener("mouseup", onMouseUp);
+            elementRef === null || elementRef === void 0 ? void 0 : elementRef.removeEventListener("mouseout", onMouseOut);
+        };
+    }, [elementRef, action, delay]);
+}
+function handleChangingValue(value, parser, type, step = 1, min = -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, max = numberbox_abstractions_1.NUMBERBOX_MAX_VALUE) {
+    const currentInputValue = parser.parse(value !== null && value !== void 0 ? value : "");
+    if ((0, lodash_es_1.isNaN)(currentInputValue)) {
+        return min !== null && min !== void 0 ? min : 0;
+    }
+    if (type === "increase") {
+        return (0, numberbox_abstractions_1.clamp)(currentInputValue + (step !== null && step !== void 0 ? step : 1), min, max);
+    }
+    else {
+        return (0, numberbox_abstractions_1.clamp)(currentInputValue - (step !== null && step !== void 0 ? step : 1), min, max);
+    }
+}
+function canSynchronizeValue(value, locale, options) {
+    if (value.trim() === "")
+        return true;
+    if ((0, lodash_es_1.isNaN)(value))
+        return false;
+    if (hasLeadingZeros(value, locale, options))
+        return false;
+    if (isFloatWithTrailingZeros(value, locale, options))
+        return false;
+    if (overMaximumFractionDigits(value, locale, options))
+        return false;
+    return true;
+}
+function hasLeadingZeros(input, locale = "en-US", options) {
+    var _a, _b;
+    // Create a formatter to detect locale-specific separators
+    const formatter = new Intl.NumberFormat(locale, options);
+    const parts = formatter.formatToParts(1234.5);
+    const group = ((_a = parts.find((p) => p.type === "group")) === null || _a === void 0 ? void 0 : _a.value) || "";
+    const decimal = ((_b = parts.find((p) => p.type === "decimal")) === null || _b === void 0 ? void 0 : _b.value) || "";
+    // Normalize separators for parsing
+    const normalized = (group === "" ? input : input.replace(new RegExp(`\\${group}`, "g"), "")).replace(decimal, ".");
+    if (!/^-?\d*\.?\d*$/.test(normalized))
+        return false;
+    const [integer, fraction] = normalized.split(".");
+    // Integer validation
+    if (!fraction) {
+        return integer.length > 1 && integer.startsWith("0");
+    }
+    // Float validation
+    const leadingIntegerZeros = integer.startsWith("0") && integer.length >= 1;
+    const leadingFractionZeros = (fraction.match(/^0+/) || [""])[0].length >= 2;
+    return leadingIntegerZeros || leadingFractionZeros;
+}
+function isFloatWithTrailingZeros(input, locale = "en-US", options) {
+    var _a, _b;
+    // Create formatter to detect locale-specific separators
+    const formatter = new Intl.NumberFormat(locale, options);
+    const parts = formatter.formatToParts(1234.5);
+    const group = ((_a = parts.find((p) => p.type === "group")) === null || _a === void 0 ? void 0 : _a.value) || "";
+    const decimal = ((_b = parts.find((p) => p.type === "decimal")) === null || _b === void 0 ? void 0 : _b.value) || ".";
+    // Normalize separators for parsing
+    const normalized = (group === "" ? input : input.replace(new RegExp(`\\${group}`, "g"), "")).replace(decimal, ".");
+    // Validate numeric format
+    if (!/^-?\d*\.?\d*$/.test(normalized))
+        return false;
+    // Check if it's a float (has decimal point)
+    if (!normalized.includes("."))
+        return false;
+    // Split into integer and fractional parts
+    const [_, fraction] = normalized.split(".");
+    // Must have fractional digits to be a float -> integers get a pass
+    if (!fraction || fraction.length === 0)
+        return true;
+    // Check for trailing zeros in the fractional part
+    return /0+$/.test(fraction);
+}
+function overMaximumFractionDigits(input, locale = "en-US", options) {
+    var _a, _b;
+    // Create a formatter to detect locale-specific separators
+    const formatter = new Intl.NumberFormat(locale, options);
+    const parts = formatter.formatToParts(1234.5);
+    const group = ((_a = parts.find((p) => p.type === "group")) === null || _a === void 0 ? void 0 : _a.value) || "";
+    const decimal = ((_b = parts.find((p) => p.type === "decimal")) === null || _b === void 0 ? void 0 : _b.value) || "";
+    // Normalize separators for parsing
+    const normalized = (group === "" ? input : input.replace(new RegExp(`\\${group}`, "g"), "")).replace(decimal, ".");
+    if (!/^-?\d*\.?\d*$/.test(normalized))
+        return false;
+    const [_, fraction] = normalized.split(".");
+    // Integer validation
+    if (!fraction) {
+        return false;
+    }
+    // Float validation
+    return fraction.length > options.maximumFractionDigits;
+}
+/**
+ * Solution comes from: https://giacomocerquone.com/blog/keep-input-cursor-still/
+ */
+function useCursorCorrection(value, inputRef) {
+    const position = (0, react_1.useRef)({
+        beforeStart: 0,
+        beforeEnd: 0,
+    });
+    (0, react_1.useLayoutEffect)(() => {
+        inputRef.current.setSelectionRange(position.current.beforeStart, position.current.beforeEnd);
+    }, [value]);
+    const onInputChange = (event) => {
+        position.current.beforeStart = event.target.selectionStart;
+        position.current.beforeEnd = event.target.selectionEnd;
+    };
+    return onInputChange;
+}

package/dist/scripts/src/components/NumberBox/numberbox-abstractions.js

@@ -3,8 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_STEP = exports.FLOAT_REGEXP = exports.INT_REGEXP = exports.EXPONENTIAL_SEPARATOR = exports.DECIMAL_SEPARATOR = exports.NUMBERBOX_MAX_VALUE = void 0;
 exports.isEmptyLike = isEmptyLike;
 exports.mapToRepresentation = mapToRepresentation;
+exports.isOutOfBounds = isOutOfBounds;
 exports.clamp = clamp;
 exports.toUsableNumber = toUsableNumber;
+exports.isUsableFloat = isUsableFloat;
+exports.isUsableInteger = isUsableInteger;
 exports.NUMBERBOX_MAX_VALUE = 999999999999999;
 exports.DECIMAL_SEPARATOR = ".";
 exports.EXPONENTIAL_SEPARATOR = "e";
@@ -21,6 +24,9 @@ function mapToRepresentation(value) {
         return value.toString();
     return "";
 }
+function isOutOfBounds(value, min, max) {
+    return value < min || value > max;
+}
 function clamp(value, min, max) {
     let clamped = value;
     if (value < min)
@@ -72,3 +78,32 @@ function isUsableInteger(value) {
     }
     return false;
 }
+// TODO:
+class NumberFormatter2 {
+    constructor(locale, options) {
+        this.locale = locale;
+        this.options = options;
+        this.formatter = new Intl.NumberFormat(locale, options);
+    }
+    set input(value) {
+    }
+    buildModel() {
+        var _a, _b;
+        const parts = this.formatter.formatToParts(1234.5);
+        this.model.group = ((_a = parts.find((p) => p.type === "group")) === null || _a === void 0 ? void 0 : _a.value) || "";
+        this.model.decimal = ((_b = parts.find((p) => p.type === "decimal")) === null || _b === void 0 ? void 0 : _b.value) || "";
+    }
+    parse(value) {
+        return 0;
+    }
+    format(value) {
+        return this.formatter.format(value);
+    }
+    /**
+     * Strip all non-numeric characters but keep the type of string
+     * @param value
+     */
+    sanitize(value) {
+        return "";
+    }
+}

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

@@ -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)();
@@ -31,7 +32,7 @@ const OptionNative = (0, react_1.memo)((props) => {
 });
 OptionNative.displayName = "OptionNative";
 exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, layoutCss, renderChild, layoutContext }) => {
-    const optionTemplate = node.children || node.props.optionTemplate;
+    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 }));

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

@@ -30,6 +30,7 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
         labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         optionLabelTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display an option in the dropdown list.`),
+        optionTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display an option in the dropdown list.`),
         valueTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display a selected value when ` +
             `multiple selections (\`multiSelect\` is \`true\`) are enabled.`),
         dropdownHeight: (0, ComponentDefs_1.d)("This property sets the height of the dropdown list."),
@@ -49,6 +50,7 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         focus: (0, metadata_helpers_1.dFocus)(COMP),
         setValue: (0, metadata_helpers_1.dSetValueApi)(),
         value: (0, metadata_helpers_1.dValue)(),
+        reset: (0, ComponentDefs_1.d)(`This method resets the component to its initial value, or clears the selection if no initial value was provided.`),
     },
     contextVars: {
         $item: (0, ComponentDefs_1.d)(`This property represents the value of an item in the dropdown list.`),
@@ -69,6 +71,8 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${COMP}-badge`]: "$fontSize-small",
         [`paddingHorizontal-${COMP}-badge`]: "$space-1",
         [`paddingVertical-${COMP}-badge`]: "$space-1",
+        [`paddingHorizontal-item-${COMP}`]: "$space-2",
+        [`paddingVertical-item-${COMP}`]: "$space-2",
         [`opacity-text-item-${COMP}--disabled`]: "0.5",
         [`opacity-${COMP}--disabled`]: "0.5",
         [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
@@ -82,6 +86,10 @@ exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
             ? (item) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionLabelTemplate, item: item, renderChild: renderChild }));
             }
+            : undefined, optionRenderer: node.props.optionTemplate
+            ? (item) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, renderChild: renderChild }));
+            }
             : undefined, valueRenderer: node.props.valueTemplate
             ? (item, removeItem) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: {

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

@@ -59,20 +59,19 @@ const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwar
     const { root } = (0, ThemeContext_1.useTheme)();
     const { enabled, onBlur, autoFocus, onValueChange, validationStatus, children, value, height, style, placeholder, id, triggerRef, onFocus, options, } = props;
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
-    const stringValue = value ? value + "" : undefined;
+    const stringValue = value != undefined ? value + "" : null;
     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);
     }, [onValueChange, options]);
-    (0, react_1.useEffect)(() => { }, []);
     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" }) })] }) })] }) }));
 });
-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, 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, required = false, inProgress = false, inProgressNotificationMessage = "Loading...", }, ref) {
     var _a;
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -128,12 +127,22 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
     const setValue = (0, misc_1.useEvent)((newValue) => {
         toggleOption(newValue);
     });
+    const reset = (0, misc_1.useEvent)(() => {
+        if (initialValue !== undefined) {
+            updateState({ value: initialValue });
+            onDidChange(initialValue);
+        }
+        else {
+            clearValue();
+        }
+    });
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             focus,
             setValue,
+            reset,
         });
-    }, [focus, registerComponentApi, setValue]);
+    }, [focus, registerComponentApi, setValue, reset]);
     // Render the "empty list" message
     const emptyListNode = (0, react_1.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.selectEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
     const onOptionAdd = (0, react_1.useCallback)((option) => {
@@ -154,8 +163,9 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
         multiSelect,
         value,
         optionLabelRenderer,
+        optionRenderer,
         onChange: toggleOption,
-    }), [multiSelect, toggleOption, value, optionLabelRenderer]);
+    }), [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,
@@ -182,15 +192,15 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
 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 } = (0, SelectContext_1.useSelect)();
+    const { value: selectedValue, onChange, multiSelect, optionLabelRenderer, optionRenderer, } = (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.jsxs)(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: () => {
             onChange(value);
-        }, "data-state": selected ? "checked" : undefined, keywords: keywords, children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] }, id));
+        }, "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 })) : ((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 { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
@@ -208,11 +218,15 @@ function HiddenOption(option) {
 const SelectOption = react_1.default.forwardRef((option, ref) => {
     const { value, label, enabled = true } = option;
     const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
-    const { optionLabelRenderer } = (0, SelectContext_1.useSelect)();
+    const { optionLabelRenderer, optionRenderer } = (0, SelectContext_1.useSelect)();
     (0, react_1.useLayoutEffect)(() => {
         onOptionAdd(option);
         return () => onOptionRemove(option);
     }, [option, onOptionAdd, onOptionRemove]);
-    return ((0, jsx_runtime_1.jsxs)(react_select_1.Item, { ref: ref, className: Select_module_scss_1.default.selectItem, value: value + "", disabled: !enabled, children: [(0, jsx_runtime_1.jsx)(react_select_1.ItemText, { 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" }) }) })] }));
+    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({
+                label: (0, jsx_runtime_1.jsx)(react_select_1.ItemText, { children: label }),
+                value,
+                enabled,
+            })) : ((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" }) }) })] })) }) }));
 });
 SelectOption.displayName = "SelectOption";

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

@@ -61,6 +61,7 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         let rangeClassName;
         if (!isRoot) {
             rangeClassName = `${fromClass} ~ *:has(~ .${toClass})`;
+            css += `color: var(${(0, themeVars_1.getVarKey)("textColor-primary")});`;
         }
         return {
             className,

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

@@ -0,0 +1,21 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisuallyHidden = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_visually_hidden_1 = require("@radix-ui/react-visually-hidden");
+const VisuallyHidden = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(react_visually_hidden_1.VisuallyHidden, Object.assign({}, props, { children: children })));
+};
+exports.VisuallyHidden = VisuallyHidden;