@jobber/components 7.12.1 → 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/dist/styles.css

@@ -7649,53 +7649,43 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
     .-hmXAsAfH9U-::picker(select) {
       -webkit-appearance: base-select;
               appearance: base-select;
-
-      /* Dropdown styling */
     }
-      .-hmXAsAfH9U-::picker(select), .-hmXAsAfH9U-::picker(select)::picker(select) {
-        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
-        box-shadow: var(--shadow-base);
-        margin-top: 8px;
-        margin-top: var(--space-small);
-        padding: 0;
-        border: 1px solid hsl(200, 13%, 87%);
-        border: var(--border-base) solid var(--color-border);
-        border-radius: 8px;
-        border-radius: var(--radius-base);
-        background: rgba(255, 255, 255, 1);
-        background: var(--color-surface);
-      }
-
-    /* enable transitions in the drop down */
+
+    /* Dropdown styling + transitions */
     .-hmXAsAfH9U-::picker(select) {
-      transition:
-        opacity 200ms ease,
+      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
+      box-shadow: var(--shadow-base);
+      margin-top: 8px;
+      margin-top: var(--space-small);
+      padding: 0;
+      border: 1px solid hsl(200, 13%, 87%);
+      border: var(--border-base) solid var(--color-border);
+      border-radius: 8px;
+      border-radius: var(--radius-base);
+      background: rgba(255, 255, 255, 1);
+      background: var(--color-surface);
+      transition: opacity 200ms ease,
         display 200ms allow-discrete,
         overlay 200ms allow-discrete,
         -webkit-transform 200ms ease-out;
-      transition:
-        opacity var(--timing-base) ease,
+      transition: opacity var(--timing-base) ease,
         display var(--timing-base) allow-discrete,
         overlay var(--timing-base) allow-discrete,
         -webkit-transform var(--timing-base) ease-out;
-      transition:
-        opacity 200ms ease,
+      transition: opacity 200ms ease,
         transform 200ms ease-out,
         display 200ms allow-discrete,
         overlay 200ms allow-discrete;
-      transition:
-        opacity var(--timing-base) ease,
+      transition: opacity var(--timing-base) ease,
         transform var(--timing-base) ease-out,
         display var(--timing-base) allow-discrete,
         overlay var(--timing-base) allow-discrete;
-      transition:
-        opacity 200ms ease,
+      transition: opacity 200ms ease,
         transform 200ms ease-out,
         display 200ms allow-discrete,
         overlay 200ms allow-discrete,
         -webkit-transform 200ms ease-out;
-      transition:
-        opacity var(--timing-base) ease,
+      transition: opacity var(--timing-base) ease,
         transform var(--timing-base) ease-out,
         display var(--timing-base) allow-discrete,
         overlay var(--timing-base) allow-discrete,

package/package.json

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