@webitel/ui-sdk 3.1.103 → 3.1.105

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.103",
+  "version": "3.1.105",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/atoms/wt-tooltip/wt-tooltip.vue

@@ -13,6 +13,7 @@
       <slot name="activator"></slot>
     </div>
     <div
+      v-if="isVisible"
       ref="floating"
       class="wt-tooltip__floating"
       v-clickaway="hideTooltip"
@@ -29,7 +30,7 @@ import {
   ref, onMounted, onBeforeUnmount, watch,
 } from 'vue';
 import {
-  useFloating, autoPlacement, shift, flip, offset,
+  useFloating, autoPlacement, shift, flip, offset, autoUpdate,
 } from '@floating-ui/vue';
 
 // https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/util/events.ts
@@ -138,12 +139,18 @@ const unsubscribeTriggers = () => {
   unsetEventListeners(floating.value, props.popperTriggers);
 };
 
+// https://floating-ui.com/docs/misc#clipping
 const { floatingStyles } = useFloating(activator, floating, {
   placement: props.placement === 'auto' ? null : props.placement,
-  strategy: 'fixed',
+  strategy: 'fixed', // https://floating-ui.com/docs/computeposition#strategy
   // https://floating-ui.com/docs/middleware
+
+  /* WE SHOULD USE v-if INSTEAD OF OPACITY VISIBILITY
+  TOGGLE BECAUSE OF PERFORMANCE ISSUES, RELATED TO USAGE OF AUTO_UPDATE OF POSITIONS
+  */
+  whileElementsMounted: autoUpdate, // https://floating-ui.com/docs/vue#anchoring
   middleware: [
-    shift(), offset(8),
+    shift(), offset(4),
     props.placement === 'auto' ? autoPlacement() : flip(),
   ],
 });
@@ -177,7 +184,6 @@ onBeforeUnmount(() => unsubscribeTriggers());
     border-radius: var(--border-radius);
     box-shadow: var(--elevation-10);
     z-index: 1000;
-    transition: var(--transition);
   }
 
   &--contrast {
@@ -187,18 +193,4 @@ onBeforeUnmount(() => unsubscribeTriggers());
     }
   }
 }
-
-.wt-tooltip {
-  .wt-tooltip__floating {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  &--visible {
-    .wt-tooltip__floating {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-}
 </style>

package/src/components/molecules/wt-button-select/__tests__/WtButtonSelect.spec.js

@@ -1,6 +1,13 @@
 import { shallowMount, mount } from '@vue/test-utils';
 import WtSelectButton from '../wt-button-select.vue';
 
+// helps to mock @floating-ui/vue autoUpdate method
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
 describe('WtSelectButton', () => {
   it('renders a component', () => {
     const wrapper = shallowMount(WtSelectButton);
@@ -22,6 +29,9 @@ describe('WtSelectButton', () => {
       data: () => ({
         isOpened: true,
       }),
+      props: {
+        options: [],
+      },
     });
     const wtIcon = wrapper.find('.wt-button-select__select-arrow');
     expect(wtIcon.classes()).toContain('wt-button-select__select-arrow--active');