From 0d0d9cfd5793105557335b790c2142d9f28a5446 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Wed, 18 Mar 2026 15:27:30 +0530
Subject: [PATCH 1/4] feat: add openPopover function to usePopover hook and
 integrate with GroupedFilterSelectPicker

---
 src/Shared/Components/Popover/types.ts        |  4 +
 .../Components/Popover/usePopover.hook.ts     |  7 +-
 .../GroupedFilterSelectPicker.tsx             | 95 ++++++++++++++++---
 src/Shared/Components/SelectPicker/type.ts    | 29 +++++-
 src/Shared/Components/Table/InternalTable.tsx |  5 +-
 5 files changed, 116 insertions(+), 24 deletions(-)

diff --git a/src/Shared/Components/Popover/types.ts b/src/Shared/Components/Popover/types.ts
index f224838d1..6909ecb42 100644
--- a/src/Shared/Components/Popover/types.ts
+++ b/src/Shared/Components/Popover/types.ts
@@ -115,6 +115,10 @@ export interface UsePopoverReturnType {
      * A function to close the popover.
      */
     closePopover: () => void
+    /**
+     * A function to open the popover.
+     */
+    openPopover: () => void
 }
 
 export type PopoverProps = Pick<UsePopoverReturnType, 'open' | 'overlayProps' | 'popoverProps' | 'triggerProps'> & {
diff --git a/src/Shared/Components/Popover/usePopover.hook.ts b/src/Shared/Components/Popover/usePopover.hook.ts
index 885138b16..66039ae7a 100644
--- a/src/Shared/Components/Popover/usePopover.hook.ts
+++ b/src/Shared/Components/Popover/usePopover.hook.ts
@@ -65,6 +65,10 @@ export const usePopover = ({
         updateOpenState(!open)
     }
 
+    const openPopover = () => {
+        updateOpenState(true)
+    }
+
     const closePopover = () => {
         if (disableClose) {
             return
@@ -141,7 +145,7 @@ export const usePopover = ({
 
         // eslint-disable-next-line consistent-return
         return () => {
-            scrollableRef.current.removeEventListener('wheel', handleWheel)
+            scrollableRef.current?.removeEventListener('wheel', handleWheel)
             window.removeEventListener('resize', updatePopoverPosition)
         }
     }, [open, position, alignment, isBackdropMounted])
@@ -181,5 +185,6 @@ export const usePopover = ({
         },
         scrollableRef,
         closePopover,
+        openPopover,
     }
 }
diff --git a/src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx b/src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx
index aad328598..00e25303b 100644
--- a/src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx
+++ b/src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx
@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 
-import { KeyboardEvent, useEffect, useRef, useState } from 'react'
+import { KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useRegisterShortcut } from '@Common/Hooks'
 
 import { ActionMenu, ActionMenuItemType, ActionMenuProps } from '../ActionMenu'
 import { Icon } from '../Icon'
+import { Popover, usePopover } from '../Popover'
 import FilterSelectPicker from './FilterSelectPicker'
-import { GroupedFilterSelectPickerProps } from './type'
+import { FilterSelectPickerMapSelectPickerVariant, GroupedFilterSelectPickerProps } from './type'
 
 import './selectPicker.scss'
 
@@ -41,6 +42,29 @@ export const GroupedFilterSelectPicker = <T extends string | number>({
     // HOOKS
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
 
+    const selectedItemConfig = selectedActionMenuItem ? filterSelectPickerPropsMap[selectedActionMenuItem] : null
+    const isPopOverVariant = selectedItemConfig?.variant === 'popOver'
+
+    const {
+        open: isFilterPopoverOpen,
+        triggerProps: filterPopoverTriggerProps,
+        overlayProps: filterPopoverOverlayProps,
+        popoverProps: filterPopoverContentProps,
+        openPopover: openFilterPopover,
+        closePopover: closeFilterPopover,
+        scrollableRef: filterPopoverScrollableRef,
+    } = usePopover({
+        id: `${id}-grouped-filter-popover`,
+        position: isPopOverVariant ? selectedItemConfig.popoverConfig?.position : undefined,
+        alignment: isPopOverVariant ? selectedItemConfig.popoverConfig?.alignment : undefined,
+        width: isPopOverVariant ? selectedItemConfig.popoverConfig?.width : undefined,
+        onOpen: (open) => {
+            if (!open) {
+                setSelectedActionMenuItem(null)
+            }
+        },
+    })
+
     useEffect(() => {
         const shortcutCallback = () => {
             triggerButtonRef.current?.click()
@@ -60,6 +84,12 @@ export const GroupedFilterSelectPicker = <T extends string | number>({
         }
     }, [selectedActionMenuItem])
 
+    useEffect(() => {
+        if (selectedActionMenuItem && isPopOverVariant) {
+            openFilterPopover()
+        }
+    }, [selectedActionMenuItem])
+
     // HANDLERS
     const handleMenuItemClick: ActionMenuProps<T>['onClick'] = (item) => {
         setSelectedActionMenuItem(item.id)
@@ -76,18 +106,8 @@ export const GroupedFilterSelectPicker = <T extends string | number>({
         }
     }
 
-    return selectedActionMenuItem ? (
-        <div className="grouped-filter-select-picker w-200">
-            <FilterSelectPicker
-                {...filterSelectPickerPropsMap[selectedActionMenuItem]}
-                menuIsOpen
-                onMenuClose={handleMenuClose}
-                onKeyDown={handleKeyDown}
-                autoFocus
-            />
-        </div>
-    ) : (
-        <ActionMenu {...restProps} id={id} isSearchable onClick={handleMenuItemClick}>
+    const filterTriggerButton = useMemo(
+        () => (
             <button
                 type="button"
                 ref={triggerButtonRef}
@@ -98,6 +118,51 @@ export const GroupedFilterSelectPicker = <T extends string | number>({
                 <span className="fs-12 lh-20 fw-6 cn-9">Filter</span>
                 <kbd className="icon-dim-20 flex bg__primary border__primary br-2 shadow__key fs-12 lh-20 cn-7">f</kbd>
             </button>
-        </ActionMenu>
+        ),
+        [isFilterApplied],
     )
+
+    const renderContent = () => {
+        if (selectedActionMenuItem && isPopOverVariant) {
+            return (
+                <Popover
+                    open={isFilterPopoverOpen}
+                    triggerProps={filterPopoverTriggerProps}
+                    overlayProps={filterPopoverOverlayProps}
+                    popoverProps={{ ...filterPopoverContentProps, role: 'dialog' }}
+                    buttonProps={null}
+                    triggerElement={filterTriggerButton}
+                >
+                    {selectedItemConfig.component(closeFilterPopover, filterPopoverScrollableRef)}
+                </Popover>
+            )
+        }
+
+        if (selectedActionMenuItem) {
+            const config = filterSelectPickerPropsMap[selectedActionMenuItem]
+            if (config.variant !== 'popOver') {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { variant: _variant, ...filterProps } = config as FilterSelectPickerMapSelectPickerVariant
+                return (
+                    <div className="grouped-filter-select-picker w-200">
+                        <FilterSelectPicker
+                            {...filterProps}
+                            menuIsOpen
+                            onMenuClose={handleMenuClose}
+                            onKeyDown={handleKeyDown}
+                            autoFocus
+                        />
+                    </div>
+                )
+            }
+        }
+
+        return (
+            <ActionMenu {...restProps} id={id} isSearchable onClick={handleMenuItemClick}>
+                {filterTriggerButton}
+            </ActionMenu>
+        )
+    }
+
+    return <div>{renderContent()}</div>
 }
diff --git a/src/Shared/Components/SelectPicker/type.ts b/src/Shared/Components/SelectPicker/type.ts
index e09ce9ee4..f5fac54c6 100644
--- a/src/Shared/Components/SelectPicker/type.ts
+++ b/src/Shared/Components/SelectPicker/type.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { MutableRefObject, ReactElement, ReactNode } from 'react'
+import { LegacyRef, MutableRefObject, ReactElement, ReactNode } from 'react'
 import { GroupBase, GroupHeadingProps, Props as ReactSelectProps, SelectInstance } from 'react-select'
 // This import allows to extend the base interface in react-select module via module augmentation
 import type {} from 'react-select/base'
@@ -29,6 +29,7 @@ import { ComponentSizeType } from '@Shared/constants'
 import { ActionMenuProps } from '../ActionMenu'
 import { ButtonComponentType, ButtonProps, ButtonVariantType } from '../Button'
 import { FormFieldWrapperProps } from '../FormFieldWrapper/types'
+import { UsePopoverProps } from '../Popover'
 
 export interface SelectPickerOptionType<OptionValue = string | number, OptionLabel = ReactNode>
     extends OptionType<OptionValue, OptionLabel> {
@@ -373,14 +374,32 @@ export type SelectPickerTextAreaProps = Omit<
 > &
     Pick<ResizableTagTextAreaProps, 'maxHeight' | 'minHeight' | 'refVar' | 'dependentRefs'>
 
+export type FilterSelectPickerMapSelectPickerVariant = {
+    variant?: 'selectPicker'
+} & Omit<FilterSelectPickerProps, 'autoFocus' | 'menuIsOpen' | 'onMenuClose' | 'onKeyDown' | 'selectRef'>
+
+type FilterSelectPickerMapPopOverVariant = {
+    variant: 'popOver'
+    /**
+     * Component rendered inside the Popover.
+     * Receives `closePopover` as a prop to allow programmatic closing.
+     */
+    component: (closePopover: () => void, scrollableRef: MutableRefObject<any> | LegacyRef<any>) => ReactElement
+    /**
+     * Optional positioning config forwarded to usePopover
+     */
+    popoverConfig?: Pick<UsePopoverProps, 'position' | 'alignment' | 'width'>
+}
+
+export type GroupedFilterSelectPickerMapValue =
+    | FilterSelectPickerMapSelectPickerVariant
+    | FilterSelectPickerMapPopOverVariant
+
 export interface GroupedFilterSelectPickerProps<T extends string | number = string | number>
     extends Omit<
         ActionMenuProps<T>,
         'onClick' | 'disableDescriptionEllipsis' | 'children' | 'buttonProps' | 'isSearchable'
     > {
     isFilterApplied?: boolean
-    filterSelectPickerPropsMap: Record<
-        T,
-        Omit<FilterSelectPickerProps, 'autoFocus' | 'menuIsOpen' | 'onMenuClose' | 'onKeyDown' | 'selectRef'>
-    >
+    filterSelectPickerPropsMap: Record<T, GroupedFilterSelectPickerMapValue>
 }
diff --git a/src/Shared/Components/Table/InternalTable.tsx b/src/Shared/Components/Table/InternalTable.tsx
index b35cd5297..bae8902a5 100644
--- a/src/Shared/Components/Table/InternalTable.tsx
+++ b/src/Shared/Components/Table/InternalTable.tsx
@@ -201,9 +201,8 @@ const InternalTable = <
                 <GenericFilterEmptyState
                     {...emptyStateConfig.noRowsForFilterConfig}
                     handleClearFilters={
-                        emptyStateConfig.noRowsForFilterConfig.handleClearFilters !== undefined
-                            ? emptyStateConfig.noRowsForFilterConfig.handleClearFilters
-                            : (userGivenUrlClearFilters ?? clearFilters)
+                        emptyStateConfig.noRowsForFilterConfig?.handleClearFilters ||
+                        (userGivenUrlClearFilters ?? clearFilters)
                     }
                 />
             ) : (

From 710a71fa7a47fda8a1a15f4456371e1e14b038a5 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Wed, 18 Mar 2026 15:32:46 +0530
Subject: [PATCH 2/4] chore: update version from 1.23.3-alpha-2 to
 1.23.3-beta-4 in package.json and package-lock.json

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eb5245bdb..ffce5cefa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.23.3-alpha-2",
+    "version": "1.23.3-beta-4",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.23.3-alpha-2",
+            "version": "1.23.3-beta-4",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
diff --git a/package.json b/package.json
index 0b542367f..8c4c04f4c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.23.3-alpha-2",
+    "version": "1.23.3-beta-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

From 728e797a0ab04550c726731a2ccb0f8c0732372d Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Mon, 23 Mar 2026 12:37:38 +0530
Subject: [PATCH 3/4] chore: update version to 1.23.3-beta-5 and fix popover
 variant naming in SelectPicker components

---
 package-lock.json                                         | 4 ++--
 package.json                                              | 2 +-
 .../Components/SelectPicker/GroupedFilterSelectPicker.tsx | 6 +++---
 src/Shared/Components/SelectPicker/type.ts                | 8 ++++----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ffce5cefa..21c08a317 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.23.3-beta-4",
+    "version": "1.23.3-beta-5",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.23.3-beta-4",
+            "version": "1.23.3-beta-5",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
diff --git a/package.json b/package.json
index 8c4c04f4c..20efb867f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.23.3-beta-4",
+    "version": "1.23.3-beta-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx b/src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx
index 00e25303b..715763923 100644
--- a/src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx
+++ b/src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx
@@ -43,7 +43,7 @@ export const GroupedFilterSelectPicker = <T extends string | number>({
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
 
     const selectedItemConfig = selectedActionMenuItem ? filterSelectPickerPropsMap[selectedActionMenuItem] : null
-    const isPopOverVariant = selectedItemConfig?.variant === 'popOver'
+    const isPopOverVariant = selectedItemConfig?.variant === 'popover'
 
     const {
         open: isFilterPopoverOpen,
@@ -127,7 +127,7 @@ export const GroupedFilterSelectPicker = <T extends string | number>({
             return (
                 <Popover
                     open={isFilterPopoverOpen}
-                    triggerProps={filterPopoverTriggerProps}
+                    triggerProps={{ ...filterPopoverTriggerProps, 'aria-haspopup': 'dialog' }}
                     overlayProps={filterPopoverOverlayProps}
                     popoverProps={{ ...filterPopoverContentProps, role: 'dialog' }}
                     buttonProps={null}
@@ -140,7 +140,7 @@ export const GroupedFilterSelectPicker = <T extends string | number>({
 
         if (selectedActionMenuItem) {
             const config = filterSelectPickerPropsMap[selectedActionMenuItem]
-            if (config.variant !== 'popOver') {
+            if (config.variant !== 'popover') {
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 const { variant: _variant, ...filterProps } = config as FilterSelectPickerMapSelectPickerVariant
                 return (
diff --git a/src/Shared/Components/SelectPicker/type.ts b/src/Shared/Components/SelectPicker/type.ts
index f5fac54c6..f3547722a 100644
--- a/src/Shared/Components/SelectPicker/type.ts
+++ b/src/Shared/Components/SelectPicker/type.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { LegacyRef, MutableRefObject, ReactElement, ReactNode } from 'react'
+import { MutableRefObject, ReactElement, ReactNode } from 'react'
 import { GroupBase, GroupHeadingProps, Props as ReactSelectProps, SelectInstance } from 'react-select'
 // This import allows to extend the base interface in react-select module via module augmentation
 import type {} from 'react-select/base'
@@ -29,7 +29,7 @@ import { ComponentSizeType } from '@Shared/constants'
 import { ActionMenuProps } from '../ActionMenu'
 import { ButtonComponentType, ButtonProps, ButtonVariantType } from '../Button'
 import { FormFieldWrapperProps } from '../FormFieldWrapper/types'
-import { UsePopoverProps } from '../Popover'
+import { UsePopoverProps, UsePopoverReturnType } from '../Popover'
 
 export interface SelectPickerOptionType<OptionValue = string | number, OptionLabel = ReactNode>
     extends OptionType<OptionValue, OptionLabel> {
@@ -379,12 +379,12 @@ export type FilterSelectPickerMapSelectPickerVariant = {
 } & Omit<FilterSelectPickerProps, 'autoFocus' | 'menuIsOpen' | 'onMenuClose' | 'onKeyDown' | 'selectRef'>
 
 type FilterSelectPickerMapPopOverVariant = {
-    variant: 'popOver'
+    variant: 'popover'
     /**
      * Component rendered inside the Popover.
      * Receives `closePopover` as a prop to allow programmatic closing.
      */
-    component: (closePopover: () => void, scrollableRef: MutableRefObject<any> | LegacyRef<any>) => ReactElement
+    component: (closePopover: () => void, scrollableRef: UsePopoverReturnType['scrollableRef']) => ReactElement
     /**
      * Optional positioning config forwarded to usePopover
      */

From 0daf8f0c55fe292ab5ba70ccfeecdb752d30d55f Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Tue, 24 Mar 2026 11:52:37 +0530
Subject: [PATCH 4/4] chore: update version from 1.23.3-beta-5 to 1.23.3-pre-0
 in package.json and package-lock.json

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 21c08a317..eec5236a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.23.3-beta-5",
+    "version": "1.23.3-pre-0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.23.3-beta-5",
+            "version": "1.23.3-pre-0",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
diff --git a/package.json b/package.json
index 20efb867f..2fe6b3e1a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.23.3-beta-5",
+    "version": "1.23.3-pre-0",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",