Followup multi level dropdown (#198)

package.json

@@ -50,7 +50,6 @@
     "sirv-cli": "^1.0.0",
     "stamen-attribution": "github:stamen/stamen-attribution#v0.1.0",
     "svelte-fa": "^2.4.0",
-    "sveltestrap": "^5.11.3",
     "tangram": "^0.21.1"
   },
   "main": "dist/bundle.js"

src/components/Map.svelte

@@ -176,7 +176,7 @@
     margin-bottom: 2em;
     width: auto;
     max-width: calc(100% - 6em);
-    min-width: 240px;
+    min-width: 300px;
   }
 
   .highlight-diff {

src/components/MapLocationDropdown.svelte

@@ -1,7 +1,7 @@
 <script>
   import { createEventDispatcher } from 'svelte';
   import { config as configStore } from '../stores';
-  import SimpleDropdown from './inputs/SimpleDropdown.svelte';
+  import Dropdown from './inputs/Dropdown/Dropdown.svelte';
 
   export let bearing;
   export let center;
@@ -97,14 +97,19 @@
 </script>
 
 {#if gazetteer}
-  <SimpleDropdown
-    placeholder={'Go to...'}
-    options={selectionOptions}
-    value={selected}
-    onClick={onSelect}
-    direction="down"
-  />
+  <div class="dropdown-container">
+    <Dropdown
+      placeholder={'Go to...'}
+      options={selectionOptions}
+      activeValue={selected}
+      {onSelect}
+      direction="down"
+    />
+  </div>
 {/if}
 
 <style>
+  .dropdown-container {
+    min-width: 140px;
+  }
 </style>

src/components/MapStyleInput.svelte

@@ -4,7 +4,8 @@
   import { shortcut } from '../shortcut';
   import { fetchUrl } from '../fetch-url';
   import StylesDropdown from './inputs/StylesDropdown.svelte';
-  import SimpleDropdown from './inputs/SimpleDropdown.svelte';
+  import Dropdown from './inputs/Dropdown/Dropdown.svelte';
+
   const dispatch = createEventDispatcher();
 
   export let dropdownDisplayOptions;
@@ -228,10 +229,10 @@
 
   <div class="renderer-control">
     <span class="nowrap">Rendered with</span>
-    <SimpleDropdown
+    <Dropdown
       options={rendererOptions.map(v => ({ label: v.name, value: v.value }))}
-      value={rendererValue}
-      onClick={v => dispatch('selectRenderer', { value: v })}
+      activeValue={rendererValue}
+      onSelect={v => dispatch('selectRenderer', { value: v })}
       direction="up"
     />
   </div>
@@ -243,11 +244,19 @@
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    max-width: 240px;
+    max-width: 300px;
   }
 
   .custom-input {
     margin-top: 0px;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0.25rem;
+  }
+
+  .custom-input input {
+    flex-grow: 1;
+    width: 0;
   }
 
   .input-error:focus {

src/components/ViewModeControl.svelte

@@ -2,7 +2,7 @@
   import { createEventDispatcher } from 'svelte';
   import { linkLocations as linkLocationsStore } from '../stores';
   import { VIEW_MODES } from '../constants';
-  import SimpleDropdown from './inputs/SimpleDropdown.svelte';
+  import Dropdown from './inputs/Dropdown/Dropdown.svelte';
 
   export let mode;
   export let mapsNum;
@@ -67,11 +67,17 @@
   };
 </script>
 
-<div>
-  <SimpleDropdown
+<div class="dropdown-container">
+  <Dropdown
     options={viewModes.map(v => ({ label: v, value: v }))}
-    value={selectedMode}
-    onClick={onSelect}
+    activeValue={selectedMode}
+    {onSelect}
     direction="down"
   />
 </div>
+
+<style>
+  .dropdown-container {
+    min-width: 100px;
+  }
+</style>