From ee4211d20c0c3913b163a071d907c8d43889013b Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Tue, 20 Aug 2024 09:35:36 +0200
Subject: [PATCH] fix(SW-96): allow nested children to trigger lightbox

---
 components/Lightbox/Desktop/index.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/components/Lightbox/Desktop/index.tsx b/components/Lightbox/Desktop/index.tsx
index 2148e8226..9ad9a6771 100644
--- a/components/Lightbox/Desktop/index.tsx
+++ b/components/Lightbox/Desktop/index.tsx
@@ -46,14 +46,23 @@ export function DesktopLightbox({ images, children }: DesktopLightboxProps) {
     )
   }
 
-  const triggerElement = React.Children.map(children, (child) => {
-    if (React.isValidElement(child) && child.props.id === "lightboxTrigger") {
-      return React.cloneElement(child, {
-        onClick: () => setIsOpen(true),
-      } as React.HTMLAttributes<HTMLElement>)
+  const triggerElement = React.Children.map(
+    children,
+    function mapChild(child): React.ReactNode {
+      if (React.isValidElement(child)) {
+        if (child.props.id === "lightboxTrigger") {
+          return React.cloneElement(child, {
+            onClick: () => setIsOpen(true),
+          } as React.HTMLAttributes<HTMLElement>)
+        } else if (child.props.children) {
+          return React.cloneElement(child, {
+            children: React.Children.map(child.props.children, mapChild),
+          } as React.HTMLAttributes<HTMLElement>)
+        }
+      }
+      return child
     }
-    return child
-  })
+  )
 
   return (
     <>