@eturnity/eturnity_reusable_components 9.34.0 → 9.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.34.0",
+  "version": "9.34.2",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/building_details.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(1.5 1.5)" d="M12.5357 12.0714H11.1429V0.928571H11.6071C11.7303 0.928571 11.8484 0.879656 11.9354 0.792585C12.0225 0.705515 12.0714 0.587422 12.0714 0.464286C12.0714 0.341149 12.0225 0.223057 11.9354 0.135986C11.8484 0.0489157 11.7303 0 11.6071 0H1.39286C1.26972 0 1.15163 0.0489157 1.06456 0.135986C0.977487 0.223057 0.928571 0.341149 0.928571 0.464286C0.928571 0.587422 0.977487 0.705515 1.06456 0.792585C1.15163 0.879656 1.26972 0.928571 1.39286 0.928571H1.85714V12.0714H0.464286C0.341149 12.0714 0.223057 12.1203 0.135986 12.2074C0.0489157 12.2945 0 12.4126 0 12.5357C0 12.6589 0.0489157 12.7769 0.135986 12.864C0.223057 12.9511 0.341149 13 0.464286 13H12.5357C12.6589 13 12.7769 12.9511 12.864 12.864C12.9511 12.7769 13 12.6589 13 12.5357C13 12.4126 12.9511 12.2945 12.864 12.2074C12.7769 12.1203 12.6589 12.0714 12.5357 12.0714ZM2.78571 0.928571H10.2143V12.0714H8.35714V9.75C8.35714 9.62686 8.30823 9.50877 8.22116 9.4217C8.13409 9.33463 8.01599 9.28571 7.89286 9.28571H5.10714C4.98401 9.28571 4.86591 9.33463 4.77884 9.4217C4.69177 9.50877 4.64286 9.62686 4.64286 9.75V12.0714H2.78571V0.928571ZM7.42857 12.0714H5.57143V10.2143H7.42857V12.0714ZM4.17857 2.78571C4.17857 2.66258 4.22749 2.54449 4.31456 2.45741C4.40163 2.37034 4.51972 2.32143 4.64286 2.32143H5.57143C5.69456 2.32143 5.81266 2.37034 5.89973 2.45741C5.9868 2.54449 6.03571 2.66258 6.03571 2.78571C6.03571 2.90885 5.9868 3.02694 5.89973 3.11401C5.81266 3.20108 5.69456 3.25 5.57143 3.25H4.64286C4.51972 3.25 4.40163 3.20108 4.31456 3.11401C4.22749 3.02694 4.17857 2.90885 4.17857 2.78571ZM6.96429 2.78571C6.96429 2.66258 7.0132 2.54449 7.10027 2.45741C7.18734 2.37034 7.30543 2.32143 7.42857 2.32143H8.35714C8.48028 2.32143 8.59837 2.37034 8.68544 2.45741C8.77251 2.54449 8.82143 2.66258 8.82143 2.78571C8.82143 2.90885 8.77251 3.02694 8.68544 3.11401C8.59837 3.20108 8.48028 3.25 8.35714 3.25H7.42857C7.30543 3.25 7.18734 3.20108 7.10027 3.11401C7.0132 3.02694 6.96429 2.90885 6.96429 2.78571ZM4.17857 5.10714C4.17857 4.98401 4.22749 4.86591 4.31456 4.77884C4.40163 4.69177 4.51972 4.64286 4.64286 4.64286H5.57143C5.69456 4.64286 5.81266 4.69177 5.89973 4.77884C5.9868 4.86591 6.03571 4.98401 6.03571 5.10714C6.03571 5.23028 5.9868 5.34837 5.89973 5.43544C5.81266 5.52251 5.69456 5.57143 5.57143 5.57143H4.64286C4.51972 5.57143 4.40163 5.52251 4.31456 5.43544C4.22749 5.34837 4.17857 5.23028 4.17857 5.10714ZM6.96429 5.10714C6.96429 4.98401 7.0132 4.86591 7.10027 4.77884C7.18734 4.69177 7.30543 4.64286 7.42857 4.64286H8.35714C8.48028 4.64286 8.59837 4.69177 8.68544 4.77884C8.77251 4.86591 8.82143 4.98401 8.82143 5.10714C8.82143 5.23028 8.77251 5.34837 8.68544 5.43544C8.59837 5.52251 8.48028 5.57143 8.35714 5.57143H7.42857C7.30543 5.57143 7.18734 5.52251 7.10027 5.43544C7.0132 5.34837 6.96429 5.23028 6.96429 5.10714ZM4.17857 7.42857C4.17857 7.30543 4.22749 7.18734 4.31456 7.10027C4.40163 7.0132 4.51972 6.96429 4.64286 6.96429H5.57143C5.69456 6.96429 5.81266 7.0132 5.89973 7.10027C5.9868 7.18734 6.03571 7.30543 6.03571 7.42857C6.03571 7.55171 5.9868 7.6698 5.89973 7.75687C5.81266 7.84394 5.69456 7.89286 5.57143 7.89286H4.64286C4.51972 7.89286 4.40163 7.84394 4.31456 7.75687C4.22749 7.6698 4.17857 7.55171 4.17857 7.42857ZM6.96429 7.42857C6.96429 7.30543 7.0132 7.18734 7.10027 7.10027C7.18734 7.0132 7.30543 6.96429 7.42857 6.96429H8.35714C8.48028 6.96429 8.59837 7.0132 8.68544 7.10027C8.77251 7.18734 8.82143 7.30543 8.82143 7.42857C8.82143 7.55171 8.77251 7.6698 8.68544 7.75687C8.59837 7.84394 8.48028 7.89286 8.35714 7.89286H7.42857C7.30543 7.89286 7.18734 7.84394 7.10027 7.75687C7.0132 7.6698 6.96429 7.55171 6.96429 7.42857Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/compass_two_arrows.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(4.97 1.24)" d="M4.89579 7.48736C5.67453 7.35516 6.322 8.17595 5.94852 8.9229L3.92313 12.9747C3.55456 13.7116 2.50258 13.7117 2.13407 12.9747L0.108677 8.9229L0.0471536 8.77251C-0.193592 8.02052 0.52665 7.26383 1.31864 7.5274L2.71219 7.99126C2.91736 8.05965 3.13982 8.05959 3.34501 7.99126L4.73856 7.5274L4.89579 7.48736ZM3.66141 8.94048C3.25096 9.07723 2.80622 9.07729 2.39579 8.94048L1.00223 8.47564L3.0286 12.5274L5.05497 8.47564L3.66141 8.94048ZM2.13407 0.552786C2.50259 -0.184262 3.55461 -0.184262 3.92313 0.552786L5.9495 4.60454C6.34772 5.40135 5.58368 6.28176 4.73856 6.00005L3.34501 5.53618C3.13986 5.46781 2.91833 5.46787 2.71317 5.53618L1.31961 6.00005C0.474448 6.28177 -0.289683 5.40138 0.108677 4.60454L2.13407 0.552786Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/house_3d.svg

@@ -1,8 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16" fill="none">
-  <mask id="path-1-inside-1_57915_3657" fill="white">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.03081 3.71851L0 6.28736V12.2814L3.41065 13.4587V9.98801L4.532 10.4406V13.8458L8.06161 15.0643V9.07028L4.03081 3.71851Z"/>
-  </mask>
-  <path d="M0 6.28736L-0.698673 5.19107L-1.3 5.5743V6.28736H0ZM4.03081 3.71851L5.06922 2.9364L4.34595 1.9761L3.33213 2.62221L4.03081 3.71851ZM0 12.2814H-1.3V13.2079L-0.424205 13.5102L0 12.2814ZM3.41065 13.4587L2.98645 14.6876L4.71065 15.2828V13.4587H3.41065ZM3.41065 9.98801L3.89722 8.78251L2.11065 8.0614V9.98801H3.41065ZM4.532 10.4406H5.832V9.56343L5.01858 9.23511L4.532 10.4406ZM4.532 13.8458H3.232V14.7723L4.1078 15.0747L4.532 13.8458ZM8.06161 15.0643L7.63741 16.2931L9.36161 16.8883V15.0643H8.06161ZM8.06161 9.07028H9.36161V8.63549L9.10003 8.28818L8.06161 9.07028ZM0.698673 7.38365L4.72948 4.8148L3.33213 2.62221L-0.698673 5.19107L0.698673 7.38365ZM1.3 12.2814V6.28736H-1.3V12.2814H1.3ZM3.83485 12.2299L0.424205 11.0525L-0.424205 13.5102L2.98645 14.6876L3.83485 12.2299ZM4.71065 13.4587V9.98801H2.11065V13.4587H4.71065ZM2.92408 11.1935L4.04543 11.6461L5.01858 9.23511L3.89722 8.78251L2.92408 11.1935ZM3.232 10.4406V13.8458H5.832V10.4406H3.232ZM8.48582 13.8354L4.95621 12.617L4.1078 15.0747L7.63741 16.2931L8.48582 13.8354ZM6.76161 9.07028V15.0643H9.36161V9.07028H6.76161ZM2.99239 4.50061L7.0232 9.85239L9.10003 8.28818L5.06922 2.9364L2.99239 4.50061Z" fill="white" mask="url(#path-1-inside-1_57915_3657)"/>
-  <path d="M8.5625 14.2779V9.38818L13.5026 7.07375V11.9634L8.5625 14.2779Z" fill="white" stroke="white"/>
-  <path d="M8.21735 8.44534L4.80134 3.90984L9.81609 1.56045L13.2321 6.09596L8.21735 8.44534Z" fill="white" stroke="white"/>
-</svg>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.23926 0.0928743C9.66555 -0.105047 10.1726 0.021414 10.457 0.395609L13.7962 4.78952C13.9284 4.96352 14 5.17604 14 5.39458V10.358C14 10.7472 13.7742 11.1011 13.4211 11.265L8.42517 13.5847C8.19119 13.6933 7.92427 13.7074 7.6802 13.6238L5.20741 12.7774C4.80297 12.639 4.53125 12.2588 4.53125 11.8313V9.17295L3.41016 8.72471V10.7634C3.41016 11.4493 2.73554 11.9315 2.08662 11.7097L0.676466 11.2275C0.27187 11.0892 0 10.7089 0 10.2813V5.60883C0 5.26575 0.175879 4.94662 0.465938 4.76339L4.03027 2.51182L9.23926 0.0928743ZM1 5.6085V10.2804L2.41016 10.7628V7.24815L5.53125 8.49619V11.8302L7.06055 12.3536V8.15147L3.78906 3.84678L1 5.6085Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/length_2d.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.199219 9.85718V0.142822H1.75351L1.75352 9.85718H0.199219ZM5.38021 8.20572L2.14209 4.99999L5.38021 1.79425V4.19855L8.61833 4.19855V1.79425L11.8564 4.99999L8.61832 8.20572L8.61833 5.80142L5.38021 5.80142V8.20572ZM12.2449 0.142822V9.85718H13.7992V0.142822H12.2449Z" fill="white"/>
-</svg>
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 0C0.776142 0 1 0.223858 1 0.5V4.95312L1.25391 4.66797L3.03125 2.66797C3.21464 2.46172 3.53093 2.44277 3.7373 2.62598C3.94324 2.80939 3.96234 3.12575 3.7793 3.33203L2.74121 4.5H11.1797L10.1416 3.33203C9.95837 3.12563 9.97728 2.80936 10.1836 2.62598C10.39 2.44282 10.7063 2.46167 10.8896 2.66797L12.667 4.66797L12.9619 5L12.667 5.33203L10.8896 7.33203C10.7064 7.53822 10.39 7.55692 10.1836 7.37402C9.97727 7.19065 9.95838 6.87437 10.1416 6.66797L11.1797 5.5H2.74121L3.7793 6.66797C3.96214 6.87434 3.94338 7.19074 3.7373 7.37402C3.53103 7.55713 3.21468 7.538 3.03125 7.33203L1.25391 5.33203L1 5.0459V9.5C1 9.77614 0.776142 10 0.5 10C0.223858 10 0 9.77614 0 9.5V0.5C0 0.223858 0.223858 0 0.5 0ZM13.5 0C13.7761 0 14 0.223858 14 0.5V9.5C14 9.77614 13.7761 10 13.5 10C13.2239 10 13 9.77614 13 9.5V0.5C13 0.223858 13.2239 0 13.5 0Z" fill="#D9DEE9"/>
+</svg>

package/src/assets/svgIcons/length_2d_vertical.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.5C10 0.776142 9.77614 1 9.5 1L5.04687 1L5.33203 1.25391L7.33203 3.03125C7.53828 3.21464 7.55723 3.53093 7.37402 3.7373C7.19061 3.94324 6.87425 3.96234 6.66797 3.7793L5.5 2.74121L5.5 11.1797L6.66797 10.1416C6.87437 9.95837 7.19064 9.97728 7.37402 10.1836C7.55718 10.39 7.53833 10.7063 7.33203 10.8896L5.33203 12.667L5 12.9619L4.66797 12.667L2.66797 10.8896C2.46178 10.7064 2.44307 10.39 2.62598 10.1836C2.80935 9.97727 3.12563 9.95838 3.33203 10.1416L4.5 11.1797L4.5 2.74121L3.33203 3.7793C3.12566 3.96214 2.80926 3.94338 2.62598 3.7373C2.44287 3.53103 2.462 3.21468 2.66797 3.03125L4.66797 1.25391L4.9541 1L0.5 1C0.223858 1 -3.39263e-08 0.776142 -2.18557e-08 0.5C-9.78513e-09 0.223857 0.223858 -4.27329e-07 0.5 -4.15258e-07L9.5 -2.18557e-08C9.77614 -9.78513e-09 10 0.223858 10 0.5ZM10 13.5C10 13.7761 9.77614 14 9.5 14L0.499999 14C0.223857 14 -6.02174e-07 13.7761 -5.90104e-07 13.5C-5.78033e-07 13.2239 0.223857 13 0.499999 13L9.5 13C9.77614 13 10 13.2239 10 13.5Z" fill="#D9DEE9"/>
+</svg>

package/src/assets/svgIcons/obstacle_flat_top.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(1 3)" d="M10.5002 0C10.7763 0 11.0002 0.223858 11.0002 0.5V4.10254L13.2902 3.0459C13.5408 2.93024 13.8384 3.0396 13.9543 3.29004C14.0699 3.54066 13.9606 3.83828 13.7101 3.9541L0.710133 9.9541C0.459551 10.0696 0.161861 9.9604 0.0460701 9.70996C-0.0695019 9.45942 0.0398765 9.16177 0.290211 9.0459L3.00017 7.79492V0.5C3.00017 0.223939 3.22414 0.000131124 3.50017 0H10.5002ZM4.00017 7.33301L10.006 4.56055C10.0036 4.54062 10.0002 4.52058 10.0002 4.5V1H4.00017V7.33301Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/obstacle_sloped_top.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(1 3.5)" d="M10.0411 0.0457596C10.1959 -0.0254973 10.3771 -0.0128598 10.5206 0.0789627C10.664 0.170879 10.751 0.329551 10.7511 0.499861V3.71763L13.2901 2.54576C13.5407 2.43012 13.8383 2.53955 13.9542 2.7899C14.0699 3.04052 13.9606 3.33814 13.7101 3.45396L0.710068 9.45396C0.459503 9.56943 0.161784 9.46024 0.0460058 9.20982C-0.0694542 8.95934 0.0399117 8.66164 0.290146 8.54576L3.25108 7.17857V3.49986L3.25597 3.4276C3.28014 3.26211 3.38642 3.11729 3.54112 3.04576L10.0411 0.0457596ZM7.21104 2.45396L4.25108 3.8192V6.71763L9.75108 4.17857V1.28111L7.21104 2.45396Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/panel_orientation_horizontal.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(2 1.5)" d="M0.5 0C0.776142 0 1 0.223858 1 0.5V12.5C1 12.7761 0.776142 13 0.5 13C0.223858 13 0 12.7761 0 12.5V0.5C0 0.223858 0.223858 0 0.5 0ZM7.10254 7.50488C7.60667 7.55621 8 7.98232 8 8.5C8 9.01768 7.60667 9.44379 7.10254 9.49512L7 9.5H3C2.44772 9.5 2 9.05228 2 8.5C2 7.94772 2.44772 7.5 3 7.5H7L7.10254 7.50488ZM11.1025 3.50488C11.6067 3.55621 12 3.98232 12 4.5C12 5.01768 11.6067 5.44379 11.1025 5.49512L11 5.5H3C2.44772 5.5 2 5.05228 2 4.5C2 3.94772 2.44772 3.5 3 3.5H11L11.1025 3.50488Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/panel_orientation_vertical.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(1.5 1)" d="M4.5 2C5.05228 2 5.5 2.44772 5.5 3V11L5.49512 11.1025C5.44379 11.6067 5.01768 12 4.5 12C3.98232 12 3.55621 11.6067 3.50488 11.1025L3.5 11V3C3.5 2.44772 3.94772 2 4.5 2ZM8.5 2C9.05228 2 9.5 2.44772 9.5 3V7L9.49512 7.10254C9.44379 7.60667 9.01768 8 8.5 8C7.98232 8 7.55621 7.60667 7.50488 7.10254L7.5 7V3C7.5 2.44772 7.94772 2 8.5 2ZM12.5 0C12.7761 1.20706e-08 13 0.223858 13 0.5C13 0.776142 12.7761 1 12.5 1H0.5C0.223858 1 2.83224e-07 0.776142 0 0.5C1.20706e-08 0.223858 0.223858 -2.58771e-10 0.5 0H12.5Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/pv_panel.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path transform="translate(1.04 1.5)" d="M13.3232 0C13.7327 4.6248e-05 14.022 0.401551 13.8926 0.790039L9.95896 12.5898C9.87726 12.8348 9.64784 13 9.38963 13H0.600565C0.191116 12.9999 -0.0982598 12.5984 0.0312292 12.21L3.96482 0.410156L4.00193 0.322266C4.10404 0.126506 4.30821 3.58696e-05 4.53416 0H13.3232ZM2.15623 9L1.15623 12H3.10154L4.10154 9H2.15623ZM5.15623 9L4.15623 12H6.10154L7.10154 9H5.15623ZM8.15623 9L7.15623 12H9.10154L10.1015 9H8.15623ZM2.48924 8H4.43455L5.43455 5H3.48924L2.48924 8ZM5.48924 8H7.43455L8.43455 5H6.48924L5.48924 8ZM8.48924 8H10.4345L11.4345 5H9.48924L8.48924 8ZM3.82224 4H5.76756L6.76756 1H4.82224L3.82224 4ZM6.82224 4H8.76756L9.76756 1H7.82224L6.82224 4ZM9.82224 4H11.7676L12.7676 1H10.8222L9.82224 4Z" fill="white"/>
+</svg>

package/src/components/infoText/index.vue

@@ -244,6 +244,14 @@
         default: '400px',
         type: String,
       },
+      minWidth: {
+        default: '230px',
+        type: String,
+      },
+      contentPadding: {
+        default: '',
+        type: String,
+      },
       openTrigger: {
         type: String,
         default: 'onHover',
@@ -494,6 +502,7 @@
           width: '100%',
           maxWidth: props.maxWidth,
           overflowY: 'auto',
+          ...(props.contentPadding ? { padding: props.contentPadding } : {}),
           backgroundColor: props.contentBackgroundColor
             ? props.contentBackgroundColor
             : props.image
@@ -567,12 +576,16 @@
         document.body.appendChild(clone)
 
         // Get fresh content width from clone
-        const contentWidth = clone.offsetWidth
+        const contentWidth = Math.ceil(clone.getBoundingClientRect().width)
         document.body.removeChild(clone)
 
         // Calculate new width
+        const TEXT_OVERLAY_HORIZONTAL_PADDING_PX = 20
         const calculatedWidth = Math.min(
-          Math.max(contentWidth, 230),
+          Math.max(
+            contentWidth + TEXT_OVERLAY_HORIZONTAL_PADDING_PX,
+            parseInt(props.minWidth, 10) || 0
+          ),
           parseInt(props.maxWidth, 10)
         )
 
@@ -644,6 +657,15 @@
         }
       })
 
+      watch(
+        () => props.text,
+        async () => {
+          if (!isVisible.value) return
+          await nextTick()
+          await updatePosition()
+        }
+      )
+
       return {
         isVisible,
         boxStyle,

package/src/components/infoText/infoText.spec.js

@@ -79,6 +79,93 @@ describe('InfoText Component', () => {
     expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
   })
 
+  describe("popup width floor (minWidth)", () => {
+    const showPopup = async (w) => {
+      w.vm.isMobile = false
+      await w.vm.$nextTick()
+      await w.trigger("mouseenter")
+      await new Promise((resolve) => setTimeout(resolve))
+      await w.vm.$nextTick()
+    }
+
+    it("keeps the 230px width floor by default", async () => {
+      const roomy = mount(InfoText, {
+        props: { ...defaultProps, maxWidth: "400px" },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(roomy)
+      expect(roomy.vm.infoBoxWidth).toBe(230)
+    })
+
+    it("applies contentPadding to the popup box", async () => {
+      const padded = mount(InfoText, {
+        props: { ...defaultProps, contentPadding: "6px 10px" },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(padded)
+      const box = padded.find('[data-test-id="info_text_wrapper"]')
+        .element.firstElementChild
+      expect(box.style.padding).toBe("6px 10px")
+    })
+
+    it("allows a lower minWidth for tooltip-style content", async () => {
+      const small = mount(InfoText, {
+        props: { ...defaultProps, minWidth: "0" },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(small)
+      expect(small.vm.infoBoxWidth).toBe(20)
+    })
+  })
+
+  describe('re-measures the popup when text changes while open', () => {
+    let rectSpy
+
+    beforeEach(() => {
+      rectSpy = jest
+        .spyOn(Element.prototype, 'getBoundingClientRect')
+        .mockImplementation(function () {
+          const width = (this.textContent || '').length * 8
+          return {
+            width,
+            height: 10,
+            top: 0,
+            left: 0,
+            bottom: 10,
+            right: width,
+          }
+        })
+    })
+
+    afterEach(() => {
+      rectSpy.mockRestore()
+    })
+
+    const showPopup = async (w) => {
+      w.vm.isMobile = false
+      await w.vm.$nextTick()
+      await w.trigger('mouseenter')
+      await new Promise((resolve) => setTimeout(resolve))
+      await w.vm.$nextTick()
+    }
+
+    it('recalculates the width for the new text', async () => {
+      const tooltip = mount(InfoText, {
+        props: { ...defaultProps, text: 'Save', minWidth: '0' },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(tooltip)
+      const initialWidth = tooltip.vm.infoBoxWidth
+      expect(initialWidth).toBe('Save'.length * 8 + 20)
+
+      await tooltip.setProps({ text: 'Saving in progress' })
+      await new Promise((resolve) => setTimeout(resolve))
+      await tooltip.vm.$nextTick()
+
+      expect(tooltip.vm.infoBoxWidth).toBe('Saving in progress'.length * 8 + 20)
+    })
+  })
+
   test('iconTextContent slot is correctly rendered', async () => {
     // override
     const props = defaultProps.iconTextContent