From d4e63c07166b78efdd20752806ed5738a111c78e Mon Sep 17 00:00:00 2001
From: Sam Rose <hello@samwho.dev>
Date: Mon, 27 Jan 2025 15:58:53 +0000
Subject: [PATCH 1/5] Type Checkbox.svelte.

---
 packages/bbui/src/Form/Core/Checkbox.svelte | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Checkbox.svelte b/packages/bbui/src/Form/Core/Checkbox.svelte
index 21fe00e864..0af9be87d9 100644
--- a/packages/bbui/src/Form/Core/Checkbox.svelte
+++ b/packages/bbui/src/Form/Core/Checkbox.svelte
@@ -1,22 +1,23 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/checkbox/dist/index-vars.css"
   import "@spectrum-css/fieldgroup/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
+  import type { ChangeEventHandler } from "svelte/elements"
 
   export let value = false
-  export let id = null
-  export let text = null
+  export let id: string | undefined = undefined
+  export let text: string | undefined = undefined
   export let disabled = false
   export let readonly = false
-  export let size
+  export let size: "S" | "M" | "L" | "XL" = "M"
   export let indeterminate = false
 
   const dispatch = createEventDispatcher()
-  const onChange = event => {
-    dispatch("change", event.target.checked)
+  const onChange: ChangeEventHandler<HTMLInputElement> = event => {
+    dispatch("change", event.currentTarget.checked)
   }
 
-  $: sizeClass = `spectrum-Checkbox--size${size || "M"}`
+  $: sizeClass = `spectrum-Checkbox--size${size}`
 </script>
 
 <label

From aec4d4d8ac654ec46e40f04909b61b1497f0a795 Mon Sep 17 00:00:00 2001
From: Sam Rose <hello@samwho.dev>
Date: Mon, 27 Jan 2025 16:25:07 +0000
Subject: [PATCH 2/5] Type CheckboxGroup.svelte.

---
 packages/bbui/src/Form/Core/CheckboxGroup.svelte | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/bbui/src/Form/Core/CheckboxGroup.svelte b/packages/bbui/src/Form/Core/CheckboxGroup.svelte
index 5aca7911e8..c318a3156b 100644
--- a/packages/bbui/src/Form/Core/CheckboxGroup.svelte
+++ b/packages/bbui/src/Form/Core/CheckboxGroup.svelte
@@ -1,19 +1,19 @@
-<script>
+<script lang="ts" generics="O, V">
   import "@spectrum-css/fieldgroup/dist/index-vars.css"
   import "@spectrum-css/radio/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
 
-  export let direction = "vertical"
-  export let value = []
-  export let options = []
+  export let direction: "horizontal" | "vertical" = "vertical"
+  export let value: V[] = []
+  export let options: O[] = []
   export let disabled = false
   export let readonly = false
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let getOptionLabel: (option: O) => string = (option: O) => `${option}`
+  export let getOptionValue: (option: O) => V = option => option as unknown as V
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{ change: V[] }>()
 
-  const onChange = optionValue => {
+  const onChange = (optionValue: V) => {
     if (!value.includes(optionValue)) {
       dispatch("change", [...value, optionValue])
     } else {

From 136c633ff244b27d2676769d7ae99b30a42010e4 Mon Sep 17 00:00:00 2001
From: Sam Rose <hello@samwho.dev>
Date: Mon, 27 Jan 2025 17:27:39 +0000
Subject: [PATCH 3/5] Type Combobox.svelte.

---
 ...ition_dropdown.js => position_dropdown.ts} | 134 ++++++++++--------
 packages/bbui/src/Form/Core/Combobox.svelte   |  29 ++--
 packages/bbui/src/Popover/Popover.svelte      |  41 +++---
 3 files changed, 120 insertions(+), 84 deletions(-)
 rename packages/bbui/src/Actions/{position_dropdown.js => position_dropdown.ts} (72%)

diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.ts
similarity index 72%
rename from packages/bbui/src/Actions/position_dropdown.js
rename to packages/bbui/src/Actions/position_dropdown.ts
index e95c7dd1b6..ba27ccc1d4 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.ts
@@ -8,27 +8,50 @@
 
 // Strategies are defined as [Popover]To[Anchor].
 // They can apply for both horizontal and vertical alignment.
-const Strategies = {
-  StartToStart: "StartToStart", // e.g. left alignment
-  EndToEnd: "EndToEnd", // e.g. right alignment
-  StartToEnd: "StartToEnd", // e.g. right-outside alignment
-  EndToStart: "EndToStart", // e.g. left-outside alignment
-  MidPoint: "MidPoint", // centers relative to midpoints
-  ScreenEdge: "ScreenEdge", // locks to screen edge
+type Strategy =
+  | "StartToStart"
+  | "EndToEnd"
+  | "StartToEnd"
+  | "EndToStart"
+  | "MidPoint"
+  | "ScreenEdge"
+
+export interface Styles {
+  maxHeight?: number
+  minWidth?: number
+  maxWidth?: number
+  offset?: number
+  left: number
+  top: number
 }
 
-export default function positionDropdown(element, opts) {
-  let resizeObserver
+interface Opts {
+  anchor?: HTMLElement
+  align: string
+  maxHeight?: number
+  maxWidth?: number
+  minWidth?: number
+  useAnchorWidth: boolean
+  offset: number
+  customUpdate?: (
+    anchorBounds: DOMRect,
+    elementBounds: DOMRect,
+    styles: Styles
+  ) => Styles
+  resizable: boolean
+  wrap: boolean
+}
+
+export default function positionDropdown(element: HTMLElement, opts: Opts) {
+  let resizeObserver: ResizeObserver
   let latestOpts = opts
 
   // We need a static reference to this function so that we can properly
   // clean up the scroll listener.
-  const scrollUpdate = () => {
-    updatePosition(latestOpts)
-  }
+  const scrollUpdate = () => updatePosition(latestOpts)
 
   // Updates the position of the dropdown
-  const updatePosition = opts => {
+  const updatePosition = (opts: Opts) => {
     const {
       anchor,
       align,
@@ -51,12 +74,12 @@ export default function positionDropdown(element, opts) {
     const winWidth = window.innerWidth
     const winHeight = window.innerHeight
     const screenOffset = 8
-    let styles = {
+    let styles: Styles = {
       maxHeight,
       minWidth: useAnchorWidth ? anchorBounds.width : minWidth,
       maxWidth: useAnchorWidth ? anchorBounds.width : maxWidth,
-      left: null,
-      top: null,
+      left: 0,
+      top: 0,
     }
 
     // Ignore all our logic for custom logic
@@ -81,67 +104,67 @@ export default function positionDropdown(element, opts) {
       }
 
       // Applies a dynamic max height constraint if appropriate
-      const applyMaxHeight = height => {
+      const applyMaxHeight = (height: number) => {
         if (!styles.maxHeight && resizable) {
           styles.maxHeight = height
         }
       }
 
       // Applies the X strategy to our styles
-      const applyXStrategy = strategy => {
+      const applyXStrategy = (strategy: Strategy) => {
         switch (strategy) {
-          case Strategies.StartToStart:
+          case "StartToStart":
           default:
             styles.left = anchorBounds.left
             break
-          case Strategies.EndToEnd:
+          case "EndToEnd":
             styles.left = anchorBounds.right - elementBounds.width
             break
-          case Strategies.StartToEnd:
+          case "StartToEnd":
             styles.left = anchorBounds.right + offset
             break
-          case Strategies.EndToStart:
+          case "EndToStart":
             styles.left = anchorBounds.left - elementBounds.width - offset
             break
-          case Strategies.MidPoint:
+          case "MidPoint":
             styles.left =
               anchorBounds.left +
               anchorBounds.width / 2 -
               elementBounds.width / 2
             break
-          case Strategies.ScreenEdge:
+          case "ScreenEdge":
             styles.left = winWidth - elementBounds.width - screenOffset
             break
         }
       }
 
       // Applies the Y strategy to our styles
-      const applyYStrategy = strategy => {
+      const applyYStrategy = (strategy: Strategy) => {
         switch (strategy) {
-          case Strategies.StartToStart:
+          case "StartToStart":
             styles.top = anchorBounds.top
             applyMaxHeight(winHeight - anchorBounds.top - screenOffset)
             break
-          case Strategies.EndToEnd:
+          case "EndToEnd":
             styles.top = anchorBounds.bottom - elementBounds.height
             applyMaxHeight(anchorBounds.bottom - screenOffset)
             break
-          case Strategies.StartToEnd:
+          case "StartToEnd":
           default:
             styles.top = anchorBounds.bottom + offset
             applyMaxHeight(winHeight - anchorBounds.bottom - screenOffset)
             break
-          case Strategies.EndToStart:
+          case "EndToStart":
             styles.top = anchorBounds.top - elementBounds.height - offset
             applyMaxHeight(anchorBounds.top - screenOffset)
             break
-          case Strategies.MidPoint:
+          case "MidPoint":
             styles.top =
               anchorBounds.top +
               anchorBounds.height / 2 -
               elementBounds.height / 2
             break
-          case Strategies.ScreenEdge:
+          case "ScreenEdge":
             styles.top = winHeight - elementBounds.height - screenOffset
             applyMaxHeight(winHeight - 2 * screenOffset)
             break
@@ -150,81 +173,78 @@ export default function positionDropdown(element, opts) {
 
       // Determine X strategy
       if (align === "right") {
-        applyXStrategy(Strategies.EndToEnd)
+        applyXStrategy("EndToEnd")
       } else if (align === "right-outside" || align === "right-context-menu") {
-        applyXStrategy(Strategies.StartToEnd)
+        applyXStrategy("StartToEnd")
       } else if (align === "left-outside" || align === "left-context-menu") {
-        applyXStrategy(Strategies.EndToStart)
+        applyXStrategy("EndToStart")
       } else if (align === "center") {
-        applyXStrategy(Strategies.MidPoint)
+        applyXStrategy("MidPoint")
       } else {
-        applyXStrategy(Strategies.StartToStart)
+        applyXStrategy("StartToStart")
       }
 
       // Determine Y strategy
       if (align === "right-outside" || align === "left-outside") {
-        applyYStrategy(Strategies.MidPoint)
+        applyYStrategy("MidPoint")
       } else if (
         align === "right-context-menu" ||
         align === "left-context-menu"
       ) {
-        applyYStrategy(Strategies.StartToStart)
-        styles.top -= 5 // Manual adjustment for action menu padding
+        applyYStrategy("StartToStart")
+        if (styles.top) {
+          styles.top -= 5 // Manual adjustment for action menu padding
+        }
       } else {
-        applyYStrategy(Strategies.StartToEnd)
+        applyYStrategy("StartToEnd")
       }
 
       // Handle screen overflow
       if (doesXOverflow()) {
         // Swap left to right
         if (align === "left") {
-          applyXStrategy(Strategies.EndToEnd)
+          applyXStrategy("EndToEnd")
         }
         // Swap right-outside to left-outside
         else if (align === "right-outside") {
-          applyXStrategy(Strategies.EndToStart)
+          applyXStrategy("EndToStart")
         }
       }
       if (doesYOverflow()) {
         // If wrapping, lock to the bottom of the screen and also reposition to
         // the side to not block the anchor
         if (wrap) {
-          applyYStrategy(Strategies.MidPoint)
+          applyYStrategy("MidPoint")
           if (doesYOverflow()) {
-            applyYStrategy(Strategies.ScreenEdge)
+            applyYStrategy("ScreenEdge")
           }
-          applyXStrategy(Strategies.StartToEnd)
+          applyXStrategy("StartToEnd")
           if (doesXOverflow()) {
-            applyXStrategy(Strategies.EndToStart)
+            applyXStrategy("EndToStart")
           }
         }
         // Othewise invert as normal
         else {
           // If using an outside strategy then lock to the bottom of the screen
           if (align === "left-outside" || align === "right-outside") {
-            applyYStrategy(Strategies.ScreenEdge)
+            applyYStrategy("ScreenEdge")
           }
           // Otherwise flip above
           else {
-            applyYStrategy(Strategies.EndToStart)
+            applyYStrategy("EndToStart")
           }
         }
       }
     }
 
-    // Apply styles
-    Object.entries(styles).forEach(([style, value]) => {
-      if (value != null) {
-        element.style[style] = `${value.toFixed(0)}px`
-      } else {
-        element.style[style] = null
-      }
-    })
+    for (const [key, value] of Object.entries(styles)) {
+      element.style.setProperty(key, value ? `${value}px` : null)
+    }
   }
 
   // The actual svelte action callback which creates observers on the relevant
   // DOM elements
-  const update = newOpts => {
+  const update = (newOpts: Opts) => {
     latestOpts = newOpts
 
     // Cleanup old state
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index c38cf1d9b1..473c053896 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -1,4 +1,6 @@
-<script>
+<script lang="ts" generics="O">
+  import type { ChangeEventHandler } from "svelte/elements"
+
   import "@spectrum-css/inputgroup/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
@@ -6,33 +8,38 @@
   import clickOutside from "../../Actions/click_outside"
   import Popover from "../../Popover/Popover.svelte"
 
-  export let value = null
-  export let id = null
+  export let value: string | undefined = undefined
+  export let id: string | undefined = undefined
   export let placeholder = "Choose an option or type"
   export let disabled = false
   export let readonly = false
-  export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let options: O[] = []
+  export let getOptionLabel: (option: O) => string = option => `${option}`
+  export let getOptionValue: (option: O) => string = option => `${option}`
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{
+    change: string
+    blur: void
+    type: string
+    pick: string
+  }>()
 
   let open = false
   let focus = false
   let anchor
 
-  const selectOption = value => {
+  const selectOption = (value: string) => {
     dispatch("change", value)
     open = false
   }
 
-  const onType = e => {
-    const value = e.target.value
+  const onType: ChangeEventHandler<HTMLInputElement> = e => {
+    const value = e.currentTarget.value
     dispatch("type", value)
     selectOption(value)
   }
 
-  const onPick = value => {
+  const onPick = (value: string) => {
     dispatch("pick", value)
     selectOption(value)
   }
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index cccd83f871..96305e45d7 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -1,28 +1,37 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/popover/dist/index-vars.css"
+  // @ts-expect-error no types for the version of svelte-portal we're on.
   import Portal from "svelte-portal"
   import { createEventDispatcher, getContext, onDestroy } from "svelte"
-  import positionDropdown from "../Actions/position_dropdown"
+  import positionDropdown, { Styles } from "../Actions/position_dropdown"
   import clickOutside from "../Actions/click_outside"
   import { fly } from "svelte/transition"
   import Context from "../context"
+  import type { KeyboardEventHandler } from "svelte/elements"
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{ open: void; close: void }>()
 
-  export let anchor
-  export let align = "right"
-  export let portalTarget
-  export let minWidth
-  export let maxWidth
-  export let maxHeight
+  export let anchor: HTMLElement
+  export let align: "left" | "right" | "left-outside" | "right-outside" =
+    "right"
+  export let portalTarget: string | undefined = undefined
+  export let minWidth: number | undefined = undefined
+  export let maxWidth: number | undefined = undefined
+  export let maxHeight: number | undefined = undefined
   export let open = false
   export let useAnchorWidth = false
   export let dismissible = true
   export let offset = 4
-  export let customHeight
+  export let customHeight: string | undefined = undefined
   export let animate = true
-  export let customZindex
-  export let handlePostionUpdate
+  export let customZindex: string | undefined = undefined
+  export let handlePostionUpdate:
+    | ((
+        anchorBounds: DOMRect,
+        elementBounds: DOMRect,
+        styles: Styles
+      ) => Styles)
+    | undefined = undefined
   export let showPopover = true
   export let clickOutsideOverride = false
   export let resizable = true
@@ -30,7 +39,7 @@
 
   const animationDuration = 260
 
-  let timeout
+  let timeout: ReturnType<typeof setTimeout>
   let blockPointerEvents = false
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
@@ -65,13 +74,13 @@
     }
   }
 
-  const handleOutsideClick = e => {
+  const handleOutsideClick = (e: MouseEvent) => {
     if (clickOutsideOverride) {
       return
     }
     if (open) {
       // Stop propagation if the source is the anchor
-      let node = e.target
+      let node = e.target as Node | null
       let fromAnchor = false
       while (!fromAnchor && node && node.parentNode) {
         fromAnchor = node === anchor
@@ -86,7 +95,7 @@
     }
   }
 
-  function handleEscape(e) {
+  const handleEscape: KeyboardEventHandler<HTMLDivElement> = e => {
     if (!clickOutsideOverride) {
       return
     }

From 87b081a06f3848547ebdaf558c9acb2d88e91abb Mon Sep 17 00:00:00 2001
From: Sam Rose <hello@samwho.dev>
Date: Mon, 27 Jan 2025 17:40:51 +0000
Subject: [PATCH 4/5] Fix lint.

---
 packages/bbui/src/Actions/position_dropdown.ts   | 12 +++++++-----
 packages/bbui/src/Form/Core/CheckboxGroup.svelte | 11 +++++++++--
 packages/bbui/src/Form/Core/Combobox.svelte      |  8 ++++++--
 packages/bbui/src/Popover/Popover.svelte         | 12 ++++--------
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/bbui/src/Actions/position_dropdown.ts b/packages/bbui/src/Actions/position_dropdown.ts
index ba27ccc1d4..02cda87710 100644
--- a/packages/bbui/src/Actions/position_dropdown.ts
+++ b/packages/bbui/src/Actions/position_dropdown.ts
@@ -25,6 +25,12 @@ export interface Styles {
   top: number
 }
 
+export type UpdateHandler = (
+  anchorBounds: DOMRect,
+  elementBounds: DOMRect,
+  styles: Styles
+) => Styles
+
 interface Opts {
   anchor?: HTMLElement
   align: string
@@ -33,11 +39,7 @@ interface Opts {
   minWidth?: number
   useAnchorWidth: boolean
   offset: number
-  customUpdate?: (
-    anchorBounds: DOMRect,
-    elementBounds: DOMRect,
-    styles: Styles
-  ) => Styles
+  customUpdate?: UpdateHandler
   resizable: boolean
   wrap: boolean
 }
diff --git a/packages/bbui/src/Form/Core/CheckboxGroup.svelte b/packages/bbui/src/Form/Core/CheckboxGroup.svelte
index c318a3156b..5eac359d26 100644
--- a/packages/bbui/src/Form/Core/CheckboxGroup.svelte
+++ b/packages/bbui/src/Form/Core/CheckboxGroup.svelte
@@ -1,3 +1,8 @@
+<script lang="ts" context="module">
+  type O = any
+  type V = any
+</script>
+
 <script lang="ts" generics="O, V">
   import "@spectrum-css/fieldgroup/dist/index-vars.css"
   import "@spectrum-css/radio/dist/index-vars.css"
@@ -8,8 +13,8 @@
   export let options: O[] = []
   export let disabled = false
   export let readonly = false
-  export let getOptionLabel: (option: O) => string = (option: O) => `${option}`
-  export let getOptionValue: (option: O) => V = option => option as unknown as V
+  export let getOptionLabel = (option: O) => `${option}`
+  export let getOptionValue = (option: O) => option as unknown as V
 
   const dispatch = createEventDispatcher<{ change: V[] }>()
 
@@ -25,6 +30,8 @@
   }
 </script>
 
+import context from "src/context"
+
 <div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
   {#if options && Array.isArray(options)}
     {#each options as option}
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index 473c053896..e2e2792f54 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+  type O = any
+</script>
+
 <script lang="ts" generics="O">
   import type { ChangeEventHandler } from "svelte/elements"
 
@@ -14,8 +18,8 @@
   export let disabled = false
   export let readonly = false
   export let options: O[] = []
-  export let getOptionLabel: (option: O) => string = option => `${option}`
-  export let getOptionValue: (option: O) => string = option => `${option}`
+  export let getOptionLabel = (option: O) => `${option}`
+  export let getOptionValue = (option: O) => `${option}`
 
   const dispatch = createEventDispatcher<{
     change: string
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 96305e45d7..5b7c6ab854 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -3,7 +3,9 @@
   // @ts-expect-error no types for the version of svelte-portal we're on.
   import Portal from "svelte-portal"
   import { createEventDispatcher, getContext, onDestroy } from "svelte"
-  import positionDropdown, { Styles } from "../Actions/position_dropdown"
+  import positionDropdown, {
+    type UpdateHandler,
+  } from "../Actions/position_dropdown"
   import clickOutside from "../Actions/click_outside"
   import { fly } from "svelte/transition"
   import Context from "../context"
@@ -25,13 +27,7 @@
   export let customHeight: string | undefined = undefined
   export let animate = true
   export let customZindex: string | undefined = undefined
-  export let handlePostionUpdate:
-    | ((
-        anchorBounds: DOMRect,
-        elementBounds: DOMRect,
-        styles: Styles
-      ) => Styles)
-    | undefined = undefined
+  export let handlePostionUpdate: UpdateHandler | undefined = undefined
   export let showPopover = true
   export let clickOutsideOverride = false
   export let resizable = true

From 2b4e7ab93b34e79d3a328a4f3e2b8a93a86c265c Mon Sep 17 00:00:00 2001
From: Sam Rose <hello@samwho.dev>
Date: Tue, 28 Jan 2025 09:22:00 +0000
Subject: [PATCH 5/5] Fix errant import.

---
 packages/bbui/src/Form/Core/CheckboxGroup.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/bbui/src/Form/Core/CheckboxGroup.svelte b/packages/bbui/src/Form/Core/CheckboxGroup.svelte
index 5eac359d26..ef321b8819 100644
--- a/packages/bbui/src/Form/Core/CheckboxGroup.svelte
+++ b/packages/bbui/src/Form/Core/CheckboxGroup.svelte
@@ -30,8 +30,6 @@
   }
 </script>
 
-import context from "src/context"
-
 <div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
   {#if options && Array.isArray(options)}
     {#each options as option}