@idds/js 1.0.79 → 1.0.81

package/dist/index.iife.js

@@ -851,44 +851,112 @@ var InaUI = (() => {
   }
 
   // src/js/components/stateless/modal.js
-  function initModal(rootSelector = `.${PREFIX}-modal`) {
-    document.querySelectorAll(rootSelector).forEach((modal) => {
-      const modalContent = modal.querySelector(`${rootSelector}__content`);
-      const modalTrigger = modal.querySelector(`${rootSelector}__trigger`);
-      const modalClose = modal.querySelector(`${rootSelector}__close`);
-      const modalOverlay = modal.querySelector(`${rootSelector}__overlay`);
-      modalTrigger.addEventListener("click", () => {
-        const modalTarget = modalTrigger.getAttribute("data-modal");
-        const modal2 = document.querySelector(
-          `.${PREFIX}-modal__content[data-modal="${modalTarget}"]`
-        );
-        document.body.style.overflow = "hidden";
-        modalContent.classList.add(`${PREFIX}-modal__content--show`);
-        modalOverlay.classList.add(`${PREFIX}-modal__overlay--show`);
-      });
-      modalClose.addEventListener("click", () => {
-        modalContent.classList.remove(`${PREFIX}-modal__content--show`);
-        modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
-        setTimeout(() => {
-          document.body.style.overflow = "";
-        }, 300);
-      });
-      modal.addEventListener("keydown", (event) => {
-        if (event.key === "Escape") {
-          modalContent.classList.remove(`${PREFIX}-modal__content--show`);
-          modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
-          setTimeout(() => {
-            document.body.style.overflow = "";
-          }, 300);
+  function trapFocus(element) {
+    const focusableEls = element.querySelectorAll(
+      'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusableEls.length === 0) return;
+    const firstFocusableEl = focusableEls[0];
+    const lastFocusableEl = focusableEls[focusableEls.length - 1];
+    element.addEventListener("keydown", function(e) {
+      if (e.key === "Tab") {
+        if (e.shiftKey) {
+          if (document.activeElement === firstFocusableEl) {
+            e.preventDefault();
+            lastFocusableEl.focus();
+          }
+        } else {
+          if (document.activeElement === lastFocusableEl) {
+            e.preventDefault();
+            firstFocusableEl.focus();
+          }
         }
+      }
+    });
+    const closeBtn = element.querySelector(`.${PREFIX}-modal__close-button`);
+    if (closeBtn) {
+      closeBtn.focus();
+    } else {
+      firstFocusableEl.focus();
+    }
+  }
+  function openModal(modalEl) {
+    if (!modalEl) return;
+    modalEl.style.display = "flex";
+    document.body.style.overflow = "hidden";
+    modalEl.setAttribute("aria-hidden", "false");
+    modalEl.classList.remove(
+      `${PREFIX}-modal--exit`,
+      `${PREFIX}-modal--exit-active`
+    );
+    modalEl.classList.add(`${PREFIX}-modal--enter`);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        modalEl.classList.add(`${PREFIX}-modal--enter-active`);
+        modalEl.classList.remove(`${PREFIX}-modal--enter`);
+        trapFocus(modalEl);
       });
-      modalOverlay.addEventListener("click", () => {
-        modalContent.classList.remove(`${PREFIX}-modal__content--show`);
-        modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
-        setTimeout(() => {
-          document.body.style.overflow = "";
-        }, 300);
-      });
+    });
+  }
+  function closeModal(modalEl) {
+    if (!modalEl) return;
+    modalEl.classList.remove(`${PREFIX}-modal--enter-active`);
+    modalEl.classList.add(`${PREFIX}-modal--exit-active`);
+    document.body.style.overflow = "";
+    modalEl.setAttribute("aria-hidden", "true");
+    setTimeout(() => {
+      modalEl.style.display = "none";
+      modalEl.classList.remove(`${PREFIX}-modal--exit-active`);
+    }, 300);
+  }
+  function initModal(rootSelector = `.${PREFIX}-modal`) {
+    document.addEventListener("click", (e) => {
+      const trigger = e.target.closest(`[data-toggle="modal"]`);
+      if (trigger) {
+        e.preventDefault();
+        const targetSelector = trigger.getAttribute("data-target") || trigger.getAttribute("href");
+        const modal = document.querySelector(targetSelector);
+        if (modal) {
+          modal._previousActiveElement = trigger;
+          openModal(modal);
+        }
+      }
+      const dismissBtn = e.target.closest(`[data-dismiss="modal"]`);
+      if (dismissBtn) {
+        const modal = dismissBtn.closest(rootSelector);
+        if (modal) {
+          closeModal(modal);
+          if (modal._previousActiveElement) {
+            modal._previousActiveElement.focus();
+          }
+        }
+      }
+      if (e.target.classList.contains(`${PREFIX}-modal`) || e.target.classList.contains(`${PREFIX}-modal__backdrop`)) {
+        const modal = e.target.closest(rootSelector);
+        if (modal && modal.getAttribute("data-persistent") !== "true") {
+          closeModal(modal);
+        }
+      }
+    });
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        const openModalEl = document.querySelector(`${rootSelector}[aria-hidden="false"]`) || document.querySelector(`${rootSelector}[style*="display: flex"]`);
+        if (openModalEl && openModalEl.getAttribute("data-persistent") !== "true") {
+          closeModal(openModalEl);
+          if (openModalEl._previousActiveElement) {
+            openModalEl._previousActiveElement.focus();
+          }
+        }
+      }
+    });
+    document.addEventListener("click", (e) => {
+      const closeIconBtn = e.target.closest(`.${PREFIX}-modal__close-button`);
+      if (closeIconBtn && !closeIconBtn.hasAttribute("data-dismiss")) {
+        const modal = closeIconBtn.closest(rootSelector);
+        if (modal) {
+          closeModal(modal);
+        }
+      }
     });
   }
 

package/dist/index.js

@@ -846,46 +846,114 @@ function initDatepicker() {
 }
 
 // src/js/components/stateless/modal.js
-function initModal(rootSelector = `.${PREFIX}-modal`) {
-  document.querySelectorAll(rootSelector).forEach((modal) => {
-    const modalContent = modal.querySelector(`${rootSelector}__content`);
-    const modalTrigger = modal.querySelector(`${rootSelector}__trigger`);
-    const modalClose = modal.querySelector(`${rootSelector}__close`);
-    const modalOverlay = modal.querySelector(`${rootSelector}__overlay`);
-    modalTrigger.addEventListener("click", () => {
-      const modalTarget = modalTrigger.getAttribute("data-modal");
-      const modal2 = document.querySelector(
-        `.${PREFIX}-modal__content[data-modal="${modalTarget}"]`
-      );
-      document.body.style.overflow = "hidden";
-      modalContent.classList.add(`${PREFIX}-modal__content--show`);
-      modalOverlay.classList.add(`${PREFIX}-modal__overlay--show`);
-    });
-    modalClose.addEventListener("click", () => {
-      modalContent.classList.remove(`${PREFIX}-modal__content--show`);
-      modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
-      setTimeout(() => {
-        document.body.style.overflow = "";
-      }, 300);
-    });
-    modal.addEventListener("keydown", (event) => {
-      if (event.key === "Escape") {
-        modalContent.classList.remove(`${PREFIX}-modal__content--show`);
-        modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
-        setTimeout(() => {
-          document.body.style.overflow = "";
-        }, 300);
+function trapFocus(element) {
+  const focusableEls = element.querySelectorAll(
+    'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+  );
+  if (focusableEls.length === 0) return;
+  const firstFocusableEl = focusableEls[0];
+  const lastFocusableEl = focusableEls[focusableEls.length - 1];
+  element.addEventListener("keydown", function(e) {
+    if (e.key === "Tab") {
+      if (e.shiftKey) {
+        if (document.activeElement === firstFocusableEl) {
+          e.preventDefault();
+          lastFocusableEl.focus();
+        }
+      } else {
+        if (document.activeElement === lastFocusableEl) {
+          e.preventDefault();
+          firstFocusableEl.focus();
+        }
       }
-    });
-    modalOverlay.addEventListener("click", () => {
-      modalContent.classList.remove(`${PREFIX}-modal__content--show`);
-      modalOverlay.classList.remove(`${PREFIX}-modal__overlay--show`);
-      setTimeout(() => {
-        document.body.style.overflow = "";
-      }, 300);
+    }
+  });
+  const closeBtn = element.querySelector(`.${PREFIX}-modal__close-button`);
+  if (closeBtn) {
+    closeBtn.focus();
+  } else {
+    firstFocusableEl.focus();
+  }
+}
+function openModal(modalEl) {
+  if (!modalEl) return;
+  modalEl.style.display = "flex";
+  document.body.style.overflow = "hidden";
+  modalEl.setAttribute("aria-hidden", "false");
+  modalEl.classList.remove(
+    `${PREFIX}-modal--exit`,
+    `${PREFIX}-modal--exit-active`
+  );
+  modalEl.classList.add(`${PREFIX}-modal--enter`);
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      modalEl.classList.add(`${PREFIX}-modal--enter-active`);
+      modalEl.classList.remove(`${PREFIX}-modal--enter`);
+      trapFocus(modalEl);
     });
   });
 }
+function closeModal(modalEl) {
+  if (!modalEl) return;
+  modalEl.classList.remove(`${PREFIX}-modal--enter-active`);
+  modalEl.classList.add(`${PREFIX}-modal--exit-active`);
+  document.body.style.overflow = "";
+  modalEl.setAttribute("aria-hidden", "true");
+  setTimeout(() => {
+    modalEl.style.display = "none";
+    modalEl.classList.remove(`${PREFIX}-modal--exit-active`);
+  }, 300);
+}
+function initModal(rootSelector = `.${PREFIX}-modal`) {
+  document.addEventListener("click", (e) => {
+    const trigger = e.target.closest(`[data-toggle="modal"]`);
+    if (trigger) {
+      e.preventDefault();
+      const targetSelector = trigger.getAttribute("data-target") || trigger.getAttribute("href");
+      const modal = document.querySelector(targetSelector);
+      if (modal) {
+        modal._previousActiveElement = trigger;
+        openModal(modal);
+      }
+    }
+    const dismissBtn = e.target.closest(`[data-dismiss="modal"]`);
+    if (dismissBtn) {
+      const modal = dismissBtn.closest(rootSelector);
+      if (modal) {
+        closeModal(modal);
+        if (modal._previousActiveElement) {
+          modal._previousActiveElement.focus();
+        }
+      }
+    }
+    if (e.target.classList.contains(`${PREFIX}-modal`) || e.target.classList.contains(`${PREFIX}-modal__backdrop`)) {
+      const modal = e.target.closest(rootSelector);
+      if (modal && modal.getAttribute("data-persistent") !== "true") {
+        closeModal(modal);
+      }
+    }
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      const openModalEl = document.querySelector(`${rootSelector}[aria-hidden="false"]`) || document.querySelector(`${rootSelector}[style*="display: flex"]`);
+      if (openModalEl && openModalEl.getAttribute("data-persistent") !== "true") {
+        closeModal(openModalEl);
+        if (openModalEl._previousActiveElement) {
+          openModalEl._previousActiveElement.focus();
+        }
+      }
+    }
+  });
+  document.addEventListener("click", (e) => {
+    const closeIconBtn = e.target.closest(`.${PREFIX}-modal__close-button`);
+    if (closeIconBtn && !closeIconBtn.hasAttribute("data-dismiss")) {
+      const modal = closeIconBtn.closest(rootSelector);
+      if (modal) {
+        closeModal(modal);
+      }
+    }
+  });
+}
 
 // src/js/components/stateless/drawer.js
 var PREFIX2 = "ina";
@@ -894,18 +962,24 @@ function initDrawer(rootSelector = `.${PREFIX2}-drawer`) {
   const closeDrawer = (drawer) => {
     if (!drawer) return;
     drawer.classList.add(`${PREFIX2}-drawer--closing`);
+    drawer.classList.remove(`${PREFIX2}-drawer--open`);
     const onAnimationEnd = () => {
       drawer.classList.remove(`${PREFIX2}-drawer--closing`);
       drawer.style.display = "none";
       document.body.style.overflow = "";
       drawer.removeEventListener("animationend", onAnimationEnd);
     };
+    setTimeout(() => {
+      if (drawer.style.display !== "none") onAnimationEnd();
+    }, 300);
     drawer.addEventListener("animationend", onAnimationEnd, { once: true });
   };
   const openDrawer = (drawer) => {
     if (!drawer) return;
     drawer.style.display = "flex";
     document.body.style.overflow = "hidden";
+    drawer.offsetHeight;
+    drawer.classList.add(`${PREFIX2}-drawer--open`);
     drawer.dispatchEvent(new CustomEvent("drawer:open"));
   };
   drawers.forEach((drawer) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/js",
-  "version": "1.0.79",
+  "version": "1.0.81",
   "publishConfig": {
     "access": "public"
   },