@gitlab/ui 63.4.0 → 64.0.0

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

@@ -11,6 +11,7 @@ import {
   END,
   ARROW_DOWN,
   ARROW_UP,
+  GL_DROPDOWN_CONTENTS_CLASS,
 } from '../constants';
 import {
   buttonCategoryOptions,
@@ -300,13 +301,13 @@ export default {
       default: false,
     },
     /**
-     * Options to be passed to the underlying Popper.js instance.
-     * Overrides built-in options.
+     * Custom offset to be applied to Floating UI's offset middleware.
+     * https://floating-ui.com/docs/offset
      */
-    popperOptions: {
-      type: Object,
+    dropdownOffset: {
+      type: [Number, Object],
       required: false,
-      default: () => ({}),
+      default: undefined,
     },
     /**
      * Lets the dropdown extend to match its content's width, up to a maximum width
@@ -338,6 +339,7 @@ export default {
       return {
         'top-scrim-visible': !this.topBoundaryVisible,
         'bottom-scrim-visible': !this.bottomBoundaryVisible,
+        [GL_DROPDOWN_CONTENTS_CLASS]: true,
       };
     },
     itemTag() {
@@ -705,7 +707,7 @@ export default {
     :loading="loading"
     :no-caret="noCaret"
     :placement="placement"
-    :popper-options="popperOptions"
+    :offset="dropdownOffset"
     :fluid-width="fluidWidth"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"