Merge pull request #13463 from mikesealey/BUDI-8157

adds sidepanel close actions, and gives the user the option to disable click-outside closure of sidepanel

packages/bbui/src/Layout/Page.svelte

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

packages/client/manifest.json

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

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

@@ -5,6 +5,9 @@
   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
@@ -26,6 +29,10 @@
     }
   }
 
+  $: {
+    sidePanelStore.actions.setSidepanelState(clickOutsideToClose)
+  }
+
   // Derive visibility
   $: open = $sidePanelStore.contentId === $component.id
 
@@ -40,6 +47,12 @@
     }
   }
 
+  const handleSidePanelClose = async () => {
+    if (sidePanelClose) {
+      await sidePanelClose()
+    }
+  }
+
   const showInSidePanel = (el, visible) => {
     const update = visible => {
       const target = document.getElementById("side-panel-container")
@@ -51,6 +64,7 @@
       } else {
         if (target.contains(node)) {
           target.removeChild(node)
+          handleSidePanelClose()
         }
       }
     }

packages/client/src/stores/sidePanel.js

@@ -3,6 +3,7 @@ import { writable, derived } from "svelte/store"
 export const createSidePanelStore = () => {
   const initialState = {
     contentId: null,
+    clickOutsideToClose: true,
   }
   const store = writable(initialState)
   const derivedStore = derived(store, $store => {
@@ -32,11 +33,19 @@ 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,
     },
   }
 }