@octanejs/base-ui 0.1.50 → 0.1.52

package/src/number-field/root/NumberFieldRootContext.ts

@@ -0,0 +1,52 @@
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+import type { NumberFieldRoot, NumberFieldRootState } from './NumberFieldRoot.tsrx';
+import type { EventWithOptionalKeyState, IncrementValueParameters } from '../utils/types';
+
+export type InputMode = 'numeric' | 'decimal' | 'text';
+
+export interface NumberFieldRootContext {
+	minWithDefault: number;
+	maxWithDefault: number;
+	id: string | undefined;
+	setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
+	getStepAmount: (event?: EventWithOptionalKeyState) => number;
+	incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
+	inputRef: React.RefObject<HTMLInputElement | null>;
+	focusInput: () => void;
+	allowInputSyncRef: React.RefObject<boolean | null>;
+	formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
+	valueRef: React.RefObject<number | null>;
+	lastChangedValueRef: React.RefObject<number | null>;
+	hasPendingCommitRef: React.RefObject<boolean>;
+	name: string | undefined;
+	nameProp: string | undefined;
+	inputMode: InputMode;
+	getAllowedNonNumericKeys: () => Set<string>;
+	min: number | undefined;
+	max: number | undefined;
+	setInputValue: React.Dispatch<React.SetStateAction<string>>;
+	locale: Intl.LocalesArgument;
+	setIsScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
+	state: NumberFieldRootState;
+	onValueCommitted: (
+		value: number | null,
+		eventDetails: NumberFieldRoot.CommitEventDetails,
+	) => void;
+}
+
+export const NumberFieldRootContext = React.createContext<NumberFieldRootContext | undefined>(
+	undefined,
+);
+
+export function useNumberFieldRootContext() {
+	const context = React.useContext(NumberFieldRootContext);
+	if (context === undefined) {
+		throw new Error(
+			'Base UI: NumberFieldRootContext is missing. NumberField parts must be placed within <NumberField.Root>.',
+		);
+	}
+
+	return context;
+}

package/src/number-field/root/NumberFieldRootDataAttributes.ts

@@ -0,0 +1,40 @@
+/**
+ * Present while scrubbing.
+ */
+export const scrubbing = 'data-scrubbing';
+/**
+ * Present when the number field is disabled.
+ */
+export const disabled = 'data-disabled';
+/**
+ * Present when the number field is readonly.
+ */
+export const readonly = 'data-readonly';
+/**
+ * Present when the number field is required.
+ */
+export const required = 'data-required';
+/**
+ * Present when the number field is in a valid state (when wrapped in Field.Root).
+ */
+export const valid = 'data-valid';
+/**
+ * Present when the number field is in an invalid state (when wrapped in Field.Root).
+ */
+export const invalid = 'data-invalid';
+/**
+ * Present when the number field has been touched (when wrapped in Field.Root).
+ */
+export const touched = 'data-touched';
+/**
+ * Present when the number field's value has changed (when wrapped in Field.Root).
+ */
+export const dirty = 'data-dirty';
+/**
+ * Present when the number field is filled (when wrapped in Field.Root).
+ */
+export const filled = 'data-filled';
+/**
+ * Present when the number field is focused (when wrapped in Field.Root).
+ */
+export const focused = 'data-focused';

package/src/number-field/root/useNumberFieldStepperButton.ts

@@ -0,0 +1,191 @@
+/** @jsxImportSource octane */
+'use client';
+import type * as React from 'octane';
+import type { BaseUIComponentProps, NativeButtonProps } from '../../internals/types';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { useButton } from '../../internals/use-button';
+import { isTouchLikePointerType, usePressAndHold } from '../../internals/usePressAndHold';
+import { parseNumber } from '../utils/parse';
+import {
+	createChangeEventDetails,
+	createGenericEventDetails,
+} from '../../internals/createBaseUIEventDetails';
+import type { EventWithOptionalKeyState } from '../utils/types';
+import type { NumberFieldRoot, NumberFieldRootState } from './NumberFieldRoot.tsrx';
+import { REASONS } from '../../internals/reasons';
+import { useNumberFieldRootContext } from './NumberFieldRootContext';
+import { stateAttributesMapping } from '../utils/stateAttributesMapping';
+
+const SELECT_NONE_STYLE: React.CSSProperties = {
+	WebkitUserSelect: 'none',
+	userSelect: 'none',
+};
+
+type StepperButtonProps = NativeButtonProps & BaseUIComponentProps<'button', NumberFieldRootState>;
+
+/**
+ * Shared implementation for the increment and decrement stepper buttons. They differ only in the
+ * direction they step and the boundary (`max` vs `min`) at which they become disabled.
+ */
+export function useNumberFieldStepperButton(
+	componentProps: StepperButtonProps,
+	forwardedRef: React.Ref<HTMLButtonElement>,
+	isIncrement: boolean,
+) {
+	const {
+		render,
+		className,
+		disabled: disabledProp = false,
+		nativeButton = true,
+		style,
+		...elementProps
+	} = componentProps;
+
+	const {
+		allowInputSyncRef,
+		formatOptionsRef,
+		getStepAmount,
+		id,
+		incrementValue,
+		inputRef,
+		focusInput,
+		maxWithDefault,
+		minWithDefault,
+		setValue,
+		state,
+		valueRef,
+		locale,
+		lastChangedValueRef,
+		onValueCommitted,
+	} = useNumberFieldRootContext();
+	const { disabled: contextDisabled, readOnly, value, inputValue } = state;
+
+	const isAtBoundary =
+		value != null && (isIncrement ? value >= maxWithDefault : value <= minWithDefault);
+	const disabled = disabledProp || contextDisabled || isAtBoundary;
+
+	const pressReason: NumberFieldRoot.ChangeEventReason = isIncrement
+		? REASONS.incrementPress
+		: REASONS.decrementPress;
+
+	function commitValue(nativeEvent: MouseEvent) {
+		const shouldCommitInputValue = !allowInputSyncRef.current;
+		allowInputSyncRef.current = true;
+
+		if (!shouldCommitInputValue) {
+			// The input is already synced, so step from the authoritative numeric value rather than
+			// re-parsing the rounded display text. Refresh the commit ref to the current value so a
+			// subsequent canceled step can't commit a stale `lastChangedValueRef` left over from an
+			// earlier change (the `setValue` that used to refresh it is now skipped on this path).
+			lastChangedValueRef.current = valueRef.current;
+			return;
+		}
+
+		// The input is dirty but not yet blurred, so the value won't have been committed.
+		const parsedValue = parseNumber(inputValue, locale, formatOptionsRef.current);
+
+		if (parsedValue !== null) {
+			// Sync the dirty typed value with no direction so it isn't directionally snapped
+			// (`snapOnStep`) before the real increment/decrement runs, which would otherwise emit a
+			// spurious intermediate value.
+			const details = createChangeEventDetails(pressReason, nativeEvent);
+			setValue(parsedValue, details);
+
+			// Only sync the ref base when the commit wasn't canceled, so a subsequent increment in the
+			// same interaction steps from the value actually applied.
+			if (!details.isCanceled) {
+				valueRef.current = parsedValue;
+			}
+		}
+	}
+
+	const { pointerHandlers, shouldSkipClick } = usePressAndHold({
+		disabled: disabled || readOnly,
+		elementRef: inputRef,
+		tick(triggerEvent) {
+			const amount = getStepAmount(triggerEvent as EventWithOptionalKeyState);
+			return incrementValue(amount, {
+				direction: isIncrement ? 1 : -1,
+				event: triggerEvent,
+				reason: pressReason,
+			});
+		},
+		onStop(nativeEvent: PointerEvent) {
+			// `onStop` fires on every release; fall back to the current value when no tick changed it.
+			// Step interactions never commit `null`, so the `??` can't mask a legitimate null commit.
+			const committed = lastChangedValueRef.current ?? valueRef.current;
+			onValueCommitted(committed, createGenericEventDetails(pressReason, nativeEvent));
+		},
+	});
+
+	const props: React.ComponentProps<'button'> = {
+		disabled,
+		'aria-label': isIncrement ? 'Increase' : 'Decrease',
+		'aria-controls': id,
+		// Keyboard users shouldn't have access to the buttons, since they can use the input element
+		// to change the value. On the other hand, `aria-hidden` is not applied because touch screen
+		// readers should be able to use the buttons.
+		tabIndex: -1,
+		style: SELECT_NONE_STYLE,
+		...pointerHandlers,
+		onClick(event) {
+			const isDisabled = disabled || readOnly;
+			if (event.defaultPrevented || isDisabled || shouldSkipClick(event)) {
+				return;
+			}
+
+			commitValue(event);
+
+			const amount = getStepAmount(event);
+
+			const prev = valueRef.current;
+
+			incrementValue(amount, {
+				direction: isIncrement ? 1 : -1,
+				event: event,
+				reason: pressReason,
+			});
+
+			const committed = lastChangedValueRef.current ?? valueRef.current;
+			if (committed !== prev) {
+				onValueCommitted(committed, createGenericEventDetails(pressReason, event));
+			}
+		},
+		onPointerDown(event) {
+			if (event.defaultPrevented || readOnly || event.button || disabled) {
+				return;
+			}
+
+			// Sync dirty input value before starting the hold sequence.
+			commitValue(event);
+			// Treat `lastChangedValueRef` as a per-hold result slot. If the first tick is a no-op or is
+			// canceled, `onStop` should fall back to the current value, not a previous interaction.
+			lastChangedValueRef.current = null;
+
+			if (!isTouchLikePointerType(event.pointerType)) {
+				// Focus the input so the user can continue with keyboard interactions.
+				focusInput();
+			}
+
+			pointerHandlers.onPointerDown(event);
+		},
+	};
+
+	const { getButtonProps, buttonRef } = useButton({
+		// Read-only steppers are exposed as unavailable through button disabled semantics, while
+		// `data-readonly` (from `state`) is preserved for styling. `aria-readonly` isn't valid on the
+		// `button` role, so it's intentionally not set.
+		disabled: disabled || readOnly,
+		native: nativeButton,
+		focusableWhenDisabled: true,
+	});
+
+	const buttonState = { ...state, disabled };
+
+	return useRenderElement('button', componentProps, {
+		ref: [forwardedRef, buttonRef],
+		state: buttonState,
+		props: [props, elementProps, getButtonProps],
+		stateAttributesMapping,
+	});
+}

package/src/number-field/scrub-area/NumberFieldScrubArea.tsrx

@@ -0,0 +1,395 @@
+'use client';
+import * as React from 'octane';
+import * as ReactDOM from 'octane';
+import { addEventListener } from '@octanejs/base-ui-utils/addEventListener';
+import { mergeCleanups } from '@octanejs/base-ui-utils/mergeCleanups';
+import { ownerWindow, ownerDocument } from '@octanejs/base-ui-utils/owner';
+import { platform } from '@octanejs/base-ui-utils/platform';
+import { useStableCallback } from '@octanejs/base-ui-utils/useStableCallback';
+import { useTimeout } from '@octanejs/base-ui-utils/useTimeout';
+import type { BaseUIComponentProps, HTMLProps } from '../../internals/types';
+import { useNumberFieldRootContext } from '../root/NumberFieldRootContext';
+import type { NumberFieldRootState } from '../root/NumberFieldRoot.tsrx';
+import { stateAttributesMapping } from '../utils/stateAttributesMapping';
+import { NumberFieldScrubAreaContext } from './NumberFieldScrubAreaContext';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { getViewportRect } from '../utils/getViewportRect';
+import { createGenericEventDetails } from '../../internals/createBaseUIEventDetails';
+import { REASONS } from '../../internals/reasons';
+import { getTarget } from '../../floating-ui-react/utils';
+
+const SCRUB_AREA_STYLE: React.CSSProperties = {
+	touchAction: 'none',
+	WebkitUserSelect: 'none',
+	userSelect: 'none',
+};
+
+/**
+ * An interactive area where the user can click and drag to change the field value.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+export const NumberFieldScrubArea = function NumberFieldScrubArea(
+	componentPropsWithRef: React.PropsWithoutRef<NumberFieldScrubArea.Props> & {
+		ref?: React.Ref<HTMLSpanElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const {
+		render,
+		className,
+		direction = 'horizontal',
+		pixelSensitivity = 2,
+		teleportDistance,
+		style,
+		...elementProps
+	} = componentProps;
+
+	const {
+		state,
+		setIsScrubbing: setRootScrubbing,
+		inputRef,
+		focusInput,
+		incrementValue,
+		allowInputSyncRef,
+		getStepAmount,
+		onValueCommitted,
+		lastChangedValueRef,
+		valueRef,
+	} = useNumberFieldRootContext();
+	const { disabled, readOnly } = state;
+
+	const scrubAreaRef = React.useRef<HTMLSpanElement | null>(null);
+
+	const isScrubbingRef = React.useRef(false);
+	const didMoveRef = React.useRef(false);
+	const pointerDownTargetRef = React.useRef<EventTarget | null>(null);
+	const scrubAreaCursorRef = React.useRef<HTMLSpanElement | null>(null);
+	const virtualCursorCoords = React.useRef({ x: 0, y: 0 });
+
+	const exitPointerLockTimeout = useTimeout();
+
+	const [isTouchInput, setIsTouchInput] = React.useState(false);
+	const [isPointerLockDenied, setIsPointerLockDenied] = React.useState(false);
+	const [isScrubbing, setIsScrubbing] = React.useState(false);
+
+	function updateCursorTransform(virtualCursor: HTMLSpanElement, x: number, y: number) {
+		// Invert the visual viewport scale so the cursor matches the OS cursor, which doesn't
+		// scale with the content on pinch-zoom.
+		const scale = ownerWindow(virtualCursor).visualViewport?.scale ?? 1;
+		virtualCursor.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / scale})`;
+	}
+
+	const onScrub = useStableCallback(({ movementX, movementY }: PointerEvent) => {
+		const virtualCursor = scrubAreaCursorRef.current;
+		const scrubAreaEl = scrubAreaRef.current;
+
+		if (!virtualCursor || !scrubAreaEl) {
+			return;
+		}
+
+		const rect = getViewportRect(teleportDistance, scrubAreaEl);
+
+		const coords = virtualCursorCoords.current;
+
+		// Wrap the cursor to the opposite edge when its center crosses a viewport bound.
+		const wrap = (coord: number, halfSize: number, low: number, high: number) => {
+			if (coord + halfSize < low) {
+				return high - halfSize;
+			}
+			if (coord + halfSize > high) {
+				return low - halfSize;
+			}
+			return coord;
+		};
+
+		const newCoords = {
+			x: wrap(
+				Math.round(coords.x + movementX),
+				virtualCursor.offsetWidth / 2,
+				rect.left,
+				rect.right,
+			),
+			y: wrap(
+				Math.round(coords.y + movementY),
+				virtualCursor.offsetHeight / 2,
+				rect.top,
+				rect.bottom,
+			),
+		};
+
+		virtualCursorCoords.current = newCoords;
+
+		updateCursorTransform(virtualCursor, newCoords.x, newCoords.y);
+	});
+
+	const onScrubbingChange = useStableCallback(
+		(scrubbingValue: boolean, { clientX, clientY }: PointerEvent) => {
+			ReactDOM.flushSync(() => {
+				setIsScrubbing(scrubbingValue);
+				setRootScrubbing(scrubbingValue);
+			});
+
+			const virtualCursor = scrubAreaCursorRef.current;
+			if (!virtualCursor || !scrubbingValue) {
+				return;
+			}
+
+			const initialCoords = {
+				x: clientX - virtualCursor.offsetWidth / 2,
+				y: clientY - virtualCursor.offsetHeight / 2,
+			};
+
+			virtualCursorCoords.current = initialCoords;
+
+			updateCursorTransform(virtualCursor, initialCoords.x, initialCoords.y);
+		},
+	);
+
+	React.useEffect(
+		function registerGlobalScrubbingEventListeners() {
+			// Only listen while actively scrubbing; avoids unrelated pointerup events committing.
+			if (!inputRef.current || disabled || readOnly || !isScrubbing) {
+				return undefined;
+			}
+
+			let cumulativeDelta = 0;
+
+			function handleScrubPointerUp(event: PointerEvent) {
+				function handler() {
+					try {
+						ownerDocument(scrubAreaRef.current).exitPointerLock();
+					} catch {
+						// Ignore errors.
+					} finally {
+						isScrubbingRef.current = false;
+						onScrubbingChange(false, event);
+						onValueCommitted(
+							lastChangedValueRef.current ?? valueRef.current,
+							createGenericEventDetails(REASONS.scrub, event),
+						);
+
+						// Manually dispatch a click event if no movement happened, since
+						// preventDefault on pointerdown prevents the browser click event.
+						const pointerDownTarget = pointerDownTargetRef.current;
+						const input = inputRef.current;
+						if (!didMoveRef.current && pointerDownTarget != null && input) {
+							pointerDownTarget.dispatchEvent(
+								new (ownerWindow(input).MouseEvent)('click', {
+									bubbles: true,
+									cancelable: true,
+								}),
+							);
+						}
+
+						didMoveRef.current = false;
+						pointerDownTargetRef.current = null;
+					}
+				}
+
+				if (platform.engine.gecko) {
+					// Firefox needs a small delay here when soft-clicking as the pointer
+					// lock will not release otherwise.
+					exitPointerLockTimeout.start(20, handler);
+				} else {
+					handler();
+				}
+			}
+
+			function handleScrubPointerMove(event: PointerEvent) {
+				// The effects below can tear down and re-run without unmounting (`<Activity>`), which
+				// clears the ref while `isScrubbing` stays `true` and re-attaches this listener. The ref
+				// is the source of truth for whether a pointer is actually down.
+				if (!isScrubbingRef.current) {
+					return;
+				}
+
+				// Prevent text selection.
+				event.preventDefault();
+
+				onScrub(event);
+
+				const { movementX, movementY } = event;
+
+				cumulativeDelta += direction === 'vertical' ? movementY : movementX;
+
+				if (Math.abs(cumulativeDelta) >= pixelSensitivity) {
+					cumulativeDelta = 0;
+					didMoveRef.current = true;
+					const dValue = direction === 'vertical' ? -movementY : movementX;
+					const stepAmount = getStepAmount(event);
+					const rawAmount = dValue * stepAmount;
+
+					if (rawAmount !== 0) {
+						allowInputSyncRef.current = true;
+						incrementValue(Math.abs(rawAmount), {
+							direction: rawAmount >= 0 ? 1 : -1,
+							event,
+							reason: REASONS.scrub,
+						});
+					}
+				}
+			}
+
+			const win = ownerWindow(inputRef.current);
+			const unsubscribe = mergeCleanups(
+				addEventListener(win, 'pointerup', handleScrubPointerUp, true),
+				addEventListener(win, 'pointermove', handleScrubPointerMove, true),
+			);
+
+			return () => {
+				exitPointerLockTimeout.clear();
+				unsubscribe();
+			};
+		},
+		[
+			disabled,
+			readOnly,
+			allowInputSyncRef,
+			incrementValue,
+			isScrubbing,
+			getStepAmount,
+			inputRef,
+			onScrubbingChange,
+			onScrub,
+			direction,
+			pixelSensitivity,
+			lastChangedValueRef,
+			onValueCommitted,
+			valueRef,
+			exitPointerLockTimeout,
+		],
+	);
+
+	// If the scrub area unmounts mid-scrub, release pointer lock and clear the root's scrubbing
+	// state so it doesn't stay locked or stuck. (No commit: there's no pointer release here.)
+	React.useEffect(
+		() => () => {
+			if (isScrubbingRef.current) {
+				isScrubbingRef.current = false;
+				setRootScrubbing(false);
+				try {
+					ownerDocument(scrubAreaRef.current).exitPointerLock();
+				} catch {
+					// Ignore errors.
+				}
+			}
+		},
+		[setRootScrubbing],
+	);
+
+	// Prevent scrolling using touch input when scrubbing.
+	React.useEffect(
+		function registerScrubberTouchPreventListener() {
+			const element = scrubAreaRef.current;
+			if (!element || disabled || readOnly) {
+				return undefined;
+			}
+
+			function handleTouchStart(event: TouchEvent) {
+				if (event.touches.length === 1) {
+					event.preventDefault();
+				}
+			}
+
+			return addEventListener(element, 'touchstart', handleTouchStart);
+		},
+		[disabled, readOnly],
+	);
+
+	const defaultProps: HTMLProps = {
+		role: 'presentation',
+		style: SCRUB_AREA_STYLE,
+		async onPointerDown(event) {
+			if (event.defaultPrevented || readOnly || event.button || disabled) {
+				return;
+			}
+
+			const isTouch = event.pointerType === 'touch';
+			setIsTouchInput(isTouch);
+
+			if (event.pointerType === 'mouse') {
+				event.preventDefault();
+				focusInput();
+			}
+
+			isScrubbingRef.current = true;
+			didMoveRef.current = false;
+			pointerDownTargetRef.current = getTarget(event);
+			onScrubbingChange(true, event);
+
+			// WebKit causes significant layout shift with the native message, so we can't use it.
+			if (!isTouch && !platform.engine.webkit) {
+				try {
+					// Avoid non-deterministic errors in testing environments. This error sometimes
+					// appears:
+					// "The root document of this element is not valid for pointer lock."
+					await ownerDocument(scrubAreaRef.current).body.requestPointerLock();
+					setIsPointerLockDenied(false);
+				} catch (error) {
+					setIsPointerLockDenied(true);
+				} finally {
+					// `onScrubbingChange` already wraps its state updates in `flushSync`, so re-emit the
+					// scrubbing state directly (no extra nested `flushSync`) to reflect the resolved
+					// pointer-lock result on the cursor.
+					if (isScrubbingRef.current) {
+						onScrubbingChange(true, event);
+					}
+				}
+			}
+		},
+	};
+
+	const element = useRenderElement('span', componentProps, {
+		ref: [forwardedRef, scrubAreaRef],
+		state,
+		props: [defaultProps, elementProps],
+		stateAttributesMapping,
+	});
+
+	const contextValue: NumberFieldScrubAreaContext = React.useMemo(
+		() => ({
+			isScrubbing,
+			isTouchInput,
+			isPointerLockDenied,
+			scrubAreaCursorRef,
+		}),
+		[isScrubbing, isTouchInput, isPointerLockDenied],
+	);
+
+	return (
+		<NumberFieldScrubAreaContext.Provider value={contextValue}>
+			{element}
+		</NumberFieldScrubAreaContext.Provider>
+	);
+};
+
+export interface NumberFieldScrubAreaState extends NumberFieldRootState {}
+
+export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<
+	'span',
+	NumberFieldScrubAreaState
+> {
+	/**
+	 * Cursor movement direction in the scrub area.
+	 * @default 'horizontal'
+	 */
+	direction?: 'horizontal' | 'vertical' | undefined;
+	/**
+	 * Determines how many pixels the cursor must move before the value changes.
+	 * A higher value will make scrubbing less sensitive.
+	 * @default 2
+	 */
+	pixelSensitivity?: number | undefined;
+	/**
+	 * If specified, determines the distance that the cursor may move from the center
+	 * of the scrub area before it will loop back around.
+	 */
+	teleportDistance?: number | undefined;
+}
+
+export namespace NumberFieldScrubArea {
+	export type State = NumberFieldScrubAreaState;
+	export type Props = NumberFieldScrubAreaProps;
+}

package/src/number-field/scrub-area/NumberFieldScrubAreaContext.ts

@@ -0,0 +1,24 @@
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+
+export interface NumberFieldScrubAreaContext {
+	isScrubbing: boolean;
+	isTouchInput: boolean;
+	isPointerLockDenied: boolean;
+	scrubAreaCursorRef: React.RefObject<HTMLSpanElement | null>;
+}
+
+export const NumberFieldScrubAreaContext = React.createContext<
+	NumberFieldScrubAreaContext | undefined
+>(undefined);
+
+export function useNumberFieldScrubAreaContext() {
+	const context = React.useContext(NumberFieldScrubAreaContext);
+	if (context === undefined) {
+		throw new Error(
+			'Base UI: NumberFieldScrubAreaContext is missing. NumberFieldScrubArea parts must be placed within <NumberField.ScrubArea>.',
+		);
+	}
+	return context;
+}