BA-2111-FE-edit-existing-message

packages/components/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @baseapp-frontend/components
 
+## 0.0.52
+
+### Patch Changes
+
+- Added a popover menu for action options in the ActionsOverlay component.
+- Introduced message update functionality with edit mode.
+- Implemented hover overlay modes for enhanced action display.
+- Introduced new DefaultHoverOverlay and ThreeDotsMenuHoverOverlay components for action overlays.
+
+- Updated dependencies
+  - @baseapp-frontend/design-system@0.0.32
+
 ## 0.0.51
 
 ### Patch Changes

packages/components/__mocks__/next-font.ts

@@ -1,3 +1,4 @@
 module.exports = require('@baseapp-frontend/test/__mocks__/next-font.ts')
+export * from '@baseapp-frontend/test/__mocks__/next-font'
 
 export {}

packages/components/modules/__shared__/ActionsOverlay/DefaultHoverOverlay/index.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react'
+
+import { IconButton, TrashCanIcon } from '@baseapp-frontend/design-system'
+
+import { ActionOverlayTooltipContainer } from '../styled'
+import { DefaultHoverOverlayProps } from './types'
+
+const DefaultHoverOverlay: FC<DefaultHoverOverlayProps> = ({
+  offsetRight,
+  offsetTop,
+  enableDelete,
+  isDeletingItem,
+  handleDeleteDialogOpen,
+  actions = [],
+  handleLongPressItemOptionsClose,
+}) => (
+  <ActionOverlayTooltipContainer
+    offsetRight={offsetRight}
+    offsetTop={offsetTop}
+    aria-label="actions overlay"
+  >
+    {enableDelete && (
+      <IconButton
+        onClick={handleDeleteDialogOpen}
+        disabled={isDeletingItem}
+        aria-label="delete item"
+      >
+        <TrashCanIcon />
+      </IconButton>
+    )}
+    {actions?.map(({ label, icon, onClick, disabled, hasPermission, closeOnClick }) => {
+      if (!hasPermission) return null
+
+      const handleClick = () => {
+        onClick?.()
+        if (closeOnClick) {
+          handleLongPressItemOptionsClose()
+        }
+      }
+
+      return (
+        <IconButton key={label} onClick={handleClick} disabled={disabled} aria-label={label}>
+          {icon}
+        </IconButton>
+      )
+    })}
+  </ActionOverlayTooltipContainer>
+)
+
+export default DefaultHoverOverlay

packages/components/modules/__shared__/ActionsOverlay/DefaultHoverOverlay/types.ts

@@ -0,0 +1,10 @@
+import { ActionOverlayProps } from '../types'
+
+export interface DefaultHoverOverlayProps
+  extends Pick<
+    ActionOverlayProps,
+    'actions' | 'offsetRight' | 'offsetTop' | 'enableDelete' | 'isDeletingItem'
+  > {
+  handleDeleteDialogOpen: () => void
+  handleLongPressItemOptionsClose: () => void
+}