From 0a22ea57498431397dbaea218a11524c60c02f0b Mon Sep 17 00:00:00 2001
From: Niko Tangan <niko.tangan@bettyblocks.com>
Date: Fri, 26 Sep 2025 16:53:45 +0800
Subject: [PATCH] feat: added toggle to render Column when hidden

---
 src/components/column.js                      | 32 ++++++++++++++++++-
 .../structures/Column/options/index.ts        |  6 ++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/column.js b/src/components/column.js
index 9a19c4dd6..636afa287 100644
--- a/src/components/column.js
+++ b/src/components/column.js
@@ -4,13 +4,39 @@
   allowedTypes: ['BODY_COMPONENT', 'CONTAINER_COMPONENT', 'CONTENT_COMPONENT'],
   orientation: 'VERTICAL',
   jsx: (() => {
-    const { visible, dataComponentAttribute } = options;
+    const { useMediaQuery, useTheme } = window.MaterialUI.Core;
+    const { breakpoints } = useTheme();
+    const {
+      visible,
+      renderWhenHidden,
+      dataComponentAttribute,
+      columnWidth,
+      columnWidthTabletLandscape,
+      columnWidthTabletPortrait,
+      columnWidthMobile,
+    } = options;
     const { env, useText } = B;
     const isDev = env === 'dev';
     const isEmpty = children.length === 0;
     const isPristine = isEmpty && isDev;
     const [isVisible, setIsVisible] = useState(true);
 
+    const isHiddenOnDesktop =
+      useMediaQuery(breakpoints.up(1280)) && columnWidth === 'hidden';
+    const isHiddenOnTabletLandscape =
+      useMediaQuery(breakpoints.between(960, 1280)) &&
+      columnWidthTabletLandscape === 'hidden';
+    const isHiddenOnTabletPortrait =
+      useMediaQuery(breakpoints.between(600, 960)) &&
+      columnWidthTabletPortrait === 'hidden';
+    const isHiddenOnMobile =
+      useMediaQuery(breakpoints.down(600)) && columnWidthMobile === 'hidden';
+    const isHiddenFromBreakpoint =
+      isHiddenOnDesktop ||
+      isHiddenOnTabletLandscape ||
+      isHiddenOnTabletPortrait ||
+      isHiddenOnMobile;
+
     useEffect(() => {
       setIsVisible(visible);
     }, []);
@@ -43,6 +69,10 @@
           ))()}
       </div>
     );
+
+    if (!isDev && (!isVisible || isHiddenFromBreakpoint) && !renderWhenHidden) {
+      return <></>;
+    }
     return ColumnComponent;
   })(),
   styles: (B) => (theme) => {
diff --git a/src/prefabs/structures/Column/options/index.ts b/src/prefabs/structures/Column/options/index.ts
index 7a1ecf8a1..f33932767 100644
--- a/src/prefabs/structures/Column/options/index.ts
+++ b/src/prefabs/structures/Column/options/index.ts
@@ -37,7 +37,7 @@ export const categories = [
   {
     label: 'Advanced Options',
     expanded: false,
-    members: ['dataComponentAttribute'],
+    members: ['renderWhenHidden', 'dataComponentAttribute'],
   },
 ];
 
@@ -189,6 +189,8 @@ export const columnOptions = {
   innerSpacing: sizes('Inner space', {
     value: ['M', 'M', 'M', 'M'],
   }),
-
+  renderWhenHidden: toggle('Render When Column is Hidden', {
+    value: true,
+  }),
   ...advanced('Column'),
 };