@gitlab/ui 64.13.1 → 64.13.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [64.13.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.13.1...v64.13.2) (2023-06-22)
+
+
+### Bug Fixes
+
+* **dropdowns:** replace flip middleware with autoPlacement ([23b44e8](https://gitlab.com/gitlab-org/gitlab-ui/commit/23b44e8a0c96aaa2a462e28d2f2f9cb2ab855431))
+
 ## [64.13.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.13.0...v64.13.1) (2023-06-21)
 
 

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

@@ -1,6 +1,6 @@
 import uniqueId from 'lodash/uniqueId';
-import { offset, flip, size, autoUpdate, computePosition } from '@floating-ui/dom';
-import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
+import { offset, autoPlacement, size, autoUpdate, computePosition } from '@floating-ui/dom';
+import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements, dropdownAllowedAutoPlacements } from '../../../../utils/constants';
 import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
 import { isElementFocusable, isElementTabbable, logWarning } from '../../../../utils/utils';
 import GlButton from '../../button/button';
@@ -219,7 +219,9 @@ var script = {
       return {
         placement: dropdownPlacements[this.placement],
         strategy: this.positioningStrategy,
-        middleware: [offset(this.offset), flip(), size({
+        middleware: [offset(this.offset), autoPlacement({
+          allowedPlacements: dropdownAllowedAutoPlacements[this.placement]
+        }), size({
           apply: _ref => {
             var _this$nonScrollableCo;
             let {

package/dist/utils/constants.js

@@ -109,6 +109,11 @@ const dropdownPlacements = {
   center: 'bottom',
   right: 'bottom-end'
 };
+const dropdownAllowedAutoPlacements = {
+  left: [dropdownPlacements.left, 'top-start'],
+  center: [dropdownPlacements.center, 'top'],
+  right: [dropdownPlacements.right, 'top-end']
+};
 const buttonSizeOptions = {
   small: 'sm',
   medium: 'md'
@@ -257,4 +262,4 @@ const loadingIconSizes = {
   'xl (64x64)': 'xl'
 };
 
-export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerSizeOptionsMap, defaultDateFormat, drawerVariants, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerSizeOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.13.1",
+  "version": "64.13.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { computePosition, autoUpdate, offset } from '@floating-ui/dom';
+import { computePosition, autoUpdate, offset, autoPlacement } from '@floating-ui/dom';
 import {
   ARROW_DOWN,
   GL_DROPDOWN_FOCUS_CONTENT,
@@ -15,6 +15,7 @@ import GlBaseDropdown from './base_dropdown.vue';
 jest.mock('@floating-ui/dom');
 const mockStopAutoUpdate = jest.fn();
 offset.mockImplementation((options) => options);
+autoPlacement.mockImplementation((options) => options);
 
 const DEFAULT_BTN_TOGGLE_CLASSES = [
   'btn',
@@ -104,7 +105,12 @@ describe('base dropdown', () => {
           {
             placement: 'bottom-start',
             strategy: 'absolute',
-            middleware: [offset({ mainAxis: DEFAULT_OFFSET })],
+            middleware: [
+              offset({ mainAxis: DEFAULT_OFFSET }),
+              autoPlacement({
+                allowedPlacements: ['bottom-start', 'top-start'],
+              }),
+            ],
           }
         );
       });
@@ -119,7 +125,12 @@ describe('base dropdown', () => {
           {
             placement: 'bottom',
             strategy: 'absolute',
-            middleware: [offset({ mainAxis: DEFAULT_OFFSET })],
+            middleware: [
+              offset({ mainAxis: DEFAULT_OFFSET }),
+              autoPlacement({
+                allowedPlacements: ['bottom', 'top'],
+              }),
+            ],
           }
         );
       });
@@ -134,7 +145,12 @@ describe('base dropdown', () => {
           {
             placement: 'bottom-end',
             strategy: 'absolute',
-            middleware: [offset({ mainAxis: DEFAULT_OFFSET })],
+            middleware: [
+              offset({ mainAxis: DEFAULT_OFFSET }),
+              autoPlacement({
+                allowedPlacements: ['bottom-end', 'top-end'],
+              }),
+            ],
           }
         );
       });
@@ -153,7 +169,7 @@ describe('base dropdown', () => {
           {
             placement: 'bottom-end',
             strategy: 'absolute',
-            middleware: [offset(customOffset)],
+            middleware: [offset(customOffset), autoPlacement(expect.any(Object))],
           }
         );
       });

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

@@ -1,10 +1,11 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import { computePosition, autoUpdate, offset, size, flip } from '@floating-ui/dom';
+import { computePosition, autoUpdate, offset, size, autoPlacement } from '@floating-ui/dom';
 import {
   buttonCategoryOptions,
   buttonSizeOptions,
   dropdownPlacements,
+  dropdownAllowedAutoPlacements,
   dropdownVariantOptions,
 } from '../../../../utils/constants';
 import {
@@ -235,7 +236,9 @@ export default {
         strategy: this.positioningStrategy,
         middleware: [
           offset(this.offset),
-          flip(),
+          autoPlacement({
+            allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
+          }),
           size({
             apply: ({ availableHeight, elements }) => {
               const contentsEl = elements.floating.querySelector(`.${GL_DROPDOWN_CONTENTS_CLASS}`);

package/src/utils/constants.js

@@ -128,6 +128,12 @@ export const dropdownPlacements = {
   right: 'bottom-end',
 };
 
+export const dropdownAllowedAutoPlacements = {
+  left: [dropdownPlacements.left, 'top-start'],
+  center: [dropdownPlacements.center, 'top'],
+  right: [dropdownPlacements.right, 'top-end'],
+};
+
 export const buttonSizeOptions = {
   small: 'sm',
   medium: 'md',