@txstate-mws/svelte-components 1.6.12 → 1.6.14

package/dist/actions/elementqueries.d.ts

@@ -4,18 +4,21 @@ declare class ElementQueries {
     refresh(): void;
     fullresync(): void;
     activate(): void;
-    subscribe(el: HTMLElement, store?: WritableSubject<{
+    subscribe<S extends {
         width: number;
-    }>): () => void;
+    }>(el: HTMLElement, store?: WritableSubject<S>): () => void;
 }
 export declare const elementqueries: ElementQueries;
-interface EqOpts {
-    store: WritableSubject<{
-        width: number;
-    }>;
-}
-export declare function eq(el: HTMLElement, opts?: EqOpts): {
-    update(opts?: EqOpts): void;
+export declare function eq<S extends {
+    width: number;
+} = {
+    width: number;
+}>(el: HTMLElement, opts?: {
+    store: WritableSubject<S>;
+}): {
+    update(opts?: {
+        store: WritableSubject<S>;
+    }): void;
     destroy(): void;
 };
 export {};

package/dist/actions/resize.d.ts

@@ -1,20 +1,20 @@
 import { Store } from '@txstate-mws/svelte-store';
-import type { SettableSubject } from '@txstate-mws/svelte-store';
+import type { WritableSubject } from '@txstate-mws/svelte-store';
 export interface ElementSize {
     clientWidth?: number;
     clientHeight?: number;
     offsetWidth?: number;
     offsetHeight?: number;
 }
-interface ResizeConfig {
+interface ResizeConfig<T extends ElementSize = ElementSize> {
     debounce?: boolean | number;
-    store?: SettableSubject<ElementSize>;
+    store?: WritableSubject<T>;
 }
 export declare class ResizeStore extends Store<ElementSize> {
     constructor(initialState?: ElementSize);
 }
-export declare function resize(el: HTMLElement, config?: ResizeConfig): {
-    update(newConfig?: ResizeConfig): void;
+export declare function resize<T extends ElementSize = ElementSize>(el: HTMLElement, config?: ResizeConfig<T>): {
+    update(newConfig?: ResizeConfig<T>): void;
     destroy(): void;
 } | undefined;
 export {};

package/dist/components/ButtonMenu.svelte

@@ -1,28 +1,34 @@
-<script lang="ts">import { randomid } from 'txstate-utils';
-import { Store } from '@txstate-mws/svelte-store';
-import PopupMenu from './PopupMenu.svelte';
-export let buttonelement;
-export let items = [];
-export let menushown = false;
-export let value = undefined;
-export let align = 'auto';
-export let cover = false;
-export let showSelected = true;
-export let width = undefined;
-export let computedalign = new Store({ valign: 'bottom', halign: 'left' });
-export let gap = 0;
-export let adjustparentheight = false;
-export let usePortal = undefined;
-export let loading = false;
-export let hilited = undefined;
-export let menuid = randomid();
-export let emptyText = undefined;
-export let menuContainerClass = '';
-export let menuClass = '';
-export let menuItemClass = '';
-export let menuItemHilitedClass = '';
-export let menuItemSelectedClass = '';
-const usemenurole = true;
+<script lang="ts">
+  import { randomid } from 'txstate-utils'
+  import { Store } from '@txstate-mws/svelte-store'
+  import type { GlueAlignOpts, GlueAlignStore } from '../actions'
+  import type { PopupMenuItem } from '../types'
+  import PopupMenu from './PopupMenu.svelte'
+
+  export let buttonelement: HTMLButtonElement
+  export let items: PopupMenuItem[] = []
+  export let menushown = false
+  export let value: string | undefined = undefined
+  export let align: GlueAlignOpts = 'auto'
+  export let cover = false
+  export let showSelected = true
+  export let width: string | undefined = undefined
+  export let computedalign = new Store<GlueAlignStore>({ valign: 'bottom', halign: 'left' })
+  export let gap = 0
+  export let adjustparentheight = false
+  export let usePortal: HTMLElement | true | undefined = undefined
+  export let loading = false
+  export let hilited: number | undefined = undefined
+  export let menuid = randomid()
+  export let emptyText: string | undefined = undefined
+  export let menuContainerClass = ''
+  export let menuClass = ''
+  export let menuItemClass = ''
+  export let menuItemHilitedClass = ''
+  export let menuItemSelectedClass = ''
+
+  const usemenurole = true
+
 </script>
 
 <PopupMenu

package/dist/components/Card.svelte

@@ -1,14 +1,18 @@
 <!-- @component
   [`Card`](https://github.com/txstate-etc/svelte-components/blob/main/src/lib/components/Card.svelte)
 -->
-<script lang="ts">export let className = '';
-import { getContext } from 'svelte';
-import { resize, passActions } from '../actions';
-import { CARDLAYOUT } from '../types';
-export let use = [];
-const block = { element: undefined };
-const { registerBlock, gutter, recalculate } = getContext(CARDLAYOUT);
-const { width, order, linebreak } = registerBlock(block);
+<script lang="ts">
+  export let className = ''
+  import { getContext } from 'svelte'
+  import { resize, passActions, type HTMLActionEntry } from '../actions'
+  import { CARDLAYOUT } from '../types'
+  import type { CardLayoutContext, Block } from '../types'
+
+  export let use: HTMLActionEntry[] = []
+
+  const block: Block = { element: undefined }
+  const { registerBlock, gutter, recalculate } = getContext<CardLayoutContext>(CARDLAYOUT)
+  const { width, order, linebreak } = registerBlock(block)
 </script>
 
 <li class="cardlayout-card {className}" bind:this={block.element} use:passActions={use} use:resize on:resize={recalculate} style="margin-bottom: {$gutter}px; width: {$width}; order: {$order};">

package/dist/components/CardLayout.svelte

@@ -1,184 +1,177 @@
 <!-- @component
   [`CardLayout`](https://github.com/txstate-etc/svelte-components/blob/main/src/lib/components/CardLayout.svelte)
 -->
-<script lang="ts">import { onDestroy, tick, setContext, onMount } from 'svelte';
-import { writable } from 'svelte/store';
-import { resize, passActions } from '../actions';
-import { CARDLAYOUT } from '../types';
-export let maxwidth = 500;
-export let preserveorder = false;
-export let gutter = 10;
-export let className = '';
-export let use = [];
-const ssr = typeof navigator === 'undefined' || navigator.userAgent.includes('jsdom');
-const blocks = [];
-const gutterstore = writable(gutter);
-let defaultOrder = 0;
-setContext(CARDLAYOUT, {
-    registerBlock: (block) => {
-        blocks.push(block);
-        hardrecalc();
-        onDestroy(() => {
-            blocks.splice(blocks.indexOf(block), 1);
-            hardrecalc();
-        });
-        block.order = writable(defaultOrder);
-        defaultOrder += 1;
-        block.linebreak = writable(false);
-        const cols = savecolumns || Math.ceil(1024 / maxwidth);
-        block.width = writable(`calc(${100.0 / cols}% - ${gutter * (cols - 1) / cols}px)`);
-        return block;
+<script lang="ts">
+  import { onDestroy, tick, setContext, onMount } from 'svelte'
+  import { writable } from 'svelte/store'
+  import { type ElementSize, resize, type HTMLActionEntry, passActions } from '../actions'
+  import { CARDLAYOUT } from '../types'
+  import type { Block } from '../types'
+  export let maxwidth = 500
+  export let preserveorder = false
+  export let gutter = 10
+  export let className = ''
+  export let use: HTMLActionEntry[] = []
+  const ssr = typeof navigator === 'undefined' || navigator.userAgent.includes('jsdom')
+  const blocks: Block[] = []
+  const gutterstore = writable(gutter)
+  let defaultOrder = 0
+  setContext(CARDLAYOUT, {
+    registerBlock: (block: Block) => {
+      blocks.push(block)
+      hardrecalc()
+      onDestroy(() => {
+        blocks.splice(blocks.indexOf(block), 1)
+        hardrecalc()
+      })
+      block.order = writable(defaultOrder)
+      defaultOrder += 1
+      block.linebreak = writable(false)
+      const cols = savecolumns || Math.ceil(1024 / maxwidth)
+      block.width = writable(`calc(${100.0 / cols}% - ${gutter * (cols - 1) / cols}px)`)
+      return block
     },
     recalculate: () => {
-        hardrecalc();
+      hardrecalc()
     },
     gutter: gutterstore
-});
-$: gutterstore.set(gutter);
-let layoutelement;
-let cycle1 = 0;
-let cycle2 = 0;
-function detectcycle(w) {
+  })
+  $: gutterstore.set(gutter)
+  let layoutelement: HTMLElement
+  let cycle1 = 0
+  let cycle2 = 0
+  function detectcycle (w: number) {
     if (cycle1 === 0 && Math.abs(w - cycle2) > 5) {
-        cycle1 = w;
+      cycle1 = w
+    } else if (cycle2 === 0 && Math.abs(w - cycle1) > 5) {
+      cycle2 = w
+    } else if (w === cycle1 || w === cycle2) {
+      return true
+    } else {
+      cycle1 = 0
+      cycle2 = 0
     }
-    else if (cycle2 === 0 && Math.abs(w - cycle1) > 5) {
-        cycle2 = w;
-    }
-    else if (w === cycle1 || w === cycle2) {
-        return true;
-    }
-    else {
-        cycle1 = 0;
-        cycle2 = 0;
-    }
-    return false;
-}
-let savecolumns = 0;
-let optimal;
-let fullheight = 0;
-let hardrequired = false;
-async function recalculate(realw) {
-    const columns = Math.ceil(realw / maxwidth);
-    const guttereach = gutter * (columns - 1) / columns;
-    const cycling = detectcycle(realw);
+    return false
+  }
+  let savecolumns = 0
+  let optimal: Block[][]
+  let fullheight = 0
+  let hardrequired = false
+  async function recalculate (realw: number) {
+    const columns = Math.ceil(realw / maxwidth)
+    const guttereach = gutter * (columns - 1) / columns
+    const cycling = detectcycle(realw)
     if (columns !== savecolumns) {
-        for (const block of blocks)
-            block.width.set(`calc(${100.0 / columns}% - ${guttereach}px)`);
-        await tick();
+      for (const block of blocks) block.width!.set(`calc(${100.0 / columns}% - ${guttereach}px)`)
+      await tick()
     }
     // collect all the card heights at this new column width
-    for (const block of blocks)
-        block.height = block.element?.offsetHeight ?? 200;
+    for (const block of blocks) block.height = block.element?.offsetHeight ?? 200
     if (columns !== savecolumns || hardrequired) { // only do real work if number of columns has changed, recalculate triggers on resize
-        if (preserveorder) {
-            optimal = [blocks];
-            if (columns > 1) {
-                const totalheight = blocks.reduce((totalheight, block) => totalheight + block.height + gutter, 0);
-                const tallestblock = Math.max(...blocks.map(b => b.height));
-                const minheight = Math.max(totalheight / columns, tallestblock);
-                let shortestoverall = totalheight;
-                // 2d packing problem is NP-hard so this is an O(n) heuristic
-                // optimal configuration would be if each column is `minheight` so start there
-                // then relax it in increments and see if the overall height shrinks
-                const increment = Math.max(1, Math.floor(Math.min(minheight, tallestblock) * 0.05));
-                for (let colmaxheight = minheight; colmaxheight < minheight + tallestblock + gutter; colmaxheight += increment) {
-                    let colheight = 0;
-                    let colidx = 0;
-                    let tallestcol = 0;
-                    let tallestcolidx = 0;
-                    const arrangement = [];
-                    for (const block of blocks) {
-                        if (colheight + block.height > colmaxheight && colidx < columns - 1) {
-                            if (colheight > tallestcol) {
-                                tallestcol = colheight;
-                                tallestcolidx = colidx;
-                            }
-                            colidx += 1;
-                            colheight = 0;
-                        }
-                        arrangement[colidx] ??= [];
-                        arrangement[colidx].push(block);
-                        colheight += block.height + gutter;
-                    }
-                    if (colheight > tallestcol) {
-                        tallestcol = colheight;
-                        tallestcolidx = colidx;
-                    }
-                    if (tallestcol < shortestoverall) {
-                        shortestoverall = tallestcol;
-                        optimal = arrangement;
-                    }
-                    // if leftmost column is tallest, increasing the allowable height can never make the overall height shorter
-                    if (tallestcolidx === 0)
-                        break;
+      if (preserveorder) {
+        optimal = [blocks]
+        if (columns > 1) {
+          const totalheight = blocks.reduce((totalheight, block) => totalheight + block.height! + gutter, 0)
+          const tallestblock = Math.max(...blocks.map(b => b.height!))
+          const minheight = Math.max(totalheight / columns, tallestblock)
+          let shortestoverall = totalheight
+          // 2d packing problem is NP-hard so this is an O(n) heuristic
+          // optimal configuration would be if each column is `minheight` so start there
+          // then relax it in increments and see if the overall height shrinks
+          const increment = Math.max(1, Math.floor(Math.min(minheight, tallestblock) * 0.05))
+          for (let colmaxheight = minheight; colmaxheight < minheight + tallestblock + gutter; colmaxheight += increment) {
+            let colheight = 0
+            let colidx = 0
+            let tallestcol = 0
+            let tallestcolidx = 0
+            const arrangement: Block[][] = []
+            for (const block of blocks) {
+              if (colheight + block.height! > colmaxheight && colidx < columns - 1) {
+                if (colheight > tallestcol) {
+                  tallestcol = colheight
+                  tallestcolidx = colidx
                 }
+                colidx += 1
+                colheight = 0
+              }
+              arrangement[colidx] ??= []
+              arrangement[colidx].push(block)
+              colheight += block.height! + gutter
             }
-        }
-        else {
-            optimal = [];
-            const heights = [...Array(columns)].map((_) => 0); // initializes heights to an array of zeroes
-            // begin sorting blocks into columns
-            for (const block of blocks) {
-                // find the column with the smallest current height
-                const colidx = heights.reduce((acc, curr, curridx) => curr < heights[acc] ? curridx : acc, 0);
-                // record the height we are adding to the chosen column
-                heights[colidx] += block.height + gutter;
-                // move the current card to the chosen column
-                optimal[colidx] ??= [];
-                optimal[colidx].push(block);
+            if (colheight > tallestcol) {
+              tallestcol = colheight
+              tallestcolidx = colidx
             }
-        }
-        // we created the optimal arrangement, now move the block elements to
-        // reflect it
-        let order = 0;
-        for (let i = 0; i < optimal.length; i++) {
-            for (let j = 0; j < optimal[i].length; j++) {
-                const block = optimal[i][j];
-                block.order.set(order);
-                order += 1;
-                block.linebreak.set(j === optimal[i].length - 1 && i < optimal.length - 1);
+            if (tallestcol < shortestoverall) {
+              shortestoverall = tallestcol
+              optimal = arrangement
             }
+            // if leftmost column is tallest, increasing the allowable height can never make the overall height shorter
+            if (tallestcolidx === 0) break
+          }
         }
-        savecolumns = columns;
-        hardrequired = false;
+      } else {
+        optimal = []
+        const heights: number[] = [...Array(columns)].map((_: any) => 0) // initializes heights to an array of zeroes
+        // begin sorting blocks into columns
+        for (const block of blocks) {
+          // find the column with the smallest current height
+          const colidx = heights.reduce((acc, curr, curridx) => curr < heights[acc] ? curridx : acc, 0)
+          // record the height we are adding to the chosen column
+          heights[colidx] += block.height! + gutter
+          // move the current card to the chosen column
+          optimal[colidx] ??= []
+          optimal[colidx].push(block)
+        }
+      }
+      // we created the optimal arrangement, now move the block elements to
+      // reflect it
+      let order = 0
+      for (let i = 0; i < optimal.length; i++) {
+        for (let j = 0; j < optimal[i].length; j++) {
+          const block = optimal[i][j]
+          block.order!.set(order)
+          order += 1
+          block.linebreak!.set(j === optimal[i].length - 1 && i < optimal.length - 1)
+        }
+      }
+      savecolumns = columns
+      hardrequired = false
     }
     // re-adjust container height
-    const saveheight = fullheight;
-    fullheight = 0;
+    const saveheight = fullheight
+    fullheight = 0
     for (let i = 0; i < optimal.length; i++) {
-        let top = 0;
-        for (const block of optimal[i]) {
-            top += block.height + gutter;
-        }
-        fullheight = Math.max(fullheight, top);
+      let top = 0
+      for (const block of optimal[i]) {
+        top += block.height! + gutter
+      }
+      fullheight = Math.max(fullheight, top)
     }
-    if (cycling && saveheight < fullheight)
-        fullheight = saveheight;
-}
-let savewidth = 0;
-let timer = 0;
-function triggerrecalc(width) {
-    if (width === savewidth && !hardrequired)
-        return;
-    cancelAnimationFrame(timer);
+    if (cycling && saveheight < fullheight) fullheight = saveheight
+  }
+
+  let savewidth = 0
+  let timer = 0
+  function triggerrecalc (width: number) {
+    if (width === savewidth && !hardrequired) return
+    cancelAnimationFrame(timer)
     timer = requestAnimationFrame(() => {
-        void recalculate(width);
-        savewidth = width;
-    });
-}
-function hardrecalc() {
-    if (!layoutelement)
-        return;
-    hardrequired = true;
-    cycle1 = 0;
-    cycle2 = 0;
-    triggerrecalc(layoutelement.clientWidth);
-}
-function onResize(e) {
-    triggerrecalc(e.detail.clientWidth ?? 0);
-}
-onMount(() => { triggerrecalc(layoutelement.clientWidth); });
+      void recalculate(width)
+      savewidth = width
+    })
+  }
+  function hardrecalc () {
+    if (!layoutelement) return
+    hardrequired = true
+    cycle1 = 0
+    cycle2 = 0
+    triggerrecalc(layoutelement.clientWidth)
+  }
+  function onResize (e: UIEvent & { currentTarget: any, detail: ElementSize }) {
+    triggerrecalc(e.detail.clientWidth ?? 0)
+  }
+  onMount(() => { triggerrecalc(layoutelement.clientWidth) })
 </script>
 
 <ul class="cardlayout {className}" class:ssr style:height={ssr ? undefined : `${fullheight + gutter}px`} bind:this={layoutelement} use:resize on:resize={onResize} use:passActions={use}>

package/dist/components/CollapsingTable.svelte

@@ -5,78 +5,80 @@ This component is meant to help make tables responsive by eliminating columns (f
 When there are hidden columns, the last column header becomes a dropdown button allowing the selection of another column
 to be displayed instead.
 -->
-<script lang="ts">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 = '';
-export let bodyRowClass = '';
-export let bodyCellClass = '';
-export let headerRowClass = '';
-export let headerCellClass = '';
-export let menuContainerClass = '';
-export let menuClass = '';
-export let menuItemClass = '';
-export let menuItemHilitedClass = '';
-export let items;
-export let config = undefined;
-export let defaultCellWidth = 150;
-export let PopupMenu = DefaultPopupMenu;
-export let slots = $$slots;
-export let stickyheader = false;
-let columns;
-let width = 320;
-let selected;
-let identifyingkeys = [];
-$: firstrow = items?.[0] ?? {};
-$: columns = config ?? Object.keys(firstrow).map(key => ({ key }));
-function reactToColumns(columns) {
+<script lang="ts">
+  import { Store } from '@txstate-mws/svelte-store'
+  import { derived } from 'svelte/store'
+  import type { CollapsingTableColumn, PopupMenuItem } from '../types'
+  import { classes } from '../util'
+  import DefaultPopupMenu from './PopupMenu.svelte'
+  import ScreenReaderOnly from './ScreenReaderOnly.svelte'
+
+  export let tableClass = ''
+  export let bodyRowClass = ''
+  export let bodyCellClass = ''
+  export let headerRowClass = ''
+  export let headerCellClass = ''
+  export let menuContainerClass = ''
+  export let menuClass = ''
+  export let menuItemClass = ''
+  export let menuItemHilitedClass = ''
+  export let items: any[]
+  export let config: CollapsingTableColumn[] | undefined = undefined
+  export let defaultCellWidth = 150
+  export let PopupMenu = DefaultPopupMenu
+  export let slots: Record<string, boolean> = $$slots
+  export let stickyheader = false
+  let columns: CollapsingTableColumn[]
+  let width = 320
+  let selected: PopupMenuItem | undefined
+  let identifyingkeys: string[] = []
+  $: firstrow = items?.[0] ?? {}
+  $: columns = config ?? Object.keys(firstrow as object).map(key => ({ key }))
+  function reactToColumns (columns: CollapsingTableColumn[]) {
     if (!columns.some(c => c.neverhide)) {
-        columns[0].neverhide = true;
+      columns[0].neverhide = true
     }
     const sortedcolumns = columns // stable sort
-        .map((c, i) => ({ col: c, idx: i }))
-        .sort((a, b) => ((a.col.neverhide ? 0 : 1) - (b.col.neverhide ? 0 : 1)) || a.idx - b.idx)
-        .map(o => o.col);
+      .map((c, i) => ({ col: c, idx: i }))
+      .sort((a, b) => ((a.col.neverhide ? 0 : 1) - (b.col.neverhide ? 0 : 1)) || a.idx - b.idx)
+      .map(o => o.col)
     if (!selected) {
-        const firstcol = sortedcolumns.find(c => !c.neverhide);
-        selected = firstcol ? { value: firstcol.key } : undefined;
+      const firstcol = sortedcolumns.find(c => !c.neverhide)
+      selected = firstcol ? { value: firstcol.key } : undefined
     }
-    identifyingkeys = sortedcolumns.filter(c => c.neverhide).map(c => c.key);
-    return sortedcolumns;
-}
-$: sortedcolumns = reactToColumns(columns);
-$: 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(..._) {
-    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) => sum + (col.width ?? defaultCellWidth), 0);
+    identifyingkeys = sortedcolumns.filter(c => c.neverhide).map(c => c.key)
+    return sortedcolumns
+  }
+  $: sortedcolumns = reactToColumns(columns)
+
+  $: itemkeys = items.map(item => item.id ?? item._id ?? identifyingkeys.map(k => item[k]).join('.'))
+
+  const state = new Store({
+    keepcolumns: [] as (CollapsingTableColumn & { widthPercent?: number })[],
+    hiddencolumns: [] as CollapsingTableColumn[],
+    dropdowncolumn: undefined as (CollapsingTableColumn & { widthPercent?: number }) | undefined
+  })
+  const menuitems = derived(state, obj => obj.hiddencolumns.map(c => ({ value: c.key, label: c.title })))
+  function react (..._: any[]) {
+    const selectedcol = sortedcolumns.find(c => c.key === selected?.value) ?? columns[1]
+    const keepcolumns: CollapsingTableColumn[] = []
+    const hiddencolumns: CollapsingTableColumn[] = []
+    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 + (col.width ?? defaultCellWidth) < width) {
-            keepcolumns.push(col);
-            if (col !== selectedcol && !col.neverhide)
-                used += col.width ?? defaultCellWidth;
-        }
-        else
-            hiddencolumns.push(col);
+      if (col.neverhide || col === selectedcol || used + (col.width ?? defaultCellWidth) < width) {
+        keepcolumns.push(col)
+        if (col !== selectedcol && !col.neverhide) used += col.width ?? defaultCellWidth
+      } else hiddencolumns.push(col)
     }
     for (const col of keepcolumns) {
-        col.widthPercent = 100 * (col.width ?? defaultCellWidth) / used;
+      (col as any).widthPercent = 100 * (col.width ?? defaultCellWidth) / used
     }
-    const dropdowncolumn = hiddencolumns.length ? keepcolumns[keepcolumns.length - 1] : undefined;
-    state.set({ keepcolumns, hiddencolumns, dropdowncolumn });
-}
-$: react(width, selected);
-const headers = [];
-$: menubuttonelement = headers[$state.keepcolumns.length - 1];
+    const dropdowncolumn = hiddencolumns.length ? keepcolumns[keepcolumns.length - 1] : undefined
+    state.set({ keepcolumns, hiddencolumns, dropdowncolumn })
+  }
+  $: react(width, selected)
+  const headers: HTMLElement[] = []
+  $: menubuttonelement = headers[$state.keepcolumns.length - 1]
 </script>
 
 <div bind:clientWidth={width}>