@gitlab/ui 49.0.0 → 49.0.2

package/dist/utils/charts/mock_data.js

@@ -59,10 +59,10 @@ const mockDefaultChartOptions = {
     show: false
   }
 };
+
 /**
  * This is currently used in area.stories.js and line.stories.js
  */
-
 const mockAnnotationsSeries = {
   series: [{
     type: 'scatter',
@@ -112,10 +112,10 @@ const mockAnnotationsSeries = {
     }
   }]
 };
+
 /**
  * This is currently used in area.stories.js and line.stories.js
  */
-
 const mockAnnotationsConfigs = {
   annotations: [{
     min: '2018-01-25T01:00:00.000Z',

package/dist/utils/charts/story_config.js

@@ -19,6 +19,7 @@ const toolbox = {
     }
   }
 };
+
 /**
  * Generates series data for usage in chart examples
  *
@@ -26,7 +27,6 @@ const toolbox = {
  * @param {String} nameType type of names - how long they should be
  * @returns {Array} generated series data
  */
-
 const generateSeriesData = function () {
   let amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
   let nameType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SERIES_NAME_SHORT;

package/dist/utils/charts/theme.js

@@ -49,13 +49,13 @@ const heatmapHues = [gray100, dataVizBlue200, dataVizBlue400, dataVizBlue600, da
 const gaugeNeutralHues = [gray900, gray500];
 const gaugeSafeHues = [dataVizBlue500, dataVizBlue900];
 const gaugeWarningHue = dataVizOrange500;
+
 /**
  * The default palette is based on the Categorical data palette
  * Categorical data (also known as qualitative or thematic) uses hue to
  * differentiate qualitative data, and lightness to differentiate quantitive data.
  * More info: https://gitlab.com/gitlab-org/gitlab-design/-/issues/719#categorical
  */
-
 const colorPaletteDefault = [dataVizBlue500, dataVizOrange600, dataVizAqua500, dataVizGreen700, dataVizMagenta800, dataVizBlue700, dataVizOrange800, dataVizAqua700, dataVizGreen900, dataVizMagenta950, dataVizBlue900, dataVizOrange950, dataVizAqua900, dataVizGreen600, dataVizMagenta700, dataVizBlue600, dataVizOrange700, dataVizAqua600, dataVizGreen800, dataVizMagenta900, dataVizBlue800, dataVizOrange900, dataVizAqua800, dataVizGreen950, dataVizMagenta500, dataVizBlue950, dataVizOrange500, dataVizAqua950, dataVizGreen500, dataVizMagenta600];
 const colorFromDefaultPalette = index => colorPaletteDefault[index % colorPaletteDefault.length];
 const axes = {
@@ -100,9 +100,7 @@ const axes = {
     }
   }
 };
-
 const isLineChartWithoutArea = options => Array.isArray(options === null || options === void 0 ? void 0 : options.series) && options.series.some(series => series.type === 'line' && !series.areaStyle);
-
 const createTheme = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {

package/dist/utils/charts/utils.js

@@ -8,15 +8,14 @@ import { ANNOTATIONS_SERIES_NAME, ANNOTATIONS_COMPONENT_TYPE } from './constants
  * @param {Array} series Array of series
  * @returns {Boolean}
  */
-
 const seriesHasAnnotations = function () {
   let series = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return (series || []).filter(seriesData => {
     var _seriesData$ANNOTATIO, _seriesData$ANNOTATIO2;
-
     return seriesData.name === ANNOTATIONS_SERIES_NAME && ((_seriesData$ANNOTATIO = seriesData[ANNOTATIONS_COMPONENT_TYPE]) === null || _seriesData$ANNOTATIO === void 0 ? void 0 : (_seriesData$ANNOTATIO2 = _seriesData$ANNOTATIO.data) === null || _seriesData$ANNOTATIO2 === void 0 ? void 0 : _seriesData$ANNOTATIO2.length);
   }).length !== 0;
 };
+
 /**
  * Check if a data point is from an annotation series.
  *
@@ -26,11 +25,11 @@ const seriesHasAnnotations = function () {
  * @param {Object} params data point object
  * @returns {boolean}
  */
-
 const isDataPointAnnotation = function () {
   let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return params.name === ANNOTATIONS_SERIES_NAME && params.componentType === ANNOTATIONS_COMPONENT_TYPE;
 };
+
 /**
  * Date formatter to make date strings more
  * readable.
@@ -41,14 +40,11 @@ const isDataPointAnnotation = function () {
  * @param {String} d date string
  * @returns {String}
  */
-
 const timeSeriesDateFormatter = function () {
   let d = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
   if (!d) {
     return '';
   }
-
   const date = new Date(d);
   const month = (date.getMonth() + 1).toString().padStart(2, '0');
   const day = date.getDate().toString().padStart(2, '0');

package/dist/utils/constants.js

@@ -3,11 +3,11 @@ import { POSITION } from '../components/utilities/truncate/constants';
 const glIconSizes = '8 12 14 16 24 32 48 72';
 
 function appendDefaultOption(options) {
-  return { ...options,
+  return {
+    ...options,
     default: ''
   };
 }
-
 const COMMA = ',';
 const LEFT_MOUSE_BUTTON = 0;
 const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];
@@ -52,7 +52,8 @@ const viewModeOptions = {
   dark: 'dark',
   light: 'light'
 };
-const labelColorOptions = { ...viewModeOptions
+const labelColorOptions = {
+  ...viewModeOptions
 };
 const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
 const avatarsInlineSizeOptions = [32, 24];
@@ -78,7 +79,6 @@ const buttonVariantOptions = {
   danger: 'danger',
   dashed: 'dashed',
   link: 'link',
-
   /**
    * The "reset" variant can be used when customization of GlButton styles is required
    * (e.g. for the "close" button in GlLabel).
@@ -107,8 +107,9 @@ const buttonSizeOptions = {
 const buttonSizeOptionsMap = {
   small: 'sm',
   medium: 'md'
-}; // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
+};
 
+// size options all have corresponding styles (e.g. .s12 defined in icon.scss)
 const iconSizeOptions = glIconSizes.split(' ').map(Number);
 const triggerVariantOptions = {
   click: 'click',
@@ -120,8 +121,9 @@ const tooltipPlacements = {
   left: 'left',
   right: 'right',
   bottom: 'bottom'
-}; // in milliseconds
+};
 
+// in milliseconds
 const tooltipDelay = {
   show: 500,
   hide: 0
@@ -196,8 +198,9 @@ const tabsButtonDefaults = {
 };
 const tokenVariants = ['default', 'search-type', 'search-value'];
 const resizeDebounceTime = 200;
-const variantOptionsWithNoDefault = appendDefaultOption(variantOptions); // Datetime constants
+const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
 
+// Datetime constants
 const defaultDateFormat = 'YYYY-MM-DD';
 const bannerVariants = ['promotion', 'introduction'];
 const maxZIndex = 10;

package/dist/utils/data_utils.js

@@ -4,17 +4,18 @@ const getRepeatingValue = index => {
   const values = [100, 500, 400, 200, 100, 800, 400, 500, 600, 300, 800, 900, 110, 700, 400, 300, 500, 300, 400, 600, 700];
   return index < values.length ? values[index] : values[index % values.length];
 };
+const generateTimeSeries = () => new Array(100).fill(0).map((el, i) => [new Date(2018, 0, i), getRepeatingValue(i)]);
 
-const generateTimeSeries = () => new Array(100).fill(0).map((el, i) => [new Date(2018, 0, i), getRepeatingValue(i)]); // takes an element and a list and `intersperses' that element between the elements of the list.
+// takes an element and a list and `intersperses' that element between the elements of the list.
 // (',' ['a', 'b', 'c']) -> ['a', ',', 'b', ',', 'c']
-
 const intersperse = curry((separator, items) => {
   const [head, ...rest] = items;
   const separatorFactory = typeof separator === 'function' ? separator : () => separator;
   return [head, ...rest.flatMap(item => [separatorFactory(), item], rest)];
-}); // inserts a value at a given index into an array
-// (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
+});
 
+// inserts a value at a given index into an array
+// (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
 const insert = curry((index, newItem, items) => [...items.slice(0, index), newItem, ...items.slice(index)]);
 
 export { generateTimeSeries, insert, intersperse };

package/dist/utils/datetime_utility.js

@@ -7,6 +7,7 @@
  * @param {Date} date
  */
 const newDate = date => date instanceof Date ? new Date(date.getTime()) : new Date();
+
 /**
  * Computes the difference between 2 date objects.
  *
@@ -17,13 +18,13 @@ const newDate = date => date instanceof Date ? new Date(date.getTime()) : new Da
  * getDayDifference(new Date('2020-08-10'), new Date('2020-08-15'));
  * @returns {Number} Number of days between the 2 dates
  */
-
 const getDayDifference = (a, b) => {
   const millisecondsPerDay = 1000 * 60 * 60 * 24;
   const date1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
   const date2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
   return Math.floor((date2 - date1) / millisecondsPerDay);
 };
+
 /**
  * Subtracts a given number of days from a given date and returns the new date.
  *
@@ -34,8 +35,8 @@ const getDayDifference = (a, b) => {
  * getDateInPast(new Date('2020-08-15'), 5);
  * @returns {Date} Date in past as Date object
  */
-
 const getDateInPast = (date, daysInPast) => new Date(newDate(date).setDate(date.getDate() - daysInPast));
+
 /**
  * Adds a given number of days to a given date and returns the new date.
  *
@@ -46,8 +47,8 @@ const getDateInPast = (date, daysInPast) => new Date(newDate(date).setDate(date.
  * getDateInFuture(new Date('2020-08-10'), 5);
  * @returns {Date} Date in future as Date object
  */
-
 const getDateInFuture = (date, daysInFuture) => new Date(newDate(date).setDate(date.getDate() + daysInFuture));
+
 /**
  * Are the given two dates equal
  *
@@ -55,7 +56,6 @@ const getDateInFuture = (date, daysInFuture) => new Date(newDate(date).setDate(d
  * @param {Date} date2
  * @returns {Boolean}
  */
-
 const areDatesEqual = (date1, date2) => Boolean(date1 && date2 && new Date(date1).getTime() === new Date(date2).getTime());
 
 export { areDatesEqual, getDateInFuture, getDateInPast, getDayDifference, newDate };

package/dist/utils/number_utils.js

@@ -4,42 +4,39 @@
  * @param {Number} b
  */
 const addition = (a, b) => a + 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);
 };
+
 /**
  * Returns the average of all arguments
  * @param  {...Number} numbers
  */
-
 const average = function () {
   return sum(...arguments) / arguments.length;
 };
+
 /**
  * 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',
@@ -61,19 +58,18 @@ const engineeringNotation = function (value) {
   };
   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
+  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]}`;

package/dist/utils/stories_utils.js

@@ -9,10 +9,10 @@ const SERIES_NAME = {
   [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'
 };
+
 /**
  * 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, {

package/dist/utils/story_decorators/container.js

@@ -11,7 +11,6 @@ const makeContainer = style => Story => ({
       style
     }, [h(Story())]);
   }
-
 });
 
 export { makeContainer };

package/dist/utils/string_utils.js

@@ -18,28 +18,21 @@ import emojiRegexFactory from 'emoji-regex';
  * @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);
@@ -49,18 +42,14 @@ const splitAfterSymbols = (symbols, string) => {
         break;
       }
     }
-
     if (!symbolFound) {
       i += 1;
     }
   }
-
   const final = string.slice(textPartStartIndex);
-
   if (final) {
     textParts.push(final);
   }
-
   return textParts;
 };
 const startsWithEmojiRegex = `^(${emojiRegexFactory().source})`;
@@ -68,15 +57,12 @@ 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 '';
 };
 

package/dist/utils/test_utils.js

@@ -4,9 +4,10 @@
  */
 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
+}
 
+// 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);
 });

package/dist/utils/use_fake_date.js

@@ -12,21 +12,17 @@ import MockDate from 'mockdate';
  *   mixins: [useFakeDate()],
  * })
  */
-
 const useFakeDate = () => {
   if (process.env.IS_VISUAL_TEST) {
     return {
       created() {
         MockDate.set('2020-01-10', 0);
       },
-
       destroyed() {
         MockDate.reset();
       }
-
     };
   }
-
   return {};
 };
 

package/dist/utils/use_mock_intersection_observer.js

@@ -15,19 +15,16 @@ class MockObserver {
     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() {}
 
-  takeRecords() {} // eslint-disable-next-line camelcase
-
-
+  // eslint-disable-next-line camelcase
   $_triggerObserve(nodeParam) {
     let {
       entry = {},
@@ -42,9 +39,9 @@ class MockObserver {
         }]);
       }
     });
-  } // eslint-disable-next-line camelcase
-
+  }
 
+  // eslint-disable-next-line camelcase
   $_hasObserver(node) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return this.$_observers.some(_ref => {
@@ -52,7 +49,6 @@ class MockObserver {
       return node === obvNode && _isMatch(options, obvOptions);
     });
   }
-
   $_getNodesFromParam(nodeParam) {
     if (!nodeParam) {
       return this.$_observers.map(_ref2 => {
@@ -60,16 +56,12 @@ class MockObserver {
         return node;
       });
     }
-
     if (!_isArray(nodeParam)) {
       return [nodeParam];
     }
-
     return nodeParam;
   }
-
 }
-
 class MockIntersectionObserver extends MockObserver {
   unobserve(node) {
     this.$_observers = this.$_observers.filter(_ref3 => {
@@ -77,9 +69,7 @@ class MockIntersectionObserver extends MockObserver {
       return node !== obvNode;
     });
   }
-
 }
-
 const useMockIntersectionObserver = () => {
   let instances;
   let origObserver;
@@ -90,7 +80,6 @@ const useMockIntersectionObserver = () => {
       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;
@@ -100,19 +89,15 @@ const useMockIntersectionObserver = () => {
     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

package/dist/utils/utils.js

@@ -6,11 +6,9 @@ function debounceByAnimationFrame(fn) {
     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));
   };
 }
@@ -20,11 +18,9 @@ function throttle(fn) {
     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;
@@ -51,7 +47,6 @@ function colorFromBackground(backgroundColor) {
   let r;
   let g;
   let b;
-
   if (backgroundColor.startsWith('#')) {
     [r, g, b] = rgbFromHex(backgroundColor);
   } else if (backgroundColor.startsWith('rgba(')) {
@@ -59,16 +54,15 @@ function colorFromBackground(backgroundColor) {
   } else if (backgroundColor.startsWith('rgb(')) {
     [r, g, b] = rgbFromString(backgroundColor, 4);
   }
-
   if (r + g + b <= 500) {
     return labelColorOptions.light;
   }
-
   return 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
@@ -87,6 +81,7 @@ function isElementFocusable(elt) {
   const isInvalidAnchorTag = tagName === 'A' && !elt.getAttribute('href');
   return isValidTag && hasValidType && !isDisabled && hasValidZIndex && !isInvalidAnchorTag;
 }
+
 /**
  * Receives an array of HTML elements and focus the first one possible
  * @param { Array.<HTMLElement> } An array of element to potentially focus
@@ -97,47 +92,43 @@ 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
  */
-
 function logWarning() {
   let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
   if (message.length && isDev()) {
     console.warn(message); // 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();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.0.0",
+  "version": "49.0.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -77,7 +77,7 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.19.3",
+    "@babel/core": "^7.19.6",
     "@babel/preset-env": "^7.19.4",
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/stylelint-config": "4.1.0",
@@ -104,7 +104,7 @@
     "bootstrap": "4.5.3",
     "cypress": "^10.10.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.25.0",
+    "eslint": "8.26.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.6",

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -144,6 +144,7 @@ describe('base dropdown', () => {
       await toggle.trigger('click');
       expect(menu.classes('show')).toBe(true);
       expect(toggle.attributes('aria-expanded')).toBe('true');
+      await nextTick();
       expect(wrapper.emitted(GL_DROPDOWN_SHOWN).length).toBe(1);
 
       // close menu clicking toggle btn again