Fix indicators around modals and side panels when used inside grids

packages/client/manifest.json

@@ -18,14 +18,37 @@
     "numberLike": {
       "supported": ["number", "boolean"],
       "partialSupport": [
-        { "type": "longform", "message": "stringAsNumber" },
-        { "type": "string", "message": "stringAsNumber" },
-        { "type": "bigint", "message": "stringAsNumber" },
-        { "type": "options", "message": "stringAsNumber" },
-        { "type": "formula", "message": "stringAsNumber" },
-        { "type": "datetime", "message": "dateAsNumber" }
+        {
+          "type": "longform",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "string",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "bigint",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "options",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "formula",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "datetime",
+          "message": "dateAsNumber"
+        }
       ],
-      "unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }]
+      "unsupported": [
+        {
+          "type": "json",
+          "message": "jsonPrimitivesOnly"
+        }
+      ]
     },
     "stringLike": {
       "supported": [
@@ -37,19 +60,47 @@
         "boolean",
         "datetime"
       ],
-      "unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }]
+      "unsupported": [
+        {
+          "type": "json",
+          "message": "jsonPrimitivesOnly"
+        }
+      ]
     },
     "datetimeLike": {
       "supported": ["datetime"],
       "partialSupport": [
-        { "type": "longform", "message": "stringAsDate" },
-        { "type": "string", "message": "stringAsDate" },
-        { "type": "options", "message": "stringAsDate" },
-        { "type": "formula", "message": "stringAsDate" },
-        { "type": "bigint", "message": "stringAsDate" },
-        { "type": "number", "message": "numberAsDate" }
+        {
+          "type": "longform",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "string",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "options",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "formula",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "bigint",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "number",
+          "message": "numberAsDate"
+        }
       ],
-      "unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }]
+      "unsupported": [
+        {
+          "type": "json",
+          "message": "jsonPrimitivesOnly"
+        }
+      ]
     }
   },
   "layout": {
@@ -4292,7 +4343,10 @@
             "label": "High",
             "value": 3136
           },
-          { "label": "Custom", "value": "custom" }
+          {
+            "label": "Custom",
+            "value": "custom"
+          }
         ]
       },
       {
@@ -7148,6 +7202,7 @@
     "name": "Side Panel",
     "icon": "RailRight",
     "hasChildren": true,
+    "ignoresLayout": true,
     "illegalChildren": ["section", "sidepanel", "modal"],
     "showEmptyState": false,
     "draggable": false,
@@ -7171,6 +7226,7 @@
     "icon": "MBox",
     "hasChildren": true,
     "illegalChildren": ["section", "modal", "sidepanel"],
+    "ignoresLayout": true,
     "showEmptyState": false,
     "draggable": false,
     "info": "Modals are hidden by default. They will only be revealed when triggered by the 'Open Modal' action.",

packages/client/src/components/Component.svelte

@@ -209,8 +209,9 @@
   // Metadata to pass into grid action to apply CSS
   let gridMetadata = memo()
   $: gridMetadata.set({
-    active:
+    insideGrid:
       parent?._component.endsWith("/container") && parent?.layout === "grid",
+    ignoresLayout: definition.ignoresLayout === true,
     id,
     interactive,
     styles: normalStyles,

packages/client/src/components/app/container/GridContainer.svelte

@@ -201,7 +201,7 @@
   }
 
   /* Ensure all top level children have grid styles applied */
-  .grid :global(> .component) {
+  .grid :global(> .component:not(.ignores-layout)) {
     display: flex;
     overflow: auto;
     pointer-events: all;

packages/client/src/utils/grid.js

@@ -59,9 +59,24 @@ export const gridLayout = (node, metadata) => {
 
   // Applies the required listeners, CSS and classes to a component DOM node
   const applyMetadata = metadata => {
-    const { id, styles, interactive, errored, definition, draggable, active } =
-      metadata
-    if (!active) {
+    const {
+      id,
+      styles,
+      interactive,
+      errored,
+      definition,
+      draggable,
+      insideGrid,
+      ignoresLayout,
+    } = metadata
+    if (!insideGrid) {
+      return
+    }
+
+    // If this component ignores layout, flag it as such so that we can avoid
+    // selecting it later
+    if (ignoresLayout) {
+      node.classList.add("ignores-layout")
       return
     }
 
@@ -143,7 +158,12 @@ export const gridLayout = (node, metadata) => {
 
   // Removes the previously set up listeners
   const removeListeners = () => {
-    node.removeEventListener("click", selectComponent, false)
+    // By checking if this is defined we can avoid trying to remove event
+    // listeners on every component
+    if (selectComponent) {
+      node.removeEventListener("click", selectComponent, false)
+      selectComponent = null
+    }
   }
 
   applyMetadata(metadata)