fix: Blueprint-related warnings

- Disable React StrictMode. - Do not pass `isOpen` to div. Refs: zakodium-oss/react-science#610
cheminfo · Dec 15, 2023 · 091fea3 · 091fea3
1 parent 21fde70
commit 091fea3
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 81 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -104,13 +104,13 @@
     "react-ocl-nmr": "^3.0.1",
     "react-plot": "^1.4.2",
     "react-rnd": "^10.4.1",
-    "react-science": "^0.32.1",
+    "react-science": "^0.32.2",
     "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
     "react-transition-group": "^4.4.5",
     "react-use": "^17.4.2",
     "smart-array-filter": "^4.0.2",
-    "yup": "^1.3.2"
+    "yup": "^1.3.3"
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.23.3",
@@ -145,7 +145,7 @@
     "stylelint": "^16.0.2",
     "stylelint-config-standard": "^35.0.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.8",
+    "vite": "^5.0.9",
     "vitest": "^1.0.4"
   }
 }
diff --git a/src/component/toolbar/BasicToolBar.tsx b/src/component/toolbar/BasicToolBar.tsx
@@ -29,7 +29,7 @@ import useToolsFunctions from '../hooks/useToolsFunctions';
 import { useVerticalAlign } from '../hooks/useVerticalAlign';
 import ImportPublicationStringModal from '../modal/ImportPublicationStringModal';
 import { LoadJCAMPModal } from '../modal/LoadJCAMPModal';
-import { useMetaInformationImportationModal } from '../modal/metaImportation/index';
+import { useMetaInformationImportationModal } from '../modal/metaImportation';
 import { VerticalAlignment } from '../reducer/Reducer';
 
 import { options } from './ToolTypes';
@@ -230,39 +230,37 @@ function BasicToolBarInner({
 
       {isButtonVisible('import') && (
         <DropdownMenu
-          placement="right"
+          placement="right-start"
           onSelect={(data) => {
             importHandler(data);
           }}
+          targetTagName="div"
+          targetProps={{ style: { flex: 'none' } }}
           options={importMenu}
-          renderTarget={(targetProps) => (
-            <div {...targetProps} style={{ flex: 'none' }}>
-              <Toolbar.Item
-                id={options.import.id}
-                title={options.import.label}
-                icon={<FaFileImport />}
-              />
-            </div>
-          )}
-        />
+        >
+          <Toolbar.Item
+            id={options.import.id}
+            title={options.import.label}
+            icon={<FaFileImport />}
+          />
+        </DropdownMenu>
       )}
       {isButtonVisible('exportAs') && (
         <DropdownMenu
           onSelect={(data) => {
             exportHandler(data);
           }}
-          placement="right"
+          placement="right-start"
+          targetTagName="div"
+          targetProps={{ style: { flex: 'none' } }}
           options={exportMenu}
-          renderTarget={(targetProps) => (
-            <div {...targetProps} style={{ flex: 'none' }}>
-              <Toolbar.Item
-                id={options.exportAs.id}
-                title={options.import.label}
-                icon={<FaFileExport />}
-              />
-            </div>
-          )}
-        />
+        >
+          <Toolbar.Item
+            id={options.exportAs.id}
+            title={options.import.label}
+            icon={<FaFileExport />}
+          />
+        </DropdownMenu>
       )}
 
       {isButtonVisible('spectraStackAlignments') && ftCounter > 1 && (

diff --git a/src/demo/layouts/Admin.tsx b/src/demo/layouts/Admin.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 
 import { css } from '@emotion/react';
-import { Suspense, useMemo, useState, useCallback, StrictMode } from 'react';
+import { Suspense, useMemo, useState, useCallback } from 'react';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
 import Sidebar from '../Sidebar';
@@ -76,25 +76,25 @@ export function Dashboard(props: DashboardProps) {
           menuIsClosed ? mainPanelClosedCss : mainPanelOpenCss,
         )}
       >
-        <StrictMode>
-          <Suspense fallback={<div>Loading...</div>}>
-            <Routes>
-              {routesList.map((prop) => {
-                return (
-                  <Route
-                    path={`/SamplesDashboard/:id/${
-                      (prop.view || 'View') + getKey(prop.file)
-                    }`}
-                    element={<RenderView prop={prop} baseURL={baseURL} />}
-                    key={getKey(prop.file)}
-                  />
-                );
-              })}
+        {/*<StrictMode>*/}
+        <Suspense fallback={<div>Loading...</div>}>
+          <Routes>
+            {routesList.map((prop) => {
+              return (
+                <Route
+                  path={`/SamplesDashboard/:id/${
+                    (prop.view || 'View') + getKey(prop.file)
+                  }`}
+                  element={<RenderView prop={prop} baseURL={baseURL} />}
+                  key={getKey(prop.file)}
+                />
+              );
+            })}
 
-              {rootRoute}
-            </Routes>
-          </Suspense>
-        </StrictMode>
+            {rootRoute}
+          </Routes>
+        </Suspense>
+        {/*</StrictMode>*/}
       </div>
     </div>
   );