Update PreviewOptionImage on DataOptions changed.

layouts/scripts/dist/index.min.js

@@ -11586,9 +11586,13 @@ function DesignPreview({
   }, [keyDownHandler]);
   react.exports.useEffect(() => {
     updatePosition({
-      x: getInitialXPosition(previewOption)
+      x: getInitialXPosition(previewOption),
+      y: 0
     });
   }, [previewOption.widthDimension]);
+  react.exports.useEffect(() => {
+    setActive(false);
+  }, [previewOption.dataSource]);
 
   if (!previewOption) {
     return;
@@ -11768,13 +11772,12 @@ function DataOptions(props = {}) {
   }
 
   async function changeDataOption(e) {
-    const optionName = e.target.value;
+    const dataName = e.target.value;
-    props.rootAttributes.previewFrame.src = window.devTool.previewFrameUrl + '?data=' + optionName;
+    props.rootAttributes.previewFrame.src = window.devTool.previewFrameUrl + '?data=' + dataName;
-    const dataOption = await fetchDataOptions(optionName);
+    const dataOption = await fetchDataOptions(dataName);
-    updateState({
+    updateState(Object.assign({}, dataOption, {
-      data: dataOption.data,
+      dataName
-      dataName: optionName
+    }));
-    });
   }
 
   async function fetchDataOptions(name = 'default') {

layouts/scripts/toolbar/data-options/DataOptions.jsx

@@ -82,11 +82,11 @@ function DataOptions(props = {}) {
   }
 
   async function changeDataOption(e) {
-    const optionName = e.target.value;
+    const dataName = e.target.value;
-    props.rootAttributes.previewFrame.src = window.devTool.previewFrameUrl + '?data=' + optionName;
+    props.rootAttributes.previewFrame.src = window.devTool.previewFrameUrl + '?data=' + dataName;
 
-    const dataOption = await fetchDataOptions(optionName);
+    const dataOption = await fetchDataOptions(dataName);
-    updateState({data: dataOption.data, dataName: optionName})
+    updateState(Object.assign({}, dataOption, {dataName}));
   }
 
   async function fetchDataOptions(name = 'default') {

layouts/scripts/toolbar/data-options/DesignPreview.jsx

@@ -37,9 +37,14 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
   }, [keyDownHandler]);
 
   useEffect(() => {
-    updatePosition({x: getInitialXPosition(previewOption)});
+    updatePosition({x: getInitialXPosition(previewOption), y: 0});
   }, [previewOption.widthDimension])
 
+  useEffect(() => {
+    setActive(false);
+  }, [previewOption.dataSource])
+
+
   if (!previewOption) {
     return;
   }