@txstate-mws/svelte-components 1.3.7 → 1.3.9

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/components/MultiSelect.svelte

@@ -11,6 +11,7 @@ export let menuContainerClass = undefined;
 export let menuClass = undefined;
 export let menuItemClass = undefined;
 export let menuItemHilitedClass = undefined;
+export let maxSelections = 0;
 export let selected = [];
 export let placeholder = '';
 export let emptyText = undefined;
@@ -29,6 +30,8 @@ const optionsCache = new Cache(async (ipt) => {
     return await getOptions(ipt);
 }, { freshseconds: 5 });
 $: selectedSet = new Set(selected.map(s => s.value));
+$: if (maxSelections > 1 && selected.length >= maxSelections && menushown)
+    menushown = false;
 let optionsTimer;
 async function reactToInput(..._) {
     loading = true;
@@ -49,7 +52,7 @@ $: availablemessage = options.filter(o => o.value).length + ' autocomplete choic
 function addSelection(e) {
     inputvalue = '';
     const opt = { ...e.detail, label: e.detail.label || e.detail.value };
-    selected = [...selected, opt];
+    selected = maxSelections === 1 ? [opt] : [...selected, opt];
     popupvalue = undefined;
     dispatch('change', selected);
 }
@@ -90,6 +93,9 @@ function inputkeydown(e) {
             e.preventDefault();
         }
     }
+    else if (e.key !== 'Tab' && maxSelections > 1 && selected.length >= maxSelections) {
+        e.preventDefault();
+    }
 }
 async function inputfocus() {
     reactToInput();
@@ -130,7 +136,7 @@ $: reactToHilite(hilitedpill, id);
     </li>
   </ul>
   <ScreenReaderOnly id={descriptionid} arialive="assertive">
-    <span>{selected.length ? selected.length + ' selected' : 'select multiple, none selected'}, up down to choose, left right to hilite existing choices</span>
+    <span>{selected.length ? selected.length + ' selected' : 'none selected'}, select {maxSelections ? 'up to ' + maxSelections : 'multiple'}, up down to choose, left right to hilite existing choices</span>
     {#if menushown}<span>{availablemessage}, touch users explore to find autocomplete menu</span>{/if}
   </ScreenReaderOnly>
   <slot></slot>

package/components/MultiSelect.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         menuClass?: string | undefined;
         menuItemClass?: string | undefined;
         menuItemHilitedClass?: string | undefined;
+        maxSelections?: number;
         selected?: {
             value: string;
             label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "Svelte components that are generically useful.",
   "dependencies": {
     "@txstate-mws/svelte-store": "^1.0.3",
@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.18.1",
-    "@sveltejs/adapter-auto": "^1.0.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.0.1",
     "@sveltejs/package": "^1.0.1",
     "@types/tabbable": "^3.1.2",