Align ExternalProps naming

mui · Sep 7, 2023 · fe64921 · fe64921
1 parent 6d765df
commit fe64921
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 20 deletions.
diff --git a/docs/pages/base-ui/api/use-input.json b/docs/pages/base-ui/api/use-input.json
@@ -46,15 +46,15 @@
     },
     "getInputProps": {
       "type": {
-        "name": "&lt;TOther extends Record&lt;string, any&gt; = {}&gt;(externalProps?: TOther) =&gt; UseInputInputSlotProps&lt;TOther&gt;",
-        "description": "&lt;TOther extends Record&lt;string, any&gt; = {}&gt;(externalProps?: TOther) =&gt; UseInputInputSlotProps&lt;TOther&gt;"
+        "name": "&lt;ExternalProps extends Record&lt;string, any&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseInputInputSlotProps&lt;ExternalProps&gt;",
+        "description": "&lt;ExternalProps extends Record&lt;string, any&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseInputInputSlotProps&lt;ExternalProps&gt;"
       },
       "required": true
     },
     "getRootProps": {
       "type": {
-        "name": "&lt;TOther extends Record&lt;string, any&gt; = {}&gt;(externalProps?: TOther) =&gt; UseInputRootSlotProps&lt;TOther&gt;",
-        "description": "&lt;TOther extends Record&lt;string, any&gt; = {}&gt;(externalProps?: TOther) =&gt; UseInputRootSlotProps&lt;TOther&gt;"
+        "name": "&lt;ExternalProps extends Record&lt;string, any&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseInputRootSlotProps&lt;ExternalProps&gt;",
+        "description": "&lt;ExternalProps extends Record&lt;string, any&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseInputRootSlotProps&lt;ExternalProps&gt;"
       },
       "required": true
     },

diff --git a/packages/mui-base/src/useInput/useInput.test.tsx b/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');
+    });
+  });
 });
diff --git a/packages/mui-base/src/useInput/useInput.ts b/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,

diff --git a/packages/mui-base/src/useInput/useInput.types.ts b/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.