From 5d1374bfa2ecc642d0f3fff5fc20b574a70efd10 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 18 Aug 2021 11:32:39 +0100
Subject: [PATCH 01/30] Add stepper component to bbui for numeric values

---
 packages/bbui/package.json                    |   1 +
 packages/bbui/src/Form/Core/Stepper.svelte    | 172 ++++++++++++++++++
 packages/bbui/src/Form/Core/index.js          |   1 +
 packages/bbui/src/Form/Stepper.svelte         |  45 +++++
 packages/bbui/src/index.js                    |   1 +
 packages/bbui/yarn.lock                       |   5 +
 .../PropertyControls/componentSettings.js     |   4 +-
 packages/standard-components/manifest.json    |   6 +
 8 files changed, 233 insertions(+), 2 deletions(-)
 create mode 100644 packages/bbui/src/Form/Core/Stepper.svelte
 create mode 100644 packages/bbui/src/Form/Stepper.svelte

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 368c80d85f..ee7a56ecde 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -65,6 +65,7 @@
     "@spectrum-css/search": "^3.0.2",
     "@spectrum-css/sidenav": "^3.0.2",
     "@spectrum-css/statuslight": "^3.0.2",
+    "@spectrum-css/stepper": "^3.0.3",
     "@spectrum-css/switch": "^1.0.2",
     "@spectrum-css/table": "^3.0.1",
     "@spectrum-css/tabs": "^3.0.1",
diff --git a/packages/bbui/src/Form/Core/Stepper.svelte b/packages/bbui/src/Form/Core/Stepper.svelte
new file mode 100644
index 0000000000..895dc2d3de
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Stepper.svelte
@@ -0,0 +1,172 @@
+<script>
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import "@spectrum-css/actionbutton/dist/index-vars.css"
+  import "@spectrum-css/stepper/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let id = null
+  export let readonly = false
+  export let updateOnChange = true
+  export let quiet = false
+  export let min
+  export let max
+  export let step
+
+  const dispatch = createEventDispatcher()
+  let focus = false
+
+  // We need to keep the field value bound to a different variable in order
+  // to properly handle erroneous values. If we don't do this then it is
+  // possible for the field to show stale text which does not represent the
+  // real value. The reactive statement is to ensure that external changes to
+  // the value prop are reflected.
+  let fieldValue = value
+  $: fieldValue = value
+
+  // Ensure step is always a numeric value defaulting to 1
+  $: step = step == null || isNaN(step) ? 1 : step
+
+  const updateValue = value => {
+    if (readonly) {
+      return
+    }
+    const float = parseFloat(value)
+    value = isNaN(float) ? null : float
+    if (value != null) {
+      if (min != null && value < min) {
+        value = min
+      } else if (max != null && value > max) {
+        value = max
+      }
+    }
+    dispatch("change", value)
+    fieldValue = value
+  }
+
+  const onFocus = () => {
+    if (readonly) {
+      return
+    }
+    focus = true
+  }
+
+  const onBlur = event => {
+    if (readonly) {
+      return
+    }
+    focus = false
+    updateValue(event.target.value)
+  }
+
+  const onInput = event => {
+    if (readonly || !updateOnChange) {
+      return
+    }
+    updateValue(event.target.value)
+  }
+
+  const updateValueOnEnter = event => {
+    if (readonly) {
+      return
+    }
+    if (event.key === "Enter") {
+      updateValue(event.target.value)
+    }
+  }
+
+  const stepUp = () => {
+    if (value == null || isNaN(value)) {
+      updateValue(step)
+    } else {
+      updateValue(value + step)
+    }
+  }
+
+  const stepDown = () => {
+    if (value == null || isNaN(value)) {
+      updateValue(step)
+    } else {
+      updateValue(value - step)
+    }
+  }
+</script>
+
+<div
+  class="spectrum-Stepper"
+  class:spectrum-Stepper--quiet={quiet}
+  class:is-invalid={!!error}
+  class:is-disabled={disabled}
+  class:is-focused={focus}
+>
+  {#if error}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-Alert" />
+    </svg>
+  {/if}
+
+  <div class="spectrum-Textfield spectrum-Stepper-textfield">
+    <input
+      {disabled}
+      {readonly}
+      {id}
+      bind:value={fieldValue}
+      placeholder={placeholder || ""}
+      type="number"
+      class="spectrum-Textfield-input spectrum-Stepper-input"
+      on:click
+      on:blur
+      on:focus
+      on:input
+      on:keyup
+      on:blur={onBlur}
+      on:focus={onFocus}
+      on:input={onInput}
+      on:keyup={updateValueOnEnter}
+    />
+  </div>
+  <span class="spectrum-Stepper-buttons">
+    <button
+      class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp"
+      tabindex="-1"
+      on:click={stepUp}
+    >
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronUp75"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron75" />
+      </svg>
+    </button>
+    <button
+      class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown"
+      tabindex="-1"
+      on:click={stepDown}
+    >
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronDown75"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron75" />
+      </svg>
+    </button>
+  </span>
+</div>
+
+<style>
+  .spectrum-Stepper {
+    width: 100%;
+  }
+  .spectrum-Stepper::before {
+    display: none;
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index a31c5941ec..440c4a1b15 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -9,3 +9,4 @@ export { default as CoreSwitch } from "./Switch.svelte"
 export { default as CoreSearch } from "./Search.svelte"
 export { default as CoreDatePicker } from "./DatePicker.svelte"
 export { default as CoreDropzone } from "./Dropzone.svelte"
+export { default as CoreStepper } from "./Stepper.svelte"
diff --git a/packages/bbui/src/Form/Stepper.svelte b/packages/bbui/src/Form/Stepper.svelte
new file mode 100644
index 0000000000..9eff2e368e
--- /dev/null
+++ b/packages/bbui/src/Form/Stepper.svelte
@@ -0,0 +1,45 @@
+<script>
+  import Field from "./Field.svelte"
+  import Stepper from "./Core/Stepper.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let placeholder = null
+  export let disabled = false
+  export let readonly = false
+  export let error = null
+  export let updateOnChange = true
+  export let quiet = false
+  export let min = null
+  export let max = null
+  export let step = 1
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <Stepper
+    {updateOnChange}
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {placeholder}
+    {quiet}
+    {min}
+    {max}
+    {step}
+    on:change={onChange}
+    on:click
+    on:input
+    on:blur
+    on:focus
+    on:keyup
+  />
+</Field>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 3a491bfb54..08ece6b93c 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -5,6 +5,7 @@ import "@spectrum-css/icon/dist/index-vars.css"
 
 // Components
 export { default as Input } from "./Form/Input.svelte"
+export { default as Stepper } from "./Form/Stepper.svelte"
 export { default as TextArea } from "./Form/TextArea.svelte"
 export { default as Select } from "./Form/Select.svelte"
 export { default as Combobox } from "./Form/Combobox.svelte"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 6deff28fad..a3b20aa862 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -206,6 +206,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-3.0.2.tgz#dc54b6cd113413dcdb909c486b5d7bae60db65c5"
   integrity sha512-xodB8g8vGJH20XmUj9ZsPlM1jHrGeRbvmVXkz0q7YvQrYAhim8pP3W+XKKZAletPFAuu8cmUOc6SWn6i4X4z6w==
 
+"@spectrum-css/stepper@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-3.0.3.tgz#ae89846886431e3edeee060207b8f81540f73a34"
+  integrity sha512-prAD61ImlOTs9b6PfB3cB08x4lAfxtvnW+RZiTYky0E8GgZdrc/MfCkL5/oqQaIQUtyQv/3Lb7ELAf/0K8QTXw==
+
 "@spectrum-css/switch@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-1.0.2.tgz#f0b4c69271964573e02b08e90998096e49e1de44"
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
index 64668d05c8..213ffbbc92 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
@@ -1,4 +1,4 @@
-import { Checkbox, Input, Select } from "@budibase/bbui"
+import { Checkbox, Input, Select, Stepper } from "@budibase/bbui"
 import DataSourceSelect from "./DataSourceSelect.svelte"
 import DataProviderSelect from "./DataProviderSelect.svelte"
 import EventsEditor from "./EventsEditor"
@@ -22,7 +22,7 @@ const componentMap = {
   dataSource: DataSourceSelect,
   dataProvider: DataProviderSelect,
   boolean: Checkbox,
-  number: Input,
+  number: Stepper,
   event: EventsEditor,
   table: TableSelect,
   color: ColorPicker,
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 95f41a85ef..b8c7bdc41d 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1725,6 +1725,12 @@
           "label": "Custom"
         }
       },
+      {
+        "type": "number",
+        "label": "Number of steps",
+        "key": "steps",
+        "defaultValue": 1
+      },
       {
         "type": "boolean",
         "label": "Disabled",

From c1597f848179c181d7fd799a13f272447541736c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 18 Aug 2021 14:58:35 +0100
Subject: [PATCH 02/30] Add initial form step component

---
 packages/standard-components/src/forms/FormStep.svelte | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 packages/standard-components/src/forms/FormStep.svelte

diff --git a/packages/standard-components/src/forms/FormStep.svelte b/packages/standard-components/src/forms/FormStep.svelte
new file mode 100644
index 0000000000..e69de29bb2

From c44d0a684be1050ff2d2f0acbf80b75c8359ef9e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 18 Aug 2021 14:58:58 +0100
Subject: [PATCH 03/30] Support multiple component context exports and export
 additional context from forms

---
 .../builder/src/builderStore/dataBinding.js   | 122 ++++++++++--------
 .../design/AppPreview/componentStructure.json |   1 +
 .../ComponentSettingsSection.svelte           |   2 +
 packages/client/src/constants.js              |   2 +
 packages/standard-components/manifest.json    |  51 +++++++-
 .../src/forms/FormStep.svelte                 |  18 +++
 .../src/forms/InnerForm.svelte                |  28 +++-
 .../standard-components/src/forms/index.js    |   1 +
 8 files changed, 163 insertions(+), 62 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index dc995d611c..00eaaf0249 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -120,71 +120,79 @@ const getContextBindings = (asset, componentId) => {
   // Create bindings for each data provider
   dataProviders.forEach(component => {
     const def = store.actions.components.getDefinition(component._component)
-    const contextDefinition = def.context
-    let schema
-    let readablePrefix
+    const contexts = Array.isArray(def.context) ? def.context : [def.context]
 
-    if (contextDefinition.type === "form") {
-      // Forms do not need table schemas
-      // Their schemas are built from their component field names
-      schema = buildFormSchema(component)
-      readablePrefix = "Fields"
-    } else if (contextDefinition.type === "static") {
-      // Static contexts are fully defined by the components
-      schema = {}
-      const values = contextDefinition.values || []
-      values.forEach(value => {
-        schema[value.key] = { name: value.label, type: "string" }
-      })
-    } else if (contextDefinition.type === "schema") {
-      // Schema contexts are generated dynamically depending on their data
-      const datasource = getDatasourceForProvider(asset, component)
-      if (!datasource) {
+    // Create bindings for each context block provided by this data provider
+    contexts.forEach(context => {
+      if (!context?.type) {
         return
       }
-      const info = getSchemaForDatasource(asset, datasource)
-      schema = info.schema
-      readablePrefix = info.table?.name
-    }
-    if (!schema) {
-      return
-    }
 
-    const keys = Object.keys(schema).sort()
+      let schema
+      let readablePrefix
 
-    // Create bindable properties for each schema field
-    const safeComponentId = makePropSafe(component._id)
-    keys.forEach(key => {
-      const fieldSchema = schema[key]
-
-      // Make safe runtime binding and replace certain bindings with a
-      // new property to help display components
-      let runtimeBoundKey = key
-      if (fieldSchema.type === "link") {
-        runtimeBoundKey = `${key}_text`
-      } else if (fieldSchema.type === "attachment") {
-        runtimeBoundKey = `${key}_first`
+      if (context.type === "form") {
+        // Forms do not need table schemas
+        // Their schemas are built from their component field names
+        schema = buildFormSchema(component)
+        readablePrefix = "Fields"
+      } else if (context.type === "static") {
+        // Static contexts are fully defined by the components
+        schema = {}
+        const values = context.values || []
+        values.forEach(value => {
+          schema[value.key] = { name: value.label, type: "string" }
+        })
+      } else if (context.type === "schema") {
+        // Schema contexts are generated dynamically depending on their data
+        const datasource = getDatasourceForProvider(asset, component)
+        if (!datasource) {
+          return
+        }
+        const info = getSchemaForDatasource(asset, datasource)
+        schema = info.schema
+        readablePrefix = info.table?.name
       }
-      const runtimeBinding = `${safeComponentId}.${makePropSafe(
-        runtimeBoundKey
-      )}`
-
-      // Optionally use a prefix with readable bindings
-      let readableBinding = component._instanceName
-      if (readablePrefix) {
-        readableBinding += `.${readablePrefix}`
+      if (!schema) {
+        return
       }
-      readableBinding += `.${fieldSchema.name || key}`
 
-      // Create the binding object
-      bindings.push({
-        type: "context",
-        runtimeBinding,
-        readableBinding,
-        // Field schema and provider are required to construct relationship
-        // datasource options, based on bindable properties
-        fieldSchema,
-        providerId: component._id,
+      const keys = Object.keys(schema).sort()
+
+      // Create bindable properties for each schema field
+      const safeComponentId = makePropSafe(component._id)
+      keys.forEach(key => {
+        const fieldSchema = schema[key]
+
+        // Make safe runtime binding and replace certain bindings with a
+        // new property to help display components
+        let runtimeBoundKey = key
+        if (fieldSchema.type === "link") {
+          runtimeBoundKey = `${key}_text`
+        } else if (fieldSchema.type === "attachment") {
+          runtimeBoundKey = `${key}_first`
+        }
+        const runtimeBinding = `${safeComponentId}.${makePropSafe(
+          runtimeBoundKey
+        )}`
+
+        // Optionally use a prefix with readable bindings
+        let readableBinding = component._instanceName
+        if (readablePrefix) {
+          readableBinding += `.${readablePrefix}`
+        }
+        readableBinding += `.${fieldSchema.name || key}`
+
+        // Create the binding object
+        bindings.push({
+          type: "context",
+          runtimeBinding,
+          readableBinding,
+          // Field schema and provider are required to construct relationship
+          // datasource options, based on bindable properties
+          fieldSchema,
+          providerId: component._id,
+        })
       })
     })
   })
diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index c83686158f..cea20a7dcf 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -10,6 +10,7 @@
     "icon": "Form",
     "children": [
       "form",
+      "formstep",
       "fieldgroup",
       "stringfield",
       "numberfield",
diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index 9ec1108985..f047e9316b 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@@ -85,6 +85,8 @@
           props={{
             options: setting.options || [],
             placeholder: setting.placeholder || null,
+            min: setting.min || null,
+            max: setting.max || null,
           }}
           {bindings}
           {componentDefinition}
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index 7204b8c951..99e95e8398 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -7,6 +7,8 @@ export const ActionTypes = {
   RefreshDatasource: "RefreshDatasource",
   SetDataProviderQuery: "SetDataProviderQuery",
   ClearForm: "ClearForm",
+  NextFormStep: "NextFormStep",
+  PrevFormStep: "PrevFormStep",
 }
 
 export const ApiVersion = "1"
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index b8c7bdc41d..d5d22aba3a 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1705,7 +1705,9 @@
     "illegalChildren": ["section"],
     "actions": [
       "ValidateForm",
-      "ClearForm"
+      "ClearForm",
+      "NextFormStep",
+      "PrevFormStep"
     ],
     "styles": ["size"],
     "settings": [
@@ -1727,7 +1729,7 @@
       },
       {
         "type": "number",
-        "label": "Number of steps",
+        "label": "Steps",
         "key": "steps",
         "defaultValue": 1
       },
@@ -1738,8 +1740,51 @@
         "defaultValue": false
       }
     ],
+    "context": [
+      {
+        "type": "static",
+        "values":  [
+          {
+            "label": "Valid",
+            "key": "valid"
+          },
+          {
+            "label": "Step",
+            "key": "step"
+          }
+        ]
+      },
+      {
+        "type": "form"
+      }
+    ]
+  },
+  "formstep": {
+    "name": "Form Step",
+    "icon": "Form",
+    "hasChildren": true,
+    "illegalChildren": ["section"],
+    "actions": [
+      "ValidateFormStep"
+    ],
+    "styles": ["size"],
+    "settings": [
+      {
+        "type": "number",
+        "label": "Step",
+        "key": "step",
+        "defaultValue": 1,
+        "min": 1
+      }
+    ],
     "context": {
-      "type": "form"
+      "type": "static",
+      "values":  [
+        {
+          "label": "Valid",
+          "key": "valid"
+        }
+      ]
     }
   },
   "fieldgroup": {
diff --git a/packages/standard-components/src/forms/FormStep.svelte b/packages/standard-components/src/forms/FormStep.svelte
index e69de29bb2..449978ec08 100644
--- a/packages/standard-components/src/forms/FormStep.svelte
+++ b/packages/standard-components/src/forms/FormStep.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { getContext } from "svelte"
+  import Placeholder from "../Placeholder.svelte"
+
+  export let step
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+  const formContext = getContext("form")
+</script>
+
+{#if !formContext}
+  <Placeholder text="Form steps need to be wrapped in a form" />
+{:else}
+  <div use:styleable={$component.styles}>
+    <slot />
+  </div>
+{/if}
diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index eea2e6ebf0..9355c67660 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -17,7 +17,12 @@
   let fieldMap = {}
 
   // Form state contains observable data about the form
-  const formState = writable({ values: initialValues, errors: {}, valid: true })
+  const formState = writable({
+    values: initialValues,
+    errors: {},
+    valid: true,
+    step: 1,
+  })
 
   // Form API contains functions to control the form
   const formApi = {
@@ -82,6 +87,18 @@
         fieldApi.clearValue()
       })
     },
+    nextStep: () => {
+      formState.update(state => ({
+        ...state,
+        step: state.step + 1,
+      }))
+    },
+    prevStep: () => {
+      formState.update(state => ({
+        ...state,
+        step: Math.max(1, state.step - 1),
+      }))
+    },
   }
 
   // Provide both form API and state to children
@@ -91,6 +108,8 @@
   const actions = [
     { type: ActionTypes.ValidateForm, callback: formApi.validate },
     { type: ActionTypes.ClearForm, callback: formApi.clear },
+    { type: ActionTypes.NextFormStep, callback: formApi.nextStep },
+    { type: ActionTypes.PrevFormStep, callback: formApi.prevStep },
   ]
 
   // Creates an API for a specific field
@@ -229,7 +248,12 @@
 
 <Provider
   {actions}
-  data={{ ...$formState.values, tableId: dataSource?.tableId }}
+  data={{
+    ...$formState.values,
+    tableId: dataSource?.tableId,
+    valid: $formState.valid,
+    step: $formState.step,
+  }}
 >
   <div use:styleable={$component.styles}>
     {#if loaded}
diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js
index fed371278b..4f3eaa5adb 100644
--- a/packages/standard-components/src/forms/index.js
+++ b/packages/standard-components/src/forms/index.js
@@ -9,3 +9,4 @@ export { default as datetimefield } from "./DateTimeField.svelte"
 export { default as attachmentfield } from "./AttachmentField.svelte"
 export { default as relationshipfield } from "./RelationshipField.svelte"
 export { default as passwordfield } from "./PasswordField.svelte"
+export { default as formstep } from "./FormStep.svelte"

From 01b28f358a9888ca1fd5683bc0223c85941532cc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 18 Aug 2021 15:21:18 +0100
Subject: [PATCH 04/30] Add button actions for navigating form steps

---
 .../EventsEditor/actions/NextFormStep.svelte  | 35 +++++++++++++++++++
 .../EventsEditor/actions/PrevFormStep.svelte  | 35 +++++++++++++++++++
 .../EventsEditor/actions/index.js             | 10 ++++++
 packages/client/src/utils/buttonActions.js    | 18 ++++++++++
 .../src/forms/FormStep.svelte                 |  9 ++++-
 5 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte
new file mode 100644
index 0000000000..a635e158cb
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { currentAsset, store } from "builderStore"
+  import { getActionProviderComponents } from "builderStore/dataBinding"
+
+  export let parameters
+
+  $: actionProviders = getActionProviderComponents(
+    $currentAsset,
+    $store.selectedComponentId,
+    "NextFormStep"
+  )
+</script>
+
+<div class="root">
+  <Label small>Form</Label>
+  <Select
+    bind:value={parameters.componentId}
+    options={actionProviders}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+  />
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte
new file mode 100644
index 0000000000..4efcd8378c
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { currentAsset, store } from "builderStore"
+  import { getActionProviderComponents } from "builderStore/dataBinding"
+
+  export let parameters
+
+  $: actionProviders = getActionProviderComponents(
+    $currentAsset,
+    $store.selectedComponentId,
+    "PrevFormStep"
+  )
+</script>
+
+<div class="root">
+  <Label small>Form</Label>
+  <Select
+    bind:value={parameters.componentId}
+    options={actionProviders}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+  />
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index c769a2300f..75feb533a7 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -7,6 +7,8 @@ import ValidateForm from "./ValidateForm.svelte"
 import LogOut from "./LogOut.svelte"
 import ClearForm from "./ClearForm.svelte"
 import CloseScreenModal from "./CloseScreenModal.svelte"
+import NextFormStep from "./NextFormStep.svelte"
+import PrevFormStep from "./PrevFormStep.svelte"
 
 // Defines which actions are available to configure in the front end.
 // Unfortunately the "name" property is used as the identifier so please don't
@@ -52,4 +54,12 @@ export default [
     name: "Close Screen Modal",
     component: CloseScreenModal,
   },
+  {
+    name: "Next Form Step",
+    component: NextFormStep,
+  },
+  {
+    name: "Previous Form Step",
+    component: PrevFormStep,
+  },
 ]
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 408b35a705..dc190bad2f 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -99,6 +99,22 @@ const clearFormHandler = async (action, context) => {
   )
 }
 
+const nextFormStepHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.NextFormStep
+  )
+}
+
+const prevFormStepHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.PrevFormStep
+  )
+}
+
 const closeScreenModalHandler = () => {
   // Emit this as a window event, so parent screens which are iframing us in
   // can close the modal
@@ -116,6 +132,8 @@ const handlerMap = {
   ["Log Out"]: logoutHandler,
   ["Clear Form"]: clearFormHandler,
   ["Close Screen Modal"]: closeScreenModalHandler,
+  ["Next Form Step"]: nextFormStepHandler,
+  ["Previous Form Step"]: prevFormStepHandler,
 }
 
 const confirmTextMap = {
diff --git a/packages/standard-components/src/forms/FormStep.svelte b/packages/standard-components/src/forms/FormStep.svelte
index 449978ec08..45db9d1f52 100644
--- a/packages/standard-components/src/forms/FormStep.svelte
+++ b/packages/standard-components/src/forms/FormStep.svelte
@@ -7,12 +7,19 @@
   const { styleable } = getContext("sdk")
   const component = getContext("component")
   const formContext = getContext("form")
+
+  $: formState = formContext?.formState
 </script>
 
 {#if !formContext}
   <Placeholder text="Form steps need to be wrapped in a form" />
-{:else}
+{:else if step === $formState.step}
   <div use:styleable={$component.styles}>
+    <div>
+      Step {step} is visible!
+    </div>
     <slot />
   </div>
+{:else}
+  <div>hiding step {step}!</div>
 {/if}

From 9e24a76810dfb2ea0683d414b01eed14e6bd8fd0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 19 Aug 2021 12:52:13 +0100
Subject: [PATCH 05/30] Ensure client preview indicator doesn't crash when
 encountering incorrect node types

---
 packages/client/src/components/preview/IndicatorSet.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 74c9f06f0d..3151a8bd75 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -61,7 +61,7 @@
     // Sanity limit of 100 active indicators
     const children = Array.from(parents)
       .map(parent => parent?.childNodes?.[0])
-      .filter(child => child != null)
+      .filter(node => node?.nodeType === 1)
       .slice(0, 100)
 
     // If there aren't any nodes then reset

From 3fa5b3b57174cccdd6ad9d07b4ed896eb3bb605d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 19 Aug 2021 12:52:50 +0100
Subject: [PATCH 06/30] Update validate form action to be able to only validate
 the current form step

---
 .../EventsEditor/actions/ValidateForm.svelte         |  7 ++++++-
 packages/client/src/utils/buttonActions.js           | 12 +++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
index 462597f265..d61c9567d8 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label } from "@budibase/bbui"
+  import { Select, Label, Checkbox } from "@budibase/bbui"
   import { currentAsset, store } from "builderStore"
   import { getActionProviderComponents } from "builderStore/dataBinding"
 
@@ -20,6 +20,11 @@
     getOptionLabel={x => x._instanceName}
     getOptionValue={x => x._id}
   />
+  <div />
+  <Checkbox
+    text="Validate only current step"
+    bind:value={parameters.onlyCurrentStep}
+  />
 </div>
 
 <style>
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index dc190bad2f..6affe66491 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -64,10 +64,15 @@ const queryExecutionHandler = async action => {
   })
 }
 
-const executeActionHandler = async (context, componentId, actionType) => {
+const executeActionHandler = async (
+  context,
+  componentId,
+  actionType,
+  params
+) => {
   const fn = context[`${componentId}_${actionType}`]
   if (fn) {
-    return await fn()
+    return await fn(params)
   }
 }
 
@@ -75,7 +80,8 @@ const validateFormHandler = async (action, context) => {
   return await executeActionHandler(
     context,
     action.parameters.componentId,
-    ActionTypes.ValidateForm
+    ActionTypes.ValidateForm,
+    action.parameters.onlyCurrentStep
   )
 }
 

From 700e36854c9d66243bc05cec6ef1f822de6c8a64 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 19 Aug 2021 12:53:31 +0100
Subject: [PATCH 07/30] Rewrite client form library to derive state where
 possible and handle steps

---
 packages/standard-components/manifest.json    |  19 +-
 .../src/forms/AttachmentField.svelte          |   8 +-
 .../src/forms/BooleanField.svelte             |   8 +-
 .../src/forms/DateTimeField.svelte            |   8 +-
 .../src/forms/Field.svelte                    |  23 +-
 .../src/forms/FieldGroup.svelte               |   2 +-
 .../src/forms/FieldGroupFallback.svelte       |   2 +-
 .../standard-components/src/forms/Form.svelte |  60 +++-
 .../src/forms/FormStep.svelte                 |  13 +-
 .../src/forms/InnerForm.svelte                | 281 +++++++++---------
 .../src/forms/LongFormField.svelte            |   8 +-
 .../src/forms/OptionsField.svelte             |  16 +-
 .../src/forms/RelationshipField.svelte        |  10 +-
 .../src/forms/StringField.svelte              |  10 +-
 14 files changed, 250 insertions(+), 218 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index d5d22aba3a..785b549c31 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1749,8 +1749,12 @@
             "key": "valid"
           },
           {
-            "label": "Step",
-            "key": "step"
+            "label": "Current Step",
+            "key": "currentStep"
+          },
+          {
+            "label": "Current Step Valid",
+            "key": "currentStepValid"
           }
         ]
       },
@@ -1776,16 +1780,7 @@
         "defaultValue": 1,
         "min": 1
       }
-    ],
-    "context": {
-      "type": "static",
-      "values":  [
-        {
-          "label": "Valid",
-          "key": "valid"
-        }
-      ]
-    }
+    ]
   },
   "fieldgroup": {
     "name": "Field Group",
diff --git a/packages/standard-components/src/forms/AttachmentField.svelte b/packages/standard-components/src/forms/AttachmentField.svelte
index f2c4a35030..8c4eaea243 100644
--- a/packages/standard-components/src/forms/AttachmentField.svelte
+++ b/packages/standard-components/src/forms/AttachmentField.svelte
@@ -42,11 +42,11 @@
   bind:fieldApi
   defaultValue={[]}
 >
-  {#if $fieldState}
+  {#if fieldState}
     <CoreDropzone
-      value={$fieldState.value}
-      disabled={$fieldState.disabled}
-      error={$fieldState.error}
+      value={fieldState.value}
+      disabled={fieldState.disabled}
+      error={fieldState.error}
       on:change={e => {
         fieldApi.setValue(e.detail)
       }}
diff --git a/packages/standard-components/src/forms/BooleanField.svelte b/packages/standard-components/src/forms/BooleanField.svelte
index d8507b8a03..1e3bc2fc8c 100644
--- a/packages/standard-components/src/forms/BooleanField.svelte
+++ b/packages/standard-components/src/forms/BooleanField.svelte
@@ -39,10 +39,10 @@
 >
   {#if fieldState}
     <CoreCheckbox
-      value={$fieldState.value}
-      disabled={$fieldState.disabled}
-      error={$fieldState.error}
-      id={$fieldState.fieldId}
+      value={fieldState.value}
+      disabled={fieldState.disabled}
+      error={fieldState.error}
+      id={fieldState.fieldId}
       {size}
       on:change={e => fieldApi.setValue(e.detail)}
       {text}
diff --git a/packages/standard-components/src/forms/DateTimeField.svelte b/packages/standard-components/src/forms/DateTimeField.svelte
index bd26e3995a..534bb5c0a4 100644
--- a/packages/standard-components/src/forms/DateTimeField.svelte
+++ b/packages/standard-components/src/forms/DateTimeField.svelte
@@ -51,11 +51,11 @@
 >
   {#if fieldState}
     <CoreDatePicker
-      value={$fieldState.value}
+      value={fieldState.value}
       on:change={e => fieldApi.setValue(e.detail)}
-      disabled={$fieldState.disabled}
-      error={$fieldState.error}
-      id={$fieldState.fieldId}
+      disabled={fieldState.disabled}
+      error={fieldState.error}
+      id={fieldState.fieldId}
       {enableTime}
       {placeholder}
     />
diff --git a/packages/standard-components/src/forms/Field.svelte b/packages/standard-components/src/forms/Field.svelte
index 5de84f6777..b202bc506c 100644
--- a/packages/standard-components/src/forms/Field.svelte
+++ b/packages/standard-components/src/forms/Field.svelte
@@ -15,7 +15,8 @@
 
   // Get contexts
   const formContext = getContext("form")
-  const fieldGroupContext = getContext("fieldGroup")
+  const formStepContext = getContext("form-step")
+  const fieldGroupContext = getContext("field-group")
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
@@ -26,16 +27,20 @@
     field,
     defaultValue,
     disabled,
-    validation
+    validation,
+    formStepContext || 1
   )
 
   // Expose field properties to parent component
-  fieldState = formField?.fieldState
-  fieldApi = formField?.fieldApi
-  fieldSchema = formField?.fieldSchema
+  $: fieldState = $formField?.fieldState
+  $: fieldApi = $formField?.fieldApi
+  $: fieldSchema = $formField?.fieldSchema
 
   // Keep validation rules up to date
-  $: fieldApi?.updateValidation(validation)
+  $: updateValidation(validation)
+  const updateValidation = validation => {
+    fieldApi?.updateValidation(validation)
+  }
 
   // Extract label position from field group context
   $: labelPositionClass =
@@ -46,7 +51,7 @@
   <div class="spectrum-Form-item" use:styleable={$component.styles}>
     <label
       class:hidden={!label}
-      for={$fieldState?.fieldId}
+      for={fieldState?.fieldId}
       class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}
     >
       {label || ""}
@@ -64,8 +69,8 @@
         />
       {:else}
         <slot />
-        {#if $fieldState.error}
-          <div class="error">{$fieldState.error}</div>
+        {#if fieldState.error}
+          <div class="error">{fieldState.error}</div>
         {/if}
       {/if}
     </div>
diff --git a/packages/standard-components/src/forms/FieldGroup.svelte b/packages/standard-components/src/forms/FieldGroup.svelte
index 9a3cf5c506..a2fbe7d103 100644
--- a/packages/standard-components/src/forms/FieldGroup.svelte
+++ b/packages/standard-components/src/forms/FieldGroup.svelte
@@ -5,7 +5,7 @@
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
-  setContext("fieldGroup", { labelPosition })
+  setContext("field-group", { labelPosition })
 </script>
 
 <div class="wrapper" use:styleable={$component.styles}>
diff --git a/packages/standard-components/src/forms/FieldGroupFallback.svelte b/packages/standard-components/src/forms/FieldGroupFallback.svelte
index 782552a54e..fd0346a9ef 100644
--- a/packages/standard-components/src/forms/FieldGroupFallback.svelte
+++ b/packages/standard-components/src/forms/FieldGroupFallback.svelte
@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
 
-  const fieldGroupContext = getContext("fieldGroup")
+  const fieldGroupContext = getContext("field-group")
 </script>
 
 {#if fieldGroupContext}
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 2514232ebc..a065432030 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, onMount } from "svelte"
   import InnerForm from "./InnerForm.svelte"
 
   export let dataSource
@@ -9,6 +9,11 @@
   export let actionType = "Create"
 
   const context = getContext("context")
+  const { API } = getContext("sdk")
+
+  let loaded = false
+  let schema
+  let table
 
   // Returns the closes data context which isn't a built in context
   const getInitialValues = (type, dataSource, context) => {
@@ -32,19 +37,48 @@
     return closestContext
   }
 
+  // Fetches the form schema from this form's dataSource, if one exists
+  const fetchSchema = async () => {
+    if (!dataSource?.tableId) {
+      schema = {}
+      table = null
+    } else {
+      table = await API.fetchTableDefinition(dataSource?.tableId)
+      if (table) {
+        if (dataSource?.type === "query") {
+          schema = {}
+          const params = table.parameters || []
+          params.forEach(param => {
+            schema[param.name] = { ...param, type: "string" }
+          })
+        } else {
+          schema = table.schema || {}
+        }
+      }
+    }
+    loaded = true
+  }
+
   $: initialValues = getInitialValues(actionType, dataSource, $context)
   $: resetKey = JSON.stringify(initialValues)
+
+  // Load the form schema on mount
+  onMount(fetchSchema)
 </script>
 
-{#key resetKey}
-  <InnerForm
-    {dataSource}
-    {theme}
-    {size}
-    {disabled}
-    {actionType}
-    {initialValues}
-  >
-    <slot />
-  </InnerForm>
-{/key}
+{#if loaded}
+  {#key resetKey}
+    <InnerForm
+      {dataSource}
+      {theme}
+      {size}
+      {disabled}
+      {actionType}
+      {schema}
+      {table}
+      {initialValues}
+    >
+      <slot />
+    </InnerForm>
+  {/key}
+{/if}
diff --git a/packages/standard-components/src/forms/FormStep.svelte b/packages/standard-components/src/forms/FormStep.svelte
index 45db9d1f52..e048a600f5 100644
--- a/packages/standard-components/src/forms/FormStep.svelte
+++ b/packages/standard-components/src/forms/FormStep.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, setContext } from "svelte"
   import Placeholder from "../Placeholder.svelte"
 
   export let step
@@ -8,18 +8,17 @@
   const component = getContext("component")
   const formContext = getContext("form")
 
+  // Set form step context so fields know what step they are within
+  setContext("form-step", step || 1)
+
   $: formState = formContext?.formState
+  $: currentStep = $formState?.currentStep
 </script>
 
 {#if !formContext}
   <Placeholder text="Form steps need to be wrapped in a form" />
-{:else if step === $formState.step}
+{:else if step === currentStep}
   <div use:styleable={$component.styles}>
-    <div>
-      Step {step} is visible!
-    </div>
     <slot />
   </div>
-{:else}
-  <div>hiding step {step}!</div>
 {/if}
diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index 9355c67660..32cae9f8bc 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -1,41 +1,84 @@
 <script>
-  import { setContext, getContext, onMount } from "svelte"
-  import { writable, get } from "svelte/store"
+  import { setContext, getContext } from "svelte"
+  import { derived, get, writable } from "svelte/store"
   import { createValidatorFromConstraints } from "./validation"
   import { generateID } from "../helpers"
 
   export let dataSource
   export let disabled = false
   export let initialValues
+  export let schema
+  export let table
 
   const component = getContext("component")
-  const { styleable, API, Provider, ActionTypes } = getContext("sdk")
+  const { styleable, Provider, ActionTypes } = getContext("sdk")
 
-  let loaded = false
-  let schema
-  let table
-  let fieldMap = {}
-
-  // Form state contains observable data about the form
+  let fields = []
+  const currentStep = writable(1)
   const formState = writable({
-    values: initialValues,
+    values: {},
     errors: {},
     valid: true,
-    step: 1,
+    currentStep: 1,
   })
 
-  // Form API contains functions to control the form
+  // Reactive derived stores to derive form state from field array
+  $: values = deriveFieldProperty(fields, f => f.fieldState.value)
+  $: errors = deriveFieldProperty(fields, f => f.fieldState.error)
+  $: valid = !Object.values($errors).some(error => error != null)
+
+  // Derive which fields belong in which steps
+  $: currentStepValid = derived(
+    [currentStep, ...fields],
+    ([currentStepValue, ...fieldsValue]) => {
+      return !fieldsValue
+        .filter(f => f.step === currentStepValue)
+        .some(f => f.fieldState.error != null)
+    }
+  )
+
+  // Update form state store from derived stores
+  $: {
+    formState.set({
+      values: $values,
+      errors: $errors,
+      valid,
+      currentStep: $currentStep,
+    })
+  }
+
+  // Generates a derived store from an array of fields, comprised of a map of
+  // extracted values from the field array
+  const deriveFieldProperty = (fieldStores, getProp) => {
+    return derived(fieldStores, fieldValues => {
+      const reducer = (map, field) => ({ ...map, [field.name]: getProp(field) })
+      return fieldValues.reduce(reducer, {})
+    })
+  }
+
+  // Searches the field array for a certain field
+  const getField = name => {
+    return fields.find(field => get(field).name === name)
+  }
+
   const formApi = {
     registerField: (
       field,
       defaultValue = null,
       fieldDisabled = false,
-      validationRules
+      validationRules,
+      step = 1
     ) => {
       if (!field) {
         return
       }
 
+      // Skip if we've already registered this field
+      const existingField = getField(field)
+      if (existingField) {
+        return existingField
+      }
+
       // Auto columns are always disabled
       const isAutoColumn = !!schema?.[field]?.autocolumn
 
@@ -48,99 +91,79 @@
         table
       )
 
-      // Construct field object
-      fieldMap[field] = {
-        fieldState: makeFieldState(
-          field,
-          validator,
+      // Construct field info
+      const fieldInfo = writable({
+        name: field,
+        step: step || 1,
+        fieldState: {
+          fieldId: `id-${generateID()}`,
+          value: initialValues[field] ?? defaultValue,
+          error: null,
+          disabled: disabled || fieldDisabled || isAutoColumn,
           defaultValue,
-          disabled || fieldDisabled || isAutoColumn
-        ),
+          validator,
+        },
         fieldApi: makeFieldApi(field, defaultValue),
         fieldSchema: schema?.[field] ?? {},
+      })
+
+      // Add this field
+      fields = [...fields, fieldInfo]
+
+      return fieldInfo
+    },
+    validate: (onlyCurrentStep = false) => {
+      // Validate only the current step if required
+      if (onlyCurrentStep) {
+        const stepFields = fields.filter(f => get(f).step === get(currentStep))
+        for (let field of stepFields) {
+          if (!get(field).fieldApi.validate()) {
+            return false
+          }
+        }
+        return true
       }
 
-      // Set initial value
-      const initialValue = get(fieldMap[field].fieldState).value
-      formState.update(state => ({
-        ...state,
-        values: {
-          ...state.values,
-          [field]: initialValue,
-        },
-      }))
-
-      return fieldMap[field]
-    },
-    validate: () => {
-      const fields = Object.keys(fieldMap)
-      fields.forEach(field => {
-        const { fieldApi } = fieldMap[field]
-        fieldApi.validate()
-      })
-      return get(formState).valid
+      // Otherwise validate all fields
+      for (let field of fields) {
+        if (!get(field).fieldApi.validate()) {
+          return false
+        }
+      }
+      return true
     },
     clear: () => {
-      const fields = Object.keys(fieldMap)
+      // Clear the form by clearing each individual field
       fields.forEach(field => {
-        const { fieldApi } = fieldMap[field]
-        fieldApi.clearValue()
+        get(field).fieldApi.clearValue()
       })
     },
     nextStep: () => {
-      formState.update(state => ({
-        ...state,
-        step: state.step + 1,
-      }))
+      currentStep.update(step => step + 1)
     },
     prevStep: () => {
-      formState.update(state => ({
-        ...state,
-        step: Math.max(1, state.step - 1),
-      }))
+      currentStep.update(step => Math.max(1, step - 1))
     },
   }
 
-  // Provide both form API and state to children
-  setContext("form", { formApi, formState, dataSource })
-
-  // Action context to pass to children
-  const actions = [
-    { type: ActionTypes.ValidateForm, callback: formApi.validate },
-    { type: ActionTypes.ClearForm, callback: formApi.clear },
-    { type: ActionTypes.NextFormStep, callback: formApi.nextStep },
-    { type: ActionTypes.PrevFormStep, callback: formApi.prevStep },
-  ]
-
   // Creates an API for a specific field
   const makeFieldApi = field => {
     // Sets the value for a certain field and invokes validation
     const setValue = (value, skipCheck = false) => {
-      const { fieldState } = fieldMap[field]
-      const { validator } = get(fieldState)
+      const fieldInfo = getField(field)
+      const { fieldState } = get(fieldInfo)
+      const { validator } = fieldState
 
       // Skip if the value is the same
-      if (!skipCheck && get(fieldState).value === value) {
+      if (!skipCheck && fieldState.value === value) {
         return
       }
 
       // Update field state
       const error = validator ? validator(value) : null
-      fieldState.update(state => {
-        state.value = value
-        state.error = error
-        return state
-      })
-
-      // Update form state
-      formState.update(state => {
-        state.values = { ...state.values, [field]: value }
-        if (error) {
-          state.errors = { ...state.errors, [field]: error }
-        } else {
-          delete state.errors[field]
-        }
-        state.valid = Object.keys(state.errors).length === 0
+      fieldInfo.update(state => {
+        state.fieldState.value = value
+        state.fieldState.error = error
         return state
       })
 
@@ -149,30 +172,23 @@
 
     // Clears the value of a certain field back to the initial value
     const clearValue = () => {
-      const { fieldState } = fieldMap[field]
-      const { defaultValue } = get(fieldState)
-      const newValue = initialValues[field] ?? defaultValue
+      const fieldInfo = getField(field)
+      const { fieldState } = get(fieldInfo)
+      const newValue = initialValues[field] ?? fieldState.defaultValue
 
       // Update field state
-      fieldState.update(state => {
-        state.value = newValue
-        state.error = null
-        return state
-      })
-
-      // Update form state
-      formState.update(state => {
-        state.values = { ...state.values, [field]: newValue }
-        delete state.errors[field]
-        state.valid = Object.keys(state.errors).length === 0
+      fieldInfo.update(state => {
+        state.fieldState.value = newValue
+        state.fieldState.error = null
         return state
       })
     }
 
     // Updates the validator rules for a certain field
     const updateValidation = validationRules => {
-      const { fieldState } = fieldMap[field]
-      const { value, error } = get(fieldState)
+      const fieldInfo = getField(field)
+      const { fieldState } = get(fieldInfo)
+      const { value, error } = fieldState
 
       // Create new validator
       const schemaConstraints = schema?.[field]?.constraints
@@ -184,8 +200,8 @@
       )
 
       // Update validator
-      fieldState.update(state => {
-        state.validator = validator
+      fieldInfo.update(state => {
+        state.fieldState.validator = validator
         return state
       })
 
@@ -201,63 +217,46 @@
       clearValue,
       updateValidation,
       validate: () => {
-        const { fieldState } = fieldMap[field]
-        setValue(get(fieldState).value, true)
+        // Validate the field by force setting the same value again
+        const { fieldState } = get(getField(field))
+        return setValue(fieldState.value, true)
       },
     }
   }
 
-  // Creates observable state data about a specific field
-  const makeFieldState = (field, validator, defaultValue, fieldDisabled) => {
-    return writable({
-      field,
-      fieldId: `id-${generateID()}`,
-      value: initialValues[field] ?? defaultValue,
-      error: null,
-      disabled: fieldDisabled,
-      defaultValue,
-      validator,
-    })
-  }
+  // Provide form state and api for full control by children
+  setContext("form", {
+    formState,
+    formApi,
 
-  // Fetches the form schema from this form's dataSource, if one exists
-  const fetchSchema = async () => {
-    if (!dataSource?.tableId) {
-      schema = {}
-      table = null
-    } else {
-      table = await API.fetchTableDefinition(dataSource?.tableId)
-      if (table) {
-        if (dataSource?.type === "query") {
-          schema = {}
-          const params = table.parameters || []
-          params.forEach(param => {
-            schema[param.name] = { ...param, type: "string" }
-          })
-        } else {
-          schema = table.schema || {}
-        }
-      }
-    }
-    loaded = true
-  }
+    // Data source is needed by attachment fields to be able to upload files
+    // to the correct table ID
+    dataSource,
+  })
 
-  // Load the form schema on mount
-  onMount(fetchSchema)
+  // Provide form step context so that forms without any step components
+  // register their fields to step 1
+  setContext("form-step", 1)
+
+  // Action context to pass to children
+  const actions = [
+    { type: ActionTypes.ValidateForm, callback: formApi.validate },
+    { type: ActionTypes.ClearForm, callback: formApi.clear },
+    { type: ActionTypes.NextFormStep, callback: formApi.nextStep },
+    { type: ActionTypes.PrevFormStep, callback: formApi.prevStep },
+  ]
 </script>
 
 <Provider
   {actions}
   data={{
-    ...$formState.values,
-    tableId: dataSource?.tableId,
-    valid: $formState.valid,
-    step: $formState.step,
+    ...$values,
+    valid,
+    currentStep: $currentStep,
+    currentStepValid: $currentStepValid,
   }}
 >
   <div use:styleable={$component.styles}>
-    {#if loaded}
-      <slot />
-    {/if}
+    <slot />
   </div>
 </Provider>
diff --git a/packages/standard-components/src/forms/LongFormField.svelte b/packages/standard-components/src/forms/LongFormField.svelte
index f710904254..81ad42bbcb 100644
--- a/packages/standard-components/src/forms/LongFormField.svelte
+++ b/packages/standard-components/src/forms/LongFormField.svelte
@@ -25,11 +25,11 @@
 >
   {#if fieldState}
     <CoreTextArea
-      value={$fieldState.value}
+      value={fieldState.value}
       on:change={e => fieldApi.setValue(e.detail)}
-      disabled={$fieldState.disabled}
-      error={$fieldState.error}
-      id={$fieldState.fieldId}
+      disabled={fieldState.disabled}
+      error={fieldState.error}
+      id={fieldState.fieldId}
       {placeholder}
     />
   {/if}
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index b43ddb9f36..9f3e4a4557 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -77,10 +77,10 @@
   {#if fieldState}
     {#if !optionsType || optionsType === "select"}
       <CoreSelect
-        value={$fieldState.value}
-        id={$fieldState.fieldId}
-        disabled={$fieldState.disabled}
-        error={$fieldState.error}
+        value={fieldState.value}
+        id={fieldState.fieldId}
+        disabled={fieldState.disabled}
+        error={fieldState.error}
         {options}
         {placeholder}
         on:change={e => fieldApi.setValue(e.detail)}
@@ -90,10 +90,10 @@
       />
     {:else if optionsType === "radio"}
       <CoreRadioGroup
-        value={$fieldState.value}
-        id={$fieldState.fieldId}
-        disabled={$fieldState.disabled}
-        error={$fieldState.error}
+        value={fieldState.value}
+        id={fieldState.fieldId}
+        disabled={fieldState.disabled}
+        error={fieldState.error}
         {options}
         on:change={e => fieldApi.setValue(e.detail)}
         getOptionLabel={flatOptions ? x => x : x => x.label}
diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte
index b8600513ad..43f4e64aef 100644
--- a/packages/standard-components/src/forms/RelationshipField.svelte
+++ b/packages/standard-components/src/forms/RelationshipField.svelte
@@ -23,8 +23,8 @@
   $: linkedTableId = fieldSchema?.tableId
   $: fetchRows(linkedTableId)
   $: fetchTable(linkedTableId)
-  $: singleValue = flatten($fieldState?.value)?.[0]
-  $: multiValue = flatten($fieldState?.value) ?? []
+  $: singleValue = flatten(fieldState?.value)?.[0]
+  $: multiValue = flatten(fieldState?.value) ?? []
   $: component = multiselect ? CoreMultiselect : CoreSelect
 
   const fetchTable = async id => {
@@ -81,9 +81,9 @@
       {autocomplete}
       value={multiselect ? multiValue : singleValue}
       on:change={multiselect ? multiHandler : singleHandler}
-      id={$fieldState.fieldId}
-      disabled={$fieldState.disabled}
-      error={$fieldState.error}
+      id={fieldState.fieldId}
+      disabled={fieldState.disabled}
+      error={fieldState.error}
       getOptionLabel={getDisplayName}
       getOptionValue={option => option._id}
       {placeholder}
diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index f04177ec05..7bc4104cc5 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -26,12 +26,12 @@
 >
   {#if fieldState}
     <CoreTextField
-      updateOnChange={false}
-      value={$fieldState.value}
+      updateOnChange={true}
+      value={fieldState.value}
       on:change={e => fieldApi.setValue(e.detail)}
-      disabled={$fieldState.disabled}
-      error={$fieldState.error}
-      id={$fieldState.fieldId}
+      disabled={fieldState.disabled}
+      error={fieldState.error}
+      id={fieldState.fieldId}
       {placeholder}
       {type}
     />

From 4f114e42db890970b4b8c6c9726ecd8bdfdbf5cc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 19 Aug 2021 13:41:18 +0100
Subject: [PATCH 08/30] Clear form field error when re-registering the same
 field

---
 packages/standard-components/src/forms/InnerForm.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index 32cae9f8bc..ec5c066699 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -73,9 +73,14 @@
         return
       }
 
-      // Skip if we've already registered this field
+      // If we've already registered this field then wipe any errors and
+      // return the existing field
       const existingField = getField(field)
       if (existingField) {
+        existingField.update(state => {
+          state.fieldState.error = null
+          return state
+        })
         return existingField
       }
 

From 4859bea3a8049db3bd7273b75d3a86e35dd6438f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 19 Aug 2021 14:02:03 +0100
Subject: [PATCH 09/30] Fix form validation exiting early

---
 .../src/forms/InnerForm.svelte                | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index ec5c066699..c8b76a7200 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -118,24 +118,21 @@
       return fieldInfo
     },
     validate: (onlyCurrentStep = false) => {
-      // Validate only the current step if required
+      let valid = true
+      let validationFields = fields
+
+      // Reduce fields to only the current step if required
       if (onlyCurrentStep) {
-        const stepFields = fields.filter(f => get(f).step === get(currentStep))
-        for (let field of stepFields) {
-          if (!get(field).fieldApi.validate()) {
-            return false
-          }
-        }
-        return true
+        validationFields = fields.filter(f => get(f).step === get(currentStep))
       }
 
-      // Otherwise validate all fields
-      for (let field of fields) {
+      // Validate fields and check if any are invalid
+      validationFields.forEach(field => {
         if (!get(field).fieldApi.validate()) {
-          return false
+          valid = false
         }
-      }
-      return true
+      })
+      return valid
     },
     clear: () => {
       // Clear the form by clearing each individual field

From a4d23aa578ba2811ec349e852d86391399848461 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 19 Aug 2021 14:02:33 +0100
Subject: [PATCH 10/30] Disable updating form values on change due to
 performance issues of enrichment

---
 packages/standard-components/src/forms/StringField.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index 7bc4104cc5..4764cba4d3 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/packages/standard-components/src/forms/StringField.svelte
@@ -26,7 +26,7 @@
 >
   {#if fieldState}
     <CoreTextField
-      updateOnChange={true}
+      updateOnChange={false}
       value={fieldState.value}
       on:change={e => fieldApi.setValue(e.detail)}
       disabled={fieldState.disabled}

From a5778f9dbc66596d89f83b3eae3e734fafe743a7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 19 Aug 2021 14:53:13 +0100
Subject: [PATCH 11/30] Ensure that the correct form step is always visible in
 builder preview

---
 packages/client/src/store/builder.js          | 34 +++++++++++++++++++
 .../src/forms/FormStep.svelte                 | 15 +++++++-
 .../src/forms/InnerForm.svelte                |  5 +++
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/store/builder.js b/packages/client/src/store/builder.js
index 401ccfcc79..65e4f70e65 100644
--- a/packages/client/src/store/builder.js
+++ b/packages/client/src/store/builder.js
@@ -28,6 +28,26 @@ const findComponentById = (component, componentId) => {
   return null
 }
 
+const findComponentIdPath = (component, componentId, path = []) => {
+  if (!component || !componentId) {
+    return null
+  }
+  path = [...path, component._id]
+  if (component._id === componentId) {
+    return path
+  }
+  if (!component._children?.length) {
+    return null
+  }
+  for (let child of component._children) {
+    const result = findComponentIdPath(child, componentId, path)
+    if (result) {
+      return result
+    }
+  }
+  return null
+}
+
 const createBuilderStore = () => {
   const initialState = {
     inBuilder: false,
@@ -37,6 +57,7 @@ const createBuilderStore = () => {
     selectedComponentId: null,
     previewId: null,
     previewType: null,
+    selectedPath: [],
   }
   const writableStore = writable(initialState)
   const derivedStore = derived(writableStore, $state => {
@@ -47,10 +68,15 @@ const createBuilderStore = () => {
     const prefix = "@budibase/standard-components/"
     const type = component?._component?.replace(prefix, "")
     const definition = type ? Manifest[type] : null
+
+    // Derive the selected component path
+    const path = findComponentIdPath(asset.props, selectedComponentId) || []
+
     return {
       ...$state,
       selectedComponent: component,
       selectedComponentDefinition: definition,
+      selectedComponentPath: path,
     }
   })
 
@@ -67,6 +93,14 @@ const createBuilderStore = () => {
     notifyLoaded: () => {
       dispatchEvent("preview-loaded")
     },
+    setSelectedPath: path => {
+      console.log("set to ")
+      console.log(path)
+      writableStore.update(state => {
+        state.selectedPath = path
+        return state
+      })
+    },
   }
   return {
     ...writableStore,
diff --git a/packages/standard-components/src/forms/FormStep.svelte b/packages/standard-components/src/forms/FormStep.svelte
index e048a600f5..4806cfc86c 100644
--- a/packages/standard-components/src/forms/FormStep.svelte
+++ b/packages/standard-components/src/forms/FormStep.svelte
@@ -4,7 +4,7 @@
 
   export let step
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
   const formContext = getContext("form")
 
@@ -13,6 +13,19 @@
 
   $: formState = formContext?.formState
   $: currentStep = $formState?.currentStep
+
+  // If in the builder preview, show this step if it is selected
+  $: {
+    if (step && formContext && $builderStore.inBuilder) {
+      console.log($builderStore.selectedPath)
+      console.log($component.id)
+
+      if ($builderStore.selectedComponentPath?.includes($component.id)) {
+        console.log("selecting " + step)
+        formContext.formApi.setStep(step)
+      }
+    }
+  }
 </script>
 
 {#if !formContext}
diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index c8b76a7200..774419bbdc 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -146,6 +146,11 @@
     prevStep: () => {
       currentStep.update(step => Math.max(1, step - 1))
     },
+    setStep: step => {
+      if (step) {
+        currentStep.set(step)
+      }
+    },
   }
 
   // Creates an API for a specific field

From 3020b59d86c0f04d37dcb9d54a02da06bb981b12 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 19 Aug 2021 14:56:56 +0100
Subject: [PATCH 12/30] Only show the selected step if not already selected

---
 .../src/forms/FormStep.svelte                 | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/standard-components/src/forms/FormStep.svelte b/packages/standard-components/src/forms/FormStep.svelte
index 4806cfc86c..34894aa6eb 100644
--- a/packages/standard-components/src/forms/FormStep.svelte
+++ b/packages/standard-components/src/forms/FormStep.svelte
@@ -2,7 +2,7 @@
   import { getContext, setContext } from "svelte"
   import Placeholder from "../Placeholder.svelte"
 
-  export let step
+  export let step = 1
 
   const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -14,16 +14,15 @@
   $: formState = formContext?.formState
   $: currentStep = $formState?.currentStep
 
-  // If in the builder preview, show this step if it is selected
+  // If in the builder preview, show this step if a child is selected
   $: {
-    if (step && formContext && $builderStore.inBuilder) {
-      console.log($builderStore.selectedPath)
-      console.log($component.id)
-
-      if ($builderStore.selectedComponentPath?.includes($component.id)) {
-        console.log("selecting " + step)
-        formContext.formApi.setStep(step)
-      }
+    if (
+      formContext &&
+      $builderStore.inBuilder &&
+      $builderStore.selectedComponentPath?.includes($component.id) &&
+      $formState?.currentStep !== step
+    ) {
+      formContext.formApi.setStep(step)
     }
   }
 </script>

From 643952e119e86dd10a17af08bbc17da370e321f2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 19 Aug 2021 16:04:15 +0100
Subject: [PATCH 13/30] Fix crash when evaluating builder preview specific code
 in prod apps

---
 packages/client/src/store/builder.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/client/src/store/builder.js b/packages/client/src/store/builder.js
index 65e4f70e65..0fa109fc1c 100644
--- a/packages/client/src/store/builder.js
+++ b/packages/client/src/store/builder.js
@@ -61,6 +61,11 @@ const createBuilderStore = () => {
   }
   const writableStore = writable(initialState)
   const derivedStore = derived(writableStore, $state => {
+    // Avoid any of this logic if we aren't in the builder preview
+    if (!writableStore.inBuilder) {
+      return $state
+    }
+
     // Derive the selected component instance and definition
     const { layout, screen, previewType, selectedComponentId } = $state
     const asset = previewType === "layout" ? layout : screen

From a895771179c997ef3ab4e1ada9235dfd5847cfac Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 19 Aug 2021 16:06:33 +0100
Subject: [PATCH 14/30] Fix bug determining whether an app is inside the
 preview or not

---
 packages/client/src/store/builder.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/store/builder.js b/packages/client/src/store/builder.js
index 0fa109fc1c..530f49843a 100644
--- a/packages/client/src/store/builder.js
+++ b/packages/client/src/store/builder.js
@@ -62,7 +62,7 @@ const createBuilderStore = () => {
   const writableStore = writable(initialState)
   const derivedStore = derived(writableStore, $state => {
     // Avoid any of this logic if we aren't in the builder preview
-    if (!writableStore.inBuilder) {
+    if (!$state.inBuilder) {
       return $state
     }
 

From 10066bf3e045bd1236b4457f0c87f6a05b0de943 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 20 Aug 2021 09:27:38 +0100
Subject: [PATCH 15/30] Fix dependency loop in client stores

---
 .../client/src/components/Component.svelte    |  1 -
 packages/client/src/store/builder.js          | 44 +------------
 packages/client/src/store/screens.js          | 38 +++++++++++-
 packages/client/src/utils/components.js       | 62 +++++++++++++++++++
 .../src/forms/InnerForm.svelte                |  2 +-
 5 files changed, 103 insertions(+), 44 deletions(-)
 create mode 100644 packages/client/src/utils/components.js

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 8c7437e523..ed53a7eb32 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -74,7 +74,6 @@
     styles: { ...instance._styles, id, empty, interactive },
     empty,
     selected,
-    props: componentSettings,
     name,
   })
 
diff --git a/packages/client/src/store/builder.js b/packages/client/src/store/builder.js
index 530f49843a..cf6e8afb95 100644
--- a/packages/client/src/store/builder.js
+++ b/packages/client/src/store/builder.js
@@ -1,5 +1,6 @@
 import { writable, derived } from "svelte/store"
 import Manifest from "@budibase/standard-components/manifest.json"
+import { findComponentById, findComponentPathById } from "../utils/components"
 
 const dispatchEvent = (type, data = {}) => {
   window.dispatchEvent(
@@ -9,45 +10,6 @@ const dispatchEvent = (type, data = {}) => {
   )
 }
 
-const findComponentById = (component, componentId) => {
-  if (!component || !componentId) {
-    return null
-  }
-  if (component._id === componentId) {
-    return component
-  }
-  if (!component._children?.length) {
-    return null
-  }
-  for (let child of component._children) {
-    const result = findComponentById(child, componentId)
-    if (result) {
-      return result
-    }
-  }
-  return null
-}
-
-const findComponentIdPath = (component, componentId, path = []) => {
-  if (!component || !componentId) {
-    return null
-  }
-  path = [...path, component._id]
-  if (component._id === componentId) {
-    return path
-  }
-  if (!component._children?.length) {
-    return null
-  }
-  for (let child of component._children) {
-    const result = findComponentIdPath(child, componentId, path)
-    if (result) {
-      return result
-    }
-  }
-  return null
-}
-
 const createBuilderStore = () => {
   const initialState = {
     inBuilder: false,
@@ -75,13 +37,13 @@ const createBuilderStore = () => {
     const definition = type ? Manifest[type] : null
 
     // Derive the selected component path
-    const path = findComponentIdPath(asset.props, selectedComponentId) || []
+    const path = findComponentPathById(asset.props, selectedComponentId) || []
 
     return {
       ...$state,
       selectedComponent: component,
       selectedComponentDefinition: definition,
-      selectedComponentPath: path,
+      selectedComponentPath: path?.map(component => component._id),
     }
   })
 
diff --git a/packages/client/src/store/screens.js b/packages/client/src/store/screens.js
index 367d9ecfea..702f662f8a 100644
--- a/packages/client/src/store/screens.js
+++ b/packages/client/src/store/screens.js
@@ -1,7 +1,12 @@
-import { derived } from "svelte/store"
+import { derived, get } from "svelte/store"
 import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
+import {
+  findComponentPathById,
+  findChildrenByType,
+  findComponentById,
+} from "../utils/components"
 
 const createScreenStore = () => {
   const store = derived(
@@ -36,8 +41,39 @@ const createScreenStore = () => {
     }
   )
 
+  // Utils to parse component definitions
+  const actions = {
+    findComponentById: componentId => {
+      const { activeScreen, activeLayout } = get(store)
+      let result = findComponentById(activeScreen?.props, componentId)
+      if (result) {
+        return result
+      }
+      return findComponentById(activeLayout?.props)
+    },
+    findComponentPathById: componentId => {
+      const { activeScreen, activeLayout } = get(store)
+      let result = findComponentPathById(activeScreen?.props, componentId)
+      if (result) {
+        return result
+      }
+      return findComponentPathById(activeLayout?.props)
+    },
+    findChildrenByType: (componentId, type) => {
+      const component = actions.findComponentById(componentId)
+      if (!component || !component._children) {
+        return null
+      }
+      let children = []
+      findChildrenByType(component, type, children)
+      console.log(children)
+      return children
+    },
+  }
+
   return {
     subscribe: store.subscribe,
+    actions,
   }
 }
 
diff --git a/packages/client/src/utils/components.js b/packages/client/src/utils/components.js
new file mode 100644
index 0000000000..4b1b8a7ada
--- /dev/null
+++ b/packages/client/src/utils/components.js
@@ -0,0 +1,62 @@
+/**
+ * Finds a component instance by ID
+ */
+export const findComponentById = (component, componentId) => {
+  if (!component || !componentId) {
+    return null
+  }
+  if (component._id === componentId) {
+    return component
+  }
+  if (!component._children?.length) {
+    return null
+  }
+  for (let child of component._children) {
+    const result = findComponentById(child, componentId)
+    if (result) {
+      return result
+    }
+  }
+  return null
+}
+
+/**
+ * Finds the component path to a component
+ */
+export const findComponentPathById = (component, componentId, path = []) => {
+  if (!component || !componentId) {
+    return null
+  }
+  path = [...path, component]
+  if (component._id === componentId) {
+    return path
+  }
+  if (!component._children?.length) {
+    return null
+  }
+  for (let child of component._children) {
+    const result = findComponentPathById(child, componentId, path)
+    if (result) {
+      return result
+    }
+  }
+  return null
+}
+
+/**
+ * Finds all children instances of a certain component type of a given component
+ */
+export const findChildrenByType = (component, type, children = []) => {
+  if (!component) {
+    return
+  }
+  if (component._component.endsWith(`/${type}`)) {
+    children.push(component)
+  }
+  if (!component._children?.length) {
+    return
+  }
+  component._children.forEach(child => {
+    findChildrenByType(child, type, children)
+  })
+}
diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index 774419bbdc..3719de4750 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -27,7 +27,7 @@
   $: errors = deriveFieldProperty(fields, f => f.fieldState.error)
   $: valid = !Object.values($errors).some(error => error != null)
 
-  // Derive which fields belong in which steps
+  // Derive whether the current form step is valid
   $: currentStepValid = derived(
     [currentStep, ...fields],
     ([currentStepValue, ...fieldsValue]) => {

From 7f0739027782a44ff7444231d32d061ac9632eb9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 20 Aug 2021 09:54:54 +0100
Subject: [PATCH 16/30] Add single button action for changing form step

---
 .../EventsEditor/EventEditor.svelte           |  4 +-
 .../actions/ChangeFormStep.svelte             | 68 +++++++++++++++++++
 .../EventsEditor/actions/ClearForm.svelte     |  2 +-
 .../actions/CloseScreenModal.svelte           |  1 -
 .../EventsEditor/actions/LogOut.svelte        |  1 -
 .../EventsEditor/actions/NavigateTo.svelte    |  2 +-
 .../EventsEditor/actions/NextFormStep.svelte  | 35 ----------
 .../EventsEditor/actions/PrevFormStep.svelte  | 35 ----------
 .../EventsEditor/actions/ValidateForm.svelte  |  2 +-
 .../EventsEditor/actions/index.js             | 11 +--
 packages/client/src/constants.js              |  3 +-
 packages/client/src/utils/buttonActions.js    | 16 ++---
 packages/standard-components/manifest.json    |  6 +-
 .../src/forms/InnerForm.svelte                | 18 +++--
 14 files changed, 93 insertions(+), 111 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ChangeFormStep.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte
 delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 2e2a318610..4ff746a034 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -33,7 +33,7 @@
 
   $: selectedActionComponent =
     selectedAction &&
-    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY]).component
+    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY])?.component
 
   // Select the first action if we delete an action
   $: {
@@ -116,7 +116,7 @@
     </ActionMenu>
   </Layout>
   <Layout noPadding>
-    {#if selectedAction}
+    {#if selectedActionComponent}
       <div class="selected-action-container">
         <svelte:component
           this={selectedActionComponent}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ChangeFormStep.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ChangeFormStep.svelte
new file mode 100644
index 0000000000..ca2df71c6d
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ChangeFormStep.svelte
@@ -0,0 +1,68 @@
+<script>
+  import { Select, Label, Stepper } from "@budibase/bbui"
+  import { currentAsset, store } from "builderStore"
+  import { getActionProviderComponents } from "builderStore/dataBinding"
+  import { onMount } from "svelte"
+
+  export let parameters
+
+  $: actionProviders = getActionProviderComponents(
+    $currentAsset,
+    $store.selectedComponentId,
+    "ChangeFormStep"
+  )
+
+  const typeOptions = [
+    {
+      label: "Next step",
+      value: "next",
+    },
+    {
+      label: "Previous step",
+      value: "prev",
+    },
+    {
+      label: "First step",
+      value: "first",
+    },
+    {
+      label: "Specific step",
+      value: "specific",
+    },
+  ]
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "next"
+    }
+  })
+</script>
+
+<div class="root">
+  <Label small>Form</Label>
+  <Select
+    placeholder={null}
+    bind:value={parameters.componentId}
+    options={actionProviders}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+  />
+  <Label small>Step</Label>
+  <Select bind:value={parameters.type} options={typeOptions} />
+  {#if parameters.type === "specific"}
+    <Label small>Number</Label>
+    <Stepper bind:value={parameters.number} />
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
index 74eae6283c..b3bf7ebf7c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
@@ -29,7 +29,7 @@
     row-gap: var(--spacing-s);
     grid-template-columns: 60px 1fr;
     align-items: center;
-    max-width: 800px;
+    max-width: 400px;
     margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
index 0afb8dd46e..873c9ccf65 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
@@ -11,7 +11,6 @@
 
 <style>
   .root {
-    max-width: 800px;
     margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
index 8782127243..3434d63480 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
@@ -8,7 +8,6 @@
 
 <style>
   .root {
-    max-width: 800px;
     margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
index 5a0e163655..d90b645315 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
@@ -25,7 +25,7 @@
     align-items: center;
     gap: var(--spacing-m);
     grid-template-columns: auto 1fr;
-    max-width: 800px;
+    max-width: 400px;
     margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte
deleted file mode 100644
index a635e158cb..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-  import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, store } from "builderStore"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
-
-  export let parameters
-
-  $: actionProviders = getActionProviderComponents(
-    $currentAsset,
-    $store.selectedComponentId,
-    "NextFormStep"
-  )
-</script>
-
-<div class="root">
-  <Label small>Form</Label>
-  <Select
-    bind:value={parameters.componentId}
-    options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id}
-  />
-</div>
-
-<style>
-  .root {
-    display: grid;
-    column-gap: var(--spacing-l);
-    row-gap: var(--spacing-s);
-    grid-template-columns: 60px 1fr;
-    align-items: center;
-    max-width: 800px;
-    margin: 0 auto;
-  }
-</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte
deleted file mode 100644
index 4efcd8378c..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-  import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, store } from "builderStore"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
-
-  export let parameters
-
-  $: actionProviders = getActionProviderComponents(
-    $currentAsset,
-    $store.selectedComponentId,
-    "PrevFormStep"
-  )
-</script>
-
-<div class="root">
-  <Label small>Form</Label>
-  <Select
-    bind:value={parameters.componentId}
-    options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id}
-  />
-</div>
-
-<style>
-  .root {
-    display: grid;
-    column-gap: var(--spacing-l);
-    row-gap: var(--spacing-s);
-    grid-template-columns: 60px 1fr;
-    align-items: center;
-    max-width: 800px;
-    margin: 0 auto;
-  }
-</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
index d61c9567d8..e572dc6c1c 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
@@ -34,7 +34,7 @@
     row-gap: var(--spacing-s);
     grid-template-columns: 60px 1fr;
     align-items: center;
-    max-width: 800px;
+    max-width: 400px;
     margin: 0 auto;
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index 75feb533a7..9cf2461b77 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -7,8 +7,7 @@ import ValidateForm from "./ValidateForm.svelte"
 import LogOut from "./LogOut.svelte"
 import ClearForm from "./ClearForm.svelte"
 import CloseScreenModal from "./CloseScreenModal.svelte"
-import NextFormStep from "./NextFormStep.svelte"
-import PrevFormStep from "./PrevFormStep.svelte"
+import ChangeFormStep from "./ChangeFormStep.svelte"
 
 // Defines which actions are available to configure in the front end.
 // Unfortunately the "name" property is used as the identifier so please don't
@@ -55,11 +54,7 @@ export default [
     component: CloseScreenModal,
   },
   {
-    name: "Next Form Step",
-    component: NextFormStep,
-  },
-  {
-    name: "Previous Form Step",
-    component: PrevFormStep,
+    name: "Change Form Step",
+    component: ChangeFormStep,
   },
 ]
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index 99e95e8398..d2237ba3b9 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -7,8 +7,7 @@ export const ActionTypes = {
   RefreshDatasource: "RefreshDatasource",
   SetDataProviderQuery: "SetDataProviderQuery",
   ClearForm: "ClearForm",
-  NextFormStep: "NextFormStep",
-  PrevFormStep: "PrevFormStep",
+  ChangeFormStep: "ChangeFormStep",
 }
 
 export const ApiVersion = "1"
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 6affe66491..a18cd74891 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -105,19 +105,12 @@ const clearFormHandler = async (action, context) => {
   )
 }
 
-const nextFormStepHandler = async (action, context) => {
+const changeFormStepHandler = async (action, context) => {
   return await executeActionHandler(
     context,
     action.parameters.componentId,
-    ActionTypes.NextFormStep
-  )
-}
-
-const prevFormStepHandler = async (action, context) => {
-  return await executeActionHandler(
-    context,
-    action.parameters.componentId,
-    ActionTypes.PrevFormStep
+    ActionTypes.ChangeFormStep,
+    action.parameters
   )
 }
 
@@ -138,8 +131,7 @@ const handlerMap = {
   ["Log Out"]: logoutHandler,
   ["Clear Form"]: clearFormHandler,
   ["Close Screen Modal"]: closeScreenModalHandler,
-  ["Next Form Step"]: nextFormStepHandler,
-  ["Previous Form Step"]: prevFormStepHandler,
+  ["Change Form Step"]: changeFormStepHandler,
 }
 
 const confirmTextMap = {
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 785b549c31..b54812e8b3 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1706,8 +1706,7 @@
     "actions": [
       "ValidateForm",
       "ClearForm",
-      "NextFormStep",
-      "PrevFormStep"
+      "ChangeFormStep"
     ],
     "styles": ["size"],
     "settings": [
@@ -1768,9 +1767,6 @@
     "icon": "Form",
     "hasChildren": true,
     "illegalChildren": ["section"],
-    "actions": [
-      "ValidateFormStep"
-    ],
     "styles": ["size"],
     "settings": [
       {
diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index 3719de4750..5422d50d1b 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -140,11 +140,16 @@
         get(field).fieldApi.clearValue()
       })
     },
-    nextStep: () => {
-      currentStep.update(step => step + 1)
-    },
-    prevStep: () => {
-      currentStep.update(step => Math.max(1, step - 1))
+    changeStep: ({ type, number }) => {
+      if (type === "next") {
+        currentStep.update(step => step + 1)
+      } else if (type === "prev") {
+        currentStep.update(step => Math.max(1, step - 1))
+      } else if (type === "first") {
+        currentStep.set(1)
+      } else if (type === "specific" && number && !isNaN(number)) {
+        currentStep.set(number)
+      }
     },
     setStep: step => {
       if (step) {
@@ -249,8 +254,7 @@
   const actions = [
     { type: ActionTypes.ValidateForm, callback: formApi.validate },
     { type: ActionTypes.ClearForm, callback: formApi.clear },
-    { type: ActionTypes.NextFormStep, callback: formApi.nextStep },
-    { type: ActionTypes.PrevFormStep, callback: formApi.prevStep },
+    { type: ActionTypes.ChangeFormStep, callback: formApi.changeStep },
   ]
 </script>
 

From a656b419b919cb6f3712d68e23da911f653ce4da Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 20 Aug 2021 10:03:21 +0100
Subject: [PATCH 17/30] Making picker sorting optional and default to off. Sort
 by default for client apps

---
 packages/bbui/src/Form/Core/Multiselect.svelte            | 2 ++
 packages/bbui/src/Form/Core/Picker.svelte                 | 8 ++++++--
 packages/bbui/src/Form/Core/Select.svelte                 | 2 ++
 packages/bbui/src/Form/Multiselect.svelte                 | 2 ++
 packages/bbui/src/Form/Select.svelte                      | 2 ++
 .../components/backend/DataTable/RowFieldControl.svelte   | 1 +
 .../backend/TableNavigator/TableDataImport.svelte         | 1 +
 .../src/components/common/LinkedRowSelector.svelte        | 2 ++
 .../standard-components/src/forms/OptionsField.svelte     | 1 +
 .../src/forms/RelationshipField.svelte                    | 1 +
 10 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 94d4f2b768..3eb1add267 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -12,6 +12,7 @@
   export let getOptionValue = option => option
   export let readonly = false
   export let autocomplete = false
+  export let sort = false
 
   const dispatch = createEventDispatcher()
   $: selectedLookupMap = getSelectedLookupMap(value)
@@ -83,4 +84,5 @@
   {getOptionLabel}
   {getOptionValue}
   onSelectOption={toggleOption}
+  {sort}
 />
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index de7bfb02b8..8acbc4e1a6 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -25,11 +25,12 @@
   export let quiet = false
   export let autoWidth = false
   export let autocomplete = false
+  export let sort = false
 
   const dispatch = createEventDispatcher()
   let searchTerm = null
 
-  $: sortedOptions = getSortedOptions(options, getOptionLabel)
+  $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
     sortedOptions,
     searchTerm,
@@ -45,10 +46,13 @@
     open = true
   }
 
-  const getSortedOptions = (options, getLabel) => {
+  const getSortedOptions = (options, getLabel, sort) => {
     if (!options?.length || !Array.isArray(options)) {
       return []
     }
+    if (!sort) {
+      return options
+    }
     return options.sort((a, b) => {
       const labelA = getLabel(a)
       const labelB = getLabel(b)
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 3a2daf25cf..413b11dd34 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -15,6 +15,7 @@
   export let quiet = false
   export let autoWidth = false
   export let autocomplete = false
+  export let sort = false
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -72,6 +73,7 @@
   {getOptionIcon}
   {fieldIcon}
   {autocomplete}
+  {sort}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder}
   isOptionSelected={option => option === value}
diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte
index 1bb0039914..957dcccddf 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -13,6 +13,7 @@
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
+  export let sort = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -29,6 +30,7 @@
     {value}
     {options}
     {placeholder}
+    {sort}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index eecc719a9a..b6547c0a98 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -16,6 +16,7 @@
   export let getOptionIcon = option => option?.icon
   export let quiet = false
   export let autoWidth = false
+  export let sort = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -41,6 +42,7 @@
     {options}
     {placeholder}
     {autoWidth}
+    {sort}
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}
diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index 078dbf25b2..0724016679 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -19,6 +19,7 @@
     data-cy="{meta.name}-select"
     bind:value
     options={meta.constraints.inclusion}
+    sort
   />
 {:else if type === "datetime"}
   <DatePicker {label} bind:value />
diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index 8ce2ebe7f9..2bbbb471c2 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -153,6 +153,7 @@
       label="Display Column"
       bind:value={primaryDisplay}
       options={fields}
+      sort
     />
   </div>
 {/if}
diff --git a/packages/builder/src/components/common/LinkedRowSelector.svelte b/packages/builder/src/components/common/LinkedRowSelector.svelte
index 080f09809d..1f3dea137f 100644
--- a/packages/builder/src/components/common/LinkedRowSelector.svelte
+++ b/packages/builder/src/components/common/LinkedRowSelector.svelte
@@ -47,6 +47,7 @@
     getOptionValue={row => row._id}
     on:change={e => (linkedIds = e.detail ? [e.detail] : [])}
     {label}
+    sort
   />
 {:else}
   <Multiselect
@@ -55,5 +56,6 @@
     options={rows}
     getOptionLabel={getPrettyName}
     getOptionValue={row => row._id}
+    sort
   />
 {/if}
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 9f3e4a4557..c5efa6f58d 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -87,6 +87,7 @@
         getOptionLabel={flatOptions ? x => x : x => x.label}
         getOptionValue={flatOptions ? x => x : x => x.value}
         {autocomplete}
+        sort={true}
       />
     {:else if optionsType === "radio"}
       <CoreRadioGroup
diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte
index 43f4e64aef..5f138c8be4 100644
--- a/packages/standard-components/src/forms/RelationshipField.svelte
+++ b/packages/standard-components/src/forms/RelationshipField.svelte
@@ -87,6 +87,7 @@
       getOptionLabel={getDisplayName}
       getOptionValue={option => option._id}
       {placeholder}
+      sort={true}
     />
   {/if}
 </Field>

From f04b860146e4881595436de8850a3ba768f5ddb1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 20 Aug 2021 14:12:52 +0100
Subject: [PATCH 18/30] Automatically name and number form step components upon
 creation

---
 .../src/builderStore/store/frontend.js        | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 1924ae07a2..192ade9e5d 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -20,7 +20,12 @@ import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
 import { FrontendTypes } from "constants"
 import analytics from "analytics"
-import { findComponentType, findComponentParent } from "../storeUtils"
+import {
+  findComponentType,
+  findComponentParent,
+  findClosestMatchingComponent,
+  findAllMatchingComponents,
+} from "../storeUtils"
 import { uuid } from "../uuid"
 import { removeBindings } from "../dataBinding"
 
@@ -334,6 +339,18 @@ export const getFrontendStore = () => {
         if (definition.hasChildren) {
           extras._children = []
         }
+        if (componentName.endsWith("/formstep")) {
+          const parentForm = findClosestMatchingComponent(
+            get(currentAsset).props,
+            get(selectedComponent)._id,
+            component => component._component.endsWith("/form")
+          )
+          const formSteps = findAllMatchingComponents(parentForm, component =>
+            component._component.endsWith("/formstep")
+          )
+          extras.step = formSteps.length + 1
+          extras._instanceName = `Step ${formSteps.length + 1}`
+        }
 
         return {
           _id: uuid(),

From 9cb1ce6862be8ce7133f70eee2a4fe5bd65c7fb1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 20 Aug 2021 15:16:20 +0100
Subject: [PATCH 19/30] Prevent adding form steps inside other form steps and
 fix illegalChildren usage

---
 .../design/AppPreview/ComponentSelectionList.svelte         | 3 ++-
 packages/standard-components/manifest.json                  | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index d8881a8d96..9893b07404 100644
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@@ -46,7 +46,7 @@
     <ActionMenu disabled={!item.isCategory}>
       <ActionButton
         icon={item.icon}
-        disabled={isChildAllowed(item, $selectedComponent)}
+        disabled={!item.isCategory && isChildAllowed(item, $selectedComponent)}
         quiet
         size="S"
         slot="control"
@@ -66,6 +66,7 @@
             dataCy={`component-${item.name}`}
             icon={item.icon}
             on:click={() => onItemChosen(item)}
+            disabled={isChildAllowed(item, $selectedComponent)}
           >
             {item.name}
           </MenuItem>
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index b54812e8b3..04519f4f0f 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1702,7 +1702,7 @@
     "name": "Form",
     "icon": "Form",
     "hasChildren": true,
-    "illegalChildren": ["section"],
+    "illegalChildren": ["section", "form"],
     "actions": [
       "ValidateForm",
       "ClearForm",
@@ -1764,9 +1764,9 @@
   },
   "formstep": {
     "name": "Form Step",
-    "icon": "Form",
+    "icon": "AssetsAdded",
     "hasChildren": true,
-    "illegalChildren": ["section"],
+    "illegalChildren": ["section", "form", "form step"],
     "styles": ["size"],
     "settings": [
       {

From 97fdcc0209f1e8e398416db90c5c1a5057b4aa3c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 20 Aug 2021 15:20:19 +0100
Subject: [PATCH 20/30] Fix endless loop when nesting 2 form steps inside each
 other

---
 packages/standard-components/src/forms/FormStep.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/standard-components/src/forms/FormStep.svelte b/packages/standard-components/src/forms/FormStep.svelte
index 34894aa6eb..665205f7d4 100644
--- a/packages/standard-components/src/forms/FormStep.svelte
+++ b/packages/standard-components/src/forms/FormStep.svelte
@@ -19,8 +19,7 @@
     if (
       formContext &&
       $builderStore.inBuilder &&
-      $builderStore.selectedComponentPath?.includes($component.id) &&
-      $formState?.currentStep !== step
+      $builderStore.selectedComponentPath?.includes($component.id)
     ) {
       formContext.formApi.setStep(step)
     }

From 801ea8f902a868fe08911a68ac408c178efc2751 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 20 Aug 2021 15:20:57 +0100
Subject: [PATCH 21/30] Remove steps setting on form

---
 packages/standard-components/manifest.json | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 04519f4f0f..559a34c4d2 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1726,12 +1726,6 @@
           "label": "Custom"
         }
       },
-      {
-        "type": "number",
-        "label": "Steps",
-        "key": "steps",
-        "defaultValue": 1
-      },
       {
         "type": "boolean",
         "label": "Disabled",

From 27be64a6fd78913061c7d8ce5f8ff3f386014c20 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 23 Aug 2021 11:09:33 +0100
Subject: [PATCH 22/30] Give detail autoscreen repeater a placeholder for when
 no rows exist

---
 .../src/builderStore/store/screenTemplates/rowDetailScreen.js    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index a1a1e17fd5..f19f4e3652 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -94,6 +94,7 @@ const createScreen = table => {
     .instanceName("Repeater")
     .customProps({
       dataProvider: `{{ literal ${makePropSafe(provider._json._id)} }}`,
+      noRowsMessage: "We couldn't find a row to display",
     })
 
   const form = makeMainForm()

From 88354073aaa485db280934b1ea8b7c183d8f546f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 23 Aug 2021 11:10:07 +0100
Subject: [PATCH 23/30] Add missing initial form values to form context and
 prefix static values to avoid clashes with column names

---
 packages/standard-components/manifest.json    |  6 +++---
 .../src/forms/InnerForm.svelte                | 21 +++++++++++--------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 559a34c4d2..da3736a076 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1739,15 +1739,15 @@
         "values":  [
           {
             "label": "Valid",
-            "key": "valid"
+            "key": "__valid"
           },
           {
             "label": "Current Step",
-            "key": "currentStep"
+            "key": "__currentStep"
           },
           {
             "label": "Current Step Valid",
-            "key": "currentStepValid"
+            "key": "__currentStepValid"
           }
         ]
       },
diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index 5422d50d1b..660b784fd0 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -256,17 +256,20 @@
     { type: ActionTypes.ClearForm, callback: formApi.clear },
     { type: ActionTypes.ChangeFormStep, callback: formApi.changeStep },
   ]
+
+  // Create data context to provide
+  $: dataContext = {
+    ...initialValues,
+    ...$values,
+
+    // These static values are prefixed to avoid clashes with actual columns
+    __valid: valid,
+    __currentStep: $currentStep,
+    __currentStepValid: $currentStepValid,
+  }
 </script>
 
-<Provider
-  {actions}
-  data={{
-    ...$values,
-    valid,
-    currentStep: $currentStep,
-    currentStepValid: $currentStepValid,
-  }}
->
+<Provider {actions} data={dataContext}>
   <div use:styleable={$component.styles}>
     <slot />
   </div>

From 6d902616cc1ac3844a5e67ca648903b12f5da98c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 23 Aug 2021 11:46:50 +0100
Subject: [PATCH 24/30] Always limit data providers to 1 row on details
 screens, even for external tables

---
 .../src/builderStore/store/screenTemplates/rowDetailScreen.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index f19f4e3652..ec737fe36b 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -86,7 +86,7 @@ const createScreen = table => {
           valueType: "Binding",
         },
       ],
-      limit: table.type === "external" ? undefined : 1,
+      limit: 1,
       paginate: false,
     })
 

From e411f771d2a0c766336ffeaed5947d6dd58a4ac8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 23 Aug 2021 14:00:45 +0100
Subject: [PATCH 25/30] Fix button casing

---
 .../PropertyControls/ValidationEditor/ValidationEditor.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationEditor.svelte
index 0b7fd12de2..6c62c9f5af 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationEditor.svelte
@@ -17,7 +17,7 @@
   }
 </script>
 
-<ActionButton on:click={drawer.show}>Configure Validation</ActionButton>
+<ActionButton on:click={drawer.show}>Configure validation</ActionButton>
 <Drawer bind:this={drawer} title="Validation Rules">
   <svelte:fragment slot="description">
     Configure validation rules for this field.

From 8c114fae34930296a4a17181b0815a023ed9b540 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 23 Aug 2021 14:01:57 +0100
Subject: [PATCH 26/30] Show component hidden by conditional UI if they would
 otherwise hide the selected component

---
 packages/client/src/components/Component.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index ed53a7eb32..a10c88f410 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -63,6 +63,7 @@
   $: selected =
     $builderStore.inBuilder &&
     $builderStore.selectedComponentId === instance._id
+  $: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
   $: interactive = $builderStore.previewType === "layout" || insideScreenslot
   $: evaluateConditions(enrichedSettings?._conditions)
   $: componentSettings = { ...enrichedSettings, ...conditionalSettings }
@@ -174,13 +175,12 @@
 </script>
 
 {#key propsHash}
-  {#if constructor && componentSettings && visible}
+  {#if constructor && componentSettings && (visible || inSelectedPath)}
     <div
       class={`component ${id}`}
       data-type={interactive ? "component" : ""}
       data-id={id}
       data-name={name}
-      class:hidden={!visible}
     >
       <svelte:component this={constructor} {...componentSettings}>
         {#if children.length}

From 918f269e6ea37267c46a49335afb13ac1429a6b3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 23 Aug 2021 15:13:41 +0100
Subject: [PATCH 27/30] Fix issue with svelte reactive statements not being
 sufficiently 'reactive' in core form field in client lib by replacing with
 manual store subscription

---
 packages/standard-components/src/forms/Field.svelte | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/standard-components/src/forms/Field.svelte b/packages/standard-components/src/forms/Field.svelte
index b202bc506c..9f08f204c2 100644
--- a/packages/standard-components/src/forms/Field.svelte
+++ b/packages/standard-components/src/forms/Field.svelte
@@ -1,7 +1,7 @@
 <script>
   import Placeholder from "../Placeholder.svelte"
   import FieldGroupFallback from "./FieldGroupFallback.svelte"
-  import { getContext } from "svelte"
+  import { getContext, onDestroy } from "svelte"
 
   export let label
   export let field
@@ -31,10 +31,13 @@
     formStepContext || 1
   )
 
-  // Expose field properties to parent component
-  $: fieldState = $formField?.fieldState
-  $: fieldApi = $formField?.fieldApi
-  $: fieldSchema = $formField?.fieldSchema
+  // Update form properties in parent component on every store change
+  const unsubscribe = formField.subscribe(value => {
+    fieldState = value?.fieldState
+    fieldApi = value?.fieldApi
+    fieldSchema = value?.fieldSchema
+  })
+  onDestroy(unsubscribe)
 
   // Keep validation rules up to date
   $: updateValidation(validation)

From 6be1e0c8285a4342514f5cf4f621da288b095f17 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 23 Aug 2021 16:39:09 +0100
Subject: [PATCH 28/30] Fix issue with memoizing onclick handlers nested inside
 conditional UI conditions

---
 packages/client/src/utils/componentProps.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index 5472c57308..a181d1ea4d 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -51,6 +51,12 @@ export const enrichProps = (props, context) => {
           condition.settingValue,
           totalContext
         )
+
+        // If there is an onclick function in here then it won't be serialised
+        // properly, and therefore will not be updated properly.
+        // The solution to this is add a rand which will ensure diffs happen
+        // every time.
+        condition.rand = Math.random()
       }
     })
   }

From 0516d3d0eff240fae06629aa3a59fab426b48995 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 24 Aug 2021 15:29:50 +0100
Subject: [PATCH 29/30] Prevent MenuItem firing onlick handlers when disabled

---
 packages/bbui/src/Menu/Item.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index b6ab8862df..a5609683a8 100644
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -19,7 +19,7 @@
 
 <li
   data-cy={dataCy}
-  on:click|preventDefault={onClick}
+  on:click|preventDefault={disabled ? null : onClick}
   class="spectrum-Menu-item"
   class:is-disabled={disabled}
   role="menuitem"

From af7a2e8401a63d07924a03e5449bddc0dc8d7a2f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 24 Aug 2021 15:33:07 +0100
Subject: [PATCH 30/30] Fix issue when rendering fields without field names

---
 packages/standard-components/src/forms/Field.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/forms/Field.svelte b/packages/standard-components/src/forms/Field.svelte
index 9f08f204c2..e490b27dcf 100644
--- a/packages/standard-components/src/forms/Field.svelte
+++ b/packages/standard-components/src/forms/Field.svelte
@@ -32,12 +32,12 @@
   )
 
   // Update form properties in parent component on every store change
-  const unsubscribe = formField.subscribe(value => {
+  const unsubscribe = formField?.subscribe(value => {
     fieldState = value?.fieldState
     fieldApi = value?.fieldApi
     fieldSchema = value?.fieldSchema
   })
-  onDestroy(unsubscribe)
+  onDestroy(() => unsubscribe && unsubscribe())
 
   // Keep validation rules up to date
   $: updateValidation(validation)