Merge in master

packages/builder/package.json

@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.32.0",
+    "@budibase/bbui": "^1.33.0",
     "@budibase/client": "^0.1.19",
     "@budibase/colorpicker": "^1.0.1",
     "@sentry/browser": "5.19.1",

packages/builder/src/components/common/DatePicker.svelte

@@ -12,6 +12,5 @@
 </script>
 
 <div class="bb-margin-m">
-  <Label small forAttr={'datepicker-label'}>{label}</Label>
   <DatePicker placeholder={label} on:change={onChange} {value} />
 </div>

packages/builder/src/components/database/DataTable/popovers/Filter.svelte

@@ -71,7 +71,16 @@
   }
 
   function addFilter() {
-    view.filters = [...view.filters, {}]
+    view.filters.push({})
+    view.filters = view.filters
+  }
+
+  function isMultipleChoice(field) {
+    return (
+      viewModel.schema[field].constraints &&
+      viewModel.schema[field].constraints.inclusion &&
+      viewModel.schema[field].constraints.inclusion.length
+    )
   }
 </script>
 
@@ -108,10 +117,18 @@
           <option value={condition.key}>{condition.name}</option>
         {/each}
       </Select>
-      <Input
+      {#if filter.key && isMultipleChoice(filter.key)}
-        thin
+        <Select secondary thin bind:value={filter.value}>
-        placeholder={filter.key || fields[0]}
+          {#each viewModel.schema[filter.key].constraints.inclusion as option}
-        bind:value={filter.value} />
+            <option value={option}>{option}</option>
+          {/each}
+        </Select>
+      {:else}
+        <Input
+          thin
+          placeholder={filter.key || fields[0]}
+          bind:value={filter.value} />
+      {/if}
       <i class="ri-close-circle-fill" on:click={() => removeFilter(idx)} />
     {/each}
   </div>

packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte

@@ -12,7 +12,7 @@
 
 <Button secondary small on:click={eventsModal.show}>Define Actions</Button>
 
-<Modal bind:this={eventsModal} maxWidth="100vw" hideCloseButton>
+<Modal bind:this={eventsModal} maxWidth="100vw" hideCloseButton padding="0">
   <EventEditorModal
     event={value}
     eventType={name}

packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label } from "@budibase/bbui"
+  import { DataList, Label } from "@budibase/bbui"
   import { store } from "builderStore"
 
   export let parameters
@@ -7,12 +7,12 @@
 
 <div class="root">
   <Label size="m" color="dark">Screen</Label>
-  <Select secondary bind:value={parameters.url}>
+  <DataList secondary bind:value={parameters.url}>
     <option value="" />
     {#each $store.screens as screen}
       <option value={screen.route}>{screen.props._instanceName}</option>
     {/each}
-  </Select>
+  </DataList>
 </div>
 
 <style>

packages/client/src/state/bbComponentApi.js

@@ -47,6 +47,7 @@ export const bbFactory = ({
       setBinding: setBindableComponentProp(treeNode),
       api,
       parent,
+      store: store.getStore(treeNode.contextStoreKey),
       // these parameters are populated by screenRouter
       routeParams: () => store.getState()["##routeParams"],
     }

packages/client/src/state/store.js

@@ -11,6 +11,7 @@ const contextStoreKey = (dataProviderId, childIndex) =>
   `${dataProviderId}${childIndex >= 0 ? ":" + childIndex : ""}`
 
 // creates a store for a datacontext (e.g. each item in a list component)
+// overrides store if already exists
 const create = (data, dataProviderId, childIndex, parentContextStoreId) => {
   const key = contextStoreKey(dataProviderId, childIndex)
   const state = { data }
@@ -22,14 +23,13 @@ const create = (data, dataProviderId, childIndex, parentContextStoreId) => {
     ? contextStores[parentContextStoreId].state
     : rootState
 
-  if (!contextStores[key]) {
+  contextStores[key] = {
-    contextStores[key] = {
+    store: writable(state),
-      store: writable(state),
+    subscriberCount: 0,
-      subscriberCount: 0,
+    state,
-      state,
+    parentContextStoreId,
-      parentContextStoreId,
-    }
   }
+
   return key
 }
 
@@ -94,6 +94,9 @@ const set = (value, dataProviderId, childIndex) =>
 const getState = contextStoreKey =>
   contextStoreKey ? contextStores[contextStoreKey].state : rootState
 
+const getStore = contextStoreKey =>
+  contextStoreKey ? contextStores[contextStoreKey] : rootStore
+
 export default {
   subscribe,
   update,
@@ -101,4 +104,5 @@ export default {
   getState,
   create,
   contextStoreKey,
+  getStore,
 }

packages/standard-components/src/DataFormWide.svelte

@@ -41,7 +41,6 @@
     ([field, message]) => `${field} ${message}`
   )
 
-
   async function fetchModel() {
     const FETCH_MODEL_URL = `/api/models/${model}`
     const response = await _bb.api.get(FETCH_MODEL_URL)