Add pretty labels to multiselect and fix stale props issue

packages/bbui/src/Form/internal/Multiselect.svelte

@@ -12,22 +12,22 @@
   export let getOptionValue = option => option
 
   const dispatch = createEventDispatcher()
-  $: fieldText = getFieldText(value)
+  $: selectedLookupMap = getSelectedLookupMap(value)
-  $: valueLookupMap = getValueLookupMap(value)
+  $: optionLookupMap = getOptionLookupMap(options)
-  $: isOptionSelected = option => {
+  $: fieldText = getFieldText(value, optionLookupMap, placeholder)
-    return valueLookupMap[option] === true
+  $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
-  }
+  $: toggleOption = makeToggleOption(selectedLookupMap, value)
 
-  const getFieldText = value => {
+  const getFieldText = (value, map, placeholder) => {
     if (value?.length) {
-      const count = value?.length ?? 0
+      const vals = value.map(option => map[option] || "").join(", ")
-      return `${count} selected option${count === 1 ? "" : "s"}`
+      return `(${value.length}) ${vals}`
     } else {
       return placeholder || "Choose some options"
     }
   }
 
-  const getValueLookupMap = value => {
+  const getSelectedLookupMap = value => {
     let map = {}
     if (value?.length) {
       value.forEach(option => {
@@ -39,12 +39,27 @@
     return map
   }
 
-  const toggleOption = optionValue => {
+  const getOptionLookupMap = options => {
-    if (valueLookupMap[optionValue]) {
+    let map = {}
-      const filtered = value.filter(option => option !== optionValue)
+    if (options) {
-      dispatch("change", filtered)
+      options.forEach(option => {
-    } else {
+        const optionValue = getOptionValue(option)
-      dispatch("change", [...value, optionValue])
+        if (optionValue != null) {
+          map[optionValue] = getOptionLabel(option) || ""
+        }
+      })
+    }
+    return map
+  }
+
+  const makeToggleOption = (map, value) => {
+    return optionValue => {
+      if (map[optionValue]) {
+        const filtered = value.filter(option => option !== optionValue)
+        dispatch("change", filtered)
+      } else {
+        dispatch("change", [...value, optionValue])
+      }
     }
   }
 </script>

packages/bbui/src/Form/internal/Picker.svelte

@@ -106,4 +106,10 @@
   .spectrum-Picker {
     width: 100%;
   }
+  .spectrum-Picker-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 0;
+  }
 </style>

packages/bbui/src/Form/internal/index.js

@@ -1,2 +1,3 @@
 export { default as TextField } from "./TextField.svelte"
 export { default as Select } from "./Select.svelte"
+export { default as Multiselect } from "./Multiselect.svelte"