[bootstrap] upgrade to 5.3.3

dist/index.html

@@ -5,6 +5,7 @@
         <title>CNRS GarganText</title>
         <link rel="stylesheet" href="icons/forkawesome.css">
         <!-- <link href="styles/bootstrap.min.css" rel="stylesheet"> -->
+	<link id="bootstrap-css" href="styles/bootstrap-5.3.3.min.css" rel="stylesheet" />
         <link id="bootstrap-css" href="styles/bootstrap-default.css" rel="stylesheet" />
         <link rel="stylesheet" type="text/css" href="styles/highlightjs-solarized-light.css" />
         <style> * {margin: 0; padding: 0; list-style: none;} </style>
@@ -13,7 +14,8 @@
         <div id="app"></div>
         <div id="portal"></div>
         <script src="js/jquery.js"></script>
-        <script src="js/bootstrap@4.6.2/bootstrap.bundle.min.js"></script>
+        <!-- <script src="js/bootstrap@4.6.2/bootstrap.bundle.min.js"></script> -->
+	<script src="js/bootstrap@5.3.3/bootstrap.bundle.min.js"></script>
         <script src="bundle.min.js"></script>
     </body>
 </html>

package.json

@@ -34,7 +34,7 @@
     "@urql/core": "~2.3.3",
     "aes-js": "~3.1.1",
     "base-x": "~3.0.2",
-    "bootstrap": "~4.6.0",
+    "bootstrap": "~5.3.3",
     "bootstrap-dark": "~1.0.3",
     "buffer": "~6.0.3",
     "concurrently": "^9.1.0",

src/Gargantext/Components/Bootstrap/Floaty/BaseModal.js

 'use strict';
 
+
 /**
  * @function show
  * @param {Window} window
@@ -7,15 +8,20 @@
  * @unpure {Object} window.$
  */
 export function _show(window, querySelector, events) {
-  let $modal = window.$(querySelector);
-  $modal.modal('show');
-  console.log('events', events);
+  //let $modal = window.$(querySelector);
+  // $modal.modal('show');
+
+  let modal = bootstrap.Modal.getOrCreateInstance('#' + querySelector);
+  let el = document.getElementById(querySelector);
+    
+  //console.log('events', events);
   if(events.onHide) {
-    $modal.on('hidden.bs.modal', events.onHide());
+    el.addEventListener('hidden.bs.modal', events.onHide);
   }
   if(events.onShow) {
-    $modal.on('shown.bs.modal', events.onShow());
+    el.addEventListener('shown.bs.modal', events.onShow);
   }
+  modal.show();
 }
 /**
  * @function hide
@@ -24,10 +30,14 @@ export function _show(window, querySelector, events) {
  * @unpure {Object} window.$
  */
 export function _hide(window, querySelector) {
-  window.$(querySelector).modal('hide');
-  // @XXX Bootstrap not removing some modal elements on "hide" method
-  // @https://stackoverflow.com/questions/50168312/bootstrap-4-close-modal-backdrop-doesnt-disappear
-  window.$('body').removeClass('modal-open');
-  window.$('body').css('padding-right', '0');
-  window.$('.modal-backdrop').remove();
+    //window.$(querySelector).modal('hide');
+    let $modal = bootstrap.Modal.getInstance('#' + querySelector);
+    if ($modal) {
+	$modal.hide();
+    }
+    // @XXX Bootstrap not removing some modal elements on "hide" method
+    // @https://stackoverflow.com/questions/50168312/bootstrap-4-close-modal-backdrop-doesnt-disappear
+    window.$('body').removeClass('modal-open');
+    window.$('body').css('padding-right', '0');
+    window.$('.modal-backdrop').remove();
 }

src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs

@@ -131,7 +131,8 @@ component = R.memo' $ R.hooksComponent componentName cpt
 
       id = componentName <> "-" <> uuid
 
-      selector = "#" <> id
+      -- selector = "#" <> id
+      selector = id
 
     -- | Hooks
     -- |