@txstate-mws/svelte-components 1.3.7 → 1.3.8

package/components/FocusLock.svelte

@@ -1,4 +1,4 @@
-<script context="module">const FocusLockStack = [];
+<script context="module">export const FocusLockStack = [];
 const waitAtick = typeof requestAnimationFrame !== 'undefined' ? resolve => requestAnimationFrame(resolve) : resolve => resolve(0);
 </script>
 
@@ -7,6 +7,13 @@ export let initialfocus = undefined;
 export let hidefocus = true;
 export let hidefocuslabel = 'focus is above modal dialog, start tabbing';
 export let escapable = true;
+/**
+ * If you expect any popup menus to be added to the body, we need to know that they
+ * are considered to be part of the focus lock, or else the modal will be dismissed
+ * when the user clicks inside
+ * use commas to include multiple selectors
+ */
+export let includeselector = undefined;
 let className = '';
 export { className as class };
 import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte';
@@ -89,7 +96,7 @@ const focusin = (e) => {
     }
 };
 const windowclick = (e) => {
-    if (state === 'active' && e.target instanceof HTMLElement && e.target.isConnected) {
+    if (state === 'active' && e.target instanceof HTMLElement && e.target.isConnected && (!includeselector || !e.target.closest(includeselector))) {
         returnfocusto = undefined;
         dispatch('escape');
     }

package/components/FocusLock.svelte.d.ts

@@ -1,4 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+export declare const FocusLockStack: {
+    pause: () => void;
+    unpause: () => void;
+}[];
 declare const __propDef: {
     props: {
         returnfocusto?: HTMLElement | null | undefined;
@@ -6,6 +10,12 @@ declare const __propDef: {
         hidefocus?: boolean;
         hidefocuslabel?: string;
         escapable?: boolean;
+        /**
+           * If you expect any popup menus to be added to the body, we need to know that they
+           * are considered to be part of the focus lock, or else the modal will be dismissed
+           * when the user clicks inside
+           * use commas to include multiple selectors
+           */ includeselector?: string | undefined;
         class?: string;
     };
     events: {

package/components/Modal.svelte

@@ -6,14 +6,23 @@ export let initialfocus = undefined;
 export let containerClass = '';
 export let opaque = false;
 export let usePortal = undefined;
+/**
+ * If you expect any popup menus to be added to the body, we need to know that they
+ * are considered to be part of the focus lock, or else the modal will be dismissed
+ * when the user clicks inside
+ * use commas to include multiple selectors
+ */
+export let includeselector = undefined;
 import { createEventDispatcher, onMount } from 'svelte';
-import FocusLock from './FocusLock.svelte';
+import FocusLock, { FocusLockStack } from './FocusLock.svelte';
 import { portal } from '../actions';
 const dispatch = createEventDispatcher();
 const endmodal = () => {
     dispatch('escape');
 };
+let stackPosition;
 onMount(() => {
+    stackPosition = FocusLockStack.length - 1;
     document.body.style.marginRight = (window.innerWidth - document.body.clientWidth) + 'px';
     document.body.style.overflow = 'hidden';
     return () => {
@@ -24,8 +33,8 @@ onMount(() => {
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div use:portal={usePortal} class="modal-backdrop" class:opaque on:mousedown|stopPropagation|preventDefault={() => escapable && endmodal()}>
-  <FocusLock class="modal-container {containerClass}" {escapable} on:escape {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus}>
+<div use:portal={usePortal} class="modal-backdrop" style:--modal-z={stackPosition * 10 + 3000} class:opaque on:mousedown|stopPropagation|preventDefault={() => escapable && endmodal()}>
+  <FocusLock class="modal-container {containerClass}" {includeselector} {escapable} on:escape {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus}>
     <slot></slot>
   </FocusLock>
 </div>
@@ -38,7 +47,7 @@ onMount(() => {
     width: 100vw;
     height: 100vh;
     background-color: var(--modal-bg, rgba(0, 0, 0, 0.7));
-    z-index: var(--modal-z, 3000);
+    z-index: var(--modal-z);
     display: flex;
     justify-content: center;
     align-items: center

package/components/Modal.svelte.d.ts

@@ -9,6 +9,12 @@ declare const __propDef: {
         containerClass?: string;
         opaque?: boolean;
         usePortal?: HTMLElement | undefined;
+        /**
+           * If you expect any popup menus to be added to the body, we need to know that they
+           * are considered to be part of the focus lock, or else the modal will be dismissed
+           * when the user clicks inside
+           * use commas to include multiple selectors
+           */ includeselector?: string | undefined;
     };
     events: {
         escape: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "Svelte components that are generically useful.",
   "dependencies": {
     "@txstate-mws/svelte-store": "^1.0.3",