@gitlab/ui 56.1.1 → 56.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [56.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v56.1.2...v56.2.0) (2023-02-25)
+
+
+### Features
+
+* **GlSingleStat:** add titleIconClass prop ([df18efb](https://gitlab.com/gitlab-org/gitlab-ui/commit/df18efb2e22bb2bcb03edd1e8442e3eb1fcdca76))
+
+## [56.1.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v56.1.1...v56.1.2) (2023-02-23)
+
+
+### Bug Fixes
+
+* **GlPath:** Keep path text white in dark mode ([6fb2654](https://gitlab.com/gitlab-org/gitlab-ui/commit/6fb2654804ce75944cbd73f7acf300c66740b434))
+
 ## [56.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v56.1.0...v56.1.1) (2023-02-20)
 
 

package/dist/components/base/accordion/accordion.js

@@ -1,10 +1,10 @@
-import _uniqueId from 'lodash/uniqueId';
+import uniqueId from 'lodash/uniqueId';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlAccordion',
   provide() {
-    const accordionId = _uniqueId('accordion-set-');
+    const accordionId = uniqueId('accordion-set-');
     // temporary fix for this issue: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251
     // MR for the upstream pending: https://github.com/vuejs/apollo/pull/1153
     return {

package/dist/components/base/accordion/accordion_item.js

@@ -1,5 +1,5 @@
-import _uniqueId from 'lodash/uniqueId';
 import { BCollapse } from 'bootstrap-vue/esm/index.js';
+import uniqueId from 'lodash/uniqueId';
 import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -65,7 +65,7 @@ var script = {
   },
   data() {
     return {
-      accordionItemId: _uniqueId('accordion-item-'),
+      accordionItemId: uniqueId('accordion-item-'),
       isVisible: this.visible
     };
   },

package/dist/components/base/avatar/avatar.js

@@ -1,8 +1,9 @@
-import _isNumber from 'lodash/isNumber';
+import isNumber from 'lodash/isNumber';
 import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
 import { getAvatarChar } from '../../../utils/string_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
 const IDENTICON_BG_COUNT = 7;
 var script = {
   props: {
@@ -31,7 +32,7 @@ var script = {
       required: false,
       default: avatarSizeOptions[1],
       validator: value => {
-        const sizes = _isNumber(value) ? [value] : Object.values(value);
+        const sizes = isNumber(value) ? [value] : Object.values(value);
         const areValidSizes = sizes.every(size => {
           const isValidSize = avatarSizeOptions.includes(size);
           if (!isValidSize) {
@@ -51,7 +52,7 @@ var script = {
   },
   computed: {
     sizeClasses() {
-      if (_isNumber(this.size)) {
+      if (isNumber(this.size)) {
         return `gl-avatar-s${this.size}`;
       }
       const {

package/dist/components/base/avatars_inline/avatars_inline.js

@@ -1,5 +1,5 @@
-import _truncate from 'lodash/truncate';
-import _get from 'lodash/get';
+import truncate from 'lodash/truncate';
+import get from 'lodash/get';
 import { avatarsInlineSizeOptions } from '../../../utils/constants';
 import GlAvatar from '../avatar/avatar';
 import GlTooltip from '../tooltip/tooltip';
@@ -71,11 +71,11 @@ var script = {
       if (!this.badgeTooltipProp) {
         return '';
       }
-      const tooltipTitle = this.hiddenAvatars.map(avatar => _get(avatar, this.badgeTooltipProp, '').trim()).join(', ');
+      const tooltipTitle = this.hiddenAvatars.map(avatar => get(avatar, this.badgeTooltipProp, '').trim()).join(', ');
 
       // truncate will append '...'
       // we need to take these extra 3 characters into account in badgeTooltipMaxChars
-      return this.badgeTooltipMaxChars ? _truncate(tooltipTitle, {
+      return this.badgeTooltipMaxChars ? truncate(tooltipTitle, {
         length: this.badgeTooltipMaxChars
       }) : tooltipTitle;
     }

package/dist/components/base/datepicker/datepicker.js

@@ -1,4 +1,4 @@
-import _isString from 'lodash/isString';
+import isString from 'lodash/isString';
 import Pikaday from 'pikaday';
 import { defaultDateFormat, datepickerSizeOptionsMap } from '../../../utils/constants';
 import { areDatesEqual } from '../../../utils/datetime_utility';
@@ -7,6 +7,7 @@ import GlFormInput from '../form/form_input/form_input';
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
 const pad = function (val) {
   let len = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   return `0${val}`.slice(-len);
@@ -188,7 +189,7 @@ var script = {
       return 'calendar' in this ? this.calendar.toString() : '';
     },
     customTrigger() {
-      return _isString(this.target) && this.target !== '';
+      return isString(this.target) && this.target !== '';
     },
     triggerOnFocus() {
       return this.target === null;

package/dist/components/base/dropdown/dropdown.js

@@ -1,7 +1,7 @@
-import _merge from 'lodash/merge';
 import Vue from 'vue';
 import { BDropdown } from 'bootstrap-vue/esm/index.js';
 import { selectAll, isVisible } from 'bootstrap-vue/esm/utils/dom';
+import merge from 'lodash/merge';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions } from '../../../utils/constants';
 import { ButtonMixin } from '../../mixins/button_mixin';
 import GlButton from '../button/button';
@@ -10,6 +10,8 @@ import GlLoadingIcon from '../loading_icon/loading_icon';
 import GlDropdownDivider from './dropdown_divider';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
+
 // Return an Array of visible items
 function filterVisible(els) {
   return (els || []).filter(isVisible);
@@ -193,7 +195,7 @@ var script = {
       return this.hasHighlightedItemsContent && this.showHighlightedItemsTitle || this.showClearAll;
     },
     popperOptions() {
-      return _merge({}, DefaultPopperOptions, this.popperOpts);
+      return merge({}, DefaultPopperOptions, this.popperOpts);
     }
   },
   methods: {

package/dist/components/base/filtered_search/filtered_search.js

@@ -1,5 +1,5 @@
-import _isEqual from 'lodash/isEqual';
-import _cloneDeep from 'lodash/cloneDeep';
+import isEqual from 'lodash/isEqual';
+import cloneDeep from 'lodash/cloneDeep';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
@@ -190,8 +190,8 @@ var script = {
     },
     value: {
       handler(newValue, oldValue) {
-        if (newValue.length && !_isEqual(newValue, oldValue)) {
-          this.applyNewValue(_cloneDeep(newValue));
+        if (newValue.length && !isEqual(newValue, oldValue)) {
+          this.applyNewValue(cloneDeep(newValue));
         }
       },
       deep: true,
@@ -319,7 +319,7 @@ var script = {
        * Emitted when search is submitted
        * @property {array} tokens
        */
-      this.$emit('submit', normalizeTokens(_cloneDeep(this.tokens)));
+      this.$emit('submit', normalizeTokens(cloneDeep(this.tokens)));
     }
   }
 };

package/dist/components/base/filtered_search/filtered_search_token.js

@@ -1,4 +1,4 @@
-import _cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
@@ -87,7 +87,7 @@ var script = {
   data() {
     return {
       activeSegment: null,
-      tokenValue: _cloneDeep(this.value),
+      tokenValue: cloneDeep(this.value),
       intendedCursorPosition: this.cursorPosition
     };
   },
@@ -137,7 +137,7 @@ var script = {
         if ((newValue === null || newValue === void 0 ? void 0 : newValue.data) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.data) && (newValue === null || newValue === void 0 ? void 0 : newValue.operator) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.operator)) {
           return;
         }
-        this.tokenValue = _cloneDeep(newValue);
+        this.tokenValue = cloneDeep(newValue);
       }
     },
     active: {

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -1,4 +1,4 @@
-import _last from 'lodash/last';
+import last from 'lodash/last';
 import { Portal } from 'portal-vue';
 import { COMMA, LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion';
@@ -136,7 +136,7 @@ var script = {
       return (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.find(o => o.value === this.value);
     },
     nonMultipleValue() {
-      return this.multiSelect ? _last(this.value.split(COMMA)) : this.value;
+      return this.multiSelect ? last(this.value.split(COMMA)) : this.value;
     },
     inputValue: {
       get() {

package/dist/components/base/filtered_search/filtered_search_utils.js

@@ -1,6 +1,6 @@
-import _isString from 'lodash/isString';
-import _last from 'lodash/last';
-import _first from 'lodash/first';
+import first from 'lodash/first';
+import last from 'lodash/last';
+import isString from 'lodash/isString';
 
 const TERM_TOKEN_TYPE = 'filtered-search-term';
 const INTENT_ACTIVATE_PREVIOUS = 'intent-activate-previous';
@@ -87,10 +87,10 @@ function denormalizeTokens(inputTokens) {
   return result;
 }
 function splitOnQuotes(str) {
-  if (_first(str) === "'" && _last(str) === "'") {
+  if (first(str) === "'" && last(str) === "'") {
     return [str];
   }
-  if (_first(str) === '"' && _last(str) === '"') {
+  if (first(str) === '"' && last(str) === '"') {
     return [str];
   }
   const queue = str.split(' ');
@@ -136,7 +136,7 @@ function splitOnQuotes(str) {
  *  2. token should not already have a quote around it.
  */
 function wrapTokenInQuotes(token) {
-  if (!_isString(token)) {
+  if (!isString(token)) {
     return token;
   }
   if (!token.includes(' ')) {
@@ -145,7 +145,7 @@ function wrapTokenInQuotes(token) {
   const quotes = ["'", '"'];
 
   // If the token starts and ends with a quote, eg. "Foo Bar", then return the original token.
-  if (quotes.some(quote => _first(token) === quote && _last(token) === quote)) {
+  if (quotes.some(quote => first(token) === quote && last(token) === quote)) {
     return token;
   }
   return `"${token}"`;

package/dist/components/base/form/form_checkbox/form_checkbox.js

@@ -1,5 +1,5 @@
-import _uniqueId from 'lodash/uniqueId';
 import { BFormCheckbox } from 'bootstrap-vue/esm/index.js';
+import uniqueId from 'lodash/uniqueId';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -16,7 +16,7 @@ var script = {
     id: {
       type: String,
       required: false,
-      default: () => _uniqueId()
+      default: () => uniqueId()
     }
   },
   methods: {

package/dist/components/base/form/form_combobox/form_combobox.js

@@ -1,4 +1,4 @@
-import _uniqueId from 'lodash/uniqueId';
+import uniqueId from 'lodash/uniqueId';
 import GlDropdownItem from '../../dropdown/dropdown_item';
 import GlDropdownDivider from '../../dropdown/dropdown_divider';
 import GlFormGroup from '../form_group/form_group';
@@ -67,8 +67,8 @@ var script = {
       results: [],
       arrowCounter: -1,
       userDismissedResults: false,
-      suggestionsId: _uniqueId('token-suggestions-'),
-      inputId: _uniqueId('token-input-')
+      suggestionsId: uniqueId('token-suggestions-'),
+      inputId: uniqueId('token-input-')
     };
   },
   computed: {

package/dist/components/base/form/form_date/form_date.js

@@ -1,4 +1,4 @@
-import _uniqueId from 'lodash/uniqueId';
+import uniqueId from 'lodash/uniqueId';
 import GlFormInput from '../form_input/form_input';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -47,9 +47,9 @@ var script = {
   data() {
     return {
       currentValue: this.value,
-      inputId: this.id || _uniqueId('form-date-'),
-      invalidFeedbackId: _uniqueId('form-date-invalid-feedback-'),
-      outputId: _uniqueId('form-date-output-'),
+      inputId: this.id || uniqueId('form-date-'),
+      invalidFeedbackId: uniqueId('form-date-invalid-feedback-'),
+      outputId: uniqueId('form-date-output-'),
       valueAsDate: null
     };
   },

package/dist/components/base/form/form_group/form_group.js

@@ -1,7 +1,6 @@
-import _isPlainObject from 'lodash/isPlainObject';
-import _isArray from 'lodash/isArray';
-import _isString from 'lodash/isString';
 import { BFormGroup } from 'bootstrap-vue/esm/index.js';
+import isString from 'lodash/isString';
+import isPlainObject from 'lodash/isPlainObject';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -37,13 +36,13 @@ var script = {
         labelClass
       } = this;
       const defaultClass = 'col-form-label';
-      if (_isString(labelClass)) {
+      if (isString(labelClass)) {
         return `${labelClass} ${defaultClass}`;
       }
-      if (_isArray(labelClass)) {
+      if (Array.isArray(labelClass)) {
         return [...labelClass, defaultClass];
       }
-      if (_isPlainObject(labelClass)) {
+      if (isPlainObject(labelClass)) {
         return {
           ...labelClass,
           [defaultClass]: true

package/dist/components/base/form/form_input/form_input.js

@@ -1,4 +1,4 @@
-import _isObject from 'lodash/isObject';
+import isObject from 'lodash/isObject';
 import { BFormInput } from 'bootstrap-vue/esm/index.js';
 import { formInputSizes } from '../../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -23,7 +23,7 @@ var script = {
       required: false,
       default: null,
       validator: value => {
-        const sizes = _isObject(value) ? Object.values(value) : [value];
+        const sizes = isObject(value) ? Object.values(value) : [value];
         return sizes.every(size => Object.values(formInputSizes).includes(size));
       }
     }
@@ -33,7 +33,7 @@ var script = {
       if (this.size === null) {
         return [];
       }
-      if (_isObject(this.size)) {
+      if (isObject(this.size)) {
         const {
           default: defaultSize,
           ...nonDefaultSizes

package/dist/components/base/form/form_select/form_select.js

@@ -1,5 +1,5 @@
-import _isObject from 'lodash/isObject';
 import { BFormSelect } from 'bootstrap-vue/esm/index.js';
+import isObject from 'lodash/isObject';
 import { formInputSizes } from '../../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -17,7 +17,7 @@ var script = {
       required: false,
       default: null,
       validator: value => {
-        const sizes = _isObject(value) ? Object.values(value) : [value];
+        const sizes = isObject(value) ? Object.values(value) : [value];
         return sizes.every(size => Object.values(formInputSizes).includes(size));
       }
     }
@@ -27,7 +27,7 @@ var script = {
       if (this.size === null) {
         return [];
       }
-      if (_isObject(this.size)) {
+      if (isObject(this.size)) {
         const {
           default: defaultSize,
           ...nonDefaultSizes

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -1,4 +1,4 @@
-import _uniqueId from 'lodash/uniqueId';
+import uniqueId from 'lodash/uniqueId';
 import { createPopper } from '@popperjs/core';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
 import { POPPER_CONFIG, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE } from '../constants';
@@ -109,7 +109,7 @@ var script = {
   data() {
     return {
       visible: false,
-      baseDropdownId: _uniqueId('base-dropdown-')
+      baseDropdownId: uniqueId('base-dropdown-')
     };
   },
   computed: {

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -1,5 +1,5 @@
-import _uniqueId from 'lodash/uniqueId';
-import _clamp from 'lodash/clamp';
+import clamp from 'lodash/clamp';
+import uniqueId from 'lodash/uniqueId';
 import { stopEvent, filterVisible } from '../../../../utils/utils';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, HOME, END, ARROW_UP, ARROW_DOWN } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
@@ -9,6 +9,7 @@ import GlDisclosureDropdownGroup from './disclosure_dropdown_group';
 import { itemsValidator, hasOnlyListItems, isItem } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
 var script = {
   events: {
     GL_DROPDOWN_SHOWN,
@@ -104,7 +105,7 @@ var script = {
     toggleId: {
       type: String,
       required: false,
-      default: () => _uniqueId('dropdown-toggle-btn-')
+      default: () => uniqueId('dropdown-toggle-btn-')
     },
     /**
      * Additional CSS classes to customize toggle appearance
@@ -152,7 +153,7 @@ var script = {
   },
   data() {
     return {
-      disclosureId: _uniqueId('disclosure-'),
+      disclosureId: uniqueId('disclosure-'),
       nextFocusedItemIndex: null
     };
   },
@@ -229,7 +230,7 @@ var script = {
         target
       } = event;
       const currentIndex = elements.indexOf(target);
-      const nextIndex = _clamp(currentIndex + offset, 0, elements.length - 1);
+      const nextIndex = clamp(currentIndex + offset, 0, elements.length - 1);
       this.focusItem(nextIndex, elements);
     },
     focusItem(index, elements) {

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js

@@ -1,4 +1,4 @@
-import _uniqueId from 'lodash/uniqueId';
+import uniqueId from 'lodash/uniqueId';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item';
 import { isGroup } from './utils';
 import { DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
@@ -43,7 +43,7 @@ var script = {
     }
   },
   created() {
-    this.nameId = _uniqueId('gl-disclosure-dropdown-group-');
+    this.nameId = uniqueId('gl-disclosure-dropdown-group-');
   },
   methods: {
     handleAction(action) {

package/dist/components/base/new_dropdowns/disclosure/utils.js

@@ -1,4 +1,4 @@
-import _isFunction from 'lodash/isFunction';
+import isFunction from 'lodash/isFunction';
 import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 
 const itemValidator = item => {
@@ -21,7 +21,7 @@ const hasOnlyListItems = _ref => {
   let {
     default: defaultSlot
   } = _ref;
-  if (!_isFunction(defaultSlot)) {
+  if (!isFunction(defaultSlot)) {
     return false;
   }
   const nodes = defaultSlot();

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -1,6 +1,6 @@
-import _isNil from 'lodash/isNil';
-import _uniqueId from 'lodash/uniqueId';
-import _clamp from 'lodash/clamp';
+import clamp from 'lodash/clamp';
+import uniqueId from 'lodash/uniqueId';
+import isNil from 'lodash/isNil';
 import { stopEvent } from '../../../../utils/utils';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, HOME, END, ARROW_UP, ARROW_DOWN } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
@@ -15,6 +15,7 @@ import GlListboxGroup from './listbox_group';
 import { itemsValidator, isOption, flattenedOptions } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
 const ITEM_SELECTOR = '[role="option"]';
 const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-gray-200'];
 const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-1', 'gl-mt-2'];
@@ -277,8 +278,8 @@ var script = {
   data() {
     return {
       selectedValues: [],
-      toggleId: _uniqueId('dropdown-toggle-btn-'),
-      listboxId: _uniqueId('listbox-'),
+      toggleId: uniqueId('dropdown-toggle-btn-'),
+      listboxId: uniqueId('listbox-'),
       nextFocusedItemIndex: null,
       searchStr: ''
     };
@@ -324,7 +325,7 @@ var script = {
       return this.searchable && !this.showNoResultsText && this.$scopedSlots['search-summary-sr-only'];
     },
     headerId() {
-      return this.headerText && _uniqueId('listbox-header-');
+      return this.headerText && uniqueId('listbox-header-');
     },
     showResetButton() {
       if (!this.resetButtonLabel) {
@@ -352,7 +353,7 @@ var script = {
           }
           this.selectedValues = [...newSelected];
         } else {
-          this.selectedValues = _isNil(newSelected) ? [] : [newSelected];
+          this.selectedValues = isNil(newSelected) ? [] : [newSelected];
         }
       }
     },
@@ -448,7 +449,7 @@ var script = {
         target
       } = event;
       const currentIndex = elements.indexOf(target);
-      const nextIndex = _clamp(currentIndex + offset, 0, elements.length - 1);
+      const nextIndex = clamp(currentIndex + offset, 0, elements.length - 1);
       this.focusItem(nextIndex, elements);
     },
     focusItem(index, elements) {

package/dist/components/base/new_dropdowns/listbox/listbox_group.js

@@ -1,4 +1,4 @@
-import _uniqueId from 'lodash/uniqueId';
+import uniqueId from 'lodash/uniqueId';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -9,7 +9,7 @@ var script = {
     }
   },
   created() {
-    this.nameId = _uniqueId('gl-listbox-group-');
+    this.nameId = uniqueId('gl-listbox-group-');
   }
 };
 

package/dist/components/base/new_dropdowns/listbox/utils.js

@@ -1,7 +1,7 @@
-import _isNumber from 'lodash/isNumber';
-import _isString from 'lodash/isString';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
 
-const isOption = item => Boolean(item) && (_isString(item.value) || _isNumber(item.value));
+const isOption = item => Boolean(item) && (isString(item.value) || isNumber(item.value));
 const isGroup = function () {
   let {
     options

package/dist/components/base/path/path.js

@@ -1,11 +1,12 @@
-import _findLast from 'lodash/findLast';
-import _uniqueId from 'lodash/uniqueId';
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
+import uniqueId from 'lodash/uniqueId';
+import findLast from 'lodash/findLast';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { glThemes } from '../../../utils/constants';
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
 const BOUNDARY_WIDTH = 40;
 const PATH_ITEM_CLASS = 'gl-path-button';
 const PATH_ACTIVE_ITEM_PREFIX = 'gl-path-active-item';
@@ -48,7 +49,7 @@ var script = {
     backgroundColor: {
       type: String,
       required: false,
-      default: 'white'
+      default: 'rgba(0,0,0,0)'
     }
   },
   data() {
@@ -89,7 +90,7 @@ var script = {
     }
   },
   beforeCreate() {
-    this.pathUuid = _uniqueId('path-');
+    this.pathUuid = uniqueId('path-');
   },
   methods: {
     pathItemClass(index) {
@@ -111,7 +112,7 @@ var script = {
       this.width = width;
     },
     scrollPathLeft() {
-      const previousItemToScollTo = _findLast(this.$refs.pathListItems, listItem => {
+      const previousItemToScollTo = findLast(this.$refs.pathListItems, listItem => {
         return listItem.offsetLeft < this.leftHandBoundary;
       });
       const availableWidth = this.width - previousItemToScollTo.offsetWidth - BOUNDARY_WIDTH - BOUNDARY_WIDTH;

package/dist/components/base/skeleton_loader/skeleton_loader.js

@@ -1,4 +1,4 @@
-import _range from 'lodash/range';
+import range from 'lodash/range';
 import { uid } from '../../../utils/utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -122,7 +122,7 @@ var script = {
       attrs: {
         id: `${props.uniqueKey}-idClip`
       }
-    }, slotIsSet() ? slots().default : _range(props.lines).map(index => createElement('rect', {
+    }, slotIsSet() ? slots().default : range(props.lines).map(index => createElement('rect', {
       key: index,
       attrs: {
         y: index * DEFAULT_LINE_HEIGHT + index * DEFAULT_LINE_SPACING,

package/dist/components/base/tabs/tab/tab.js

@@ -1,9 +1,9 @@
-import _isPlainObject from 'lodash/isPlainObject';
-import _isArray from 'lodash/isArray';
 import { BTab } from 'bootstrap-vue/esm/index.js';
+import isPlainObject from 'lodash/isPlainObject';
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
 var script = {
   components: {
     BTab
@@ -29,10 +29,10 @@ var script = {
       const {
         titleLinkClass
       } = this;
-      if (_isArray(titleLinkClass)) {
+      if (Array.isArray(titleLinkClass)) {
         return [...titleLinkClass, DEFAULT_TAB_TITLE_LINK_CLASS];
       }
-      if (_isPlainObject(titleLinkClass)) {
+      if (isPlainObject(titleLinkClass)) {
         return {
           ...titleLinkClass,
           [DEFAULT_TAB_TITLE_LINK_CLASS]: true