From 42d689c6bc1bc5b7ba4f84b7c7ecefa2315456d2 Mon Sep 17 00:00:00 2001
From: roman <bonchevskyi@gmail.com>
Date: Mon, 10 Aug 2026 14:43:58 +0200
Subject: [PATCH] refactor(text-area): migrate TextArea from Flow to TypeScript

---
 .../{TextArea.js => TextArea.js.flow}         |  0
 src/components/text-area/TextArea.tsx         | 99 +++++++++++++++++++
 ...TextAreaField.js => TextAreaField.js.flow} |  0
 src/components/text-area/TextAreaField.tsx    | 29 ++++++
 .../{TextArea.test.js => TextArea.test.tsx}   |  2 +-
 ...eaField.test.js => TextAreaField.test.tsx} |  7 +-
 ...ea.test.js.snap => TextArea.test.tsx.snap} |  0
 ...st.js.snap => TextAreaField.test.tsx.snap} |  0
 .../text-area/{index.js => index.js.flow}     |  0
 src/components/text-area/index.ts             |  4 +
 10 files changed, 137 insertions(+), 4 deletions(-)
 rename src/components/text-area/{TextArea.js => TextArea.js.flow} (100%)
 create mode 100644 src/components/text-area/TextArea.tsx
 rename src/components/text-area/{TextAreaField.js => TextAreaField.js.flow} (100%)
 create mode 100644 src/components/text-area/TextAreaField.tsx
 rename src/components/text-area/__tests__/{TextArea.test.js => TextArea.test.tsx} (100%)
 rename src/components/text-area/__tests__/{TextAreaField.test.js => TextAreaField.test.tsx} (92%)
 rename src/components/text-area/__tests__/__snapshots__/{TextArea.test.js.snap => TextArea.test.tsx.snap} (100%)
 rename src/components/text-area/__tests__/__snapshots__/{TextAreaField.test.js.snap => TextAreaField.test.tsx.snap} (100%)
 rename src/components/text-area/{index.js => index.js.flow} (100%)
 create mode 100644 src/components/text-area/index.ts

diff --git a/src/components/text-area/TextArea.js b/src/components/text-area/TextArea.js.flow
similarity index 100%
rename from src/components/text-area/TextArea.js
rename to src/components/text-area/TextArea.js.flow
diff --git a/src/components/text-area/TextArea.tsx b/src/components/text-area/TextArea.tsx
new file mode 100644
index 0000000000..a7c2a5f445
--- /dev/null
+++ b/src/components/text-area/TextArea.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import uniqueId from 'lodash/uniqueId';
+
+import Label from '../label';
+import Tooltip, { TooltipPosition, TooltipTheme, type TooltipProps } from '../tooltip';
+
+import './TextArea.scss';
+
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Add a class to the component */
+    className?: string;
+    /** Description shown below the label */
+    description?: React.ReactNode;
+    /** Error message shown in the error tooltip */
+    error?: React.ReactNode;
+    /** Renders error tooltip at the specified position (positions are those from Tooltip) */
+    errorTooltipPosition?: NonNullable<TooltipProps['position']>;
+    /** Hides the label */
+    hideLabel?: boolean;
+    /** Hides (optional) text from the label */
+    hideOptionalLabel?: boolean;
+    /** Makes the text area value required */
+    isRequired?: boolean;
+    /** Is text area resizable */
+    isResizable?: boolean;
+    /** Label displayed for the text area */
+    label: React.ReactNode;
+    /** Ref to the underlying textarea element. @TODO: eventually rename to innerRef for consistancy across all form elements */
+    textareaRef?: React.Ref<HTMLTextAreaElement>;
+    /** A CSS class for the tooltip's tether element component */
+    tooltipTetherClassName?: string;
+}
+
+const TextArea = ({
+    className = '',
+    description,
+    error,
+    errorTooltipPosition,
+    hideLabel,
+    hideOptionalLabel,
+    isRequired,
+    isResizable,
+    label,
+    textareaRef,
+    tooltipTetherClassName,
+    ...rest
+}: TextAreaProps) => {
+    const hasError = !!error;
+    const classes = classNames(className, 'text-area-container', {
+        'show-error': hasError,
+    });
+
+    const errorMessageID = React.useRef(uniqueId('errorMessage')).current;
+    const descriptionID = React.useRef(uniqueId('description')).current;
+
+    const ariaAttrs = {
+        'aria-invalid': hasError,
+        'aria-required': isRequired,
+        'aria-errormessage': errorMessageID,
+        'aria-describedby': description ? descriptionID : undefined,
+    };
+
+    return (
+        <div className={classes}>
+            <Label hideLabel={hideLabel} showOptionalText={!hideOptionalLabel && !isRequired} text={label}>
+                <>
+                    {!!description && (
+                        <div id={descriptionID} className="text-area-description">
+                            {description}
+                        </div>
+                    )}
+                    <Tooltip
+                        isShown={hasError}
+                        position={errorTooltipPosition || TooltipPosition.BOTTOM_LEFT}
+                        tetherElementClassName={tooltipTetherClassName}
+                        text={error || ''}
+                        theme={TooltipTheme.ERROR}
+                    >
+                        <textarea
+                            ref={textareaRef}
+                            required={isRequired}
+                            style={{ resize: isResizable ? '' : 'none' } as React.CSSProperties}
+                            {...ariaAttrs}
+                            {...rest}
+                        />
+                    </Tooltip>
+                    <span id={errorMessageID} className="accessibility-hidden" role="alert">
+                        {error}
+                    </span>
+                </>
+            </Label>
+        </div>
+    );
+};
+
+TextArea.displayName = 'TextArea';
+
+export default TextArea;
diff --git a/src/components/text-area/TextAreaField.js b/src/components/text-area/TextAreaField.js.flow
similarity index 100%
rename from src/components/text-area/TextAreaField.js
rename to src/components/text-area/TextAreaField.js.flow
diff --git a/src/components/text-area/TextAreaField.tsx b/src/components/text-area/TextAreaField.tsx
new file mode 100644
index 0000000000..58ae0cc58e
--- /dev/null
+++ b/src/components/text-area/TextAreaField.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import getProp from 'lodash/get';
+import type { FieldProps } from 'formik';
+
+import TextAreaPrimitive from './TextArea';
+import type { TextAreaProps } from './TextArea';
+
+export interface TextAreaFieldProps extends Omit<TextAreaProps, 'form'>, FieldProps {
+    /** Ref forwarded to the underlying textarea element as textareaRef */
+    innerRef?: (instance: HTMLTextAreaElement | null) => void;
+}
+
+const TextAreaField = ({ field, form, innerRef, isRequired, ...rest }: TextAreaFieldProps) => {
+    const { name } = field;
+    const { errors, touched } = form;
+    const isTouched = getProp(touched, name);
+    const error = isTouched ? getProp(errors, name) : null;
+    return (
+        <TextAreaPrimitive
+            {...field}
+            {...rest}
+            textareaRef={innerRef}
+            error={error as React.ReactNode}
+            hideOptionalLabel={isRequired}
+        />
+    );
+};
+
+export default TextAreaField;
diff --git a/src/components/text-area/__tests__/TextArea.test.js b/src/components/text-area/__tests__/TextArea.test.tsx
similarity index 100%
rename from src/components/text-area/__tests__/TextArea.test.js
rename to src/components/text-area/__tests__/TextArea.test.tsx
index 8b7a3fcadc..95084955f3 100644
--- a/src/components/text-area/__tests__/TextArea.test.js
+++ b/src/components/text-area/__tests__/TextArea.test.tsx
@@ -1,5 +1,5 @@
-import { mount, shallow } from 'enzyme';
 import * as React from 'react';
+import { mount, shallow } from 'enzyme';
 import TetherComponent from 'react-tether';
 
 import TextArea from '../TextArea';
diff --git a/src/components/text-area/__tests__/TextAreaField.test.js b/src/components/text-area/__tests__/TextAreaField.test.tsx
similarity index 92%
rename from src/components/text-area/__tests__/TextAreaField.test.js
rename to src/components/text-area/__tests__/TextAreaField.test.tsx
index 8d54281d4d..2a4ff9717a 100644
--- a/src/components/text-area/__tests__/TextAreaField.test.js
+++ b/src/components/text-area/__tests__/TextAreaField.test.tsx
@@ -1,10 +1,11 @@
-// @flow
-
 import * as React from 'react';
+import { shallow } from 'enzyme';
+
 import TextAreaField from '../TextAreaField';
 
 describe('components/text-area/TextAreaField', () => {
-    const getWrapper = (props = {}) => shallow(<TextAreaField {...props} />);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const getWrapper = (props: any = {}) => shallow(<TextAreaField {...props} />);
 
     test('should render properly', () => {
         const wrapper = getWrapper({
diff --git a/src/components/text-area/__tests__/__snapshots__/TextArea.test.js.snap b/src/components/text-area/__tests__/__snapshots__/TextArea.test.tsx.snap
similarity index 100%
rename from src/components/text-area/__tests__/__snapshots__/TextArea.test.js.snap
rename to src/components/text-area/__tests__/__snapshots__/TextArea.test.tsx.snap
diff --git a/src/components/text-area/__tests__/__snapshots__/TextAreaField.test.js.snap b/src/components/text-area/__tests__/__snapshots__/TextAreaField.test.tsx.snap
similarity index 100%
rename from src/components/text-area/__tests__/__snapshots__/TextAreaField.test.js.snap
rename to src/components/text-area/__tests__/__snapshots__/TextAreaField.test.tsx.snap
diff --git a/src/components/text-area/index.js b/src/components/text-area/index.js.flow
similarity index 100%
rename from src/components/text-area/index.js
rename to src/components/text-area/index.js.flow
diff --git a/src/components/text-area/index.ts b/src/components/text-area/index.ts
new file mode 100644
index 0000000000..2438483c9c
--- /dev/null
+++ b/src/components/text-area/index.ts
@@ -0,0 +1,4 @@
+export { default } from './TextArea';
+export { default as TextAreaField } from './TextAreaField';
+export type { TextAreaProps } from './TextArea';
+export type { TextAreaFieldProps } from './TextAreaField';