Update some standard components form components to use generic BBUI core components

packages/standard-components/src/forms/OptionsField.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Select } from "@budibase/bbui/internal"
+  import { CoreSelect } from "@budibase/bbui"
   import Field from "./Field.svelte"
 
   export let field
@@ -21,7 +21,7 @@
   bind:fieldApi
   bind:fieldSchema>
   {#if fieldState}
-    <Select
+    <CoreSelect
       value={$fieldState.value}
       fieldId={$fieldState.fieldId}
       disabled={$fieldState.disabled}

packages/standard-components/src/forms/RelationshipField.svelte

@@ -1,7 +1,7 @@
 <script>
+  import { CoreSelect, CoreMultiselect } from "@budibase/bbui"
   import { getContext } from "svelte"
   import Field from "./Field.svelte"
-  import Picker from "./Picker.svelte"
 
   const { API } = getContext("sdk")
 
@@ -14,31 +14,10 @@
   let fieldApi
   let fieldSchema
 
-  // Picker state
   let options = []
   let tableDefinition
-  let fieldText = ""
 
-  const setFieldText = value => {
+  $: multiselect = fieldSchema?.relationshipType !== "one-to-many"
-    if (fieldSchema?.relationshipType === "one-to-many") {
-      if (value?.length && options?.length) {
-        const row = options.find(row => row._id === value[0]?._id)
-        return getDisplayName(row)
-      } else {
-        return placeholder || "Choose an option"
-      }
-    } else {
-      if (value?.length) {
-        return `${value?.length ?? 0} selected rows`
-      } else {
-        return placeholder || "Choose some options"
-      }
-    }
-  }
-
-  $: options, (fieldText = setFieldText($fieldState?.value))
-  $: valueLookupMap = getValueLookupMap($fieldState?.value)
-  $: isOptionSelected = option => valueLookupMap[option] === true
   $: linkedTableId = fieldSchema?.tableId
   $: fetchRows(linkedTableId)
   $: fetchTable(linkedTableId)
@@ -63,29 +42,12 @@
     return row?.[tableDefinition?.primaryDisplay || "_id"] || "-"
   }
 
-  const getValueLookupMap = value => {
+  const singleHandler = e => {
-    let map = {}
+    fieldApi.setValue(e.detail == null ? [] : [e.detail])
-    if (value?.length) {
-      value.forEach(option => {
-        if (option?._id) {
-          map[option._id] = true
-        }
-      })
-    }
-    return map
   }
 
-  const toggleOption = id => {
+  const multiHandler = e => {
-    if (fieldSchema.relationshipType === "one-to-many") {
+    fieldApi.setValue(e.detail)
-      fieldApi.setValue(id ? [{ _id: id }] : [])
-    } else {
-      if ($fieldState.value.find(option => option?._id === id)) {
-        const filtered = $fieldState.value.filter(option => option?._id !== id)
-        fieldApi.setValue(filtered)
-      } else {
-        fieldApi.setValue([...$fieldState.value, { _id: id }])
-      }
-    }
   }
 </script>
 
@@ -98,12 +60,16 @@
   bind:fieldApi
   bind:fieldSchema
   defaultValue={[]}>
-  <Picker
+  {#if fieldState}
-    {fieldState}
+    <svelte:component
-    {fieldText}
+      this={multiselect ? CoreMultiselect : CoreSelect}
-    {options}
+      {options}
-    {isOptionSelected}
+      value={multiselect ? $fieldState.value : $fieldState.value?.[0]}
-    onSelectOption={toggleOption}
+      on:change={multiselect ? multiHandler : singleHandler}
-    getOptionLabel={getDisplayName}
+      fieldId={$fieldState.fieldId}
-    getOptionValue={option => option._id} />
+      disabled={$fieldState.disabled}
+      error={$fieldState.error}
+      getOptionLabel={getDisplayName}
+      getOptionValue={option => option._id} />
+  {/if}
 </Field>

packages/standard-components/src/forms/StringField.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { TextField } from "@budibase/bbui/internal"
+  import { CoreTextField } from "@budibase/bbui"
   import Field from "./Field.svelte"
 
   export let field
@@ -20,7 +20,7 @@
   bind:fieldState
   bind:fieldApi>
   {#if fieldState}
-    <TextField
+    <CoreTextField
       value={$fieldState.value}
       on:change={e => fieldApi.setValue(e.detail)}
       disabled={$fieldState.disabled}