@gitlab/ui 86.5.0 → 86.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [86.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.5.1...v86.6.0) (2024-07-10)
+
+
+### Features
+
+* **OutsideDirective:** Add Event Listener for focusin ([aee99c5](https://gitlab.com/gitlab-org/gitlab-ui/commit/aee99c56b926d9468030774c4bd33eac01f4f601))
+
+## [86.5.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.5.0...v86.5.1) (2024-07-10)
+
+
+### Bug Fixes
+
+* **GlBadge:** remove content wrapper element ([275887c](https://gitlab.com/gitlab-org/gitlab-ui/commit/275887c30c25be2257a40a88cde2f62a1198fc7e))
+
 # [86.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.4.1...v86.5.0) (2024-07-10)
 
 

package/dist/components/base/badge/badge.js

@@ -68,7 +68,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-badge',_vm._b({staticClass:"gl-badge",class:{ 'gl-px-2!': !_vm.$scopedSlots.default },attrs:{"variant":_vm.variant,"role":_vm.role,"aria-label":_vm.ariaLabel,"pill":""}},'b-badge',_vm.$attrs,false),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2 gl-ml-n2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-badge',_vm._b({staticClass:"gl-badge",class:{ 'gl-px-2!': !_vm.$scopedSlots.default },attrs:{"variant":_vm.variant,"role":_vm.role,"aria-label":_vm.ariaLabel,"pill":""}},'b-badge',_vm.$attrs,false),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2 gl-ml-n2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/directives/outside/outside.js

@@ -1,19 +1,32 @@
 /**
- * Map<HTMLElement, Function>
+ * Map<HTMLElement, { callback: Function, eventTypes: Array<string> }>
  */
 const callbacks = new Map();
+const click = 'click';
+const focusin = 'focusin';
+const supportedEventTypes = [click, focusin];
+const defaultEventType = click;
 
 /**
- * Is a global listener already set up?
+ * A Set to keep track of currently active event types.
+ * This ensures that event listeners are only added for the event types that are in use.
+ *
+ * @type {Set<string>}
  */
-let listening = false;
+const activeEventTypes = new Set();
 let lastMousedown = null;
 const globalListener = event => {
-  callbacks.forEach((callback, element) => {
-    const originalEvent = lastMousedown || event;
+  callbacks.forEach((_ref, element) => {
+    let {
+      callback,
+      eventTypes
+    } = _ref;
+    const originalEvent = event.type === click ? lastMousedown || event : event;
     if (
     // Ignore events that aren't targeted outside the element
-    element.contains(originalEvent.target)) {
+    element.contains(originalEvent.target) ||
+    // Ignore events that aren't the specified types for this element
+    !eventTypes.includes(event.type)) {
       return;
     }
     try {
@@ -25,7 +38,9 @@ const globalListener = event => {
       }
     }
   });
-  lastMousedown = null;
+  if (event.type === click) {
+    lastMousedown = null;
+  }
 };
 
 // We need to listen for mouse events because text selection fires click event only when selection ends.
@@ -34,39 +49,72 @@ const globalListener = event => {
 const onMousedown = event => {
   lastMousedown = event;
 };
-const startListening = () => {
-  if (listening) {
-    return;
-  }
-  document.addEventListener('mousedown', onMousedown);
-  // Added { capture: true } to prevent the behavior discussed in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1686#note_412545027
-  // Ensures the event listener handles the event in the capturing phase, avoiding issues encountered previously.
-  // Cannot be tested with Jest or Cypress, but can be tested with Playwright in the future: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4272#note_1947425384
-  document.addEventListener('click', globalListener, {
-    capture: true
+const startListening = eventTypes => {
+  eventTypes.forEach(eventType => {
+    if (!activeEventTypes.has(eventType)) {
+      // Listening to mousedown events, ensures that a text selection doesn't trigger the
+      // GlOutsideDirective 'click' callback if the selection started within the target element.
+      if (eventType === click) {
+        document.addEventListener('mousedown', onMousedown);
+      }
+
+      // Added { capture: true } to all event types to prevent the behavior discussed in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1686#note_412545027
+      // Ensures the event listener handles the event in the capturing phase, avoiding issues encountered previously.
+      // Cannot be tested with Jest or Cypress, but can be tested with Playwright in the future: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4272#note_1947425384
+      document.addEventListener(eventType, globalListener, {
+        capture: true
+      });
+      activeEventTypes.add(eventType);
+    }
   });
-  listening = true;
   lastMousedown = null;
 };
-const stopListening = () => {
-  if (!listening) {
-    return;
+const stopListening = eventTypesToUnbind => {
+  eventTypesToUnbind.forEach(eventType => {
+    if (activeEventTypes.has(eventType)) {
+      if ([...callbacks.values()].every(_ref2 => {
+        let {
+          eventTypes
+        } = _ref2;
+        return !eventTypes.includes(eventType);
+      })) {
+        document.removeEventListener(eventType, globalListener);
+        activeEventTypes.delete(eventType);
+      }
+    }
+  });
+  if (eventTypesToUnbind.includes(click) && !activeEventTypes.has(click)) {
+    document.removeEventListener('mousedown', onMousedown);
   }
-  document.removeEventListener('mousedown', onMousedown);
-  document.removeEventListener('click', globalListener);
-  listening = false;
 };
-const bind = (el, _ref) => {
+function parseBinding(_ref3) {
   let {
+    arg,
     value,
-    arg = 'click'
-  } = _ref;
-  if (typeof value !== 'function') {
-    throw new Error(`[GlOutsideDirective] Value must be a function; got ${typeof value}!`);
-  }
-  if (arg !== 'click') {
-    throw new Error(`[GlOutsideDirective] Cannot bind ${arg} events; only click events are currently supported!`);
+    modifiers
+  } = _ref3;
+  const modifiersList = Object.keys(modifiers);
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof value !== 'function') {
+      throw new Error(`[GlOutsideDirective] Value must be a function; got ${typeof value}!`);
+    }
+    if (typeof arg !== 'undefined') {
+      throw new Error(`[GlOutsideDirective] Arguments are not supported. Consider using modifiers instead.`);
+    }
+    if (modifiersList.some(modifier => !supportedEventTypes.includes(modifier))) {
+      throw new Error(`[GlOutsideDirective] Cannot bind ${modifiersList} events; supported event types are: ${supportedEventTypes.join(', ')}`);
+    }
   }
+  return {
+    callback: value,
+    eventTypes: modifiersList.length > 0 ? modifiersList : [defaultEventType]
+  };
+}
+const bind = (el, bindings) => {
+  const {
+    callback,
+    eventTypes
+  } = parseBinding(bindings);
   if (callbacks.has(el)) {
     // This element is already bound. This is possible if two components, which
     // share the same root node, (i.e., one is a higher-order component
@@ -79,15 +127,17 @@ const bind = (el, _ref) => {
     // element.
     return;
   }
-  if (!listening) {
-    startListening();
-  }
-  callbacks.set(el, value);
+  callbacks.set(el, {
+    callback,
+    eventTypes
+  });
+  startListening(eventTypes);
 };
 const unbind = el => {
-  callbacks.delete(el);
-  if (callbacks.size === 0) {
-    stopListening();
+  const entry = callbacks.get(el);
+  if (entry) {
+    callbacks.delete(el);
+    stopListening(entry.eventTypes);
   }
 };
 const OutsideDirective = {