{
if (open) {
if (e.key === "Escape") {
open = false;
} else if (e.key === "Tab") {
// taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
const selectorTabbable = `
a[href], area[href], input:not([disabled]):not([tabindex='-1']),
button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
textarea:not([disabled]):not([tabindex='-1']),
iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
`;
const tabbable = Array.from(ref.querySelectorAll(selectorTabbable));
let index = tabbable.indexOf(document.activeElement);
if (index === -1 && e.shiftKey) index = 0;
index += tabbable.length + (e.shiftKey ? -1 : 1);
index %= tabbable.length;
tabbable[index].focus();
e.preventDefault();
}
}
}}
on:click
on:click={() => {
if (!didClickInnerModal && !preventCloseOnClickOutside) open = false;
didClickInnerModal = false;
}}
on:mouseover
on:mouseenter
on:mouseleave
on:transitionend={({ propertyName, currentTarget }) => {
if (propertyName === "transform") {
dispatch("transitionend", { open });
}
if (didOpen) {
focus(currentTarget);
didOpen = false;
}
}}
>
{
didClickInnerModal = true;
}}
>