@jobber/components 8.10.0 → 8.11.0

package/dist/InputNumberExperimental-cjs.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
+var ActivityIndicator = require('./ActivityIndicator-cjs.js');
 var Button = require('./Button-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var useValueChanged = require('./useValueChanged-cjs.js');
@@ -607,7 +608,7 @@ const FieldDescription = /*#__PURE__*/React__namespace.forwardRef(function Field
 });
 if (process.env.NODE_ENV !== "production") FieldDescription.displayName = "FieldDescription";
 
-var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c20czk-FSyY-","disabled":"_-2INirAxaU4-","small":"NsFBA5oqRAA-","large":"ExKqck-6xVs-","center":"UWiqNi57G8g-","right":"po25PZwJpe4-","inputWrapper":"k9dAO6d010o-","input":"D-PmE-l-hZU-","stepper":"t42w4ZDiDyI-","label":"Ggk3aaMcIJU-","hideLabel":"C7d6qmoZiKU-","affixLabel":"_4u1JHjUYvkY-","prefix":"rEWH41rUUEE-","suffix":"_4-iNl6jdfmM-","affixIcon":"_5-Iw-2c-wXk-","compoundAffix":"tZjZRRcAShY-","affixLabelText":"mbEcqyBQoEg-","stepperButton":"zzrCzYF-8u0-","belowField":"_0mcAZAtwQ2o-","description":"xxp2uGc-B6o-","fieldError":"q-WsOi6joGo-","spinning":"d0TEiLWObKU-"};
+var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c20czk-FSyY-","disabled":"_-2INirAxaU4-","small":"NsFBA5oqRAA-","large":"ExKqck-6xVs-","center":"UWiqNi57G8g-","right":"po25PZwJpe4-","inputWrapper":"k9dAO6d010o-","input":"D-PmE-l-hZU-","stepper":"t42w4ZDiDyI-","loadingIndicator":"NLptJ1t9Pj4-","label":"Ggk3aaMcIJU-","hideLabel":"C7d6qmoZiKU-","affixLabel":"_4u1JHjUYvkY-","prefix":"rEWH41rUUEE-","suffix":"_4-iNl6jdfmM-","affixIcon":"_5-Iw-2c-wXk-","compoundAffix":"tZjZRRcAShY-","affixLabelText":"mbEcqyBQoEg-","stepperButton":"zzrCzYF-8u0-","belowField":"_0mcAZAtwQ2o-","description":"xxp2uGc-B6o-","fieldError":"q-WsOi6joGo-","spinning":"d0TEiLWObKU-"};
 
 /**
  * Default formatting used only when the consumer does not pass `format`.
@@ -628,7 +629,7 @@ function useInputNumberExperimentalContext(consumer) {
 }
 // eslint-disable-next-line max-statements
 function InputNumberExperimentalInternal(props, ref) {
-    const { align, autocomplete, children, description, disabled, error, format, 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 { align, autocomplete, children, description, disabled, error, format, id: idProp, inline, invalid, keyboard, loading, 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);
@@ -673,6 +674,7 @@ function InputNumberExperimentalInternal(props, ref) {
         id,
         innerInputRef,
         keyboard,
+        loading,
         maxLength,
         onBlur,
         onFocus,
@@ -689,6 +691,7 @@ function InputNumberExperimentalInternal(props, ref) {
         disabled,
         id,
         keyboard,
+        loading,
         maxLength,
         onBlur,
         onFocus,
@@ -724,9 +727,10 @@ function InputNumberExperimentalInputCompound(props = {}) {
     const ctx = useInputNumberExperimentalContext("Input");
     const labelText = (_a = props.placeholder) !== null && _a !== void 0 ? _a : ctx.placeholder;
     return (React.createElement("div", { className: classnames(styles.inputWrapper, !ctx.showMiniLabel && styles.hideLabel, ctx.size !== "default" && styles[ctx.size], ctx.disabled && styles.disabled) },
-        React.createElement(NumberFieldInput.NumberFieldInput, { autoComplete: resolveAutocomplete(ctx.autocomplete), className: styles.input, inputMode: ctx.keyboard, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
+        React.createElement(NumberFieldInput.NumberFieldInput, { "aria-busy": ctx.loading || undefined, autoComplete: resolveAutocomplete(ctx.autocomplete), className: styles.input, inputMode: ctx.keyboard, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
         labelText && (React.createElement("label", { className: styles.label, htmlFor: ctx.id }, labelText)),
-        !ctx.compoundLayout && React.createElement(InputNumberExperimentalStepperCompound, null)));
+        ctx.loading ? (React.createElement("div", { className: styles.loadingIndicator },
+            React.createElement(ActivityIndicator.ActivityIndicator, { size: "small" }))) : (!ctx.compoundLayout && React.createElement(InputNumberExperimentalStepperCompound, null))));
 }
 function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, }) {
     const ctx = useInputNumberExperimentalContext("Affix");
@@ -740,7 +744,9 @@ function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick,
 function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel, } = {}) {
     var _a;
     const ctx = useInputNumberExperimentalContext("Stepper");
-    if (!ctx.showStepper) {
+    // Hidden while loading; the loading indicator renders in the input wrapper
+    // instead, independent of where this stepper is composed.
+    if (ctx.loading || !ctx.showStepper) {
         return null;
     }
     const labelTarget = (_a = ctx.placeholder) !== null && _a !== void 0 ? _a : "value";

package/dist/InputNumberExperimental-es.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import React__default, { createContext, forwardRef, useId, useRef, useImperativeHandle, useCallback, useMemo, useContext } from 'react';
 import classnames from 'classnames';
+import { A as ActivityIndicator } from './ActivityIndicator-es.js';
 import { B as Button } from './Button-es.js';
 import { I as Icon } from './Icon-es.js';
 import { a as useStableCallback, c as useTimeout, t as transitionStatusMapping, d as useTransitionStatus, u as useIsoLayoutEffect, e as useOpenChangeComplete } from './useValueChanged-es.js';
@@ -587,7 +588,7 @@ const FieldDescription = /*#__PURE__*/React.forwardRef(function FieldDescription
 });
 if (process.env.NODE_ENV !== "production") FieldDescription.displayName = "FieldDescription";
 
-var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c20czk-FSyY-","disabled":"_-2INirAxaU4-","small":"NsFBA5oqRAA-","large":"ExKqck-6xVs-","center":"UWiqNi57G8g-","right":"po25PZwJpe4-","inputWrapper":"k9dAO6d010o-","input":"D-PmE-l-hZU-","stepper":"t42w4ZDiDyI-","label":"Ggk3aaMcIJU-","hideLabel":"C7d6qmoZiKU-","affixLabel":"_4u1JHjUYvkY-","prefix":"rEWH41rUUEE-","suffix":"_4-iNl6jdfmM-","affixIcon":"_5-Iw-2c-wXk-","compoundAffix":"tZjZRRcAShY-","affixLabelText":"mbEcqyBQoEg-","stepperButton":"zzrCzYF-8u0-","belowField":"_0mcAZAtwQ2o-","description":"xxp2uGc-B6o-","fieldError":"q-WsOi6joGo-","spinning":"d0TEiLWObKU-"};
+var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c20czk-FSyY-","disabled":"_-2INirAxaU4-","small":"NsFBA5oqRAA-","large":"ExKqck-6xVs-","center":"UWiqNi57G8g-","right":"po25PZwJpe4-","inputWrapper":"k9dAO6d010o-","input":"D-PmE-l-hZU-","stepper":"t42w4ZDiDyI-","loadingIndicator":"NLptJ1t9Pj4-","label":"Ggk3aaMcIJU-","hideLabel":"C7d6qmoZiKU-","affixLabel":"_4u1JHjUYvkY-","prefix":"rEWH41rUUEE-","suffix":"_4-iNl6jdfmM-","affixIcon":"_5-Iw-2c-wXk-","compoundAffix":"tZjZRRcAShY-","affixLabelText":"mbEcqyBQoEg-","stepperButton":"zzrCzYF-8u0-","belowField":"_0mcAZAtwQ2o-","description":"xxp2uGc-B6o-","fieldError":"q-WsOi6joGo-","spinning":"d0TEiLWObKU-"};
 
 /**
  * Default formatting used only when the consumer does not pass `format`.
@@ -608,7 +609,7 @@ function useInputNumberExperimentalContext(consumer) {
 }
 // eslint-disable-next-line max-statements
 function InputNumberExperimentalInternal(props, ref) {
-    const { align, autocomplete, children, description, disabled, error, format, 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 { align, autocomplete, children, description, disabled, error, format, id: idProp, inline, invalid, keyboard, loading, 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);
@@ -653,6 +654,7 @@ function InputNumberExperimentalInternal(props, ref) {
         id,
         innerInputRef,
         keyboard,
+        loading,
         maxLength,
         onBlur,
         onFocus,
@@ -669,6 +671,7 @@ function InputNumberExperimentalInternal(props, ref) {
         disabled,
         id,
         keyboard,
+        loading,
         maxLength,
         onBlur,
         onFocus,
@@ -704,9 +707,10 @@ function InputNumberExperimentalInputCompound(props = {}) {
     const ctx = useInputNumberExperimentalContext("Input");
     const labelText = (_a = props.placeholder) !== null && _a !== void 0 ? _a : ctx.placeholder;
     return (React__default.createElement("div", { className: classnames(styles.inputWrapper, !ctx.showMiniLabel && styles.hideLabel, ctx.size !== "default" && styles[ctx.size], ctx.disabled && styles.disabled) },
-        React__default.createElement(NumberFieldInput, { autoComplete: resolveAutocomplete(ctx.autocomplete), className: styles.input, inputMode: ctx.keyboard, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
+        React__default.createElement(NumberFieldInput, { "aria-busy": ctx.loading || undefined, autoComplete: resolveAutocomplete(ctx.autocomplete), className: styles.input, inputMode: ctx.keyboard, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
         labelText && (React__default.createElement("label", { className: styles.label, htmlFor: ctx.id }, labelText)),
-        !ctx.compoundLayout && React__default.createElement(InputNumberExperimentalStepperCompound, null)));
+        ctx.loading ? (React__default.createElement("div", { className: styles.loadingIndicator },
+            React__default.createElement(ActivityIndicator, { size: "small" }))) : (!ctx.compoundLayout && React__default.createElement(InputNumberExperimentalStepperCompound, null))));
 }
 function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, }) {
     const ctx = useInputNumberExperimentalContext("Affix");
@@ -720,7 +724,9 @@ function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick,
 function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel, } = {}) {
     var _a;
     const ctx = useInputNumberExperimentalContext("Stepper");
-    if (!ctx.showStepper) {
+    // Hidden while loading; the loading indicator renders in the input wrapper
+    // instead, independent of where this stepper is composed.
+    if (ctx.loading || !ctx.showStepper) {
         return null;
     }
     const labelTarget = (_a = ctx.placeholder) !== null && _a !== void 0 ? _a : "value";

package/dist/primitives/InputNumberExperimental/index.cjs

@@ -3,6 +3,7 @@
 var InputNumberExperimental = require('../../InputNumberExperimental-cjs.js');
 require('react');
 require('classnames');
+require('../../ActivityIndicator-cjs.js');
 require('../../Button-cjs.js');
 require('../../tslib.es6-cjs.js');
 require('react-router-dom');

package/dist/primitives/InputNumberExperimental/index.mjs

@@ -1,6 +1,7 @@
 export { I as InputNumberExperimental } from '../../InputNumberExperimental-es.js';
 import 'react';
 import 'classnames';
+import '../../ActivityIndicator-es.js';
 import '../../Button-es.js';
 import '../../tslib.es6-es.js';
 import 'react-router-dom';

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

@@ -65,6 +65,12 @@ export interface InputNumberExperimentalProps {
     /** Style the error border without showing an error message. */
     readonly invalid?: boolean;
     readonly keyboard?: "numeric" | "decimal";
+    /**
+     * Shows a non-blocking loading indicator in the stepper's slot to signal
+     * background activity. The field stays editable while loading (use `readonly`
+     * or `disabled` to lock it); the stepper is hidden so the two never overlap.
+     */
+    readonly loading?: boolean;
     readonly max?: number;
     readonly maxLength?: number;
     readonly min?: number;

package/dist/primitives/index.cjs

@@ -19,6 +19,7 @@ require('../Text-cjs.js');
 require('../Typography-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
+require('../ActivityIndicator-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../NumberFieldInput-cjs.js');

package/dist/primitives/index.mjs

@@ -17,6 +17,7 @@ import '../Text-es.js';
 import '../Typography-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
+import '../ActivityIndicator-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../NumberFieldInput-es.js';

package/dist/styles.css

@@ -4269,7 +4269,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
  * enough room for multi-digit values to display.
  */
 
-.k9dAO6d010o-:has(> .t42w4ZDiDyI-) .D-PmE-l-hZU- {
+.k9dAO6d010o-:has(> .t42w4ZDiDyI-) .D-PmE-l-hZU-,
+.k9dAO6d010o-:has(> .NLptJ1t9Pj4-) .D-PmE-l-hZU- {
   padding-right: 2px;
   padding-right: var(--space-smallest);
 }
@@ -4456,8 +4457,9 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 /**
  * Compound `<.Affix>`: a single flex sibling of .inputWrapper that bundles
- * icon and/or label inline. Visually slightly less integrated than the default
- * (split) layout but lets users compose freely.
+ * icon and/or label inline. Uses the field's vertical padding so it tracks the
+ * floating mini-label and lines up with the typed value (and the loading
+ * indicator), matching the default split composition.
  */
 
 .tZjZRRcAShY- {
@@ -4467,8 +4469,10 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       align-items: center;
   gap: 4px;
   gap: var(--space-smaller);
-  padding: 0 16px;
-  padding: 0 var(--space-base);
+  padding: var(--field--padding-top) 16px
+    var(--field--padding-bottom);
+  padding: var(--field--padding-top) var(--space-base)
+    var(--field--padding-bottom);
   color: hsl(197, 21%, 36%);
   color: var(--color-text--secondary);
   font-size: 14px;
@@ -4494,6 +4498,36 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       flex: 0 0 auto;
 }
 
+/*
+ * Loading indicator: occupies the stepper's slot, always visible (no hover
+ * reveal), vertically centered in the field to match InputText's spinner.
+ * The default right padding is just a small gap from a following suffix.
+ */
+
+.NLptJ1t9Pj4- {
+  display: -ms-flexbox;
+  display: flex;
+  z-index: calc(var(--field--base-elevation) + 1);
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  padding-right: 4px;
+  padding-right: var(--space-smaller);
+}
+
+/*
+ * When the indicator sits flush to the field's right edge (no suffix follows),
+ * inset it by the field's right padding so it matches InputText's spinner
+ * spacing instead of hugging the border.
+ */
+
+.c20czk-FSyY- > .k9dAO6d010o-:last-child > .NLptJ1t9Pj4- {
+  padding-right: var(--field--padding-right);
+}
+
 /* Default mode: stepper lives inside .inputWrapper. Reveal on local hover/focus. */
 
 .k9dAO6d010o-:hover .t42w4ZDiDyI-,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.10.0",
+  "version": "8.11.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -556,5 +556,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "fff8aa8019d89e4a0d517f1eb963c8442935a16d"
+  "gitHead": "b4fe4a75ec2c46f3b252f974a73631e4c7669433"
 }