hotfix: action overlay not closing bug

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 0.0.22
+
+### Patch Changes
+
+- Fixed overlay not closing issue by forcing hover state to 'false' when exiting the delete dialog
+
 ## 0.0.21
 
 ### Patch Changes

packages/components/modules/__shared__/ActionsOverlay/__storybook__/stories.tsx

@@ -23,7 +23,7 @@ export const DefaultActionsOverlay: Story = {
     offsetRight: 0,
     offsetTop: 0,
     ContainerProps: {
-      sx: { width: '100px' },
+      sx: { maxWidth: 'max-content' },
     },
     actions: [
       {

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

@@ -11,7 +11,7 @@ import { LoadingButton } from '@mui/lab'
 import { Box, Divider, Typography } from '@mui/material'
 import { LongPressCallbackReason, useLongPress } from 'use-long-press'
 
-import { ActionOverlayContainer, IconButtonContentContainer } from './styled'
+import { ActionOverlayTooltipContainer, IconButtonContentContainer } from './styled'
 import { ActionOverlayProps, LongPressHandler } from './types'
 
 const ActionsOverlay = forwardRef<HTMLDivElement, ActionOverlayProps>(
@@ -67,13 +67,19 @@ const ActionsOverlay = forwardRef<HTMLDivElement, ActionOverlayProps>(
       setIsDeleteDialogOpen(true)
     }
 
+    const handleDeleteDialogClose = () => {
+      setIsDeleteDialogOpen(false)
+      setIsHoveringItem(false)
+    }
+
     const deviceHasHover =
       typeof window !== 'undefined' && window.matchMedia('(hover: hover)').matches
 
     const onDeleteItemClick = () => {
       setIsDeleteDialogOpen(false)
       handleDeleteItem?.()
       handleLongPressItemOptionsClose()
+      setIsHoveringItem(false)
     }
 
     const renderDeleteDialog = () => (
@@ -90,7 +96,7 @@ const ActionsOverlay = forwardRef<HTMLDivElement, ActionOverlayProps>(
             Delete
           </LoadingButton>
         }
-        onClose={() => setIsDeleteDialogOpen(false)}
+        onClose={handleDeleteDialogClose}
         open={isDeleteDialogOpen}
       />
     )
@@ -165,7 +171,7 @@ const ActionsOverlay = forwardRef<HTMLDivElement, ActionOverlayProps>(
 
       if (deviceHasHover && isHoveringItem) {
         return (
-          <ActionOverlayContainer
+          <ActionOverlayTooltipContainer
             offsetRight={offsetRight}
             offsetTop={offsetTop}
             aria-label="actions overlay"
@@ -200,7 +206,7 @@ const ActionsOverlay = forwardRef<HTMLDivElement, ActionOverlayProps>(
                 </IconButton>
               )
             })}
-          </ActionOverlayContainer>
+          </ActionOverlayTooltipContainer>
         )
       }
       return <div />
@@ -211,9 +217,9 @@ const ActionsOverlay = forwardRef<HTMLDivElement, ActionOverlayProps>(
         ref={ref}
         onMouseEnter={() => setIsHoveringItem(true)}
         onMouseLeave={() => setIsHoveringItem(false)}
+        position="relative"
         {...longPressHandlers()}
         {...ContainerProps}
-        sx={{ position: 'relative', maxWidth: 'max-content' }}
       >
         {renderDeleteDialog()}
         {renderActionsOverlay()}

packages/components/modules/__shared__/ActionsOverlay/styled.tsx

@@ -1,9 +1,9 @@
 import { Box } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
-import { ActionOverlayContainerProps } from './types'
+import { ActionOverlayTooltipContainerProps } from './types'
 
-export const ActionOverlayContainer = styled(Box)<ActionOverlayContainerProps>(
+export const ActionOverlayTooltipContainer = styled(Box)<ActionOverlayTooltipContainerProps>(
   ({ theme, offsetTop = 0, offsetRight = 0 }) => ({
     backgroundColor: theme.palette.background.default,
     border: `1px solid ${theme.palette.divider}`,
@@ -16,7 +16,7 @@ export const ActionOverlayContainer = styled(Box)<ActionOverlayContainerProps>(
     'aria-label': 'Action options',
     right: 12 - offsetRight,
     top: -12 - offsetTop,
-    zIndex: theme.zIndex.tooltip,
+    zIndex: theme.zIndex.drawer, // zIndex.modal is 1300, so using zIndex.drawer (1200) instead of zIndex.tooltip (1500)
     transition: theme.transitions.create(['opacity', 'visibility'], {
       duration: theme.transitions.duration.shorter,
       easing: theme.transitions.easing.easeInOut,

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

@@ -18,18 +18,18 @@ export type LongPressHandler = {
   shouldOpenItemOptions: boolean
 }
 
-export interface ActionOverlayProps extends ActionOverlayContainerProps {
+export interface ActionOverlayProps extends ActionOverlayTooltipContainerProps {
   actions: OverlayAction[]
   title: string
-  enableDelete?: boolean
+  enableDelete?: boolean | null
   isDeletingItem?: boolean
   handleDeleteItem?: () => void
   ContainerProps?: Partial<BoxProps>
   SwipeableDrawer?: FC<SwipeableDrawerProps>
   SwipeableDrawerProps?: Partial<SwipeableDrawerProps>
 }
 
-export interface ActionOverlayContainerProps extends BoxProps {
+export interface ActionOverlayTooltipContainerProps extends BoxProps {
   offsetTop?: number
   offsetRight?: number
 }

packages/components/modules/comments/CommentItem/index.tsx

@@ -32,7 +32,7 @@ const CommentItem: FC<CommentItemProps> = ({
   CommentUpdateProps,
   CommentsRepliesProps,
   ActionOverlayProps,
-  enableDelete = true,
+  enableDelete = false,
   Timestamp = DefaultTimestamp,
   CommentUpdate = DefaultCommentUpdate,
   CommentReplyButton = DefaultCommentReplyButton,
@@ -131,7 +131,7 @@ const CommentItem: FC<CommentItemProps> = ({
       <CommentContainerWrapper currentThreadDepth={currentThreadDepth}>
         <ActionsOverlay
           actions={actions}
-          enableDelete={enableDelete && !!comment?.canDelete}
+          enableDelete={enableDelete && comment.canDelete}
           handleDeleteItem={handleDeleteComment}
           isDeletingItem={isDeletingComment}
           title="Comment"

packages/components/modules/comments/Comments/__tests__/Comments.cy.tsx

@@ -144,8 +144,12 @@ describe('Comments', () => {
       })
     cy.findByText('This is not a pinned comment anymore.').should('exist')
 
+    cy.step('Cannot delete a comment')
+    cy.findByText('This is a regular comment.').click()
+    cy.findAllByRole('button', { name: /delete item/i }).should('not.exist')
+
     cy.step('Delete a comment')
-    cy.findByText('This is another reply').click()
+    cy.findByText('This is not a pinned comment anymore.').click()
     cy.findAllByRole('button', { name: /delete item/i })
       .last()
       .click()
@@ -154,9 +158,10 @@ describe('Comments', () => {
     cy.step('Cancel comment deletion')
     cy.findByRole('button', { name: /cancel/i }).click()
     cy.findByText('Delete Comment?').should('not.exist')
-    cy.findByText('This is another reply').should('exist')
+    cy.findByText('This is not a pinned comment anymore.').should('exist')
 
     cy.step('Confirm comment deletion')
+    cy.findByText('This is not a pinned comment anymore.').click()
     cy.findAllByRole('button', { name: /delete item/i })
       .last()
       .click()
@@ -165,7 +170,7 @@ describe('Comments', () => {
       .then(() => {
         resolveMostRecentOperation({ data: commentDeleteMockData })
       })
-    cy.findByText('This is another reply').should('not.exist')
+    cy.findByText('This is not a pinned comment anymore.').should('not.exist')
   })
 
   it('should render more comments when the bottom is reached', () => {

packages/components/modules/comments/Comments/__tests__/__mocks__/requests.ts

@@ -230,7 +230,7 @@ export const commentEditMockData = {
 export const commentDeleteMockData = {
   data: {
     commentDelete: {
-      deletedId: 'new-reply-3',
+      deletedId: 'comment-1',
       target: {
         __typename: 'Page',
         id: 'page-id',

packages/components/modules/comments/CommentsList/index.tsx

@@ -39,6 +39,7 @@ const CommentsList: FC<CommentsListProps> = ({
         currentThreadDepth={1}
         subscriptionsEnabled={subscriptionsEnabled}
         onReplyClick={onReplyClick}
+        enableDelete
         {...CommentItemProps}
       />
     )

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,