@txstate-mws/svelte-components 0.0.67 → 1.0.3

package/README.md

@@ -1,5 +1,40 @@
-# svelte-components
-A set of generically useful components for svelte.
+# create-svelte
 
-# Components
-[CollapsingTable](/docs/CollapsingTable.md)
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm init svelte@next
+
+# create a new project in my-app
+npm init svelte@next my-app
+```
+
+> Note: the `@next` is temporary
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment.

package/{dist/actions/a11y.js → 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=a11y.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;
@@ -12,5 +12,5 @@ export interface GlueAlignStore {
 }
 export declare function glue(el: HTMLElement, { target, align, cover, store }: GlueArgs): {
     update({ target: utarget, align: ualign, cover: ucover, store: ustore }: GlueArgs): void;
-    destroy(): void;
+    destroy: () => void;
 };

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,27 +60,23 @@ 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);
             }
         },
-        destroy() {
-            destroy();
-        }
+        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,6 +1,6 @@
-import { StickyArgs } from './sticky';
+import type { StickyArgs } from './sticky.js';
 /**
- * An implementation of stickyness based on `transform: translateY()`. Only use when
+ * 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,
  * it performs better.
  *
@@ -10,16 +10,16 @@ import { StickyArgs } from './sticky';
  * 3) it always stays within the boundaries of the closest parent element that has a `position`
  *     * use:sticky accepts a `target` element as a parameter, defining the bounding container
  *
- * Note that this implementation sacrifices simplicity for animation performance. It does a lot of
- * work like cloning the element you place it on, placing the cloned element next to yours in the DOM,
- * setting widths to match between them, watching for mutations to keep them in sync, etc. Some of
- * this work may get foiled if you have a complex html/css/js situation.
+ * Note that this implementation gets great animation performance at the cost of extra complexity.
+ * It does a lot of work like cloning the element you place it on, placing the cloned element next
+ * to yours in the DOM, setting widths to match between them, watching for mutations to keep them
+ * in sync, etc. Some of this work may get foiled if you have a complex html/css/js situation.
  *
  * You may also want to try use:sticky. It is based on setting `transform: translateY()` as appropriate,
  * 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.
  */
 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,9 +1,6 @@
-"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 `transform: translateY()`. Only use when
+ * 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,
  * it performs better.
  *
@@ -13,16 +10,16 @@ const lib_1 = require("../lib");
  * 3) it always stays within the boundaries of the closest parent element that has a `position`
  *     * use:sticky accepts a `target` element as a parameter, defining the bounding container
  *
- * Note that this implementation sacrifices simplicity for animation performance. It does a lot of
- * work like cloning the element you place it on, placing the cloned element next to yours in the DOM,
- * setting widths to match between them, watching for mutations to keep them in sync, etc. Some of
- * this work may get foiled if you have a complex html/css/js situation.
+ * Note that this implementation gets great animation performance at the cost of extra complexity.
+ * It does a lot of work like cloning the element you place it on, placing the cloned element next
+ * to yours in the DOM, setting widths to match between them, watching for mutations to keep them
+ * in sync, etc. Some of this work may get foiled if you have a complex html/css/js situation.
  *
  * You may also want to try use:sticky. It is based on setting `transform: translateY()` as appropriate,
  * 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 { DeepStore, 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,36 +40,35 @@ 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('.'); });
-const state = new DeepStore({
+$: itemkeys = items.map(item => item.id ?? item._id ?? identifyingkeys.map(k => item[k]).join('.'));
+const state = new Store({
     keepcolumns: [],
     hiddencolumns: [],
     dropdowncolumn: undefined
 });
 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} bind:selected></svelte:component>
+  <svelte:component this={PopupMenu} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={$menuitems} buttonelement={menubuttonelement} on:change={e => { selected = e.detail }}></svelte:component>
 {/if}
 
 <style>