@gitlab/ui 64.6.1 → 64.7.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [64.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.6.2...v64.7.0) (2023-06-13)
+
+
+### Features
+
+* **Type:** add line-height and letter-spacing mixins for headings ([ae1fef5](https://gitlab.com/gitlab-org/gitlab-ui/commit/ae1fef5d70c78f869b56297cd36e9861e123507a))
+
+## [64.6.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.6.1...v64.6.2) (2023-06-13)
+
+
+### Bug Fixes
+
+* **dropdowns:** fix ResizeObserver loop error ([a4797a5](https://gitlab.com/gitlab-org/gitlab-ui/commit/a4797a5624505d6d4aa2d539fd589bbd2b610aee))
+
 ## [64.6.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.6.0...v64.6.1) (2023-06-08)
 
 

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

@@ -137,6 +137,7 @@ var script = {
   },
   data() {
     return {
+      openedYet: false,
       visible: false,
       baseDropdownId: uniqueId('base-dropdown-')
     };
@@ -207,8 +208,8 @@ var script = {
       return {
         'gl-display-block!': this.visible,
         [FIXED_WIDTH_CLASS]: !this.fluidWidth,
-        'gl-fixed': this.isFixed,
-        'gl-absolute': !this.isFixed
+        'gl-fixed': this.openedYet && this.isFixed,
+        'gl-absolute': this.openedYet && !this.isFixed
       };
     },
     isFixed() {
@@ -271,26 +272,22 @@ var script = {
         childList: true,
         subtree: true
       });
-      await new Promise(resolve => {
-        const stopAutoUpdate = autoUpdate(this.toggleElement, this.$refs.content, async () => {
-          const {
-            x,
-            y
-          } = await computePosition(this.toggleElement, this.$refs.content, this.floatingUIConfig);
+      this.stopAutoUpdate = autoUpdate(this.toggleElement, this.$refs.content, async () => {
+        const {
+          x,
+          y
+        } = await computePosition(this.toggleElement, this.$refs.content, this.floatingUIConfig);
 
-          /**
-           * Due to the asynchronous nature of computePosition, it's technically possible for the
-           * component to have been destroyed by the time the promise resolves. In such case, we exit
-           * early to prevent a TypeError.
-           */
-          if (!this.$refs.content) return;
-          Object.assign(this.$refs.content.style, {
-            left: `${x}px`,
-            top: `${y}px`
-          });
-          resolve(stopAutoUpdate);
+        /**
+         * Due to the asynchronous nature of computePosition, it's technically possible for the
+         * component to have been destroyed by the time the promise resolves. In such case, we exit
+         * early to prevent a TypeError.
+         */
+        if (!this.$refs.content) return;
+        Object.assign(this.$refs.content.style, {
+          left: `${x}px`,
+          top: `${y}px`
         });
-        this.stopAutoUpdate = stopAutoUpdate;
       });
     },
     stopFloating() {
@@ -303,13 +300,13 @@ var script = {
       if (this.visible) {
         // The dropdown needs to be actually visible before we compute its position with Floating UI.
         await this.$nextTick();
-
+        this.openedYet = true;
         /**
          * We wait until the dropdown's position has been computed before emitting the `shown` event.
          * This ensures that, if the parent component attempts to focus an inner element, the dropdown
          * is already properly placed in the page. Otherwise, the page would scroll back to the top.
          */
-        await this.startFloating();
+        this.startFloating();
         this.$emit(GL_DROPDOWN_SHOWN);
       } else {
         this.stopFloating();