The Number Input component provides users with a field for integer values, and buttons to increment or decrement the value.
+
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
+## Introduction
+
+A number input is a UI element that accepts numeric values from the user.
+Base UI's Number Input component is a customizable replacement for the native HTML `` containing the other interior slots
+- `input`: an `
` element
+- `incrementButton`: a `
` for increasing the value
+- `decrementButton`: a `` for decreasing the value
+
+```html
+
+
+```
+
+### Slot props
+
+:::info
+The following props are available on all non-utility Base components.
+See [Usage](/base-ui/getting-started/usage/) for full details.
+:::
+
+Use the `slots` prop to override the root slot or any interior slots:
+
+```jsx
+ | React.PointerEvent | React.KeyboardEvent, value: number | undefined) => void",
+ "describedArgs": ["event", "value"]
+ }
+ },
+ "onInputChange": {
+ "type": { "name": "func" },
+ "signature": {
+ "type": "function(event: React.ChangeEvent) => void",
+ "describedArgs": ["event"]
+ }
+ },
+ "readOnly": { "type": { "name": "bool" }, "default": "false" },
+ "required": { "type": { "name": "bool" } },
+ "shiftMultiplier": { "type": { "name": "number" } },
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ decrementButton?: func{page} ;
+};
+
+export const getStaticPaths = () => {
+ return {
+ paths: [{ params: { docsTab: 'components-api' } }, { params: { docsTab: 'hooks-api' } }],
+ fallback: false, // can also be true or 'blocking'
+ };
+};
+
+export const getStaticProps = () => {
+ const NumberInputApiReq = require.context(
+ 'docs/translations/api-docs-base/number-input',
+ false,
+ /number-input.*.json$/,
+ );
+ const NumberInputApiDescriptions = mapApiPageTranslations(NumberInputApiReq);
+
+ const useNumberInputApiReq = require.context(
+ 'docs/translations/api-docs/use-number-input',
+ false,
+ /use-number-input.*.json$/,
+ );
+ const useNumberInputApiDescriptions = mapApiPageTranslations(useNumberInputApiReq);
+
+ return {
+ props: {
+ componentsApiDescriptions: { NumberInput: NumberInputApiDescriptions },
+ componentsApiPageContents: { NumberInput: NumberInputApiJsonPageContent },
+ hooksApiDescriptions: { useNumberInput: useNumberInputApiDescriptions },
+ hooksApiPageContents: { useNumberInput: useNumberInputApiJsonPageContent },
+ },
+ };
+};
diff --git a/docs/pages/base-ui/react-number-input/index.js b/docs/pages/base-ui/react-number-input/index.js
new file mode 100644
index 00000000000000..124fb94411844c
--- /dev/null
+++ b/docs/pages/base-ui/react-number-input/index.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs/data/base/components/number-input/number-input.md?@mui/markdown';
+
+export default function Page(props) {
+ const { userLanguage, ...other } = props;
+ return {page} ;
+};
diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js
index 061c8537860e18..6671b57e4033f2 100644
--- a/docs/src/modules/components/ComponentsApiContent.js
+++ b/docs/src/modules/components/ComponentsApiContent.js
@@ -109,11 +109,30 @@ export default function ComponentsApiContent(props) {
slotGuideLink = '/base-ui/guides/overriding-component-structure/';
}
- const source = filename
- .replace(/\/packages\/mui(-(.+?))?\/src/, (match, dash, pkg) => `@mui/${pkg}`)
+ // convert paths like `/packages/mui-base/src/Input...` to `@mui/base/Input...`
+ const packageAndFilename = filename.replace(
+ /\/packages\/mui(-(.+?))?\/src/,
+ (match, dash, pkg) => `@mui/${pkg}`,
+ );
+
+ const source = packageAndFilename
// convert things like `/Table/Table.js` to ``
.replace(/\/([^/]+)\/\1\.(js|tsx)$/, '');
+ const defaultImportName = pageContent.name;
+ let defaultImportPath = `${source}/${defaultImportName}`;
+ let namedImportPath = source;
+ let namedImportName = defaultImportName;
+
+ if (/Unstable_/.test(source)) {
+ defaultImportPath = source.replace(/\/[^/]*$/, '');
+ namedImportPath = packageAndFilename
+ .replace(/Unstable_/, '')
+ .replace(/\/([^/]+)\/\1\.(js|tsx)$/, '');
+
+ namedImportName = `Unstable_${defaultImportName} as ${defaultImportName}`;
+ }
+
// The `ref` is forwarded to the root element.
let refHint = t('api-docs.refRootElement');
if (forwardsRefTo == null) {
@@ -146,9 +165,9 @@ export default function ComponentsApiContent(props) {
@@ -72,7 +78,7 @@ export default function HooksApiContent(props) {
code={`
import ${hookName} from '${source.split('/').slice(0, -1).join('/')}';
// ${t('or')}
-import { ${hookName} } from '${source.split('/').slice(0, 2).join('/')}';`}
+import { ${defaultImportName} } from '${source.split('/').slice(0, 2).join('/')}';`}
language="jsx"
/>
true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component.",
+ "error": "If true, the input will indicate an error by setting the aria-invalid attribute on the input and the Mui-error class on the root element.",
+ "id": "The id of the input element.",
+ "max": "The maximum value.",
+ "min": "The minimum value.",
+ "onValueChange": "Callback fired after the value is clamped and changes. Called with undefined when the value is unset.",
+ "required": "If true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component.",
+ "slotProps": "The props used for each slot inside the NumberInput.",
+ "slots": "The components used for each slot inside the InputBase. Either a string to use a HTML element or a component. See Slots API below for more details.",
+ "step": "The amount that the value changes on each increment or decrement.",
+ "value": "The current value. Use when the component is controlled."
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs-base/number-input/number-input.json b/docs/translations/api-docs-base/number-input/number-input.json
new file mode 100644
index 00000000000000..b588e42ddadeb0
--- /dev/null
+++ b/docs/translations/api-docs-base/number-input/number-input.json
@@ -0,0 +1,44 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "defaultValue": {
+ "description": "The default value. Use when the component is not controlled."
+ },
+ "disabled": {
+ "description": "If true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component."
+ },
+ "error": {
+ "description": "If true, the input will indicate an error by setting the aria-invalid attribute on the input and the Mui-error class on the root element."
+ },
+ "id": { "description": "The id of the input element." },
+ "max": { "description": "The maximum value." },
+ "min": { "description": "The minimum value." },
+ "onChange": {
+ "description": "Callback fired after the value is clamped and changes - when the input is blurred or when the stepper buttons are triggered. Called with undefined when the value is unset.",
+ "typeDescriptions": {
+ "event": "The event source of the callback",
+ "value": "The new value of the component"
+ }
+ },
+ "onInputChange": {
+ "description": "Callback fired when the input value changes after each keypress, before clamping is applied. Note that event.target.value may contain values that fall outside of min and max or are otherwise "invalid".",
+ "typeDescriptions": { "event": "The event source of the callback." }
+ },
+ "readOnly": {
+ "description": "If true, the input element becomes read-only. The stepper buttons remain active, with the addition that they are now keyboard focusable."
+ },
+ "required": {
+ "description": "If true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component."
+ },
+ "shiftMultiplier": {
+ "description": "Multiplier applied to step if the shift key is held while incrementing or decrementing the value. Defaults to 10."
+ },
+ "slotProps": { "description": "The props used for each slot inside the NumberInput." },
+ "slots": {
+ "description": "The components used for each slot inside the InputBase. Either a string to use a HTML element or a component."
+ },
+ "step": { "description": "The amount that the value changes on each increment or decrement." },
+ "value": { "description": "The current value. Use when the component is controlled." }
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs/use-number-input/use-number-input.json b/docs/translations/api-docs/use-number-input/use-number-input.json
new file mode 100644
index 00000000000000..575cb5d734d751
--- /dev/null
+++ b/docs/translations/api-docs/use-number-input/use-number-input.json
@@ -0,0 +1,66 @@
+{
+ "hookDescription": "",
+ "parametersDescriptions": {
+ "defaultValue": {
+ "description": "The default value. Use when the component is not controlled."
+ },
+ "disabled": {
+ "description": "If true, the component is disabled.\nThe prop defaults to the value (false) inherited from the parent FormControl component."
+ },
+ "error": {
+ "description": "If true, the input will indicate an error by setting the aria-invalid attribute.\nThe prop defaults to the value (false) inherited from the parent FormControl component."
+ },
+ "inputId": { "description": "The id attribute of the input element." },
+ "inputRef": { "description": "The ref of the input element." },
+ "max": { "description": "The maximum value." },
+ "min": { "description": "The minimum value." },
+ "onChange": {
+ "description": "Callback fired after the value is clamped and changes - when the input is blurred or when\nthe stepper buttons are triggered.\nCalled with undefined when the value is unset."
+ },
+ "onInputChange": {
+ "description": "Callback fired when the input value changes after each keypress, before clamping is applied.\nNote that event.target.value may contain values that fall outside of min and max or\nare otherwise "invalid"."
+ },
+ "readOnly": {
+ "description": "If true, the input element becomes read-only. The stepper buttons remain active,\nwith the addition that they are now keyboard focusable."
+ },
+ "required": {
+ "description": "If true, the input element is required.\nThe prop defaults to the value (false) inherited from the parent FormControl component."
+ },
+ "shiftMultiplier": {
+ "description": "Multiplier applied to step if the shift key is held while incrementing\nor decrementing the value. Defaults to 10."
+ },
+ "step": { "description": "The amount that the value changes on each increment or decrement." },
+ "value": { "description": "The current value. Use when the component is controlled." }
+ },
+ "returnValueDescriptions": {
+ "disabled": { "description": "If true, the component will be disabled." },
+ "error": {
+ "description": "If true, the input will indicate an error by setting the aria-invalid attribute."
+ },
+ "focused": { "description": "If true, the input will be focused." },
+ "formControlContext": {
+ "description": "Return value from the useFormControlContext hook."
+ },
+ "getDecrementButtonProps": {
+ "description": "Resolver for the decrement button slot's props."
+ },
+ "getIncrementButtonProps": {
+ "description": "Resolver for the increment button slot's props."
+ },
+ "getInputProps": { "description": "Resolver for the input slot's props." },
+ "getRootProps": { "description": "Resolver for the root slot's props." },
+ "inputValue": {
+ "description": "The dirty value of the input element when it is in focus."
+ },
+ "isDecrementDisabled": {
+ "description": "If true, the decrement button will be disabled.\ne.g. when the value is already at min"
+ },
+ "isIncrementDisabled": {
+ "description": "If true, the increment button will be disabled.\ne.g. when the value is already at max"
+ },
+ "required": {
+ "description": "If true, the input will indicate that it's required."
+ },
+ "value": { "description": "The clamped value of the input element." }
+ }
+}
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index e4cdd4d1e8ef6f..8e574f1b2f6c19 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -237,6 +237,7 @@
"/base-ui/react-button": "Button",
"/base-ui/react-checkbox": "Checkbox",
"/base-ui/react-input": "Input",
+ "/base-ui/react-number-input": "Number Input",
"/base-ui/react-radio-button": "Radio Button",
"/base-ui/react-rating": "Rating",
"/base-ui/react-select": "Select",
@@ -277,6 +278,7 @@
"/base-ui/react-menu/components-api/#menu-item": "MenuItem",
"/base-ui/react-modal/components-api/#modal": "Modal",
"/base-ui/react-no-ssr/components-api/#no-ssr": "NoSsr",
+ "/base-ui/react-number-input/components-api/#number-input": "NumberInput",
"/base-ui/react-select/components-api/#option": "Option",
"/base-ui/react-select/components-api/#option-group": "OptionGroup",
"/base-ui/react-popper/components-api/#popper": "Popper",
@@ -300,6 +302,7 @@
"/base-ui/react-menu/hooks-api/#use-menu": "useMenu",
"/base-ui/react-menu/hooks-api/#use-menu-button": "useMenuButton",
"/base-ui/react-menu/hooks-api/#use-menu-item": "useMenuItem",
+ "/base-ui/react-number-input/hooks-api/#use-number-input": "useNumberInput",
"/base-ui/react-select/hooks-api/#use-option": "useOption",
"/base-ui/react-select/hooks-api/#use-select": "useSelect",
"/base-ui/react-slider/hooks-api/#use-slider": "useSlider",
diff --git a/package.json b/package.json
index ebe6061728deb2..728f0121e3c8e3 100644
--- a/package.json
+++ b/package.json
@@ -97,6 +97,7 @@
"@slack/bolt": "^3.13.2",
"@testing-library/dom": "^9.3.1",
"@testing-library/react": "^14.0.0",
+ "@testing-library/user-event": "^14.4.3",
"@types/chai": "^4.3.5",
"@types/chai-dom": "^1.11.0",
"@types/enzyme": "^3.10.13",
diff --git a/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx b/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
new file mode 100644
index 00000000000000..fe8bb2f8b69c54
--- /dev/null
+++ b/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
@@ -0,0 +1,436 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import userEvent from '@testing-library/user-event';
+import { act, createMount, createRenderer, describeConformanceUnstyled } from 'test/utils';
+import NumberInput, {
+ numberInputClasses,
+ NumberInputOwnerState,
+} from '@mui/base/Unstable_NumberInput';
+
+describe('();
+ const { getByTestId } = render(
+ ) => {
+ return (
+
+ {children}
+
+ );
+ },
+ );
+
+ const slots = {
+ root: CustomComponent,
+ input: CustomComponent,
+ decrementButton: CustomComponent,
+ incrementButton: CustomComponent,
+ };
+
+ const { getAllByTestId } = render(,
+) {
+ const {
+ className,
+ defaultValue,
+ disabled,
+ error,
+ id,
+ max,
+ min,
+ onBlur,
+ onInputChange,
+ onFocus,
+ onChange,
+ placeholder,
+ required,
+ readOnly = false,
+ shiftMultiplier,
+ step,
+ value,
+ slotProps = {},
+ slots = {},
+ ...rest
+ } = props;
+
+ const {
+ getRootProps,
+ getInputProps,
+ getIncrementButtonProps,
+ getDecrementButtonProps,
+ focused,
+ error: errorState,
+ disabled: disabledState,
+ formControlContext,
+ isIncrementDisabled,
+ isDecrementDisabled,
+ } = useNumberInput({
+ min,
+ max,
+ step,
+ shiftMultiplier,
+ defaultValue,
+ disabled,
+ error,
+ onFocus,
+ onInputChange,
+ onBlur,
+ onChange,
+ required,
+ readOnly,
+ value,
+ inputId: id,
+ });
+
+ const ownerState: NumberInputOwnerState = {
+ ...props,
+ disabled: disabledState,
+ error: errorState,
+ focused,
+ readOnly,
+ formControlContext,
+ isIncrementDisabled,
+ isDecrementDisabled,
+ };
+
+ const classes = useUtilityClasses(ownerState);
+
+ const propsForwardedToInputSlot = {
+ placeholder,
+ };
+
+ const Root = slots.root ?? 'div';
+ const rootProps: WithOptionalOwnerState = useSlotProps({
+ elementType: Root,
+ getSlotProps: getRootProps,
+ externalSlotProps: slotProps.root,
+ externalForwardedProps: rest,
+ additionalProps: {
+ ref: forwardedRef,
+ },
+ ownerState,
+ className: [classes.root, className],
+ });
+
+ const Input = slots.input ?? 'input';
+ const inputProps: WithOptionalOwnerState = useSlotProps({
+ elementType: Input,
+ getSlotProps: (otherHandlers: EventHandlers) =>
+ getInputProps({ ...otherHandlers, ...propsForwardedToInputSlot }),
+ externalSlotProps: slotProps.input,
+ ownerState,
+ className: classes.input,
+ });
+
+ const IncrementButton = slots.incrementButton ?? 'button';
+ const incrementButtonProps: WithOptionalOwnerState =
+ useSlotProps({
+ elementType: IncrementButton,
+ getSlotProps: getIncrementButtonProps,
+ externalSlotProps: slotProps.incrementButton,
+ ownerState,
+ className: classes.incrementButton,
+ });
+
+ const DecrementButton = slots.decrementButton ?? 'button';
+ const decrementButtonProps: WithOptionalOwnerState =
+ useSlotProps({
+ elementType: DecrementButton,
+ getSlotProps: getDecrementButtonProps,
+ externalSlotProps: slotProps.decrementButton,
+ ownerState,
+ className: classes.decrementButton,
+ });
+
+ return (
+
+
+ );
+}) as OverridableComponent;
+
+NumberInput.propTypes /* remove-proptypes */ = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit TypeScript types and run "yarn proptypes" |
+ // ----------------------------------------------------------------------
+ /**
+ * @ignore
+ */
+ children: PropTypes.node,
+ /**
+ * @ignore
+ */
+ className: PropTypes.string,
+ /**
+ * The default value. Use when the component is not controlled.
+ */
+ defaultValue: PropTypes.any,
+ /**
+ * If `true`, the component is disabled.
+ * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+ */
+ disabled: PropTypes.bool,
+ /**
+ * If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute on the input and the `Mui-error` class on the root element.
+ */
+ error: PropTypes.bool,
+ /**
+ * The id of the `input` element.
+ */
+ id: PropTypes.string,
+ /**
+ * The maximum value.
+ */
+ max: PropTypes.number,
+ /**
+ * The minimum value.
+ */
+ min: PropTypes.number,
+ /**
+ * @ignore
+ */
+ onBlur: PropTypes.func,
+ /**
+ * Callback fired after the value is clamped and changes - when the `input` is blurred or when
+ * the stepper buttons are triggered.
+ * Called with `undefined` when the value is unset.
+ *
+ * @param {React.FocusEvent|React.PointerEvent|React.KeyboardEvent} event The event source of the callback
+ * @param {number|undefined} value The new value of the component
+ */
+ onChange: PropTypes.func,
+ /**
+ * @ignore
+ */
+ onFocus: PropTypes.func,
+ /**
+ * Callback fired when the `input` value changes after each keypress, before clamping is applied.
+ * Note that `event.target.value` may contain values that fall outside of `min` and `max` or
+ * are otherwise "invalid".
+ *
+ * @param {React.ChangeEvent} event The event source of the callback.
+ */
+ onInputChange: PropTypes.func,
+ /**
+ * @ignore
+ */
+ placeholder: PropTypes.string,
+ /**
+ * If `true`, the `input` element becomes read-only. The stepper buttons remain active,
+ * with the addition that they are now keyboard focusable.
+ * @default false
+ */
+ readOnly: PropTypes.bool,
+ /**
+ * If `true`, the `input` element is required.
+ * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+ */
+ required: PropTypes.bool,
+ /**
+ * Multiplier applied to `step` if the shift key is held while incrementing
+ * or decrementing the value. Defaults to `10`.
+ */
+ shiftMultiplier: PropTypes.number,
+ /**
+ * The props used for each slot inside the NumberInput.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ decrementButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ incrementButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside the InputBase.
+ * Either a string to use a HTML element or a component.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ decrementButton: PropTypes.elementType,
+ incrementButton: PropTypes.elementType,
+ input: PropTypes.elementType,
+ root: PropTypes.elementType,
+ }),
+ /**
+ * The amount that the value changes on each increment or decrement.
+ */
+ step: PropTypes.number,
+ /**
+ * The current value. Use when the component is controlled.
+ */
+ value: PropTypes.any,
+} as any;
+
+export default NumberInput;
diff --git a/packages/mui-base/src/Unstable_NumberInput/NumberInput.types.ts b/packages/mui-base/src/Unstable_NumberInput/NumberInput.types.ts
new file mode 100644
index 00000000000000..513ba18a0a3b1d
--- /dev/null
+++ b/packages/mui-base/src/Unstable_NumberInput/NumberInput.types.ts
@@ -0,0 +1,104 @@
+import { Simplify } from '@mui/types';
+import { FormControlState } from '../FormControl';
+import {
+ UseNumberInputParameters,
+ UseNumberInputRootSlotProps,
+ UseNumberInputIncrementButtonSlotProps,
+ UseNumberInputDecrementButtonSlotProps,
+} from '../unstable_useNumberInput/useNumberInput.types';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
+
+export interface NumberInputRootSlotPropsOverrides {}
+export interface NumberInputInputSlotPropsOverrides {}
+export interface NumberInputStepperButtonSlotPropsOverrides {}
+
+export type NumberInputOwnProps = Omit & {
+ /**
+ * If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute on the input and the `Mui-error` class on the root element.
+ */
+ error?: boolean;
+ /**
+ * The id of the `input` element.
+ */
+ id?: string;
+ /**
+ * The props used for each slot inside the NumberInput.
+ * @default {}
+ */
+ slotProps?: {
+ root?: SlotComponentProps<'div', NumberInputRootSlotPropsOverrides, NumberInputOwnerState>;
+ input?: SlotComponentProps<'input', NumberInputInputSlotPropsOverrides, NumberInputOwnerState>;
+ incrementButton?: SlotComponentProps<
+ 'button',
+ NumberInputStepperButtonSlotPropsOverrides,
+ NumberInputOwnerState
+ >;
+ decrementButton?: SlotComponentProps<
+ 'button',
+ NumberInputStepperButtonSlotPropsOverrides,
+ NumberInputOwnerState
+ >;
+ };
+ /**
+ * The components used for each slot inside the InputBase.
+ * Either a string to use a HTML element or a component.
+ * @default {}
+ */
+ slots?: {
+ root?: React.ElementType;
+ input?: React.ElementType;
+ incrementButton?: React.ElementType;
+ decrementButton?: React.ElementType;
+ };
+};
+
+export interface NumberInputTypeMap<
+ AdditionalProps = {},
+ RootComponentType extends React.ElementType = 'div',
+> {
+ props: AdditionalProps & NumberInputOwnProps;
+ defaultComponent: RootComponentType;
+}
+
+export type NumberInputProps<
+ RootComponentType extends React.ElementType = NumberInputTypeMap['defaultComponent'],
+> = PolymorphicProps, RootComponentType>;
+
+export type NumberInputOwnerState = Simplify<
+ NumberInputOwnProps & {
+ formControlContext: FormControlState | undefined;
+ focused: boolean;
+ isIncrementDisabled: boolean;
+ isDecrementDisabled: boolean;
+ }
+>;
+
+export type NumberInputRootSlotProps = Simplify<
+ UseNumberInputRootSlotProps & {
+ ownerState: NumberInputOwnerState;
+ className?: string;
+ children?: React.ReactNode;
+ ref?: React.Ref;
+ }
+>;
+
+export type NumberInputInputSlotProps = Simplify<
+ Omit & {
+ id: string | undefined;
+ ownerState: NumberInputOwnerState;
+ placeholder: string | undefined;
+ ref: React.Ref;
+ }
+>;
+
+export type NumberInputIncrementButtonSlotProps = Simplify<
+ UseNumberInputIncrementButtonSlotProps & {
+ ownerState: NumberInputOwnerState;
+ }
+>;
+
+export type NumberInputDecrementButtonSlotProps = Simplify<
+ UseNumberInputDecrementButtonSlotProps & {
+ ownerState: NumberInputOwnerState;
+ }
+>;
diff --git a/packages/mui-base/src/Unstable_NumberInput/index.ts b/packages/mui-base/src/Unstable_NumberInput/index.ts
new file mode 100644
index 00000000000000..b83be49446103e
--- /dev/null
+++ b/packages/mui-base/src/Unstable_NumberInput/index.ts
@@ -0,0 +1,7 @@
+'use client';
+export { default } from './NumberInput';
+
+export { default as numberInputClasses } from './numberInputClasses';
+export * from './numberInputClasses';
+
+export * from './NumberInput.types';
diff --git a/packages/mui-base/src/Unstable_NumberInput/numberInputClasses.ts b/packages/mui-base/src/Unstable_NumberInput/numberInputClasses.ts
new file mode 100644
index 00000000000000..e7373f4cc8efa0
--- /dev/null
+++ b/packages/mui-base/src/Unstable_NumberInput/numberInputClasses.ts
@@ -0,0 +1,49 @@
+import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '../generateUtilityClasses';
+
+export interface NumberInputClasses {
+ /** Class name applied to the root element. */
+ root: string;
+ /** Class name applied to the root element if the component is a descendant of `FormControl`. */
+ formControl: string;
+ /** Class name applied to the root element if `startAdornment` is provided. */
+ // TODO: adornedStart: string;
+ /** Class name applied to the root element if `endAdornment` is provided. */
+ // TODO: adornedEnd: string;
+ /** Class name applied to the root element if the component is focused. */
+ focused: string;
+ /** Class name applied to the root element if `disabled={true}`. */
+ disabled: string;
+ /** State class applied to the root element if `readOnly={true}`. */
+ readOnly: string;
+ /** State class applied to the root element if `error={true}`. */
+ error: string;
+ /** Class name applied to the input element. */
+ input: string;
+ /** Class name applied to the increment button element. */
+ incrementButton: string;
+ /** Class name applied to the decrement button element. */
+ decrementButton: string;
+}
+
+export type NumberInputClassKey = keyof NumberInputClasses;
+
+export function getNumberInputUtilityClass(slot: string): string {
+ return generateUtilityClass('MuiNumberInput', slot);
+}
+
+const numberInputClasses: NumberInputClasses = generateUtilityClasses('MuiNumberInput', [
+ 'root',
+ 'formControl',
+ 'focused',
+ 'disabled',
+ 'readOnly',
+ 'error',
+ 'input',
+ 'incrementButton',
+ 'decrementButton',
+ // 'adornedStart',
+ // 'adornedEnd',
+]);
+
+export default numberInputClasses;
diff --git a/packages/mui-base/src/index.d.ts b/packages/mui-base/src/index.d.ts
index ea9553b3d37094..8be49ed6cf0f8c 100644
--- a/packages/mui-base/src/index.d.ts
+++ b/packages/mui-base/src/index.d.ts
@@ -38,6 +38,9 @@ export * from './Modal';
export { default as NoSsr } from './NoSsr';
+export { default as Unstable_NumberInput } from './Unstable_NumberInput';
+export * from './Unstable_NumberInput';
+
export { default as OptionGroup } from './OptionGroup';
export * from './OptionGroup';
@@ -104,6 +107,9 @@ export * from './useMenuButton';
export { default as useMenuItem } from './useMenuItem';
export * from './useMenuItem';
+export { default as unstable_useNumberInput } from './unstable_useNumberInput';
+export * from './unstable_useNumberInput';
+
export { default as useOption } from './useOption';
export * from './useOption';
diff --git a/packages/mui-base/src/index.js b/packages/mui-base/src/index.js
index 4535ace2218e14..b7ad15d40d5940 100644
--- a/packages/mui-base/src/index.js
+++ b/packages/mui-base/src/index.js
@@ -35,6 +35,9 @@ export * from './Modal';
export { default as NoSsr } from './NoSsr';
+export { default as Unstable_NumberInput } from './Unstable_NumberInput';
+export * from './Unstable_NumberInput';
+
export { default as OptionGroup } from './OptionGroup';
export * from './OptionGroup';
@@ -97,6 +100,9 @@ export * from './useMenuButton';
export { default as useMenuItem } from './useMenuItem';
export * from './useMenuItem';
+export { default as unstable_useNumberInput } from './unstable_useNumberInput';
+export * from './unstable_useNumberInput';
+
export { default as useOption } from './useOption';
export * from './useOption';
diff --git a/packages/mui-base/src/unstable_useNumberInput/index.ts b/packages/mui-base/src/unstable_useNumberInput/index.ts
new file mode 100644
index 00000000000000..6984f2df6e29b2
--- /dev/null
+++ b/packages/mui-base/src/unstable_useNumberInput/index.ts
@@ -0,0 +1,4 @@
+'use client';
+export { default } from './useNumberInput';
+
+export * from './useNumberInput.types';
diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx
new file mode 100644
index 00000000000000..d8b5de3b45351e
--- /dev/null
+++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx
@@ -0,0 +1,274 @@
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { createRenderer, screen } from 'test/utils';
+import useNumberInput, { UseNumberInputParameters } from './index';
+
+describe('useNumberInput', () => {
+ const { render } = createRenderer();
+ const invokeUseNumberInput = (props: UseNumberInputParameters) => {
+ const ref = React.createRef>();
+ function TestComponent() {
+ const numberInputDefinition = useNumberInput(props);
+ React.useImperativeHandle(ref, () => numberInputDefinition, [numberInputDefinition]);
+ return null;
+ }
+
+ render((null);
+ const handleInputRef = useForkRef(inputRef, inputRefProp, handleInputRefWarning);
+
+ const inputId = useId(inputIdProp);
+
+ const [focused, setFocused] = React.useState(false);
+
+ // the "final" value
+ const [value, setValue] = React.useState(valueProp ?? defaultValueProp);
+ // the (potentially) dirty or invalid input value
+ const [dirtyValue, setDirtyValue] = React.useState(
+ value ? String(value) : undefined,
+ );
+
+ React.useEffect(() => {
+ if (!formControlContext && disabledProp && focused) {
+ setFocused(false);
+
+ onBlur?.();
+ }
+ }, [formControlContext, disabledProp, focused, onBlur]);
+
+ const handleFocus =
+ (otherHandlers: Record | undefined>) =>
+ (event: React.FocusEvent) => {
+ otherHandlers.onFocus?.(event);
+
+ if (event.defaultPrevented) {
+ return;
+ }
+
+ if (formControlContext && formControlContext.onFocus) {
+ formControlContext?.onFocus?.();
+ }
+ setFocused(true);
+ };
+
+ const handleValueChange =
+ () =>
+ (
+ event: React.FocusEvent | React.PointerEvent | React.KeyboardEvent,
+ val: number | undefined,
+ ) => {
+ let newValue;
+
+ if (val === undefined) {
+ newValue = val;
+ setDirtyValue('');
+ } else {
+ newValue = clamp(val, min, max, step);
+ setDirtyValue(String(newValue));
+ }
+
+ setValue(newValue);
+
+ if (isNumber(newValue)) {
+ onChange?.(event, newValue);
+ } else {
+ onChange?.(event, undefined);
+ }
+ };
+
+ const handleInputChange =
+ (otherHandlers: Record | undefined>) =>
+ (event: React.ChangeEvent) => {
+ if (!isControlled && event.target === null) {
+ throw new MuiError(
+ 'MUI: Expected valid input target. ' +
+ 'Did you use a custom `slots.input` and forget to forward refs? ' +
+ 'See https://mui.com/r/input-component-ref-interface for more info.',
+ );
+ }
+
+ formControlContext?.onChange?.(event);
+
+ otherHandlers.onInputChange?.(event);
+
+ const val = parseInput(event.currentTarget.value);
+
+ if (val === '' || val === '-') {
+ setDirtyValue(val);
+ setValue(undefined);
+ }
+
+ if (val.match(/^-?\d+?$/)) {
+ setDirtyValue(val);
+ setValue(parseInt(val, 10));
+ }
+ };
+
+ const handleBlur =
+ (otherHandlers: Record | undefined>) =>
+ (event: React.FocusEvent) => {
+ const val = parseInput(event.currentTarget.value);
+
+ otherHandlers.onBlur?.(event);
+
+ if (val === '' || val === '-') {
+ handleValueChange()(event, undefined);
+ } else {
+ handleValueChange()(event, parseInt(val, 10));
+ }
+
+ if (formControlContext && formControlContext.onBlur) {
+ formControlContext.onBlur();
+ }
+
+ setFocused(false);
+ };
+
+ const handleClick =
+ (otherHandlers: Record>) =>
+ (event: React.MouseEvent) => {
+ if (inputRef.current && event.currentTarget === event.target) {
+ inputRef.current.focus();
+ }
+
+ otherHandlers.onClick?.(event);
+ };
+
+ const handleStep =
+ (direction: StepDirection) => (event: React.PointerEvent | React.KeyboardEvent) => {
+ let newValue;
+
+ if (isNumber(value)) {
+ const multiplier =
+ event.shiftKey ||
+ (event as React.KeyboardEvent).key === 'PageUp' ||
+ (event as React.KeyboardEvent).key === 'PageDown'
+ ? shiftMultiplier
+ : 1;
+ newValue = {
+ up: value + (step ?? 1) * multiplier,
+ down: value - (step ?? 1) * multiplier,
+ }[direction];
+ } else {
+ // no value
+ newValue = {
+ up: min ?? 0,
+ down: max ?? 0,
+ }[direction];
+ }
+ handleValueChange()(event, newValue);
+ };
+
+ const handleKeyDown =
+ (otherHandlers: Record | undefined>) =>
+ (event: React.KeyboardEvent) => {
+ otherHandlers.onKeyDown?.(event);
+
+ if (event.defaultPrevented) {
+ return;
+ }
+
+ if (SUPPORTED_KEYS.includes(event.key)) {
+ event.preventDefault();
+ }
+
+ if (STEP_KEYS.includes(event.key)) {
+ const direction = {
+ ArrowUp: 'up',
+ ArrowDown: 'down',
+ PageUp: 'up',
+ PageDown: 'down',
+ }[event.key] as StepDirection;
+
+ handleStep(direction)(event);
+ }
+
+ if (event.key === 'Home' && isNumber(max)) {
+ handleValueChange()(event, max);
+ }
+
+ if (event.key === 'End' && isNumber(min)) {
+ handleValueChange()(event, min);
+ }
+ };
+
+ const getRootProps = = {}>(
+ externalProps: TOther = {} as TOther,
+ ): UseNumberInputRootSlotProps => {
+ const propsEventHandlers = extractEventHandlers(parameters, [
+ 'onBlur',
+ 'onInputChange',
+ 'onFocus',
+ 'onChange',
+ ]);
+
+ const externalEventHandlers = { ...propsEventHandlers, ...extractEventHandlers(externalProps) };
+
+ return {
+ ...externalProps,
+ ...externalEventHandlers,
+ onClick: handleClick(externalEventHandlers),
+ };
+ };
+
+ const getInputProps = = {}>(
+ externalProps: TOther = {} as TOther,
+ ): UseNumberInputInputSlotProps => {
+ const externalEventHandlers = {
+ onBlur,
+ onFocus,
+ ...extractEventHandlers(externalProps, ['onInputChange']),
+ };
+
+ const mergedEventHandlers = {
+ ...externalProps,
+ ...externalEventHandlers,
+ onFocus: handleFocus(externalEventHandlers),
+ onChange: handleInputChange({ ...externalEventHandlers, onInputChange }),
+ onBlur: handleBlur(externalEventHandlers),
+ onKeyDown: handleKeyDown(externalEventHandlers),
+ };
+
+ const displayValue = (focused ? dirtyValue : value) ?? '';
+
+ return {
+ ...mergedEventHandlers,
+ type: 'text',
+ id: inputId,
+ 'aria-invalid': errorProp || undefined,
+ defaultValue: undefined,
+ ref: handleInputRef,
+ value: displayValue as number | undefined,
+ 'aria-valuenow': displayValue as number | undefined,
+ 'aria-valuetext': String(displayValue),
+ 'aria-valuemin': min,
+ 'aria-valuemax': max,
+ autoComplete: 'off',
+ autoCorrect: 'off',
+ spellCheck: 'false',
+ required: requiredProp,
+ readOnly: readOnlyProp,
+ 'aria-disabled': disabledProp,
+ disabled: disabledProp,
+ };
+ };
+
+ const handleStepperButtonMouseDown = (event: React.PointerEvent) => {
+ event.preventDefault();
+
+ if (inputRef.current) {
+ inputRef.current.focus();
+ }
+ };
+
+ const stepperButtonCommonProps = {
+ 'aria-controls': inputId,
+ tabIndex: -1,
+ };
+
+ const isIncrementDisabled =
+ disabledProp || (isNumber(value) ? value >= (max ?? Number.MAX_SAFE_INTEGER) : false);
+
+ const getIncrementButtonProps = = {}>(
+ externalProps: TOther = {} as TOther,
+ ): UseNumberInputIncrementButtonSlotProps => {
+ return {
+ ...externalProps,
+ ...stepperButtonCommonProps,
+ disabled: isIncrementDisabled,
+ 'aria-disabled': isIncrementDisabled,
+ onMouseDown: handleStepperButtonMouseDown,
+ onClick: handleStep('up'),
+ };
+ };
+
+ const isDecrementDisabled =
+ disabledProp || (isNumber(value) ? value <= (min ?? Number.MIN_SAFE_INTEGER) : false);
+
+ const getDecrementButtonProps = = {}>(
+ externalProps: TOther = {} as TOther,
+ ): UseNumberInputDecrementButtonSlotProps => {
+ return {
+ ...externalProps,
+ ...stepperButtonCommonProps,
+ disabled: isDecrementDisabled,
+ 'aria-disabled': isDecrementDisabled,
+ onMouseDown: handleStepperButtonMouseDown,
+ onClick: handleStep('down'),
+ };
+ };
+
+ return {
+ disabled: disabledProp,
+ error: errorProp,
+ focused,
+ formControlContext,
+ getInputProps,
+ getIncrementButtonProps,
+ getDecrementButtonProps,
+ getRootProps,
+ required: requiredProp,
+ value: focused ? dirtyValue : value,
+ isIncrementDisabled,
+ isDecrementDisabled,
+ inputValue: dirtyValue,
+ };
+}
diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.types.ts b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.types.ts
new file mode 100644
index 00000000000000..6415fc75732421
--- /dev/null
+++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.types.ts
@@ -0,0 +1,227 @@
+import * as React from 'react';
+import { FormControlState } from '../FormControl';
+
+export type UseNumberInputChangeHandler = (
+ e: React.KeyboardEvent,
+ value: number | null,
+) => void;
+
+export interface UseNumberInputParameters {
+ /**
+ * The minimum value.
+ */
+ min?: number;
+ /**
+ * The maximum value.
+ */
+ max?: number;
+ /**
+ * The amount that the value changes on each increment or decrement.
+ */
+ step?: number;
+ /**
+ * Multiplier applied to `step` if the shift key is held while incrementing
+ * or decrementing the value. Defaults to `10`.
+ */
+ shiftMultiplier?: number;
+ /**
+ * The default value. Use when the component is not controlled.
+ */
+ defaultValue?: unknown;
+ /**
+ * If `true`, the component is disabled.
+ * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+ */
+ disabled?: boolean;
+ /**
+ * If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute.
+ * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+ */
+ error?: boolean;
+ onBlur?: (event?: React.FocusEvent) => void;
+ onClick?: React.MouseEventHandler;
+ /**
+ * Callback fired when the `input` value changes after each keypress, before clamping is applied.
+ * Note that `event.target.value` may contain values that fall outside of `min` and `max` or
+ * are otherwise "invalid".
+ *
+ * @param {React.ChangeEvent} event The event source of the callback.
+ */
+ onInputChange?: React.ChangeEventHandler;
+ onFocus?: React.FocusEventHandler;
+ /**
+ * Callback fired after the value is clamped and changes - when the `input` is blurred or when
+ * the stepper buttons are triggered.
+ * Called with `undefined` when the value is unset.
+ *
+ * @param {React.FocusEvent|React.PointerEvent|React.KeyboardEvent} event The event source of the callback
+ * @param {number|undefined} value The new value of the component
+ */
+ onChange?: (
+ event: React.FocusEvent | React.PointerEvent | React.KeyboardEvent,
+ value: number | undefined,
+ ) => void;
+ /**
+ * The `id` attribute of the input element.
+ */
+ inputId?: string;
+ /**
+ * The ref of the input element.
+ */
+ inputRef?: React.Ref;
+ /**
+ * If `true`, the `input` element is required.
+ * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+ */
+ required?: boolean;
+ /**
+ * If `true`, the `input` element becomes read-only. The stepper buttons remain active,
+ * with the addition that they are now keyboard focusable.
+ * @default false
+ */
+ readOnly?: boolean;
+ /**
+ * The current value. Use when the component is controlled.
+ */
+ value?: unknown;
+}
+
+export interface UseNumberInputRootSlotOwnProps {
+ onClick: React.MouseEventHandler | undefined;
+}
+
+export type UseNumberInputRootSlotProps = Omit<
+ TOther,
+ keyof UseNumberInputRootSlotOwnProps | 'onBlur' | 'onInputChange' | 'onFocus'
+> &
+ UseNumberInputRootSlotOwnProps;
+
+export interface UseNumberInputInputSlotOwnProps {
+ defaultValue: number | undefined;
+ id: string | undefined;
+ ref: React.RefCallback | null;
+ value: number | undefined;
+ role?: React.AriaRole;
+ 'aria-disabled': React.AriaAttributes['aria-disabled'];
+ 'aria-valuemax': React.AriaAttributes['aria-valuemax'];
+ 'aria-valuemin': React.AriaAttributes['aria-valuemin'];
+ 'aria-valuenow': React.AriaAttributes['aria-valuenow'];
+ 'aria-valuetext': React.AriaAttributes['aria-valuetext'];
+ tabIndex?: number;
+ onBlur: React.FocusEventHandler;
+ onChange: React.ChangeEventHandler;
+ onFocus: React.FocusEventHandler;
+ required: boolean;
+ disabled: boolean;
+}
+
+export type UseNumberInputInputSlotProps = Omit<
+ TOther,
+ keyof UseNumberInputInputSlotOwnProps
+> &
+ UseNumberInputInputSlotOwnProps;
+
+export interface UseNumberInputIncrementButtonSlotOwnProps {
+ 'aria-controls': React.AriaAttributes['aria-controls'];
+ 'aria-disabled': React.AriaAttributes['aria-disabled'];
+ disabled: boolean;
+ tabIndex?: number;
+}
+
+export type UseNumberInputIncrementButtonSlotProps = Omit<
+ TOther,
+ keyof UseNumberInputIncrementButtonSlotOwnProps
+> &
+ UseNumberInputIncrementButtonSlotOwnProps;
+
+export interface UseNumberInputDecrementButtonSlotOwnProps {
+ 'aria-controls': React.AriaAttributes['aria-controls'];
+ 'aria-disabled': React.AriaAttributes['aria-disabled'];
+ disabled: boolean;
+ tabIndex?: number;
+}
+
+export type UseNumberInputDecrementButtonSlotProps = Omit<
+ TOther,
+ keyof UseNumberInputDecrementButtonSlotOwnProps
+> &
+ UseNumberInputDecrementButtonSlotOwnProps;
+
+export interface UseNumberInputReturnValue {
+ /**
+ * If `true`, the component will be disabled.
+ * @default false
+ */
+ disabled: boolean;
+ /**
+ * If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute.
+ * @default false
+ */
+ error: boolean;
+ /**
+ * If `true`, the `input` will be focused.
+ * @default false
+ */
+ focused: boolean;
+ /**
+ * Return value from the `useFormControlContext` hook.
+ */
+ formControlContext: FormControlState | undefined;
+ /**
+ * Resolver for the decrement button slot's props.
+ * @param externalProps props for the decrement button slot
+ * @returns props that should be spread on the decrement button slot
+ */
+ getDecrementButtonProps: = {}>(
+ externalProps?: TOther,
+ ) => UseNumberInputDecrementButtonSlotProps;
+ /**
+ * Resolver for the increment button slot's props.
+ * @param externalProps props for the increment button slot
+ * @returns props that should be spread on the increment button slot
+ */
+ getIncrementButtonProps: = {}>(
+ externalProps?: TOther,
+ ) => UseNumberInputIncrementButtonSlotProps;
+ /**
+ * Resolver for the input slot's props.
+ * @param externalProps props for the input slot
+ * @returns props that should be spread on the input slot
+ */
+ getInputProps: = {}>(
+ externalProps?: TOther,
+ ) => UseNumberInputInputSlotProps;
+ /**
+ * Resolver for the root slot's props.
+ * @param externalProps props for the root slot
+ * @returns props that should be spread on the root slot
+ */
+ getRootProps: = {}>(
+ externalProps?: TOther,
+ ) => UseNumberInputRootSlotProps;
+ /**
+ * If `true`, the `input` will indicate that it's required.
+ * @default false
+ */
+ required: boolean;
+ /**
+ * The clamped `value` of the `input` element.
+ */
+ value: unknown;
+ /**
+ * The dirty `value` of the `input` element when it is in focus.
+ */
+ inputValue: string | undefined;
+ /**
+ * If `true`, the increment button will be disabled.
+ * e.g. when the `value` is already at `max`
+ * @default false
+ */
+ isIncrementDisabled: boolean;
+ /**
+ * If `true`, the decrement button will be disabled.
+ * e.g. when the `value` is already at `min`
+ * @default false
+ */
+ isDecrementDisabled: boolean;
+}
diff --git a/packages/mui-base/src/unstable_useNumberInput/utils.test.ts b/packages/mui-base/src/unstable_useNumberInput/utils.test.ts
new file mode 100644
index 00000000000000..213294e133bf95
--- /dev/null
+++ b/packages/mui-base/src/unstable_useNumberInput/utils.test.ts
@@ -0,0 +1,50 @@
+import { expect } from 'chai';
+import { clamp, isNumber } from './utils';
+
+describe('utils', () => {
+ it('clamp: clamps a value based on min and max', () => {
+ expect(clamp(1, 2, 4)).to.equal(2);
+ expect(clamp(5, 2, 4)).to.equal(4);
+ expect(clamp(-5, -1, 5)).to.equal(-1);
+ });
+
+ it('clamp: clamps a value between min and max and on a valid step', () => {
+ expect(clamp(2, -15, 15, 3)).to.equal(3);
+ expect(clamp(-1, -15, 15, 3)).to.equal(0);
+ expect(clamp(5, -15, 15, 3)).to.equal(6);
+ expect(clamp(-5, -15, 15, 3)).to.equal(-6);
+ expect(clamp(-55, -15, 15, 3)).to.equal(-15);
+ expect(clamp(57, -15, 15, 3)).to.equal(15);
+ expect(clamp(3, -20, 20, 5)).to.equal(5);
+ expect(clamp(2, -20, 20, 5)).to.equal(0);
+ expect(clamp(8, -20, 20, 5)).to.equal(10);
+ expect(clamp(-7, -20, 20, 5)).to.equal(-5);
+ });
+
+ it('isNumber: rejects NaN', () => {
+ expect(isNumber(NaN)).to.equal(false);
+ });
+
+ it('isNumber: rejects Infinity', () => {
+ expect(isNumber(Infinity)).to.equal(false);
+ expect(isNumber(-Infinity)).to.equal(false);
+ });
+
+ it('isNumber: rejects falsy values', () => {
+ expect(isNumber('')).to.equal(false);
+ expect(isNumber(undefined)).to.equal(false);
+ expect(isNumber(null)).to.equal(false);
+ });
+
+ it('isNumber: accepts positive and negative integers', () => {
+ expect(isNumber(10)).to.equal(true);
+ expect(isNumber(7)).to.equal(true);
+ expect(isNumber(-20)).to.equal(true);
+ expect(isNumber(-333)).to.equal(true);
+ });
+
+ it('isNumber: accepts 0', () => {
+ expect(isNumber(0)).to.equal(true);
+ expect(isNumber(-0)).to.equal(true);
+ });
+});
diff --git a/packages/mui-base/src/unstable_useNumberInput/utils.ts b/packages/mui-base/src/unstable_useNumberInput/utils.ts
new file mode 100644
index 00000000000000..c20907be5b683a
--- /dev/null
+++ b/packages/mui-base/src/unstable_useNumberInput/utils.ts
@@ -0,0 +1,34 @@
+function simpleClamp(
+ val: number,
+ min: number = Number.MIN_SAFE_INTEGER,
+ max: number = Number.MAX_SAFE_INTEGER,
+): number {
+ return Math.max(min, Math.min(val, max));
+}
+
+export function clamp(
+ val: number,
+ min: number = Number.MIN_SAFE_INTEGER,
+ max: number = Number.MAX_SAFE_INTEGER,
+ stepProp: number = NaN,
+): number {
+ if (Number.isNaN(stepProp)) {
+ return simpleClamp(val, min, max);
+ }
+
+ const step = stepProp || 1;
+
+ const remainder = val % step;
+
+ const positivity = Math.sign(remainder);
+
+ if (Math.abs(remainder) > step / 2) {
+ return simpleClamp(val + positivity * (step - Math.abs(remainder)), min, max);
+ }
+
+ return simpleClamp(val - positivity * Math.abs(remainder), min, max);
+}
+
+export function isNumber(val: unknown): val is number {
+ return typeof val === 'number' && !Number.isNaN(val) && Number.isFinite(val);
+}
diff --git a/packages/mui-utils/src/composeClasses/composeClasses.ts b/packages/mui-utils/src/composeClasses/composeClasses.ts
index cf049e73c5d15f..259ed7a05534c3 100644
--- a/packages/mui-utils/src/composeClasses/composeClasses.ts
+++ b/packages/mui-utils/src/composeClasses/composeClasses.ts
@@ -6,7 +6,7 @@ export default function composeClasses(
const output: Record = {} as any;
Object.keys(slots).forEach(
- // `Objet.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
+ // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
// @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
(slot: ClassKey) => {
output[slot] = slots[slot]
diff --git a/yarn.lock b/yarn.lock
index c8a83c3ce29895..49a89b40a7ae2d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2999,6 +2999,11 @@
"@testing-library/dom" "^9.0.0"
"@types/react-dom" "^18.0.0"
+"@testing-library/user-event@^14.4.3":
+ version "14.4.3"
+ resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591"
+ integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==
+
"@theme-ui/color-modes@^0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.16.0.tgz#7e137b7b17be56a4620e90d9a68d6c32cc97e92e"