@jobber/components 8.15.0 → 8.17.0

package/dist/Card/index.cjs

@@ -24,7 +24,7 @@ require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
 require('../BottomSheet-cjs.js');
 require('../ScrollAreaViewport-cjs.js');
-require('../useValueChanged-cjs.js');
+require('../clamp-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');

package/dist/Card/index.mjs

@@ -22,7 +22,7 @@ import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
 import '../BottomSheet-es.js';
 import '../ScrollAreaViewport-es.js';
-import '../useValueChanged-es.js';
+import '../clamp-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
 import '../MenuSubmenuTrigger-es.js';

package/dist/DataDump/index.cjs

@@ -25,7 +25,7 @@ require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
 require('../BottomSheet-cjs.js');
 require('../ScrollAreaViewport-cjs.js');
-require('../useValueChanged-cjs.js');
+require('../clamp-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');

package/dist/DataDump/index.mjs

@@ -23,7 +23,7 @@ import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
 import '../BottomSheet-es.js';
 import '../ScrollAreaViewport-es.js';
-import '../useValueChanged-es.js';
+import '../clamp-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
 import '../MenuSubmenuTrigger-es.js';

package/dist/InputNumberExperimental-cjs.js

@@ -5,7 +5,7 @@ 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');
+var clamp = require('./clamp-cjs.js');
 var NumberFieldInput = require('./NumberFieldInput-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -44,7 +44,7 @@ function useFieldsetRootContext(optional = false) {
 }
 
 const LabelableProvider = function LabelableProvider(props) {
-  const defaultId = useValueChanged.useBaseUiId();
+  const defaultId = clamp.useBaseUiId();
   const initialControlId = props.controlId === undefined ? defaultId : props.controlId;
   const [controlId, setControlIdState] = React__namespace.useState(initialControlId);
   const [labelId, setLabelId] = React__namespace.useState(props.labelId);
@@ -53,7 +53,7 @@ const LabelableProvider = function LabelableProvider(props) {
   const {
     messageIds: parentMessageIds
   } = NumberFieldInput.useLabelableContext();
-  const registerControlId = useValueChanged.useStableCallback((source, nextId) => {
+  const registerControlId = clamp.useStableCallback((source, nextId) => {
     const registrations = registrationsRef.current;
     if (nextId === undefined) {
       registrations.delete(source);
@@ -140,9 +140,9 @@ function useFieldValidation(params) {
     controlId,
     getDescriptionProps
   } = NumberFieldInput.useLabelableContext();
-  const timeout = useValueChanged.useTimeout();
+  const timeout = clamp.useTimeout();
   const inputRef = React__namespace.useRef(null);
-  const commit = useValueChanged.useStableCallback(async (value, revalidate = false) => {
+  const commit = clamp.useStableCallback(async (value, revalidate = false) => {
     const element = inputRef.current;
     if (!element) {
       return;
@@ -354,7 +354,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
   const {
     disabled: disabledFieldset
   } = useFieldsetRootContext();
-  const validate = useValueChanged.useStableCallback(validateProp || (() => null));
+  const validate = clamp.useStableCallback(validateProp || (() => null));
   const disabled = disabledFieldset || disabledProp;
   const [touchedState, setTouchedUnwrapped] = React__namespace.useState(false);
   const [dirtyState, setDirtyUnwrapped] = React__namespace.useState(false);
@@ -363,7 +363,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
   const dirty = dirtyProp ?? dirtyState;
   const touched = touchedProp ?? touchedState;
   const markedDirtyRef = React__namespace.useRef(false);
-  const setDirty = useValueChanged.useStableCallback(value => {
+  const setDirty = clamp.useStableCallback(value => {
     if (dirtyProp !== undefined) {
       return;
     }
@@ -372,13 +372,13 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     }
     setDirtyUnwrapped(value);
   });
-  const setTouched = useValueChanged.useStableCallback(value => {
+  const setTouched = clamp.useStableCallback(value => {
     if (touchedProp !== undefined) {
       return;
     }
     setTouchedUnwrapped(value);
   });
-  const shouldValidateOnChange = useValueChanged.useStableCallback(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitAttemptedRef.current);
+  const shouldValidateOnChange = clamp.useStableCallback(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitAttemptedRef.current);
   const hasFormError = !!name && Object.hasOwn(errors, name) && errors[name] !== undefined;
   const invalid = invalidProp === true || hasFormError;
   const [validityData, setValidityData] = React__namespace.useState({
@@ -468,7 +468,7 @@ if (process.env.NODE_ENV !== "production") FieldRoot.displayName = "FieldRoot";
 
 const stateAttributesMapping = {
   ...NumberFieldInput.fieldValidityMapping,
-  ...useValueChanged.transitionStatusMapping
+  ...clamp.transitionStatusMapping
 };
 
 /**
@@ -485,7 +485,7 @@ const FieldError = /*#__PURE__*/React__namespace.forwardRef(function FieldError(
     match,
     ...elementProps
   } = componentProps;
-  const id = useValueChanged.useBaseUiId(idProp);
+  const id = clamp.useBaseUiId(idProp);
   const {
     validityData,
     state: fieldState,
@@ -510,8 +510,8 @@ const FieldError = /*#__PURE__*/React__namespace.forwardRef(function FieldError(
     mounted,
     transitionStatus,
     setMounted
-  } = useValueChanged.useTransitionStatus(rendered);
-  useValueChanged.useIsoLayoutEffect(() => {
+  } = clamp.useTransitionStatus(rendered);
+  clamp.useIsoLayoutEffect(() => {
     if (!rendered || !id) {
       return undefined;
     }
@@ -538,7 +538,7 @@ const FieldError = /*#__PURE__*/React__namespace.forwardRef(function FieldError(
     setLastRenderedMessageKey(errorKey);
     setLastRenderedMessage(errorMessage);
   }
-  useValueChanged.useOpenChangeComplete({
+  clamp.useOpenChangeComplete({
     open: rendered,
     ref: errorRef,
     onComplete() {
@@ -581,12 +581,12 @@ const FieldDescription = /*#__PURE__*/React__namespace.forwardRef(function Field
     className,
     ...elementProps
   } = componentProps;
-  const id = useValueChanged.useBaseUiId(idProp);
+  const id = clamp.useBaseUiId(idProp);
   const fieldRootContext = NumberFieldInput.useFieldRootContext(false);
   const {
     setMessageIds
   } = NumberFieldInput.useLabelableContext();
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (!id) {
       return undefined;
     }
@@ -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

@@ -4,7 +4,7 @@ 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 { u as useBaseUiId, a as useStableCallback, b as useTimeout, t as transitionStatusMapping, c as useTransitionStatus, d as useIsoLayoutEffect, e as useOpenChangeComplete } from './useValueChanged-es.js';
+import { u as useBaseUiId, a as useStableCallback, b as useTimeout, t as transitionStatusMapping, c as useTransitionStatus, d as useIsoLayoutEffect, e as useOpenChangeComplete } from './clamp-es.js';
 import { u as useLabelableContext, L as LabelableContext, a as useFormContext, D as DEFAULT_VALIDITY_STATE, g as getCombinedFieldValidityData, f as fieldValidityMapping, F as FieldRootContext, b as useFieldRootContext, N as NumberFieldRoot, c as NumberFieldGroup, d as NumberFieldInput, e as NumberFieldIncrement, h as NumberFieldDecrement } from './NumberFieldInput-es.js';
 import { f as formatErrorMessage, a as useRefWithInit, m as mergeProps, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
 import { jsx } from 'react/jsx-runtime';
@@ -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/Menu/index.cjs

@@ -22,7 +22,7 @@ require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
 require('../BottomSheet-cjs.js');
 require('../ScrollAreaViewport-cjs.js');
-require('../useValueChanged-cjs.js');
+require('../clamp-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');

package/dist/Menu/index.mjs

@@ -20,7 +20,7 @@ import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
 import '../BottomSheet-es.js';
 import '../ScrollAreaViewport-es.js';
-import '../useValueChanged-es.js';
+import '../clamp-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
 import '../MenuSubmenuTrigger-es.js';