@eturnity/eturnity_reusable_components 8.16.8-EPDM-EPDM-14492.0 → 8.16.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.8-EPDM-EPDM-14492.0",
+  "version": "8.16.9",
   "files": [
     "dist",
     "src"

package/src/components/filter/filterSettings.vue

@@ -100,6 +100,7 @@
               :min-option-length="1"
               select-height="36px"
               select-width="100%"
+              :should-use-teleport="false"
             >
               <template #selector>
                 <OptionTitle> {{ filter.selectedText }} </OptionTitle>
@@ -255,6 +256,7 @@
               :label="filter.label"
               select-height="36px"
               select-width="100%"
+              :should-use-teleport="false"
             >
               <template #selector="{ selectedValue }">
                 <OptionTitle>

package/src/components/inputs/inputNumber/index.vue

@@ -513,10 +513,9 @@
         default: '40px',
       },
       value: {
+        type: [String, Number],
         required: true,
         default: null,
-        validator: (val) =>
-          typeof val === 'string' || typeof val === 'number' || val === null,
       },
       clearInput: {
         type: Boolean,

package/src/components/inputs/select/index.vue

@@ -133,7 +133,10 @@
           </Caret>
         </SelectButton>
         <DropdownWrapper ref="dropdownWrapperRef" :no-relative="noRelative">
-          <Teleport to="body">
+          <component
+            :is="shouldUseTeleport ? 'Teleport' : 'div'"
+            :to="shouldUseTeleport ? 'body' : undefined"
+          >
             <SelectDropdown
               v-show="isSelectDropdownShown"
               ref="dropdown"
@@ -164,22 +167,27 @@
               :is-active="isActive"
               :is-fixed-dropdown-position="isFixedDropdownPosition"
               :is-parent-modal="isParentModal"
+              :is-teleport="shouldUseTeleport"
               :min-width="minWidth"
               :no-relative="noRelative"
               :option-width="getOptionWidth"
               :selected-value="selectedValue"
-              :style="{
-                transform: `translate(${dropdownPosition?.left}px, ${
-                  noRelative ? 'auto' : `${dropdownPosition?.top}px`
-                })`,
-              }"
+              :style="
+                shouldUseTeleport
+                  ? {
+                      transform: `translate(${dropdownPosition?.left}px, ${
+                        noRelative ? 'auto' : `${dropdownPosition?.top}px`
+                      })`,
+                    }
+                  : undefined
+              "
               @mouseleave="optionLeave"
               @option-hovered="optionHovered"
               @option-selected="optionSelected"
             >
               <slot name="dropdown"></slot>
             </SelectDropdown>
-          </Teleport>
+          </component>
         </DropdownWrapper>
       </SelectButtonWrapper>
     </InputWrapper>
@@ -396,6 +404,7 @@
     minWidth: String,
     isParentModal: Boolean,
     isFixedDropdownPosition: Boolean,
+    isTeleport: Boolean,
   }
   const SelectDropdown = styled('div', selectDropdownAttrs)`
     box-sizing: border-box;
@@ -403,7 +412,7 @@
       props.isActive ? '2' : props.isParentModal ? '9999999' : '99999'};
     position: ${(props) =>
       props.isFixedDropdownPosition ? 'fixed' : 'absolute'};
-    top: 0px;
+    top: ${(props) => (props.isTeleport ? '0px' : '4px')};
     left: 0px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
@@ -657,6 +666,11 @@
         required: false,
         default: false,
       },
+      shouldUseTeleport: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     setup() {
       const modalRef = inject('modalRef')