From 448db604a3435f45850c22e6e577f6174d5ae00f Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Fri, 12 Apr 2024 09:14:08 -0400
Subject: [PATCH 1/4] feat(ktable): make visibility menu scrollable

---
 .../KTable/ColumnVisibilityMenu.vue           | 95 ++++++++++++++-----
 1 file changed, 73 insertions(+), 22 deletions(-)

diff --git a/src/components/KTable/ColumnVisibilityMenu.vue b/src/components/KTable/ColumnVisibilityMenu.vue
index a42ae18049..ce3e40751b 100644
--- a/src/components/KTable/ColumnVisibilityMenu.vue
+++ b/src/components/KTable/ColumnVisibilityMenu.vue
@@ -2,6 +2,7 @@
   <div class="table-column-visibility-menu">
     <KDropdown
       data-testid="table-column-visibility-menu"
+      :kpop-attributes="{ placement: 'left' }"
       @toggle-dropdown="handleDropdownToggle"
     >
       <KTooltip text="Show/Hide Columns">
@@ -18,29 +19,34 @@
       </KTooltip>
 
       <template #items>
-        <KDropdownItem
-          v-for="col in columns"
-          :key="col.key"
-          class="column-visibility-menu-item"
-          :data-testid="`column-visibility-menu-item-${col.key}`"
-          @click.stop="() => {
-            visibilityMap[col.key] = !visibilityMap[col.key]
-            isDirty = true
-          }"
+        <div
+          ref="menuItemsRef"
+          class="menu-items-wrapper"
         >
-          <!-- KLabel must be separate to maintain click handling on the label within the dropdown item -->
-          <KCheckbox
-            v-model="visibilityMap[col.key]"
-            :aria-labelledby="`${tableId}-${col.key}-visibility-checkbox-label`"
-            :data-testid="`column-visibility-checkbox-${col.key}`"
-          />
-          <KLabel
-            :id="`${tableId}-${col.key}-visibility-checkbox-label`"
-            class="visibility-checkbox-label"
+          <KDropdownItem
+            v-for="col in columns"
+            :key="col.key"
+            class="column-visibility-menu-item"
+            :data-testid="`column-visibility-menu-item-${col.key}`"
+            @click.stop="() => {
+              visibilityMap[col.key] = !visibilityMap[col.key]
+              isDirty = true
+            }"
           >
-            {{ col.label }}
-          </KLabel>
-        </KDropdownItem>
+            <!-- KLabel must be separate to maintain click handling on the label within the dropdown item -->
+            <KCheckbox
+              v-model="visibilityMap[col.key]"
+              :aria-labelledby="`${tableId}-${col.key}-visibility-checkbox-label`"
+              :data-testid="`column-visibility-checkbox-${col.key}`"
+            />
+            <KLabel
+              :id="`${tableId}-${col.key}-visibility-checkbox-label`"
+              class="visibility-checkbox-label"
+            >
+              {{ col.label }}
+            </KLabel>
+          </KDropdownItem>
+        </div>
         <div class="apply-button-wrapper">
           <KButton
             appearance="tertiary"
@@ -57,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onBeforeMount, type PropType } from 'vue'
+import { ref, watch, onBeforeMount, onMounted, type PropType } from 'vue'
 import type { TableHeader } from '@/types'
 import { TableColumnsIcon } from '@kong/icons'
 import KButton from '@/components/KButton/KButton.vue'
@@ -86,6 +92,7 @@ const props = defineProps({
 
 const visibilityMap = ref<Record<string, boolean>>({})
 const isDirty = ref(false)
+const menuItemsRef = ref<HTMLDivElement>()
 
 const initVisibilityMap = (): void => {
   visibilityMap.value = props.columns.reduce((acc, col: TableHeader) => {
@@ -109,10 +116,39 @@ const handleDropdownToggle = (isOpen: boolean): void => {
   }
 }
 
+/**
+ * Fade out the bottom of the menu items when scrollable
+ */
+const setOverflowClass = (el: HTMLDivElement) => {
+  const isScrollable = el.scrollHeight > el.clientHeight
+
+  // GUARD: If element is not scrollable, remove all classes
+  if (!isScrollable) {
+    el.classList.remove('is-bottom-overflowing')
+    return
+  }
+
+  // Otherwise, the element is overflowing!
+  // One pixel is added to the height to account for non-integer heights.
+  const isScrolledToBottom = el.scrollHeight < el.clientHeight + el.scrollTop + 1
+  el.classList.toggle('is-bottom-overflowing', !isScrolledToBottom)
+}
+
 watch(() => props.visibilityPreferences, () => {
   initVisibilityMap()
 })
 
+onMounted(() => {
+  if (menuItemsRef.value) {
+    menuItemsRef.value.addEventListener('scroll', (e) => {
+      const el = e.currentTarget as HTMLDivElement
+
+      setOverflowClass(el)
+    })
+    setOverflowClass(menuItemsRef.value)
+  }
+})
+
 onBeforeMount(() => {
   // initialize visibility state
   initVisibilityMap()
@@ -123,6 +159,21 @@ onBeforeMount(() => {
 .table-column-visibility-menu {
   margin-left: var(--kui-space-auto, $kui-space-auto);
 
+  .menu-items-wrapper {
+    $bottom-mask-size: 0px;
+    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - $bottom-mask-size), transparent 100%);
+    mask-image: linear-gradient(to bottom, black calc(100% - $bottom-mask-size), transparent 100%);
+    max-height: 400px;
+    overflow-y: auto;
+
+    &.is-bottom-overflowing {
+      $bottom-mask-size: 48px;
+
+      -webkit-mask-image: linear-gradient(to bottom, black calc(100% - $bottom-mask-size), transparent 100%);
+      mask-image: linear-gradient(to bottom, black calc(100% - $bottom-mask-size), transparent 100%);
+    }
+  }
+
   .apply-button-wrapper {
     display: flex;
     width: 100%;

From 0139f0efaba4f3b0161c5b6b43c77315781d1f4f Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Fri, 12 Apr 2024 11:06:52 -0400
Subject: [PATCH 2/4] fix(*): initial scroll styles

---
 src/components/KTable/ColumnVisibilityMenu.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/KTable/ColumnVisibilityMenu.vue b/src/components/KTable/ColumnVisibilityMenu.vue
index ce3e40751b..937939a2a0 100644
--- a/src/components/KTable/ColumnVisibilityMenu.vue
+++ b/src/components/KTable/ColumnVisibilityMenu.vue
@@ -110,6 +110,10 @@ const handleApply = (): void => {
 }
 
 const handleDropdownToggle = (isOpen: boolean): void => {
+  // set scroll classes on open
+  if (isOpen && menuItemsRef.value) {
+    setOverflowClass(menuItemsRef.value)
+  }
   // reset the map if the dropdown is closed without applying changes
   if (!isOpen && isDirty.value) {
     initVisibilityMap()
@@ -145,6 +149,7 @@ onMounted(() => {
 
       setOverflowClass(el)
     })
+
     setOverflowClass(menuItemsRef.value)
   }
 })

From 09f740e6343bbd997ed7fd83c9427198ee785265 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Fri, 12 Apr 2024 11:19:05 -0400
Subject: [PATCH 3/4] fix(*): feedback

---
 src/components/KTable/ColumnVisibilityMenu.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/KTable/ColumnVisibilityMenu.vue b/src/components/KTable/ColumnVisibilityMenu.vue
index 937939a2a0..49f8e6bb3e 100644
--- a/src/components/KTable/ColumnVisibilityMenu.vue
+++ b/src/components/KTable/ColumnVisibilityMenu.vue
@@ -2,7 +2,6 @@
   <div class="table-column-visibility-menu">
     <KDropdown
       data-testid="table-column-visibility-menu"
-      :kpop-attributes="{ placement: 'left' }"
       @toggle-dropdown="handleDropdownToggle"
     >
       <KTooltip text="Show/Hide Columns">
@@ -168,7 +167,7 @@ onBeforeMount(() => {
     $bottom-mask-size: 0px;
     -webkit-mask-image: linear-gradient(to bottom, black calc(100% - $bottom-mask-size), transparent 100%);
     mask-image: linear-gradient(to bottom, black calc(100% - $bottom-mask-size), transparent 100%);
-    max-height: 400px;
+    max-height: 250px;
     overflow-y: auto;
 
     &.is-bottom-overflowing {

From c6b697d20dbf9329e29bd4bdb2aab0a459ae0b29 Mon Sep 17 00:00:00 2001
From: "kai.arrowood" <kai.arrowood@konghq.com>
Date: Fri, 12 Apr 2024 11:38:51 -0400
Subject: [PATCH 4/4] fix(*): wait for open

---
 src/components/KTable/ColumnVisibilityMenu.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/KTable/ColumnVisibilityMenu.vue b/src/components/KTable/ColumnVisibilityMenu.vue
index 49f8e6bb3e..c964110b08 100644
--- a/src/components/KTable/ColumnVisibilityMenu.vue
+++ b/src/components/KTable/ColumnVisibilityMenu.vue
@@ -111,7 +111,11 @@ const handleApply = (): void => {
 const handleDropdownToggle = (isOpen: boolean): void => {
   // set scroll classes on open
   if (isOpen && menuItemsRef.value) {
-    setOverflowClass(menuItemsRef.value)
+    setTimeout(() => {
+      if (menuItemsRef.value) {
+        setOverflowClass(menuItemsRef.value)
+      }
+    }, 500)
   }
   // reset the map if the dropdown is closed without applying changes
   if (!isOpen && isDirty.value) {