@gitlab/ui 129.0.0 → 129.1.1

package/src/components/base/new_dropdowns/listbox/listbox_group.vue

@@ -1,5 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 
 export default {
   name: 'GlListboxGroup',

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

@@ -1,5 +1,4 @@
-import isNumber from 'lodash/isNumber';
-import isString from 'lodash/isString';
+import { isNumber, isString } from 'lodash-es';
 
 const isOption = (item) =>
   Boolean(item) && (isString(item.value) || isNumber(item.value) || item.value === null);

package/src/components/base/pagination/pagination.vue

@@ -1,7 +1,5 @@
 <script>
-import debounce from 'lodash/debounce';
-import isFunction from 'lodash/isFunction';
-import range from 'lodash/range';
+import { debounce, isFunction, range } from 'lodash-es';
 import { GlBreakpointInstance, breakpoints } from '../../../utils/breakpoints';
 import { alignOptions, resizeDebounceTime } from '../../../utils/constants';
 import { sprintf, translate } from '../../../utils/i18n';

package/src/components/base/path/path.vue

@@ -1,7 +1,6 @@
 <script>
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import uniqueId from 'lodash/uniqueId';
-import findLast from 'lodash/findLast';
+import { uniqueId, findLast } from 'lodash-es';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import GlIcon from '../icon/icon.vue';
 

package/src/components/base/skeleton_loader/skeleton_loader.vue

@@ -1,5 +1,5 @@
 <script>
-import range from 'lodash/range';
+import { range } from 'lodash-es';
 import { uid } from '../../../utils/utils';
 
 const DEFAULT_LINE_MAX_WIDTH = 235;

package/src/components/base/sorting/sorting.vue

@@ -1,5 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlButton from '../button/button.vue';
 import GlButtonGroup from '../button_group/button_group.vue';

package/src/components/base/tabs/tab/tab.vue

@@ -1,5 +1,5 @@
 <script>
-import isPlainObject from 'lodash/isPlainObject';
+import { isPlainObject } from 'lodash-es';
 import { BTab } from '../../../../vendor/bootstrap-vue/src/components/tabs/tab';
 import GlBadge from '../../badge/badge.vue';
 import { logWarning } from '../../../../utils/utils';

package/src/components/base/tabs/tabs/scrollable_tabs.vue

@@ -1,5 +1,5 @@
 <script>
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash-es';
 import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
 import GlIcon from '../../icon/icon.vue';
 import { translate } from '../../../../utils/i18n';

package/src/components/base/toast/toast.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-default-export */
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 // eslint-disable-next-line no-restricted-imports
 import { ToastPlugin } from '../../../vendor/bootstrap-vue/src/components/toast/index';
 import CloseButton from '../../shared_components/close_button/close_button.vue';

package/src/components/base/toggle/toggle.vue

@@ -1,5 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 
 import { toggleLabelPosition } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';

package/src/components/base/token_selector/helpers.js

@@ -1,3 +1,3 @@
-import has from 'lodash/has';
+import { has } from 'lodash-es';
 
 export const tokensValidator = (tokens) => tokens.every((token) => has(token, 'id'));

package/src/components/base/token_selector/token_selector.vue

@@ -1,5 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 import { tokensValidator } from './helpers';
 import GlTokenContainer from './token_container.vue';
 import GlTokenSelectorDropdown from './token_selector_dropdown.vue';

package/src/components/base/token_selector/token_selector_dropdown.vue

@@ -1,5 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 import GlDropdownItem from '../dropdown/dropdown_item.vue';
 import { tokensValidator } from './helpers';
 

package/src/components/charts/area/area.vue

@@ -15,7 +15,7 @@
  * we use a separate tooltip for data point and arrow.
  */
 
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import {
   defaultChartOptions,
   grid,

package/src/components/charts/bar/bar.vue

@@ -1,6 +1,5 @@
 <script>
-import merge from 'lodash/merge';
-import truncate from 'lodash/truncate';
+import { merge, truncate } from 'lodash-es';
 import { grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
 import { CHART_DEFAULT_SERIES_STACK, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';

package/src/components/charts/chart/chart.vue

@@ -1,6 +1,6 @@
 <script>
 import * as echarts from 'echarts';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import {
   defaultHeight,
   defaultWidth,

package/src/components/charts/column/column.vue

@@ -1,5 +1,5 @@
 <script>
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import {
   defaultChartOptions,
   grid,

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -1,5 +1,5 @@
 <script>
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import {
   defaultChartOptions,
   dataZoomAdjustments,

package/src/components/charts/gauge/gauge.vue

@@ -1,7 +1,5 @@
 <script>
-import merge from 'lodash/merge';
-import uniq from 'lodash/uniq';
-import sortBy from 'lodash/sortBy';
+import { merge, uniq, sortBy } from 'lodash-es';
 import { gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
 import Chart from '../chart/chart.vue';
 

package/src/components/charts/heatmap/heatmap.vue

@@ -1,5 +1,5 @@
 <script>
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import { GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_100 } from '../../../tokens/build/js/tokens';
 import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';

package/src/components/charts/line/line.vue

@@ -17,7 +17,7 @@
  * we use a separate tooltip for data point and arrow.
  */
 
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import {
   defaultChartOptions,
   grid,

package/src/components/charts/sparkline/sparkline.vue

@@ -1,6 +1,5 @@
 <script>
-import merge from 'lodash/merge';
-import isNil from 'lodash/isNil';
+import { merge, isNil } from 'lodash-es';
 import { graphic } from 'echarts';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import {

package/src/components/charts/stacked_column/stacked_column.vue

@@ -1,6 +1,5 @@
 <script>
-import merge from 'lodash/merge';
-import groupBy from 'lodash/groupBy';
+import { merge, groupBy } from 'lodash-es';
 import {
   defaultChartOptions,
   grid,

package/src/components/dashboards/dashboard_layout/grid_layout/grid_layout.vue

@@ -1,6 +1,6 @@
 <script>
 import { GridStack } from 'gridstack';
-import pickBy from 'lodash/pickBy';
+import { pickBy } from 'lodash-es';
 import { breakpoints } from '../../../../utils/breakpoints';
 
 const CURSOR_GRABBING_CLASS = '!gl-cursor-grabbing';

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -1,6 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
-import isObject from 'lodash/isObject';
+import { uniqueId, isObject } from 'lodash-es';
 import GlDisclosureDropdown from '../../base/new_dropdowns/disclosure/disclosure_dropdown.vue';
 import GlIcon from '../../base/icon/icon.vue';
 import GlLoadingIcon from '../../base/loading_icon/loading_icon.vue';

package/src/components/dashboards/mock_data.js

@@ -1,4 +1,4 @@
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 
 export const getUniquePanelId = () => uniqueId('panel-');
 

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -1,5 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 import GlBadge from '../../base/badge/badge.vue';
 import GlLink from '../../base/link/link.vue';
 import GlPopover from '../../base/popover/popover.vue';

package/src/components/utilities/intersection_observer/intersection_observer.vue

@@ -1,5 +1,5 @@
 <script>
-import memoize from 'lodash/memoize';
+import { memoize } from 'lodash-es';
 
 const getObserver = memoize(
   (options) =>

package/src/components/utilities/sprintf/sprintf.vue

@@ -1,7 +1,6 @@
 <script>
 /* eslint-disable no-continue */
-import has from 'lodash/has';
-import isString from 'lodash/isString';
+import { has, isString } from 'lodash-es';
 
 const PREFIX = '%{';
 const SUFFIX = '}';

package/src/directives/hover_load/hover_load.js

@@ -1,4 +1,4 @@
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 
 export const DELAY_ON_HOVER = 100;
 let mouseOverTimer;

package/src/directives/resize_observer/resize_observer.js

@@ -1,4 +1,4 @@
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 
 let observer = null;
 

package/src/scss/bootstrap_vue.scss

@@ -7,7 +7,6 @@ $bv-enable-popover-variants: false;
 @import "../vendor/bootstrap-vue/src/utilities.scss";
 
 @import "../vendor/bootstrap-vue/src/components/dropdown/index.scss";
-@import "../vendor/bootstrap-vue/src/components/form-input/index.scss";
 @import "../vendor/bootstrap-vue/src/components/form-radio/index.scss";
 @import "../vendor/bootstrap-vue/src/components/modal/index.scss";
 @import "../vendor/bootstrap-vue/src/components/popover/index.scss";

package/src/utils/charts/config.js

@@ -1,5 +1,4 @@
-import castArray from 'lodash/castArray';
-import merge from 'lodash/merge';
+import { castArray, merge } from 'lodash-es';
 import { BLUE_500 } from '../../tokens/build/js/tokens';
 import { GlBreakpointInstance } from '../breakpoints';
 import { areDatesEqual } from '../datetime_utility';

package/src/utils/charts/story_config.js

@@ -1,4 +1,4 @@
-import times from 'lodash/times';
+import { times } from 'lodash-es';
 import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_constants';
 import { colorFromDefaultPalette } from './theme';
 

package/src/utils/i18n.js

@@ -1,4 +1,4 @@
-import escape from 'lodash/escape';
+import { escape } from 'lodash-es';
 import { i18n } from '../config';
 
 const defaultPluralHandler = (n, singleValue, pluralValue) => {

package/src/utils/set_utils.js

@@ -1,4 +1,4 @@
-import isObject from 'lodash/isObject';
+import { isObject } from 'lodash-es';
 
 /**
  * Purpose is a substitute of Vue.set but with preserving reactivity

package/src/utils/use_mock_intersection_observer.js

@@ -1,6 +1,6 @@
 /* global jest, beforeEach, afterEach */
 /* eslint-disable class-methods-use-this, max-classes-per-file */
-import isMatch from 'lodash/isMatch';
+import { isMatch } from 'lodash-es';
 
 /**
  * This class gives us a JSDom friendly DOM observer which we can manually trigger in tests

package/src/vendor/bootstrap-vue/src/components/index.scss

@@ -1,6 +1,5 @@
 @import "dropdown/index";
 @import "form-checkbox/index";
-@import "form-input/index";
 @import "form-radio/index";
 @import "modal/index";
 @import "popover/index";

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-filtering.js

@@ -15,7 +15,7 @@ import { identity } from '../../../utils/identity'
 import { isFunction, isString, isRegExp } from '../../../utils/inspect'
 import { looseEqual } from '../../../utils/loose-equal'
 import { toInteger } from '../../../utils/number'
-import { hasPropFunction, makeProp } from '../../../utils/props'
+import { makeProp } from '../../../utils/props'
 import { escapeRegExp } from '../../../utils/string'
 import { warn } from '../../../utils/warn'
 import { stringifyRecordValues } from './stringify-record-values'
@@ -78,7 +78,8 @@ export const filteringMixin = extend({
     localFilterFn() {
       // Return `null` to signal to use internal filter function
       const { filterFunction } = this
-      return hasPropFunction(filterFunction) ? filterFunction : null
+      // `filterFunction` is an optional Function prop with no default
+      return isFunction(filterFunction) ? filterFunction : null
     },
     // Returns the records in `localItems` that match the filter criteria
     // Returns the original `localItems` array if not sorting

package/src/vendor/bootstrap-vue/src/mixins/form-text.js

@@ -18,7 +18,8 @@ import { mathMax } from '../utils/math'
 import { makeModelMixin } from '../utils/model'
 import { toInteger, toFloat } from '../utils/number'
 import { sortKeys } from '../utils/object'
-import { hasPropFunction, makeProp } from '../utils/props'
+import { isFunction } from '../utils/inspect'
+import { makeProp } from '../utils/props'
 import { toString } from '../utils/string'
 
 // --- Constants ---
@@ -93,7 +94,8 @@ export const formTextMixin = extend({
       return mathMax(toInteger(this.debounce, 0), 0)
     },
     hasFormatter() {
-      return hasPropFunction(this.formatter)
+      // `formatter` is an optional Function prop with no default
+      return isFunction(this.formatter)
     }
   },
   watch: {

package/src/vendor/bootstrap-vue/src/utils/props.js

@@ -1,8 +1,6 @@
 import { PROP_TYPE_ANY } from '../constants/props'
-import { cloneDeep } from './clone-deep'
-import { getComponentConfig } from './config'
 import { identity } from './identity'
-import { isArray, isFunction, isObject, isUndefined } from './inspect'
+import { isArray, isObject, isUndefined } from './inspect'
 import { clone, hasOwnProperty, keys } from './object'
 import { upperFirst } from './string'
 
@@ -60,33 +58,3 @@ export const pluckProps = (keysToPluck, objToPluck, transformFn = identity) =>
     memo[transformFn(prop)] = objToPluck[prop]
     return memo
   }, {})
-
-// Make a prop object configurable by global configuration
-// Replaces the current `default` key of each prop with a `getComponentConfig()`
-// call that falls back to the current default value of the prop
-export const makePropConfigurable = (prop, key, componentKey) => ({
-  ...cloneDeep(prop),
-  default: function bvConfigurablePropDefault() {
-    const value = getComponentConfig(componentKey, key, prop.default)
-    return isFunction(value) ? value() : value
-  }
-})
-
-// Make a props object configurable by global configuration
-// Replaces the current `default` key of each prop with a `getComponentConfig()`
-// call that falls back to the current default value of the prop
-export const makePropsConfigurable = (props, componentKey) =>
-  keys(props).reduce(
-    (result, key) => ({ ...result, [key]: makePropConfigurable(props[key], key, componentKey) }),
-    {}
-  )
-
-// Get function name we use in `makePropConfigurable()`
-// for the prop default value override to compare
-// against in `hasPropFunction()`
-const configurablePropDefaultFnName = makePropConfigurable({}, '', '').default.name
-
-// Detect wether the given value is currently a function
-// and isn't the props default function
-export const hasPropFunction = fn =>
-  isFunction(fn) && fn.name && fn.name !== configurablePropDefaultFnName

package/tailwind.defaults.js

@@ -1,4 +1,4 @@
-const { range, round } = require('lodash');
+const { range, round } = require('lodash-es');
 const plugin = require('tailwindcss/plugin');
 const { tailwindCQsMQsPlugin } = require('./tailwind_cqs_mqs_plugin');
 const {

package/src/vendor/bootstrap-vue/src/components/form-input/_form-input.scss

@@ -1,219 +0,0 @@
-@use 'sass:color';
-
-// Temporary fix for cssnano bug: https://github.com/cssnano/cssnano/issues/712
-// By moving center to last value in `background-position` property
-// See: https://github.com/bootstrap-vue/bootstrap-vue/issues/2599
-@if $enable-validation-icons {
-  .form-control {
-    .was-validated &:invalid,
-    .was-validated &:valid,
-    &.is-invalid,
-    &.is-valid {
-      background-position: right $input-height-inner-quarter center;
-    }
-  }
-}
-
-// Bootstrap v4.x does not have special styling for color input
-// So we define some basic styles to compensate
-input[type="color"].form-control {
-  height: $input-height;
-  // We use the smaller padding to make the color block larger
-  padding: ($input-padding-y-sm * 0.5) ($input-padding-x-sm * 0.5);
-}
-
-input[type="color"].form-control.form-control-sm,
-.input-group-sm input[type="color"].form-control {
-  height: $input-height-sm;
-  // We use the smaller padding to make the color block larger
-  padding: ($input-padding-y-sm * 0.5) ($input-padding-x-sm * 0.5);
-}
-
-input[type="color"].form-control.form-control-lg,
-.input-group-lg input[type="color"].form-control {
-  height: $input-height-lg;
-  padding: ($input-padding-y-sm * 0.5) ($input-padding-x-sm * 0.5);
-}
-
-input[type="color"].form-control:disabled {
-  // Disabled styling needs to be a bit different than regular inputs
-  background-color: $gray-500;
-  opacity: $btn-disabled-opacity;
-}
-
-// --- Base `.input-group > .custom-range` styling (no PR yet on Bootstrap v4) ---
-.input-group {
-  > .custom-range {
-    position: relative;
-    flex: 1 1 auto;
-    width: 1%;
-    margin-bottom: 0;
-
-    + .form-control,
-    + .form-control-plaintext,
-    + .custom-select,
-    + .custom-range,
-    + .custom-file {
-      margin-left: -$input-border-width;
-    }
-  }
-
-  > .form-control,
-  > .form-control-plaintext,
-  > .custom-select,
-  > .custom-range,
-  > .custom-file {
-    + .custom-range {
-      margin-left: -$input-border-width;
-    }
-  }
-
-  > .custom-range:focus {
-    z-index: 3;
-  }
-
-  > .custom-range {
-    &:not(:last-child) {
-      @include border-right-radius(0);
-    }
-    &:not(:first-child) {
-      @include border-left-radius(0);
-    }
-  }
-
-  > .custom-range {
-    height: $input-height;
-    padding: 0 $input-padding-x;
-    background-color: $input-bg;
-    background-clip: padding-box;
-    border: $input-border-width solid $input-border-color;
-    height: $input-height;
-
-    @if $enable-rounded {
-      border-radius: $input-border-radius;
-    } @else {
-      border-radius: 0;
-    }
-
-    @include box-shadow($input-box-shadow);
-    @include transition($input-transition);
-    // Bootstrap v4.3.2 has deprecated this mixin
-    // @include form-control-focus();
-    // So we manually add its content here
-    &:focus {
-      color: $input-focus-color; // only needed for fallback to text input
-      background-color: $input-focus-bg;
-      border-color: $input-focus-border-color;
-      outline: 0;
-      @if $enable-shadows {
-        box-shadow: $input-box-shadow, $input-focus-box-shadow;
-      } @else {
-        box-shadow: $input-focus-box-shadow;
-      }
-    }
-
-    &:disabled,
-    &[readonly] {
-      background-color: $input-disabled-bg;
-    }
-  }
-}
-
-.input-group-lg > .custom-range {
-  height: $input-height-lg;
-  padding: 0 $input-padding-x-lg;
-  @include border-radius($input-border-radius-lg);
-}
-
-.input-group-sm > .custom-range {
-  height: $input-height-sm;
-  padding: 0 $input-padding-x-sm;
-  @include border-radius($input-border-radius-sm);
-}
-
-// --- <b-form-input>: custom-range validation styling - valid (no PR yet for Bootstrap v4.2) ---
-// Mixin for generating `.input-group .custom-range` validation styling
-@mixin bv-custom-range-validation-state($state, $color) {
-  .input-group .custom-range {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
-      border-color: $color;
-
-      &:focus {
-        border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25);
-      }
-    }
-  }
-
-  .custom-range {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
-      // Pseudo-elements must be split across multiple rulesets to have an affect
-      &:focus {
-        &::-webkit-slider-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
-        }
-        &::-moz-range-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
-        }
-        &::-ms-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
-        }
-      }
-
-      &::-webkit-slider-thumb {
-        background-color: $color;
-        background-image: none;
-
-        &:active {
-          background-color: color.adjust($color, $lightness: 35%);
-          background-image: none;
-        }
-      }
-
-      &::-webkit-slider-runnable-track {
-        background-color: rgba($color, 0.35);
-      }
-
-      &::-moz-range-thumb {
-        background-color: $color;
-        background-image: none;
-
-        &:active {
-          background-color: color.adjust($color, $lightness: 35%);
-          background-image: none;
-        }
-      }
-
-      &::-moz-range-track {
-        background: rgba($color, 0.35);
-      }
-
-      ~ .#{$state}-feedback,
-      ~ .#{$state}-tooltip {
-        display: block;
-      }
-
-      &::-ms-thumb {
-        background-color: $color;
-        background-image: none;
-
-        &:active {
-          background-color: color.adjust($color, $lightness: 35%);
-          background-image: none;
-        }
-      }
-
-      &::-ms-track-lower {
-        background: rgba($color, 0.35);
-      }
-      &::-ms-track-upper {
-        background: rgba($color, 0.35);
-      }
-    }
-  }
-}
-
-@include bv-custom-range-validation-state("valid", $form-feedback-valid-color);
-@include bv-custom-range-validation-state("invalid", $form-feedback-invalid-color);

package/src/vendor/bootstrap-vue/src/components/form-input/index.scss

@@ -1 +0,0 @@
-@import "form-input";