@gitlab/ui 78.19.0 → 79.1.0

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+# [79.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.0.0...v79.1.0) (2024-04-24)
+
+
+### Features
+
+* **GlFilteredSearch:** Improve dropdown styles ([ac13b05](https://gitlab.com/gitlab-org/gitlab-ui/commit/ac13b05b092e78e4c61bfd601d7b595c2bf8a04d))
+* **GlFilteredSearch:** Improve dropdown styles ([47ae89a](https://gitlab.com/gitlab-org/gitlab-ui/commit/47ae89a019cd33ae4582d61c08c6b48a677cc4f1))
+
+# [79.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.19.0...v79.0.0) (2024-04-22)
+
+
+### Features
+
+* **BaseDropdown:** Use a "main" element boundary when available ([ee0cd82](https://gitlab.com/gitlab-org/gitlab-ui/commit/ee0cd82b8b2ae6986052877250884ce9cd43df21))
+
+
+### BREAKING CHANGES
+
+* **BaseDropdown:** This change slightly alters the default positioning
+of GlDisclosureDropdown and GlListbox.
+
+If the dropdown is placed inside a <main> element: The disclosure
+will use main as a boundary to not overflow it. This change aims
+to smartly reduce the need to use custom "placement" ('right'
+and 'bottom-end') options, especially when the dropdown is placed
+on the right side, such as in contextual menus.
+
+If the dropdown is not placed in a <main> element, behavior does
+change.
+
 # [78.19.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.18.0...v78.19.0) (2024-04-22)
 
 

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

@@ -1,7 +1,7 @@
 import uniqueId from 'lodash/uniqueId';
-import { offset, autoPlacement, size, autoUpdate, computePosition } from '@floating-ui/dom';
+import { offset, autoPlacement, shift, 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_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
+import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_BOUNDARY_SELECTOR, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
 import { logWarning, isElementFocusable, isElementTabbable } from '../../../../utils/utils';
 import GlButton from '../../button/button';
 import GlIcon from '../../icon/icon';
@@ -252,8 +252,9 @@ var script = {
         strategy: this.positioningStrategy,
         middleware: [offset(this.offset), autoPlacement({
           alignment,
+          boundary: this.$el.closest(GL_DROPDOWN_BOUNDARY_SELECTOR) || 'clippingAncestors',
           allowedPlacements: dropdownAllowedAutoPlacements[this.placement]
-        }), size({
+        }), shift(), size({
           apply: _ref => {
             var _this$nonScrollableCo;
             let {

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

@@ -1,4 +1,5 @@
 // base dropdown events
+const GL_DROPDOWN_BOUNDARY_SELECTOR = 'main';
 const GL_DROPDOWN_SHOWN = 'shown';
 const GL_DROPDOWN_HIDDEN = 'hidden';
 const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
@@ -18,4 +19,4 @@ const POSITION_ABSOLUTE = 'absolute';
 const POSITION_FIXED = 'fixed';
 const GL_DROPDOWN_CONTENTS_CLASS = 'gl-new-dropdown-contents';
 
-export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };
+export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_BOUNDARY_SELECTOR, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };