From 581aee89ec30d9570687cc087b6347852d02e4a6 Mon Sep 17 00:00:00 2001
From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>
Date: Wed, 11 Sep 2024 18:33:18 +0530
Subject: [PATCH] fix: added typescript types to fluidTextArea and
 FluidTextAreaSkeleton (#17355)

---
 .../FluidTextArea/FluidTextArea.Skeleton.js   |  32 -----
 .../FluidTextArea/FluidTextArea.Skeleton.tsx  |  46 +++++++
 .../{FluidTextArea.js => FluidTextArea.tsx}   | 114 +++++++++++++++++-
 .../FluidTextArea/{index.js => index.tsx}     |   9 +-
 4 files changed, 165 insertions(+), 36 deletions(-)
 delete mode 100644 packages/react/src/components/FluidTextArea/FluidTextArea.Skeleton.js
 create mode 100644 packages/react/src/components/FluidTextArea/FluidTextArea.Skeleton.tsx
 rename packages/react/src/components/FluidTextArea/{FluidTextArea.js => FluidTextArea.tsx} (58%)
 rename packages/react/src/components/FluidTextArea/{index.js => index.tsx} (59%)

diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.Skeleton.js b/packages/react/src/components/FluidTextArea/FluidTextArea.Skeleton.js
deleted file mode 100644
index fbe7186ae1fd..000000000000
--- a/packages/react/src/components/FluidTextArea/FluidTextArea.Skeleton.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import classnames from 'classnames';
-import { usePrefix } from '../../internal/usePrefix';
-import { FormContext } from '../FluidForm/FormContext';
-
-function FluidTextAreaSkeleton({ className, ...other }) {
-  const prefix = usePrefix();
-
-  return (
-    <FormContext.Provider value={{ isFluid: true }}>
-      <div
-        className={classnames(
-          `${prefix}--form-item ${prefix}--text-area--fluid__skeleton`,
-          className
-        )}
-        {...other}>
-        <span className={`${prefix}--label ${prefix}--skeleton`} />
-        <div className={`${prefix}--skeleton ${prefix}--text-area`} />
-      </div>
-    </FormContext.Provider>
-  );
-}
-
-FluidTextAreaSkeleton.propTypes = {
-  /**
-   * Specify an optional className to be applied to the outer FluidForm wrapper
-   */
-  className: PropTypes.string,
-};
-
-export default FluidTextAreaSkeleton;
diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.Skeleton.tsx b/packages/react/src/components/FluidTextArea/FluidTextArea.Skeleton.tsx
new file mode 100644
index 000000000000..e09eb4e1d929
--- /dev/null
+++ b/packages/react/src/components/FluidTextArea/FluidTextArea.Skeleton.tsx
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import { FormContext } from '../FluidForm/FormContext';
+
+export interface FluidTextAreaSkeletonProps {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className?: string;
+}
+
+function FluidTextAreaSkeleton({ className, ...other }) {
+  const prefix = usePrefix();
+
+  const FluidTextAreaSkeleton: React.FC<FluidTextAreaSkeletonProps> = ({
+    className,
+    ...other
+  }) => {
+    const prefix = usePrefix();
+
+    return (
+      <FormContext.Provider value={{ isFluid: true }}>
+        <div
+          className={classnames(
+            `${prefix}--form-item ${prefix}--text-area--fluid__skeleton`,
+            className
+          )}
+          {...other}>
+          <span className={`${prefix}--label ${prefix}--skeleton`} />
+          <div className={`${prefix}--skeleton ${prefix}--text-area`} />
+        </div>
+      </FormContext.Provider>
+    );
+  };
+}
+
+FluidTextAreaSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+};
+
+export default FluidTextAreaSkeleton;
diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.js b/packages/react/src/components/FluidTextArea/FluidTextArea.tsx
similarity index 58%
rename from packages/react/src/components/FluidTextArea/FluidTextArea.js
rename to packages/react/src/components/FluidTextArea/FluidTextArea.tsx
index 417fe6c4a977..78bce8a70e59 100644
--- a/packages/react/src/components/FluidTextArea/FluidTextArea.js
+++ b/packages/react/src/components/FluidTextArea/FluidTextArea.tsx
@@ -13,7 +13,117 @@ import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
 
-function FluidTextArea({ className, ...other }) {
+export interface FluidTextAreaProps {
+  /**
+   * Provide a custom className that is applied directly to the underlying
+   * `<textarea>` node
+   */
+  className?: string;
+
+  /**
+   * Specify the `cols` attribute for the underlying `<textarea>` node
+   */
+  cols?: number;
+
+  /**
+   * Optionally provide the default value of the `<textarea>`
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter?: boolean;
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText?: React.ReactNode;
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Provide a unique identifier for the control
+   */
+  id?: string;
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid?: boolean;
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText?: React.ReactNode;
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: React.ReactNode;
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
+   */
+  light?: boolean;
+
+  /**
+   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   */
+  maxCount?: number;
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<textarea>`
+   * is updated
+   */
+  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<textarea>` is clicked
+   */
+  onClick?: React.MouseEventHandler<HTMLTextAreaElement>;
+
+  /**
+   * Specify the placeholder attribute for the `<textarea>`
+   */
+  placeholder?: string;
+
+  /**
+   * Specify the rows attribute for the `<textarea>`
+   */
+  rows?: number;
+
+  /**
+   * Provide the current value of the `<textarea>`
+   */
+  value?: string | number;
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn?: boolean;
+
+  /**
+   *  Provide the text that is displayed when the control is in warning state
+   */
+  warnText?: React.ReactNode;
+}
+
+const FluidTextArea: React.FC<FluidTextAreaProps> = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = classnames(`${prefix}--text-area--fluid`, className);
 
@@ -22,7 +132,7 @@ function FluidTextArea({ className, ...other }) {
       <TextArea className={classNames} {...other} />
     </FormContext.Provider>
   );
-}
+};
 
 FluidTextArea.propTypes = {
   /**
diff --git a/packages/react/src/components/FluidTextArea/index.js b/packages/react/src/components/FluidTextArea/index.tsx
similarity index 59%
rename from packages/react/src/components/FluidTextArea/index.js
rename to packages/react/src/components/FluidTextArea/index.tsx
index 6c8d8ce270a3..5421f7cc1c64 100644
--- a/packages/react/src/components/FluidTextArea/index.js
+++ b/packages/react/src/components/FluidTextArea/index.tsx
@@ -6,7 +6,12 @@
  */
 
 import FluidTextArea from './FluidTextArea';
-
+import { type FluidTextAreaProps } from './FluidTextArea';
+import { type FluidTextAreaSkeletonProps } from './FluidTextArea.Skeleton';
 export default FluidTextArea;
-export { FluidTextArea };
+export {
+  FluidTextArea,
+  type FluidTextAreaProps,
+  type FluidTextAreaSkeletonProps,
+};
 export { default as FluidTextAreaSkeleton } from './FluidTextArea.Skeleton';