From 51c8609736000d1c29be9601cbab4580fbdb25ec Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 19 Apr 2021 15:07:25 +0100
Subject: [PATCH] Add caret position function to text area and fix issue with
 design transitions and custom styles

---
 packages/bbui/src/Form/Core/TextArea.svelte          |  6 ++++++
 packages/bbui/src/Form/TextArea.svelte               |  9 ++++++++-
 .../design/PropertiesPanel/DesignView.svelte         | 12 ++++--------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/bbui/src/Form/Core/TextArea.svelte b/packages/bbui/src/Form/Core/TextArea.svelte
index da69d4db21..3903c37b28 100644
--- a/packages/bbui/src/Form/Core/TextArea.svelte
+++ b/packages/bbui/src/Form/Core/TextArea.svelte
@@ -7,8 +7,13 @@
   export let disabled = false
   export let error = null
   export let id = null
+  export const getCaretPosition = () => ({
+    start: textarea.selectionStart,
+    end: textarea.selectionEnd,
+  })
 
   let focus = false
+  let textarea
   const dispatch = createEventDispatcher()
   const onChange = event => {
     dispatch("change", event.target.value)
@@ -30,6 +35,7 @@
     </svg>
   {/if}
   <textarea
+    bind:this={textarea}
     placeholder={placeholder || ''}
     class="spectrum-Textfield-input"
     {disabled}
diff --git a/packages/bbui/src/Form/TextArea.svelte b/packages/bbui/src/Form/TextArea.svelte
index 0dfc8ada16..d0ca8da635 100644
--- a/packages/bbui/src/Form/TextArea.svelte
+++ b/packages/bbui/src/Form/TextArea.svelte
@@ -9,6 +9,7 @@
   export let placeholder = null
   export let disabled = false
   export let error = null
+  export let getCaretPosition = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -18,5 +19,11 @@
 </script>
 
 <Field {label} {labelPosition} {disabled} {error}>
-  <TextArea {error} {disabled} {value} {placeholder} on:change={onChange} />
+  <TextArea
+    bind:getCaretPosition
+    {error}
+    {disabled}
+    {value}
+    {placeholder}
+    on:change={onChange} />
 </Field>
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
index 88c8eb6d8a..66802e5985 100644
--- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
@@ -63,7 +63,7 @@
           <div class="custom-styles">
             <TextArea
               value={componentInstance._styles.custom}
-              on:change={event => onCustomStyleChanged(event.target.value)}
+              on:change={event => onCustomStyleChanged(event.detail)}
               placeholder="Enter some CSS..." />
           </div>
         </DetailSummary>
@@ -79,15 +79,11 @@
     <div class="transitions">
       <Select
         value={componentInstance._transition}
-        on:change={event => onUpdateTransition(event.target.value)}
+        on:change={event => onUpdateTransition(event.detail)}
         name="transition"
         label="Transition"
-        secondary
-        thin>
-        {#each transitions as transition}
-          <option value={transition}>{capitalize(transition)}</option>
-        {/each}
-      </Select>
+        options={transitions}
+        getOptionLabel={capitalize} />
     </div>
   {/if}
 </div>