@gitlab/ui 64.6.0 → 64.6.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
+
+
+### Bug Fixes
+
+* **GlChart:** ResizeObserver loop limit exceeded on responsive charts ([7952ae8](https://gitlab.com/gitlab-org/gitlab-ui/commit/7952ae86a22e200ff2bc4f9f8cf172de8e30b6f2))
+
 # [64.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.5.0...v64.6.0) (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();

package/dist/components/charts/chart/chart.js

@@ -2,6 +2,7 @@ import * as echarts from 'echarts';
 import { validRenderers, defaultWidth, defaultHeight, toolboxHeight } from '../../../utils/charts/config';
 import { themeName, createTheme } from '../../../utils/charts/theme';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import { debounceByAnimationFrame } from '../../../utils/utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
@@ -90,7 +91,8 @@ var script = {
   },
   data() {
     return {
-      chart: null
+      chart: null,
+      debouncedHandleResize: debounceByAnimationFrame(this.handleResize)
     };
   },
   computed: {
@@ -169,7 +171,7 @@ var script = {
       });
     },
     handleResize() {
-      if (this.responsive) this.chart.resize();
+      this.chart.resize();
     }
   }
 };
@@ -178,7 +180,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],ref:"chart"})};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer:[responsive]",value:(_vm.debouncedHandleResize),expression:"debouncedHandleResize",arg:_vm.responsive}],ref:"chart"})};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.6.0",
+  "version": "64.6.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -84,13 +84,13 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.22.1",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-react": "^7.22.3",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.51.0",
+    "@gitlab/svgs": "3.53.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -117,9 +117,9 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "12.13.0",
+    "cypress": "12.14.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.41.0",
+    "eslint": "8.42.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.13.3",
     "eslint-plugin-storybook": "0.6.12",

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

@@ -163,6 +163,7 @@ describe('base dropdown', () => {
           buildWrapper();
 
           await findDefaultDropdownToggle().trigger('click');
+          await nextTick();
 
           expect(computePosition).toHaveBeenCalledWith(
             findDefaultDropdownToggle().element,
@@ -180,6 +181,7 @@ describe('base dropdown', () => {
           });
 
           await findDefaultDropdownToggle().trigger('click');
+          await nextTick();
 
           expect(computePosition).toHaveBeenCalledWith(
             findDefaultDropdownToggle().element,

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

@@ -149,6 +149,7 @@ export default {
   },
   data() {
     return {
+      openedYet: false,
       visible: false,
       baseDropdownId: uniqueId('base-dropdown-'),
     };
@@ -221,8 +222,8 @@ export default {
       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() {
@@ -290,29 +291,24 @@ export default {
         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
-          );
-
-          /**
-           * 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;
+      this.stopAutoUpdate = autoUpdate(this.toggleElement, this.$refs.content, async () => {
+        const { x, y } = await computePosition(
+          this.toggleElement,
+          this.$refs.content,
+          this.floatingUIConfig
+        );
 
-          Object.assign(this.$refs.content.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          });
+        /**
+         * 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;
 
-          resolve(stopAutoUpdate);
+        Object.assign(this.$refs.content.style, {
+          left: `${x}px`,
+          top: `${y}px`,
         });
-        this.stopAutoUpdate = stopAutoUpdate;
       });
     },
     stopFloating() {
@@ -325,13 +321,13 @@ export default {
       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 {

package/src/components/charts/chart/chart.spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import * as echarts from 'echarts';
 import { toolboxHeight } from '~/utils/charts/config';
 import { createTheme } from '~/utils/charts/theme';
+import { waitForAnimationFrame } from '~/utils/test_utils';
 import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 import Chart from './chart.vue';
 
@@ -47,15 +48,19 @@ describe('chart component', () => {
     expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
 
     triggerResize(wrapper.element);
+    await waitForAnimationFrame();
+
     expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
   });
 
-  it('resizes the chart when responsive = true', async () => {
+  it('resizes the chart only once per animation frame when responsive = true', async () => {
     wrapper = shallowMount(Chart, { propsData: { options: {}, responsive: true } });
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
 
     triggerResize(wrapper.element);
+    triggerResize(wrapper.element);
+    await waitForAnimationFrame();
 
     expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(2);
   });

package/src/components/charts/chart/chart.vue

@@ -9,6 +9,7 @@ import {
 } from '../../../utils/charts/config';
 import { createTheme, themeName } from '../../../utils/charts/theme';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import { debounceByAnimationFrame } from '../../../utils/utils';
 
 /**
  * Allowed values by eCharts
@@ -95,6 +96,7 @@ export default {
   data() {
     return {
       chart: null,
+      debouncedHandleResize: debounceByAnimationFrame(this.handleResize),
     };
   },
   computed: {
@@ -175,12 +177,12 @@ export default {
       this.$emit('chartItemClicked', { chart: this.chart, params });
     },
     handleResize() {
-      if (this.responsive) this.chart.resize();
+      this.chart.resize();
     },
   },
 };
 </script>
 
 <template>
-  <div ref="chart" v-resize-observer="handleResize"></div>
+  <div ref="chart" v-resize-observer:[responsive]="debouncedHandleResize"></div>
 </template>