Improve input props handling

libs/ui-toolkit/src/components/input/input.tsx

@@ -1,14 +1,11 @@
+import { InputHTMLAttributes, forwardRef } from 'react';
 import classNames from 'classnames';
 
-/* eslint-disable-next-line */
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-export interface InputProps {
-  onChange?: React.FormEventHandler<HTMLInputElement>;
   hasError?: boolean;
   disabled?: boolean;
   className?: string;
-  value?: string | number;
 }
-
 export const inputClassNames = ({
   hasError,
   disabled,
@@ -42,34 +39,28 @@ export const inputClassNames = ({
     className
   );
 
-export const inputStyle = ({ disabled }: { disabled?: boolean }) => {
+export const inputStyle = ({
-  const style: React.CSSProperties = {};
+  style,
-  if (disabled) {
-    style.backgroundImage =
-      'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAACNJREFUGFdjtLS0/M8ABcePH2eEsRlJl4BpBdHIuuFmEi0BABqjEQVjx/LTAAAAAElFTkSuQmCC)';
-  }
-  return style;
-};
-
-export function Input({
-  hasError,
-  onChange,
   disabled,
-  className,
+}: {
-  value,
+  style?: React.CSSProperties;
-}: InputProps) {
+  disabled?: boolean;
-  return (
+}) =>
-    <input
+  disabled
-      onChange={onChange}
+    ? {
-      className={classNames(
+        ...style,
-        inputClassNames({ hasError, disabled, className }),
+        backgroundImage:
-        'h-28'
+          'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAACNJREFUGFdjtLS0/M8ABcePH2eEsRlJl4BpBdHIuuFmEi0BABqjEQVjx/LTAAAAAElFTkSuQmCC)',
-      )}
-      value={value}
-      disabled={disabled}
-      style={inputStyle({ disabled })}
-    />
-  );
       }
+    : style;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => (
+  <input
+    {...props}
+    ref={ref}
+    className={classNames(inputClassNames(props), 'h-28')}
+    style={inputStyle(props)}
+  />
+));
 
 export default Input;