chore(web): migration svelte 5 syntax (#13883)

web/src/lib/actions/__test__/focus-trap-test.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
   import { focusTrap } from '$lib/actions/focus-trap';
 
-  export let show: boolean;
+  interface Props {
+    show: boolean;
+  }
+
+  let { show = $bindable() }: Props = $props();
 </script>
 
-<button type="button" on:click={() => (show = true)}>Open</button>
+<button type="button" onclick={() => (show = true)}>Open</button>
 
 {#if show}
   <div use:focusTrap>
     <div>
       <span>text</span>
-      <button data-testid="one" type="button" on:click={() => (show = false)}>Close</button>
+      <button data-testid="one" type="button" onclick={() => (show = false)}>Close</button>
     </div>
     <input data-testid="two" disabled />
     <input data-testid="three" />

web/src/lib/actions/autogrow.ts

@@ -1,4 +1,4 @@
-export const autoGrowHeight = (textarea: HTMLTextAreaElement, height = 'auto') => {
+export const autoGrowHeight = (textarea?: HTMLTextAreaElement, height = 'auto') => {
   if (!textarea) {
     return;
   }

web/src/lib/actions/context-menu-navigation.ts

@@ -10,7 +10,7 @@ interface Options {
   /**
    * The container element that with direct children that should be navigated.
    */
-  container: HTMLElement;
+  container?: HTMLElement;
   /**
    * Indicates if the dropdown is open.
    */
@@ -52,7 +52,11 @@ export const contextMenuNavigation: Action<HTMLElement, Options> = (node, option
       await tick();
     }
 
-    const children = Array.from(container?.children).filter((child) => child.tagName !== 'HR') as HTMLElement[];
+    if (!container) {
+      return;
+    }
+
+    const children = Array.from(container.children).filter((child) => child.tagName !== 'HR') as HTMLElement[];
     if (children.length === 0) {
       return;
     }

web/src/lib/actions/list-navigation.ts

@@ -6,8 +6,15 @@ import type { Action } from 'svelte/action';
  * @param node Element which listens for keyboard events
  * @param container Element containing the list of elements
  */
-export const listNavigation: Action<HTMLElement, HTMLElement> = (node, container: HTMLElement) => {
+export const listNavigation: Action<HTMLElement, HTMLElement | undefined> = (
+  node: HTMLElement,
+  container?: HTMLElement,
+) => {
   const moveFocus = (direction: 'up' | 'down') => {
+    if (!container) {
+      return;
+    }
+
     const children = Array.from(container?.children);
     if (children.length === 0) {
       return;