@jobber/components 8.16.0 → 8.17.0

package/dist/InputNumberExperimental-cjs.js

@@ -611,12 +611,14 @@ var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c2
 
 /**
  * Default formatting used only when the consumer does not pass `format`.
- * Preserves user-typed decimals on blur: without `maximumFractionDigits: 20`,
- * `Intl.NumberFormat` rounds to 3 digits and silently truncates input.
+ * Base UI rounds committed values to `maximumFractionDigits`, so this cap also
+ * scrubs IEEE-754 step drift (keeps `3.14 + 1` from committing
+ * `4.140000000000001`). 12 sits below that noise floor while keeping more
+ * precision than a numeric field needs.
  */
 const DEFAULT_FORMAT = {
     useGrouping: false,
-    maximumFractionDigits: 20,
+    maximumFractionDigits: 12,
 };
 const InputNumberExperimentalContext = React.createContext(null);
 function useInputNumberExperimentalContext(consumer) {
@@ -628,7 +630,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, loading, 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", step = 1, suffix, value, } = props;
     const generatedId = React.useId();
     const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
     const innerInputRef = React.useRef(null);
@@ -705,7 +707,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: format !== null && format !== void 0 ? 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.NumberFieldRoot, { allowOutOfRange: true, format: format !== null && format !== void 0 ? format : DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, step: step, 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 })))),
@@ -760,8 +762,10 @@ function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel
     const resolvedDecrementLabel = decrementLabel !== null && decrementLabel !== void 0 ? decrementLabel : `Decrease ${labelTarget}`;
     const rootProps = useRenderElement.mergeProps({ className: styles.stepper }, { className, style });
     return (React.createElement("div", Object.assign({}, rootProps),
-        React.createElement(NumberFieldInput.NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton }, "\u25B2"),
-        React.createElement(NumberFieldInput.NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton }, "\u25BC")));
+        React.createElement(NumberFieldInput.NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton },
+            React.createElement(Icon.Icon, { name: "arrowUp", size: "small", customColor: "currentColor" })),
+        React.createElement(NumberFieldInput.NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton },
+            React.createElement(Icon.Icon, { name: "arrowDown", size: "small", customColor: "currentColor" }))));
 }
 function AffixIconSlot({ variation, icon, size, onClick, ariaLabel, }) {
     return (React.createElement("div", { className: classnames(styles.affixIcon, variation === "suffix" && styles.suffix) },

package/dist/InputNumberExperimental-es.js

@@ -591,12 +591,14 @@ var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c2
 
 /**
  * Default formatting used only when the consumer does not pass `format`.
- * Preserves user-typed decimals on blur: without `maximumFractionDigits: 20`,
- * `Intl.NumberFormat` rounds to 3 digits and silently truncates input.
+ * Base UI rounds committed values to `maximumFractionDigits`, so this cap also
+ * scrubs IEEE-754 step drift (keeps `3.14 + 1` from committing
+ * `4.140000000000001`). 12 sits below that noise floor while keeping more
+ * precision than a numeric field needs.
  */
 const DEFAULT_FORMAT = {
     useGrouping: false,
-    maximumFractionDigits: 20,
+    maximumFractionDigits: 12,
 };
 const InputNumberExperimentalContext = createContext(null);
 function useInputNumberExperimentalContext(consumer) {
@@ -608,7 +610,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, loading, 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", step = 1, suffix, value, } = props;
     const generatedId = useId();
     const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
     const innerInputRef = useRef(null);
@@ -685,7 +687,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: format !== null && format !== void 0 ? 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(NumberFieldRoot, { allowOutOfRange: true, format: format !== null && format !== void 0 ? format : DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, step: step, 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 })))),
@@ -740,8 +742,10 @@ function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel
     const resolvedDecrementLabel = decrementLabel !== null && decrementLabel !== void 0 ? decrementLabel : `Decrease ${labelTarget}`;
     const rootProps = mergeProps({ className: styles.stepper }, { className, style });
     return (React__default.createElement("div", Object.assign({}, rootProps),
-        React__default.createElement(NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton }, "\u25B2"),
-        React__default.createElement(NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton }, "\u25BC")));
+        React__default.createElement(NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton },
+            React__default.createElement(Icon, { name: "arrowUp", size: "small", customColor: "currentColor" })),
+        React__default.createElement(NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton },
+            React__default.createElement(Icon, { name: "arrowDown", size: "small", customColor: "currentColor" }))));
 }
 function AffixIconSlot({ variation, icon, size, onClick, ariaLabel, }) {
     return (React__default.createElement("div", { className: classnames(styles.affixIcon, variation === "suffix" && styles.suffix) },

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

@@ -111,6 +111,11 @@ export interface InputNumberExperimentalProps {
     /** Default `true`. When `false`, the floating mini-label is hidden. */
     readonly showMiniLabel?: boolean;
     readonly size?: InputNumberExperimentalSize;
+    /**
+     * Amount the stepper buttons and ArrowUp/ArrowDown keys change the value by.
+     * Default `1`.
+     */
+    readonly step?: number;
     readonly suffix?: InputNumberExperimentalSuffixProp;
     /**
      * Value of the field. Controlled-only — pair with `onChange` and drive from

package/dist/styles.css

@@ -4613,8 +4613,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   border: none;
   color: hsl(197, 21%, 36%);
   color: var(--color-text--secondary);
-  font-size: 8px;
-  line-height: 1;
+  line-height: 0;
   background: transparent;
   cursor: pointer;
   -ms-flex-align: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.16.0",
+  "version": "8.17.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -546,5 +546,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "4e229c9d1f28566fb9117dd4b199efd2cbcebf9f"
+  "gitHead": "202afd57218f0140cd2cf489742f99afd22e6b2c"
 }