feat: pass reason for closing to the emitted event

[JohnCampionJr]

Can we please get this? It's a pretty common use case at this point to not allow clicking outside the dialog to close it. I think @mgambill's suggestion is the best way to implement it with non-breaking API and no extra properties or anything needed.

What if we just pass information as part of the emit event then the user will have information to determine if they want to close or not. @adamwathan

api.close( reason ) // 'backdrop' | 'key' | 'trap' | 'other')

function onClose(e) {
   if (e.reason === 'backdrop') // update ref or not 
}

Originally posted by @mgambill in #1968 (comment)

[RobinMalfait]

Hey!

Thanks for this suggestion. Right now passing in a reason would result in a breaking change for components such as the Dialog component. This is because the onClose is called with false. This is done so that you can use this short convenient way of closing a dialog:

let [isOpen, setIsOpen] = useState(false)
<Dialog open={isOpen} onClose={setIsOpen} />

We've talked about this exact feature internally. One way of solving this is by introducing another method like onDismiss that does get more information about why something is dismissed.

Note: you have to be careful from an accessibility perspective that you don't change the behaviour without very good reason. For example, a sighted user can click outside, somebody using Assistive Technology will likely press esc instead. Changing the behaviour between those interactions will degrade user experience.

That said, I believe @thecrypticace is potentially going to look into this this week.

[JohnCampionJr]

I understand the ESC situation. It's more about the accidental clicks outside of an important dialog. It's much harder to accidentally hit ESC.

I appreciate any solution you can provide 😀

[kulapoo]

yo @JohnCampionJr ,

Im not sure if this will work for u, please check if u find any cons. That will help me as well or issue that I might encounter in doing this

what I did is something like this

import { Dialog as Dialog Base } from ''

// using styledComponent in my case or can use any class manipulation
const DialogRoot = styled(DialogBase)`
  z-index: 99999;
  position: relative
  display: ${props => props.isOpen ? 'block' : 'none'};

`
function CustomDialog(props) {
   const {
     open,
     onClose,
     ...otherProps
   } = props
   
   const closeWorkAround = useCallback(() => {}, []) // do nothing
   return (
     <DialogRoot 
       static // this is will do the trick
       isOpen={open}
       open={open}
       onClose={closeWorkAround}
     >
       
        // rest of the requiredComponents
     </DialogRoot>
   )
}
`

sample codesandbox