@gitlab/ui 132.0.1 → 132.0.2

package/dist/config.js

@@ -0,0 +1,53 @@
+import translationKeys from '../translations';
+
+const i18n = translationKeys;
+const defaultConfig = {
+  firstDayOfWeek: 0 // Defaults to 0 (Sunday)
+};
+let configured = false;
+
+/**
+ * Set GitLab UI configuration.
+ *
+ * @typedef {object} GitLabUIConfiguration
+ * @template TValue=string
+ * @property {undefined | Object} translations Generic translations for component labels to fall back to.
+ * @property {undefined | Number} firstDayOfWeek Configured first day of the week, from 0 (Sunday) to 6 (Saturday).
+ * @property {boolean} [accessibleLoadingButton] Temporary flag to enable accessible loading button.
+ *
+ */
+const setConfigs = function () {
+  let {
+    translations,
+    firstDayOfWeek
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  if (configured) {
+    if (process.env.NODE_ENV === 'development') {
+      throw new Error('GitLab UI can only be configured once!');
+    }
+    return;
+  }
+  configured = true;
+  if (typeof firstDayOfWeek === 'number' && firstDayOfWeek >= 0 && firstDayOfWeek <= 6) {
+    defaultConfig.firstDayOfWeek = firstDayOfWeek;
+  }
+  if (typeof translations === 'object') {
+    if (process.env.NODE_ENV === 'development') {
+      const undefinedTranslationKeys = Object.keys(i18n).reduce((acc, current) => {
+        if (!(current in translations)) {
+          acc.push(current);
+        }
+        return acc;
+      }, []);
+      if (undefinedTranslationKeys.length) {
+        /* eslint-disable no-console */
+        console.warn('[@gitlab/ui] The following translations have not been given, so will fall back to their default US English strings:');
+        console.table(undefinedTranslationKeys);
+        /* eslint-enable no-console */
+      }
+    }
+    Object.assign(i18n, translations);
+  }
+};
+
+export { setConfigs as default, defaultConfig, i18n };

package/dist/directives/hover_load/hover_load.js

@@ -0,0 +1,45 @@
+import { isFunction } from 'lodash-es';
+
+const DELAY_ON_HOVER = 100;
+let mouseOverTimer;
+let mouseOverHandler;
+const bind = (el, _ref) => {
+  let {
+    value: loadHandler
+  } = _ref;
+  if (!isFunction(loadHandler)) {
+    throw TypeError('Directive value must be a function');
+  }
+  const mouseOutHandler = () => {
+    if (mouseOverTimer) {
+      clearTimeout(mouseOverTimer);
+      mouseOverTimer = undefined;
+    }
+  };
+  mouseOverHandler = () => {
+    el.addEventListener('mouseout', mouseOutHandler, {
+      passive: true
+    });
+    mouseOverTimer = setTimeout(() => {
+      loadHandler(el);
+
+      // Only execute once
+      el.removeEventListener('mouseover', mouseOverHandler, true);
+      el.removeEventListener('mouseout', mouseOutHandler);
+      mouseOverTimer = undefined;
+    }, DELAY_ON_HOVER);
+  };
+  el.addEventListener('mouseover', mouseOverHandler, {
+    capture: true,
+    passive: true
+  });
+};
+const unbind = el => {
+  el.removeEventListener('mouseover', mouseOverHandler, true);
+};
+const HoverLoadDirective = {
+  bind,
+  unbind
+};
+
+export { DELAY_ON_HOVER, HoverLoadDirective };

package/dist/directives/index.js

@@ -0,0 +1,8 @@
+export { GlModalDirective } from './modal';
+export { GlTooltipDirective } from './tooltip/tooltip';
+export { setGlTooltipDefaultContainer } from './tooltip/container';
+export { GlResizeObserverDirective } from './resize_observer/resize_observer';
+export { SafeLinkDirective as GlSafeLinkDirective } from './safe_link/safe_link';
+export { SafeHtmlDirective as GlSafeHtmlDirective } from './safe_html/safe_html';
+export { OutsideDirective as GlOutsideDirective } from './outside/outside';
+export { HoverLoadDirective as GlHoverLoadDirective } from './hover_load/hover_load';

package/dist/directives/modal.js

@@ -0,0 +1 @@
+export { VBModal as GlModalDirective } from '../vendor/bootstrap-vue/src/directives/modal/modal';

package/dist/directives/outside/outside.js

@@ -0,0 +1,149 @@
+/**
+ * Map<HTMLElement, { callback: Function, eventTypes: Array<string> }>
+ */
+const callbacks = new Map();
+const click = 'click';
+const focusin = 'focusin';
+const supportedEventTypes = [click, focusin];
+const defaultEventType = click;
+
+/**
+ * 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>}
+ */
+const activeEventTypes = new Set();
+let lastMousedown = null;
+const globalListener = 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) ||
+    // Ignore events that aren't the specified types for this element
+    !eventTypes.includes(event.type)) {
+      return;
+    }
+    try {
+      callback(event);
+    } catch (e) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error(e);
+      }
+    }
+  });
+  if (event.type === click) {
+    lastMousedown = null;
+  }
+};
+
+// We need to listen for mouse events because text selection fires click event only when selection ends.
+// This means that the click event target could differ from the element where it originally started.
+// As example: if we use mouse events we could guarantee that selecting text within a dropdown won't close it.
+const onMousedown = event => {
+  lastMousedown = event;
+};
+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);
+    }
+  });
+  lastMousedown = null;
+};
+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);
+  }
+};
+function parseBinding(_ref3) {
+  let {
+    arg,
+    value,
+    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.`);
+    }
+    const unsupportedModifiers = modifiersList.filter(modifier => !supportedEventTypes.includes(modifier));
+    if (unsupportedModifiers.length > 0) {
+      throw new Error(`[GlOutsideDirective] Cannot bind ${unsupportedModifiers.join(', ')} 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
+    // wrapping another) _both_ have this directive applied.
+    //
+    // Because Vue binds directives in the direction towards the root, only the
+    // deepest instance of this directive will be bound.
+    //
+    // A future iteration may add support for binding all instances on a given
+    // element.
+    return;
+  }
+  callbacks.set(el, {
+    callback,
+    eventTypes
+  });
+  startListening(eventTypes);
+};
+const unbind = el => {
+  const entry = callbacks.get(el);
+  if (entry) {
+    callbacks.delete(el);
+    stopListening(entry.eventTypes);
+  }
+};
+const OutsideDirective = {
+  bind,
+  unbind
+};
+
+export { OutsideDirective };

package/dist/directives/resize_observer/resize_observer.js

@@ -0,0 +1,58 @@
+import { isFunction } from 'lodash-es';
+
+let observer = null;
+
+// Exported for testing purposes only
+const resetObserver = () => {
+  var _observer;
+  (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.disconnect();
+  observer = null;
+};
+const attachObserver = (el, resizeHandler) => {
+  if (!isFunction(resizeHandler)) {
+    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 ResizeObserver(entries => {
+      entries.forEach(event => {
+        event.target.glResizeHandler(event);
+      });
+    });
+  }
+  el.glResizeHandler = resizeHandler;
+  observer.observe(el);
+};
+const detachObserver = el => {
+  if (el.glResizeHandler) {
+    var _observer2;
+    delete el.glResizeHandler;
+    (_observer2 = observer) === null || _observer2 === void 0 ? void 0 : _observer2.unobserve(el);
+  }
+};
+const GlResizeObserverDirective = {
+  bind(el, _ref) {
+    let {
+      value: resizeHandler,
+      arg: enabled = true
+    } = _ref;
+    if (enabled) {
+      attachObserver(el, resizeHandler);
+    }
+  },
+  update(el, _ref2) {
+    let {
+      value: resizeHandler,
+      arg: enabled = true
+    } = _ref2;
+    if (enabled) {
+      attachObserver(el, resizeHandler);
+    } else {
+      detachObserver(el);
+    }
+  },
+  unbind: detachObserver
+};
+
+export { GlResizeObserverDirective, resetObserver };

package/dist/directives/safe_html/constants.js

@@ -0,0 +1,6 @@
+// See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1421#note_617098438
+// for more details
+const forbiddenDataAttrs = ['data-remote', 'data-url', 'data-type', 'data-method', 'data-disable-with', 'data-disabled', 'data-disable', 'data-turbo'];
+const forbiddenTags = ['style', 'mstyle', 'form'];
+
+export { forbiddenDataAttrs, forbiddenTags };

package/dist/directives/safe_html/safe_html.js

@@ -0,0 +1,39 @@
+import DOMPurify from 'dompurify';
+import { forbiddenDataAttrs, forbiddenTags } from './constants';
+
+const {
+  sanitize
+} = DOMPurify;
+
+// Mitigate against future dompurify mXSS bypasses by
+// avoiding additional serialize/parse round trip.
+// See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1782
+// and https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2127
+// for more details.
+const DEFAULT_CONFIG = {
+  RETURN_DOM_FRAGMENT: true,
+  ALLOW_UNKNOWN_PROTOCOLS: true,
+  FORBID_ATTR: forbiddenDataAttrs,
+  FORBID_TAGS: forbiddenTags
+};
+const transform = (el, binding) => {
+  if (binding.oldValue !== binding.value) {
+    var _binding$arg;
+    const config = {
+      ...DEFAULT_CONFIG,
+      ...((_binding$arg = binding.arg) !== null && _binding$arg !== void 0 ? _binding$arg : {})
+    };
+    el.textContent = '';
+    el.appendChild(sanitize(binding.value, config));
+  }
+};
+const clear = el => {
+  el.textContent = '';
+};
+const SafeHtmlDirective = {
+  bind: transform,
+  update: transform,
+  unbind: clear
+};
+
+export { SafeHtmlDirective };

package/dist/directives/safe_link/mock_data.js

@@ -0,0 +1,10 @@
+const absoluteUrls = ['http://example.org', 'http://example.org:8080', 'https://example.org', 'https://example.org:8080', 'https://192.168.1.1', 'ftp://192.168.1.1', 'mailto:someone@example.com'];
+
+/* eslint-disable no-script-url */
+const javascriptUrls = ['javascript:', 'javascript:alert("XSS")', 'jav\tascript:alert("XSS");'];
+/* eslint-enable no-script-url */
+
+const encodedJavaScriptUrls = ['&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058&#0000097&#0000108&#0000101&#0000114&#0000116&#0000040&#0000039&#0000088&#0000083&#0000083&#0000039&#0000041', 'javascript:alert('XSS')', '&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29', '   javascript:alert("XSS");'];
+const relativeUrls = ['./relative/link', '../relative/link', '/relative/link', '/users/sign_in', '#docs/link', '#'];
+
+export { absoluteUrls, encodedJavaScriptUrls, javascriptUrls, relativeUrls };

package/dist/directives/safe_link/safe_link.js

@@ -0,0 +1,67 @@
+import Vue from 'vue';
+
+const getBaseURL = () => {
+  const {
+    protocol,
+    host
+  } = window.location;
+  return `${protocol}//${host}`;
+};
+const isTargetBlank = target => {
+  return target === '_blank';
+};
+const isExternalURL = (target, hostname) => {
+  return isTargetBlank(target) && hostname !== window.location.hostname;
+};
+const secureRel = rel => {
+  const rels = rel ? rel.trim().split(' ') : [];
+  if (!rels.includes('noopener')) {
+    rels.push('noopener');
+  }
+  if (!rels.includes('noreferrer')) {
+    rels.push('noreferrer');
+  }
+  return rels.join(' ');
+};
+const isSafeURL = url => {
+  try {
+    const parsedURL = new URL(url, getBaseURL());
+    return ['http:', 'https:', 'mailto:', 'ftp:'].includes(parsedURL.protocol);
+  } catch {
+    return false;
+  }
+};
+const transform = function (el) {
+  let {
+    arg: {
+      skipSanitization = false
+    } = {}
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (skipSanitization) {
+    return;
+  }
+  const {
+    href,
+    target,
+    rel
+  } = el;
+  if (!isSafeURL(href)) {
+    el.href = 'about:blank';
+  }
+  if (isTargetBlank(target)) {
+    el.rel = secureRel(rel);
+  }
+};
+const SafeLinkDirective = {
+  inserted: transform,
+  update: function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    Vue.nextTick(() => {
+      transform(...args);
+    });
+  }
+};
+
+export { SafeLinkDirective, isExternalURL };

package/dist/directives/tooltip/container.js

@@ -0,0 +1,7 @@
+let containerSelector;
+const setGlTooltipDefaultContainer = selector => {
+  containerSelector = selector;
+};
+const getGlTooltipDefaultContainer = () => containerSelector;
+
+export { getGlTooltipDefaultContainer, setGlTooltipDefaultContainer };

package/dist/directives/tooltip/tooltip.js

@@ -0,0 +1,18 @@
+import { VBTooltip } from '../../vendor/bootstrap-vue/src/directives/tooltip';
+import { getGlTooltipDefaultContainer } from './container';
+
+const patchHook = hook => (el, bindings, vnode) => {
+  hook(el, {
+    ...bindings,
+    arg: bindings.arg || getGlTooltipDefaultContainer()
+  }, vnode);
+};
+const bind = patchHook(VBTooltip.bind);
+const componentUpdated = patchHook(VBTooltip.componentUpdated);
+const GlTooltipDirective = {
+  ...VBTooltip,
+  bind,
+  componentUpdated
+};
+
+export { GlTooltipDirective };