@vectara/vectara-ui 15.6.5 → 15.7.0

package/lib/components/form/input/NumberInput.d.ts

@@ -5,4 +5,5 @@ export declare const VuiNumberInput: import("react").ForwardRefExoticComponent<O
     max?: number | undefined;
     min?: number | undefined;
     step?: number | undefined;
+    allowUndefined?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement | null>>;

package/lib/components/form/input/NumberInput.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useState } from "react";
 import { VuiBasicInput } from "./BasicInput";
 export const VuiNumberInput = forwardRef((_a, ref) => {
-    var { value, onChange, max, min, step } = _a, rest = __rest(_a, ["value", "onChange", "max", "min", "step"]);
+    var { value, onChange, max, min, step, allowUndefined } = _a, rest = __rest(_a, ["value", "onChange", "max", "min", "step", "allowUndefined"]);
     const [localValue, setLocalValue] = useState(value);
     // This is a hacky solution to the number input misbehaving on Firefox.
     // If we were to apply the value and onChange values directly to the
@@ -26,17 +26,21 @@ export const VuiNumberInput = forwardRef((_a, ref) => {
     // For some reason, using a useState hook to store the value doesn't have
     // this problem.
     useEffect(() => {
-        // Reflect the upstream value when it changes. Ignore 0
-        // because that indicates the user has entered a decimal point.
-        if (value !== 0) {
+        // Reflect the upstream value when it changes. Ignore 0 because that
+        // indicates the user has entered a decimal point (Firefox workaround).
+        // When allowUndefined is on, also ignore undefined — otherwise the
+        // parent reflecting undefined back would clear the input mid-typing.
+        const isUndefined = !(allowUndefined && value === undefined);
+        if (value !== 0 && isUndefined) {
             setLocalValue(value);
         }
     }, [value]);
-    // Part of the hacky solution above.
+    // Propagate localValue changes upstream. Without allowUndefined, an
+    // undefined localValue (empty input) is coerced to 0 so existing
+    // consumers always receive a number. With allowUndefined, undefined
+    // passes through so consumers can treat empty as "no value."
     useEffect(() => {
-        // Set value locally so an undefined value doesn't reset it to 0.
-        // Pass the value upstream, e.g. so it can be persisted.
-        onChange(localValue !== null && localValue !== void 0 ? localValue : 0);
+        onChange(allowUndefined ? localValue : localValue !== null && localValue !== void 0 ? localValue : 0);
     }, [localValue]);
     const onChangeValue = (e) => {
         // Enable resetting the value to undefined.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "15.6.5",
+  "version": "15.7.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",