@gitlab/ui 129.0.0 → 129.1.1

package/dist/utils/charts/config.js

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

package/dist/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/dist/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/dist/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/dist/utils/use_mock_intersection_observer.js

@@ -1,4 +1,4 @@
-import isMatch from 'lodash/isMatch';
+import { isMatch } from 'lodash-es';
 
 /* global jest, beforeEach, afterEach */
 /* eslint-disable class-methods-use-this, max-classes-per-file */

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

@@ -6,10 +6,10 @@ import { RX_DIGITS, RX_SPACES } from '../../../constants/regex';
 import { concat } from '../../../utils/array';
 import { cloneDeep } from '../../../utils/clone-deep';
 import { identity } from '../../../utils/identity';
-import { isString, isRegExp, isFunction } from '../../../utils/inspect';
+import { isFunction, isString, isRegExp } from '../../../utils/inspect';
 import { looseEqual } from '../../../utils/loose-equal';
 import { toInteger } from '../../../utils/number';
-import { makeProp, hasPropFunction } from '../../../utils/props';
+import { makeProp } from '../../../utils/props';
 import { escapeRegExp } from '../../../utils/string';
 import { warn } from '../../../utils/warn';
 import { stringifyRecordValues } from './stringify-record-values';
@@ -81,7 +81,8 @@ const filteringMixin = extend({
       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/dist/vendor/bootstrap-vue/src/mixins/form-text.js

@@ -7,7 +7,8 @@ import { mathMax } from '../utils/math';
 import { makeModelMixin } from '../utils/model';
 import { toInteger, toFloat } from '../utils/number';
 import { sortKeys } from '../utils/object';
-import { makeProp, hasPropFunction } from '../utils/props';
+import { isFunction } from '../utils/inspect';
+import { makeProp } from '../utils/props';
 import { toString } from '../utils/string';
 
 // --- Constants ---
@@ -78,7 +79,8 @@ 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/dist/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 { isUndefined, isObject, isArray, isFunction } from './inspect';
+import { isUndefined, isObject, isArray } from './inspect';
 import { hasOwnProperty, clone, keys } from './object';
 import { upperFirst } from './string';
 
@@ -66,32 +64,4 @@ const pluckProps = function (keysToPluck, objToPluck) {
   }, {});
 };
 
-// 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
-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
-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
-const hasPropFunction = fn => isFunction(fn) && fn.name && fn.name !== configurablePropDefaultFnName;
-
-export { copyProps, hasPropFunction, makeProp, makePropConfigurable, makePropsConfigurable, pluckProps, suffixPropName };
+export { copyProps, makeProp, pluckProps, suffixPropName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "129.0.0",
+  "version": "129.1.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -70,7 +70,7 @@
     "echarts": "^5.6.0",
     "gridstack": "^12.4.2",
     "iframe-resizer": "^4.4.5",
-    "lodash": "^4.17.23",
+    "lodash-es": "^4.17.23",
     "popper.js": "^1.16.1",
     "portal-vue": "2.1.7",
     "vue-functional-data-merge": "^3.1.0",
@@ -88,7 +88,7 @@
     "chokidar": "^4.0.3",
     "sane": "^5.0.1",
     "jackspeak": "2.1.1",
-    "postcss": "8.5.6",
+    "postcss": "8.5.8",
     "json5": "2.2.3",
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
@@ -149,7 +149,7 @@
     "pikaday": "^1.8.0",
     "playwright": "^1.58.2",
     "playwright-core": "^1.58.2",
-    "postcss": "8.5.6",
+    "postcss": "8.5.8",
     "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",

package/src/components/base/accordion/accordion_item.vue

@@ -1,5 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 import GlCollapse from '../collapse/collapse.vue';
 import GlAnimatedChevronRightDownIcon from '../animated_icon/animated_chevron_right_down_icon.vue';
 import GlButton from '../button/button.vue';

package/src/components/base/avatar/avatar.vue

@@ -1,5 +1,5 @@
 <script>
-import isNumber from 'lodash/isNumber';
+import { isNumber } from 'lodash-es';
 import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';
 import { getAvatarChar } from '../../../utils/string_utils';
 import { avatarSizeValidator } from './utils';

package/src/components/base/avatar/utils.js

@@ -1,4 +1,4 @@
-import isNumber from 'lodash/isNumber';
+import { isNumber } from 'lodash-es';
 import { avatarSizeOptions } from '../../../utils/constants';
 
 export const avatarSizeValidator = (value) => {

package/src/components/base/avatars_inline/avatars_inline.vue

@@ -1,6 +1,5 @@
 <script>
-import truncate from 'lodash/truncate';
-import get from 'lodash/get';
+import { truncate, get } from 'lodash-es';
 import { avatarsInlineSizeOptions } from '../../../utils/constants';
 import GlAvatar from '../avatar/avatar.vue';
 import GlTooltip from '../tooltip/tooltip.vue';

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -1,5 +1,5 @@
 <script>
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash-es';
 import { translate } from '../../../utils/i18n';
 import GlAvatar from '../avatar/avatar.vue';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';

package/src/components/base/datepicker/datepicker.vue

@@ -1,5 +1,5 @@
 <script>
-import isString from 'lodash/isString';
+import { isString } from 'lodash-es';
 import Pikaday from 'pikaday';
 import { defaultConfig } from '../../../config';
 import { defaultDateFormat, datepickerWidthOptionsMap } from '../../../utils/constants';

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -1,5 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { getDayDifference, getDateInPast, getDateInFuture } from '../../../utils/datetime_utility';
 import GlDatepicker from '../datepicker/datepicker.vue';

package/src/components/base/drawer/drawer.vue

@@ -1,5 +1,5 @@
 <script>
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from 'lodash-es';
 import { maxZIndex, drawerVariants } from '../../../utils/constants';
 import GlButton from '../button/button.vue';
 

package/src/components/base/dropdown/dropdown.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/one-component-per-file -->
 <script>
 import Vue from 'vue';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import { selectAll } from '../../../vendor/bootstrap-vue/src/utils/dom';
 import { BDropdown } from '../../../vendor/bootstrap-vue/src/components/dropdown/dropdown';
 import {

package/src/components/base/filtered_search/filtered_search.vue

@@ -1,6 +1,5 @@
 <script>
-import isEqual from 'lodash/isEqual';
-import cloneDeep from 'lodash/cloneDeep';
+import { isEqual, cloneDeep } from 'lodash-es';
 import { PortalTarget } from 'portal-vue';
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { logWarning } from '../../../utils/utils';

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -1,6 +1,5 @@
 <script>
-import cloneDeep from 'lodash/cloneDeep';
-import isEqual from 'lodash/isEqual';
+import { cloneDeep, isEqual } from 'lodash-es';
 import GlToken from '../token/token.vue';
 import { stopEvent } from '../../../utils/utils';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -1,5 +1,5 @@
 <script>
-import last from 'lodash/last';
+import { last } from 'lodash-es';
 import { Portal } from 'portal-vue';
 import { LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';

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

@@ -1,6 +1,4 @@
-import first from 'lodash/first';
-import last from 'lodash/last';
-import isString from 'lodash/isString';
+import { first, last, isString } from 'lodash-es';
 import { modulo } from '../../../utils/number_utils';
 
 export const TERM_TOKEN_TYPE = 'filtered-search-term';

package/src/components/base/form/form_character_count/form_character_count.vue

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

package/src/components/base/form/form_checkbox/form_checkbox.vue

@@ -1,6 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
-import isBoolean from 'lodash/isBoolean';
+import { uniqueId, isBoolean } from 'lodash-es';
 import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
 import { looseIndexOf } from '../../../../vendor/bootstrap-vue/src/utils/loose-index-of';
 

package/src/components/base/form/form_checkbox/form_checkbox_group.vue

@@ -1,8 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
-import isBoolean from 'lodash/isBoolean';
-import omit from 'lodash/omit';
-import pick from 'lodash/pick';
+import { uniqueId, isBoolean, omit, pick } from 'lodash-es';
 import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
 import { formOptionsMixin } from '../../../../vendor/bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';

package/src/components/base/form/form_combobox/form_combobox.vue

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

package/src/components/base/form/form_date/form_date.vue

@@ -1,5 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 import GlFormInput from '../form_input/form_input.vue';
 
 export default {

package/src/components/base/form/form_fields/form_fields.vue

@@ -1,7 +1,5 @@
 <script>
-import isFunction from 'lodash/isFunction';
-import mapValues from 'lodash/mapValues';
-import uniqueId from 'lodash/uniqueId';
+import { isFunction, mapValues, uniqueId } from 'lodash-es';
 import GlFormGroup from '../form_group/form_group.vue';
 import GlFormInput from '../form_input/form_input.vue';
 import { setObjectProperty } from '../../../../utils/set_utils';

package/src/components/base/form/form_group/form_group.vue

@@ -1,7 +1,5 @@
 <script>
-import isString from 'lodash/isString';
-import isPlainObject from 'lodash/isPlainObject';
-import { uniqueId } from 'lodash';
+import { isString, isPlainObject, uniqueId } from 'lodash-es';
 import { BFormGroup } from '../../../../vendor/bootstrap-vue/src/components/form-group/form-group';
 
 export default {

package/src/components/base/form/form_input/form_input.scss

@@ -1,3 +1,218 @@
+@use "sass:color";
+
+// 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: $gl-color-neutral-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 {
+    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);
+}
+
+// <gl-form-input> custom-range validation styling
+// Mixin for generating `.input-group .custom-range` validation styling
+@mixin 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 custom-range-validation-state("valid", $form-feedback-valid-color);
+@include custom-range-validation-state("invalid", $form-feedback-invalid-color);
+
 .gl-form-input,
 .gl-form-input.form-control {
   appearance: none;

package/src/components/base/form/form_input/form_input.vue

@@ -1,9 +1,5 @@
 <script>
-import isObject from 'lodash/isObject';
-import uniqueId from 'lodash/uniqueId';
-import isBoolean from 'lodash/isBoolean';
-import toInteger from 'lodash/toInteger';
-import toString from 'lodash/toString';
+import { isObject, uniqueId, isBoolean, toInteger, toString } from 'lodash-es';
 
 import { toFloat } from '../../../../utils/number_utils';
 import { isVisible, stopEvent } from '../../../../utils/utils';

package/src/components/base/form/form_select/form_select.vue

@@ -1,5 +1,5 @@
 <script>
-import isObject from 'lodash/isObject';
+import { isObject } from 'lodash-es';
 import { BFormSelect } from '../../../../vendor/bootstrap-vue/src/components/form-select/form-select';
 import { formInputWidths } from '../../../../utils/constants';
 

package/src/components/base/form/form_textarea/form_textarea.vue

@@ -1,5 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 import { BFormTextarea } from '../../../../vendor/bootstrap-vue/src/components/form-textarea/form-textarea';
 import GlFormCharacterCount from '../form_character_count/form_character_count.vue';
 

package/src/components/base/infinite_scroll/infinite_scroll.vue

@@ -1,5 +1,5 @@
 <script>
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash-es';
 
 const throttleDuration = 1000;
 /**

package/src/components/base/link/link.vue

@@ -1,10 +1,5 @@
 <script>
-import isFunction from 'lodash/isFunction';
-import isString from 'lodash/isString';
-import isObject from 'lodash/isObject';
-import toString from 'lodash/toString';
-import isBoolean from 'lodash/isBoolean';
-import concat from 'lodash/concat';
+import { isFunction, isString, isObject, toString, isBoolean, concat } from 'lodash-es';
 import { SafeLinkDirective, isExternalURL } from '../../../directives/safe_link/safe_link';
 import { stopEvent } from '../../../utils/utils';
 import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -1,6 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
-import isBoolean from 'lodash/isBoolean';
+import { uniqueId, isBoolean } from 'lodash-es';
 import {
   arrow,
   computePosition,

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -1,6 +1,5 @@
 <script>
-import clamp from 'lodash/clamp';
-import uniqueId from 'lodash/uniqueId';
+import { clamp, uniqueId } from 'lodash-es';
 import { stopEvent, filterVisible } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -1,5 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
 import { isGroup, doSomeItemsHaveIcon } from './utils';
 import {

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

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 
 const itemValidator = (item) => item?.text?.length > 0 && !Array.isArray(item?.items);

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

@@ -1,6 +1,5 @@
 <script>
-import clamp from 'lodash/clamp';
-import uniqueId from 'lodash/uniqueId';
+import { clamp, uniqueId } from 'lodash-es';
 import { stopEvent, logWarning } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,