fix: Textfield correction (#87)

* fix: use alt ref prop name approach (`inputRef`)

- correct typedefs

* chore: release

.changeset/clean-geese-invent.md

@@ -0,0 +1,6 @@
+---
+"@greenlabs/formula-components": patch
+"@greenlabs/rescript-formula-components": patch
+---
+
+TextField: use alt ref prop name approach (`inputRef`)

packages/components-rescript/__tests__/Formula_test.res

@@ -89,10 +89,10 @@ let testTextField = () => {
       }}
     />
     <TextField prefixIcon={Icon.ArrowDownLineBold.make} suffixIcon={Icon.ArrowDownLineBold.make} />
-    <TextField tag="textarea" />
+    <TextField inputTag="textarea" />
     <TextField
-      container={({?onChange, id, className}) => {
-        <input ?onChange id className />
+      inputContainer={({?onChange, id, className, inputRef}) => {
+        <input ?onChange id className ref={inputRef} />
       }}
     />
   </>

packages/components-rescript/src/Formula__TextField.res

@@ -1,6 +1,7 @@
 type textFieldComponentProps<'a> = {
   id: string,
   className: string,
+  inputRef: ReactDOM.domRef,
   _type: [#text | #password],
   props?: 'a,
   name?: string,
@@ -15,8 +16,8 @@ type textFieldComponentProps<'a> = {
 external make: (
   ~props: {..}=?,
   ~name: string=?,
-  ~tag: string=?,
-  ~container: React.componentLike<textFieldComponentProps<{..}>, React.element>=?,
+  ~inputTag: string=?,
+  ~inputContainer: React.componentLike<textFieldComponentProps<{..}>, React.element>=?,
   ~className: string=?,
   ~variant: [#boxOutline | #boxFill | #line]=?,
   ~size: [#xsmall | #samll | #medium | #large]=?,

packages/components/src/TextField/TextField.stories.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import type { ComponentMeta, ComponentStory } from "@storybook/react"
 import TextAreaAutosize from "react-textarea-autosize"
 
+import type { inputContainerProps, InputElement } from "./TextField"
 import { TextField } from "./TextField"
 import { SearchLineBold, EyeLineBold } from "../Icon"
 import { createDisabledArgs } from "../utils/storybook"
@@ -170,6 +171,19 @@ export const Textarea_and_Ref: ComponentStory<typeof TextField> = (args) => {
     }
   })
 
+  const inputContainer = React.memo(
+    React.forwardRef<InputElement, inputContainerProps>(
+      ({ type, ...props }, ref) => {
+        return (
+          <TextAreaAutosize
+            ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
+            {...props}
+          />
+        )
+      }
+    )
+  )
+
   return (
     <ThemeScope
       render={({ className }) => (
@@ -189,9 +203,7 @@ export const Textarea_and_Ref: ComponentStory<typeof TextField> = (args) => {
           <TextField
             {...args}
             titleText="using `react-textarea-autosize` as `inputContainer`"
-            inputContainer={({ ...props }) => {
-              return <TextAreaAutosize {...props} />
-            }}
+            inputContainer={inputContainer}
           />
         </form>
       )}

packages/components/src/TextField/TextField.tsx

@@ -22,7 +22,7 @@ import { COMPONENT_CLASS, stateClass } from "./common"
 
 type sizeVariantKey = keyof typeof textFieldSizeVariants
 type variantKey = keyof typeof textFieldVariants
-type InputElement = HTMLInputElement | HTMLTextAreaElement
+export type InputElement = HTMLInputElement | HTMLTextAreaElement
 type InputRefType = React.Ref<HTMLInputElement> & React.Ref<HTMLTextAreaElement>
 
 type inputProps = {
@@ -36,18 +36,18 @@ type inputProps = {
   type?: "text" | "password"
 }
 
+// FIXME: make input/textarea compatible
+export type inputContainerProps = inputProps & {
+  id: string
+  className: string
+  type: "text" | "password" // FIXME: fix case for <textarea />
+  inputRef: InputRefType
+}
 type TextFieldProps = PropsWithChildren<
   inputProps & {
     id?: string
     className?: string
-    inputContainer?: React.ComponentType<
-      inputProps & {
-        id: string
-        className: string
-        type: "text" | "password" // FIXME: fix case for <textarea />
-        ref: InputRefType
-      }
-    > // FIXME: add correct dom props type
+    inputContainer?: React.ComponentType<inputContainerProps>
     inputTag?: "input" | "textarea"
     size?: sizeVariantKey
     variant?: "boxOutline" | "boxFill" | "line"
@@ -154,6 +154,7 @@ export const TextField = React.forwardRef<InputElement, TextFieldProps>(
           <InputContainer
             id={id ?? innerId}
             ref={inputRef}
+            inputRef={inputRef}
             name={name}
             type={type}
             onChange={onChange}