feat: ActionMenu - add support for trailing item - button

Author: RohitRaj011

src/Shared/Components/ActionMenu/ActionMenuItem.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'
 import { Tooltip } from '@Common/Tooltip'
 import { ComponentSizeType } from '@Shared/constants'
 
+import { Button, ButtonProps, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
 import { getTooltipProps } from '../SelectPicker/common'
 import { DTSwitch, DTSwitchProps } from '../Switch'
@@ -46,7 +47,7 @@ export const ActionMenuItem = <T extends string | number>({
         onClick(item, e)
     }
 
-    const handleSwitchChange =
+    const handleTrailingSwitchChange =
         ({ type: trailingItemType, config }: ActionMenuItemType<T>['trailingItem']): DTSwitchProps['onChange'] =>
         (e) => {
             if (trailingItemType === 'switch') {
@@ -55,6 +56,15 @@ export const ActionMenuItem = <T extends string | number>({
             }
         }
 
+    const handleTrailingButtonClick =
+        ({ type: trailingItemType, config }: ActionMenuItemType<T>['trailingItem']): ButtonProps['onClick'] =>
+        (e) => {
+            e.stopPropagation()
+            if (trailingItemType === 'button' && config.onClick) {
+                config.onClick(e)
+            }
+        }
+
     // RENDERERS
     const renderIcon = (iconProps: typeof startIcon) =>
         iconProps && (
@@ -86,7 +96,20 @@ export const ActionMenuItem = <T extends string | number>({
                 return <span className="icon-dim-20 flex px-6 bcn-1 cn-7 br-12 fs-13 lh-20 fw-6">{config.value}</span>
             case 'switch':
                 return (
-                    <DTSwitch {...config} onChange={handleSwitchChange(trailingItem)} size={ComponentSizeType.small} />
+                    <DTSwitch
+                        {...config}
+                        onChange={handleTrailingSwitchChange(trailingItem)}
+                        size={ComponentSizeType.small}
+                    />
+                )
+            case 'button':
+                return (
+                    <Button
+                        {...(config as ButtonProps)}
+                        onClick={handleTrailingButtonClick(trailingItem)}
+                        variant={ButtonVariantType.borderLess}
+                        size={ComponentSizeType.xxs}
+                    />
                 )
             default:
                 return null

src/Shared/Components/ActionMenu/types.ts

@@ -1,6 +1,9 @@
-import { LegacyRef, MouseEvent, Ref } from 'react'
+import { LegacyRef, MouseEvent, ReactElement, Ref } from 'react'
 import { LinkProps } from 'react-router-dom'
 
+import { OmitNever } from '@Shared/types'
+
+import { ButtonProps } from '../Button'
 import { IconsProps } from '../Icon'
 import { PopoverProps, UsePopoverProps } from '../Popover'
 import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker'
@@ -66,6 +69,10 @@ type TrailingItemType =
               | 'tooltipContent'
           >
       }
+    | {
+          type: 'button'
+          config: OmitNever<Omit<Extract<ButtonProps, { icon: ReactElement }>, 'size' | 'variant'>>
+      }
 
 export type ActionMenuItemType<T extends string | number = string | number> = Omit<
     SelectPickerOptionType,

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

@@ -20,7 +20,7 @@ export const useActionMenu = <T extends string | number>({
     // MEMOIZED CONSTANTS
     const filteredOptions = useMemo(
         () => (isSearchable ? filterActionMenuOptions(options, searchTerm) : options),
-        [isSearchable, JSON.stringify(options), searchTerm],
+        [isSearchable, options, searchTerm],
     )
 
     const flatOptions = useMemo(() => getActionMenuFlatOptions(filteredOptions), [filteredOptions])

src/Shared/types.ts

@@ -986,6 +986,27 @@ export type Never<T> = {
     [K in keyof T]?: never
 }
 
+/**
+ * A utility type that filters out properties from type `T` that are of type `never`. \
+ * This is useful when you want to remove properties that have been marked as `never` from a type,
+ * effectively creating a new type without those properties.
+ *
+ * @template T - The input type from which to filter out `never` properties.
+ * @example
+ * ```typescript
+ * type User = {
+ *   id: number;
+ *   name: string;
+ *   deleted: never;
+ * }
+ *
+ * type ActiveUser = OmitNever<User>; // { id: number; name: string; }
+ * ```
+ */
+export type OmitNever<T> = {
+    [K in keyof T as T[K] extends never ? never : K]: T[K]
+}
+
 export interface TargetPlatformItemDTO {
     name: string
 }