feat: add openPopover function to usePopover hook and integrate with GroupedFilterSelectPicker

Author: AbhishekA1509

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'> & {

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,
     }
 }

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>
 }

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>
 }

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)
                     }
                 />
             ) : (