Allow control of max size for menu's. Allow external control for comb…

src/lib/components/bottom-nav.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
   import { slide } from 'svelte/transition';
 
   import { twMerge as merge } from 'tailwind-merge';
@@ -18,12 +19,12 @@
   import BottomNavNamespaces from './bottom-nav-namespaces.svelte';
   import BottomNavSettings from './bottom-nav-settings.svelte';
 
-  export let namespaceList: NamespaceListItem[] = [];
+  export let namespaceList: NamespaceListItem[] | undefined = [];
   export let linkList: NavLinkListItem[];
   export let isCloud = false;
 
   let viewLinks = false;
-  let viewNamespaces = false;
+  let viewNamespaces = writable(false);
   let viewSettings = false;
 
   $: namespace = $page.params.namespace || $lastUsedNamespace;
@@ -33,29 +34,29 @@
 
   const onLinksClick = () => {
     viewSettings = false;
-    viewNamespaces = false;
+    $viewNamespaces = false;
     viewLinks = !viewLinks;
   };
 
   const onNamespaceClick = () => {
     viewLinks = false;
-    viewNamespaces = !viewNamespaces;
+    $viewNamespaces = !$viewNamespaces;
     viewSettings = false;
   };
 
   const onSettingsClick = () => {
     viewLinks = false;
-    viewNamespaces = false;
+    $viewNamespaces = false;
     viewSettings = !viewSettings;
   };
 
   beforeNavigate(() => {
     viewLinks = false;
     viewSettings = false;
-    viewNamespaces = false;
+    $viewNamespaces = false;
   });
 
-  $: menuIsOpen = viewLinks || viewNamespaces || viewSettings;
+  $: menuIsOpen = viewLinks || $viewNamespaces || viewSettings;
 
   const truncateNamespace = (namespace: string) => {
     if (namespace.length > 16) {
@@ -73,7 +74,9 @@
     out:slide={{ duration: 200, delay: 0 }}
   >
     <BottomNavLinks open={viewLinks} {linkList} />
-    <BottomNavNamespaces open={viewNamespaces} {namespaceList} />
+    <slot name="nsPicker" open={viewNamespaces}>
+      <BottomNavNamespaces open={$viewNamespaces} {namespaceList} />
+    </slot>
     <BottomNavSettings open={viewSettings}>
       <slot />
     </BottomNavSettings>

src/lib/holocene/combobox/combobox.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { HTMLInputAttributes } from 'svelte/elements';
-  import { writable } from 'svelte/store';
+  import { writable, type Writable } from 'svelte/store';
 
   import { createEventDispatcher } from 'svelte';
   import { twMerge as merge } from 'tailwind-merge';
@@ -51,6 +51,8 @@
     hrefDisabled?: boolean;
     loading?: boolean;
     loadingText?: string;
+    open?: Writable<boolean>;
+    maxMenuHeight?: string;
   }
 
   type MultiSelectProps = {
@@ -131,7 +133,20 @@
   let selectedOption: string | T;
   let menuElement: HTMLUListElement;
   let inputElement: HTMLInputElement;
-  const open = writable<boolean>(false);
+
+  export let open = writable<boolean>(false);
+  export let maxMenuHeight: string = 'max-h-[20rem]';
+
+  // We need this piece of code to focus the element when externally modifying the
+  // open store. Specifically we use this behaviour in bottom nav to focus the combobox
+  // after the bottom nav is clicked
+  $: {
+    if ($open && inputElement && document.activeElement !== inputElement) {
+      inputElement.focus();
+      inputElement.select();
+    }
+  }
+
   // We want this to react to external changes to the options prop to support async use cases
   $: list = filterOptions(filterValue, options);
 
@@ -456,11 +471,12 @@
   </div>
 
   <Menu
-    keepOpen={multiselect}
+    keepOpen={multiselect || true}
     bind:menuElement
     id="{id}-listbox"
     role="listbox"
     class="w-full"
+    maxHeight={maxMenuHeight}
   >
     {#if multiselect && isArrayValue(value)}
       <ComboboxOption

src/lib/holocene/menu/menu.svelte

@@ -14,6 +14,7 @@
     keepOpen?: boolean;
     position?: 'left' | 'right' | 'top-left' | 'top-right';
     menuElement?: HTMLUListElement;
+    maxHeight?: string;
   }
 
   let className = '';
@@ -23,6 +24,7 @@
   export let keepOpen = false;
   export let position: 'left' | 'right' | 'top-left' | 'top-right' = 'left';
   export let menuElement: HTMLUListElement = null;
+  export let maxHeight: string = 'max-h-[20rem]';
 
   const {
     keepOpen: keepOpenCtx,
@@ -44,7 +46,7 @@
 <ul
   in:fly={{ duration: 100 }}
   role="menu"
-  class={merge('menu', 'max-h-[20rem]', position, className)}
+  class={merge('menu', maxHeight, position, className)}
   class:hidden={!$open}
   aria-labelledby={id}
   tabindex={-1}