From 8295b2062972bbe57eaffff3ed3027b30128af46 Mon Sep 17 00:00:00 2001
From: Inbal Tish <inbalti@wix.com>
Date: Wed, 12 Mar 2025 12:47:19 +0200
Subject: [PATCH 1/5] LiveCode in table cell - block interaction

---
 docuilib/src/components/pageComponents/ContentItem.module.scss | 1 +
 docuilib/src/components/pageComponents/ContentItem.tsx         | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/docuilib/src/components/pageComponents/ContentItem.module.scss b/docuilib/src/components/pageComponents/ContentItem.module.scss
index 8246539588..48ec3618eb 100644
--- a/docuilib/src/components/pageComponents/ContentItem.module.scss
+++ b/docuilib/src/components/pageComponents/ContentItem.module.scss
@@ -8,6 +8,7 @@
   align-items: center;
   right: 0px;
   top: 0px;
+  z-index: 100;
 }
 
 .componentExample {
diff --git a/docuilib/src/components/pageComponents/ContentItem.tsx b/docuilib/src/components/pageComponents/ContentItem.tsx
index 219f8935ba..0b8ca98173 100644
--- a/docuilib/src/components/pageComponents/ContentItem.tsx
+++ b/docuilib/src/components/pageComponents/ContentItem.tsx
@@ -62,9 +62,12 @@ const ComponentItem = (props: ComponentItemProps) => {
 
   const content = showCode ? codePreview : componentPreview;
 
+  const interactionBlocker = <div style={{position: 'absolute', top: 0, left: 0, height: '100%', width: '100%'}}/>;
+
   return (
     <div className={`${styles.componentItemContainer} ${!showCode ? styles.componentSpotlightStyle : ''}`}>
       {content}
+      {interactionBlocker}
       {showCodeButton && (
         <button onClick={toggleCode} className={styles.showCodeButton}>
           <CodeIcon/>

From 8089b9a910d3c8511eb52fd352fa316ef262b65d Mon Sep 17 00:00:00 2001
From: Inbal Tish <inbalti@wix.com>
Date: Wed, 12 Mar 2025 13:33:10 +0200
Subject: [PATCH 2/5] bump version

---
 docuilib/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docuilib/package.json b/docuilib/package.json
index ca6ca4a65c..0ad01e7a66 100644
--- a/docuilib/package.json
+++ b/docuilib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",

From 516a8d8a201a4835e0633f5734bf79dec95ea60d Mon Sep 17 00:00:00 2001
From: Inbal Tish <inbalti@wix.com>
Date: Thu, 13 Mar 2025 12:39:07 +0200
Subject: [PATCH 3/5] Changing for wrapper with pointerEvents

---
 .../src/components/pageComponents/ContentItem.tsx     | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/docuilib/src/components/pageComponents/ContentItem.tsx b/docuilib/src/components/pageComponents/ContentItem.tsx
index 0b8ca98173..f676c21f44 100644
--- a/docuilib/src/components/pageComponents/ContentItem.tsx
+++ b/docuilib/src/components/pageComponents/ContentItem.tsx
@@ -53,21 +53,20 @@ const ComponentItem = (props: ComponentItemProps) => {
   }, []);
 
   const componentPreview = (
-    <LiveProvider code={code} scope={ReactLiveScope}>
-      <LivePreview/>
-    </LiveProvider>
+    <div style={{pointerEvents: 'none'}}>
+      <LiveProvider code={code} scope={ReactLiveScope}>
+        <LivePreview/>
+      </LiveProvider>
+    </div>
   );
 
   const codePreview = <CodeBlock snippet={code} title="Code Example"/>;
 
   const content = showCode ? codePreview : componentPreview;
 
-  const interactionBlocker = <div style={{position: 'absolute', top: 0, left: 0, height: '100%', width: '100%'}}/>;
-
   return (
     <div className={`${styles.componentItemContainer} ${!showCode ? styles.componentSpotlightStyle : ''}`}>
       {content}
-      {interactionBlocker}
       {showCodeButton && (
         <button onClick={toggleCode} className={styles.showCodeButton}>
           <CodeIcon/>

From 59e46e199a106ad7aedfa51b3a917a675b3fab5f Mon Sep 17 00:00:00 2001
From: Inbal Tish <inbalti@wix.com>
Date: Thu, 13 Mar 2025 12:43:00 +0200
Subject: [PATCH 4/5] remove unused

---
 docuilib/src/components/pageComponents/ContentItem.module.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docuilib/src/components/pageComponents/ContentItem.module.scss b/docuilib/src/components/pageComponents/ContentItem.module.scss
index 48ec3618eb..8246539588 100644
--- a/docuilib/src/components/pageComponents/ContentItem.module.scss
+++ b/docuilib/src/components/pageComponents/ContentItem.module.scss
@@ -8,7 +8,6 @@
   align-items: center;
   right: 0px;
   top: 0px;
-  z-index: 100;
 }
 
 .componentExample {

From 3a60cc03b6144f45028971b8e7dd14c33d7cffac Mon Sep 17 00:00:00 2001
From: Inbal Tish <inbalti@wix.com>
Date: Thu, 13 Mar 2025 12:49:36 +0200
Subject: [PATCH 5/5] moving style to css

---
 .../src/components/pageComponents/ContentItem.module.scss     | 4 ++++
 docuilib/src/components/pageComponents/ContentItem.tsx        | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docuilib/src/components/pageComponents/ContentItem.module.scss b/docuilib/src/components/pageComponents/ContentItem.module.scss
index 8246539588..eac901a829 100644
--- a/docuilib/src/components/pageComponents/ContentItem.module.scss
+++ b/docuilib/src/components/pageComponents/ContentItem.module.scss
@@ -10,6 +10,10 @@
   top: 0px;
 }
 
+.blocker {
+  pointer-events: none;
+}
+
 .componentExample {
   display: flex;
   justify-content: space-between;
diff --git a/docuilib/src/components/pageComponents/ContentItem.tsx b/docuilib/src/components/pageComponents/ContentItem.tsx
index f676c21f44..1c2e0f0301 100644
--- a/docuilib/src/components/pageComponents/ContentItem.tsx
+++ b/docuilib/src/components/pageComponents/ContentItem.tsx
@@ -53,7 +53,7 @@ const ComponentItem = (props: ComponentItemProps) => {
   }, []);
 
   const componentPreview = (
-    <div style={{pointerEvents: 'none'}}>
+    <div className={styles.blocker}>
       <LiveProvider code={code} scope={ReactLiveScope}>
         <LivePreview/>
       </LiveProvider>