xmlui 0.10.15 → 0.10.16

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

@@ -86,6 +86,8 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
     // Ensure the provided minimum is not smaller than the 0 if zeroOrPositive is set to true
     min = Math.max(zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, min);
     // Step must be an integer since floating point arithmetic needs a deeper dive.
+    // probably some way to integrate with https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+    // since there are footguns, like 0.1 + 0.2 = 0.0000...04
     const _step = (_b = (0, numberbox_abstractions_1.toUsableNumber)(step, true)) !== null && _b !== void 0 ? _b : numberbox_abstractions_1.DEFAULT_STEP;
     const inputRef = (0, react_1.useRef)(null);
     const upButton = (0, react_1.useRef)(null);
@@ -414,10 +416,22 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
         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;
+        }
+        // --- Convert to number and clamp to min/max bounds
+        const numericValue = (0, numberbox_abstractions_1.toUsableNumber)(finalValue, integersOnly);
+        if (!(0, numberbox_abstractions_1.isEmptyLike)(numericValue)) {
+            const clampedValue = (0, numberbox_abstractions_1.clamp)(numericValue, min, max);
+            if (clampedValue !== numericValue) {
+                const clampedString = clampedValue.toString();
+                finalValue = clampedString;
+                // --- Update the input field immediately
+                if (inputRef.current) {
+                    inputRef.current.value = clampedString;
+                }
             }
+        }
+        // --- Update the state if the final value is different from current input
+        if (finalValue !== currentInputValue) {
             updateValue(finalValue, finalValue);
         }
         else {
@@ -425,7 +439,7 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
             setValueStrRep((0, numberbox_abstractions_1.mapToRepresentation)(value));
         }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [value, onBlur, integersOnly, updateValue]);
+    }, [value, onBlur, integersOnly, updateValue, min, max]);
     const focus = (0, react_1.useCallback)(() => {
         var _a;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();

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

@@ -25,6 +25,8 @@ exports.OptionMd = (0, metadata_helpers_1.createMetadata)({
             valueType: "boolean",
             defaultValue: OptionNative_1.defaultProps.enabled,
         },
+        keywords: (0, metadata_helpers_1.d)("An array of keywords that can be used for searching and filtering the option. " +
+            "These keywords are not displayed but help users find the option through search."),
     },
 });
 exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, className, renderChild, layoutContext }) => {
@@ -36,7 +38,7 @@ exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
     }
     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 !== 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
+    return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { label: label || textNodeChild, value: value !== undefined && value !== "" ? value : label, enabled: extractValue.asOptionalBoolean(node.props.enabled), keywords: extractValue.asOptionalStringArray(node.props.keywords), 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/Select/HiddenOption.js

@@ -10,7 +10,7 @@ function HiddenOption(option) {
     const [node, setNode] = (0, react_1.useState)(null);
     const opt = (0, react_1.useMemo)(() => {
         var _a, _b;
-        return Object.assign(Object.assign({}, option), { label: (_a = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: [(_b = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
+        return Object.assign(Object.assign({}, option), { label: (_a = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: option.keywords || [(_b = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
     }, [option, node, label]);
     (0, react_1.useEffect)(() => {
         onOptionAdd(opt);

package/dist/scripts/src/components/Slider/Slider.spec.js

@@ -141,29 +141,62 @@ fixtures_1.test.describe("Basic Functionality", () => {
         yield slider.press("ArrowRight");
         yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("0.1");
     }));
-    fixtures_1.test.fixme("minStepsBetweenThumbs maintains thumb separation", component_test_helpers_1.SKIP_REASON.TO_BE_IMPLEMENTED("Need to test actual thumb separation logic"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider initialValue="{[2, 7]}" minStepsBetweenThumbs="5" />`);
-        // Test that thumbs maintain minimum separation
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeVisible();
+    (0, fixtures_1.test)("component handles multiple thumbs", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Slider initialValue="{[2, 4]}" />`);
+        const thumbs = page.getByRole("slider");
+        yield (0, fixtures_1.expect)(thumbs).toHaveCount(2);
+    }));
+    (0, fixtures_1.test)("all thumbs are interactable via mouse", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSliderDriver, page, }) {
+        yield initTestBed(`
+      <Fragment>
+        <Slider id="slider" initialValue="{[2, 4]}" minValue="0" maxValue="10" />
+        <Text testId="sliderValue0">{slider.value[0]}</Text>
+        <Text testId="sliderValue1">{slider.value[1]}</Text>
+      </Fragment>
+    `);
+        const driver = yield createSliderDriver("slider");
+        yield driver.dragThumbByMouse("start", 0);
+        yield driver.dragThumbByMouse("end", 1);
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue0")).toHaveText("0");
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue1")).toHaveText("10");
+    }));
+    (0, fixtures_1.test)("all thumbs are interactable via keyboard", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSliderDriver, page }) {
+        yield initTestBed(`
+      <Fragment>
+        <Slider id="slider" initialValue="{[2, 4]}" minValue="0" maxValue="10" />
+        <Text testId="sliderValue0">{slider.value[0]}</Text>
+        <Text testId="sliderValue1">{slider.value[1]}</Text>
+      </Fragment>
+    `);
+        const driver = yield createSliderDriver("slider");
+        yield driver.stepThumbByKeyboard("ArrowLeft", 0);
+        yield driver.stepThumbByKeyboard("ArrowRight", 1);
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue0")).toHaveText("1");
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue1")).toHaveText("5");
+    }));
+    (0, fixtures_1.test)("minStepsBetweenThumbs maintains thumb separation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSliderDriver, page }) {
+        yield initTestBed(`
+      <Fragment>
+        <Slider id="slider" initialValue="{[0, 5]}" minStepsBetweenThumbs="3" minValue="0" maxValue="10" />
+        <Text testId="sliderValue1">{slider.value[1]}</Text>
+      </Fragment>
+    `);
+        const driver = yield createSliderDriver("slider");
+        yield driver.stepThumbByKeyboard("ArrowLeft", 1, 3); // Try to move left by 3 steps
+        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue1")).toHaveText("3");
     }));
     (0, fixtures_1.test)("enabled=false disables control", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<Slider enabled="false" />`);
         yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeDisabled();
     }));
-    (0, fixtures_1.test)("readOnly prevents interaction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("readOnly prevents interaction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSliderDriver }) {
         yield initTestBed(`
       <Fragment>
         <Slider id="mySlider" readOnly="true" />
         <Text testId="slider-value" value="{mySlider.value}" />
       </Fragment>`);
-        const slider = page.getByRole("slider");
-        const sliderOffsetWidth = yield page.locator("[data-track]").evaluate((el) => {
-            return el.getBoundingClientRect().width;
-        });
-        yield slider.hover();
-        yield page.mouse.down({ button: "left" });
-        yield page.mouse.move(sliderOffsetWidth, 0); // Attempt to drag to end
-        yield page.mouse.up();
+        const driver = yield createSliderDriver("mySlider");
+        yield driver.dragThumbByMouse("end");
         yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("0"); // Value should remain unchanged
     }));
     fixtures_1.test.fixme("autoFocus focuses slider on mount", component_test_helpers_1.SKIP_REASON.XMLUI_BUG("autoFocus does not seem to work with radix-ui, need to double-check"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {

package/dist/scripts/src/components/Slider/SliderNative.js

@@ -108,7 +108,7 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
     id = id || _id;
     const inputRef = (0, react_1.useRef)(null);
     const tooltipRef = (0, react_1.useRef)(null);
-    const thumbRef = (0, react_1.useRef)(null);
+    const thumbsRef = (0, react_1.useRef)([]);
     min = parseValue(min, exports.defaultProps.min);
     max = parseValue(max, exports.defaultProps.max);
     // Initialize localValue properly
@@ -181,18 +181,22 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
     }, [updateValue, readOnly]);
     // Component APIs
     const handleOnFocus = (0, react_1.useCallback)((ev) => {
-        var _a;
-        (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        onShowTooltip();
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);
-    }, [onFocus]);
+    }, [onFocus, onShowTooltip]);
     const handleOnBlur = (0, react_1.useCallback)((ev) => {
-        var _a;
-        (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
     }, [onBlur]);
     const focus = (0, react_1.useCallback)(() => {
         var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        // Focus the first available thumb
+        const firstThumb = thumbsRef.current.find(thumb => thumb !== null);
+        if (firstThumb) {
+            firstThumb.focus();
+        }
+        else {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     }, []);
     const setValue = (0, misc_1.useEvent)((newValue) => {
         if (readOnly || !enabled) {
@@ -210,6 +214,10 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
     }, [focus, registerComponentApi, setValue]);
     // Ensure we always have at least one thumb
     const displayValue = localValue.length > 0 ? localValue : formatValue(undefined, min, min, max);
+    // Clean up thumbs ref array when number of thumbs changes
+    (0, react_1.useEffect)(() => {
+        thumbsRef.current = thumbsRef.current.slice(0, displayValue.length);
+    }, [displayValue.length]);
     return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, ref: forwardedRef, id: id, isInputTemplateUsed: true, children: (0, jsx_runtime_1.jsx)("div", { className: Slider_module_scss_1.default.sliderContainer, "data-slider-container": true, children: (0, jsx_runtime_1.jsxs)(react_slider_1.Root, { minStepsBetweenThumbs: minStepsBetweenThumbs, ref: inputRef, tabIndex: tabIndex, "aria-readonly": readOnly, className: (0, classnames_1.default)(className, Slider_module_scss_1.default.sliderRoot, {
                     [Slider_module_scss_1.default.disabled]: !enabled,
                     [Slider_module_scss_1.default.readOnly]: readOnly,
@@ -221,8 +229,10 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
                             [Slider_module_scss_1.default.valid]: validationStatus === "valid",
                         }), style: rangeStyle ? Object.assign({}, rangeStyle) : undefined, children: (0, jsx_runtime_1.jsx)(react_slider_1.Range, { "data-range": true, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRange, {
                                 [Slider_module_scss_1.default.disabled]: !enabled,
-                            }) }) }), displayValue.map((_, index) => ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, { ref: tooltipRef, text: valueFormat(displayValue[index]), delayDuration: 100, open: showValues && showTooltip, children: (0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { id: id, "aria-required": required, ref: index === 0 ? thumbRef : null, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderThumb, {
+                            }) }) }), displayValue.map((_, index) => ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, { ref: tooltipRef, text: valueFormat(displayValue[index]), delayDuration: 100, open: showValues && showTooltip, children: (0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { id: id, "aria-required": required, ref: (el) => {
+                                thumbsRef.current[index] = el;
+                            }, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderThumb, {
                                 [Slider_module_scss_1.default.disabled]: !enabled,
-                            }), style: thumbStyle ? Object.assign({}, thumbStyle) : undefined, "data-thumb-index": index, autoFocus: autoFocus }) }, index)))] }) }) })));
+                            }), style: thumbStyle ? Object.assign({}, thumbStyle) : undefined, "data-thumb-index": index, autoFocus: autoFocus && index === 0 }) }, index)))] }) }) })));
 });
 exports.Slider.displayName = "Slider";