From 21a3e259d6ae1d69092b082d237ed83c341d5fb8 Mon Sep 17 00:00:00 2001
From: Sam Rose <hello@samwho.dev>
Date: Tue, 11 Mar 2025 09:28:29 +0000
Subject: [PATCH] TypeScriptify TextArea.

---
 packages/bbui/src/Form/Core/TextArea.svelte   | 27 +++++++++----------
 packages/bbui/src/Form/TextArea.svelte        | 23 +++++++---------
 .../common/CodeEditor/CodeEditor.svelte       |  7 ++++-
 3 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/packages/bbui/src/Form/Core/TextArea.svelte b/packages/bbui/src/Form/Core/TextArea.svelte
index 755b906088..16e6511190 100644
--- a/packages/bbui/src/Form/Core/TextArea.svelte
+++ b/packages/bbui/src/Form/Core/TextArea.svelte
@@ -1,25 +1,22 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
+  import { FocusEventHandler } from "svelte/elements"
 
-  export let value = ""
-  export let placeholder = null
+  export let value: string | null = null
+  export let placeholder: string | null = null
   export let disabled = false
   export let readonly = false
-  export let id = null
-  export let height = null
-  export let minHeight = null
-  export const getCaretPosition = () => ({
-    start: textarea.selectionStart,
-    end: textarea.selectionEnd,
-  })
+  export let id: string | null = null
+  export let height: number | null = null
+  export let minHeight: number | null = null
   export let align = null
 
   let isFocused = false
-  let textarea
-  const dispatch = createEventDispatcher()
-  const onChange = event => {
-    dispatch("change", event.target.value)
+  let textarea: HTMLTextAreaElement
+  const dispatch = createEventDispatcher<{ change: string }>()
+  const onChange: FocusEventHandler<HTMLTextAreaElement> = event => {
+    dispatch("change", event.currentTarget.value)
     isFocused = false
   }
 
@@ -31,7 +28,7 @@
     return textarea.value
   }
 
-  const getStyleString = (attribute, value) => {
+  const getStyleString = (attribute: string, value: number | null) => {
     if (!attribute || value == null) {
       return ""
     }
diff --git a/packages/bbui/src/Form/TextArea.svelte b/packages/bbui/src/Form/TextArea.svelte
index 08e838afb7..92563cd8e2 100644
--- a/packages/bbui/src/Form/TextArea.svelte
+++ b/packages/bbui/src/Form/TextArea.svelte
@@ -1,20 +1,19 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import TextArea from "./Core/TextArea.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let label = null
+  export let value: string | undefined = undefined
+  export let label: string | undefined = undefined
   export let labelPosition = "above"
-  export let placeholder = null
+  export let placeholder: string | undefined = undefined
   export let disabled = false
-  export let error = null
-  export let getCaretPosition = null
-  export let height = null
-  export let minHeight = null
-  export let helpText = null
+  export let error: string | undefined = undefined
+  export let height: number | undefined = undefined
+  export let minHeight: number | undefined = undefined
+  export let helpText: string | undefined = undefined
 
-  let textarea
+  let textarea: TextArea
   export function focus() {
     textarea.focus()
   }
@@ -24,7 +23,7 @@
   }
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: CustomEvent<string>) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -33,8 +32,6 @@
 <Field {helpText} {label} {labelPosition} {error}>
   <TextArea
     bind:this={textarea}
-    bind:getCaretPosition
-    {error}
     {disabled}
     {value}
     {placeholder}
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index b4d425dad9..e8c77a82cf 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -485,7 +485,12 @@
   </button>
 {/if}
 
-<Popover bind:this={popover} minWidth={popoverWidth} anchor={popoverAnchor}>
+<Popover
+  bind:this={popover}
+  minWidth={popoverWidth}
+  anchor={popoverAnchor}
+  align="left-outside"
+>
   {#if promptLoading}
     <div class="prompt-spinner">
       <Spinner size="20" color="white" />