powerhome · nidaqg · Apr 19, 2023 · Apr 10, 2023 · Apr 11, 2023 · Apr 11, 2023
@@ -1,12 +1,12 @@
-/* @flow */
 /* eslint-disable react-hooks/rules-of-hooks */
 
 import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'
 
-import PbTextarea from './'
-import type { InputCallback } from '../types.js'
+import PbTextarea from '.'
+import type { InputCallback } from '../types'
 
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -15,9 +15,11 @@ import Flex from '../pb_flex/_flex'
 import FlexItem from '../pb_flex/_flex_item'
 
 type TextareaProps = {
+  aria?: {[key: string]: string},
   characterCount?: string,
   className?: string,
-  children?: array<React.ReactChild>,
+  children?: React.ReactChild[],
+  data?: {[key: string]: string},
   disabled?: boolean,
   error?: string,
   id?: string,
@@ -31,14 +33,16 @@ type TextareaProps = {
   name?: string,
   required?: boolean,
   rows?: number,
-  resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
+  resize: "none" | "both" | "horizontal" | "vertical" | "auto",
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
 
 const Textarea = ({
+  aria = {},
   characterCount,
   className,
   children,
+  data = {},
   disabled,
   inline = false,
   resize = 'none',
@@ -52,8 +56,8 @@ const Textarea = ({
   rows = 4,
   value,
   ...props
-}: TextareaProps, ref: React.ElementRef<"textarea">) => {
-  ref = ref || useRef(false)
+}: TextareaProps, ref: any) => {
+  ref = useRef<HTMLTextAreaElement>(null)
   useEffect(() => {
     if (ref.current && resize === 'auto') {
       PbTextarea.addMatch(ref.current)
@@ -64,72 +68,62 @@ const Textarea = ({
   const inlineClass = inline ? 'inline' : ''
   const resizeClass = `resize_${resize}`
   const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
+  const noCount = typeof characterCount !== 'undefined'
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
 
   const characterCounter = () => {
-    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : checkIfZero(characterCount)
+    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
   }
 
-  const checkIfZero = (characterCount) => {
+  const checkIfZero = (characterCount: string | number) => {
     return characterCount == 0 ? characterCount.toString() : characterCount
   }
 
   return (
-    <div className={classes}>
-      <Caption
-          text={label}
-      />
-      <If condition={children}>
-        {children}
-        <Else />
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+    >
+      <Caption text={label} />
+      {children || (
         <textarea
-            className="pb_textarea_kit"
-            disabled={disabled}
-            name={name}
-            onChange={onChange}
-            placeholder={placeholder}
-            ref={ref}
-            required={required}
-            rows={rows}
-            value={value}
-            {...props}
+          className="pb_textarea_kit"
+          disabled={disabled}
+          name={name}
+          onChange={onChange}
+          placeholder={placeholder}
+          ref={ref}
+          required={required}
+          rows={rows}
+          value={value}
+          {...props}
         />
-        <If condition={error}>
-          <If condition={characterCount}>
-            <Flex
-                spacing="between"
-                vertical="center"
-            >
+      )}
+
+      {error ? (
+        <>
+          {characterCount ? (
+            <Flex spacing="between" vertical="center">
               <FlexItem>
-                <Body
-                    margin="none"
-                    status="negative"
-                    text={error}
-                />
+                <Body margin="none" status="negative" text={error} />
               </FlexItem>
               <FlexItem>
-                <Caption
-                    margin="none"
-                    size="xs"
-                    text={characterCounter()}
-                />
+                <Caption margin="none" size="xs" text={characterCounter()} />
               </FlexItem>
             </Flex>
-            <Else />
-            <Body
-                status="negative"
-                text={error}
-            />
-          </If>
-          <Else />
-          <Caption
-              margin="none"
-              size="xs"
-              text={characterCounter()}
-          />
-        </If>
-      </If>
+          ) : (
+            <Body status="negative" text={error} />
+          )}
+        </>
+      ) : (
+         noCount && (
+          <Caption margin="none" size="xs" text={characterCounter()} />
+        )
+      )}
     </div>
-  )
+  );
 }
 
 export default forwardRef(Textarea)
@@ -1,6 +1,8 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTextarea extends PbEnhancedElement {
+  style: any
+  scrollHeight: any
   static get selector() {
     return '.resize_auto textarea'
   }

@@ -0,0 +1,49 @@
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+
+import Textarea from "./_textarea";
+
+const testId = "textarea-kit";
+
+describe("TextArea Kit", () => {
+  test("Expects to have correct classname", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          label="Label"
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_textarea_kit");
+  });
+
+  test("should render aria-label", () => {
+    render(
+      <Textarea
+          aria={{ label: testId }}
+          data={{ testid: testId }}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveAttribute("aria-label", testId);
+  });
+
+  test("Row and disable props", () => {
+    render(
+      <Textarea
+          aria={{ label: testId }}
+          data={{ testid: testId }}
+          disabled={false}
+          rows={7}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const textarea = kit.querySelector("textarea");
+
+    expect(textarea.rows).toBe(7);
+    expect(textarea.disabled).toBe(false);
+  });
+});