From 3018c2b2077e28b6c41e57d188aef85ae6ca2d9d Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Wed, 26 Jan 2022 19:19:49 -0800
Subject: [PATCH] fix(text-area): export readonly prop (#1043)

Fixes #1009
---
 COMPONENT_INDEX.md                  |  1 +
 docs/src/COMPONENT_API.json         | 11 +++++++++++
 src/TextArea/TextArea.svelte        |  5 ++++-
 types/TextArea/TextArea.svelte.d.ts |  6 ++++++
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index b952e6f7..f43b78fa 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4110,6 +4110,7 @@ None.
 | rows        | <code>let</code> | No       | <code>number</code>                          | <code>4</code>                                   | Specify the number of rows                      |
 | light       | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to enable the light variant       |
 | disabled    | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to disable the input              |
+| readonly    | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to use the read-only variant      |
 | helperText  | <code>let</code> | No       | <code>string</code>                          | <code>""</code>                                  | Specify the helper text                         |
 | labelText   | <code>let</code> | No       | <code>string</code>                          | <code>""</code>                                  | Specify the label text                          |
 | hideLabel   | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to visually hide the label text   |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 7a6cc3d0..9baede23 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -11386,6 +11386,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "readonly",
+          "kind": "let",
+          "description": "Set to `true` to use the read-only variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "helperText",
           "kind": "let",
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index 52c84417..2fc894c3 100644
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@@ -17,6 +17,9 @@
   /**  Set to `true` to disable the input */
   export let disabled = false;
 
+  /** Set to `true` to use the read-only variant */
+  export let readonly = false;
+
   /** Specify the helper text */
   export let helperText = "";
 
@@ -87,11 +90,11 @@
       rows="{rows}"
       value="{value ?? ''}"
       placeholder="{placeholder}"
+      readonly="{readonly}"
       class:bx--text-area="{true}"
       class:bx--text-area--light="{light}"
       class:bx--text-area--invalid="{invalid}"
       {...$$restProps}
-      readonly="{$$restProps.readonly === true ? true : undefined}"
       on:change
       on:input
       on:input="{({ target }) => {
diff --git a/types/TextArea/TextArea.svelte.d.ts b/types/TextArea/TextArea.svelte.d.ts
index 3f59c35b..a649eb52 100644
--- a/types/TextArea/TextArea.svelte.d.ts
+++ b/types/TextArea/TextArea.svelte.d.ts
@@ -39,6 +39,12 @@ export interface TextAreaProps
    */
   disabled?: boolean;
 
+  /**
+   * Set to `true` to use the read-only variant
+   * @default false
+   */
+  readonly?: boolean;
+
   /**
    * Specify the helper text
    * @default ""