vrembem 4.0.0-next.22 → 4.0.0-next.24

package/dev/index.umd.cjs

@@ -86,29 +86,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       });
     }
   }
-  const not = {
-    inert: ":not([inert]):not([inert] *)",
-    negTabIndex: ':not([tabindex^="-"])',
-    disabled: ":not(:disabled)"
-  };
-  const focusableSelectors = [
-    `a[href]${not.inert}${not.negTabIndex}`,
-    `area[href]${not.inert}${not.negTabIndex}`,
-    `input:not([type="hidden"]):not([type="radio"])${not.inert}${not.negTabIndex}${not.disabled}`,
-    `input[type="radio"]${not.inert}${not.negTabIndex}${not.disabled}`,
-    `select${not.inert}${not.negTabIndex}${not.disabled}`,
-    `textarea${not.inert}${not.negTabIndex}${not.disabled}`,
-    `button${not.inert}${not.negTabIndex}${not.disabled}`,
-    `details${not.inert} > summary:first-of-type${not.negTabIndex}`,
-    // Discard until Firefox supports `:has()`
-    // See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
-    // `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
-    `iframe${not.inert}${not.negTabIndex}`,
-    `audio[controls]${not.inert}${not.negTabIndex}`,
-    `video[controls]${not.inert}${not.negTabIndex}`,
-    `[contenteditable]${not.inert}${not.negTabIndex}`,
-    `[tabindex]${not.inert}${not.negTabIndex}`
-  ];
   class FocusTrap {
     constructor(el = null, selectorFocus = "[data-focus]") {
       __privateAdd(this, _focusable);
@@ -158,7 +135,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       const focusable = [];
       const initFocus = document.activeElement;
       const initScrollTop = el.scrollTop;
-      const els = el.querySelectorAll(focusableSelectors.join(","));
+      const selector = focusableSelectors.join(",");
+      const els = el.querySelectorAll(selector);
       els.forEach((el2) => {
         el2.focus();
         if (document.activeElement === el2) {
@@ -173,6 +151,24 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   _focusable = new WeakMap();
   _handleFocusTrap = new WeakMap();
   _handleFocusLock = new WeakMap();
+  const notInert = ":not([inert])";
+  const notNegTabIndex = ':not([tabindex^="-"])';
+  const notDisabled = ":not(:disabled)";
+  const focusableSelectors = [
+    `a[href]${notInert}${notNegTabIndex}`,
+    `area[href]${notInert}${notNegTabIndex}`,
+    `input:not([type="hidden"]):not([type="radio"])${notInert}${notNegTabIndex}${notDisabled}`,
+    `input[type="radio"]${notInert}${notNegTabIndex}${notDisabled}`,
+    `select${notInert}${notNegTabIndex}${notDisabled}`,
+    `textarea${notInert}${notNegTabIndex}${notDisabled}`,
+    `button${notInert}${notNegTabIndex}${notDisabled}`,
+    `details${notInert} > summary:first-of-type${notNegTabIndex}`,
+    `iframe${notInert}${notNegTabIndex}`,
+    `audio[controls]${notInert}${notNegTabIndex}`,
+    `video[controls]${notInert}${notNegTabIndex}`,
+    `[contenteditable]${notInert}${notNegTabIndex}`,
+    `[tabindex]${notInert}${notNegTabIndex}`
+  ];
   function handleFocusTrap(event) {
     const isTab = event.key === "Tab" || event.keyCode === 9;
     if (!isTab) return;
@@ -1196,6 +1192,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     autoMount: false,
     // Selectors
     selectorPopover: ".popover",
+    selectorTooltip: ".popover_tooltip",
     selectorArrow: ".popover__arrow",
     // State classes
     stateActive: "is-active",
@@ -1320,9 +1317,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       if (!trigger && !popover) {
         return { error: new Error(`No popover elements found using the ID: "${id}".`) };
       } else if (!trigger) {
-        return { error: new Error("No popover trigger associated with the provided popover.") };
+        return { error: new Error(`No popover trigger associated with the provided popover: "${id}".`) };
       } else if (!popover) {
-        return { error: new Error("No popover associated with the provided popover trigger.") };
+        return { error: new Error(`No popover associated with the provided popover trigger: "${id}".`) };
       } else {
         return { popover, trigger };
       }
@@ -1333,8 +1330,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   async function close(query) {
     const popover = query ? getPopover.call(this, query) : await closeAll.call(this);
     if (popover && popover.state === "opened") {
+      popover.el.inert = true;
       popover.el.classList.remove(this.settings.stateActive);
-      if (popover.trigger.hasAttribute("aria-controls")) {
+      if (!popover.isTooltip) {
         popover.trigger.setAttribute("aria-expanded", "false");
       }
       popover.popper.setOptions({
@@ -1363,10 +1361,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   function closeCheck(popover) {
     if (popover.state != "opened") return;
     setTimeout(() => {
-      const isHovered = popover.el.closest(":hover") === popover.el || popover.trigger.closest(":hover") === popover.trigger;
-      const isFocused = document.activeElement.closest(
+      const isHovered = popover.el.matches(":hover") === popover.el || popover.trigger.matches(":hover") === popover.trigger;
+      let isFocused = document.activeElement.closest(
         `#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`
       );
+      isFocused = isFocused ? isFocused.matches(":focus-visible") : false;
       if (!isHovered && !isFocused) {
         popover.close();
       }
@@ -1374,6 +1373,16 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }, 1);
   }
   function handleClick(popover) {
+    const tooltipId = popover.trigger.getAttribute("aria-describedby");
+    if (tooltipId) {
+      const entry = this.get(tooltipId);
+      if (entry.isTooltip) {
+        if (entry.toggleDelayId) {
+          clearTimeout(entry.toggleDelayId);
+        }
+        entry.close();
+      }
+    }
     if (popover.state === "opened") {
       popover.close();
     } else {
@@ -1382,7 +1391,14 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       handleDocumentClick.call(this, popover);
     }
   }
-  function handleMouseEnter(popover) {
+  function handleMouseEnter(popover, event) {
+    if (event.type == "focus" && !popover.trigger.matches(":focus-visible")) {
+      return;
+    }
+    const isExpanded = popover.trigger.getAttribute("aria-expanded");
+    if (isExpanded && isExpanded == "true") {
+      return;
+    }
     if (popover.toggleDelayId) {
       clearTimeout(popover.toggleDelayId);
     }
@@ -2816,8 +2832,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   }
   async function open(query) {
     const popover = getPopover.call(this, query);
+    popover.el.inert = false;
     popover.el.classList.add(this.settings.stateActive);
-    if (popover.trigger.hasAttribute("aria-controls")) {
+    if (!popover.isTooltip) {
       popover.trigger.setAttribute("aria-expanded", "true");
     }
     popover.config = getConfig(popover.el, this.settings);
@@ -2844,7 +2861,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       popper: createPopper(trigger, el),
       config: getConfig(el, this.settings),
       get isTooltip() {
-        return trigger.hasAttribute("aria-describedby");
+        return !!el.closest(root.settings.selectorTooltip) || el.getAttribute("role") == "tooltip";
       },
       open() {
         return open.call(root, this);
@@ -2856,7 +2873,10 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         return deregister.call(root, this);
       }
     };
-    if (entry.trigger.hasAttribute("aria-controls")) {
+    if (entry.isTooltip) {
+      entry.el.setAttribute("role", "tooltip");
+    }
+    if (!entry.isTooltip) {
       entry.trigger.setAttribute("aria-expanded", "false");
     }
     registerEventListeners.call(this, entry);
@@ -2864,6 +2884,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     if (entry.el.classList.contains(this.settings.stateActive)) {
       await entry.open();
       handleDocumentClick.call(this, entry);
+    } else {
+      entry.el.inert = true;
     }
     entry.popper.setOptions({
       placement: entry.config["placement"]
@@ -2872,7 +2894,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   }
   function registerEventListeners(entry) {
     if (!entry.__eventListeners) {
-      const eventType = entry.config["event"];
+      const eventType = entry.isTooltip ? "hover" : entry.config["event"];
       if (eventType === "hover") {
         entry.__eventListeners = [{
           el: ["trigger"],