Modal hide should call the provided on:close handler

[danielo515]

Summary

Hello, thank you for this fantastic port to svelte.
I think the Modal component needs more flexibility for closing. It seems the only way right now is to provide a mutable variable that the modal can toggle.
There are situations where, the state of the modal is not directly binded to a simple boolean, but it is a derived value from some store or something like that.

Basic example

I have a modal that shows the currently selected "item", which is only open if such item is not null. There is no boolean to directly bind to (nor I want to have a separate boolean just for opening closing the modal). I tried binding a function to the on:close event, but it seems that your component does not call it for closing, just calls it's internal hide method that toggles (or tries to) the boolean.

Motivation

I want finer grained control over the modal open/close state

[kylehqcom]

I ended up using the raw formatted/styled html and adding my own bindings. I needed to handle on:submit for an embedded form and binding on the close & key event of "Escape" is all pretty trivial. I do think that on:close and on:cancel events should be invoked however by the lib 👍

[kylehqcom]

Addendum/FYI's

/**
 * Usage:
 * 
<script>
import { clickOutsideAction } from "$lib/ui/clickOutside";
let hidden = false;
function handleClickOutside() {
  hidden = !hidden;
}
</script>

<div
  class="modal"
  use:clickOutsideAction
  on:clickoutside={handleClickOutside}
/>

<div
  class="modal"
  use:clickOutsideAction={handleClickOutside}
/>
 */
import type { ActionReturn } from 'svelte/action';

interface Attributes {
	'on:clickoutside'?: (e: CustomEvent<void>) => void;
}

type Callback = () => unknown;

export function clickOutsideAction(
	node: HTMLElement,
	callback?: Callback
): ActionReturn<{}, Attributes> {
	const handleClick = (event: Event) => {
		if (event.target !== null && !node.contains(event.target as Node)) {
			node.dispatchEvent(new CustomEvent('clickoutside'));
			callback?.();
		}
	};
	document.addEventListener('click', handleClick, true);
	return {
		destroy() {
			document.removeEventListener('click', handleClick, true);
		}
	};
}

Cribbed from https://github.com/ankurrsinghal/svelte-legos/blob/e6c031fd17a9e2f356b794eeea07d7fff3b91a2c/src/lib/actions/clickOutsideAction/index.ts#L10

[jsqrt]

@danielo515 the current behavior is really unintuitive.

What helped me was this implementation:

<script lang="ts">

const handleShow = ({ detail }: { detail: boolean }) => {
	isOpen = detail;

	if (!isOpen) {
		onClickOutside?.();
	}
};
</script>

<Popover on:show={handleShow}>
...
</Popover>