Controlled openFocus & closeFocus props

[huntabyte]

This PR introduces two new props, openFocus, and closeFocus to a few of the builders where you might want to override how we handle focus on open and close.

They accept a FocusProp type, which looks like this:

export type FocusTarget = string | HTMLElement | SVGElement | null;
export type FocusProp = FocusTarget | ((defaultEl?: HTMLElement) => FocusTarget);

Whatever is returned from this function will be focused instead of our default behavior. If null is passed, we don't focus on anything and expect you to handle it outside of the builder altogether.

We provide the defaultEl argument as a fallback mechanism, which could be implemented like so:

const customOpenFocus: FocusProp = (defaultEl) => {
 	const customElToFocus = document.getElementById('focusMe')
	if (!customElToFocus) {
		return defaultEl
	}
	return customElToFocus
}

In this scenario, if we aren't able to select our custom element, we'll fall back to the default, ensuring we keep the a11y box checked.

The following builders have both the openFocus and closeFocus props:

• Dialog
• Popover

These builders only have the closeFocus:

• Dropdown Menu
• Menubar (createMenu returned from the Menubar)
• Context Menu

This PR also removes the need for the disableTriggerRefocus prop added to the menus in a previous PR.

[changeset-bot]

🦋 Changeset detected

Latest commit: f8f6d89

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@melt-ui/svelte	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR