@gitlab/ui 134.1.1 → 134.1.3

package/dist/utils/use_mock_intersection_observer.js

@@ -147,9 +147,20 @@ const useMockIntersectionObserver = () => {
   const getInstances = () => {
     return instances;
   };
+  const observersCount = observer => {
+    var _observer$$_observers;
+    return (observer === null || observer === void 0 ? void 0 : (_observer$$_observers = observer.$_observers) === null || _observer$$_observers === void 0 ? void 0 : _observer$$_observers.length) || 0;
+  };
+  const observesElement = (observer, element) => (observer === null || observer === void 0 ? void 0 : observer.$_observers.some(_ref8 => {
+    let _ref9 = _slicedToArray(_ref8, 1),
+      observedElement = _ref9[0];
+    return observedElement === element;
+  })) || false;
   return {
     getInstances,
-    trigger
+    trigger,
+    observersCount,
+    observesElement
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "134.1.1",
+  "version": "134.1.3",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/form/form_textarea/form_textarea.vue

@@ -2,8 +2,8 @@
 import { uniqueId, isBoolean, toInteger, toString } from 'lodash-es';
 import { toFloat } from '../../../../utils/number_utils';
 import { isVisible, stopEvent } from '../../../../utils/utils';
-import { VBVisible } from '../../../../vendor/bootstrap-vue/src/directives/visible/visible';
 import GlFormCharacterCount from '../form_character_count/form_character_count.vue';
+import { GlVisibleDirective } from './visible';
 
 export default {
   name: 'GlFormTextarea',
@@ -11,7 +11,7 @@ export default {
     GlFormCharacterCount,
   },
   directives: {
-    'b-visible': VBVisible,
+    GlVisible: GlVisibleDirective,
   },
   inheritAttrs: false,
   model: {
@@ -317,7 +317,6 @@ export default {
   },
   mounted() {
     this.handleAutofocus();
-    this.setHeight();
     this.$nextTick(() => {
       this.localId = uniqueId('gl-form-textarea-');
     });
@@ -444,11 +443,6 @@ export default {
         this.$emit('submit');
       }
     },
-    visibleCallback(visible) {
-      if (visible) {
-        this.$nextTick(this.setHeight);
-      }
-    },
     setHeight() {
       this.$nextTick(() => {
         window.requestAnimationFrame(() => {
@@ -513,7 +507,7 @@ export default {
   <div v-if="showCharacterCount">
     <textarea
       ref="input"
-      v-b-visible.640="visibleCallback"
+      v-gl-visible="setHeight"
       :value="localValue"
       :class="computedClass"
       :style="computedStyle"
@@ -560,7 +554,7 @@ export default {
   <textarea
     v-else
     ref="input"
-    v-b-visible.640="visibleCallback"
+    v-gl-visible="setHeight"
     :value="localValue"
     :class="computedClass"
     :style="computedStyle"

package/src/components/base/form/form_textarea/visible.js

@@ -0,0 +1,52 @@
+import { isFunction } from 'lodash-es';
+
+// IntersectionObserver-backed visibility directive.
+// Calls the function when the element enters the viewport.
+// The element is expanded by ROOT_MARGIN.
+const ROOT_MARGIN = '640px';
+
+let observer = null;
+
+// Exported for testing purposes only
+export const resetObserver = () => {
+  observer?.disconnect();
+  observer = null;
+};
+
+const attachObserver = (el, callback) => {
+  if (!isFunction(callback)) {
+    throw TypeError('directive value must be a function');
+  }
+
+  if (!observer) {
+    // the observer instance is shared for performance reasons
+    // more information: https://github.com/WICG/ResizeObserver/issues/59
+    observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.glVisibleHandler();
+          }
+        });
+      },
+      { rootMargin: ROOT_MARGIN },
+    );
+  }
+
+  el.glVisibleHandler = callback;
+  observer.observe(el);
+};
+
+const detachObserver = (el) => {
+  if (el.glVisibleHandler) {
+    delete el.glVisibleHandler;
+    observer?.unobserve(el);
+  }
+};
+
+export const GlVisibleDirective = {
+  bind(el, { value: callback }) {
+    attachObserver(el, callback);
+  },
+  unbind: detachObserver,
+};

package/src/components/base/token_selector/token_selector.scss

@@ -20,6 +20,8 @@
 }
 
 .gl-token-selector-input {
-  padding-bottom: $gl-spacing-scale-1 + $gl-spacing-scale-2;
-  padding-top: $gl-spacing-scale-1 + $gl-spacing-scale-2;
+  padding-top: $input-padding-y;
+  padding-bottom: $input-padding-y;
+  padding-left: $input-padding-x-sm;
+  padding-right: $input-padding-x-sm;
 }

package/src/components/base/token_selector/token_selector.vue

@@ -465,7 +465,7 @@ export default {
           <input
             ref="textInput"
             type="text"
-            class="gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none"
+            class="gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none"
             :value="inputText"
             :aria-activedescendant="handleAriaActiveDescendent(focusedDropdownItem)"
             :autocomplete="autocomplete"

package/src/utils/use_mock_intersection_observer.js

@@ -90,5 +90,10 @@ export const useMockIntersectionObserver = () => {
     return instances;
   };
 
-  return { getInstances, trigger };
+  const observersCount = (observer) => observer?.$_observers?.length || 0;
+
+  const observesElement = (observer, element) =>
+    observer?.$_observers.some(([observedElement]) => observedElement === element) || false;
+
+  return { getInstances, trigger, observersCount, observesElement };
 };

package/dist/vendor/bootstrap-vue/src/directives/visible/index.js

@@ -1 +0,0 @@
-export { VBVisible } from './visible';

package/dist/vendor/bootstrap-vue/src/directives/visible/visible.js

@@ -1,183 +0,0 @@
-import { RX_DIGITS } from '../../constants/regex';
-import { requestAF } from '../../utils/dom';
-import { isFunction } from '../../utils/inspect';
-import { looseEqual } from '../../utils/loose-equal';
-import { keys, clone } from '../../utils/object';
-import { getInstanceFromDirective } from '../../utils/get-instance-from-directive';
-
-// v-b-visible
-// Private visibility check directive
-// Based on IntersectionObserver
-//
-// Usage:
-//  v-b-visibility.<margin>.<once>="<callback>"
-//
-//  Value:
-//  <callback>: method to be called when visibility state changes, receives one arg:
-//     true:  element is visible
-//     false: element is not visible
-//     null:  IntersectionObserver not supported
-//
-//  Modifiers:
-//    <margin>: a positive decimal value of pixels away from viewport edge
-//              before being considered "visible". default is 0
-//    <once>:   keyword 'once', meaning when the element becomes visible and
-//              callback is called observation/notification will stop.
-//
-// When used in a render function:
-// export default {
-//   directives: { 'b-visible': VBVisible },
-//   render(h) {
-//     h(
-//       'div',
-//       {
-//         directives: [
-//           { name: 'b-visible', value=this.callback, modifiers: { '123':true, 'once':true } }
-//         ]
-//       }
-//     )
-//   }
-
-const OBSERVER_PROP_NAME = '__bv__visibility_observer';
-class VisibilityObserver {
-  constructor(el, options, instance) {
-    this.el = el;
-    this.callback = options.callback;
-    this.margin = options.margin || 0;
-    this.once = options.once || false;
-    this.observer = null;
-    this.visible = undefined;
-    this.doneOnce = false;
-    this.instance = instance;
-    // Create the observer instance (if possible)
-    this.createObserver();
-  }
-  createObserver() {
-    // Remove any previous observer
-    if (this.observer) {
-      /* istanbul ignore next */
-      this.stop();
-    }
-
-    // Should only be called once and `callback` prop should be a function
-    if (this.doneOnce || !isFunction(this.callback)) {
-      /* istanbul ignore next */
-      return;
-    }
-
-    // Create the observer instance
-    try {
-      // Future: Possibly add in other modifiers for left/right/top/bottom
-      // offsets, root element reference, and thresholds
-      this.observer = new IntersectionObserver(this.handler.bind(this), {
-        // `null` = 'viewport'
-        root: null,
-        // Pixels away from view port to consider "visible"
-        rootMargin: this.margin,
-        // Intersection ratio of el and root (as a value from 0 to 1)
-        threshold: 0
-      });
-    } catch {
-      // No IntersectionObserver support, so just stop trying to observe
-      this.doneOnce = true;
-      this.observer = undefined;
-      this.callback(null);
-      return;
-    }
-
-    // Start observing in a `$nextTick()` (to allow DOM to complete rendering)
-    /* istanbul ignore next: IntersectionObserver not supported in JSDOM */
-    this.instance.$nextTick(() => {
-      requestAF(() => {
-        // Placed in an `if` just in case we were destroyed before
-        // this `requestAnimationFrame` runs
-        if (this.observer) {
-          this.observer.observe(this.el);
-        }
-      });
-    });
-  }
-
-  /* istanbul ignore next */
-  handler(entries) {
-    const entry = entries ? entries[0] : {};
-    const isIntersecting = Boolean(entry.isIntersecting || entry.intersectionRatio > 0.0);
-    if (isIntersecting !== this.visible) {
-      this.visible = isIntersecting;
-      this.callback(isIntersecting);
-      if (this.once && this.visible) {
-        this.doneOnce = true;
-        this.stop();
-      }
-    }
-  }
-  stop() {
-    /* istanbul ignore next */
-    this.observer && this.observer.disconnect();
-    this.observer = null;
-  }
-}
-const destroy = el => {
-  const observer = el[OBSERVER_PROP_NAME];
-  if (observer && observer.stop) {
-    observer.stop();
-  }
-  delete el[OBSERVER_PROP_NAME];
-};
-const bind = (el, bindings, vnode) => {
-  const value = bindings.value,
-    modifiers = bindings.modifiers;
-  // `value` is the callback function
-  const options = {
-    margin: '0px',
-    once: false,
-    callback: value
-  };
-  // Parse modifiers
-  keys(modifiers).forEach(mod => {
-    /* istanbul ignore else: Until <b-img-lazy> is switched to use this directive */
-    if (RX_DIGITS.test(mod)) {
-      options.margin = `${mod}px`;
-    } else if (mod.toLowerCase() === 'once') {
-      options.once = true;
-    }
-  });
-  // Destroy any previous observer
-  destroy(el);
-  // Create new observer
-  const instance = getInstanceFromDirective(vnode, bindings);
-  el[OBSERVER_PROP_NAME] = new VisibilityObserver(el, options, instance);
-  // Store the current modifiers on the object (cloned)
-  el[OBSERVER_PROP_NAME]._prevModifiers = clone(modifiers);
-};
-
-// When the directive options may have been updated (or element)
-const componentUpdated = (el, bindings, vnode) => {
-  const value = bindings.value,
-    oldValue = bindings.oldValue,
-    modifiers = bindings.modifiers;
-  // Compare value/oldValue and modifiers to see if anything has changed
-  // and if so, destroy old observer and create new observer
-  /* istanbul ignore next */
-  const clonedModifiers = clone(modifiers);
-  /* istanbul ignore next */
-  if (el && (value !== oldValue || !el[OBSERVER_PROP_NAME] || !looseEqual(clonedModifiers, el[OBSERVER_PROP_NAME]._prevModifiers))) {
-    // Re-bind on element
-    bind(el, bindings, vnode);
-  }
-};
-
-// When directive un-binds from element
-const unbind = el => {
-  // Remove the observer
-  destroy(el);
-};
-
-// Export the directive
-const VBVisible = {
-  bind,
-  componentUpdated,
-  unbind
-};
-
-export { VBVisible };

package/src/vendor/bootstrap-vue/src/directives/visible/index.js

@@ -1,3 +0,0 @@
-import { VBVisible } from './visible'
-
-export { VBVisible }

package/src/vendor/bootstrap-vue/src/directives/visible/visible.js

@@ -1,188 +0,0 @@
-// v-b-visible
-// Private visibility check directive
-// Based on IntersectionObserver
-//
-// Usage:
-//  v-b-visibility.<margin>.<once>="<callback>"
-//
-//  Value:
-//  <callback>: method to be called when visibility state changes, receives one arg:
-//     true:  element is visible
-//     false: element is not visible
-//     null:  IntersectionObserver not supported
-//
-//  Modifiers:
-//    <margin>: a positive decimal value of pixels away from viewport edge
-//              before being considered "visible". default is 0
-//    <once>:   keyword 'once', meaning when the element becomes visible and
-//              callback is called observation/notification will stop.
-//
-// When used in a render function:
-// export default {
-//   directives: { 'b-visible': VBVisible },
-//   render(h) {
-//     h(
-//       'div',
-//       {
-//         directives: [
-//           { name: 'b-visible', value=this.callback, modifiers: { '123':true, 'once':true } }
-//         ]
-//       }
-//     )
-//   }
-
-import { RX_DIGITS } from '../../constants/regex'
-import { requestAF } from '../../utils/dom'
-import { isFunction } from '../../utils/inspect'
-import { looseEqual } from '../../utils/loose-equal'
-import { clone, keys } from '../../utils/object'
-import { getInstanceFromDirective } from '../../utils/get-instance-from-directive'
-
-const OBSERVER_PROP_NAME = '__bv__visibility_observer'
-
-class VisibilityObserver {
-  constructor(el, options, instance) {
-    this.el = el
-    this.callback = options.callback
-    this.margin = options.margin || 0
-    this.once = options.once || false
-    this.observer = null
-    this.visible = undefined
-    this.doneOnce = false
-    this.instance = instance
-    // Create the observer instance (if possible)
-    this.createObserver()
-  }
-
-  createObserver() {
-    // Remove any previous observer
-    if (this.observer) {
-      /* istanbul ignore next */
-      this.stop()
-    }
-
-    // Should only be called once and `callback` prop should be a function
-    if (this.doneOnce || !isFunction(this.callback)) {
-      /* istanbul ignore next */
-      return
-    }
-
-    // Create the observer instance
-    try {
-      // Future: Possibly add in other modifiers for left/right/top/bottom
-      // offsets, root element reference, and thresholds
-      this.observer = new IntersectionObserver(this.handler.bind(this), {
-        // `null` = 'viewport'
-        root: null,
-        // Pixels away from view port to consider "visible"
-        rootMargin: this.margin,
-        // Intersection ratio of el and root (as a value from 0 to 1)
-        threshold: 0
-      })
-    } catch {
-      // No IntersectionObserver support, so just stop trying to observe
-      this.doneOnce = true
-      this.observer = undefined
-      this.callback(null)
-      return
-    }
-
-    // Start observing in a `$nextTick()` (to allow DOM to complete rendering)
-    /* istanbul ignore next: IntersectionObserver not supported in JSDOM */
-    this.instance.$nextTick(() => {
-      requestAF(() => {
-        // Placed in an `if` just in case we were destroyed before
-        // this `requestAnimationFrame` runs
-        if (this.observer) {
-          this.observer.observe(this.el)
-        }
-      })
-    })
-  }
-
-  /* istanbul ignore next */
-  handler(entries) {
-    const entry = entries ? entries[0] : {}
-    const isIntersecting = Boolean(entry.isIntersecting || entry.intersectionRatio > 0.0)
-    if (isIntersecting !== this.visible) {
-      this.visible = isIntersecting
-      this.callback(isIntersecting)
-      if (this.once && this.visible) {
-        this.doneOnce = true
-        this.stop()
-      }
-    }
-  }
-
-  stop() {
-    /* istanbul ignore next */
-    this.observer && this.observer.disconnect()
-    this.observer = null
-  }
-}
-
-const destroy = el => {
-  const observer = el[OBSERVER_PROP_NAME]
-  if (observer && observer.stop) {
-    observer.stop()
-  }
-  delete el[OBSERVER_PROP_NAME]
-}
-
-const bind = (el, bindings, vnode) => {
-  const { value, modifiers } = bindings
-  // `value` is the callback function
-  const options = {
-    margin: '0px',
-    once: false,
-    callback: value
-  }
-  // Parse modifiers
-  keys(modifiers).forEach(mod => {
-    /* istanbul ignore else: Until <b-img-lazy> is switched to use this directive */
-    if (RX_DIGITS.test(mod)) {
-      options.margin = `${mod}px`
-    } else if (mod.toLowerCase() === 'once') {
-      options.once = true
-    }
-  })
-  // Destroy any previous observer
-  destroy(el)
-  // Create new observer
-  const instance = getInstanceFromDirective(vnode, bindings)
-  el[OBSERVER_PROP_NAME] = new VisibilityObserver(el, options, instance)
-  // Store the current modifiers on the object (cloned)
-  el[OBSERVER_PROP_NAME]._prevModifiers = clone(modifiers)
-}
-
-// When the directive options may have been updated (or element)
-const componentUpdated = (el, bindings, vnode) => {
-  const { value, oldValue, modifiers } = bindings
-  // Compare value/oldValue and modifiers to see if anything has changed
-  // and if so, destroy old observer and create new observer
-  /* istanbul ignore next */
-  const clonedModifiers = clone(modifiers)
-  /* istanbul ignore next */
-  if (
-    el &&
-    (value !== oldValue ||
-      !el[OBSERVER_PROP_NAME] ||
-      !looseEqual(clonedModifiers, el[OBSERVER_PROP_NAME]._prevModifiers))
-  ) {
-    // Re-bind on element
-    bind(el, bindings, vnode)
-  }
-}
-
-// When directive un-binds from element
-const unbind = el => {
-  // Remove the observer
-  destroy(el)
-}
-
-// Export the directive
-export const VBVisible = {
-  bind,
-  componentUpdated,
-  unbind
-}