@eturnity/eturnity_reusable_components 9.25.12 → 9.25.13

package/package.json

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

package/src/components/filterComponent/viewFilter.vue

@@ -107,7 +107,7 @@
                   </SelectOption>
                 </template>
               </SelectComponent>
-              <template v-if="item.column === 'updated'">
+              <template v-if="isDateColumn(item.column)">
                 <DatePickerContainer
                   :data-id="
                     rowDataId.dataId
@@ -149,7 +149,7 @@
                 </DatePickerContainer>
               </template>
               <SelectComponent
-                v-else
+                v-else-if="!isBooleanColumn(item.column)"
                 ref="selectSortDropdown"
                 align-items="vertical"
                 class="sort-dropdown"
@@ -512,7 +512,30 @@
       document.removeEventListener('click', this.handleClickOutside)
     },
     methods: {
+      isDateColumn(column) {
+        if (column === 'updated') {
+          return true
+        }
+        const category = this.filterCategories.find(
+          (cat) => cat.name === column
+        )
+        return ['date', 'datetime', 'date_range'].includes(
+          category?.filter_type
+        )
+      },
+      isBooleanColumn(column) {
+        const category = this.filterCategories.find(
+          (cat) => cat.name === column
+        )
+        return category?.filter_type === 'boolean'
+      },
       handleClickOutside(event) {
+        // A target detached by a re-render (e.g. the select trigger when its
+        // dropdown opens) has lost its ancestry — it cannot be attributed as
+        // an outside click
+        if (!event.target.isConnected) {
+          return
+        }
         const isClickInSelect =
           event.target.closest('.sort-dropdown') ||
           event.target.closest('.rc-select-dropdown') ||
@@ -546,10 +569,12 @@
         return this.selectedSort.filter((item) => {
           const hasColumn = !!item.column
           const hasConstraint = !!item.constraint
-          const hasSelectedOptions =
-            item.column === 'updated'
-              ? !!item.selectedDate
-              : !!item.selectedOptions?.length
+          if (this.isBooleanColumn(item.column)) {
+            return hasColumn && hasConstraint
+          }
+          const hasSelectedOptions = this.isDateColumn(item.column)
+            ? !!item.selectedDate
+            : !!item.selectedOptions?.length
           return hasColumn && hasConstraint && hasSelectedOptions
         }).length
       },
@@ -588,10 +613,17 @@
           },
         ]
 
-        if (this.selectedSort?.[index]?.column === 'updated') {
+        if (this.isDateColumn(this.selectedSort?.[index]?.column)) {
           return dateOptions
         }
 
+        if (this.isBooleanColumn(this.selectedSort?.[index]?.column)) {
+          return [
+            { value: 'is_true', label: this.$gettext('Yes') },
+            { value: 'is_false', label: this.$gettext('No') },
+          ]
+        }
+
         if (this.selectedSort?.[index]?.column === 'project_status') {
           return generalOptions.filter(
             (option) => option.value !== 'contains_none'
@@ -617,12 +649,12 @@
         if (type === 'column') {
           const categoryName = this.filterCategories.find(
             (option) => option.name === value
-          ).text
+          )?.text
           return this.$gettext(categoryName) || '-'
         } else if (type === 'constraint') {
           return this.constraintOptions(index).find(
             (option) => option.value === value
-          ).label
+          )?.label
         } else if (type === 'selectedOptions') {
           const selectedOptions =
             this.selectedSort[index]?.selectedOptions || []

package/src/components/filterComponent/viewSettings.vue

@@ -261,6 +261,11 @@
         }
       },
       handleClickOutside(event) {
+        // Detached targets (removed by a re-render mid-click) cannot be
+        // attributed as outside clicks
+        if (!event.target.isConnected) {
+          return
+        }
         const buttonIcon = this.$el.querySelector('.button-icon')
         const boxContainer = this.$el.querySelector('.box-container')
 

package/src/components/filterComponent/viewSort.vue

@@ -266,6 +266,11 @@
     },
     methods: {
       handleClickOutside(event) {
+        // Detached targets (removed by a re-render mid-click) cannot be
+        // attributed as outside clicks
+        if (!event.target.isConnected) {
+          return
+        }
         const buttonIcon = this.$el.querySelector('.button-icon')
         const boxContainer = this.$el.querySelector('.box-container')
         const isClickInSelect =

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

@@ -402,6 +402,9 @@
   }
   const SelectButtonWrapper = styled('div', SelectButtonWrapperAttrs)`
     ${(props) => (props.disabled ? 'cursor: not-allowed' : 'cursor: pointer')};
+    /* Grid item: without this, nowrap selector text sets the automatic
+       minimum and the wrapper blows out a constrained track. */
+    min-width: 0;
   `
 
   const selectButtonAttrs = {
@@ -1506,6 +1509,11 @@
         }
       },
       getDistanceBetweenSelectAndDropdownMenu() {
+        // Runs from a delayed watcher callback; the select may have closed or
+        // unmounted by the time it fires
+        if (!this.$refs.select?.$el) {
+          return
+        }
         const wholeSelectTopPosition =
           this.selectTopPosition + this.$refs.select.$el.clientHeight
         this.selectAndDropdownDistance =

package/src/components/tabsHeader/index.vue

@@ -183,28 +183,16 @@
     z-index: ${(props) => (props.isActive ? 1 : 0)};
     border-bottom: ${(props) => {
       if (props.scrollOverflow) {
-        return '1px solid transparent'
+        return props.isActive
+          ? `1px solid ${props.theme.semanticColors.purple[400]}`
+          : '1px solid transparent'
       }
       if (props.isActive) {
         return `2px solid ${props.theme.semanticColors.purple[400]}`
       }
       return `2px solid ${props.theme.semanticColors.grey[400]}`
     }};
-    ${(props) =>
-      props.scrollOverflow && props.isActive
-        ? `
-      &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: -1px;
-        height: 2px;
-        background-color: ${props.theme.semanticColors.purple[400]};
-        z-index: 1;
-      }
-    `
-        : ''}
+    margin-bottom: ${(props) => (props.scrollOverflow && props.isActive ? '-1px' : '0')};
     &:hover .rc-tabs-header__menu-slot {
       opacity: 1;
       pointer-events: auto;