@gitlab/ui 131.3.0 → 131.3.1

package/dist/utils/number_utils.js

@@ -1,132 +0,0 @@
-/**
- * Adds two numbers together
- * @param {Number|String} a
- * @param {Number|String} b
- */
-const addition = (a, b) => Number(a) + Number(b);
-
-/**
- * Returns the sum of all arguments
- * @param  {...Number} numbers
- */
-const sum = function () {
-  for (var _len = arguments.length, numbers = new Array(_len), _key = 0; _key < _len; _key++) {
-    numbers[_key] = arguments[_key];
-  }
-  return numbers.reduce(addition);
-}; // eslint-disable-line unicorn/no-array-callback-reference
-
-/**
- * Returns the average of all arguments
- * @param  {...Number} numbers
- */
-const average = function () {
-  return sum(...arguments) / arguments.length;
-};
-
-/**
- * Returns the modulo of n for a divisor.
- *
- * Maps the integer n into the range [0, divisor) when the divisor is positive,
- * and (divisor, 0] when the divisor is negative.
- *
- * This is useful when indexing into an array, to ensure you always stay within
- * the array bounds.
- *
- * See https://2ality.com/2019/08/remainder-vs-modulo.html.
- *
- * @param {number} n The number to mod.
- * @param {number} divisor The divisor (e.g., the length of an array).
- * @returns {number}
- */
-function modulo(n, divisor) {
-  const result = (n % divisor + divisor) % divisor;
-  // Never return -0.
-  return result === 0 ? 0 : result;
-}
-
-/**
- * Convert number to engineering format, using SI suffix
- * @param {Number|String} value - Number or Number-convertible String
- * @param {Number} precision
- * @return {String} number, possibly with a suffix
- */
-const engineeringNotation = function (value) {
-  let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-  const invalidValues = [NaN, Infinity, -Infinity];
-  const num = Number(value);
-  if (invalidValues.includes(num) || invalidValues.includes(Number(precision))) {
-    return num.toString();
-  }
-  const allYourBase = {
-    '-24': 'y',
-    '-21': 'z',
-    '-18': 'a',
-    '-15': 'f',
-    '-12': 'p',
-    '-9': 'n',
-    '-6': 'μ',
-    '-3': 'm',
-    0: '',
-    3: 'k',
-    6: 'M',
-    9: 'G',
-    12: 'T',
-    15: 'P',
-    18: 'E',
-    21: 'Z',
-    24: 'Y'
-  };
-  const exponentialNotation = num.toExponential(precision);
-  const power = exponentialNotation.split('e').map(Number)[1] || 0;
-  if (power < -24 || power > 24) {
-    return exponentialNotation;
-  }
-  const scaledPower = 3 * Math.floor(power / 3);
-  const scaledMantissa = (exponentialNotation / 10 ** scaledPower
-  // strip trailing decimals from floating point rounding errors
-  ).toFixed(precision)
-  // strip trailing 0s after a decimal point
-  .replace(/\.([1-9]*)0+$/, (_, fractionalDigits) => {
-    if (fractionalDigits) {
-      return `.${fractionalDigits}`;
-    }
-    return '';
-  });
-  return `${scaledMantissa}${allYourBase[scaledPower]}`;
-};
-
-/**
- * Formats a number as a locale-based string using `Intl.NumberFormat`.
- *
- * 2333 -> 2,333
- * 232324 -> 232,324
- *
- * @param {Number|string} value - number to be converted
- * @param {{}?} options - options to be passed to
- * `Intl.NumberFormat` such as `unit` and `style`.
- * @param {String|String[]} locales - If set, forces a different
- * language code from the one currently in the document.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
- *
- * @returns {String}
- */
-const formatNumberToLocale = function (value) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  let locales = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
-  if (Number.isNaN(Number(value))) {
-    return value;
-  }
-  return new Intl.NumberFormat(locales, options).format(value);
-};
-
-// Converts a value (string, number, etc.) to a number
-// Taken from bootstrap-vue
-const toFloat = function (value) {
-  let defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : NaN;
-  const float = parseFloat(value);
-  return Number.isNaN(float) ? defaultValue : float;
-};
-
-export { addition, average, engineeringNotation, formatNumberToLocale, modulo, sum, toFloat };

package/dist/utils/play_utils.js

@@ -1,11 +0,0 @@
-import { userEvent } from '@storybook/test';
-
-const triggerBlurEvent = async () => userEvent.pointer([{
-  keys: '[MouseLeft]',
-  coords: {
-    x: 0,
-    y: 0
-  }
-}]);
-
-export { triggerBlurEvent };

package/dist/utils/set_utils.js

@@ -1,25 +0,0 @@
-import { isObject } from 'lodash-es';
-
-/**
- * Purpose is a substitute of Vue.set but with preserving reactivity
- * New object can be assigned to data property of aa component
- * @param source
- * @param key
- * @param value
- * @returns {*}
- */
-const setObjectProperty = function (source, key) {
-  let value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  if (!source || !key || !isObject(source)) {
-    return {};
-  }
-  if (typeof key !== 'string') {
-    return source;
-  }
-  return {
-    ...source,
-    [key]: value
-  };
-};
-
-export { setObjectProperty };

package/dist/utils/stories_constants.js

@@ -1,29 +0,0 @@
-/**
- * Arg types subcategories to be used to organize props within arg tables
- */
-
-const ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL = 'Look & feel';
-const ARG_TYPE_SUBCATEGORY_STATE = 'State';
-const ARG_TYPE_SUBCATEGORY_SEARCH = 'Search';
-const ARG_TYPE_SUBCATEGORY_ACCESSIBILITY = 'Accessibility';
-const ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL = 'Infinite scroll';
-
-/**
- * These are used to test varying lengths of series names
- */
-const SERIES_NAME_SHORT = 'SERIES_NAME_SHORT';
-const SERIES_NAME_LONG = 'SERIES_NAME_LONG';
-const SERIES_NAME_LONG_WITHOUT_SPACES = 'SERIES_NAME_LONG_WITHOUT_SPACES';
-const SERIES_NAME = {
-  [SERIES_NAME_SHORT]: 'Series ',
-  [SERIES_NAME_LONG]: 'Series name long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt interdum sapien ut blandit. Nulla fermentum nisi id euismod vulputate. END',
-  [SERIES_NAME_LONG_WITHOUT_SPACES]: 'Series_name_long._Lorem_ipsum_dolor_sit_amet,_consectetur_adipiscing_elit._Sed_tincidunt_interdum_sapien_ut_blandit._Nulla_fermentum_nisi_id_euismod_vulputate._END'
-};
-
-/**
- * Reused constants for ListBox
- */
-
-const LISTBOX_CONTAINER_HEIGHT = '370px';
-
-export { ARG_TYPE_SUBCATEGORY_ACCESSIBILITY, ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL, ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL, ARG_TYPE_SUBCATEGORY_SEARCH, ARG_TYPE_SUBCATEGORY_STATE, LISTBOX_CONTAINER_HEIGHT, SERIES_NAME, SERIES_NAME_LONG, SERIES_NAME_LONG_WITHOUT_SPACES, SERIES_NAME_SHORT };

package/dist/utils/stories_utils.js

@@ -1,62 +0,0 @@
-/**
- * Builds the parameters object disable one or multiple controls.
- */
-const disableControls = function () {
-  let controls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return Object.fromEntries(controls.map(control => [control, {
-    control: {
-      disable: true
-    }
-  }]));
-};
-const getA11yParameters = function () {
-  let {
-    skipRules = [],
-    temporarySkipRules = []
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const skippedRules = skipRules.concat(temporarySkipRules).map(id => ({
-    id,
-    enabled: false
-  }));
-  return {
-    config: {
-      rules: skippedRules
-    }
-  };
-};
-
-/**
- * Returns a boolean indicating whether the given prop type includes the given type.
- *
- * Vue itself checks the string tag to avoid cross-realm false negatives, but
- * that isn't necessary under Storybook.
- *
- * @param {(Array|Function)} propType The prop's defined type from a ComponentOptions.props[prop] object.
- * @returns {boolean}
- */
-const isPropType = (propType, Type) => Array.isArray(propType) ? propType.includes(Type) : propType === Type;
-
-/**
- * Returns a function which returns the given prop's default value for the given component.
- *
- * If the default value is a function, it executes that function to return the
- * true default value.
- *
- * @param {object} ComponentOptions A Vue ComponentOptions object.
- */
-const propDefaultFactory = ComponentOptions => prop => {
-  const {
-    type,
-    default: defaultValue
-  } = ComponentOptions.props[prop];
-  if (typeof defaultValue === 'function' && !isPropType(type, Function)) {
-    // Note: Vue 2 passes the instance to the `default` function via `this`,
-    // whereas Vue 3 passes the raw props to it as an argument. Here, we do
-    // neither, since we have access to neither. See
-    // https://v3-migration.vuejs.org/breaking-changes/props-default-this.html.
-    return defaultValue.call(undefined);
-  }
-  return defaultValue;
-};
-
-export { disableControls, getA11yParameters, propDefaultFactory };

package/dist/utils/story_decorators/container.js

@@ -1,19 +0,0 @@
-/**
- * Return a story decorator function, which wraps the given story in a `div`
- * element with the given `style` attributes.
- *
- * @param {object} style The style attribute to apply to the container.
- * @return {function} The story decorator.
- */
-const makeContainer = function (style) {
-  let tag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
-  return Story => ({
-    render(h) {
-      return h(tag, {
-        style
-      }, [h(Story())]);
-    }
-  });
-};
-
-export { makeContainer };

package/dist/utils/string_utils.js

@@ -1,69 +0,0 @@
-import emojiRegexFactory from 'emoji-regex';
-
-/**
- * Split the given string after each occurrence of each of the given symbols.
- *
- * Symbols are strings, and can be of length one or more. Zero-length symbols
- * are ignored.
- *
- * Unlike with `String::split`, the symbol is left in results, with
- * the split occurring _after_ the symbol.
- *
- * For example:
- *
- *     splitAfterSymbols(['/'], 'a/b/c')    // ['a/', 'b/', 'c']
- *     splitAfterSymbols(['foo'], 'foobar') // ['foo', 'bar']
- *
- * @param {string[]} symbols The symbols to split the string by.
- * @param {string} string The string to split.
- * @returns {string[]} The resulting strings.
- */
-const splitAfterSymbols = (symbols, string) => {
-  const textParts = [];
-  let textPartStartIndex = 0;
-  if (string.length === 0) {
-    return [string];
-  }
-  for (let i = 0; i < string.length;) {
-    let symbolFound = false;
-    for (let j = 0; j < symbols.length; j += 1) {
-      const symbol = symbols[j];
-      if (!symbol) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-      symbolFound = string.slice(i, i + symbol.length) === symbol;
-      if (symbolFound) {
-        const textPartEndIndex = i + symbol.length;
-        const textPart = string.slice(textPartStartIndex, textPartEndIndex);
-        textParts.push(textPart);
-        textPartStartIndex = textPartEndIndex;
-        i = textPartStartIndex;
-        break;
-      }
-    }
-    if (!symbolFound) {
-      i += 1;
-    }
-  }
-  const final = string.slice(textPartStartIndex);
-  if (final) {
-    textParts.push(final);
-  }
-  return textParts;
-};
-const startsWithEmojiRegex = `^(${emojiRegexFactory().source})`;
-const getAvatarChar = name => {
-  if (name) {
-    // Check if string starts with an emoji (which could be multiple characters and zero-width joined)
-    const match = name.match(startsWithEmojiRegex);
-    if (match) {
-      // Return the first match
-      return match[0];
-    }
-    return name.charAt(0).toUpperCase();
-  }
-  return '';
-};
-
-export { getAvatarChar, splitAfterSymbols };

package/dist/utils/svgs/svg_paths.js

@@ -1,7 +0,0 @@
-const scrollHandleSvgPath = 'path://M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zM6 4a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1zm4 0a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1z';
-const marqueeSelectionSvgPath = 'path://M-6.251 -7L-7 -7L-7 -4.753A0.749 0.749 0 0 0 -5.502 -4.753L-5.502 -5.502L-4.753 -5.502A0.749 0.749 0 0 0 -4.753 -7L-6.251 -7ZM-6.251 -2.0067A0.749 0.749 0 0 1 -5.502 -1.2577L-5.502 1.239A0.749 0.749 0 1 1 -7 1.239L-7 -1.2577A0.749 0.749 0 0 1 -6.251 -2.0067ZM0.8455 0.8455L2.3505 4.3578L4.3578 2.3505L0.8455 0.8455ZM0.2883 -1.023L5.6251 1.264A0.9987 0.9987 0 0 1 5.9387 2.8888L4.943 3.8835L6.7616 5.703A0.749 0.749 0 1 1 5.703 6.7616L3.8835 4.943L2.8888 5.9387A0.9987 0.9987 0 0 1 1.264 5.6251L-1.023 0.2883C-1.3785 -0.5406 -0.5406 -1.3785 0.2883 -1.023ZM-6.251 6.9813L-7 6.9813L-7 4.7343A0.749 0.749 0 1 1 -5.502 4.7343L-5.502 5.4833L-4.753 5.4833A0.749 0.749 0 1 1 -4.753 6.9813L-6.251 6.9813ZM-2.0067 -6.251A0.749 0.749 0 0 1 -1.2577 -7L1.239 -7A0.749 0.749 0 1 1 1.239 -5.502L-1.2577 -5.502A0.749 0.749 0 0 1 -2.0067 -6.251ZM6.2323 -7L6.9813 -7L6.9813 -4.753A0.749 0.749 0 1 1 5.4833 -4.753L5.4833 -5.502L4.7343 -5.502A0.749 0.749 0 1 1 4.7343 -7L6.2323 -7Z';
-const redoSvgPath = 'path://M1.8332 -6.7552A7.0001 7.0001 0 0 0 -5.6875 -4.082L-5.6875 -5.4689A0.6563 0.6563 0 0 0 -7 -5.4689L-7 -1.7501L-3.2812 -1.7501A0.6563 0.6563 0 0 0 -3.2812 -3.0626L-4.7923 -3.0626A5.6876 5.6876 0 1 1 -5.2526 2.1822A0.6563 0.6563 0 0 0 -6.4645 2.6853A7.0001 7.0001 0 1 0 1.8332 -6.7561Z';
-const clearAllSvgPath = 'path://M-1.8332 -6.7552A7.0001 7.0001 0 0 1 5.6875 -4.082L5.6875 -5.4689A0.6563 0.6563 0 1 1 7 -5.4689L7 -1.7501L3.2812 -1.7501A0.6563 0.6563 0 1 1 3.2812 -3.0626L4.7923 -3.0626A5.6876 5.6876 0 1 0 5.2526 2.1822A0.6563 0.6563 0 1 1 6.4645 2.6853A7.0001 7.0001 0 1 1 -1.8332 -6.7561Z';
-const downloadSvgPath = 'path://M3.78 -0.841A0.75 0.75 0 0 0 2.72 -0.841L0.75 1.129L0.75 -6.25A0.75 0.75 0 0 0 -0.75 -6.25L-0.75 1.129L-2.72 -0.841A0.75 0.75 0 0 0 -3.78 0.219L-0.53 3.469L0 4L0.53 3.47L3.78 0.22A0.75 0.75 0 0 0 3.78 -0.841ZM-5.5 1.75A0.75 0.75 0 0 0 -7 1.75L-7 5A2 2 0 0 0 -5 7L5 7A2 2 0 0 0 7 5L7 1.75A0.75 0.75 0 0 0 5.5 1.75L5.5 5A0.5 0.5 0 0 1 5 5.5L-5 5.5A0.5 0.5 0 0 1 -5.5 5L-5.5 1.75Z';
-
-export { clearAllSvgPath, downloadSvgPath, marqueeSelectionSvgPath, redoSvgPath, scrollHandleSvgPath };

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('2026-01-10', 0);
-      },
-      destroyed() {
-        MockDate.reset();
-      }
-    };
-  }
-  return {};
-};
-
-export { useFakeDate };

package/dist/utils/use_mock_intersection_observer.js

@@ -1,105 +0,0 @@
-import { isMatch } from 'lodash-es';
-
-/* global jest, beforeEach, afterEach */
-/* eslint-disable class-methods-use-this, max-classes-per-file */
-
-/**
- * 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() {}
-  $_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
-        }]);
-      }
-    });
-  }
-  $_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 };