sample-ui-component-library 0.0.58-dev → 0.0.60-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.58-dev",
+  "version": "0.0.60-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Editor/EditorReducer.js

@@ -4,7 +4,7 @@ export const initialState = {
     uid: crypto.randomUUID(),
     tabs: [],
     activeTab: null,
-    mode: EDITOR_MODES.MAPPING,
+    mode: EDITOR_MODES.DESIGN,
     mapping: new Map(),
     parentTabGroupId: null,
     mappedIds: [],

package/src/components/Editor/MonacoInstance/MonacoInstance.jsx

@@ -38,12 +38,16 @@ export const MonacoInstance = forwardRef(({ onSelectAbstraction }, ref) => {
             } else {
                 activeTabRef.current = null;
                 setShowEditor(false);
+                setOverlayDivs(null);
             }
-        }, [state.activeTab, editorRef]);
+        }, [state.activeTab, state.mode, editorRef]);
 
         // Update overlays for mapping mode.
         const updateOverlays = useCallback(() => {
-            if (state.mode !== EDITOR_MODES.MAPPING) return;
+            if (state.mode !== EDITOR_MODES.MAPPING) {
+                setOverlayDivs(null);
+                return;
+            };
             if (!editorRef.current || !activeTabRef?.current?.mapping) return;
 
             const mapping = activeTabRef.current.mapping;
@@ -65,7 +69,7 @@ export const MonacoInstance = forwardRef(({ onSelectAbstraction }, ref) => {
                 divs.push(<div className="line-block-overlay" onClick={(e) => onSelectAbstraction(entry)} style={style}></div>);
             });
             setOverlayDivs(divs);
-        }, [editorRef, state.activeTab]);
+        }, [editorRef, state.activeTab, state.mode]);
 
         // Scroll the editor and update overlays on wheel event in mapping mode.
         const handleWheel = useCallback((e) => {

package/src/components/Editor/MonacoInstance/MonacoInstance.scss

@@ -19,7 +19,7 @@
 .overlay-layer {
     position: absolute; 
     left: 0;
-    right: 0;
+    right: 20px;
     inset: 0;
     overflow:hidden;
 }