@eturnity/eturnity_reusable_components 8.7.5-qa-16-02-21.4 → 8.7.5-qa-16-02-21.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.7.5-qa-16-02-21.4",
+  "version": "8.7.5-qa-16-02-21.6",
   "files": [
     "dist",
     "src"

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

@@ -162,6 +162,7 @@
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
               :is-active="isActive"
+              :is-fixed-dropdown-position="isFixedDropdownPosition"
               :is-parent-modal="isParentModal"
               :min-width="minWidth"
               :no-relative="noRelative"
@@ -394,12 +395,14 @@
     noRelative: Boolean,
     minWidth: String,
     isParentModal: Boolean,
+    isFixedDropdownPosition: Boolean,
   }
   const SelectDropdown = styled('div', selectDropdownAttrs)`
     box-sizing: border-box;
     z-index: ${(props) =>
       props.isActive ? '2' : props.isParentModal ? '9999999' : '99999'};
-    position: absolute;
+    position: ${(props) =>
+      props.isFixedDropdownPosition ? 'fixed' : 'absolute'};
     top: 0px;
     left: 0px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
@@ -649,6 +652,11 @@
         type: String,
         required: false,
       },
+      isFixedDropdownPosition: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
 
     data() {
@@ -673,10 +681,10 @@
       }
     },
     setup() {
-      const rcModalRef = inject('rcModalRef')
+      const modalRef = inject('modalRef')
 
       return {
-        rcModalRef,
+        modalRef,
       }
     },
     computed: {
@@ -735,7 +743,7 @@
         )
       },
       isParentModal() {
-        return !!this.rcModalRef
+        return !!this.modalRef
       },
     },
     watch: {
@@ -750,7 +758,7 @@
           }, 10)
           await this.$nextTick()
           this.handleSetDropdownOffet()
-          this.calculateSelectTopPosition()
+          if (!this.isFixedDropdownPosition) this.calculateSelectTopPosition()
         } else {
           this.dropdownPosition.left = null
           if (this.animationFrameId) {
@@ -788,7 +796,11 @@
       this.observeDropdownHeight()
       this.observeSelectWidth()
       window.addEventListener('resize', this.handleSetDropdownOffet)
-      document.body.addEventListener('scroll', this.calculateSelectTopPosition)
+      if (!this.isFixedDropdownPosition)
+        document.body.addEventListener(
+          'scroll',
+          this.calculateSelectTopPosition
+        )
     },
     beforeMount() {
       this.selectedValue = this.value
@@ -797,10 +809,12 @@
       window.removeEventListener('resize', this.handleSetDropdownOffet)
       if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
       if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
-      document.body.removeEventListener(
-        'scroll',
-        this.calculateSelectTopPosition
-      )
+      if (!this.isFixedDropdownPosition) {
+        document.body.removeEventListener(
+          'scroll',
+          this.calculateSelectTopPosition
+        )
+      }
     },
     unmounted() {
       document.removeEventListener('click', this.clickOutside)

package/src/components/modals/modal/index.vue

@@ -1,7 +1,7 @@
 <template>
   <PageWrapper
     v-if="isOpen"
-    ref="rcModalRef"
+    ref="modalRef"
     :backdrop="backdrop"
     :is-open="isOpen"
     :position="position"
@@ -151,11 +151,11 @@
       },
     },
     setup() {
-      const rcModalRef = ref(null)
-      provide('rcModalRef', rcModalRef)
+      const modalRef = ref(null)
+      provide('modalRef', modalRef)
 
       return {
-        rcModalRef,
+        modalRef,
       }
     },
     watch: {