refactor: ActionMenu - add generic typing for id, code optimizations

Author: RohitRaj011

src/Shared/Components/ActionMenu/ActionMenu.component.tsx

@@ -9,7 +9,7 @@ import { useActionMenu } from './useActionMenu.hook'
 
 import './actionMenu.scss'
 
-export const ActionMenu = ({
+export const ActionMenu = <T extends string | number = string | number>({
     id,
     options,
     onClick,
@@ -22,7 +22,7 @@ export const ActionMenu = ({
     children,
     onOpen,
     footerConfig,
-}: ActionMenuProps) => {
+}: ActionMenuProps<T>) => {
     // HOOKS
     const {
         open,
@@ -51,7 +51,7 @@ export const ActionMenu = ({
     // HANDLERS
     const handleOptionMouseEnter = (index: number) => () => setFocusedIndex(index)
 
-    const handleOptionOnClick = (item: ActionMenuItemType) => () => {
+    const handleOptionOnClick = (item: ActionMenuItemType<T>) => () => {
         onClick(item)
         closePopover()
     }
@@ -107,7 +107,7 @@ export const ActionMenu = ({
                                             )
 
                                             return (
-                                                <ActionMenuItem
+                                                <ActionMenuItem<T>
                                                     key={`${item.label}-${item.id}`}
                                                     item={item}
                                                     itemRef={itemsRef.current[index]}

src/Shared/Components/ActionMenu/ActionMenuItem.tsx

@@ -7,14 +7,14 @@ import { Icon } from '../Icon'
 import { getTooltipProps } from '../SelectPicker/common'
 import { ActionMenuItemProps } from './types'
 
-export const ActionMenuItem = ({
+export const ActionMenuItem = <T extends string | number>({
     item,
     itemRef,
     isFocused,
     onClick,
     onMouseEnter,
     disableDescriptionEllipsis = false,
-}: ActionMenuItemProps) => {
+}: ActionMenuItemProps<T>) => {
     const {
         id,
         description,

src/Shared/Components/ActionMenu/types.ts

@@ -32,9 +32,12 @@ type ActionMenuItemIconType = Pick<IconsProps, 'name'> & {
     color?: IconsProps['color']
 }
 
-export type ActionMenuItemType = Omit<SelectPickerOptionType, 'label' | 'value' | 'endIcon' | 'startIcon'> & {
+export type ActionMenuItemType<T extends string | number = string | number> = Omit<
+    SelectPickerOptionType,
+    'label' | 'value' | 'endIcon' | 'startIcon'
+> & {
     /** A unique identifier for the action menu item. */
-    id: string | number
+    id: T
     /** The text label for the menu item. */
     label: string
     /** Indicates whether the menu item is disabled. */
@@ -50,7 +53,7 @@ export type ActionMenuItemType = Omit<SelectPickerOptionType, 'label' | 'value'
     endIcon?: ActionMenuItemIconType
 } & ConditionalActionMenuComponentType
 
-export type ActionMenuOptionType = {
+export type ActionMenuOptionType<T extends string | number> = {
     /**
      * The label for the group of menu items. \
      * This is optional and can be used to categorize items under a specific group.
@@ -59,27 +62,30 @@ export type ActionMenuOptionType = {
     /**
      * The list of items belonging to this group.
      */
-    items: ActionMenuItemType[]
+    items: ActionMenuItemType<T>[]
 }
 
-export type UseActionMenuProps = Omit<UsePopoverProps, 'onPopoverKeyDown' | 'onTriggerKeyDown'> & {
+export type UseActionMenuProps<T extends string | number> = Omit<
+    UsePopoverProps,
+    'onPopoverKeyDown' | 'onTriggerKeyDown'
+> & {
     /**
      * The options to display in the action menu.
      */
-    options: ActionMenuOptionType[]
+    options: ActionMenuOptionType<T>[]
     /**
      * Determines whether the action menu is searchable.
      */
     isSearchable?: boolean
 }
 
-export type ActionMenuProps = UseActionMenuProps &
+export type ActionMenuProps<T extends string | number = string | number> = UseActionMenuProps<T> &
     Pick<SelectPickerProps, 'disableDescriptionEllipsis'> & {
         /**
          * Callback function triggered when an item is clicked.
          * @param item - The selected item.
          */
-        onClick: (item: ActionMenuItemType) => void
+        onClick: (item: ActionMenuItemType<T>) => void
         /**
          * Config for the footer at the bottom of action menu list. It is sticky by default
          */
@@ -102,8 +108,11 @@ export type ActionMenuProps = UseActionMenuProps &
           }
     )
 
-export type ActionMenuItemProps = Pick<ActionMenuProps, 'onClick' | 'disableDescriptionEllipsis'> & {
-    item: ActionMenuItemType
+export type ActionMenuItemProps<T extends string | number> = Pick<
+    ActionMenuProps<T>,
+    'onClick' | 'disableDescriptionEllipsis'
+> & {
+    item: ActionMenuItemType<T>
     itemRef: Ref<HTMLAnchorElement> | LegacyRef<HTMLAnchorElement | HTMLButtonElement>
     isFocused?: boolean
     onMouseEnter?: () => void

src/Shared/Components/ActionMenu/useActionMenu.hook.ts

@@ -4,15 +4,15 @@ import { usePopover, UsePopoverProps } from '../Popover'
 import { UseActionMenuProps } from './types'
 import { filterActionMenuOptions, getActionMenuFlatOptions } from './utils'
 
-export const useActionMenu = ({
+export const useActionMenu = <T extends string | number>({
     id,
     position = 'bottom',
     alignment = 'start',
     width = 'auto',
     options,
     isSearchable,
     onOpen,
-}: UseActionMenuProps) => {
+}: UseActionMenuProps<T>) => {
     // STATES
     const [focusedIndex, setFocusedIndex] = useState(-1)
     const [searchTerm, setSearchTerm] = useState('')
@@ -102,9 +102,11 @@ export const useActionMenu = ({
         onTriggerKeyDown: handleTriggerKeyDown,
     })
 
+    // CLEANING UP STATES AFTER ACTION MENU CLOSE
     useEffect(() => {
         if (!open) {
             setFocusedIndex(-1)
+            setSearchTerm('')
         }
     }, [open])
 

src/Shared/Components/ActionMenu/utils.ts

@@ -1,6 +1,6 @@
 import { UseActionMenuProps } from './types'
 
-export const getActionMenuFlatOptions = (options: UseActionMenuProps['options']) =>
+export const getActionMenuFlatOptions = <T extends string | number>(options: UseActionMenuProps<T>['options']) =>
     options.flatMap(
         (option, sectionIndex) =>
             option.items.map((groupOption, itemIndex) => ({
@@ -15,7 +15,10 @@ const normalize = (str: string) => str.toLowerCase()
 
 const fuzzyMatch = (text: string, term: string) => normalize(text).includes(term)
 
-export const filterActionMenuOptions = (options: UseActionMenuProps['options'], searchTerm: string) => {
+export const filterActionMenuOptions = <T extends string | number>(
+    options: UseActionMenuProps<T>['options'],
+    searchTerm: string,
+) => {
     if (!searchTerm) {
         return options
     }

src/Shared/Components/Popover/utils.ts

@@ -40,32 +40,27 @@ export const getPopoverPositionStyle = ({ position }: Pick<UsePopoverProps, 'pos
     }
 }
 
+const getPopoverAnimationProps = (axisKey: 'x' | 'y', axisInitialValue: number, isMiddleAlignment: boolean) =>
+    ({
+        initial: { opacity: 0, [axisKey]: axisInitialValue },
+        animate: { opacity: 1, [axisKey]: 0 },
+        exit: { opacity: 0, [axisKey]: axisInitialValue },
+        transformTemplate: (isMiddleAlignment
+            ? (params) =>
+                  axisKey === 'y' ? `translate(-50%, ${params[axisKey]})` : `translate(${params[axisKey]}, -50%,)`
+            : undefined) as HTMLMotionProps<'div'>['transformTemplate'],
+    }) satisfies HTMLMotionProps<'div'>
+
 export const getPopoverFramerProps = ({ position, alignment }: Pick<UsePopoverProps, 'position' | 'alignment'>) => {
     const isMiddleAlignment = alignment === 'middle'
 
     if (position === 'top' || position === 'bottom') {
         const initialY = position === 'bottom' ? -12 : 12
-
-        return {
-            initial: { opacity: 0, y: initialY },
-            animate: { opacity: 1, y: 0 },
-            exit: { opacity: 0, y: initialY },
-            transformTemplate: (isMiddleAlignment
-                ? ({ y }) => `translate(-50%, ${y})`
-                : undefined) as HTMLMotionProps<'div'>['transformTemplate'],
-        } satisfies HTMLMotionProps<'div'>
+        return getPopoverAnimationProps('y', initialY, isMiddleAlignment)
     }
 
     const initialX = position === 'right' ? -12 : 12
-
-    return {
-        initial: { opacity: 0, x: initialX },
-        animate: { opacity: 1, x: 0 },
-        exit: { opacity: 0, x: initialX },
-        transformTemplate: (isMiddleAlignment
-            ? ({ x }) => `translate(${x}, -50%)`
-            : undefined) as HTMLMotionProps<'div'>['transformTemplate'],
-    } satisfies HTMLMotionProps<'div'>
+    return getPopoverAnimationProps('x', initialX, isMiddleAlignment)
 }
 
 export const getPopoverActualPositionAlignment = ({