@haiilo/catalyst 0.3.2 → 0.4.0

package/dist/cjs/{cat-alert_8.cjs.entry.js → cat-alert_9.cjs.entry.js}

@@ -1753,7 +1753,7 @@ const computePosition = (reference, floating, options) => computePosition$1(refe
 });
 
 /*!
-* tabbable 5.3.0-beta.1
+* tabbable 5.3.1
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]:not(slot)', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
@@ -1872,34 +1872,22 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
   return candidates;
 };
 
-var isContentEditable = function isContentEditable(node) {
-  return node.contentEditable === 'true';
-};
-
 var getTabindex = function getTabindex(node, isScope) {
-  var tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);
-
-  if (!isNaN(tabindexAttr)) {
-    return tabindexAttr;
-  } // Browsers do not return `tabIndex` correctly for contentEditable nodes;
-  // so if they don't have a tabindex attribute specifically set, assume it's 0.
-
-
-  if (isContentEditable(node)) {
-    return 0;
-  } // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
-  //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
-  //  yet they are still part of the regular tab order; in FF, they get a default
-  //  `tabIndex` of 0; since Chrome still puts those elements in the regular tab
-  //  order, consider their tab index to be 0.
-  //
-  // isScope is positive for custom element with shadow root or slot that by default
-  // have tabIndex -1, but need to be sorted by document order in order for their
-  // content to be inserted in the correct position
-
-
-  if ((isScope || node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {
-    return 0;
+  if (node.tabIndex < 0) {
+    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
+    // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
+    // yet they are still part of the regular tab order; in FF, they get a default
+    // `tabIndex` of 0; since Chrome still puts those elements in the regular tab
+    // order, consider their tab index to be 0.
+    // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
+    // so if they don't have a tabindex attribute specifically set, assume it's 0.
+    //
+    // isScope is positive for custom element with shadow root or slot that by default
+    // have tabIndex -1, but need to be sorted by document order in order for their
+    // content to be inserted in the correct position
+    if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || node.isContentEditable) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
+      return 0;
+    }
   }
 
   return node.tabIndex;
@@ -2082,7 +2070,7 @@ var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(o
 };
 
 var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
-  if (!isNodeMatchingSelectorFocusable(options, node) || isNonTabbableRadio(node) || getTabindex(node) < 0) {
+  if (isNonTabbableRadio(node) || getTabindex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
     return false;
   }
 
@@ -2186,7 +2174,7 @@ var isFocusable = function isFocusable(node, options) {
 };
 
 /*!
-* focus-trap 6.8.0-beta.2
+* focus-trap 6.8.1
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
@@ -2483,16 +2471,10 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
 
   var updateTabbableNodes = function updateTabbableNodes() {
     state.containerGroups = state.containers.map(function (container) {
-      var _config$tabbableOptio, _config$tabbableOptio2;
-
-      var tabbableNodes = tabbable(container, {
-        getShadowRoot: (_config$tabbableOptio = config.tabbableOptions) === null || _config$tabbableOptio === void 0 ? void 0 : _config$tabbableOptio.getShadowRoot
-      }); // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
+      var tabbableNodes = tabbable(container, config.tabbableOptions); // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
       //  are a superset of tabbable nodes
 
-      var focusableNodes = focusable(container, {
-        getShadowRoot: (_config$tabbableOptio2 = config.tabbableOptions) === null || _config$tabbableOptio2 === void 0 ? void 0 : _config$tabbableOptio2.getShadowRoot
-      });
+      var focusableNodes = focusable(container, config.tabbableOptions);
       return {
         container: container,
         tabbableNodes: tabbableNodes,
@@ -2530,12 +2512,12 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
 
           if (forward) {
             return focusableNodes.slice(nodeIdx + 1).find(function (n) {
-              return isTabbable(n);
+              return isTabbable(n, config.tabbableOptions);
             });
           }
 
           return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
-            return isTabbable(n);
+            return isTabbable(n, config.tabbableOptions);
           });
         }
       };
@@ -2603,7 +2585,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
         //  that was clicked, whether it's focusable or not; by setting
         //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused
         //  on activation (or the configured `setReturnFocus` node)
-        returnFocus: config.returnFocusOnDeactivate && !isFocusable(target)
+        returnFocus: config.returnFocusOnDeactivate && !isFocusable(target, config.tabbableOptions)
       });
       return;
     } // This is needed for mobile devices.
@@ -2670,7 +2652,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           return target === firstTabbableNode;
         });
 
-        if (startOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target) && !isTabbable(target) && !containerGroup.nextTabbableNode(target, false))) {
+        if (startOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target, false))) {
           // an exception case where the target is either the container itself, or
           //  a non-tabbable node that was given focus (i.e. tabindex is negative
           //  and user clicked on it or node was programmatically given focus)
@@ -2696,7 +2678,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           return target === lastTabbableNode;
         });
 
-        if (lastOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target) && !isTabbable(target) && !containerGroup.nextTabbableNode(target))) {
+        if (lastOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target))) {
           // an exception case where the target is the container itself, or
           //  a non-tabbable node that was given focus (i.e. tabindex is negative
           //  and user clicked on it or node was programmatically given focus)
@@ -2932,15 +2914,19 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   return trap;
 };
 
+const firstTabbable = (container) => {
+  return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
+};
+
 const catMenuCss = ":host{display:inline-block}:host([hidden]){display:none}.content{padding-top:0.5rem;padding-bottom:0.5rem;position:absolute;background:white;display:none;overflow:auto;-webkit-overflow-scrolling:touch;min-width:8rem;max-width:16rem;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem}";
 
-let nextUniqueId = 0;
+let nextUniqueId$1 = 0;
 const CatMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.catOpen = index.createEvent(this, "catOpen", 7);
     this.catClose = index.createEvent(this, "catClose", 7);
-    this.id = nextUniqueId++;
+    this.id = nextUniqueId$1++;
     /**
      * The placement of the menu.
      */
@@ -2956,7 +2942,7 @@ const CatMenu = class {
   }
   componentDidLoad() {
     var _a, _b, _c, _d, _e;
-    this.trigger = this.firstTabbable(this.triggerSlot);
+    this.trigger = firstTabbable(this.triggerSlot);
     (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'true');
     (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
     (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-controls', this.contentId);
@@ -2968,7 +2954,7 @@ const CatMenu = class {
     this.keyListener = event => {
       if (this.content && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
         const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });
-        const activeElement = this.firstTabbable(document.activeElement);
+        const activeElement = firstTabbable(document.activeElement);
         const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
         const activeOff = event.key === 'ArrowDown' ? 1 : -1;
         const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
@@ -3031,9 +3017,6 @@ const CatMenu = class {
       });
     }
   }
-  firstTabbable(container) {
-    return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
-  }
 };
 CatMenu.OFFSET = 4;
 CatMenu.style = catMenuCss;
@@ -4438,6 +4421,129 @@ const CatSpinner = class {
 };
 CatSpinner.style = catSpinnerCss;
 
+const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;padding:0.25rem;background-color:rgba(0, 0, 0, 0.7);border-radius:0.125rem;color:white;white-space:nowrap;transition:0.13s linear;visibility:hidden;opacity:0}.tooltip-show{opacity:1;visibility:visible}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
+
+let nextUniqueId = 0;
+const CatTooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.id = `cat-tooltip-${nextUniqueId++}`;
+    /**
+     * The content of the tooltip.
+     */
+    this.content = '';
+    /**
+     * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,
+     * and invisible. Corresponds with the native HTML disabled attribute.
+     */
+    this.disabled = false;
+    /**
+     * The placement of the tooltip.
+     */
+    this.placement = 'top';
+    /**
+     * The delay time for showing tooltip in ms.
+     */
+    this.showDelay = 1000;
+    /**
+     * The delay time for hiding tooltip in ms.
+     */
+    this.hideDelay = 0;
+    /**
+     * The duration of tap to show the tooltip.
+     */
+    this.longTouchDuration = 1000;
+  }
+  handleKeyDown({ key }) {
+    key === 'Escape' && this.hideListener();
+  }
+  componentDidLoad() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;
+    if (!this.isTabbable) {
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', '0');
+    }
+    if (this.trigger && this.tooltip) {
+      autoUpdate(this.trigger, this.tooltip, () => this.update());
+    }
+    if (isTouchDevice) {
+      (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.addEventListener('touchstart', this.touchStartListener.bind(this));
+      (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.addEventListener('touchend', this.touchEndListener.bind(this));
+    }
+    else {
+      (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.addEventListener('focusin', this.showListener.bind(this));
+      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('focusout', this.hideListener.bind(this));
+      (_f = this.trigger) === null || _f === void 0 ? void 0 : _f.addEventListener('mouseenter', this.showListener.bind(this));
+      (_g = this.trigger) === null || _g === void 0 ? void 0 : _g.addEventListener('mouseleave', this.hideListener.bind(this));
+    }
+  }
+  disconnectedCallback() {
+    var _a, _b, _c, _d, _e, _f;
+    if (isTouchDevice) {
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', this.touchStartListener.bind(this));
+      (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchend', this.touchEndListener.bind(this));
+    }
+    else {
+      (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseenter', this.showListener.bind(this));
+      (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseleave', this.hideListener.bind(this));
+      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.removeEventListener('focusin', this.showListener.bind(this));
+      (_f = this.trigger) === null || _f === void 0 ? void 0 : _f.removeEventListener('focusout', this.hideListener.bind(this));
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, index.h("slot", null)), this.content && !this.disabled && (index.h("div", { ref: el => (this.tooltip = el), id: this.id, class: "tooltip" }, this.content))));
+  }
+  get isTabbable() {
+    return firstTabbable(this.trigger);
+  }
+  update() {
+    if (this.trigger && this.tooltip) {
+      computePosition(this.trigger, this.tooltip, {
+        placement: this.placement,
+        middleware: [offset(CatTooltip.OFFSET), flip()]
+      }).then(({ x, y }) => {
+        if (this.tooltip) {
+          Object.assign(this.tooltip.style, {
+            left: `${Math.max(0, x)}px`,
+            top: `${y}px`
+          });
+        }
+      });
+    }
+  }
+  showListener() {
+    window.clearTimeout(this.hideTimeout);
+    this.showTimeout = window.setTimeout(() => {
+      var _a, _b;
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.focus();
+      (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.classList.add('tooltip-show');
+    }, this.showDelay);
+  }
+  hideListener() {
+    window.clearTimeout(this.showTimeout);
+    this.hideTimeout = window.setTimeout(() => {
+      var _a, _b;
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.blur();
+      (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.classList.remove('tooltip-show');
+    }, this.hideDelay);
+  }
+  touchStartListener() {
+    this.touchTimeout = window.setTimeout(() => {
+      var _a;
+      (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
+    }, this.longTouchDuration);
+  }
+  touchEndListener() {
+    var _a;
+    window.clearTimeout(this.touchTimeout);
+    (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
+  }
+};
+CatTooltip.OFFSET = 4;
+CatTooltip.style = catTooltipCss;
+
 exports.cat_alert = CatAlert;
 exports.cat_badge = CatBadge;
 exports.cat_button = CatButton;
@@ -4446,5 +4552,6 @@ exports.cat_menu = CatMenu;
 exports.cat_scrollable = CatScrollable;
 exports.cat_skeleton = CatSkeleton;
 exports.cat_spinner = CatSpinner;
+exports.cat_tooltip = CatTooltip;
 
-//# sourceMappingURL=cat-alert_8.cjs.entry.js.map
+//# sourceMappingURL=cat-alert_9.cjs.entry.js.map