@txstate-mws/svelte-components 1.3.6 → 1.3.8

package/actions/glue.d.ts

@@ -1,16 +1,17 @@
 import type { SettableSubject } from '@txstate-mws/svelte-store';
-export declare type GlueAlignOpts = 'auto' | 'bottomleft' | 'bottomright' | 'topleft' | 'topright';
+export type GlueAlignOpts = 'auto' | 'bottomleft' | 'bottomright' | 'topleft' | 'topright';
 export interface GlueArgs<T extends GlueAlignStore = GlueAlignStore> {
     target: HTMLElement;
     align?: GlueAlignOpts;
     cover?: boolean;
+    adjustparentheight?: boolean;
     store?: SettableSubject<T>;
 }
 export interface GlueAlignStore {
     valign: 'bottom' | 'top';
     halign: 'left' | 'right';
 }
-export declare function glue(el: HTMLElement, { target, align, cover, store }: GlueArgs): {
+export declare function glue(el: HTMLElement, { target, align, cover, adjustparentheight, store }: GlueArgs): {
     update({ target: utarget, align: ualign, cover: ucover, store: ustore }: GlueArgs): void;
-    destroy: () => void;
+    destroy(): void;
 };

package/actions/glue.js

@@ -1,12 +1,14 @@
 import { sharedOffsetParent, targetOffset, watchForPositionChangeInContainer } from '../util/index.js';
 let setBodyRelative = false;
-export function glue(el, { target, align = 'auto', cover = false, store }) {
+export function glue(el, { target, align = 'auto', cover = false, adjustparentheight = false, store }) {
     if (!setBodyRelative) {
         setBodyRelative = true;
         document.body.style.position = 'relative';
     }
     let halign;
     let valign;
+    const parent = el.offsetParent;
+    const formerMinHeight = parent.style.minHeight;
     let sharedOffset = sharedOffsetParent(el, target);
     function reposition(offset) {
         if (!target || !sharedOffset || !(el.offsetParent instanceof HTMLElement))
@@ -19,6 +21,18 @@ export function glue(el, { target, align = 'auto', cover = false, store }) {
             const topbottom = window.innerHeight - rect.bottom > rect.top ? 'bottom' : 'top';
             autoalign = topbottom + leftright;
         }
+        function adjustParentHeight() {
+            if (!adjustparentheight)
+                return;
+            if (parent.style.overflowY === 'auto')
+                return;
+            const minHeight = el.offsetTop + el.offsetHeight;
+            if (minHeight > parent.clientHeight) {
+                requestAnimationFrame(() => {
+                    parent.style.minHeight = String(minHeight) + 'px';
+                });
+            }
+        }
         const targetHeight = target.offsetHeight;
         if (autoalign === 'bottomleft') {
             requestAnimationFrame(() => {
@@ -26,6 +40,7 @@ export function glue(el, { target, align = 'auto', cover = false, store }) {
                 el.style.left = `${offset.left - parentoffset.left}px`;
                 el.style.bottom = '';
                 el.style.right = '';
+                adjustParentHeight();
             });
             valign = 'bottom';
             halign = 'left';
@@ -36,6 +51,7 @@ export function glue(el, { target, align = 'auto', cover = false, store }) {
                 el.style.left = '';
                 el.style.bottom = '';
                 el.style.right = `${offset.right - parentoffset.right}px`;
+                adjustParentHeight();
             });
             valign = 'bottom';
             halign = 'right';
@@ -46,6 +62,7 @@ export function glue(el, { target, align = 'auto', cover = false, store }) {
                 el.style.left = `${offset.left - parentoffset.left}px`;
                 el.style.bottom = `${offset.bottom + (cover ? 0 : targetHeight) - parentoffset.bottom}px`;
                 el.style.right = '';
+                adjustParentHeight();
             });
             valign = 'top';
             halign = 'left';
@@ -56,13 +73,14 @@ export function glue(el, { target, align = 'auto', cover = false, store }) {
                 el.style.left = '';
                 el.style.bottom = `${offset.bottom + (cover ? 0 : targetHeight) - parentoffset.bottom}px`;
                 el.style.right = `${offset.right - parentoffset.right}px`;
+                adjustParentHeight();
             });
             valign = 'top';
             halign = 'right';
         }
         store?.update(v => ({ ...v, valign, halign }));
     }
-    const { destroy, update } = watchForPositionChangeInContainer(target, sharedOffset, reposition);
+    const { destroy: watchDestroy, update } = watchForPositionChangeInContainer(target, sharedOffset, reposition);
     return {
         update({ target: utarget, align: ualign = 'auto', cover: ucover = false, store: ustore }) {
             align = ualign;
@@ -77,6 +95,13 @@ export function glue(el, { target, align = 'auto', cover = false, store }) {
                 update(target, sharedOffset, reposition);
             }
         },
-        destroy
+        destroy() {
+            watchDestroy();
+            if (adjustparentheight) {
+                if (formerMinHeight)
+                    parent.style.minHeight = formerMinHeight;
+                parent.style.removeProperty('min-height');
+            }
+        }
     };
 }

package/actions/passactions.d.ts

@@ -2,9 +2,9 @@ export interface SvelteActionReturnType<P> {
     update?: (newParams: P) => void;
     destroy?: () => void;
 }
-export declare type SvelteHTMLActionType<P = any> = (node: HTMLElement, params?: P) => SvelteActionReturnType<P> | undefined;
-export declare type HTMLActionEntry<P extends any = any> = SvelteHTMLActionType<P> | [SvelteHTMLActionType<P>, P];
-export declare type SvelteSVGActionType<P = any> = (node: SVGElement, params?: P) => SvelteActionReturnType<P> | undefined;
-export declare type SVGActionEntry<P extends any = any> = SvelteSVGActionType<P> | [SvelteSVGActionType<P>, P];
+export type SvelteHTMLActionType<P = any> = (node: HTMLElement, params?: P) => SvelteActionReturnType<P> | undefined;
+export type HTMLActionEntry<P extends any = any> = SvelteHTMLActionType<P> | [SvelteHTMLActionType<P>, P];
+export type SvelteSVGActionType<P = any> = (node: SVGElement, params?: P) => SvelteActionReturnType<P> | undefined;
+export type SVGActionEntry<P extends any = any> = SvelteSVGActionType<P> | [SvelteSVGActionType<P>, P];
 export declare function passActions(node: HTMLElement, actions: HTMLActionEntry[]): SvelteActionReturnType<HTMLActionEntry[]>;
 export declare function passActions(node: SVGElement, actions: SVGActionEntry[]): SvelteActionReturnType<SVGActionEntry[]>;

package/components/Card.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type CardProps = typeof __propDef.props;
-export declare type CardEvents = typeof __propDef.events;
-export declare type CardSlots = typeof __propDef.slots;
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
 export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
 }
 export {};

package/components/CardLayout.svelte.d.ts

@@ -15,9 +15,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type CardLayoutProps = typeof __propDef.props;
-export declare type CardLayoutEvents = typeof __propDef.events;
-export declare type CardLayoutSlots = typeof __propDef.slots;
+export type CardLayoutProps = typeof __propDef.props;
+export type CardLayoutEvents = typeof __propDef.events;
+export type CardLayoutSlots = typeof __propDef.slots;
 export default class CardLayout extends SvelteComponentTyped<CardLayoutProps, CardLayoutEvents, CardLayoutSlots> {
 }
 export {};

package/components/CollapsingTable.svelte.d.ts

@@ -51,9 +51,9 @@ declare const __propDef: {
         };
     };
 };
-export declare type CollapsingTableProps = typeof __propDef.props;
-export declare type CollapsingTableEvents = typeof __propDef.events;
-export declare type CollapsingTableSlots = typeof __propDef.slots;
+export type CollapsingTableProps = typeof __propDef.props;
+export type CollapsingTableEvents = typeof __propDef.events;
+export type CollapsingTableSlots = typeof __propDef.slots;
 export default class CollapsingTable extends SvelteComponentTyped<CollapsingTableProps, CollapsingTableEvents, CollapsingTableSlots> {
 }
 export {};

package/components/ConditionalWrapper.svelte.d.ts

@@ -15,9 +15,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ConditionalWrapperProps = typeof __propDef.props;
-export declare type ConditionalWrapperEvents = typeof __propDef.events;
-export declare type ConditionalWrapperSlots = typeof __propDef.slots;
+export type ConditionalWrapperProps = typeof __propDef.props;
+export type ConditionalWrapperEvents = typeof __propDef.events;
+export type ConditionalWrapperSlots = typeof __propDef.slots;
 export default class ConditionalWrapper extends SvelteComponentTyped<ConditionalWrapperProps, ConditionalWrapperEvents, ConditionalWrapperSlots> {
 }
 export {};

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: {
@@ -19,9 +29,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type FocusLockProps = typeof __propDef.props;
-export declare type FocusLockEvents = typeof __propDef.events;
-export declare type FocusLockSlots = typeof __propDef.slots;
+export type FocusLockProps = typeof __propDef.props;
+export type FocusLockEvents = typeof __propDef.events;
+export type FocusLockSlots = typeof __propDef.slots;
 export default class FocusLock extends SvelteComponentTyped<FocusLockProps, FocusLockEvents, FocusLockSlots> {
 }
 export {};

package/components/Loading.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type LoadingProps = typeof __propDef.props;
-export declare type LoadingEvents = typeof __propDef.events;
-export declare type LoadingSlots = typeof __propDef.slots;
+export type LoadingProps = typeof __propDef.props;
+export type LoadingEvents = typeof __propDef.events;
+export type LoadingSlots = typeof __propDef.slots;
 export default class Loading extends SvelteComponentTyped<LoadingProps, LoadingEvents, LoadingSlots> {
 }
 export {};

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>;
@@ -19,9 +25,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ModalProps = typeof __propDef.props;
-export declare type ModalEvents = typeof __propDef.events;
-export declare type ModalSlots = typeof __propDef.slots;
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
 export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
 }
 export {};

package/components/MultiSelect.svelte

@@ -14,6 +14,7 @@ export let menuItemHilitedClass = undefined;
 export let selected = [];
 export let placeholder = '';
 export let emptyText = undefined;
+export let usePortal = undefined;
 export let PopupMenu = DefaultPopupMenu;
 let menushown;
 let loading = false;
@@ -117,7 +118,7 @@ $: reactToHilite(hilitedpill, id);
         on:click|preventDefault|stopPropagation={() => !disabled && removeSelection(option, i, 1)} on:mousedown={e => disabled && e.preventDefault()}
         aria-selected="true">
         {option.label || option.value}
-        <ScreenReaderOnly>, click to remove</ScreenReaderOnly>
+        <ScreenReaderOnly>, click to deselect</ScreenReaderOnly>
       </li>
     {/each}
     <li class="input">
@@ -134,7 +135,7 @@ $: reactToHilite(hilitedpill, id);
   </ScreenReaderOnly>
   <slot></slot>
 </fieldset>
-<svelte:component this={PopupMenu} bind:menushown bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft' {loading} {emptyText} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={options} buttonelement={inputelement} on:change={addSelection}></svelte:component>
+<svelte:component this={PopupMenu} bind:menushown bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft' {usePortal} {loading} {emptyText} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={options} buttonelement={inputelement} on:change={addSelection}></svelte:component>
 
 <style>
   fieldset {

package/components/MultiSelect.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         }[];
         placeholder?: string;
         emptyText?: string | undefined;
+        usePortal?: HTMLElement | true | undefined;
         PopupMenu?: typeof DefaultPopupMenu;
     };
     events: {
@@ -29,9 +30,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type MultiSelectProps = typeof __propDef.props;
-export declare type MultiSelectEvents = typeof __propDef.events;
-export declare type MultiSelectSlots = typeof __propDef.slots;
+export type MultiSelectProps = typeof __propDef.props;
+export type MultiSelectEvents = typeof __propDef.events;
+export type MultiSelectSlots = typeof __propDef.slots;
 export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
 }
 export {};

package/components/PopupMenu.svelte

@@ -18,6 +18,7 @@ export let cover = false;
 export let showSelected = true;
 export let width = undefined;
 export let computedalign = new Store({ valign: 'bottom', halign: 'left' });
+export let adjustparentheight = false;
 export let loading = false;
 export let usePortal = undefined;
 export let emptyText = undefined;
@@ -195,7 +196,7 @@ $: hasSelected = showSelected && items.some(itm => itm.value === value);
 </script>
 
 {#if menushown}
-  <div use:portal={usePortal === true ? document.body : (usePortal || null)} use:glue={{ target: buttonelement, align, cover, store: computedalign }} class={menuContainerClass}>
+  <div use:portal={usePortal === true ? undefined : (usePortal || null)} use:glue={{ target: buttonelement, align, cover, adjustparentheight, store: computedalign }} class={menuContainerClass}>
     <ul bind:this={menuelement} id={menuid} role='listbox' style={width ? `width: ${width}` : ''} class={menuClass} class:hasSelected class:defaultmenu={!menuClass && !menuContainerClass} on:keydown={onkeydown}>
       {#each items as item, i (item.value)}
         {#if showSelected || item.value !== value}

package/components/PopupMenu.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         showSelected?: boolean;
         width?: string | undefined;
         computedalign?: Store<GlueAlignStore>;
+        adjustparentheight?: boolean;
         loading?: boolean;
         usePortal?: HTMLElement | true | undefined;
         emptyText?: string | undefined;
@@ -39,9 +40,9 @@ declare const __propDef: {
         noresults: {};
     };
 };
-export declare type PopupMenuProps = typeof __propDef.props;
-export declare type PopupMenuEvents = typeof __propDef.events;
-export declare type PopupMenuSlots = typeof __propDef.slots;
+export type PopupMenuProps = typeof __propDef.props;
+export type PopupMenuEvents = typeof __propDef.events;
+export type PopupMenuSlots = typeof __propDef.slots;
 export default class PopupMenu extends SvelteComponentTyped<PopupMenuProps, PopupMenuEvents, PopupMenuSlots> {
 }
 export {};

package/components/ScreenReaderOnly.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ScreenReaderOnlyProps = typeof __propDef.props;
-export declare type ScreenReaderOnlyEvents = typeof __propDef.events;
-export declare type ScreenReaderOnlySlots = typeof __propDef.slots;
+export type ScreenReaderOnlyProps = typeof __propDef.props;
+export type ScreenReaderOnlyEvents = typeof __propDef.events;
+export type ScreenReaderOnlySlots = typeof __propDef.slots;
 export default class ScreenReaderOnly extends SvelteComponentTyped<ScreenReaderOnlyProps, ScreenReaderOnlyEvents, ScreenReaderOnlySlots> {
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "description": "Svelte components that are generically useful.",
   "dependencies": {
     "@txstate-mws/svelte-store": "^1.0.3",
@@ -9,16 +9,16 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.18.1",
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
-    "@sveltejs/package": "1.0.0-next.3",
+    "@sveltejs/adapter-auto": "^1.0.0",
+    "@sveltejs/kit": "^1.0.1",
+    "@sveltejs/package": "^1.0.1",
     "@types/tabbable": "^3.1.2",
-    "eslint-config-standard-with-typescript": "^23.0.0",
+    "eslint-config-standard-with-typescript": "^24.0.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "svelte": "^3.44.0",
-    "svelte-check": "^2.2.6",
-    "svelte-preprocess": "^4.9.4",
-    "svelte2tsx": "^0.5.2",
+    "svelte-check": "^3.0.1",
+    "svelte-preprocess": "^5.0.0",
+    "svelte2tsx": "^0.6.0",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
   },

package/util/bodyoffset.d.ts

@@ -1,4 +1,4 @@
-export declare type ElementOffsets = Partial<ReturnType<typeof bodyOffset>>;
+export type ElementOffsets = Partial<ReturnType<typeof bodyOffset>>;
 export declare function bodyOffset(ele: HTMLElement): {
     right: number;
     bottom: number;