[base-ui][useInput] Align ExternalProps naming

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

@@ -46,15 +46,15 @@
     },
     "getInputProps": {
       "type": {
-        "name": "<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseInputInputSlotProps<TOther>",
-        "description": "<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseInputInputSlotProps<TOther>"
+        "name": "<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseInputInputSlotProps<ExternalProps>",
+        "description": "<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseInputInputSlotProps<ExternalProps>"
       },
       "required": true
     },
     "getRootProps": {
       "type": {
-        "name": "<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseInputRootSlotProps<TOther>",
-        "description": "<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseInputRootSlotProps<TOther>"
+        "name": "<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseInputRootSlotProps<ExternalProps>",
+        "description": "<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseInputRootSlotProps<ExternalProps>"
       },
       "required": true
     },

packages/mui-base/src/useInput/useInput.test.tsx

@@ -47,4 +47,24 @@ describe('useInput', () => {
       expect(handleFocus.callCount).to.equal(1);
     });
   });
+
+  describe('external props', () => {
+    it('prop getter functions should forward arbitrary props to the corresponding slot', () => {
+      const rootRef = React.createRef<HTMLDivElement>();
+
+      function Input() {
+        const { getRootProps, getInputProps } = useInput();
+        return (
+          <div {...getRootProps({ 'data-testid': 'test-root-slot', ref: rootRef })}>
+            <input {...getInputProps({ 'data-testid': 'test-input-slot' })} />
+          </div>
+        );
+      }
+      const { getByRole } = render(<Input />);
+
+      expect(rootRef.current).to.have.attribute('data-testid', 'test-root-slot');
+
+      expect(getByRole('textbox')).to.have.attribute('data-testid', 'test-input-slot');
+    });
+  });
 });

packages/mui-base/src/useInput/useInput.ts

@@ -20,7 +20,7 @@ import {
  *
  * - [useInput API](https://mui.com/base-ui/react-input/hooks-api/#use-input)
  */
-export function useInput(parameters: UseInputParameters): UseInputReturnValue {
+export function useInput(parameters: UseInputParameters = {}): UseInputReturnValue {
   const {
     defaultValue: defaultValueProp,
     disabled: disabledProp = false,
@@ -164,9 +164,9 @@ export function useInput(parameters: UseInputParameters): UseInputReturnValue {
       otherHandlers.onClick?.(event);
     };
 
-  const getRootProps = <TOther extends Record<string, any> = {}>(
-    externalProps: TOther = {} as TOther,
-  ): UseInputRootSlotProps<TOther> => {
+  const getRootProps = <ExternalProps extends Record<string, any> = {}>(
+    externalProps: ExternalProps = {} as ExternalProps,
+  ): UseInputRootSlotProps<ExternalProps> => {
     // onBlur, onChange and onFocus are forwarded to the input slot.
     const propsEventHandlers = extractEventHandlers(parameters, ['onBlur', 'onChange', 'onFocus']);
     const externalEventHandlers = { ...propsEventHandlers, ...extractEventHandlers(externalProps) };
@@ -178,9 +178,9 @@ export function useInput(parameters: UseInputParameters): UseInputReturnValue {
     };
   };
 
-  const getInputProps = <TOther extends Record<string, any> = {}>(
-    externalProps: TOther = {} as TOther,
-  ): UseInputInputSlotProps<TOther> => {
+  const getInputProps = <ExternalProps extends Record<string, any> = {}>(
+    externalProps: ExternalProps = {} as ExternalProps,
+  ): UseInputInputSlotProps<ExternalProps> => {
     const propsEventHandlers: Record<string, React.EventHandler<any> | undefined> = {
       onBlur,
       onChange,
@@ -190,7 +190,6 @@ export function useInput(parameters: UseInputParameters): UseInputReturnValue {
     const externalEventHandlers = { ...propsEventHandlers, ...extractEventHandlers(externalProps) };
 
     const mergedEventHandlers = {
-      ...externalProps,
       ...externalEventHandlers,
       onBlur: handleBlur(externalEventHandlers),
       onChange: handleChange(externalEventHandlers),
@@ -201,10 +200,12 @@ export function useInput(parameters: UseInputParameters): UseInputReturnValue {
       ...mergedEventHandlers,
       'aria-invalid': error || undefined,
       defaultValue: defaultValue as string | number | readonly string[] | undefined,
-      ref: handleInputRef,
       value: value as string | number | readonly string[] | undefined,
       required,
       disabled,
+      ...externalProps,
+      ref: handleInputRef,
+      ...mergedEventHandlers,
     };
   };
 

packages/mui-base/src/useInput/useInput.types.ts

@@ -33,8 +33,8 @@ export interface UseInputRootSlotOwnProps {
   onClick: React.MouseEventHandler | undefined;
 }
 
-export type UseInputRootSlotProps<TOther = {}> = Omit<
-  TOther,
+export type UseInputRootSlotProps<ExternalProps = {}> = Omit<
+  ExternalProps,
   keyof UseInputRootSlotOwnProps | 'onBlur' | 'onChange' | 'onFocus'
 > &
   UseInputRootSlotOwnProps;
@@ -51,7 +51,10 @@ export interface UseInputInputSlotOwnProps {
   disabled: boolean;
 }
 
-export type UseInputInputSlotProps<TOther = {}> = Omit<TOther, keyof UseInputInputSlotOwnProps> &
+export type UseInputInputSlotProps<ExternalProps = {}> = Omit<
+  ExternalProps,
+  keyof UseInputInputSlotOwnProps
+> &
   UseInputInputSlotOwnProps;
 
 export interface UseInputReturnValue {
@@ -76,17 +79,17 @@ export interface UseInputReturnValue {
    * @param externalProps props for the input slot
    * @returns props that should be spread on the input slot
    */
-  getInputProps: <TOther extends Record<string, any> = {}>(
-    externalProps?: TOther,
-  ) => UseInputInputSlotProps<TOther>;
+  getInputProps: <ExternalProps extends Record<string, any> = {}>(
+    externalProps?: ExternalProps,
+  ) => UseInputInputSlotProps<ExternalProps>;
   /**
    * 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: <TOther extends Record<string, any> = {}>(
-    externalProps?: TOther,
-  ) => UseInputRootSlotProps<TOther>;
+  getRootProps: <ExternalProps extends Record<string, any> = {}>(
+    externalProps?: ExternalProps,
+  ) => UseInputRootSlotProps<ExternalProps>;
   inputRef: React.RefCallback<HTMLInputElement | HTMLTextAreaElement> | null;
   /**
    * If `true`, the `input` will indicate that it's required.