Add caret position function to text area and fix issue with design transitions and custom styles

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}

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>

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>