@jobber/components 7.12.2 → 7.13.0

package/dist/InputNumberExperimental-cjs.js

@@ -625,8 +625,9 @@ function useInputNumberExperimentalContext(consumer) {
     }
     return context;
 }
+// eslint-disable-next-line max-statements
 function InputNumberExperimentalInternal(props, ref) {
-    const { align, autocomplete, children, description, disabled, error, id: idProp, inline, invalid, keyboard, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, placeholder, prefix, readonly, showMiniLabel = true, size = "default", suffix, value, } = props;
+    const { align, autocomplete, children, description, disabled, error, id: idProp, inline, invalid, keyboard, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, placeholder, prefix, readonly, showMiniLabel = true, size = "default", suffix, value, } = props;
     const generatedId = React.useId();
     const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
     const innerInputRef = React.useRef(null);
@@ -637,6 +638,9 @@ function InputNumberExperimentalInternal(props, ref) {
     const handleValueCommitted = React.useCallback((newValue) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue !== null && newValue !== void 0 ? newValue : undefined);
     }, [onChange]);
+    const handleValueChange = React.useCallback((newValue) => {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue !== null && newValue !== void 0 ? newValue : undefined);
+    }, [onValueChange]);
     const handleKeyDown = React.useCallback((event) => {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         if (event.key === "Enter" &&
@@ -698,7 +702,7 @@ function InputNumberExperimentalInternal(props, ref) {
     const fieldInvalid = invalid || Boolean(error);
     return (React.createElement(FieldRoot, { className: classnames(styles.container, inline && styles.inline), disabled: disabled, invalid: fieldInvalid, name: name },
         React.createElement(InputNumberExperimentalContext.Provider, { value: contextValue },
-            React.createElement(NumberFieldInput.NumberFieldRoot, { allowOutOfRange: true, format: DEFAULT_FORMAT, id: id, max: max, min: min, onValueCommitted: handleValueCommitted, readOnly: readonly, value: value !== null && value !== void 0 ? value : null },
+            React.createElement(NumberFieldInput.NumberFieldRoot, { allowOutOfRange: true, format: DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, value: value !== null && value !== void 0 ? value : null },
                 React.createElement(NumberFieldInput.NumberFieldGroup, { className: classnames(styles.wrapper, align && styles[align], disabled && styles.disabled, size !== "default" && styles[size]) }, isUsingCompoundPattern
                     ? children
                     : renderDefaultComposition({ prefix, suffix, size })))),

package/dist/InputNumberExperimental-es.js

@@ -605,8 +605,9 @@ function useInputNumberExperimentalContext(consumer) {
     }
     return context;
 }
+// eslint-disable-next-line max-statements
 function InputNumberExperimentalInternal(props, ref) {
-    const { align, autocomplete, children, description, disabled, error, id: idProp, inline, invalid, keyboard, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, placeholder, prefix, readonly, showMiniLabel = true, size = "default", suffix, value, } = props;
+    const { align, autocomplete, children, description, disabled, error, id: idProp, inline, invalid, keyboard, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, placeholder, prefix, readonly, showMiniLabel = true, size = "default", suffix, value, } = props;
     const generatedId = useId();
     const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
     const innerInputRef = useRef(null);
@@ -617,6 +618,9 @@ function InputNumberExperimentalInternal(props, ref) {
     const handleValueCommitted = useCallback((newValue) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue !== null && newValue !== void 0 ? newValue : undefined);
     }, [onChange]);
+    const handleValueChange = useCallback((newValue) => {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue !== null && newValue !== void 0 ? newValue : undefined);
+    }, [onValueChange]);
     const handleKeyDown = useCallback((event) => {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         if (event.key === "Enter" &&
@@ -678,7 +682,7 @@ function InputNumberExperimentalInternal(props, ref) {
     const fieldInvalid = invalid || Boolean(error);
     return (React__default.createElement(FieldRoot, { className: classnames(styles.container, inline && styles.inline), disabled: disabled, invalid: fieldInvalid, name: name },
         React__default.createElement(InputNumberExperimentalContext.Provider, { value: contextValue },
-            React__default.createElement(NumberFieldRoot, { allowOutOfRange: true, format: DEFAULT_FORMAT, id: id, max: max, min: min, onValueCommitted: handleValueCommitted, readOnly: readonly, value: value !== null && value !== void 0 ? value : null },
+            React__default.createElement(NumberFieldRoot, { allowOutOfRange: true, format: DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, value: value !== null && value !== void 0 ? value : null },
                 React__default.createElement(NumberFieldGroup, { className: classnames(styles.wrapper, align && styles[align], disabled && styles.disabled, size !== "default" && styles[size]) }, isUsingCompoundPattern
                     ? children
                     : renderDefaultComposition({ prefix, suffix, size })))),

package/dist/primitives/InputNumberExperimental/types.d.ts

@@ -64,15 +64,18 @@ export interface InputNumberExperimentalProps {
     readonly name?: string;
     readonly onBlur?: (event?: FocusEvent<HTMLInputElement>) => void;
     /**
-     * Fires when the user **commits** a value — on blur, Enter, stepper press,
-     * or arrow-key step. Mirrors the V1 / V2 `InputNumber` `onChange` timing so
-     * consumers doing side effects (network requests, redraws) only fire on
-     * completed input rather than on every keystroke.
-     *
-     * - Emits `number` for parseable committed input.
-     * - Emits `undefined` when the field is committed empty.
+     * Fires when the user commits a value (blur, Enter, stepper, arrow step).
+     * Use for side effects that shouldn't run per keystroke. Emits `undefined`
+     * when committed empty. For per-keystroke updates, see `onValueChange`.
      */
     readonly onChange?: (newValue: number | undefined) => void;
+    /**
+     * Fires on every parsed value change (typing, paste, stepper, arrow step).
+     * Emits `undefined` when the field is empty. Prefer `onChange` for side
+     * effects; reach for this only when UI must reflect in-progress input
+     * (e.g. a live-updating subtotal).
+     */
+    readonly onValueChange?: (newValue: number | undefined) => void;
     /**
      * Derived from `onKeyDown` — fires when the user presses Enter without
      * any modifier keys (Shift/Ctrl/Meta).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "7.12.2",
+  "version": "7.13.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -583,5 +583,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "8d5e1d0aa4ed0efea1628f41ae20b29baf2da0c0"
+  "gitHead": "54cf83958f2d29a8c4ccc7f96f4a406717cc4c51"
 }