[UXPT-3056] Add props for onBeforeOpen and onBeforeClose to Popover (#…

…1316)

* feat(UXPT-3056): Added onBeforeOpen and onBeforeClose function to popOver

* feat(UXPT-3056): Updated unit test for new props

* feat(UXPT-3056): Added event value

* feat(UXPT-3056): Fixed build issue

* feat(UXPT-3056): Added change file

common/changes/pcln-popover/feature-UXPT-3056-Add-props-to-popover_2023-07-04-18-11.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-popover",
+      "comment": "Added onBeforeOpen and onBeforeClose Props",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-popover"
+}

packages/popover/src/Popover/Popover.jsx

@@ -17,6 +17,8 @@ function Popover({
   placement,
   onOpen,
   onClose,
+  onBeforeOpen,
+  onBeforeClose,
   ...props
 }) {
   const {
@@ -30,7 +32,16 @@ function Popover({
     getReferenceProps,
     handleClose,
     handleToggle,
-  } = usePopover({ openOnFocus, openOnHover, openOnMount, placement, onClose, onOpen })
+  } = usePopover({
+    openOnFocus,
+    openOnHover,
+    openOnMount,
+    placement,
+    onOpen,
+    onBeforeOpen,
+    onClose,
+    onBeforeClose,
+  })
 
   return (
     <>
@@ -87,6 +98,8 @@ Popover.propTypes = {
   display: PropTypes.string,
   toggleIsOpenOnClick: PropTypes.bool,
   stopPropagation: PropTypes.bool,
+  onBeforeOpen: PropTypes.func,
+  onBeforeClose: PropTypes.func,
 }
 
 Popover.defaultProps = {

packages/popover/src/Popover/Popover.spec.js

@@ -1,6 +1,6 @@
-import React from 'react'
-import { render, fireEvent, screen } from 'testing-library'
 import { Box, Button, Text, ThemeProvider } from 'pcln-design-system'
+import React from 'react'
+import { fireEvent, render, screen } from 'testing-library'
 
 import Popover from './Popover'
 
@@ -131,37 +131,55 @@ describe('Popover', () => {
       expect(getByText('Hello there!')).toBeTruthy()
     })
 
-    it('onOpen event', () => {
-      const mockOnOpen = jest.fn()
+    it('onBeforeOpen and onOpen event', () => {
+      const callLog = []
+      const mockOnBeforeOpen = jest.fn(() => {
+        callLog.push('mockOnBeforeOpen')
+      })
+      const mockOnOpen = jest.fn(() => {
+        callLog.push('mockOnOpen')
+      })
       const { getByText } = render(
-        <Popover {...popoverProps} onOpen={mockOnOpen}>
+        <Popover {...popoverProps} onBeforeOpen={mockOnBeforeOpen} onOpen={mockOnOpen}>
           <button>{triggerButtonText}</button>
         </Popover>
       )
 
+      expect(mockOnBeforeOpen).toHaveBeenCalledTimes(0)
       expect(mockOnOpen).toHaveBeenCalledTimes(0)
       fireEvent.click(getByText(triggerButtonText))
+      expect(mockOnBeforeOpen).toHaveBeenCalledTimes(1)
       expect(mockOnOpen).toHaveBeenCalledTimes(1)
+      expect(callLog).toMatchObject(['mockOnBeforeOpen', 'mockOnOpen'])
       expect(mockOnOpen).toHaveBeenCalledWith(expect.objectContaining({ type: 'click' }))
     })
 
-    it('onClose event', async () => {
-      const mockOnClose = jest.fn()
+    it('onBeforeClose and onClose event', async () => {
+      const callLog = []
+      const mockOnBeforeClose = jest.fn(() => {
+        callLog.push('mockOnBeforeClose')
+      })
+      const mockOnClose = jest.fn(() => {
+        callLog.push('mockOnClose')
+      })
       const { getByText } = render(
-        <Popover {...popoverProps} onClose={mockOnClose}>
+        <Popover {...popoverProps} onBeforeClose={mockOnBeforeClose} onClose={mockOnClose}>
           <button>{triggerButtonText}</button>
         </Popover>
       )
 
       fireEvent.click(getByText(triggerButtonText))
+      expect(mockOnBeforeClose).toHaveBeenCalledTimes(0)
       expect(mockOnClose).toHaveBeenCalledTimes(0)
       const dialog = await screen.findByRole('dialog')
       fireEvent.keyUp(dialog, {
         key: 'Escape',
         keyCode: 27,
         which: 27,
       })
+      expect(mockOnBeforeClose).toHaveBeenCalledTimes(1)
       expect(mockOnClose).toHaveBeenCalledTimes(1)
+      expect(callLog).toMatchObject(['mockOnBeforeClose', 'mockOnClose'])
       expect(mockOnClose).toHaveBeenCalledWith(expect.any(Object))
     })
 

packages/popover/src/usePopover/usePopover.js

@@ -1,4 +1,3 @@
-import { useRef, useState } from 'react'
 import {
   arrow,
   autoUpdate,
@@ -11,14 +10,25 @@ import {
   useHover,
   useInteractions,
 } from '@floating-ui/react-dom-interactions'
+import { useRef, useState } from 'react'
 import getPopoverStyles from '../getPopoverStyles'
 
-function usePopover({ openOnFocus, openOnHover, openOnMount, placement, onClose, onOpen }) {
+function usePopover({
+  openOnFocus,
+  openOnHover,
+  openOnMount,
+  placement,
+  onClose,
+  onOpen,
+  onBeforeOpen,
+  onBeforeClose,
+}) {
   const [isOpen, setOpen] = useState(openOnMount)
 
   const handleClose = (e) => {
     setOpen(false)
-    if (onClose) onClose(e)
+    onBeforeClose?.(e)
+    onClose?.(e)
   }
 
   const handleOpen = (open) => {
@@ -27,9 +37,15 @@ function usePopover({ openOnFocus, openOnHover, openOnMount, placement, onClose,
     !open && onClose && onClose()
   }
 
-  const handleToggle = (evt) => {
+  const handleToggle = (e) => {
     setOpen((isOpen) => {
-      isOpen ? onClose?.(evt) : onOpen?.(evt)
+      if (isOpen) {
+        onBeforeClose?.(e)
+        onClose?.(e)
+      } else {
+        onBeforeOpen?.(e)
+        onOpen?.(e)
+      }
       return !isOpen
     })
   }