This still feels pretty hard for me to read personally 😅 Since this is a function now, can we prefer early returns?

const onClickOutside = (event: MouseEvent | TouchEvent) => {
  if (outsideClickCloses === true) return onClose(event);
  if (outsideClickCloses === false) return undefined;
  // If outsideClickCloses is not specified, only close on clicks to the overlay mask
  if (isDefaultConfiguration && event.target === maskRef) return onClose(event);
  // Otherwise if ownFocus is false, outside clicks should not close the flyout
  return undefined;
}

I'll refactor for readability, but here's the logic:

• If ownFocus=true (default), only clicks on the mask should close the flyout, even if outsideClickCloses=true
• If ownFocus=false, the flyout will only close if outsideClickCloses=true, and in that case clicking any external element will close the flyout

If ownFocus=true (default), only clicks on the mask should close the flyout, even if outsideClickCloses=true

That's just not what the current branching is doing though?? So you'd need to change this logic if that's the behavior you want. outsideClickCloses === true will always evaluate to returning onClose(). Am I reading this the same way as you?

That's just not what the current branching is doing though??

Yep I had the conditional wrong. #5876 (comment) is correct; will push the change once we get confirmation from @cchaos

@thompsongl Nice! Definitely much easier to grok now, especially w/ comments. For the last comment/return, I might make it a bit more specific to help follow the possible branch paths:

// Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout

I also think we should be more specific about the isDefaultConfiguration mask behavior:

// The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses

It's not that the business logic/UX doesn't make sense, it's just that it's a bit tortuous so more comments should help with that (I think?)

Oh man, I remember how tricky this logic was. I'm going to repeat the logic just to ensure I understand.

• Default ownFocus = true: The overlay mask renders and the flyout will only be closed when clicking mask (or close button)
• ownFocus = false && outsideClickCloses = false: No overlay mask and can only be closed via close button (or some other in-page toggle)
• ownFocus = false && outsideClickCloses = true: Clicking anywhere outside will close flyout (does this include dragging with mouse up or does this now mean a special extra configuration?)

I feel like that's how it was before, but maybe I'm remembering another config wrong?

ownFocus = false && outsideClickCloses = true: Clicking anywhere outside will close flyout (does this include dragging with mouse up or does this now mean a special extra configuration?)

By default the close event will happen if mousedown happens outside the flyout. Consumers can change this to occur on mouseup if they have some reason to do so.
By default the close event will not happen if mousedown happens inside the flyout, even if mouseup happens outside the flyout (e.g., mousedown inside, drag outside, release. The flyout remains open)

43ce709 incorporates all suggestions in this thread

I think this name change will be super helpful for understanding

🤩 ++++++ this is great!!