@gitlab/ui 49.0.0 → 49.0.2

package/dist/directives/outside/outside.js

@@ -3,27 +3,25 @@ import { getEventLikeTimeStamp } from './get_event_like_time_stamp';
 /**
  * Map<HTMLElement, { bindTimeStamp: number, callback: Function }>
  */
-
 const callbacks = new Map();
+
 /**
  * Is a global listener already set up?
  */
-
 let listening = false;
-
 const globalListener = event => {
   callbacks.forEach((_ref, element) => {
     let {
       bindTimeStamp,
       callback
     } = _ref;
-
-    if ( // Ignore events that aren't targeted outside the element
-    element.contains(event.target) || // Only consider events triggered after the directive was bound
+    if (
+    // Ignore events that aren't targeted outside the element
+    element.contains(event.target) ||
+    // Only consider events triggered after the directive was bound
     event.timeStamp <= bindTimeStamp) {
       return;
     }
-
     try {
       callback(event);
     } catch (e) {
@@ -34,41 +32,33 @@ const globalListener = event => {
     }
   });
 };
-
 const startListening = () => {
   if (listening) {
     return;
   }
-
   document.addEventListener('click', globalListener, {
     capture: true
   });
   listening = true;
 };
-
 const stopListening = () => {
   if (!listening) {
     return;
   }
-
   document.removeEventListener('click', globalListener);
   listening = false;
 };
-
 const bind = (el, _ref2) => {
   let {
     value,
     arg = 'click'
   } = _ref2;
-
   if (typeof value !== 'function') {
     throw new Error(`[GlOutsideDirective] Value must be a function; got ${typeof value}!`);
   }
-
   if (arg !== 'click') {
     throw new Error(`[GlOutsideDirective] Cannot bind ${arg} events; only click events are currently supported!`);
   }
-
   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
@@ -81,25 +71,20 @@ const bind = (el, _ref2) => {
     // element.
     return;
   }
-
   if (!listening) {
     startListening();
   }
-
   callbacks.set(el, {
     bindTimeStamp: getEventLikeTimeStamp(),
     callback: value
   });
 };
-
 const unbind = el => {
   callbacks.delete(el);
-
   if (callbacks.size === 0) {
     stopListening();
   }
 };
-
 const OutsideDirective = {
   bind,
   unbind

package/dist/directives/resize_observer/resize_observer.js

@@ -1,12 +1,10 @@
 import isFunction from 'lodash/isFunction';
 
 let 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
@@ -16,45 +14,37 @@ const attachObserver = (el, resizeHandler) => {
       });
     });
   }
-
   el.glResizeHandler = resizeHandler;
   observer.observe(el);
 };
-
 const detachObserver = el => {
   if (el.glResizeHandler) {
     var _observer;
-
     delete el.glResizeHandler;
     (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.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
 };
 

package/dist/directives/safe_html/safe_html.js

@@ -3,30 +3,29 @@ import { forbiddenDataAttrs } from './constants';
 
 const {
   sanitize
-} = DOMPurify; // Mitigate against future dompurify mXSS bypasses by
+} = 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]
 };
-
 const transform = (el, binding) => {
   if (binding.oldValue !== binding.value) {
     var _binding$arg;
-
-    const config = { ...DEFAULT_CONFIG,
+    const config = {
+      ...DEFAULT_CONFIG,
       ...((_binding$arg = binding.arg) !== null && _binding$arg !== void 0 ? _binding$arg : {})
     };
     el.textContent = '';
     el.appendChild(sanitize(binding.value, config));
   }
 };
-
 const SafeHtmlDirective = {
   bind: transform,
   update: transform

package/dist/directives/safe_link/mock_data.js

@@ -1,6 +1,6 @@
 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 */
 
+/* eslint-disable no-script-url */
 const javascriptUrls = ['javascript:', 'javascript:alert("XSS")', 'jav\tascript:alert("XSS");'];
 /* eslint-disable no-script-url */
 

package/dist/directives/safe_link/safe_link.js

@@ -7,25 +7,19 @@ const getBaseURL = () => {
   } = window.location;
   return `${protocol}//${host}`;
 };
-
 const isExternalURL = (target, hostname) => {
   return target === '_blank' && 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());
@@ -34,41 +28,34 @@ const isSafeURL = url => {
     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,
     hostname
   } = el;
-
   if (!isSafeURL(href)) {
     el.href = 'about:blank';
   }
-
   if (isExternalURL(target, hostname)) {
     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);
     });

package/dist/utils/breakpoints.js

@@ -7,17 +7,14 @@ const breakpoints = {
 };
 const BreakpointInstance = {
   windowWidth: () => window.innerWidth,
-
   getBreakpointSize() {
     const windowWidth = this.windowWidth();
     const breakpoint = Object.keys(breakpoints).find(key => windowWidth > breakpoints[key]);
     return breakpoint;
   },
-
   isDesktop() {
     return ['xl', 'lg'].includes(this.getBreakpointSize());
   }
-
 };
 
 export default BreakpointInstance;

package/dist/utils/charts/config.js

@@ -38,7 +38,8 @@ const grid = {
   left: 64,
   right: 32
 };
-const gridWithSecondaryYAxis = { ...grid,
+const gridWithSecondaryYAxis = {
+  ...grid,
   right: 64
 };
 const lineStyle = {
@@ -46,13 +47,13 @@ const lineStyle = {
   type: 'line',
   width: 2
 };
+
 /**
  * Annotations series consists of annotations lines
  * along with markers. Annotations co-exist with data
  * series but have their own virtual coords so that they stay put
  * irrespective of data series extents.
  */
-
 const annotationsYAxisCoords = {
   min: 0,
   pos: 3,
@@ -61,22 +62,23 @@ const annotationsYAxisCoords = {
   show: false
 };
 const symbolSize = 6;
+
 /**
  * These comparison operators are currently in monitoring
  * charts that have alerting related data.
  *
  * {Array} Possible values for greater than
  */
-
 const GREATER_THAN = ['>', '>'];
+
 /**
  * These comparison operators are currently in monitoring
  * charts that have alerting related data.
  *
  * {Array} Possible values for less than
  */
-
 const LESS_THAN = ['<', '&lt;'];
+
 /**
  * All default dataZoom configs will have slider & inside
  * (for reference, see https://gitlab.com/gitlab-org/gitlab-ui/issues/240)
@@ -84,7 +86,6 @@ const LESS_THAN = ['<', '&lt;'];
  * and is specifically to enable touch zoom for mobile devices
  * @param {Object} options
  */
-
 const getDataZoomConfig = function () {
   let {
     filterMode = 'none'
@@ -111,20 +112,23 @@ const getDataZoomConfig = function () {
       disabled
     }]
   };
-}; // All chart options can be merged but series
+};
+
+// All chart options can be merged but series
 // needs to be concatenated.
 // Series can be an object for single series or
 // an array of objects.
-
 const mergeSeriesToOptions = function (options) {
   let series = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   const {
     series: optSeries = []
   } = options;
-  return { ...options,
+  return {
+    ...options,
     series: [...castArray(series), ...castArray(optSeries)]
   };
 };
+
 /**
  * If an annotation series exists, the chart options should have an
  * array of yAxis settings so that the series can exist in its own
@@ -134,10 +138,10 @@ const mergeSeriesToOptions = function (options) {
  * @param {Boolean} hasAnnotations if annotation series yAxis should be merged
  * @returns {Object} options
  */
-
 const mergeAnnotationAxisToOptions = function (options) {
   let hasAnnotations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return { ...options,
+  return {
+    ...options,
     ...(hasAnnotations && {
       yAxis: [options.yAxis, annotationsYAxisCoords]
     })
@@ -162,19 +166,16 @@ const getToolboxConfig = function () {
       feature: {}
     }
   };
-
   if (restoreIconPath.length) {
     toolboxConfig.toolbox.feature.restore = {
       icon: restoreIconPath
     };
   }
-
   if (saveImageIconPath.length) {
     toolboxConfig.toolbox.feature.saveAsImage = {
       icon: restoreIconPath
     };
   }
-
   if (zoomIconPath.length && backIconPath.length) {
     toolboxConfig.toolbox.feature.dataZoom = {
       icon: {
@@ -183,9 +184,9 @@ const getToolboxConfig = function () {
       }
     };
   }
-
   return toolboxConfig;
 };
+
 /**
  * Generate eCharts markArea arrays for thresholds and annotations.
  *
@@ -204,7 +205,6 @@ const getToolboxConfig = function () {
  * @param {String} axis markArea is generated against this axis
  * @returns {Array}
  */
-
 const generateMarkArea = function (_ref) {
   let {
     min,
@@ -217,6 +217,7 @@ const generateMarkArea = function (_ref) {
     [axis]: max
   }];
 };
+
 /**
  * Generate eCharts markLine objects for thresholds and annotations.
  *
@@ -239,25 +240,22 @@ const generateMarkArea = function (_ref) {
  * @param {String} axis markLine is generated against this axis
  * @returns {Object}
  */
-
-
 const generateMarkLines = function (_ref2) {
   let {
     min,
     max
   } = _ref2;
   let axis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'yAxis';
-
   if (min) {
     return {
       [axis]: min
     };
   }
-
   return {
     [axis]: max
   };
 };
+
 /**
  * Generates markPoints that are placed under the markLines.
  *
@@ -268,8 +266,6 @@ const generateMarkLines = function (_ref2) {
  * @param {Object} annotation object
  * @return {Object}
  */
-
-
 const generateMarkPoints = _ref3 => {
   let {
     min,
@@ -282,6 +278,7 @@ const generateMarkPoints = _ref3 => {
     tooltipData
   };
 };
+
 /**
  * Generate set of markAreas and markLines to draw on charts
  * as alert thresholds.
@@ -291,19 +288,15 @@ const generateMarkPoints = _ref3 => {
  * @param {Array} thresholds Array of alert thresholds
  * @returns {Object} markAreas and markLines
  */
-
-
 function getThresholdConfig(thresholds) {
   if (!thresholds.length) {
     return {};
   }
-
   const data = thresholds.reduce((acc, alert) => {
     const {
       threshold,
       operator
     } = alert;
-
     if (GREATER_THAN.includes(operator)) {
       acc.areas.push(generateMarkArea({
         min: threshold,
@@ -315,7 +308,6 @@ function getThresholdConfig(thresholds) {
         max: threshold
       }));
     }
-
     acc.lines.push(generateMarkLines({
       max: threshold
     }));
@@ -334,6 +326,7 @@ function getThresholdConfig(thresholds) {
     }
   };
 }
+
 /**
  * This method is only for testing both markLines and markAreas
  * that are used for annotations.
@@ -344,7 +337,6 @@ function getThresholdConfig(thresholds) {
  * @param {Array} annotations Array of annotation objects
  * @returns {Object} { areas, lines, points }
  */
-
 const parseAnnotations = annotations => annotations.reduce((acc, annotation) => {
   // because only markLines are supported all cases will
   // satisfy this condition. This is more of a sanity check
@@ -355,7 +347,6 @@ const parseAnnotations = annotations => annotations.reduce((acc, annotation) =>
     acc.points.push(generateMarkPoints(annotation));
     return acc;
   }
-
   acc.areas.push(generateMarkArea(annotation, 'xAxis'));
   return acc;
 }, {
@@ -363,6 +354,7 @@ const parseAnnotations = annotations => annotations.reduce((acc, annotation) =>
   lines: [],
   points: []
 });
+
 /**
  * Generate set of markAreas and markLines to draw on charts
  * as annotations.
@@ -374,14 +366,13 @@ const parseAnnotations = annotations => annotations.reduce((acc, annotation) =>
  * @param {Array} annotations Array of annotations
  * @returns {Object} { markLines }
  */
-
 const getAnnotationsConfig = annotations => {
   if (!annotations.length) {
     return {};
-  } // annotations parsing is moved out so that it can be tested
-  // for markLines and markAreas.
-
+  }
 
+  // annotations parsing is moved out so that it can be tested
+  // for markLines and markAreas.
   const {
     lines,
     points
@@ -405,6 +396,7 @@ const getAnnotationsConfig = annotations => {
     }
   };
 };
+
 /**
  * Given thresholds and annotations options, this method generates
  * an annotation series that co-exists along with the data series.
@@ -416,14 +408,11 @@ const getAnnotationsConfig = annotations => {
  * @param {Object} params Thresholds, annotations and yAxis options
  * @returns {Object} Annotation series
  */
-
 const generateAnnotationSeries = function (annotations) {
   let yAxisIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-
   if (!annotations.length) {
     return null;
   }
-
   return merge({
     name: ANNOTATIONS_SERIES_NAME,
     yAxisIndex,
@@ -431,6 +420,7 @@ const generateAnnotationSeries = function (annotations) {
     data: []
   }, getAnnotationsConfig(annotations));
 };
+
 /**
  * This method generates the data series and relevant defaults for a bar chart
  *
@@ -442,7 +432,6 @@ const generateAnnotationSeries = function (annotations) {
  * @param {number} [options.yAxisIndex] - specifies the yAxis to use (if there are multiple)
  * @returns {Object} Bar chart series
  */
-
 const generateBarSeries = _ref4 => {
   let {
     name,
@@ -470,6 +459,7 @@ const generateBarSeries = _ref4 => {
     }
   };
 };
+
 /**
  * This method generates the data series and relevant defaults for a line chart
  *
@@ -480,7 +470,6 @@ const generateBarSeries = _ref4 => {
  * @param {number} [options.yAxisIndex] - specifies the yAxis to use (if there are multiple)
  * @returns {Object} Line chart series
  */
-
 const generateLineSeries = _ref5 => {
   let {
     name,
@@ -501,6 +490,7 @@ const generateLineSeries = _ref5 => {
     }
   };
 };
+
 /**
  * The method works well if tooltip content should be against y-axis values.
  * However, for bar charts, the tooltip should be against x-axis values.
@@ -511,7 +501,6 @@ const generateLineSeries = _ref5 => {
  * @param {String} yAxisTitle y-axis title
  * @returns {Object} tooltip title and content
  */
-
 const getDefaultTooltipContent = function (params) {
   let yAxisTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   const seriesDataLength = params.seriesData.length;
@@ -519,20 +508,18 @@ const getDefaultTooltipContent = function (params) {
     xLabels,
     tooltipContent
   } = params.seriesData.reduce((acc, chartItem) => {
-    const [title, value] = chartItem.value || []; // Let's use the y axis title as series name when only one series exists
+    const [title, value] = chartItem.value || [];
+    // Let's use the y axis title as series name when only one series exists
     // This way, TooltipDefaultFormat will display the y axis title as label
-
     const seriesName = seriesDataLength === 1 && yAxisTitle ? yAxisTitle : chartItem.seriesName;
     const color = seriesDataLength === 1 ? '' : chartItem.color;
     acc.tooltipContent[seriesName] = {
       value,
       color
     };
-
     if (!acc.xLabels.includes(title)) {
       acc.xLabels.push(title);
     }
-
     return acc;
   }, {
     xLabels: [],

package/dist/utils/charts/constants.js

@@ -15,52 +15,52 @@ const ANNOTATIONS_SERIES_NAME = 'annotations';
  *
  * All markPoints have this component type
  */
-
 const ANNOTATIONS_COMPONENT_TYPE = 'markPoint';
+
 /**
  * This is so that the mouse doesn't go over the
  * tooltip and call mouseout which will hide the
  * tooltip.
  */
-
 const ANNOTATION_TOOLTIP_TOP_OFFSET = 10;
+
 /**
  * This is a slight offset that gets applied to the left
  * of the chart tooltips to ensure a correct position.
  */
-
 const TOOLTIP_LEFT_OFFSET = 2;
+
 /**
  * This is an offset that gets applied between the mouse
  * cursor and the left of the chart data tooltips to provide
  * some spacing.
  */
-
 const DATA_TOOLTIP_LEFT_OFFSET = 10;
+
 /**
  * These are the accepted values for the layout prop
  * of the chart legend component
  */
-
 const LEGEND_LAYOUT_INLINE = 'inline';
 const LEGEND_LAYOUT_TABLE = 'table';
+
 /**
  * Default values for the chart legend field labels
  */
-
 const LEGEND_AVERAGE_TEXT = 'Avg';
 const LEGEND_CURRENT_TEXT = 'Current';
 const LEGEND_MIN_TEXT = 'Min';
 const LEGEND_MAX_TEXT = 'Max';
+
 /**
  * These arrow symbols are used as markPoints under the annotations lines
  * within area and line charts. This icon doesn't exist in the svg
  * library yet. The below issue is to track the progress of the svg icon
  * https://gitlab.com/gitlab-org/gitlab-svgs/-/issues/118
  */
+const arrowSymbol = 'path://m5 229 5 8h-10z';
 
-const arrowSymbol = 'path://m5 229 5 8h-10z'; // Constants for the type property of charts
-
+// Constants for the type property of charts
 const CHART_TYPE_BAR = 'bar';
 const CHART_TYPE_LINE = 'line';