Type action menu

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -1,25 +1,26 @@
-<script>
+<script lang="ts">
   import { setContext, getContext } from "svelte"
   import Popover from "../Popover/Popover.svelte"
   import Menu from "../Menu/Menu.svelte"
+  import { PopoverAlignment } from "../constants"
 
-  export let disabled = false
-  export let align = "left"
-  export let portalTarget = undefined
-  export let openOnHover = false
-  export let animate = true
-  export let offset = undefined
+  export let disabled: boolean = false
+  export let align: `${PopoverAlignment}` = "left"
+  export let portalTarget: string | undefined = undefined
+  export let openOnHover: boolean = false
+  export let animate: boolean | undefined = true
+  export let offset: number | undefined = undefined
 
   const actionMenuContext = getContext("actionMenu")
 
-  let anchor
-  let dropdown
-  let timeout
+  let anchor: HTMLElement | undefined
+  let dropdown: Popover
+  let timeout: ReturnType<typeof setTimeout>
 
   // This is needed because display: contents is considered "invisible".
   // It should only ever be an action button, so should be fine.
-  function getAnchor(node) {
-    anchor = node.firstChild
+  function getAnchor(node: HTMLDivElement) {
+    anchor = (node.firstChild as HTMLElement) ?? undefined
   }
 
   export const show = () => {
@@ -37,7 +38,7 @@
     actionMenuContext?.hide()
   }
 
-  const openMenu = event => {
+  const openMenu = (event: Event) => {
     if (!disabled) {
       event.stopPropagation()
       show()

packages/bbui/src/context.d.ts

@@ -0,0 +1,5 @@
+import { ActionMenu } from "./types"
+
+declare module "svelte" {
+  export function getContext(key: "actionMenu"): ActionMenu | undefined
+}

packages/bbui/src/types/actionMenu.ts

@@ -0,0 +1,3 @@
+export interface ActionMenu {
+  hide: () => void
+}