@gitlab/ui 72.11.1 → 72.12.0

package/dist/utils/test_utils.js

@@ -1,33 +0,0 @@
-/**
- * Wrapper around setTimeout which executes immediately in visual tests
- * in order to avoid flaky tests
- */
-function setStoryTimeout(fn, timeout) {
-  return setTimeout(fn, process.env.IS_VISUAL_TEST ? 0 : timeout);
-}
-
-// adopted this method from Bootstraps utils
-// https://github.com/bootstrap-vue/bootstrap-vue/blob/2fd03f0b1d0cc41f9930078ba8b1c16b10e4ac2f/tests/utils.js#L6
-const waitForAnimationFrame = () => new Promise(resolve => {
-  requestAnimationFrame(resolve);
-});
-const getResetAnimationsCSS = () => `
-  *, *::after, *::before {
-    -webkit-transition: none !important;
-    -moz-transition: none !important;
-    -ms-transition: none !important;
-    -o-transition: none !important;
-    transition: none !important;
-
-    -webkit-animation: none !important;
-    -moz-animation: none !important;
-    -ms-animation: none !important;
-    -o-animation: none !important;
-    animation: none !important;
-  }
-
-  input, textarea {
-    caret-color: transparent !important;
-  }`;
-
-export { getResetAnimationsCSS, setStoryTimeout, waitForAnimationFrame };

package/dist/utils/use_fake_date.js

@@ -1,29 +0,0 @@
-import MockDate from 'mockdate';
-
-/**
- * When applied to a story, this mixin mocks the current date to make
- * visual tests that rely on the date deterministic
- *
- * Usage:
- *
- * import { useFakeDate } from '../../../../tests/utils/use_fake_date';
- * documentedStoriesOf('some|story')
- * .add('default', () => ({
- *   mixins: [useFakeDate()],
- * })
- */
-const useFakeDate = () => {
-  if (process.env.IS_VISUAL_TEST) {
-    return {
-      created() {
-        MockDate.set('2020-01-10', 0);
-      },
-      destroyed() {
-        MockDate.reset();
-      }
-    };
-  }
-  return {};
-};
-
-export { useFakeDate };

package/dist/utils/use_mock_intersection_observer.js

@@ -1,108 +0,0 @@
-import isMatch from 'lodash/isMatch';
-
-/* global jest, beforeEach, afterEach */
-
-/**
- * This class gives us a JSDom friendly DOM observer which we can manually trigger in tests
- *
- * Use this in place of MutationObserver or IntersectionObserver
- *
- * This class is largely influenced from [a test helper][1] in the main GitLab project
- *
- * [1]: https://gitlab.com/gitlab-org/gitlab/blob/a123813c63147392b95cd03c4744ae9db0575b0f/spec/frontend/helpers/mock_dom_observer.js#L95
- */
-class MockObserver {
-  constructor(cb) {
-    this.$_cb = cb;
-    this.$_observers = [];
-  }
-  observe(node) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    this.$_observers.push([node, options]);
-  }
-  disconnect() {
-    this.$_observers = [];
-  }
-  takeRecords() {}
-
-  // eslint-disable-next-line camelcase
-  $_triggerObserve(nodeParam) {
-    let {
-      entry = {},
-      options = {}
-    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    const nodes = this.$_getNodesFromParam(nodeParam);
-    nodes.forEach(node => {
-      if (this.$_hasObserver(node, options)) {
-        this.$_cb([{
-          target: node,
-          ...entry
-        }]);
-      }
-    });
-  }
-
-  // eslint-disable-next-line camelcase
-  $_hasObserver(node) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    return this.$_observers.some(_ref => {
-      let [obvNode, obvOptions] = _ref;
-      return node === obvNode && isMatch(options, obvOptions);
-    });
-  }
-  $_getNodesFromParam(nodeParam) {
-    if (!nodeParam) {
-      return this.$_observers.map(_ref2 => {
-        let [node] = _ref2;
-        return node;
-      });
-    }
-    if (!Array.isArray(nodeParam)) {
-      return [nodeParam];
-    }
-    return nodeParam;
-  }
-}
-class MockIntersectionObserver extends MockObserver {
-  unobserve(node) {
-    this.$_observers = this.$_observers.filter(_ref3 => {
-      let [obvNode] = _ref3;
-      return node !== obvNode;
-    });
-  }
-}
-const useMockIntersectionObserver = () => {
-  let instances;
-  let origObserver;
-  beforeEach(() => {
-    instances = [];
-    origObserver = global.IntersectionObserver;
-    global.IntersectionObserver = jest.fn().mockImplementation(function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      const mockObserver = new MockIntersectionObserver(...args);
-      instances.push(mockObserver);
-      return mockObserver;
-    });
-  });
-  afterEach(() => {
-    instances = [];
-    global.IntersectionObserver = origObserver;
-  });
-  const trigger = function (observer) {
-    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      args[_key2 - 1] = arguments[_key2];
-    }
-    observer.$_triggerObserve(...args);
-  };
-  const getInstances = () => {
-    return instances;
-  };
-  return {
-    getInstances,
-    trigger
-  };
-};
-
-export { useMockIntersectionObserver };

package/dist/utils/utils.js

@@ -1,177 +0,0 @@
-import { isVisible } from 'bootstrap-vue/esm/utils/dom';
-import { COMMA, labelColorOptions, focusableTags } from './constants';
-
-function debounceByAnimationFrame(fn) {
-  let requestId;
-  return function debounced() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    if (requestId) {
-      window.cancelAnimationFrame(requestId);
-    }
-    requestId = window.requestAnimationFrame(() => fn.apply(this, args));
-  };
-}
-function throttle(fn) {
-  let frameId = null;
-  return function () {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    if (frameId) {
-      return;
-    }
-    frameId = window.requestAnimationFrame(() => {
-      fn(...args);
-      frameId = null;
-    });
-  };
-}
-function rgbFromHex(hex) {
-  const cleanHex = hex.replace('#', '');
-  const rgb = cleanHex.length === 3 ? cleanHex.split('').map(val => val + val) : cleanHex.match(/[\da-f]{2}/gi);
-  const [r, g, b] = rgb.map(val => parseInt(val, 16));
-  return [r, g, b];
-}
-function rgbFromString(color, sub) {
-  const rgb = color.substring(sub, color.length - 1).split(COMMA);
-  const [r, g, b] = rgb.map(i => parseInt(i, 10));
-  return [r, g, b];
-}
-function hexToRgba(hex) {
-  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  const [r, g, b] = rgbFromHex(hex);
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-}
-function toSrgb(value) {
-  const normalized = value / 255;
-  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
-}
-function relativeLuminance(rgb) {
-  // WCAG 2.1 formula: https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
-  // -
-  // WCAG 3.0 will use APAC
-  // Using APAC would be the ultimate goal, but was dismissed by engineering as of now
-  // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3418#note_1370107090
-  return 0.2126 * toSrgb(rgb[0]) + 0.7152 * toSrgb(rgb[1]) + 0.0722 * toSrgb(rgb[2]);
-}
-function colorFromBackground(backgroundColor) {
-  let contrastRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2.4;
-  let color;
-  const lightColor = rgbFromHex('#FFFFFF');
-  const darkColor = rgbFromHex('#1f1e24');
-  if (backgroundColor.startsWith('#')) {
-    color = rgbFromHex(backgroundColor);
-  } else if (backgroundColor.startsWith('rgba(')) {
-    color = rgbFromString(backgroundColor, 5);
-  } else if (backgroundColor.startsWith('rgb(')) {
-    color = rgbFromString(backgroundColor, 4);
-  }
-  const luminance = relativeLuminance(color);
-  const lightLuminance = relativeLuminance(lightColor);
-  const darkLuminance = relativeLuminance(darkColor);
-  const contrastLight = (lightLuminance + 0.05) / (luminance + 0.05);
-  const contrastDark = (luminance + 0.05) / (darkLuminance + 0.05);
-
-  // Using a default threshold contrast of 2.4 instead of 3
-  // as this will solve weird color combinations in the mid tones
-  return contrastLight >= contrastRatio || contrastLight > contrastDark ? labelColorOptions.light : labelColorOptions.dark;
-}
-function uid() {
-  return Math.random().toString(36).substring(2);
-}
-
-/**
- * Receives an element and validates that it can be focused
- * @param { HTMLElement } The element we want to validate
- * @return { boolean } Is the element focusable
- */
-
-function isElementFocusable(elt) {
-  if (!elt) return false;
-  const {
-    tagName
-  } = elt;
-  const isValidTag = focusableTags.includes(tagName);
-  const hasValidType = elt.getAttribute('type') !== 'hidden';
-  const isDisabled = elt.getAttribute('disabled') === '' || elt.getAttribute('disabled');
-  const hasValidZIndex = elt.getAttribute('z-index') !== '-1';
-  const isInvalidAnchorTag = tagName === 'A' && !elt.getAttribute('href');
-  return isValidTag && hasValidType && !isDisabled && hasValidZIndex && !isInvalidAnchorTag;
-}
-
-/**
- * Receives an element and validates that it is reachable via sequential keyboard navigation
- * @param { HTMLElement } The element to validate
- * @return { boolean } Is the element focusable in a sequential tab order
- */
-
-function isElementTabbable(el) {
-  if (!el) return false;
-  const tabindex = parseInt(el.getAttribute('tabindex'), 10);
-  return tabindex > -1;
-}
-
-/**
- * Receives an array of HTML elements and focus the first one possible
- * @param { Array.<HTMLElement> } An array of element to potentially focus
- * @return { undefined }
- */
-
-function focusFirstFocusableElement(elts) {
-  const focusableElt = elts.find(el => isElementFocusable(el));
-  if (focusableElt) focusableElt.focus();
-}
-
-/**
- * Returns true if the current environment is considered a development environment (it's not
- * production or test).
- *
- * @returns {boolean}
- */
-function isDev() {
-  return !['test', 'production'].includes(process.env.NODE_ENV);
-}
-
-/**
- * Prints a warning message to the console in non-test and non-production environments.
- * @param {string} message message to print to the console
- * @param {HTMLElement} element component that triggered the warning
- */
-function logWarning() {
-  let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  if (message.length && isDev()) {
-    console.warn(message, element); // eslint-disable-line no-console
-  }
-}
-
-/**
- * Stop default event handling and propagation
- */
-function stopEvent(event) {
-  let {
-    preventDefault = true,
-    stopPropagation = true,
-    stopImmediatePropagation = false
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  if (preventDefault) {
-    event.preventDefault();
-  }
-  if (stopPropagation) {
-    event.stopPropagation();
-  }
-  if (stopImmediatePropagation) {
-    event.stopImmediatePropagation();
-  }
-}
-
-/**
- * Return an Array of visible items
- */
-function filterVisible(els) {
-  return (els || []).filter(el => isVisible(el));
-}
-
-export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };

package/dist/utils.js

@@ -1,5 +0,0 @@
-export { GlBreakpointInstance, breakpoints } from './utils/breakpoints';
-import * as validators from './components/base/form/form_fields/validators';
-export { validators as formValidators };
-import * as mappers from './components/base/form/form_fields/mappers';
-export { mappers as formMappers };