[base-ui][useNumberInput] Integrate useNumberInput with useControllableReducer

docs/data/base/components/number-input/NumberInputBasic/system/index.js

@@ -29,7 +29,7 @@ const NumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
 });
 
 export default function NumberInputBasic() {
-  const [value, setValue] = React.useState();
+  const [value, setValue] = React.useState(null);
   return (
     <NumberInput
       aria-label="Demo number input"

docs/data/base/components/number-input/NumberInputBasic/system/index.tsx

@@ -33,7 +33,7 @@ const NumberInput = React.forwardRef(function CustomNumberInput(
 });
 
 export default function NumberInputBasic() {
-  const [value, setValue] = React.useState<number | undefined>();
+  const [value, setValue] = React.useState<number | null>(null);
   return (
     <NumberInput
       aria-label="Demo number input"

docs/data/base/components/number-input/NumberInputBasic/tailwind/index.js

@@ -4,7 +4,7 @@ import { Unstable_NumberInput as BaseNumberInput } from '@mui/base/Unstable_Numb
 import clsx from 'clsx';
 
 export default function NumberInputBasic() {
-  const [value, setValue] = React.useState();
+  const [value, setValue] = React.useState(null);
   return (
     <NumberInput
       aria-label="Demo number input"

docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx

@@ -7,7 +7,7 @@ import {
 import clsx from 'clsx';
 
 export default function NumberInputBasic() {
-  const [value, setValue] = React.useState<number | undefined>();
+  const [value, setValue] = React.useState<number | null>(null);
   return (
     <NumberInput
       aria-label="Demo number input"

docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js

@@ -4,7 +4,7 @@ import { Unstable_NumberInput as BaseNumberInput } from '@mui/base/Unstable_Numb
 import clsx from 'clsx';
 
 export default function NumberInputIntroduction() {
-  const [value, setValue] = React.useState();
+  const [value, setValue] = React.useState(null);
   return (
     <NumberInput
       aria-label="Demo number input"

docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx

@@ -7,7 +7,7 @@ import {
 import clsx from 'clsx';
 
 export default function NumberInputIntroduction() {
-  const [value, setValue] = React.useState<number | undefined>();
+  const [value, setValue] = React.useState<number | null>(null);
   return (
     <NumberInput
       aria-label="Demo number input"

docs/data/base/components/number-input/UseNumberInputCompact.js

@@ -31,7 +31,7 @@ const CompactNumberInput = React.forwardRef(function CompactNumberInput(props, r
 });
 
 export default function UseNumberInputCompact() {
-  const [value, setValue] = React.useState();
+  const [value, setValue] = React.useState(null);
 
   return (
     <Layout>

docs/data/base/components/number-input/UseNumberInputCompact.tsx

@@ -9,7 +9,7 @@ import ArrowDropUpRoundedIcon from '@mui/icons-material/ArrowDropUpRounded';
 import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
 
 const CompactNumberInput = React.forwardRef(function CompactNumberInput(
-  props: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> &
+  props: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> &
     UseNumberInputParameters,
   ref: React.ForwardedRef<HTMLInputElement>,
 ) {
@@ -38,7 +38,7 @@ const CompactNumberInput = React.forwardRef(function CompactNumberInput(
 });
 
 export default function UseNumberInputCompact() {
-  const [value, setValue] = React.useState<number | undefined>();
+  const [value, setValue] = React.useState<number | null>(null);
 
   return (
     <Layout>

docs/data/base/components/number-input/number-input.md

@@ -184,7 +184,7 @@ onChange: (
 ) => void;
 ```
 
-It's called when the `<input>` element is blurred, or when the stepper buttons are clicked, after the value has been clamped based on the [`min`, `max`](#minimum-and-maximum), or [`step`](#incremental-steps) props.
+It's called when the `<input>` element is blurred if the value has changed, or when the stepper buttons are clicked. This is after the value has been clamped based on the [`min`, `max`](#minimum-and-maximum), or [`step`](#incremental-steps) props.
 
 :::info
 When using the component, `onChange` can only be passed as a prop on the component—not through `slotProps`.

docs/pages/base-ui/api/number-input.json

@@ -1,6 +1,6 @@
 {
   "props": {
-    "defaultValue": { "type": { "name": "any" } },
+    "defaultValue": { "type": { "name": "number" } },
     "disabled": { "type": { "name": "bool" } },
     "endAdornment": { "type": { "name": "node" } },
     "error": { "type": { "name": "bool" } },
@@ -42,7 +42,7 @@
     },
     "startAdornment": { "type": { "name": "node" } },
     "step": { "type": { "name": "number" } },
-    "value": { "type": { "name": "number" } }
+    "value": { "type": { "name": "number" }, "default": "null" }
   },
   "name": "NumberInput",
   "imports": [

docs/pages/base-ui/api/use-number-input.json

@@ -1,6 +1,10 @@
 {
   "parameters": {
-    "defaultValue": { "type": { "name": "unknown", "description": "unknown" } },
+    "componentName": {
+      "type": { "name": "string", "description": "string" },
+      "default": "'useNumberInput'"
+    },
+    "defaultValue": { "type": { "name": "number | null", "description": "number | null" } },
     "disabled": { "type": { "name": "boolean", "description": "boolean" } },
     "error": { "type": { "name": "boolean", "description": "boolean" } },
     "inputId": { "type": { "name": "string", "description": "string" } },
@@ -20,8 +24,8 @@
     },
     "onChange": {
       "type": {
-        "name": "(event: React.FocusEvent<HTMLInputElement> | React.PointerEvent | React.KeyboardEvent, value: number | undefined) => void",
-        "description": "(event: React.FocusEvent<HTMLInputElement> | React.PointerEvent | React.KeyboardEvent, value: number | undefined) => void"
+        "name": "(event: React.FocusEvent<HTMLInputElement> | React.PointerEvent | React.KeyboardEvent, value: number | null) => void",
+        "description": "(event: React.FocusEvent<HTMLInputElement> | React.PointerEvent | React.KeyboardEvent, value: number | null) => void"
       }
     },
     "onClick": {
@@ -40,7 +44,10 @@
     "required": { "type": { "name": "boolean", "description": "boolean" } },
     "shiftMultiplier": { "type": { "name": "number", "description": "number" } },
     "step": { "type": { "name": "number", "description": "number" } },
-    "value": { "type": { "name": "number", "description": "number" } }
+    "value": {
+      "type": { "name": "number | null", "description": "number | null" },
+      "default": "null"
+    }
   },
   "returnValue": {
     "disabled": {
@@ -93,10 +100,7 @@
       },
       "required": true
     },
-    "inputValue": {
-      "type": { "name": "string | undefined", "description": "string | undefined" },
-      "required": true
-    },
+    "inputValue": { "type": { "name": "string", "description": "string" }, "required": true },
     "isDecrementDisabled": {
       "type": { "name": "boolean", "description": "boolean" },
       "default": "false",
@@ -112,7 +116,10 @@
       "default": "false",
       "required": true
     },
-    "value": { "type": { "name": "unknown", "description": "unknown" }, "required": true }
+    "value": {
+      "type": { "name": "number | null", "description": "number | null" },
+      "required": true
+    }
   },
   "name": "useNumberInput",
   "filename": "/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts",

docs/translations/api-docs/use-number-input/use-number-input.json

@@ -1,6 +1,9 @@
 {
   "hookDescription": "",
   "parametersDescriptions": {
+    "componentName": {
+      "description": "The name of the component using useNumberInput. For debugging purposes."
+    },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
     },

packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx

@@ -497,32 +497,64 @@ describe('<NumberInput />', () => {
       expect(input.value).to.equal('1');
     });
 
-    it('sets value to min when the input has no value and ArrowUp is pressed', async () => {
-      const handleChange = spy();
+    describe('when the input has no value and ArrowUp is pressed', () => {
+      it('sets value to min if min is provided', async () => {
+        const handleChange = spy();
 
-      const { getByRole } = render(<NumberInput min={5} onChange={handleChange} />);
+        const { getByRole } = render(<NumberInput min={5} onChange={handleChange} />);
 
-      const input = getByRole('textbox') as HTMLInputElement;
+        const input = getByRole('textbox') as HTMLInputElement;
 
-      await userEvent.click(input);
-      await userEvent.keyboard('[ArrowUp]');
+        await userEvent.click(input);
+        await userEvent.keyboard('[ArrowUp]');
+
+        expect(handleChange.args[0][1]).to.equal(5);
+        expect(input.value).to.equal('5');
+      });
+
+      it('sets value to 1 if min is not provided', async () => {
+        const handleChange = spy();
+
+        const { getByRole } = render(<NumberInput onChange={handleChange} />);
 
-      expect(handleChange.args[0][1]).to.equal(5);
-      expect(input.value).to.equal('5');
+        const input = getByRole('textbox') as HTMLInputElement;
+
+        await userEvent.click(input);
+        await userEvent.keyboard('[ArrowUp]');
+
+        expect(handleChange.args[0][1]).to.equal(1);
+        expect(input.value).to.equal('1');
+      });
     });
 
-    it('sets value to max when the input has no value and ArrowDown is pressed', async () => {
-      const handleChange = spy();
+    describe('when the input has no value and ArrowDown is pressed', () => {
+      it('sets value to max when max is provided', async () => {
+        const handleChange = spy();
 
-      const { getByRole } = render(<NumberInput max={9} onChange={handleChange} />);
+        const { getByRole } = render(<NumberInput max={9} onChange={handleChange} />);
 
-      const input = getByRole('textbox') as HTMLInputElement;
+        const input = getByRole('textbox') as HTMLInputElement;
 
-      await userEvent.click(input);
-      await userEvent.keyboard('[ArrowDown]');
+        await userEvent.click(input);
+        await userEvent.keyboard('[ArrowDown]');
 
-      expect(handleChange.args[0][1]).to.equal(9);
-      expect(input.value).to.equal('9');
+        expect(handleChange.args[0][1]).to.equal(9);
+        expect(input.value).to.equal('9');
+      });
+
+      it('sets value to -1 when max is not provided', async () => {
+        const handleChange = spy();
+
+        const { getByRole } = render(<NumberInput onChange={handleChange} />);
+
+        const input = getByRole('textbox') as HTMLInputElement;
+
+        await userEvent.click(input);
+        await userEvent.keyboard('[ArrowDown]');
+
+        expect(handleChange.args[0][1]).to.equal(-1);
+        expect(input.value).to.equal('-1');
+      });
     });
 
     it('only includes the input element in the tab order', async () => {
@@ -556,4 +588,30 @@ describe('<NumberInput />', () => {
       expect(getByTestId('adornment')).not.to.equal(null);
     });
   });
+
+  it('Should update NumberInput value when value prop is set through side effects', async () => {
+    function App() {
+      const [value, setValue] = React.useState(10);
+
+      return (
+        <div>
+          <button data-testid="button" onClick={() => setValue(20)}>
+            Enable
+          </button>
+          <NumberInput value={value} />
+        </div>
+      );
+    }
+    const { getByRole, getByTestId } = render(<App />);
+
+    const input = getByRole('textbox') as HTMLInputElement;
+    const button = getByTestId('button') as HTMLButtonElement;
+
+    act(() => {
+      fireEvent.click(button);
+    });
+
+    await userEvent.click(input);
+    expect(input.value).to.equal('20');
+  });
 });

packages/mui-base/src/Unstable_NumberInput/NumberInput.tsx

@@ -115,6 +115,7 @@ const NumberInput = React.forwardRef(function NumberInput(
     readOnly,
     value,
     inputId: id,
+    componentName: 'NumberInput',
   });
 
   const ownerState: NumberInputOwnerState = {
@@ -204,7 +205,7 @@ NumberInput.propTypes /* remove-proptypes */ = {
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue: PropTypes.any,
+  defaultValue: PropTypes.number,
   /**
    * If `true`, the component is disabled.
    * The prop defaults to the value (`false`) inherited from the parent FormControl component.
@@ -306,6 +307,7 @@ NumberInput.propTypes /* remove-proptypes */ = {
   step: PropTypes.number,
   /**
    * The current value. Use when the component is controlled.
+   * @default null
    */
   value: PropTypes.number,
 } as any;

packages/mui-base/src/unstable_useNumberInput/numberInputAction.types.ts

@@ -5,34 +5,45 @@ export const NumberInputActionTypes = {
   decrement: 'numberInput:decrement',
   decrementToMin: 'numberInput:decrementToMin',
   incrementToMax: 'numberInput:incrementToMax',
+  resetInputValue: 'numberInput:resetInputValue',
 } as const;
 
 interface NumberInputClampAction {
   type: typeof NumberInputActionTypes.clamp;
+  event: React.FocusEvent<HTMLInputElement>;
   inputValue: string;
 }
 
 interface NumberInputInputChangeAction {
   type: typeof NumberInputActionTypes.inputChange;
+  event: React.ChangeEvent<HTMLInputElement>;
   inputValue: string;
 }
 
 interface NumberInputIncrementAction {
   type: typeof NumberInputActionTypes.increment;
+  event: React.PointerEvent | React.KeyboardEvent;
   applyMultiplier: boolean;
 }
 
 interface NumberInputDecrementAction {
   type: typeof NumberInputActionTypes.decrement;
+  event: React.PointerEvent | React.KeyboardEvent;
   applyMultiplier: boolean;
 }
 
 interface NumberInputIncrementToMaxAction {
   type: typeof NumberInputActionTypes.incrementToMax;
+  event: React.KeyboardEvent;
 }
 
 interface NumberInputDecrementToMinAction {
   type: typeof NumberInputActionTypes.decrementToMin;
+  event: React.KeyboardEvent;
+}
+
+interface NumberInputResetInputValueAction {
+  type: typeof NumberInputActionTypes.resetInputValue;
 }
 
 export type NumberInputAction =
@@ -41,4 +52,5 @@ export type NumberInputAction =
   | NumberInputIncrementAction
   | NumberInputDecrementAction
   | NumberInputIncrementToMaxAction
-  | NumberInputDecrementToMinAction;
+  | NumberInputDecrementToMinAction
+  | NumberInputResetInputValueAction;