@ssa-ui-kit/core 0.0.12-alpha → 0.0.13-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "0.0.12-alpha",
+  "version": "0.0.13-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/Textarea/Textarea.tsx

@@ -1,37 +1,44 @@
+import React from 'react';
+import { useMergeRefs } from '@floating-ui/react';
 import { callAll } from '@ssa-ui-kit/utils';
-
 import { TextareaProps } from './types';
 import { TextareaBase } from './TextareaBase';
 
-const Textarea = ({
-  name,
-  placeholder,
-  register,
-  validationSchema,
-  disabled = false,
-  rows = 10,
-  setCountChar,
-  maxLength,
-  title,
-}: TextareaProps) => {
-  if (!register) {
-    throw new Error('Input component must be used within a Form component');
-  }
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  function TextareaInner(
+    {
+      name,
+      placeholder,
+      validationSchema,
+      disabled = false,
+      rows = 10,
+      maxLength,
+      title,
+      register,
+      setCountChar,
+    }: TextareaProps,
+    ref?: React.ForwardedRef<HTMLTextAreaElement | null>,
+  ) {
+    if (!register) {
+      throw new Error('Input component must be used within a Form component');
+    }
 
-  const { onChange, ...options } = register(name, validationSchema);
+    const { onChange, ...options } = register(name, validationSchema);
 
-  return (
-    <TextareaBase
-      id={`formElement-${name}`}
-      placeholder={placeholder}
-      disabled={disabled}
-      rows={rows}
-      maxLength={maxLength}
-      onChange={callAll(setCountChar, onChange)}
-      title={title}
-      {...options}
-    />
-  );
-};
+    return (
+      <TextareaBase
+        id={`formElement-${name}`}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={rows}
+        maxLength={maxLength}
+        onChange={callAll(setCountChar, onChange)}
+        title={title}
+        {...options}
+        ref={useMergeRefs([options.ref, ref])}
+      />
+    );
+  },
+);
 
 export default Textarea;