@webitel/ui-sdk 3.1.104 → 3.1.106

package/package.json

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

package/src/components/atoms/wt-context-menu/wt-context-menu.vue

@@ -4,6 +4,7 @@
     :visible="visible"
     :triggers="['click', 'touch']"
     placement="bottom-end"
+    popper-class="wt-context-menu__floating-wrapper"
   >
     <template v-slot:activator>
       <slot name="activator"></slot>
@@ -69,9 +70,9 @@ function handleOptionClick({ option, index, hide }) {
 .wt-context-menu {
   line-height: 0;
 
-  &.wt-tooltip :deep(.wt-tooltip__floating) {
-  padding: 0;
-}
+  &.wt-tooltip :deep(.wt-context-menu__floating-wrapper) {
+    padding: 0;
+  }
 }
 
 .wt-context-menu__menu {

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"
@@ -143,9 +144,13 @@ const { floatingStyles } = useFloating(activator, floating, {
   placement: props.placement === 'auto' ? null : props.placement,
   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(),
   ],
 });
@@ -179,7 +184,6 @@ onBeforeUnmount(() => unsubscribeTriggers());
     border-radius: var(--border-radius);
     box-shadow: var(--elevation-10);
     z-index: 1000;
-    transition: var(--transition);
   }
 
   &--contrast {
@@ -189,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');