fix: Type the ref properly in the Input component (#1378)

nulogy · Mar 13, 2024 · f8eb1fa · f8eb1fa
1 parent 9b8a0bb
commit f8eb1fa
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx
@@ -14,18 +14,16 @@ type InputProps = InputFieldProps &
     className?: string;
   };
 
-const Input: React.FC<InputProps> = forwardRef<HTMLInputElement, InputProps>(
-  ({ errorMessage, errorList, className, ...props }, ref) => {
-    const spaceProps = getSubset(props, propTypes.space);
-    const restProps = omitSubset(props, propTypes.space);
+const Input = forwardRef<HTMLInputElement, InputProps>(({ errorMessage, errorList, className, ...props }, ref) => {
+  const spaceProps = getSubset(props, propTypes.space);
+  const restProps = omitSubset(props, propTypes.space);
 
-    return (
-      <Field className={className} {...spaceProps}>
-        <InputField {...restProps} error={!!(errorMessage || errorList)} ref={ref} />
-        <InlineValidation mt="x1" errorMessage={errorMessage} errorList={errorList} />
-      </Field>
-    );
-  }
-);
+  return (
+    <Field className={className} {...spaceProps}>
+      <InputField {...restProps} error={!!(errorMessage || errorList)} ref={ref} />
+      <InlineValidation mt="x1" errorMessage={errorMessage} errorList={errorList} />
+    </Field>
+  );
+});
 
 export default Input;
diff --git a/src/Input/InputField.tsx b/src/Input/InputField.tsx
@@ -7,14 +7,14 @@ import { Box } from "../Box";
 import { Flex } from "../Flex";
 import { subPx } from "../utils";
 import { MaybeFieldLabel } from "../FieldLabel";
-import { DefaultNDSThemeType } from "../theme.type";
+import type { DefaultNDSThemeType } from "../theme.type";
 import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext";
 import Prefix from "./Prefix";
 import Suffix from "./Suffix";
 
 type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size">;
 
-export type InputFieldProps = NativeInputProps & {
+export interface InputFieldProps extends NativeInputProps {
   htmlSize?: number;
   size?: ComponentSize;
   icon?: string;
@@ -30,9 +30,9 @@ export type InputFieldProps = NativeInputProps & {
   prefixAlignment?: "left" | "right";
   iconSize?: string;
   inputWidth?: string;
-};
+}
 
-export const InputField: React.FC<InputFieldProps> = forwardRef<HTMLInputElement, InputFieldProps>(
+export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
   (
     {
       icon,