@box/blueprint-web 17.0.0 → 17.1.0

package/dist/lib-esm/components.css

@@ -6950,55 +6950,56 @@
   overflow:auto;
 }
 
-.bp_data_table_module_dataTableWrapper--9a3ae{
+.bp_data_table_module_dataTableWrapper--c7392{
   --border-radius-datatable:0;
   --outline-offset-focus-and-selected-row-datatable:-0.25rem;
   --outline-select-color-datatable:#0000;
   --sticky-element-z-index:2;
   height:100%;
   overflow:auto;
+  padding-block-end:var(--bp-space-020, .5rem);
   scroll-padding:60px 100px;
   width:100%;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae [data-modern=false]{
+.bp_data_table_module_dataTableWrapper--c7392 [data-modern=false]{
   --border-radius-hover-datatable:var(--radius-4);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae [data-modern=true]{
+.bp_data_table_module_dataTableWrapper--c7392 [data-modern=true]{
   --border-radius-hover-datatable:var(--bp-radius-08, 1rem);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr[data-hovered]{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-hovered]{
   --list-item-border-radius:var(--border-radius-hover-datatable);
   --list-item-row-border-radius:var(--list-item-border-radius);
   --list-item-first-column-item-radius:var(--list-item-border-radius) 0 0 var(--list-item-border-radius);
   --list-item-last-column-item-radius:0 var(--list-item-border-radius) var(--list-item-border-radius) 0;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae.bp_data_table_module_isScrolledX--9a3ae table tbody > tr[data-hovered][data-focus-visible]{
+.bp_data_table_module_dataTableWrapper--c7392.bp_data_table_module_isScrolledX--c7392 table tbody > tr[data-hovered][data-focus-visible]{
   --list-item-border-radius:0;
   --list-item-row-border-radius:0;
   --list-item-first-column-item-radius:0;
   --list-item-last-column-item-radius:0;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table > thead > tr{
+.bp_data_table_module_dataTableWrapper--c7392 table > thead > tr{
   background:var(--gray-white);
   position:sticky;
   top:0;
   z-index:var(--sticky-element-z-index);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table > thead > tr th:first-child{
+.bp_data_table_module_dataTableWrapper--c7392 table > thead > tr th:first-child{
   background:inherit;
   height:100%;
   left:0;
   position:sticky;
   z-index:var(--sticky-element-z-index);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table > thead > tr th:first-child[data-focus-visible]{
+.bp_data_table_module_dataTableWrapper--c7392 table > thead > tr th:first-child[data-focus-visible]{
   position:sticky;
   z-index:var(--sticky-element-z-index);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr{
   --is-row-focused:0;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr > td [data-actionswrapper]::after{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr > td [data-actionswrapper]::after{
   background:inherit;
   content:"";
   display:block;
@@ -7008,18 +7009,18 @@
   width:100%;
   z-index:-1;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr[data-focus-visible]{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-focus-visible]{
   --outline-offset-focus-cell:var(--outline-offset-focus-row);
   --is-row-focused:1;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr[data-focus-visible][aria-selected=true]{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-focus-visible][aria-selected=true]{
   --outline-offset-focus-cell:var(--outline-offset-focus-and-selected-row);
 }
 
-.bp_data_table_module_isScrolledX--9a3ae table > thead > tr > th:first-child{
+.bp_data_table_module_isScrolledX--c7392 table > thead > tr > th:first-child{
   overflow:visible;
 }
-.bp_data_table_module_isScrolledX--9a3ae table > thead > tr > th:first-child::after{
+.bp_data_table_module_isScrolledX--c7392 table > thead > tr > th:first-child::after{
   background:inherit;
   border-right:1px solid var(--border-divider-border);
   box-shadow:10px 0 7px -4px var(--item-background);
@@ -7033,7 +7034,7 @@
   z-index:-1;
 }
 
-.bp_data_table_module_hideActionWrapperRight--9a3ae table tbody > tr > td [data-actionswrapper]::after{
+.bp_data_table_module_hideActionWrapperRight--c7392 table tbody > tr > td [data-actionswrapper]::after{
   display:none;
 }
 .bp_list_checkbox_module_selection--711bf[data-modern=false]{

package/dist/lib-esm/data-table/data-table.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"dataTableWrapper":"bp_data_table_module_dataTableWrapper--9a3ae","isScrolledX":"bp_data_table_module_isScrolledX--9a3ae","hideActionWrapperRight":"bp_data_table_module_hideActionWrapperRight--9a3ae"};
+var styles = {"dataTableWrapper":"bp_data_table_module_dataTableWrapper--c7392","isScrolledX":"bp_data_table_module_isScrolledX--c7392","hideActionWrapperRight":"bp_data_table_module_hideActionWrapperRight--c7392"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -6950,55 +6950,56 @@
   overflow:auto;
 }
 
-.bp_data_table_module_dataTableWrapper--9a3ae{
+.bp_data_table_module_dataTableWrapper--c7392{
   --border-radius-datatable:0;
   --outline-offset-focus-and-selected-row-datatable:-0.25rem;
   --outline-select-color-datatable:#0000;
   --sticky-element-z-index:2;
   height:100%;
   overflow:auto;
+  padding-block-end:var(--bp-space-020, .5rem);
   scroll-padding:60px 100px;
   width:100%;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae [data-modern=false]{
+.bp_data_table_module_dataTableWrapper--c7392 [data-modern=false]{
   --border-radius-hover-datatable:var(--radius-4);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae [data-modern=true]{
+.bp_data_table_module_dataTableWrapper--c7392 [data-modern=true]{
   --border-radius-hover-datatable:var(--bp-radius-08, 1rem);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr[data-hovered]{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-hovered]{
   --list-item-border-radius:var(--border-radius-hover-datatable);
   --list-item-row-border-radius:var(--list-item-border-radius);
   --list-item-first-column-item-radius:var(--list-item-border-radius) 0 0 var(--list-item-border-radius);
   --list-item-last-column-item-radius:0 var(--list-item-border-radius) var(--list-item-border-radius) 0;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae.bp_data_table_module_isScrolledX--9a3ae table tbody > tr[data-hovered][data-focus-visible]{
+.bp_data_table_module_dataTableWrapper--c7392.bp_data_table_module_isScrolledX--c7392 table tbody > tr[data-hovered][data-focus-visible]{
   --list-item-border-radius:0;
   --list-item-row-border-radius:0;
   --list-item-first-column-item-radius:0;
   --list-item-last-column-item-radius:0;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table > thead > tr{
+.bp_data_table_module_dataTableWrapper--c7392 table > thead > tr{
   background:var(--gray-white);
   position:sticky;
   top:0;
   z-index:var(--sticky-element-z-index);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table > thead > tr th:first-child{
+.bp_data_table_module_dataTableWrapper--c7392 table > thead > tr th:first-child{
   background:inherit;
   height:100%;
   left:0;
   position:sticky;
   z-index:var(--sticky-element-z-index);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table > thead > tr th:first-child[data-focus-visible]{
+.bp_data_table_module_dataTableWrapper--c7392 table > thead > tr th:first-child[data-focus-visible]{
   position:sticky;
   z-index:var(--sticky-element-z-index);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr{
   --is-row-focused:0;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr > td [data-actionswrapper]::after{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr > td [data-actionswrapper]::after{
   background:inherit;
   content:"";
   display:block;
@@ -7008,18 +7009,18 @@
   width:100%;
   z-index:-1;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr[data-focus-visible]{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-focus-visible]{
   --outline-offset-focus-cell:var(--outline-offset-focus-row);
   --is-row-focused:1;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr[data-focus-visible][aria-selected=true]{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-focus-visible][aria-selected=true]{
   --outline-offset-focus-cell:var(--outline-offset-focus-and-selected-row);
 }
 
-.bp_data_table_module_isScrolledX--9a3ae table > thead > tr > th:first-child{
+.bp_data_table_module_isScrolledX--c7392 table > thead > tr > th:first-child{
   overflow:visible;
 }
-.bp_data_table_module_isScrolledX--9a3ae table > thead > tr > th:first-child::after{
+.bp_data_table_module_isScrolledX--c7392 table > thead > tr > th:first-child::after{
   background:inherit;
   border-right:1px solid var(--border-divider-border);
   box-shadow:10px 0 7px -4px var(--item-background);
@@ -7033,7 +7034,7 @@
   z-index:-1;
 }
 
-.bp_data_table_module_hideActionWrapperRight--9a3ae table tbody > tr > td [data-actionswrapper]::after{
+.bp_data_table_module_hideActionWrapperRight--c7392 table tbody > tr > td [data-actionswrapper]::after{
   display:none;
 }
 .bp_list_checkbox_module_selection--711bf[data-modern=false]{

package/dist/lib-esm/number-field/constants.d.ts

@@ -1,5 +1,5 @@
-/** Three digits, the width the design spec draws the control at. */
-declare const NUMBER_FIELD_DEFAULT_MAX = 999;
+/** How many digits wide the control is when `maxLength` is omitted and the field is unconstrained. */
+declare const NUMBER_FIELD_DEFAULT_DIGITS = 3;
 /** Non-negative integers only. Also governs what react-aria lets through, keeping the field digits-only. */
 declare const NUMBER_FIELD_FORMAT_OPTIONS: Intl.NumberFormatOptions;
-export { NUMBER_FIELD_DEFAULT_MAX, NUMBER_FIELD_FORMAT_OPTIONS };
+export { NUMBER_FIELD_DEFAULT_DIGITS, NUMBER_FIELD_FORMAT_OPTIONS };

package/dist/lib-esm/number-field/constants.js

@@ -1,9 +1,9 @@
-/** Three digits, the width the design spec draws the control at. */
-const NUMBER_FIELD_DEFAULT_MAX = 999;
+/** How many digits wide the control is when `maxLength` is omitted and the field is unconstrained. */
+const NUMBER_FIELD_DEFAULT_DIGITS = 3;
 /** Non-negative integers only. Also governs what react-aria lets through, keeping the field digits-only. */
 const NUMBER_FIELD_FORMAT_OPTIONS = {
   maximumFractionDigits: 0,
   useGrouping: false
 };
 
-export { NUMBER_FIELD_DEFAULT_MAX, NUMBER_FIELD_FORMAT_OPTIONS };
+export { NUMBER_FIELD_DEFAULT_DIGITS, NUMBER_FIELD_FORMAT_OPTIONS };

package/dist/lib-esm/number-field/number-field-control.d.ts

@@ -1,11 +1,12 @@
 import { type ComponentPropsWithoutRef, type ForwardedRef } from 'react';
+import { type NumberFieldProps } from './types';
 type NumberFieldControlProps = {
-    ariaValueMax: number;
-    ariaValueMin: number;
+    ariaValueMax?: number;
+    ariaValueMin?: number;
     decrementAriaLabel: string;
     hasError: boolean;
     incrementAriaLabel: string;
-    inputLength: number;
+    inputMaxLength?: number;
     inputProps: ComponentPropsWithoutRef<'input'>;
     inputRef: ForwardedRef<HTMLInputElement>;
     isAnimationEnabled: boolean;
@@ -17,8 +18,10 @@ type NumberFieldControlProps = {
     loadingAriaLabel?: string;
     maxReachedTooltipContent?: string;
     minReachedTooltipContent?: string;
+    onBlur?: NumberFieldProps['onBlur'];
+    onInputChange?: (rawValue: string) => void;
     showDecrementTooltip: boolean;
     showIncrementTooltip: boolean;
 };
-export declare const NumberFieldControl: ({ ariaValueMax, ariaValueMin, decrementAriaLabel, hasError, incrementAriaLabel, inputLength, inputProps, inputRef, isAnimationEnabled, isDecrementDisabled, isDecrementLoading, isIncrementDisabled, isIncrementLoading, labelId, loadingAriaLabel, maxReachedTooltipContent, minReachedTooltipContent, showDecrementTooltip, showIncrementTooltip, }: NumberFieldControlProps) => React.ReactElement;
+export declare const NumberFieldControl: ({ ariaValueMax, ariaValueMin, decrementAriaLabel, hasError, incrementAriaLabel, inputMaxLength, inputProps, inputRef, isAnimationEnabled, isDecrementDisabled, isDecrementLoading, isIncrementDisabled, isIncrementLoading, labelId, loadingAriaLabel, maxReachedTooltipContent, minReachedTooltipContent, onBlur, onInputChange, showDecrementTooltip, showIncrementTooltip, }: NumberFieldControlProps) => React.ReactElement;
 export {};

package/dist/lib-esm/number-field/number-field-control.js

@@ -3,6 +3,7 @@ import { Minus, Plus } from '@box/blueprint-web-assets/icons/Medium';
 import { useContext } from 'react';
 import { NumberFieldStateContext, useContextProps, InputContext, Group } from 'react-aria-components';
 import { BaseTextInput } from '../primitives/base-text-input/base-text-input.js';
+import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 import { StepperButton } from './stepper-button.js';
 import styles from './number-field.module.js';
 
@@ -12,7 +13,7 @@ const NumberFieldControl = ({
   decrementAriaLabel,
   hasError,
   incrementAriaLabel,
-  inputLength,
+  inputMaxLength,
   inputProps,
   inputRef,
   isAnimationEnabled,
@@ -24,13 +25,23 @@ const NumberFieldControl = ({
   loadingAriaLabel,
   maxReachedTooltipContent,
   minReachedTooltipContent,
+  onBlur,
+  onInputChange,
   showDecrementTooltip,
   showIncrementTooltip
 }) => {
   const state = useContext(NumberFieldStateContext);
-  const [racInputProps, racInputRef] = useContextProps({
-    maxLength: inputLength
-  }, inputRef, InputContext);
+  const racInputOverrides = inputMaxLength !== undefined ? {
+    maxLength: inputMaxLength
+  } : {};
+  const [racInputProps, racInputRef] = useContextProps(racInputOverrides, inputRef, InputContext);
+  // RAC `style` can be a render function; BaseTextInput only accepts CSSProperties.
+  const {
+    onBlur: racOnBlur,
+    onInput: racOnInput,
+    style: _racStyle,
+    ...racDomProps
+  } = racInputProps;
   if (!state) {
     throw new Error('NumberFieldControl must be rendered inside NumberField');
   }
@@ -42,6 +53,9 @@ const NumberFieldControl = ({
     loading: true,
     loadingAriaLabel
   } : {};
+  const handleInput = event => {
+    onInputChange?.(event.currentTarget.value);
+  };
   return jsxs(Group, {
     "aria-labelledby": labelId,
     className: styles.control,
@@ -56,7 +70,7 @@ const NumberFieldControl = ({
       ...decrementLoading
     }), jsx(BaseTextInput, {
       ...inputProps,
-      ...racInputProps,
+      ...racDomProps,
       ref: racInputRef,
       "aria-valuemax": ariaValueMax,
       "aria-valuemin": ariaValueMin,
@@ -64,6 +78,8 @@ const NumberFieldControl = ({
       "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
       invalid: hasError,
       label: "",
+      onBlur: composeEventHandlers(racOnBlur, onBlur),
+      onInput: composeEventHandlers(racOnInput, handleInput),
       // Pinned to the `text` react-aria already sets, since it types this as any input type.
       type: "text"
     }), jsx(StepperButton, {

package/dist/lib-esm/number-field/number-field.d.ts

@@ -5,5 +5,10 @@ import { type NumberFieldProps } from './types';
  * Formats non-negative whole numbers out of the box; `formatOptions` opens that up to decimals, currency
  * and percent, and doubles as the rule for what may be typed. The control is sized to hold `maxLength`
  * characters and does not grow or shrink with its container.
+ *
+ * Unconstrained by default: no clamp, no implied stepper bounds. Pass `clampToRange` with both
+ * `min` and `max` for library-owned range behavior (omitting either bound leaves the field
+ * unconstrained); or drive steppers yourself with `isIncrementDisabled` / `isDecrementDisabled`
+ * and validate via `onChange` / `onBlur` / `onInputChange`.
  */
 export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/lib-esm/number-field/number-field.js

@@ -9,7 +9,7 @@ import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { Text } from '../text/text.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
-import { NUMBER_FIELD_FORMAT_OPTIONS, NUMBER_FIELD_DEFAULT_MAX } from './constants.js';
+import { NUMBER_FIELD_FORMAT_OPTIONS, NUMBER_FIELD_DEFAULT_DIGITS } from './constants.js';
 import { NumberFieldControl } from './number-field-control.js';
 import styles from './number-field.module.js';
 
@@ -19,9 +19,15 @@ import styles from './number-field.module.js';
  * Formats non-negative whole numbers out of the box; `formatOptions` opens that up to decimals, currency
  * and percent, and doubles as the rule for what may be typed. The control is sized to hold `maxLength`
  * characters and does not grow or shrink with its container.
+ *
+ * Unconstrained by default: no clamp, no implied stepper bounds. Pass `clampToRange` with both
+ * `min` and `max` for library-owned range behavior (omitting either bound leaves the field
+ * unconstrained); or drive steppers yourself with `isIncrementDisabled` / `isDecrementDisabled`
+ * and validate via `onChange` / `onBlur` / `onInputChange`.
  */
 const NumberField = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
+    clampToRange = false,
     className,
     decrementAriaLabel,
     disabled = false,
@@ -31,16 +37,20 @@ const NumberField = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     hideLabel = false,
     id,
     incrementAriaLabel,
+    isDecrementDisabled = false,
+    isIncrementDisabled = false,
     label,
     loading = false,
     loadingAriaLabel,
-    max = NUMBER_FIELD_DEFAULT_MAX,
+    max,
     maxLength,
     maxReachedTooltipContent,
-    min = 0,
+    min,
     minReachedTooltipContent,
     name,
+    onBlur,
     onChange,
+    onInputChange,
     readOnly = false,
     required = false,
     step = 1,
@@ -62,8 +72,15 @@ const NumberField = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   // InlineError alone would leave an inconsistent a11y state.
   const hasError = !!error && !disabled && !isAnyLoading;
   const hasSubtext = !hasError && !!subtext;
-  // Also sizes the control, handed to the stylesheet as `--number-field-digits` below.
-  const inputLength = maxLength ?? String(max).length;
+  const shouldClamp = clampToRange && min !== undefined && max !== undefined;
+  const atMin = shouldClamp && value <= min;
+  const atMax = shouldClamp && value >= max;
+  const decrementBlocked = isDecrementDisabled || atMin;
+  const incrementBlocked = isIncrementDisabled || atMax;
+  // Width is always set. Native maxLength is only a real limit: an explicit prop, or the digits of
+  // `max` when clamping. Unconstrained fields stay three digits wide without capping typing.
+  const inputLength = maxLength ?? (shouldClamp && max !== undefined ? String(max).length : NUMBER_FIELD_DEFAULT_DIGITS);
+  const inputMaxLength = maxLength ?? (shouldClamp ? inputLength : undefined);
   const Label = useLabelable(label, inputId, required);
   // Mirrors TextInput
   const {
@@ -85,8 +102,8 @@ const NumberField = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     isInvalid: hasError,
     isReadOnly: readOnly,
     isRequired: required,
-    maxValue: max,
-    minValue: min,
+    maxValue: shouldClamp ? max : undefined,
+    minValue: shouldClamp ? min : undefined,
     name: name,
     onChange: onChange,
     step: step,
@@ -107,20 +124,22 @@ const NumberField = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       decrementAriaLabel: decrementAriaLabel,
       hasError: hasError,
       incrementAriaLabel: incrementAriaLabel,
-      inputLength: inputLength,
+      inputMaxLength: inputMaxLength,
       inputProps: rest,
       inputRef: forwardedRef,
       isAnimationEnabled: isAnimationEnabled,
-      isDecrementDisabled: !isInteractive || value <= min || isAnyLoading && !isDecrementLoading,
+      isDecrementDisabled: !isInteractive || decrementBlocked || isAnyLoading && !isDecrementLoading,
       isDecrementLoading: isDecrementLoading,
-      isIncrementDisabled: !isInteractive || value >= max || isAnyLoading && !isIncrementLoading,
+      isIncrementDisabled: !isInteractive || incrementBlocked || isAnyLoading && !isIncrementLoading,
       isIncrementLoading: isIncrementLoading,
       labelId: labelId,
       loadingAriaLabel: loadingAriaLabel,
       maxReachedTooltipContent: maxReachedTooltipContent,
       minReachedTooltipContent: minReachedTooltipContent,
-      showDecrementTooltip: isInteractive && !isAnyLoading && value <= min,
-      showIncrementTooltip: isInteractive && !isAnyLoading && value >= max
+      onBlur: onBlur,
+      onInputChange: onInputChange,
+      showDecrementTooltip: isInteractive && !isAnyLoading && decrementBlocked && !!minReachedTooltipContent,
+      showIncrementTooltip: isInteractive && !isAnyLoading && incrementBlocked && !!maxReachedTooltipContent
     }), hasError ? jsx(InlineError, {
       className: styles.inlineError,
       id: inlineErrorId,

package/dist/lib-esm/number-field/stepper-button.d.ts

@@ -13,9 +13,5 @@ type StepperButtonProps = {
     showTooltip: boolean;
     tooltipContent?: string;
 } & StepperLoadingProps;
-/**
- * With a boundary tooltip to show, `disabled` gives way to `aria-disabled` so the button stays focusable
- * and hoverable enough to surface it.
- */
 export declare const StepperButton: ({ ariaLabel, className, disabled, icon, onClick, showTooltip, tooltipContent, ...loadingProps }: StepperButtonProps) => React.ReactElement;
 export type { StepperLoadingProps };

package/dist/lib-esm/number-field/stepper-button.js

@@ -2,10 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import { Button } from '../button/button.js';
 import { Tooltip } from '../tooltip/tooltip.js';
 
-/**
- * With a boundary tooltip to show, `disabled` gives way to `aria-disabled` so the button stays focusable
- * and hoverable enough to surface it.
- */
 const StepperButton = ({
   ariaLabel,
   className,
@@ -16,10 +12,9 @@ const StepperButton = ({
   tooltipContent,
   ...loadingProps
 }) => {
-  const tooltip = showTooltip ? tooltipContent : undefined;
   const button = jsx(Button, {
     ...loadingProps,
-    accessibleWhenDisabled: !!tooltip,
+    accessibleWhenDisabled: showTooltip,
     "aria-label": ariaLabel,
     className: className,
     disabled: disabled,
@@ -29,13 +24,14 @@ const StepperButton = ({
     type: "button",
     variant: "secondary"
   });
-  if (tooltip) {
-    return jsx(Tooltip, {
-      content: tooltip,
-      children: button
-    });
+  if (!tooltipContent) {
+    return button;
   }
-  return button;
+  return jsx(Tooltip, {
+    content: tooltipContent,
+    open: showTooltip ? undefined : false,
+    children: button
+  });
 };
 
 export { StepperButton };

package/dist/lib-esm/number-field/types.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import { type RequireAllOrNone } from 'type-fest';
+import { type BaseTextInputProps } from '../primitives/base-text-input';
 import { type Labelable } from '../util-components/labelable';
 export interface Loading {
     /**
@@ -14,12 +15,25 @@ export interface Loading {
  * Attributes NumberField sets from its own props, so they cannot be forwarded. `size` is included because
  * the control takes its width from `maxLength`.
  */
-type ReservedInputAttributes = 'defaultValue' | 'disabled' | 'inputMode' | 'max' | 'min' | 'onBlur' | 'onChange' | 'onKeyDown' | 'pattern' | 'readOnly' | 'required' | 'size' | 'step' | 'type' | 'value';
+type ReservedInputAttributes = 'defaultValue' | 'disabled' | 'inputMode' | 'max' | 'min' | 'onBlur' | 'onChange' | 'onInput' | 'onKeyDown' | 'pattern' | 'readOnly' | 'required' | 'size' | 'step' | 'type' | 'value';
 /**
  * Remaining props are forwarded to the `<input>`, so the field takes part in native form submission.
  * `className` styles the wrapper holding the label, the control and the subtext.
  */
 interface NumberFieldBaseProps extends Omit<ComponentPropsWithoutRef<'input'>, ReservedInputAttributes>, Labelable {
+    /**
+     * When true **and both `min` and `max` are set**, typed commits and controlled values are clamped
+     * into `[min, max]` via RAC, and steppers are disabled at the bounds.
+     *
+     * If either bound is omitted, this prop is a no-op — the field stays unconstrained (same as the
+     * default). Example: `clampToRange min={1} max={10}`.
+     *
+     * Without this (the default), the consumer owns validation and stepper bounds via `onChange` /
+     * `onBlur` / `isIncrementDisabled` / `isDecrementDisabled`.
+     *
+     * @default false
+     */
+    clampToRange?: boolean;
     /** Accessible label for the decrement button. */
     decrementAriaLabel: string;
     /**
@@ -45,33 +59,53 @@ interface NumberFieldBaseProps extends Omit<ComponentPropsWithoutRef<'input'>, R
     hideLabel?: boolean;
     /** Accessible label for the increment button. */
     incrementAriaLabel: string;
+    /**
+     * When true, disables the decrement stepper. Use this to own stepper bounds when `clampToRange` is
+     * off (e.g. `value <= min`). Combined with `clampToRange`, also disables at `min`.
+     */
+    isDecrementDisabled?: boolean;
+    /**
+     * When true, disables the increment stepper. Use this to own stepper bounds when `clampToRange` is
+     * off (e.g. `value >= max`). Combined with `clampToRange`, also disables at `max`.
+     */
+    isIncrementDisabled?: boolean;
     /** The field label rendered above the control. */
     label: Labelable['label'];
     /**
-     * The upper bound. Disables the increment button once reached, shows `maxReachedTooltipContent`, and
-     * snaps typed commits down to this value.
-     *
-     * @default 999
+     * Upper bound hint: exposed as `aria-valuemax` and used for `maxReachedTooltipContent`. Only drives
+     * RAC clamp / auto-disabled steppers, and the default `maxLength`, when `clampToRange` is true
+     * **and `min` is also set**; otherwise it is a hint only.
      */
     max?: number;
     /**
-     * How many characters the input accepts and is sized to hold. Defaults to the digits of `max`; set it
-     * when `formatOptions` needs room for a separator or a sign.
+     * How many characters the input accepts. Always wins when set, and also sizes the control.
+     *
+     * When omitted: the digits of `max` if `clampToRange` is on with both bounds (width and typing
+     * cap). Unconstrained fields stay three digits wide and do not cap typing.
      */
     maxLength?: number;
-    /** Localized tooltip content shown when the increment button is disabled because the value is at max. */
+    /** Localized tooltip content shown when the increment button is disabled. */
     maxReachedTooltipContent?: string;
     /**
-     * The lower bound. Disables the decrement button once reached, shows `minReachedTooltipContent`, and
-     * snaps typed commits up to this value.
-     *
-     * @default 0
+     * Lower bound hint: exposed as `aria-valuemin` and used for `minReachedTooltipContent`. Only drives
+     * RAC clamp / auto-disabled steppers when `clampToRange` is true **and `max` is also set**;
+     * otherwise it is a hint only.
      */
     min?: number;
-    /** Localized tooltip content shown when the decrement button is disabled because the value is at min. */
+    /** Localized tooltip content shown when the decrement button is disabled. */
     minReachedTooltipContent?: string;
+    /**
+     * Called when the input loses focus. Fires when tabbing or clicking away, including when moving
+     * from the input to a stepper.
+     */
+    onBlur?: BaseTextInputProps['onBlur'];
     /** Called with the new value when a stepper is used, or when the typed draft is committed on blur or Enter. */
     onChange: (value: number) => void;
+    /**
+     * Called with the raw input string as the user types, before the draft is committed via `onChange`.
+     * Use this for free-typed intermediate values (e.g. keeping a below-min draft visible).
+     */
+    onInputChange?: (rawValue: string) => void;
     /**
      * When true, the value is displayed but cannot be edited and the stepper buttons are inactive.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "17.0.0",
+    "version": "17.1.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -55,7 +55,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.7.15",
+        "@box/blueprint-web-assets": "^5.7.17",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -86,7 +86,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.2.24",
+        "@box/storybook-utils": "^1.2.26",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",