Merge branch 'master' into feature/sqs-relationships

packages/bbui/src/Layout/Page.svelte

@@ -7,11 +7,11 @@
   export let narrower = false
   export let noPadding = false
 
-  let sidePanelVisible = false
+  let sidePanelVisble = false
 
   setContext("side-panel", {
-    open: () => (sidePanelVisible = true),
+    open: () => (sidePanelVisble = true),
-    close: () => (sidePanelVisible = false),
+    close: () => (sidePanelVisble = false),
   })
 </script>
 
@@ -24,9 +24,9 @@
   </div>
   <div
     id="side-panel"
-    class:visible={sidePanelVisible}
+    class:visible={sidePanelVisble}
     use:clickOutside={() => {
-      sidePanelVisible = false
+      sidePanelVisble = false
     }}
   >
     <slot name="side-panel" />

packages/client/manifest.json

@@ -6723,21 +6723,7 @@
     "illegalChildren": ["section", "sidepanel"],
     "showEmptyState": false,
     "draggable": false,
-    "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action.",
+    "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action."
-    "sendEvents": true,
-    "settings": [
-      {
-        "type": "boolean",
-        "key": "clickOutsideToClose",
-        "label": "Click outside to close",
-        "defaultValue": true
-      },
-      {
-        "type": "event",
-        "key": "onSidePanelClose",
-        "label": "On side panel close"
-      }
-    ]
   },
   "rowexplorer": {
     "block": true,

packages/client/src/components/app/Layout.svelte

@@ -73,10 +73,7 @@
     $context.device.width,
     $context.device.height
   )
-  $: autoCloseSidePanel =
+  $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open
-    !$builderStore.inBuilder &&
-    $sidePanelStore.open &&
-    $sidePanelStore.clickOutsideToClose
   $: screenId = $builderStore.inBuilder
     ? `${$builderStore.screen?._id}-screen`
     : "screen"

packages/client/src/components/app/SidePanel.svelte

@@ -5,9 +5,6 @@
   const { styleable, sidePanelStore, builderStore, dndIsDragging } =
     getContext("sdk")
 
-  export let sidePanelClose
-  export let clickOutsideToClose
-
   // Automatically show and hide the side panel when inside the builder.
   // For some unknown reason, svelte reactivity breaks if we reference the
   // reactive variable "open" inside the following expression, or if we define
@@ -29,10 +26,6 @@
     }
   }
 
-  $: {
-    sidePanelStore.actions.setSidepanelState(clickOutsideToClose)
-  }
-
   // Derive visibility
   $: open = $sidePanelStore.contentId === $component.id
 
@@ -47,12 +40,6 @@
     }
   }
 
-  const handleSidePanelClose = async () => {
-    if (sidePanelClose) {
-      await sidePanelClose()
-    }
-  }
-
   const showInSidePanel = (el, visible) => {
     const update = visible => {
       const target = document.getElementById("side-panel-container")
@@ -64,7 +51,6 @@
       } else {
         if (target.contains(node)) {
           target.removeChild(node)
-          handleSidePanelClose()
         }
       }
     }

packages/client/src/stores/sidePanel.js

@@ -3,7 +3,6 @@ import { writable, derived } from "svelte/store"
 export const createSidePanelStore = () => {
   const initialState = {
     contentId: null,
-    clickOutsideToClose: true,
   }
   const store = writable(initialState)
   const derivedStore = derived(store, $store => {
@@ -33,19 +32,11 @@ export const createSidePanelStore = () => {
     }, 50)
   }
 
-  const setSidepanelState = bool => {
-    clearTimeout(timeout)
-    store.update(state => {
-      state.clickOutsideToClose = bool
-      return state
-    })
-  }
   return {
     subscribe: derivedStore.subscribe,
     actions: {
       open,
       close,
-      setSidepanelState,
     },
   }
 }