@rebilly/instruments 9.54.0 → 9.54.1

package/CHANGELOG.md

@@ -1,6 +1,6 @@
-## [9.54.0](https://github.com/Rebilly/rebilly/compare/instruments/core-v9.53.2...instruments/core-v9.54.0) (2024-05-29)
+## [9.54.1](https://github.com/Rebilly/rebilly/compare/instruments/core-v9.54.0...instruments/core-v9.54.1) (2024-05-30)
 
 
-### Features
+### Bug Fixes
 
-* **api-metadata, rebilly-js-sdk:** Update resources based on latest api definitions ([#5584](https://github.com/Rebilly/rebilly/issues/5584)) ([3f30308](https://github.com/Rebilly/rebilly/commit/3f303083e6d820b2c40971bf4711663e5a6a7c2c))
+* **instruments:** Allow deactivate model not working within shadowdom ([#5618](https://github.com/Rebilly/rebilly/issues/5618)) ([34f37a9](https://github.com/Rebilly/rebilly/commit/34f37a9cbc5704325fd3e4c8d865d431cc5e0512))

package/dist/index.js

@@ -2876,37 +2876,46 @@ function showConfirmationModalHandler(iframe) {
     }
   );
 }
+const modalTemplate$1 = ({ title: title2, message, cancelText, confirmText }) => `
+  <div class="rebilly-instruments-modal-overlay is-visible">
+    <div class="rebilly-instruments-modal-container rebilly-instruments-confirmation-modal-container is-visible">
+        <div class="rebilly-instruments-modal-header rebilly-instruments-confirmation-modal-header">
+            <strong
+                class="rebilly-instruments-modal-title rebilly-instruments-confirmation-modal-title"
+            >${title2}</strong>
+        </div>
+        <div class="rebilly-instruments-modal-content rebilly-instruments-confirmation-modal-content">
+            <p
+                class="rebilly-instruments-modal-message rebilly-instruments-confirmation-modal-message"
+            >${message}</p>
+        </div>
+        <div class="rebilly-instruments-modal-actions rebilly-instruments-confirmation-modal-actions">
+            <button
+                class="rebilly-instruments-button rebilly-instruments-button-secondary rebilly-instruments-confirmation-modal-cancel"
+            >${cancelText}</button>
+            <button
+                class="rebilly-instruments-button rebilly-instruments-confirmation-modal-confirm"
+            >${confirmText}</button>
+        </div>
+    </div>
+  </div>
+`;
 function showConfirmationModal({ title: title2, message, confirmText, cancelText }) {
   return new Promise((resolve2) => {
-    const modalElement = document.createElement("div");
-    modalElement.id = "confirmation-modal";
-    modalElement.classList.add(
-      "rebilly-instruments-modal-overlay",
-      "is-visible"
+    state.form.insertAdjacentHTML(
+      "beforeend",
+      modalTemplate$1({ title: title2, message, confirmText, cancelText })
+    );
+    document.body.style.overflow = "hidden";
+    const modalOverlay = state.form.querySelector(
+      ".rebilly-instruments-modal-overlay"
     );
-    modalElement.innerHTML = `
-            <div class="rebilly-instruments-modal-container rebilly-instruments-confirmation-modal-container is-visible">
-                <div class="rebilly-instruments-modal-header rebilly-instruments-confirmation-modal-header">
-                    <b class="rebilly-instruments-modal-title rebilly-instruments-confirmation-modal-title">${title2}</b>
-                </div>
-                <div class="rebilly-instruments-modal-content rebilly-instruments-confirmation-modal-content">
-                    <p class="rebilly-instruments-modal-message rebilly-instruments-confirmation-modal-message">${message}</p>
-                </div>
-                <div class="rebilly-instruments-modal-actions rebilly-instruments-confirmation-modal-actions">
-                    <button class="rebilly-instruments-button-transparent rebilly-instruments-confirmation-modal-cancel">${cancelText}</button>
-                    <button class="rebilly-instruments-button rebilly-instruments-confirmation-modal-confirm">${confirmText}</button>
-                </div>
-            </div>
-        `;
-    document.body.appendChild(modalElement);
-    const modalOverlay = document.getElementById("confirmation-modal");
-    const confirmBtn = modalOverlay.querySelector(
+    const confirmButton = state.form.querySelector(
       ".rebilly-instruments-confirmation-modal-confirm"
     );
-    const cancelBtn = modalOverlay.querySelector(
+    const cancelButton = state.form.querySelector(
       ".rebilly-instruments-confirmation-modal-cancel"
     );
-    document.body.style.overflow = "hidden";
     const closeModal = () => {
       modalOverlay.classList.remove("is-visible");
       setTimeout(() => {
@@ -2914,11 +2923,17 @@ function showConfirmationModal({ title: title2, message, confirmText, cancelText
         modalOverlay.remove();
       }, 300);
     };
-    confirmBtn.addEventListener("click", () => {
+    modalOverlay.addEventListener("click", (event) => {
+      if (event.target === modalOverlay) {
+        closeModal();
+        resolve2({ confirmed: false });
+      }
+    });
+    confirmButton.addEventListener("click", () => {
       closeModal();
       resolve2({ confirmed: true });
     });
-    cancelBtn.addEventListener("click", () => {
+    cancelButton.addEventListener("click", () => {
       closeModal();
       resolve2({ confirmed: false });
     });
@@ -27908,6 +27923,7 @@ const vars = (theme2) => `
     align-items: center;
     font-weight: var(--rebilly-fontWeight600);
     line-height: var(--rebilly-fontLineHeightBase);
+    margin-bottom: var(--rebilly-spacingM);
 }
 
 .rebilly-instruments-confirmation-modal-content {
@@ -27924,7 +27940,6 @@ const vars = (theme2) => `
 }
 
 .rebilly-instruments-confirmation-modal-actions .rebilly-instruments-confirmation-modal-confirm {
-    width: initial;
     margin-left: var(--rebilly-spacingS);
 }