@txstate-mws/svelte-components 1.4.7 → 1.5.0

package/dist/actions/elementqueries.js

@@ -65,7 +65,7 @@ class ElementQueries {
         const m = document.location.hash.match(/^#([a-z][\w:.-]*)$/i);
         if (m) {
             const id = m[1];
-            requestAnimationFrame(() => { document.getElementById(id) || document.querySelector(`[name="${id}"]`).scrollIntoView(true); });
+            requestAnimationFrame(() => { (document.getElementById(id) || document.querySelector(`[name="${id}"]`))?.scrollIntoView(true); });
         }
     }
     fullresync() {

package/dist/actions/glue.js

@@ -1,43 +1,41 @@
-import { sharedOffsetParent, targetOffset, watchForPositionChangeInContainer } from '../util/index.js';
-let setBodyRelative = false;
+import { watchForMutations } from '../util/index.js';
+import { equal } from 'txstate-utils';
 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))
+    if (target)
+        el.style.position = 'fixed';
+    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';
+            });
+        }
+    }
+    let lastrect;
+    function reposition() {
+        const tmpRect = target.getBoundingClientRect();
+        const rect = { left: tmpRect.left, right: window.innerWidth - tmpRect.right, top: tmpRect.top, bottom: window.innerHeight - tmpRect.bottom, width: tmpRect.width, height: tmpRect.height };
+        if (equal(rect, lastrect))
             return;
         let autoalign = align;
-        const parentoffset = el.offsetParent === sharedOffset && target !== sharedOffset ? { top: 0, left: 0, bottom: 0, right: 0 } : targetOffset(el.offsetParent, sharedOffset);
         if (align === 'auto') {
-            const rect = target.getBoundingClientRect();
-            const leftright = window.innerWidth - rect.right > rect.left ? 'left' : 'right';
-            const topbottom = window.innerHeight - rect.bottom > rect.top ? 'bottom' : 'top';
+            const leftright = rect.right > rect.left ? 'left' : 'right';
+            const topbottom = 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;
+        const targetHeight = rect.height;
         if (autoalign === 'bottomleft') {
             requestAnimationFrame(() => {
-                el.style.top = `${offset.top + (cover ? 0 : targetHeight) - parentoffset.top}px`;
-                el.style.left = `${offset.left - parentoffset.left}px`;
+                el.style.top = `${rect.top + (cover ? 0 : targetHeight)}px`;
+                el.style.left = `${rect.left}px`;
                 el.style.bottom = '';
                 el.style.right = '';
                 adjustParentHeight();
@@ -47,10 +45,10 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
         }
         else if (autoalign === 'bottomright') {
             requestAnimationFrame(() => {
-                el.style.top = `${offset.top + (cover ? 0 : targetHeight) - parentoffset.top}px`;
+                el.style.top = `${rect.top + (cover ? 0 : targetHeight)}px`;
                 el.style.left = '';
                 el.style.bottom = '';
-                el.style.right = `${offset.right - parentoffset.right}px`;
+                el.style.right = `${rect.right}px`;
                 adjustParentHeight();
             });
             valign = 'bottom';
@@ -59,8 +57,8 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
         else if (autoalign === 'topleft') {
             requestAnimationFrame(() => {
                 el.style.top = '';
-                el.style.left = `${offset.left - parentoffset.left}px`;
-                el.style.bottom = `${offset.bottom + (cover ? 0 : targetHeight) - parentoffset.bottom}px`;
+                el.style.left = `${rect.left}px`;
+                el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight)}px`;
                 el.style.right = '';
                 adjustParentHeight();
             });
@@ -71,8 +69,8 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
             requestAnimationFrame(() => {
                 el.style.top = '';
                 el.style.left = '';
-                el.style.bottom = `${offset.bottom + (cover ? 0 : targetHeight) - parentoffset.bottom}px`;
-                el.style.right = `${offset.right - parentoffset.right}px`;
+                el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight)}px`;
+                el.style.right = `${rect.right}px`;
                 adjustParentHeight();
             });
             valign = 'top';
@@ -80,7 +78,8 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
         }
         store?.update(v => ({ ...v, valign, halign }));
     }
-    const { destroy: watchDestroy, update } = watchForPositionChangeInContainer(target, sharedOffset, reposition);
+    const { destroy: watchDestroy } = watchForMutations(reposition);
+    window.addEventListener('scroll', reposition);
     return {
         update({ target: utarget, align: ualign = 'auto', cover: ucover = false, store: ustore }) {
             align = ualign;
@@ -90,13 +89,16 @@ export function glue(el, { target, align = 'auto', cover = false, adjustparenthe
                 store = ustore;
             }
             if (target !== utarget) {
-                sharedOffset = sharedOffsetParent(el, utarget);
                 target = utarget;
-                update(target, sharedOffset, reposition);
+                if (!target)
+                    el.style.removeProperty('position');
+                else
+                    el.style.position = 'fixed';
             }
         },
         destroy() {
             watchDestroy();
+            window.removeEventListener('scroll', reposition);
             if (adjustparentheight) {
                 if (formerMinHeight)
                     parent.style.minHeight = formerMinHeight;

package/dist/actions/resize.d.ts

@@ -16,5 +16,5 @@ export declare class ResizeStore extends Store<ElementSize> {
 export declare function resize(el: HTMLElement, config?: ResizeConfig): {
     update(newConfig?: ResizeConfig): void;
     destroy(): void;
-};
+} | undefined;
 export {};

package/dist/components/Card.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import { type HTMLActionEntry } from '../actions';
 declare const __propDef: {
     props: {
-        className?: string;
-        use?: HTMLActionEntry[];
+        className?: string | undefined;
+        use?: HTMLActionEntry[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CardLayout.svelte

@@ -176,7 +176,7 @@ function hardrecalc() {
     triggerrecalc(layoutelement.clientWidth);
 }
 function onResize(e) {
-    triggerrecalc(e.detail.clientWidth);
+    triggerrecalc(e.detail.clientWidth ?? 0);
 }
 onMount(() => triggerrecalc(layoutelement.clientWidth));
 </script>

package/dist/components/CardLayout.svelte.d.ts

@@ -2,11 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 import { type HTMLActionEntry } from '../actions';
 declare const __propDef: {
     props: {
-        maxwidth?: number;
-        preserveorder?: boolean;
-        gutter?: number;
-        className?: string;
-        use?: HTMLActionEntry[];
+        maxwidth?: number | undefined;
+        preserveorder?: boolean | undefined;
+        gutter?: number | undefined;
+        className?: string | undefined;
+        use?: HTMLActionEntry[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CollapsingTable.svelte.d.ts

@@ -3,21 +3,21 @@ import type { CollapsingTableColumn } from '../types';
 import DefaultPopupMenu from './PopupMenu.svelte';
 declare const __propDef: {
     props: {
-        tableClass?: string;
-        bodyRowClass?: string;
-        bodyCellClass?: string;
-        headerRowClass?: string;
-        headerCellClass?: string;
-        menuContainerClass?: string;
-        menuClass?: string;
-        menuItemClass?: string;
-        menuItemHilitedClass?: string;
+        tableClass?: string | undefined;
+        bodyRowClass?: string | undefined;
+        bodyCellClass?: string | undefined;
+        headerRowClass?: string | undefined;
+        headerCellClass?: string | undefined;
+        menuContainerClass?: string | undefined;
+        menuClass?: string | undefined;
+        menuItemClass?: string | undefined;
+        menuItemHilitedClass?: string | undefined;
         items: any[];
         config?: CollapsingTableColumn[] | undefined;
-        defaultCellWidth?: number;
-        PopupMenu?: typeof DefaultPopupMenu;
-        slots?: Record<string, boolean>;
-        stickyheader?: boolean;
+        defaultCellWidth?: number | undefined;
+        PopupMenu?: typeof DefaultPopupMenu | undefined;
+        slots?: Record<string, boolean> | undefined;
+        stickyheader?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,19 +25,19 @@ declare const __propDef: {
     slots: {
         headercell: {
             column: CollapsingTableColumn & {
-                widthPercent?: number;
+                widthPercent?: number | undefined;
             };
             key: string;
             title: string;
-            item: any;
-            value: any;
+            item: undefined;
+            value: undefined;
         };
         dropicon: {
             column: CollapsingTableColumn & {
-                widthPercent?: number;
+                widthPercent?: number | undefined;
             };
-            item: any;
-            value: any;
+            item: undefined;
+            value: undefined;
         };
         default: {
             key: string;
@@ -45,9 +45,9 @@ declare const __propDef: {
             item: any;
         };
         footer: {
-            item: any;
-            key: any;
-            value: any;
+            item: undefined;
+            key: undefined;
+            value: undefined;
         };
     };
 };

package/dist/components/ConditionalWrapper.svelte.d.ts

@@ -4,8 +4,8 @@ declare const __propDef: {
         [x: string]: any;
         condition: boolean | undefined;
         component?: any | undefined;
-        a?: boolean;
-        span?: boolean;
+        a?: boolean | undefined;
+        span?: boolean | undefined;
         element?: HTMLElement | undefined;
     };
     events: {

package/dist/components/FocusLock.svelte

@@ -47,9 +47,11 @@ onMount(async () => {
         focusId,
         pause: () => { state = 'paused'; },
         unpause: () => { if (state === 'paused')
-            state = 'active'; }
+            state = 'active'; },
+        update: () => dispatch('focuslockupdate')
     });
-    dispatch('focuslockupdate');
+    for (const entry of FocusLockStack)
+        entry.update();
     if (typeof returnfocusto === 'undefined') {
         returnfocusto = document.querySelector(':focus');
     }
@@ -84,7 +86,8 @@ onDestroy(async () => {
     const prevFocusLock = FocusLockStack.slice(-1)[0];
     if (prevFocusLock)
         prevFocusLock.unpause();
-    dispatch('focuslockupdate');
+    for (const entry of FocusLockStack)
+        entry.update();
 });
 const setInitialFocus = () => {
     const firstfocus = lockelement ? tabbable(lockelement)[0] : undefined;

package/dist/components/FocusLock.svelte.d.ts

@@ -3,19 +3,20 @@ export declare const FocusLockStack: {
     focusId: string;
     pause: () => void;
     unpause: () => void;
+    update: () => void;
 }[];
 declare const __propDef: {
     props: {
-        escapable?: boolean;
-        hidefocus?: boolean;
-        hidefocuslabel?: string;
+        escapable?: boolean | undefined;
+        hidefocus?: boolean | undefined;
+        hidefocuslabel?: string | undefined;
         initialfocus?: string | undefined;
         returnfocusto?: HTMLElement | null | 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;
-        class?: string;
-        focusId?: string;
+        class?: string | undefined;
+        focusId?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/Lottie.svelte.d.ts

@@ -2,14 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         animationData: any;
-        loop?: boolean;
+        loop?: boolean | undefined;
         name?: string | undefined;
-        speed?: number;
-        direction?: 1 | -1;
-        paused?: boolean;
+        speed?: number | undefined;
+        direction?: 1 | -1 | undefined;
+        paused?: boolean | undefined;
         width?: string | undefined;
         height?: string | undefined;
-        /** `<ScreenReaderOnly>` lable to be applied. */ alt?: string;
+        /** `<ScreenReaderOnly>` lable to be applied. */ alt?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Modal.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        opaque?: boolean;
-        containerClass?: string;
-        escapable?: boolean;
-        hidefocus?: boolean;
+        opaque?: boolean | undefined;
+        containerClass?: string | undefined;
+        escapable?: boolean | undefined;
+        hidefocus?: boolean | undefined;
         hidefocuslabel?: string | undefined;
         initialfocus?: string | undefined;
         returnfocusto?: HTMLElement | undefined;
@@ -12,7 +12,7 @@ declare const __propDef: {
         /** 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;
-        focusId?: string;
+        focusId?: string | undefined;
     };
     events: {
         escape: CustomEvent<any>;

package/dist/components/MultiSelect.svelte

@@ -13,23 +13,28 @@ import DefaultPopupMenu from './PopupMenu.svelte';
 import { modifierKey, selectionIsLeft } from '../util';
 export let name;
 /**
- * Function to pass to the component that tells it how to use the text
- * in the text input to determine what `PopupMenuItem[]` should be displayed
- * in the `PopupMenu`. Items already 'selected' from the popup menu will be
- * tracked and automatically filtered from the popup if returned as one of the
- * `PopupMenuItem[]` by `getOptions`. */
+ * Function to pass to the component that tells it how to use the text in the text input to determine what
+ * `PopupMenuItem[]` should be displayed in the `PopupMenu`. Items already 'selected' from the popup menu will
+ * be tracked and automatically filtered from the popup if returned as one of the `PopupMenuItem[]` by `getOptions`. */
 export let getOptions;
 export let id = randomid();
 export let disabled = false;
-export let menuContainerClass = undefined;
-export let menuClass = undefined;
-export let menuItemClass = undefined;
-export let menuItemHilitedClass = undefined;
-export let inputClass = undefined;
+export let menuContainerClass = '';
+export let menuClass = '';
+export let menuItemClass = '';
+export let menuItemHilitedClass = '';
+export let inputClass = '';
+export let menuDividerClass = '';
 /** The maximum number of selections allowed before making new selections is disabled. Default of 0 is unlimited. */
 export let maxSelections = 0;
+/** Consuming components may need to make decisions about what to display or return as options in the popup based
+ * on what's already selected. This component property can be used to both pass an initial set of selections but
+ * it can also be bound to provide a means to inspect what's selected. */
 export let selected = [];
+/** The text to be displayed in the input text box for contextual feedback on what the input text is expecting. */
 export let placeholder = '';
+/** When there are no items (e.g. it's a filtered search and there were no results), we still display one
+disabled item in the menu to let the user know what is going on. Use this prop to specify the message. */
 export let emptyText = undefined;
 export let usePortal = undefined;
 export let descid = undefined;
@@ -59,14 +64,14 @@ async function reactToInput(..._) {
         const rawOptions = await optionsCache.get(saveval);
         if (inputvalue !== saveval)
             return; // ignore any results that are out of date
-        options = rawOptions.filter(o => !selectedSet.has(o.value));
+        options = rawOptions.filter(o => !('value' in o) || !selectedSet.has(o.value));
         if (typeof document !== 'undefined' && inputelement === document.activeElement && (options.length || inputvalue?.length))
             menushown = true;
         loading = false;
     }, 250);
 }
 $: reactToInput(inputvalue, getOptions, selectedSet);
-$: availablemessage = options.filter(o => o.value).length + ' autocomplete choices available';
+$: availablemessage = options.filter(o => 'value' in o && o.value).length + ' autocomplete choices available';
 function addSelection(e) {
     inputvalue = '';
     const opt = { ...e.detail, label: e.detail.label || e.detail.value };
@@ -142,10 +147,11 @@ $: 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}
+        <i aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path fill="currentColor" d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/></svg></i>
         <ScreenReaderOnly>, click to deselect</ScreenReaderOnly>
       </li>
     {/each}
-    <li class={`input ${inputClass ?? ''}`}>
+    <li class={`input ${inputClass}`}>
       <input type="text" {id} {name} {disabled} {placeholder}
         bind:this={inputelement} bind:value={inputvalue} on:blur
         on:focus={inputfocus} on:keydown={inputkeydown}
@@ -160,7 +166,9 @@ $: reactToHilite(hilitedpill, id);
   <slot></slot>
 </fieldset>
 <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}
+ {usePortal} {loading} {emptyText}
+ {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} {menuDividerClass}
+ items={options} buttonelement={inputelement}
  on:change={addSelection}/>
 
 <style>
@@ -199,6 +207,7 @@ $: reactToHilite(hilitedpill, id);
     height: 100%;
   }
   .multiselect-pill {
+    position: relative;
     cursor: pointer;
     flex-grow: 0;
     margin-right: 0.3em;
@@ -207,7 +216,21 @@ $: reactToHilite(hilitedpill, id);
     border: var(--multiselect-pill-border, 1px solid gray);
     background-color: var(--multiselect-pill-bg, transparent);
     color: var(--multiselect-pill-text, black);
-    padding: var(--multiselect-pill-padding, 0.3em 0.5em);
+    padding: var(--multiselect-pill-padding-top, 0.3em) var(--multiselect-pill-padding-left, 0.5em);
+    padding-right: calc(var(--multiselect-pill-padding-left, 0.5em) + 1.1em);
+  }
+  .multiselect-pill i {
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: calc(var(--multiselect-pill-padding-left, 0.5em) - 0.1em);
+    transform: translateY(-50%);
+    width: 1em;
+    height: 1em;
+  }
+  .multiselect-pill svg {
+    width: 100%;
+    height: 100%;
   }
   .multiselect-selected.disabled {
     opacity: 0.5;

package/dist/components/MultiSelect.svelte.d.ts

@@ -1,32 +1,31 @@
 import { SvelteComponentTyped } from "svelte";
 import DefaultPopupMenu from './PopupMenu.svelte';
-import type { PopupMenuItem } from '../types';
+import type { PopupMenuItem, PopupMenuTypes } from '../types';
 declare const __propDef: {
     props: {
         name: string;
         /**
-           * Function to pass to the component that tells it how to use the text
-           * in the text input to determine what `PopupMenuItem[]` should be displayed
-           * in the `PopupMenu`. Items already 'selected' from the popup menu will be
-           * tracked and automatically filtered from the popup if returned as one of the
-           * `PopupMenuItem[]` by `getOptions`. */ getOptions: (search: string) => Promise<PopupMenuItem[]> | PopupMenuItem[];
-        id?: string;
-        disabled?: boolean;
+           * Function to pass to the component that tells it how to use the text in the text input to determine what
+           * `PopupMenuItem[]` should be displayed in the `PopupMenu`. Items already 'selected' from the popup menu will
+           * be tracked and automatically filtered from the popup if returned as one of the `PopupMenuItem[]` by `getOptions`. */ getOptions: (search: string) => Promise<PopupMenuTypes[]> | PopupMenuTypes[];
+        id?: string | undefined;
+        disabled?: boolean | undefined;
         menuContainerClass?: string | undefined;
         menuClass?: string | undefined;
         menuItemClass?: string | undefined;
         menuItemHilitedClass?: string | undefined;
         inputClass?: string | undefined;
-        /** The maximum number of selections allowed before making new selections is disabled. Default of 0 is unlimited. */ maxSelections?: number;
-        selected?: {
-            value: string;
-            label: string;
-        }[];
-        placeholder?: string;
-        emptyText?: string | undefined;
+        menuDividerClass?: string | undefined;
+        /** The maximum number of selections allowed before making new selections is disabled. Default of 0 is unlimited. */ maxSelections?: number | undefined;
+        /** Consuming components may need to make decisions about what to display or return as options in the popup based
+           * on what's already selected. This component property can be used to both pass an initial set of selections but
+           * it can also be bound to provide a means to inspect what's selected. */ selected?: PopupMenuItem[] | undefined;
+        /** The text to be displayed in the input text box for contextual feedback on what the input text is expecting. */ placeholder?: string | undefined;
+        /** When there are no items (e.g. it's a filtered search and there were no results), we still display one
+          disabled item in the menu to let the user know what is going on. Use this prop to specify the message. */ emptyText?: string | undefined;
         usePortal?: HTMLElement | true | undefined;
         descid?: string | undefined;
-        /** You can define your own PopupMenu and pass for that to be used or accept DefaultPopupMenu. */ PopupMenu?: typeof DefaultPopupMenu;
+        /** You can define your own PopupMenu and pass for that to be used or accept DefaultPopupMenu. */ PopupMenu?: typeof DefaultPopupMenu | undefined;
     };
     events: {
         blur: FocusEvent;

package/dist/components/PopupMenu.svelte

@@ -3,7 +3,7 @@
   bound to `buttonelement`. It can also be controlled from the parent, by binding the `menushown` boolean.
 -->
 <script>import { createEventDispatcher, onDestroy, tick } from 'svelte';
-import { randomid } from 'txstate-utils';
+import { isNotBlank, randomid } from 'txstate-utils';
 import { Store } from '@txstate-mws/svelte-store';
 import { glue, portal } from '../actions';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
@@ -39,7 +39,7 @@ for parent elements not styled for variable size children and which you want ove
 export let adjustparentheight = false;
 /**  If the menu would be clipped by an `overflow: hidden`, you can set this prop and it will be placed in
 the specified container, or the `document.body` if you simply say `true`. Placement will still be calculated
-correctly, unless there are scrolling containers between the button and the menu. */
+correctly since it uses positon fixed for placement. */
 export let usePortal = undefined;
 /** Useful for when your `items` need to be fetched but you want the associated element shown. Set to loading
 until they're ready to be displayed and the popup menu will not be shown until the `loading` bind is `true`. */
@@ -58,6 +58,7 @@ export let menuClass = '';
 export let menuItemClass = '';
 export let menuItemHilitedClass = '';
 export let menuItemSelectedClass = '';
+export let menuDividerClass = '';
 let menuelement;
 const itemelements = [];
 let firstactive = 0;
@@ -66,8 +67,8 @@ function hiddenItem(item) {
     return !!item && !showSelected && item.value === value;
 }
 async function reactToItems(..._) {
-    firstactive = items.findIndex(itm => !itm.disabled && !hiddenItem(itm));
-    lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled && !hiddenItem(itm)) - 1;
+    firstactive = items.findIndex(itm => 'value' in itm && !itm.disabled && !hiddenItem(itm));
+    lastactive = items.length - [...items].reverse().findIndex(itm => 'value' in itm && !itm.disabled && !hiddenItem(itm)) - 1;
     if (hilited && items[hilited]?.disabled)
         hilited = firstactive;
 }
@@ -100,12 +101,17 @@ $: reactToMenuShown(menushown);
 function move(idx) {
     if (!menushown)
         return;
+    while (idx <= lastactive && 'divider' in items[idx])
+        idx++;
     if (items[idx]?.disabled)
         return;
     hilited = Math.max(firstactive, Math.min(lastactive, idx));
     itemelements[hilited].scrollIntoView({ block: 'center' });
     buttonelement.setAttribute('aria-activedescendant', `${menuid}-${hilited}`);
 }
+function isSelectable(itm) {
+    return 'value' in itm && !itm.disabled && !hiddenItem(itm);
+}
 function onkeydown(e) {
     if (modifierKey(e))
         return;
@@ -113,7 +119,7 @@ function onkeydown(e) {
         e.preventDefault();
         if (menushown) {
             let i = (hilited ?? firstactive - 1) + 1;
-            while (items[i]?.disabled || hiddenItem(items[i]))
+            while (!isSelectable(items[i]))
                 i++;
             move(i);
         }
@@ -126,7 +132,7 @@ function onkeydown(e) {
         e.preventDefault();
         if (menushown) {
             let i = (hilited ?? lastactive + 1) - 1;
-            while (items[i]?.disabled || hiddenItem(items[i]))
+            while (!isSelectable(items[i]))
                 i--;
             move(i);
         }
@@ -229,7 +235,7 @@ const onclick = (item) => (e) => {
     value = item.value;
     dispatch('change', item);
 };
-$: hasSelected = showSelected && items.some(itm => itm.value === value);
+$: hasSelected = showSelected && items.some(itm => 'value' in itm && itm.value === value);
 </script>
 
 {#if menushown}
@@ -239,22 +245,24 @@ $: hasSelected = showSelected && items.some(itm => itm.value === value);
     <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}
+      {#each items as item, i ('value' in item ? item.value : `popupmenu_divider_${i}`)}
+        {#if 'value' in item && (showSelected || item.value !== value)}
           <!-- svelte-ignore a11y-click-events-have-key-events -->
           <li
             id={`${menuid}-${i}`}
             bind:this={itemelements[i]}
-            class={`${menuItemClass} ${i === hilited ? menuItemHilitedClass || '' : ''} ${value === item.value ? menuItemSelectedClass || '' : ''}`}
+            class={`${menuItemClass} ${i === hilited ? menuItemHilitedClass : ''} ${value === item.value ? menuItemSelectedClass : ''}`}
             class:disabled={!!item.disabled}
             class:hilited={!menuItemHilitedClass && i === hilited}
             class:selected={showSelected && !menuItemSelectedClass && value === item.value}
             on:click={onclick(item)}
-            role="option"
+            role='option'
             tabindex=-1
             aria-selected={value === item.value}
             aria-disabled={item.disabled}
           ><slot {item} label={item.label || item.value} hilited={i === hilited} selected={value === item.value}>{item.label || item.value}</slot></li>
+        {:else if 'divider' in item && item.divider}
+          <li class={`divider ${menuDividerClass}`} on:mousedown|stopPropagation|preventDefault class:group={isNotBlank(item.label)}>{item.label}</li>
         {/if}
       {/each}
       {#if items.length === 0}
@@ -274,7 +282,6 @@ $: hasSelected = showSelected && items.some(itm => itm.value === value);
 
 <style>
   div {
-    position: absolute !important;
     z-index: var(--popup-z, calc(var(--modal-z, 3000) + 1));
   }
   ul {
@@ -317,6 +324,15 @@ $: hasSelected = showSelected && items.some(itm => itm.value === value);
   li.selected {
     position: relative;
   }
+  li.divider {
+    height: 0px;
+    border-top: 2px solid slategray;
+    cursor: default;
+  }
+  li.divider.group {
+    height: auto;
+    border-bottom: 2px solid slategray;
+  }
   ul.hasSelected li {
     padding-left: 1.4em;
   }

package/dist/components/PopupMenu.svelte.d.ts

@@ -1,55 +1,57 @@
 import { SvelteComponentTyped } from "svelte";
 import { Store } from '@txstate-mws/svelte-store';
 import type { GlueAlignOpts, GlueAlignStore } from '../actions';
-import type { PopupMenuItem } from '../types';
+import type { PopupMenuTypes } from '../types';
 declare const __propDef: {
     props: {
         /** The DOM element that will act as the "button" for this menu. The menu will be placed next to the
           button and be controlled by the button. Keyboard access will be enabled when the button has focus.
           This component adds all appropriate attributes (tabindex, roles, and aria) automatically. */ buttonelement: HTMLElement;
-        /** The list of menu items to be shown. Parent may change this at any time based on user activity. */ items?: PopupMenuItem[];
-        menushown?: boolean;
+        /** The list of menu items to be shown. Parent may change this at any time based on user activity. */ items?: PopupMenuTypes[] | undefined;
+        menushown?: boolean | undefined;
         value?: string | undefined;
         /** Control where the menu will appear. Default is to use the current viewport to make a decision to
-          maximize potential for menu growth. */ align?: GlueAlignOpts;
-        /** When the menu is active, should it cover the button or be rendered above/below it? */ cover?: boolean;
+          maximize potential for menu growth. */ align?: GlueAlignOpts | undefined;
+        /** When the menu is active, should it cover the button or be rendered above/below it? */ cover?: boolean | undefined;
         /** When an item is currently selected, should it appear in the menu (with a visual indicator), or
-          simply be removed from the list (`showSelected: false`). */ showSelected?: boolean;
+          simply be removed from the list (`showSelected: false`). */ showSelected?: boolean | undefined;
         /** When defined, this width will be passed through to the menu's CSS width. Use a valid CSS dimension
           such as 33em or 159px. Generally this will be used when you need to match the menu width to something
           else, like the button. If the width is static like 100% a simple CSS rule is likely more efficient. */ width?: string | undefined;
         /** Bind this prop to receive a store that is updated each time a menu placement decision is made. Example
           of when this is useful is when you are trying to round corners of your button and need to know whether the
           menu is above or below your button so you know which corners to round and which to leave square. Note that
-          the values do not update when the menu is hidden, so you may need to rely on `menushown` as well. */ computedalign?: Store<GlueAlignStore>;
+          the values do not update when the menu is hidden, so you may need to rely on `menushown` as well. */ computedalign?: Store<GlueAlignStore> | undefined;
         /** Set to `true` if you want the parent element's styling to increase its minHeight when necessary. Useful
-          for parent elements not styled for variable size children and which you want override the the size of. */ adjustparentheight?: boolean;
+          for parent elements not styled for variable size children and which you want override the the size of. */ adjustparentheight?: boolean | undefined;
         /**  If the menu would be clipped by an `overflow: hidden`, you can set this prop and it will be placed in
           the specified container, or the `document.body` if you simply say `true`. Placement will still be calculated
-          correctly, unless there are scrolling containers between the button and the menu. */ usePortal?: HTMLElement | true | undefined;
+          correctly since it uses positon fixed for placement. */ usePortal?: HTMLElement | true | undefined;
         /** Useful for when your `items` need to be fetched but you want the associated element shown. Set to loading
-          until they're ready to be displayed and the popup menu will not be shown until the `loading` bind is `true`. */ loading?: boolean;
+          until they're ready to be displayed and the popup menu will not be shown until the `loading` bind is `true`. */ loading?: boolean | undefined;
         /** A bindable value for inspecting which item in `items` is currently highlighted as the item currently
           active in the list. This is not the same as `value` and the highlighted item may or may not be selected as
           for the `value` of the field. */ hilited?: number | undefined;
-        /** The id of the <ul> element that is the displayed list of items. */ menuid?: string;
+        /** The id of the <ul> element that is the displayed list of items. */ menuid?: string | undefined;
         /** When there are no items (e.g. it's a filtered search and there were no results), we still display one
           disabled item in the menu to let the user know what is going on. Use this prop to specify the message. */ emptyText?: string | undefined;
-        menuContainerClass?: string;
-        menuClass?: string;
-        menuItemClass?: string;
-        menuItemHilitedClass?: string;
-        menuItemSelectedClass?: string;
+        menuContainerClass?: string | undefined;
+        menuClass?: string | undefined;
+        menuItemClass?: string | undefined;
+        menuItemHilitedClass?: string | undefined;
+        menuItemSelectedClass?: string | undefined;
+        menuDividerClass?: string | undefined;
     };
     events: {
+        mousedown: MouseEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {
-            item: PopupMenuItem;
-            label: string;
+            item: PopupMenuTypes;
+            label: any;
             hilited: boolean;
             selected: boolean;
         };

package/dist/types/CardLayout.d.ts

@@ -10,7 +10,7 @@ export declare const CARDLAYOUT: {};
 }
 ``` */
 export interface Block {
-    element: HTMLElement;
+    element: HTMLElement | undefined;
     order?: SettableSubject<number>;
     linebreak?: SettableSubject<boolean>;
     width?: SettableSubject<string>;

package/dist/types/PopupMenu.d.ts

@@ -1,8 +1,30 @@
-/** ```ts
-{ value: string, lable? string, disabled?: boolean }
-``` */
+/**  The basic information assocaited with individual choices that are presented in a PopupMenu. */
 export interface PopupMenuItem {
+    /** The value returned by the PopupMenu when the associated item is selected. */
     value: string;
+    /** An optional display string to show in the menu for the associated `value`. */
     label?: string;
+    /** Toggles the choice as one that's visible but is disabled and unclickable until conditions
+     * are met that would cause it to become enabled. */
     disabled?: boolean;
 }
+/** A PopupMenu list native type for displaying */
+export interface PopupMenuDivider {
+    /** Toggle for whether this instance of this type is shown. */
+    divider: boolean;
+    /** Optional labeling to display. Useful for dividers used as group headers.
+     * We may want to update PopupMenu to use <optgroup lable=
+     */
+    label?: string;
+}
+/** To support ARIA best practices for groups within listboxes as popup menus
+ * we'll need to group options under sub-lists. This interface provides a means
+ * for passing such to PopupMenu.
+ * @note Not currently in use. */
+export interface PopupMenuGroup {
+    /** The label for the group. */
+    lable: string;
+    /** The listing of options that would be listed under the parent `<ul>`. */
+    options: PopupMenuTypes[];
+}
+export type PopupMenuTypes = (PopupMenuDivider | PopupMenuItem);

package/dist/util/bodyoffset.d.ts

@@ -11,4 +11,4 @@ export declare function targetOffset(ele: HTMLElement, target: HTMLElement): {
     top: number;
     left: number;
 };
-export declare function sharedOffsetParent(a: HTMLElement, b: HTMLElement): HTMLElement;
+export declare function sharedOffsetParent(a: HTMLElement, b: HTMLElement): HTMLElement | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.4.7",
+  "version": "1.5.0",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",
@@ -31,7 +31,7 @@
     "svelte-preprocess": "^5.0.0",
     "svelte2tsx": "^0.6.0",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.3"
+    "typescript": "^5.0.4"
   },
   "peerDependencies": {
     "svelte": "^3.44.0"