Merge branch 'develop' of https://github.com/devtron-labs/devtron-fe-common-lib into chore/update-vite

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.23.3-beta-11",
+    "version": "1.23.4-beta-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -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/types.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/Popover/usePopover.hook.ts

@@ -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, 'aria-haspopup': 'dialog' }}
+                    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/GroupedFilterSelectPicker.tsx

@@ -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, UsePopoverReturnType } from '../Popover'
 
 export interface SelectPickerOptionType<OptionValue = string | number, OptionLabel = ReactNode> extends OptionType<
     OptionValue,
@@ -376,13 +377,31 @@ 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: UsePopoverReturnType['scrollableRef']) => 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/SelectPicker/type.ts

@@ -153,4 +153,8 @@
         top: 0;
         position: absolute;
     }
+
+    .pagination__select-menu {
+        z-index: 1;
+    }
 }