@txstate-mws/svelte-components 1.3.6 → 1.3.7

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.d.ts

@@ -19,9 +19,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.d.ts

@@ -19,9 +19,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.7",
   "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;