@txstate-mws/svelte-components 1.0.2 → 1.1.1

package/components/MultiSelect.svelte

@@ -0,0 +1,179 @@
+<script >import { createEventDispatcher } from 'svelte';
+import { randomid } from 'txstate-utils';
+import ScreenReaderOnly from './ScreenReaderOnly.svelte';
+import DefaultPopupMenu from './PopupMenu.svelte';
+import { debouncedPromise, modifierKey, selectionIsLeft } from '../util';
+export let id = randomid();
+export let name;
+export let getOptions;
+export let menuContainerClass = undefined;
+export let menuClass = undefined;
+export let menuItemClass = undefined;
+export let menuItemHilitedClass = undefined;
+export let selected = [];
+export let placeholder = '';
+export let emptyText = undefined;
+export let PopupMenu = DefaultPopupMenu;
+let menushown;
+let options = [];
+let hilitedpill;
+let inputvalue = '';
+let popupvalue = undefined;
+let inputelement;
+const descriptionid = randomid();
+$: debouncedGetOptions = debouncedPromise(getOptions, 100, []);
+$: selectedSet = new Set(selected.map(s => s.value));
+async function reactToInput(..._) {
+    const saveval = inputvalue;
+    const rawOptions = await debouncedGetOptions(saveval);
+    if (inputvalue !== saveval)
+        return; // ignore any results that are out of date
+    options = rawOptions.filter(o => !selectedSet.has(o.value));
+    if (typeof document !== 'undefined' && inputelement === document.activeElement)
+        menushown = true;
+}
+$: reactToInput(inputvalue, debouncedGetOptions, selectedSet);
+$: availablemessage = options.filter(o => o.value).length + ' autocomplete choices available';
+function addSelection(e) {
+    inputvalue = '';
+    const opt = { ...e.detail, label: e.detail.label || e.detail.value };
+    selected = [...selected, opt];
+    popupvalue = undefined;
+}
+function removeSelection(opt, idx, nextfocus = 1) {
+    if (hilitedpill === opt.value) {
+        hilitedpill = selected[idx + nextfocus]?.value;
+    }
+    selected = selected.filter(s => s.value !== opt.value);
+}
+function inputkeydown(e) {
+    if (modifierKey(e))
+        return;
+    if (e.key === 'ArrowLeft' && selectionIsLeft(inputelement)) {
+        const idx = hilitedpill ? selected.findIndex(s => s.value === hilitedpill) : selected.length;
+        if (idx !== 0)
+            hilitedpill = selected[idx - 1].value;
+    }
+    else if (e.key === 'ArrowRight' && selectionIsLeft(inputelement)) {
+        if (hilitedpill)
+            e.preventDefault();
+        const idx = hilitedpill ? selected.findIndex(s => s.value === hilitedpill) : undefined;
+        if (idx != null) {
+            if (idx === selected.length - 1)
+                hilitedpill = undefined;
+            else
+                hilitedpill = selected[idx + 1].value;
+        }
+    }
+    else if (['Backspace', 'Delete', 'Clear', ' ', 'Enter'].includes(e.key)) {
+        if (hilitedpill) {
+            const idx = selected.findIndex(s => s.value === hilitedpill);
+            removeSelection(selected[idx], idx, e.key === 'Delete' ? 1 : -1);
+            e.preventDefault();
+        }
+        else if (e.key === 'Backspace' && selectionIsLeft(inputelement)) {
+            removeSelection(selected[selected.length - 1], selected.length - 1, -1);
+            e.preventDefault();
+        }
+    }
+}
+function inputfocus() {
+    reactToInput();
+}
+let popuphilited;
+$: if (popuphilited != null)
+    hilitedpill = undefined;
+function reactToHilite(..._) {
+    if (!inputelement)
+        return;
+    if (hilitedpill) {
+        popuphilited = undefined;
+        inputelement.setAttribute('aria-activedescendant', id + hilitedpill);
+    }
+    else
+        inputelement.removeAttribute('aria-activedescendant');
+}
+$: reactToHilite(hilitedpill, id);
+const dispatch = createEventDispatcher();
+$: dispatch('change', selected);
+</script>
+
+<fieldset>
+  <ul class="multiselect-selected" role="listbox" on:click={() => inputelement.focus()}>
+    {#each selected as option, i}
+      <li id={id + option.value} role="option" tabindex="-1" class="multiselect-pill" class:hilited={hilitedpill === option.value}
+        on:click|preventDefault|stopPropagation={() => removeSelection(option, i, 1)}
+        aria-selected="true">
+        {option.label || option.value}
+        <ScreenReaderOnly>, click to remove</ScreenReaderOnly>
+      </li>
+    {/each}
+    <li class="input">
+      <input type="text" id={id} name={name} placeholder={placeholder}
+        bind:this={inputelement} bind:value={inputvalue}
+        on:focus={inputfocus} on:keydown={inputkeydown}
+        autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list"
+        aria-describedby="{descriptionid}">
+    </li>
+  </ul>
+  <ScreenReaderOnly id={descriptionid} arialive="assertive">
+    <span>{selected.length ? selected.length + ' selected' : 'select multiple, none selected'}, up down to choose, left right to hilite existing choices</span>
+    {#if menushown}<span>{availablemessage}, touch users explore to find autocomplete menu</span>{/if}
+  </ScreenReaderOnly>
+  <slot></slot>
+</fieldset>
+<svelte:component this={PopupMenu} bind:menushown bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft' {emptyText} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={options} buttonelement={inputelement} on:change={addSelection}></svelte:component>
+
+<style>
+  fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+  fieldset * {
+    box-sizing: border-box;
+  }
+  .multiselect-selected {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    padding: var(--multiselect-padding, 0.3em);
+    border: var(--multiselect-border, 1px solid #666666);
+    border-radius: var(--multiselect-radius, 0.3em);
+  }
+  .multiselect-selected:focus-within {
+    outline-width: var(--multiselect-focus-width, 2px);
+    outline-style: solid;
+    outline-color: var(--multiselect-focus-color, Highlight);
+  }
+  li.input {
+    flex-grow: 1;
+  }
+  input {
+    outline: 0;
+    border: 0;
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .multiselect-pill {
+    cursor: pointer;
+    flex-grow: 0;
+    margin-right: 0.3em;
+    line-height: 1;
+    border-radius: var(--multiselect-pill-radius, 0.8em);
+    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);
+  }
+  .multiselect-pill.hilited {
+    outline: 0;
+    background-color: var(--multiselect-pill-selected, gray);
+    border: var(--multiselect-pill-selected-border, 1px solid transparent);
+    color: var(--multiselect-pill-selected-text, white);
+  }
+</style>

package/components/MultiSelect.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+import DefaultPopupMenu from './PopupMenu.svelte';
+import type { PopupMenuItem } from '../types';
+declare const __propDef: {
+    props: {
+        id?: string;
+        name: string;
+        getOptions: (search: string) => Promise<PopupMenuItem[]> | PopupMenuItem[];
+        menuContainerClass?: string | undefined;
+        menuClass?: string | undefined;
+        menuItemClass?: string | undefined;
+        menuItemHilitedClass?: string | undefined;
+        selected?: {
+            value: string;
+            label: string;
+        }[];
+        placeholder?: string;
+        emptyText?: string | undefined;
+        PopupMenu?: typeof DefaultPopupMenu;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type MultiSelectProps = typeof __propDef.props;
+export declare type MultiSelectEvents = typeof __propDef.events;
+export declare type MultiSelectSlots = typeof __propDef.slots;
+export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
+}
+export {};

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

@@ -1,8 +1,9 @@
-<script>import { glue, portal } from '../actions';
-import { createEventDispatcher, onDestroy, tick } from 'svelte';
+<script >import { createEventDispatcher, onDestroy, tick } from 'svelte';
 import { randomid } from 'txstate-utils';
-import { Store } from '../lib';
+import { Store } from '@txstate-mws/svelte-store';
+import { glue, portal } from '../actions';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
+import { modifierKey } from '../util';
 const dispatch = createEventDispatcher();
 export let menushown = false;
 export let menuContainerClass = '';
@@ -20,9 +21,9 @@ export let computedalign = new Store({ valign: 'bottom', halign: 'left' });
 export let usePortal = undefined;
 export let emptyText = undefined;
 export let value = undefined;
-let hilited = undefined;
+export let hilited = undefined;
 let menuelement;
-let itemelements = [];
+const itemelements = [];
 const menuid = randomid();
 let firstactive = 0;
 let lastactive = items.length - 1;
@@ -30,10 +31,9 @@ function hiddenItem(item) {
     return !!item && !showSelected && item.value === value;
 }
 async function reactToItems(..._) {
-    var _a;
     firstactive = items.findIndex(itm => !itm.disabled && !hiddenItem(itm));
     lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled && !hiddenItem(itm)) - 1;
-    if (hilited && ((_a = items[hilited]) === null || _a === void 0 ? void 0 : _a.disabled))
+    if (hilited && items[hilited]?.disabled)
         hilited = firstactive;
 }
 $: reactToItems(items, value);
@@ -44,53 +44,55 @@ async function reactToMenuShown(_) {
     }
     await tick();
     if (!menushown) {
-        hilited = undefined;
         buttonelement.removeAttribute('aria-controls');
         buttonelement.setAttribute('aria-expanded', 'false');
+        if (hilited)
+            buttonelement.removeAttribute('aria-activedescendant');
+        hilited = undefined;
     }
     else {
         buttonelement.setAttribute('aria-controls', menuid);
         buttonelement.setAttribute('aria-expanded', 'true');
+        buttonelement.focus();
     }
-    buttonelement.focus();
 }
 $: reactToMenuShown(menushown);
 function move(idx) {
-    var _a;
     if (!menushown)
         return;
-    if ((_a = items[idx]) === null || _a === void 0 ? void 0 : _a.disabled)
+    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 onkeydown(e) {
-    var _a, _b, _c, _d;
+    if (modifierKey(e))
+        return;
     if (e.key === 'ArrowDown') {
         e.preventDefault();
         if (menushown) {
-            let i = (hilited !== null && hilited !== void 0 ? hilited : firstactive - 1) + 1;
-            while (((_a = items[i]) === null || _a === void 0 ? void 0 : _a.disabled) || hiddenItem(items[i]))
+            let i = (hilited ?? firstactive - 1) + 1;
+            while (items[i]?.disabled || hiddenItem(items[i]))
                 i++;
             move(i);
         }
         else {
             menushown = true;
-            move(firstactive);
+            tick().then(() => move(firstactive));
         }
     }
     else if (e.key === 'ArrowUp') {
         e.preventDefault();
         if (menushown) {
-            let i = (hilited !== null && hilited !== void 0 ? hilited : lastactive + 1) - 1;
-            while (((_b = items[i]) === null || _b === void 0 ? void 0 : _b.disabled) || hiddenItem(items[i]))
+            let i = (hilited ?? lastactive + 1) - 1;
+            while (items[i]?.disabled || hiddenItem(items[i]))
                 i--;
             move(i);
         }
         else {
             menushown = true;
-            move(lastactive);
+            tick().then(() => move(lastactive));
         }
     }
     else if (e.key === 'Enter') {
@@ -98,13 +100,13 @@ function onkeydown(e) {
         if (menushown) {
             menushown = false;
             if (typeof hilited !== 'undefined') {
-                value = (_c = items[hilited]) === null || _c === void 0 ? void 0 : _c.value;
+                value = items[hilited]?.value;
                 dispatch('change', items[hilited]);
             }
         }
         else {
             menushown = true;
-            move(firstactive);
+            tick().then(() => move(firstactive));
         }
     }
     else if (e.key === ' ') {
@@ -114,7 +116,7 @@ function onkeydown(e) {
             if (typeof hilited !== 'undefined') {
                 e.preventDefault();
                 menushown = false;
-                value = (_d = items[hilited]) === null || _d === void 0 ? void 0 : _d.value;
+                value = items[hilited]?.value;
                 dispatch('change', items[hilited]);
             }
             else {
@@ -128,7 +130,7 @@ function onkeydown(e) {
             if (buttonelement.tagName !== 'INPUT') {
                 e.preventDefault();
                 menushown = true;
-                move(firstactive);
+                tick().then(() => move(firstactive));
             }
         }
     }
@@ -138,14 +140,17 @@ function onkeydown(e) {
         menushown = false;
     }
 }
+let blurTimer;
 function onbuttonclick(e) {
     e.preventDefault();
+    cancelAnimationFrame(blurTimer);
     menushown = !menushown;
 }
 async function onblur(e) {
     // tabindex=-1 on our menu elements means e.relatedTarget will be set
-    if (!(e.relatedTarget instanceof HTMLElement && (menuelement === null || menuelement === void 0 ? void 0 : menuelement.contains(e.relatedTarget))))
-        menushown = false;
+    if (!(e.relatedTarget instanceof HTMLElement && menuelement?.contains(e.relatedTarget))) {
+        blurTimer = requestAnimationFrame(() => { menushown = false; });
+    }
 }
 function cleanup(element) {
     if (element) {

package/components/PopupMenu.svelte.d.ts

@@ -0,0 +1,45 @@
+import { SvelteComponentTyped } from "svelte";
+import { Store } from '@txstate-mws/svelte-store';
+import type { GlueAlignOpts, GlueAlignStore } from '../actions';
+import type { PopupMenuItem } from '../types';
+declare const __propDef: {
+    props: {
+        menushown?: boolean;
+        menuContainerClass?: string;
+        menuClass?: string;
+        menuItemClass?: string;
+        menuItemHilitedClass?: string;
+        menuItemSelectedClass?: string;
+        items?: PopupMenuItem[];
+        buttonelement: HTMLElement;
+        align?: GlueAlignOpts;
+        cover?: boolean;
+        showSelected?: boolean;
+        width?: string | undefined;
+        computedalign?: Store<GlueAlignStore>;
+        usePortal?: HTMLElement | true | undefined;
+        emptyText?: string | undefined;
+        value?: string | undefined;
+        hilited?: number | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            item: PopupMenuItem;
+            label: string;
+            hilited: boolean;
+            selected: boolean;
+        };
+        noresults: {};
+    };
+};
+export declare type PopupMenuProps = typeof __propDef.props;
+export declare type PopupMenuEvents = typeof __propDef.events;
+export declare type PopupMenuSlots = typeof __propDef.slots;
+export default class PopupMenu extends SvelteComponentTyped<PopupMenuProps, PopupMenuEvents, PopupMenuSlots> {
+}
+export {};

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

@@ -1,4 +1,4 @@
-<script>export let id = undefined;
+<script >export let id = undefined;
 export let arialive = undefined;
 export let ariaatomic = undefined;
 </script>

package/components/ScreenReaderOnly.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        arialive?: 'off' | 'assertive' | 'polite' | undefined;
+        ariaatomic?: boolean | 'false' | 'true' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ScreenReaderOnlyProps = typeof __propDef.props;
+export declare type ScreenReaderOnlyEvents = typeof __propDef.events;
+export declare type ScreenReaderOnlySlots = typeof __propDef.slots;
+export default class ScreenReaderOnly extends SvelteComponentTyped<ScreenReaderOnlyProps, ScreenReaderOnlyEvents, ScreenReaderOnlySlots> {
+}
+export {};

package/{dist/ts/components → components}/index.d.ts

@@ -1,6 +1,9 @@
+export { default as CardLayout } from './CardLayout.svelte';
+export { default as Card } from './Card.svelte';
 export { default as CollapsingTable } from './CollapsingTable.svelte';
 export { default as FocusLock } from './FocusLock.svelte';
 export { default as ConditionalWrapper } from './ConditionalWrapper.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as MultiSelect } from './MultiSelect.svelte';
 export { default as PopupMenu } from './PopupMenu.svelte';
 export { default as ScreenReaderOnly } from './ScreenReaderOnly.svelte';

package/components/index.js

@@ -0,0 +1,9 @@
+export { default as CardLayout } from './CardLayout.svelte';
+export { default as Card } from './Card.svelte';
+export { default as CollapsingTable } from './CollapsingTable.svelte';
+export { default as FocusLock } from './FocusLock.svelte';
+export { default as ConditionalWrapper } from './ConditionalWrapper.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as MultiSelect } from './MultiSelect.svelte';
+export { default as PopupMenu } from './PopupMenu.svelte';
+export { default as ScreenReaderOnly } from './ScreenReaderOnly.svelte';

package/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './actions/index.js';
+export * from './types/index.js';
+export * from './util/index.js';

package/index.js

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './actions/index.js';
+export * from './types/index.js';
+export * from './util/index.js';

package/package.json

@@ -1,86 +1,56 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "Svelte components that are generically useful.",
-  "main": "dist/index.js",
-  "module": "esm/index.js",
-  "svelte": "esm/index.js",
-  "exports": {
-    ".": {
-      "require": "./dist/index.js",
-      "import": "./esm/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "types": "dist/ts/index.d.ts",
-  "scripts": {
-    "test": "jest src",
-    "test:watch": "npm run test -- --watch",
-    "svelte-check": "svelte-check --ignore 'dist'",
-    "prebuild": "rm -rf ./dist",
-    "build": "npm run svelte-check && tsc -m commonjs && node scripts/preprocess.js && rm -rf dist/tests",
-    "prepublishOnly": "npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:txstate-etc/svelte-components.git"
-  },
-  "author": "Nick Wing",
-  "license": "MIT",
   "dependencies": {
-    "fast-deep-equal": "^3.1.3",
-    "rfdc": "^1.2.0",
-    "tabbable": "^5.1.5",
-    "txstate-utils": "^1.4.0"
+    "@txstate-mws/svelte-store": "^1.0.3",
+    "tabbable": "^5.2.1",
+    "txstate-utils": "^1.6.0"
   },
   "devDependencies": {
-    "@storybook/svelte": "^6.2.9",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/svelte": "^3.0.3",
-    "@testing-library/user-event": "^13.1.9",
-    "@tsconfig/svelte": "^3.0.0",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^15.3.1",
-    "babel-jest": "^27.3.1",
+    "@playwright/test": "^1.18.1",
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "@types/tabbable": "^3.1.2",
     "eslint-config-standard-with-typescript": "^21.0.1",
-    "eslint-plugin-svelte3": "^3.0.0",
-    "fs-extra": "^10.0.0",
-    "glob": "^7.1.6",
-    "jest": "^27.3.1",
-    "svelte": "^3.37.0",
-    "svelte-check": "^2.1.0",
-    "svelte-jester": "^2.1.5",
-    "svelte-preprocess": "^4.6.5",
-    "ts-jest": "^27.0.7",
-    "tslib": "^2.1.0",
-    "typescript": "^4.1.3"
+    "eslint-plugin-svelte3": "^3.2.1",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.2.6",
+    "svelte-preprocess": "^4.9.4",
+    "svelte2tsx": "^0.5.2",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.3"
   },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "transform": {
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.ts$": "ts-jest",
-      "^.+\\.svelte$": [
-        "svelte-jester",
-        {
-          "preprocess": true
-        }
-      ]
-    },
-    "transformIgnorePatterns": [],
-    "moduleFileExtensions": [
-      "js",
-      "ts",
-      "svelte"
-    ],
-    "setupFilesAfterEnv": [
-      "@testing-library/jest-dom"
-    ]
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    "./actions/buttonify": "./actions/buttonify.js",
+    "./actions/glue": "./actions/glue.js",
+    "./actions": "./actions/index.js",
+    "./actions/offset": "./actions/offset.js",
+    "./actions/portal": "./actions/portal.js",
+    "./actions/resize": "./actions/resize.js",
+    "./actions/sticky": "./actions/sticky.js",
+    "./actions/stickyfixed": "./actions/stickyfixed.js",
+    "./components/Card.svelte": "./components/Card.svelte",
+    "./components/CardLayout.svelte": "./components/CardLayout.svelte",
+    "./components/CollapsingTable.svelte": "./components/CollapsingTable.svelte",
+    "./components/ConditionalWrapper.svelte": "./components/ConditionalWrapper.svelte",
+    "./components/FocusLock.svelte": "./components/FocusLock.svelte",
+    "./components/Modal.svelte": "./components/Modal.svelte",
+    "./components/MultiSelect.svelte": "./components/MultiSelect.svelte",
+    "./components/PopupMenu.svelte": "./components/PopupMenu.svelte",
+    "./components/ScreenReaderOnly.svelte": "./components/ScreenReaderOnly.svelte",
+    "./components": "./components/index.js",
+    ".": "./index.js",
+    "./types/CardLayout": "./types/CardLayout.js",
+    "./types/CollapsingTable": "./types/CollapsingTable.js",
+    "./types/PopupMenu": "./types/PopupMenu.js",
+    "./types": "./types/index.js",
+    "./util/bodyoffset": "./util/bodyoffset.js",
+    "./util": "./util/index.js",
+    "./util/repositioned": "./util/repositioned.js",
+    "./util/util": "./util/util.js"
   },
-  "sideEffects": false,
-  "files": [
-    "dist",
-    "esm",
-    "docs"
-  ]
-}
+  "svelte": "./index.js"
+}

package/types/CardLayout.d.ts

@@ -0,0 +1,14 @@
+import type { SettableSubject } from '@txstate-mws/svelte-store';
+export declare const CARDLAYOUT: {};
+export interface Block {
+    element: HTMLElement;
+    order?: SettableSubject<number>;
+    linebreak?: SettableSubject<boolean>;
+    width?: SettableSubject<string>;
+    height?: number;
+}
+export interface CardLayoutContext {
+    registerBlock: (block: Block) => Block;
+    recalculate: () => void;
+    gutter: SettableSubject<number>;
+}

package/types/CardLayout.js

@@ -0,0 +1 @@
+export const CARDLAYOUT = {};

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CardLayout.js';
+export * from './CollapsingTable.js';
+export * from './PopupMenu.js';

package/types/index.js

@@ -0,0 +1,3 @@
+export * from './CardLayout.js';
+export * from './CollapsingTable.js';
+export * from './PopupMenu.js';

package/{dist/ts/lib → util}/bodyoffset.d.ts

@@ -1,3 +1,4 @@
+export declare type ElementOffsets = Partial<ReturnType<typeof bodyOffset>>;
 export declare function bodyOffset(ele: HTMLElement): {
     right: number;
     bottom: number;
@@ -10,4 +11,4 @@ export declare function targetOffset(ele: HTMLElement, target: HTMLElement): {
     top: number;
     left: number;
 };
-export declare function sharedOffsetParent(a: HTMLElement, b: HTMLElement): HTMLElement | undefined;
+export declare function sharedOffsetParent(a: HTMLElement, b: HTMLElement): HTMLElement;