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

package/dev/index.js

@@ -82,29 +82,6 @@ class Collection {
     });
   }
 }
-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);
@@ -154,7 +131,8 @@ class FocusTrap {
     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) {
@@ -169,6 +147,24 @@ class FocusTrap {
 _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;
@@ -1192,6 +1188,7 @@ const defaults = {
   autoMount: false,
   // Selectors
   selectorPopover: ".popover",
+  selectorTooltip: ".popover_tooltip",
   selectorArrow: ".popover__arrow",
   // State classes
   stateActive: "is-active",
@@ -1316,9 +1313,9 @@ function getPopoverElements(query) {
     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 };
     }
@@ -1329,8 +1326,9 @@ function getPopoverElements(query) {
 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({
@@ -1359,10 +1357,11 @@ async function closeAll() {
 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();
     }
@@ -1370,6 +1369,16 @@ function closeCheck(popover) {
   }, 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 {
@@ -1378,7 +1387,14 @@ function handleClick(popover) {
     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);
   }
@@ -2812,8 +2828,9 @@ function deregisterEventListeners(entry) {
 }
 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);
@@ -2840,7 +2857,7 @@ async function register(el, trigger) {
     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);
@@ -2852,7 +2869,10 @@ async function register(el, trigger) {
       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);
@@ -2860,6 +2880,8 @@ async function register(el, trigger) {
   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"]
@@ -2868,7 +2890,7 @@ async function register(el, trigger) {
 }
 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"],