@hilum/ui 3.3.3 → 3.4.0

package/dist/index.d.ts

@@ -751,17 +751,21 @@ interface InputGroupProps extends React.InputHTMLAttributes<HTMLInputElement> {
 declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLInputElement>>;
 
 interface InputNumberProps extends Omit<React.ComponentProps<"input">, "type" | "value" | "onChange"> {
-    value: number;
+    value: number | null;
     onChange: (next: number) => void;
-    min?: number;
-    max?: number;
-    step?: number;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
     /** Suffix shown after the number (e.g. "px", "mm", "°", "%"). */
-    unit?: string;
+    unit?: string | undefined;
     /** Number of decimals to display. Default: 0. */
-    precision?: number;
+    precision?: number | undefined;
+    /** Text shown when value is null. Useful for mixed multi-selection values. */
+    mixedLabel?: string | undefined;
+    /** Calls onChange while typing instead of waiting for blur/Enter. */
+    commitOnChange?: boolean | undefined;
     /** Hides the up/down stepper buttons. */
-    hideSteppers?: boolean;
+    hideSteppers?: boolean | undefined;
 }
 /**
  * Numeric input with up/down steppers, unit suffix, and arrow-key step (Shift = 10×).

package/dist/index.js

@@ -3558,32 +3558,49 @@ var InputNumber = React19.forwardRef(
     step = 1,
     unit,
     precision = 0,
+    mixedLabel = "Mixed",
+    commitOnChange = false,
     hideSteppers = false,
     className,
     disabled,
+    onBlur,
+    onFocus,
+    onKeyDown,
     ...rest
   }, ref) => {
-    const [text, setText] = React19.useState(value.toFixed(precision));
+    const formatValue = React19.useCallback(
+      (next) => next === null ? mixedLabel : next.toFixed(precision),
+      [mixedLabel, precision]
+    );
+    const [text, setText] = React19.useState(formatValue(value));
     React19.useEffect(() => {
-      setText(value.toFixed(precision));
-    }, [value, precision]);
+      setText(formatValue(value));
+    }, [formatValue, value]);
     const clamp = React19.useCallback((n) => Math.min(max, Math.max(min, n)), [min, max]);
-    const commit = (raw) => {
+    const parseAndClamp = React19.useCallback((raw) => {
       const n = parseFloat(raw);
       if (Number.isFinite(n)) {
-        const next = clamp(n);
-        onChange(next);
-        setText(next.toFixed(precision));
-      } else {
-        setText(value.toFixed(precision));
+        return clamp(n);
+      }
+      return null;
+    }, [clamp]);
+    const commit = (raw) => {
+      const next = parseAndClamp(raw);
+      if (next === null) {
+        setText(formatValue(value));
+        return;
       }
+      onChange(next);
+      setText(next.toFixed(precision));
     };
     const bump = (delta) => {
-      const next = clamp(value + delta);
+      const next = clamp((value ?? 0) + delta);
       onChange(next);
       setText(next.toFixed(precision));
     };
-    const onKeyDown = (e) => {
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
       if (e.key === "ArrowUp") {
         e.preventDefault();
         bump(step * (e.shiftKey ? 10 : 1));
@@ -3612,9 +3629,26 @@ var InputNumber = React19.forwardRef(
               inputMode: "decimal",
               spellCheck: false,
               value: text,
-              onChange: (e) => setText(e.target.value),
-              onBlur: (e) => commit(e.target.value),
-              onKeyDown,
+              onChange: (e) => {
+                setText(e.target.value);
+                if (commitOnChange) {
+                  const next = parseAndClamp(e.target.value);
+                  if (next !== null) {
+                    onChange(next);
+                  }
+                }
+              },
+              onFocus: (e) => {
+                if (value === null) {
+                  setText("");
+                }
+                onFocus?.(e);
+              },
+              onBlur: (e) => {
+                commit(e.target.value);
+                onBlur?.(e);
+              },
+              onKeyDown: handleKeyDown,
               disabled,
               className: "w-full caption text-foreground px-2 bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-right",
               ...rest