@txstate-mws/svelte-components 1.0.0 → 1.0.4

package/README.md

@@ -1,17 +1,36 @@
 # svelte-components
 A set of generically useful components for svelte.
 
-# Components
-[CollapsingTable](/docs/CollapsingTable.md)
-[ConditionalWrapper](/docs/ConditionalWrapper.md)
-[FocusLock](/docs/Modal.md#FocusLock)
-[Modal](/docs/Modal.md#Modal)
-[PopupMenu](/docs/PopupMenu.md)
-[ScreenReaderOnly](/docs/ScreenReaderOnly.md)
-
-# Actions
-[use:buttonify](/docs/actions.md#use:buttonify)
-[use:glue](/docs/actions.md#use:glue)
-[use:offset](/docs/actions.md#use:offset)
-[use:portal](/docs/actions.md#use:portal)
-[use:resize](/docs/actions.md#use:resize)
+## Components
+- [CollapsingTable](/docs/CollapsingTable.md)
+- [ConditionalWrapper](/docs/ConditionalWrapper.md)
+- [FocusLock](/docs/Modal.md#FocusLock)
+- [Modal](/docs/Modal.md#Modal)
+- [PopupMenu](/docs/PopupMenu.md)
+- [ScreenReaderOnly](/docs/ScreenReaderOnly.md)
+
+## Actions
+- [use:buttonify](/docs/actions.md#use:buttonify)
+- [use:glue](/docs/actions.md#use:glue)
+- [use:offset](/docs/actions.md#use:offset)
+- [use:portal](/docs/actions.md#use:portal)
+- [use:resize](/docs/actions.md#use:resize)
+
+## Developing
+
+Installed dependencies with `npm install`, then start the development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Publishing to npm
+
+```bash
+npm run package
+cd package
+npm publish
+```

package/{dist/actions → actions}/buttonify.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonify = void 0;
 /**
  * Turns any HTML element into an accessible button that responds to keyboard events and has
  * role="button" and the tabindex attribute set. You are still responsible for making sure it has
  * readable content or a good label.
  */
-function buttonify(node) {
+export function buttonify(node) {
     function keydown(e) {
         if (e.key === 'Enter') {
             if (!e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
@@ -27,5 +24,3 @@ function buttonify(node) {
         }
     };
 }
-exports.buttonify = buttonify;
-//# sourceMappingURL=buttonify.js.map

package/{dist/ts/actions → actions}/glue.d.ts

@@ -1,4 +1,4 @@
-import { SettableSubject } from '../lib';
+import type { SettableSubject } from '@txstate-mws/svelte-store';
 export declare type GlueAlignOpts = 'auto' | 'bottomleft' | 'bottomright' | 'topleft' | 'topright';
 export interface GlueArgs<T extends GlueAlignStore = GlueAlignStore> {
     target: HTMLElement;

package/{dist/actions → actions}/glue.js

@@ -1,21 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.glue = void 0;
-const lib_1 = require("../lib");
+import { sharedOffsetParent, targetOffset, watchForPositionChangeInContainer } from '../util/index.js';
 let setBodyRelative = false;
-function glue(el, { target, align = 'auto', cover = false, store }) {
+export function glue(el, { target, align = 'auto', cover = false, store }) {
     if (!setBodyRelative) {
         setBodyRelative = true;
         document.body.style.position = 'relative';
     }
     let halign;
     let valign;
-    let sharedOffset = (0, lib_1.sharedOffsetParent)(el, target);
+    let sharedOffset = sharedOffsetParent(el, target);
     function reposition(offset) {
         if (!target || !sharedOffset || !(el.offsetParent instanceof HTMLElement))
             return;
         let autoalign = align;
-        const parentoffset = el.offsetParent === sharedOffset && target !== sharedOffset ? { top: 0, left: 0, bottom: 0, right: 0 } : (0, lib_1.targetOffset)(el.offsetParent, sharedOffset);
+        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';
@@ -63,19 +60,19 @@ function glue(el, { target, align = 'auto', cover = false, store }) {
             valign = 'top';
             halign = 'right';
         }
-        store === null || store === void 0 ? void 0 : store.update(v => (Object.assign(Object.assign({}, v), { valign, halign })));
+        store?.update(v => ({ ...v, valign, halign }));
     }
-    const { destroy, update } = (0, lib_1.watchForPositionChangeInContainer)(target, sharedOffset, reposition);
+    const { destroy, update } = watchForPositionChangeInContainer(target, sharedOffset, reposition);
     return {
         update({ target: utarget, align: ualign = 'auto', cover: ucover = false, store: ustore }) {
             align = ualign;
             cover = ucover;
             if (ustore && ustore !== store) {
-                ustore.update(v => (Object.assign(Object.assign({}, v), { valign, halign })));
+                ustore.update(v => ({ ...v, valign, halign }));
                 store = ustore;
             }
             if (target !== utarget) {
-                sharedOffset = (0, lib_1.sharedOffsetParent)(el, utarget);
+                sharedOffset = sharedOffsetParent(el, utarget);
                 target = utarget;
                 update(target, sharedOffset, reposition);
             }
@@ -83,5 +80,3 @@ function glue(el, { target, align = 'auto', cover = false, store }) {
         destroy
     };
 }
-exports.glue = glue;
-//# sourceMappingURL=glue.js.map

package/actions/index.d.ts

@@ -0,0 +1,7 @@
+export * from './buttonify.js';
+export * from './glue.js';
+export * from './offset.js';
+export * from './portal.js';
+export * from './resize.js';
+export * from './sticky.js';
+export * from './stickyfixed.js';

package/actions/index.js

@@ -0,0 +1,7 @@
+export * from './buttonify.js';
+export * from './glue.js';
+export * from './offset.js';
+export * from './portal.js';
+export * from './resize.js';
+export * from './sticky.js';
+export * from './stickyfixed.js';

package/actions/offset.d.ts

@@ -0,0 +1,15 @@
+import { Store } from '@txstate-mws/svelte-store';
+import type { WritableSubject } from '@txstate-mws/svelte-store';
+import type { ElementOffsets } from '../util/index.js';
+interface OffsetConfig<T extends ElementOffsets = ElementOffsets> {
+    debounce?: boolean | number;
+    store?: WritableSubject<T>;
+}
+export declare class OffsetStore extends Store<ElementOffsets> {
+    constructor(initialState?: ElementOffsets);
+}
+export declare function offset(el: HTMLElement, config?: OffsetConfig): {
+    update(newConfig?: OffsetConfig): void;
+    destroy: () => void;
+};
+export {};

package/actions/offset.js

@@ -0,0 +1,35 @@
+import { Store } from '@txstate-mws/svelte-store';
+import { debounced, watchForPositionChange } from '../util/index.js';
+export class OffsetStore extends Store {
+    constructor(initialState) {
+        super(initialState ?? { top: 0, right: 0, bottom: 0, left: 0 });
+    }
+}
+export function offset(el, config) {
+    if (config?.debounce === true)
+        config.debounce = 100;
+    let lastOffset = {};
+    function lookforoffsetchange(current) {
+        lastOffset = current;
+        if (config?.store)
+            config.store.update(v => ({ ...v, ...current }));
+        el.dispatchEvent(new CustomEvent('offset', { detail: current }));
+    }
+    let resolvedchange = config?.debounce ? debounced(lookforoffsetchange, config.debounce) : lookforoffsetchange;
+    const { destroy, update } = watchForPositionChange(el, resolvedchange);
+    return {
+        update(newConfig) {
+            if (newConfig?.debounce === true)
+                newConfig.debounce = 100;
+            if (newConfig?.store !== config?.store) {
+                newConfig?.store?.update(v => ({ ...v, ...lastOffset }));
+            }
+            if (newConfig?.debounce !== config?.debounce) {
+                resolvedchange = newConfig?.debounce ? debounced(lookforoffsetchange, newConfig.debounce) : lookforoffsetchange;
+                update(el, resolvedchange);
+            }
+            config = newConfig;
+        },
+        destroy
+    };
+}

package/actions/portal.js

@@ -0,0 +1,13 @@
+export function portal(el, target = document.body) {
+    function update(target = document.body) {
+        target?.appendChild(el);
+    }
+    function destroy() {
+        el.parentElement?.removeChild(el);
+    }
+    update(target);
+    return {
+        update,
+        destroy
+    };
+}

package/{dist/ts/actions → actions}/resize.d.ts

@@ -1,4 +1,5 @@
-import { SettableSubject } from '../lib';
+import { Store } from '@txstate-mws/svelte-store';
+import type { SettableSubject } from '@txstate-mws/svelte-store';
 export interface ElementSize {
     clientWidth?: number;
     clientHeight?: number;
@@ -9,8 +10,11 @@ interface ResizeConfig {
     debounce?: boolean | number;
     store?: SettableSubject<ElementSize>;
 }
+export declare class ResizeStore extends Store<ElementSize> {
+    constructor(initialState?: ElementSize);
+}
 export declare function resize(el: HTMLElement, config?: ResizeConfig): void | {
-    update(newConfig?: ResizeConfig | undefined): void;
+    update(newConfig?: ResizeConfig): void;
     destroy(): void;
 };
 export {};

package/actions/resize.js

@@ -0,0 +1,45 @@
+import { equal } from 'txstate-utils';
+import { Store } from '@txstate-mws/svelte-store';
+import { debounced } from '../util/index.js';
+export class ResizeStore extends Store {
+    constructor(initialState) {
+        super(initialState ?? { clientWidth: 1024, clientHeight: 1024, offsetWidth: 1024, offsetHeight: 1024 });
+    }
+}
+export function resize(el, config) {
+    if (config?.debounce === true)
+        config.debounce = 100;
+    let lastSize = {};
+    function watch() {
+        const current = { clientWidth: el.clientWidth, clientHeight: el.clientHeight, offsetWidth: el.offsetWidth, offsetHeight: el.offsetHeight };
+        if (!equal(lastSize, current)) {
+            lastSize = current;
+            if (config?.store)
+                config.store.set(current);
+            el.dispatchEvent(new CustomEvent('resize', { detail: current }));
+        }
+    }
+    if (!ResizeObserver)
+        return watch(); // support SSR
+    let observer = new ResizeObserver(config?.debounce ? debounced(watch, config.debounce) : watch);
+    observer.observe(el);
+    watch();
+    return {
+        update(newConfig) {
+            if (newConfig?.debounce === true)
+                newConfig.debounce = 100;
+            if (newConfig?.store !== config?.store) {
+                newConfig?.store?.set(lastSize);
+            }
+            if (!!newConfig?.debounce !== !!config?.debounce) {
+                observer.disconnect();
+                observer = new ResizeObserver(newConfig?.debounce ? debounced(watch, newConfig.debounce) : watch);
+                observer.observe(el);
+            }
+            config = newConfig;
+        },
+        destroy() {
+            observer.disconnect();
+        }
+    };
+}

package/{dist/ts/actions → actions}/sticky.d.ts

@@ -1,4 +1,4 @@
-import { SettableSubject } from '../lib';
+import type { SettableSubject } from '@txstate-mws/svelte-store';
 export interface StickyArgs<T extends StickyStore = StickyStore> {
     target?: HTMLElement;
     store?: SettableSubject<T>;
@@ -28,6 +28,6 @@ export interface StickyStore {
  * fragile if your markup/CSS situation is very complex.
  */
 export declare function sticky(el: HTMLElement, config?: StickyArgs): {
-    update: (newConfig?: StickyArgs<StickyStore> | undefined) => void;
+    update: (newConfig?: StickyArgs) => void;
     destroy: () => void;
 };

package/{dist/actions → actions}/sticky.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sticky = void 0;
-const lib_1 = require("../lib");
+import { bodyOffset, watchForPositionChange } from '../util/index.js';
 let scrolled = false;
 /**
  * A robust implementation of stickyness based on `transform: translateY()`. Only use when
@@ -23,19 +20,18 @@ let scrolled = false;
  * and therefore animates better than this. However, it has a lot more work to do and is more
  * fragile if your markup/CSS situation is very complex.
  */
-function sticky(el, config) {
+export function sticky(el, config) {
     let floating;
     let translateY;
     let scrollstart = Number.MAX_SAFE_INTEGER;
     let scrollend = Number.MAX_SAFE_INTEGER;
     function recalc(scroll) {
-        var _a;
         const newTranslateY = Math.max(Math.min(scroll, scrollend) - scrollstart, 0);
         if (newTranslateY !== translateY) {
             el.style.transform = `translateY(${newTranslateY}px)`;
             translateY = newTranslateY;
             floating = scroll >= scrollstart;
-            (_a = config === null || config === void 0 ? void 0 : config.store) === null || _a === void 0 ? void 0 : _a.update(v => (Object.assign(Object.assign({}, v), { translateY, floating })));
+            config?.store?.update(v => ({ ...v, translateY, floating }));
         }
     }
     function onscroll(e) {
@@ -55,29 +51,27 @@ function sticky(el, config) {
     }
     let lastOffsetParent = el.offsetParent;
     function onpositionchange(offset) {
-        var _a;
         const offsetParent = el.offsetParent;
         if (!(offsetParent instanceof HTMLElement))
             return;
         if (lastOffsetParent !== offsetParent) {
-            offset[0] = (0, lib_1.bodyOffset)(offsetParent);
+            offset[0] = bodyOffset(offsetParent);
             update(offsetParent, onpositionchange);
             lastOffsetParent = offsetParent;
         }
         scrollstart = offset[0].top + el.offsetTop;
-        const containeroffset = (config === null || config === void 0 ? void 0 : config.target) ? offset[1] : offset[0];
-        scrollend = Math.max(scrollstart, containeroffset.top + ((_a = config === null || config === void 0 ? void 0 : config.target) !== null && _a !== void 0 ? _a : offsetParent).clientHeight - el.offsetHeight);
+        const containeroffset = config?.target ? offset[1] : offset[0];
+        scrollend = Math.max(scrollstart, containeroffset.top + (config?.target ?? offsetParent).clientHeight - el.offsetHeight);
         recalc(window.scrollY);
     }
-    const { destroy, update } = (0, lib_1.watchForPositionChange)([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
+    const { destroy, update } = watchForPositionChange([el.offsetParent, config?.target], onpositionchange);
     window.addEventListener('scroll', onscroll, { passive: true });
     window.addEventListener('wheel', onwheel, { passive: false });
     function stickyUpdate(newConfig) {
-        var _a;
-        if ((newConfig === null || newConfig === void 0 ? void 0 : newConfig.store) !== (config === null || config === void 0 ? void 0 : config.store))
-            (_a = newConfig === null || newConfig === void 0 ? void 0 : newConfig.store) === null || _a === void 0 ? void 0 : _a.update(v => (Object.assign(Object.assign({}, v), { translateY, floating })));
+        if (newConfig?.store !== config?.store)
+            newConfig?.store?.update(v => ({ ...v, translateY, floating }));
         config = newConfig;
-        update([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
+        update([el.offsetParent, config?.target], onpositionchange);
     }
     function stickyDestroy() {
         window.removeEventListener('scroll', onscroll);
@@ -89,5 +83,3 @@ function sticky(el, config) {
         destroy: stickyDestroy
     };
 }
-exports.sticky = sticky;
-//# sourceMappingURL=sticky.js.map

package/{dist/ts/actions → actions}/stickyfixed.d.ts

@@ -1,4 +1,4 @@
-import { StickyArgs } from './sticky';
+import type { StickyArgs } from './sticky.js';
 /**
  * An implementation of stickyness based on `positon: fixed`. Only use when
  * `position: sticky` won't work for you. If `position: sticky` does work for you, use it,
@@ -20,6 +20,6 @@ import { StickyArgs } from './sticky';
  * so it will visually lag a bit on mobile.
  */
 export declare function stickyfixed(el: HTMLElement, config?: StickyArgs): {
-    update: (newConfig?: StickyArgs<import("./sticky").StickyStore> | undefined) => void;
+    update: (newConfig?: StickyArgs) => void;
     destroy: () => void;
 };

package/{dist/actions → actions}/stickyfixed.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.stickyfixed = void 0;
-const lib_1 = require("../lib");
+import { bodyOffset, watchForPositionChange } from '../util/index.js';
 /**
  * An implementation of stickyness based on `positon: fixed`. Only use when
  * `position: sticky` won't work for you. If `position: sticky` does work for you, use it,
@@ -22,7 +19,7 @@ const lib_1 = require("../lib");
  * and is less fragile than this. However, it cannot do its work before the scroll on mobile, only after,
  * so it will visually lag a bit on mobile.
  */
-function stickyfixed(el, config) {
+export function stickyfixed(el, config) {
     let floating;
     let translateY;
     let scrollstart = Number.MAX_SAFE_INTEGER;
@@ -32,10 +29,9 @@ function stickyfixed(el, config) {
     let left;
     let top = 0;
     function generatespacer(mutations) {
-        var _a;
-        if (mutations === null || mutations === void 0 ? void 0 : mutations.every(m => m.attributeName === 'style'))
+        if (mutations?.every(m => m.attributeName === 'style'))
             return;
-        spacer === null || spacer === void 0 ? void 0 : spacer.remove();
+        spacer?.remove();
         spacer = el.cloneNode(true);
         spacer.setAttribute('aria-hidden', 'true');
         spacer.style.position = '';
@@ -46,7 +42,7 @@ function stickyfixed(el, config) {
         for (const td of tds)
             td.style.width = '';
         if (floating)
-            (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(spacer, el);
+            el.parentElement?.insertBefore(spacer, el);
     }
     const mutationobserver = new MutationObserver(generatespacer);
     mutationobserver.observe(el, {
@@ -85,14 +81,13 @@ function stickyfixed(el, config) {
     }
     const resizeobserver = new ResizeObserver(adjustwidths);
     function recalc(scroll) {
-        var _a, _b;
         const newTranslateY = Math.max(Math.min(scroll - 1, scrollend) - scrollstart, 0);
         const newFloating = newTranslateY > 0;
         const newTop = Math.max(Math.min(scrollend - scroll, 0), -2 * elheight);
         if (newFloating !== floating) {
             floating = newFloating;
             if (floating) {
-                (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(spacer, el);
+                el.parentElement?.insertBefore(spacer, el);
                 el.style.position = 'fixed';
                 el.style.top = `${Math.min(scrollend - scroll, 0)}px`;
                 el.style.left = `${left}px`;
@@ -109,7 +104,7 @@ function stickyfixed(el, config) {
         }
         if (newTranslateY !== translateY) {
             translateY = newTranslateY;
-            (_b = config === null || config === void 0 ? void 0 : config.store) === null || _b === void 0 ? void 0 : _b.update(v => (Object.assign(Object.assign({}, v), { translateY, floating })));
+            config?.store?.update(v => ({ ...v, translateY, floating }));
         }
         if (top !== newTop) {
             top = newTop;
@@ -122,12 +117,11 @@ function stickyfixed(el, config) {
     }
     let lastOffsetParent = el.offsetParent;
     function onpositionchange(offset) {
-        var _a, _b;
         const offsetParent = el.offsetParent;
         if (!(offsetParent instanceof HTMLElement))
             return;
         if (lastOffsetParent !== offsetParent) {
-            offset[0] = (0, lib_1.bodyOffset)(offsetParent);
+            offset[0] = bodyOffset(offsetParent);
             update(offsetParent, onpositionchange);
             lastOffsetParent = offsetParent;
         }
@@ -138,18 +132,17 @@ function stickyfixed(el, config) {
         if (el.tagName === 'TR') {
             scrollstart -= borderspacing;
         }
-        const containeroffset = (config === null || config === void 0 ? void 0 : config.target) ? (_a = offset[1]) !== null && _a !== void 0 ? _a : offset[0] : offset[0];
-        scrollend = Math.max(scrollstart, containeroffset.top + ((_b = config === null || config === void 0 ? void 0 : config.target) !== null && _b !== void 0 ? _b : offsetParent).clientHeight - el.offsetHeight);
+        const containeroffset = config?.target ? offset[1] ?? offset[0] : offset[0];
+        scrollend = Math.max(scrollstart, containeroffset.top + (config?.target ?? offsetParent).clientHeight - el.offsetHeight);
         recalc(window.scrollY);
     }
-    const { destroy, update } = (0, lib_1.watchForPositionChange)([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
+    const { destroy, update } = watchForPositionChange([el.offsetParent, config?.target], onpositionchange);
     window.addEventListener('scroll', onscroll, { passive: true });
     function stickyUpdate(newConfig) {
-        var _a;
-        if ((newConfig === null || newConfig === void 0 ? void 0 : newConfig.store) !== (config === null || config === void 0 ? void 0 : config.store))
-            (_a = newConfig === null || newConfig === void 0 ? void 0 : newConfig.store) === null || _a === void 0 ? void 0 : _a.update(v => (Object.assign(Object.assign({}, v), { translateY, floating })));
+        if (newConfig?.store !== config?.store)
+            newConfig?.store?.update(v => ({ ...v, translateY, floating }));
         config = newConfig;
-        update([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
+        update([el.offsetParent, config?.target], onpositionchange);
     }
     function stickyDestroy() {
         resizeobserver.disconnect();
@@ -162,5 +155,3 @@ function stickyfixed(el, config) {
         destroy: stickyDestroy
     };
 }
-exports.stickyfixed = stickyfixed;
-//# sourceMappingURL=stickyfixed.js.map

package/{dist/components → components}/CollapsingTable.svelte

@@ -1,6 +1,6 @@
-<script>var _a;
-import { Store, classes } from '../lib';
+<script >import { Store } from '@txstate-mws/svelte-store';
 import { derived } from 'svelte/store';
+import { classes } from '../util';
 import DefaultPopupMenu from './PopupMenu.svelte';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 export let tableClass = '';
@@ -22,8 +22,8 @@ let columns;
 let width = 320;
 let selected;
 let identifyingkeys = [];
-$: firstrow = (_a = items === null || items === void 0 ? void 0 : items[0]) !== null && _a !== void 0 ? _a : {};
-$: columns = config !== null && config !== void 0 ? config : Object.keys(firstrow).map(key => ({ key }));
+$: firstrow = items?.[0] ?? {};
+$: columns = config ?? Object.keys(firstrow).map(key => ({ key }));
 function reactToColumns(columns) {
     if (!columns.some(c => c.neverhide)) {
         columns[0].neverhide = true;
@@ -40,7 +40,7 @@ function reactToColumns(columns) {
     return sortedcolumns;
 }
 $: sortedcolumns = reactToColumns(columns);
-$: itemkeys = items.map(item => { var _a, _b; return (_b = (_a = item.id) !== null && _a !== void 0 ? _a : item._id) !== null && _b !== void 0 ? _b : identifyingkeys.map(k => item[k]).join('.'); });
+$: itemkeys = items.map(item => item.id ?? item._id ?? identifyingkeys.map(k => item[k]).join('.'));
 const state = new Store({
     keepcolumns: [],
     hiddencolumns: [],
@@ -48,28 +48,27 @@ const state = new Store({
 });
 const menuitems = derived(state, obj => obj.hiddencolumns.map(c => ({ value: c.key, label: c.title })));
 function react(..._) {
-    var _a, _b, _c, _d;
-    const selectedcol = (_a = sortedcolumns.find(c => c.key === (selected === null || selected === void 0 ? void 0 : selected.value))) !== null && _a !== void 0 ? _a : columns[1];
+    const selectedcol = sortedcolumns.find(c => c.key === selected?.value) ?? columns[1];
     const keepcolumns = [];
     const hiddencolumns = [];
-    let used = sortedcolumns.filter(c => c.neverhide || c === selectedcol).reduce((sum, col) => { var _a; return sum + ((_a = col.width) !== null && _a !== void 0 ? _a : defaultCellWidth); }, 0);
+    let used = sortedcolumns.filter(c => c.neverhide || c === selectedcol).reduce((sum, col) => sum + (col.width ?? defaultCellWidth), 0);
     for (const col of sortedcolumns) {
-        if (col.neverhide || col === selectedcol || used + ((_b = col.width) !== null && _b !== void 0 ? _b : defaultCellWidth) < width) {
+        if (col.neverhide || col === selectedcol || used + (col.width ?? defaultCellWidth) < width) {
             keepcolumns.push(col);
             if (col !== selectedcol && !col.neverhide)
-                used += (_c = col.width) !== null && _c !== void 0 ? _c : defaultCellWidth;
+                used += col.width ?? defaultCellWidth;
         }
         else
             hiddencolumns.push(col);
     }
     for (const col of keepcolumns) {
-        col.widthPercent = 100 * ((_d = col.width) !== null && _d !== void 0 ? _d : defaultCellWidth) / used;
+        col.widthPercent = 100 * (col.width ?? defaultCellWidth) / used;
     }
     const dropdowncolumn = hiddencolumns.length ? keepcolumns[keepcolumns.length - 1] : undefined;
     state.set({ keepcolumns, hiddencolumns, dropdowncolumn });
 }
 $: react(width, selected);
-let headers = [];
+const headers = [];
 $: menubuttonelement = headers[$state.keepcolumns.length - 1];
 </script>
 
@@ -113,7 +112,7 @@ $: menubuttonelement = headers[$state.keepcolumns.length - 1];
   </table>
 </div>
 {#if $menuitems.length > 0}
-  <svelte:component this={PopupMenu} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={$menuitems} buttonelement={menubuttonelement} on:change={e => selected = e.detail}></svelte:component>
+  <svelte:component this={PopupMenu} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={$menuitems} buttonelement={menubuttonelement} on:change={e => { selected = e.detail }}></svelte:component>
 {/if}
 
 <style>

package/components/CollapsingTable.svelte.d.ts

@@ -0,0 +1,59 @@
+import { SvelteComponentTyped } from "svelte";
+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;
+        items: any[];
+        config?: CollapsingTableColumn[] | undefined;
+        defaultCellWidth?: number;
+        PopupMenu?: typeof DefaultPopupMenu;
+        slots?: Record<string, boolean>;
+        stickyheader?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        headercell: {
+            column: CollapsingTableColumn & {
+                widthPercent?: number;
+            };
+            key: string;
+            title: string;
+            item: any;
+            value: any;
+        };
+        dropicon: {
+            column: CollapsingTableColumn & {
+                widthPercent?: number;
+            };
+            item: any;
+            value: any;
+        };
+        default: {
+            key: string;
+            value: any;
+            item: any;
+        };
+        footer: {
+            item: any;
+            key: any;
+            value: any;
+        };
+    };
+};
+export declare type CollapsingTableProps = typeof __propDef.props;
+export declare type CollapsingTableEvents = typeof __propDef.events;
+export declare type CollapsingTableSlots = typeof __propDef.slots;
+export default class CollapsingTable extends SvelteComponentTyped<CollapsingTableProps, CollapsingTableEvents, CollapsingTableSlots> {
+}
+export {};

package/{dist/ts/components → components}/ConditionalWrapper.svelte

@@ -1,10 +1,9 @@
-<script lang="ts">
-  export let condition: boolean|undefined
-  export let component: Function|undefined = undefined
-  export let a = false
-  export let span = false
-  export let element: HTMLElement|undefined = undefined
-  $: passthrough = (({ condition, component, a, span, element, ...passthrough }) => passthrough)($$props)
+<script >export let condition;
+export let component = undefined;
+export let a = false;
+export let span = false;
+export let element = undefined;
+$: passthrough = (({ condition, component, a, span, element, ...passthrough }) => passthrough)($$props);
 </script>
 
 {#if condition || (typeof condition === 'undefined' && component)}