From 11f4c941e23e1f7fae3641ab87c05f549373d96e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 11 Oct 2024 11:00:27 +0100
Subject: [PATCH] Add on click events for grid layout containers

---
 .../src/components/app/container/GridContainer.svelte    | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 4dc75f3513..696b65abcd 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -4,6 +4,8 @@
   import { GridRowHeight, GridColumns } from "constants"
   import { memo } from "@budibase/frontend-core"
 
+  export let onClick
+
   const component = getContext("component")
   const { styleable, builderStore } = getContext("sdk")
   const context = getContext("context")
@@ -121,15 +123,19 @@
   })
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   bind:this={ref}
   class="grid"
   class:mobile
+  class:clickable={!!onClick}
   bind:clientWidth={width}
   bind:clientHeight={height}
   use:styleable={$styles}
   data-cols={GridColumns}
   data-col-size={colSize}
+  on:click={onClick}
 >
   {#if inBuilder}
     <div class="underlay">
@@ -176,6 +182,9 @@
   .placeholder.first-col {
     border-left: 1px solid var(--spectrum-global-color-gray-900);
   }
+  .clickable {
+    cursor: pointer;
+  }
 
   /* Highlight grid lines when resizing children */
   :global(.grid.highlight > .underlay) {