@neovici/cosmoz-omnitable 14.17.0 → 14.18.0

package/dist/lib/use-list.js

@@ -1,9 +1,12 @@
-import { html, useCallback, useEffect, useMemo, useRef } from '@pionjs/pion';
-import { when } from 'lit-html/directives/when.js';
-import { isEmpty } from '@neovici/cosmoz-utils/template';
-import { indexSymbol } from './utils';
-import { onItemChange as _onItemChange } from './utils-data';
-const arrow = html `
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useList = void 0;
+const pion_1 = require("@pionjs/pion");
+const when_js_1 = require("lit-html/directives/when.js");
+const template_1 = require("@neovici/cosmoz-utils/template");
+const utils_1 = require("./utils");
+const utils_data_1 = require("./utils-data");
+const arrow = (0, pion_1.html) `
 	<svg
 		viewBox="0 0 24 24"
 		preserveAspectRatio="xMidYMid meet"
@@ -15,9 +18,9 @@ const arrow = html `
 	</svg>
 `;
 const _getGroupRowClasses = (folded) => folded ? 'groupRow groupRow-folded' : 'groupRow';
-const renderMinis = ({ item, index }) => (columns) => when(columns?.length > 0, () => html `
+const renderMinis = ({ item, index }) => (columns) => (0, when_js_1.when)(columns?.length > 0, () => (0, pion_1.html) `
 				<div class="itemRow-minis" part="item-minis">
-					${columns.map((column) => html `<div
+					${columns.map((column) => (0, pion_1.html) `<div
 								class="itemRow-mini"
 								part="item-mini item-mini-${column.name}"
 							>
@@ -28,17 +31,17 @@ const renderMinis = ({ item, index }) => (columns) => when(columns?.length > 0,
 							</div>`)}
 				</div>
 			`);
-const renderItem = ({ columns, collapsedColumns, miniColumns, onItemClick, onCheckboxChange, dataIsValid, groupOnColumn, onItemChange, rowPartFn, }) => (item, index, { selected, expanded, toggleCollapse }) => html `
+const renderItem = ({ columns, collapsedColumns, miniColumns, onItemClick, onCheckboxChange, dataIsValid, groupOnColumn, onItemChange, rowPartFn, }) => (item, index, { selected, expanded, toggleCollapse }) => (0, pion_1.html) `
 		<div
 			?selected=${selected}
 			part="${[
     'itemRow',
-    `itemRow-${item[indexSymbol]}`,
+    `itemRow-${item[utils_1.indexSymbol]}`,
     rowPartFn?.(item, index),
 ]
     .filter(Boolean)
     .join(' ')}"
-			.dataIndex=${item[indexSymbol]}
+			.dataIndex=${item[utils_1.indexSymbol]}
 			.dataItem=${item}
 			class="itemRow"
 			@click=${onItemClick}
@@ -66,7 +69,7 @@ const renderItem = ({ columns, collapsedColumns, miniColumns, onItemClick, onChe
 				</cosmoz-omnitable-item-row>
 				<button
 					class="expand"
-					?hidden="${isEmpty(collapsedColumns.length)}"
+					?hidden="${(0, template_1.isEmpty)(collapsedColumns.length)}"
 					?aria-expanded="${expanded}"
 					@click="${toggleCollapse}"
 				>
@@ -86,9 +89,9 @@ const renderItem = ({ columns, collapsedColumns, miniColumns, onItemClick, onChe
 		>
 		</cosmoz-omnitable-item-expand>
 	`;
-const renderGroup = ({ onCheckboxChange, dataIsValid, groupOnColumn }) => (item, index, { selected, folded, toggleFold }) => html ` <div
+const renderGroup = ({ onCheckboxChange, dataIsValid, groupOnColumn }) => (item, index, { selected, folded, toggleFold }) => (0, pion_1.html) ` <div
 			class="${_getGroupRowClasses(folded)}"
-			part="groupRow groupRow-${item[indexSymbol]}"
+			part="groupRow groupRow-${item[utils_1.indexSymbol]}"
 		>
 			<input
 				class="checkbox"
@@ -113,8 +116,8 @@ const renderGroup = ({ onCheckboxChange, dataIsValid, groupOnColumn }) => (item,
 				${arrow}
 			</button>
 		</div>`;
-export const useList = ({ host, error, dataIsValid, processedItems, columns, collapsedColumns, miniColumns, sortAndGroupOptions, rowPartFn, ...rest }) => {
-    const { loading = false, displayEmptyGroups = false, compareItemsFn } = host, keyState = useRef({ shiftKey: false, ctrlKey: false }), onCheckboxChange = useCallback((event) => {
+const useList = ({ host, error, dataIsValid, processedItems, columns, collapsedColumns, miniColumns, sortAndGroupOptions, rowPartFn, ...rest }) => {
+    const { loading = false, displayEmptyGroups = false, compareItemsFn } = host, keyState = (0, pion_1.useRef)({ shiftKey: false, ctrlKey: false }), onCheckboxChange = (0, pion_1.useCallback)((event) => {
         const item = event.target.dataItem, selected = event.target.checked;
         if (keyState.current.shiftKey) {
             host.shadowRoot
@@ -133,7 +136,7 @@ export const useList = ({ host, error, dataIsValid, processedItems, columns, col
         event.preventDefault();
         event.stopPropagation();
     }, []);
-    useEffect(() => {
+    (0, pion_1.useEffect)(() => {
         const handler = ({ shiftKey, ctrlKey }) => {
             keyState.current = { shiftKey, ctrlKey };
         };
@@ -144,7 +147,7 @@ export const useList = ({ host, error, dataIsValid, processedItems, columns, col
             window.removeEventListener('keyup', handler);
         };
     }, []);
-    const onItemClick = useCallback((e) => {
+    const onItemClick = (0, pion_1.useCallback)((e) => {
         const composedPath = e.composedPath(), path = composedPath.slice(0, composedPath.indexOf(e.currentTarget));
         if (path.find((e) => e.matches?.('a, .checkbox, .expand'))) {
             return;
@@ -158,7 +161,7 @@ export const useList = ({ host, error, dataIsValid, processedItems, columns, col
             },
         }));
     }, []);
-    const { groupOnColumn } = sortAndGroupOptions, onItemChange = useCallback((column, item) => (value) => _onItemChange(host, column, item, value), []);
+    const { groupOnColumn } = sortAndGroupOptions, onItemChange = (0, pion_1.useCallback)((column, item) => (value) => (0, utils_data_1.onItemChange)(host, column, item, value), []);
     return {
         ...rest,
         processedItems,
@@ -168,7 +171,7 @@ export const useList = ({ host, error, dataIsValid, processedItems, columns, col
         compareItemsFn,
         displayEmptyGroups,
         error,
-        renderItem: useMemo(() => renderItem({
+        renderItem: (0, pion_1.useMemo)(() => renderItem({
             columns,
             collapsedColumns,
             miniColumns,
@@ -188,11 +191,12 @@ export const useList = ({ host, error, dataIsValid, processedItems, columns, col
             onItemChange,
             rowPartFn,
         ]),
-        renderGroup: useMemo(() => renderGroup({
+        renderGroup: (0, pion_1.useMemo)(() => renderGroup({
             onCheckboxChange,
             dataIsValid,
             groupOnColumn,
         }), [onCheckboxChange, dataIsValid, groupOnColumn]),
     };
 };
+exports.useList = useList;
 //# sourceMappingURL=use-list.js.map

package/dist/lib/use-mini.d.ts

@@ -3,7 +3,7 @@ export function useMini({ host, canvasWidth, columns: _columns }: {
     canvasWidth: any;
     columns: any;
 }): {
-    isMini: boolean;
+    isMini: any;
     miniColumn: any;
     miniColumns: any;
 };

package/dist/lib/use-mini.js

@@ -1,13 +1,16 @@
-import { useMemo, useEffect } from '@pionjs/pion';
-export const useMini = ({ host, canvasWidth, columns: _columns }) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMini = void 0;
+const pion_1 = require("@pionjs/pion");
+const useMini = ({ host, canvasWidth, columns: _columns }) => {
     const breakpoint = host.miniBreakpoint ?? 480;
-    const isMiniSize = useMemo(() => canvasWidth <= breakpoint, [canvasWidth, breakpoint]);
-    const columns = useMemo(() => isMiniSize
+    const isMiniSize = (0, pion_1.useMemo)(() => canvasWidth <= breakpoint, [canvasWidth, breakpoint]);
+    const columns = (0, pion_1.useMemo)(() => isMiniSize
         ? _columns
             ?.filter((c) => c.mini != null)
             .sort((a, b) => (a.mini ?? 0) - (b.mini ?? 0))
         : [], [_columns, isMiniSize]), [miniColumn, ...miniColumns] = columns ?? [], hasMiniColumn = !!miniColumn;
-    useEffect(() => {
+    (0, pion_1.useEffect)(() => {
         host.toggleAttribute('mini', hasMiniColumn);
     }, [hasMiniColumn]);
     return {
@@ -16,4 +19,5 @@ export const useMini = ({ host, canvasWidth, columns: _columns }) => {
         miniColumns,
     };
 };
+exports.useMini = useMini;
 //# sourceMappingURL=use-mini.js.map

package/dist/lib/use-omnitable.d.ts

@@ -16,16 +16,8 @@ export function useOmnitable(host: any): {
         compareItemsFn: any;
         displayEmptyGroups: any;
         error: any;
-        renderItem: (item: any, index: any, { selected, expanded, toggleCollapse }: {
-            selected: any;
-            expanded: any;
-            toggleCollapse: any;
-        }) => import("lit-html").TemplateResult<1>;
-        renderGroup: (item: any, index: any, { selected, folded, toggleFold }: {
-            selected: any;
-            folded: any;
-            toggleFold: any;
-        }) => import("lit-html").TemplateResult<1>;
+        renderItem: any;
+        renderGroup: any;
     };
     footer: {
         csvFilename: any;

package/dist/lib/use-omnitable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-omnitable.d.ts","sourceRoot":"","sources":["../../src/lib/use-omnitable.js"],"names":[],"mappings":"AAUO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwFN"}
+{"version":3,"file":"use-omnitable.d.ts","sourceRoot":"","sources":["../../src/lib/use-omnitable.js"],"names":[],"mappings":"AAUO;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwFN"}

package/dist/lib/use-omnitable.js

@@ -1,31 +1,34 @@
-import { useState } from '@pionjs/pion';
-import { useSettings } from './settings';
-import { useFastLayout } from './use-fast-layout';
-import { useFooter } from './use-footer';
-import { useHeader } from './use-header';
-import { useList } from './use-list';
-import { useProcessedItems } from './use-processed-items';
-import { usePublicInterface } from './use-public-interface';
-import { useSortAndGroupOptions } from './use-sort-and-group-options';
-export const useOmnitable = (host) => {
-    const { hashParam, settingsId, data, resizeSpeedFactor, noLocal, noLocalSort = noLocal, noLocalFilter = noLocal, error, rowPartFn, } = host, settingS = useSettings({ settingsId, host }), { settings, setSettings, columns, resetRef } = settingS, sortAndGroupOptions = useSortAndGroupOptions(columns, hashParam, settings, setSettings, resetRef), 
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOmnitable = void 0;
+const pion_1 = require("@pionjs/pion");
+const settings_1 = require("./settings");
+const use_fast_layout_1 = require("./use-fast-layout");
+const use_footer_1 = require("./use-footer");
+const use_header_1 = require("./use-header");
+const use_list_1 = require("./use-list");
+const use_processed_items_1 = require("./use-processed-items");
+const use_public_interface_1 = require("./use-public-interface");
+const use_sort_and_group_options_1 = require("./use-sort-and-group-options");
+const useOmnitable = (host) => {
+    const { hashParam, settingsId, data, resizeSpeedFactor, noLocal, noLocalSort = noLocal, noLocalFilter = noLocal, error, rowPartFn, } = host, settingS = (0, settings_1.useSettings)({ settingsId, host }), { settings, setSettings, columns, resetRef } = settingS, sortAndGroupOptions = (0, use_sort_and_group_options_1.useSortAndGroupOptions)(columns, hashParam, settings, setSettings, resetRef), 
     // TODO: drop filterFunctions
-    { processedItems, visibleData, filters, setFilterState, filterFunctions } = useProcessedItems({
+    { processedItems, visibleData, filters, setFilterState, filterFunctions } = (0, use_processed_items_1.useProcessedItems)({
         data,
         columns,
         hashParam,
         sortAndGroupOptions,
         noLocalSort,
         noLocalFilter,
-    }), { isMini, collapsedColumns, miniColumns } = useFastLayout({
+    }), { isMini, collapsedColumns, miniColumns } = (0, use_fast_layout_1.useFastLayout)({
         host,
         columns,
         settings,
         setSettings,
         resizeSpeedFactor,
         sortAndGroupOptions,
-    }), dataIsValid = data && Array.isArray(data) && data.length > 0, [selectedItems, setSelectedItems] = useState([]);
-    usePublicInterface({
+    }), dataIsValid = data && Array.isArray(data) && data.length > 0, [selectedItems, setSelectedItems] = (0, pion_1.useState)([]);
+    (0, use_public_interface_1.usePublicInterface)({
         host,
         visibleData,
         sortedFilteredGroupedItems: processedItems,
@@ -37,7 +40,7 @@ export const useOmnitable = (host) => {
         ...sortAndGroupOptions,
     });
     return {
-        header: useHeader({
+        header: (0, use_header_1.useHeader)({
             host,
             selectedItems,
             sortAndGroupOptions,
@@ -52,7 +55,7 @@ export const useOmnitable = (host) => {
             setFilterState,
             hideSelectAll: host.hideSelectAll === true,
         }),
-        list: useList({
+        list: (0, use_list_1.useList)({
             host,
             error,
             dataIsValid,
@@ -64,11 +67,12 @@ export const useOmnitable = (host) => {
             sortAndGroupOptions,
             rowPartFn,
         }),
-        footer: useFooter({
+        footer: (0, use_footer_1.useFooter)({
             host,
             selectedItems,
             columns,
         }),
     };
 };
+exports.useOmnitable = useOmnitable;
 //# sourceMappingURL=use-omnitable.js.map

package/dist/lib/use-processed-items.d.ts

@@ -7,11 +7,9 @@ export function useProcessedItems({ data, columns, hashParam, sortAndGroupOption
     noLocalFilter: any;
 }): {
     processedItems: any;
-    visibleData: any[];
+    visibleData: any;
     filters: any;
-    filterFunctions: {
-        [k: string]: any;
-    };
-    setFilterState: (name: any, state: any) => any;
+    filterFunctions: any;
+    setFilterState: any;
 };
 //# sourceMappingURL=use-processed-items.d.ts.map

package/dist/lib/use-processed-items.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-processed-items.d.ts","sourceRoot":"","sources":["../../src/lib/use-processed-items.js"],"names":[],"mappings":"AA+BO;;;;;;;;;;;;;;;EA8NN"}
+{"version":3,"file":"use-processed-items.d.ts","sourceRoot":"","sources":["../../src/lib/use-processed-items.js"],"names":[],"mappings":"AA+BO;;;;;;;;;;;;;EA8NN"}

package/dist/lib/use-processed-items.js

@@ -1,25 +1,28 @@
-import { useCallback, useEffect, useMemo } from '@pionjs/pion';
-import { invoke } from '@neovici/cosmoz-utils/function';
-import { genericSorter } from './generic-sorter';
-import { columnSymbol } from './use-dom-columns';
-import { useHashState } from './use-hash-state';
-import { indexSymbol } from './utils';
-const sortBy = (valueFn, descending) => (a, b) => genericSorter(valueFn(a), valueFn(b)) * (descending ? -1 : 1), kebab = (input) => input.replace(/([a-z0-9])([A-Z])/gu, '$1-$2').toLowerCase(), notifyChanges = (column, changes) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProcessedItems = void 0;
+const pion_1 = require("@pionjs/pion");
+const function_1 = require("@neovici/cosmoz-utils/function");
+const generic_sorter_1 = require("./generic-sorter");
+const use_dom_columns_1 = require("./use-dom-columns");
+const use_hash_state_1 = require("./use-hash-state");
+const utils_1 = require("./utils");
+const sortBy = (valueFn, descending) => (a, b) => (0, generic_sorter_1.genericSorter)(valueFn(a), valueFn(b)) * (descending ? -1 : 1), kebab = (input) => input.replace(/([a-z0-9])([A-Z])/gu, '$1-$2').toLowerCase(), notifyChanges = (column, changes) => {
     if (!column || !changes) {
         return;
     }
     Object.entries(changes).forEach(([key, value]) => {
-        column[columnSymbol].__ownChange = true;
-        column[columnSymbol][key] = value;
-        column[columnSymbol].__ownChange = false;
-        column[columnSymbol].dispatchEvent(new CustomEvent(`${kebab(key)}-changed`, {
+        column[use_dom_columns_1.columnSymbol].__ownChange = true;
+        column[use_dom_columns_1.columnSymbol][key] = value;
+        column[use_dom_columns_1.columnSymbol].__ownChange = false;
+        column[use_dom_columns_1.columnSymbol].dispatchEvent(new CustomEvent(`${kebab(key)}-changed`, {
             bubbles: true,
             detail: { value },
         }));
     });
-}, assignIndex = (item, index) => Object.assign(item, { [indexSymbol]: index }), unparsed = Symbol('unparsed');
-export const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOptions, noLocalSort, noLocalFilter, }) => {
-    const { groupOnColumn, groupOnDescending, sortOnColumn, descending } = sortAndGroupOptions, write = useCallback(([filter, value]) => {
+}, assignIndex = (item, index) => Object.assign(item, { [utils_1.indexSymbol]: index }), unparsed = Symbol('unparsed');
+const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOptions, noLocalSort, noLocalFilter, }) => {
+    const { groupOnColumn, groupOnDescending, sortOnColumn, descending } = sortAndGroupOptions, write = (0, pion_1.useCallback)(([filter, value]) => {
         const column = columns.find(({ name }) => name === filter);
         if (column == null) {
             return [filter, undefined];
@@ -28,7 +31,7 @@ export const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOption
             filter,
             value.filter && column.serializeFilter(column, value.filter),
         ];
-    }, [columns]), read = useCallback(([filter, value]) => {
+    }, [columns]), read = (0, pion_1.useCallback)(([filter, value]) => {
         const column = columns.find(({ name }) => name === filter);
         if (column == null) {
             return [filter, { [unparsed]: value }];
@@ -36,18 +39,18 @@ export const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOption
         const state = { filter: column.deserializeFilter(column, value) };
         notifyChanges(column, state);
         return [filter, state];
-    }, [columns]), [filters, setFilters] = useHashState({}, hashParam, {
+    }, [columns]), [filters, setFilters] = (0, use_hash_state_1.useHashState)({}, hashParam, {
         multi: true,
         suffix: '-filter--',
         write,
         read,
     }), 
     // TODO: drop extra info from state
-    setFilterState = useCallback((name, state) => setFilters((filters) => {
-        const newState = invoke(state, filters[name]);
+    setFilterState = (0, pion_1.useCallback)((name, state) => setFilters((filters) => {
+        const newState = (0, function_1.invoke)(state, filters[name]);
         notifyChanges(columns.find((c) => c.name === name), newState);
         return { ...filters, [name]: { ...filters[name], ...newState } };
-    }), [columns, setFilters]), filterValues = useMemo(() => Object.values(filters).map((f) => f.filter), [filters]), filterFunctions = useMemo(() => {
+    }), [columns, setFilters]), filterValues = (0, pion_1.useMemo)(() => Object.values(filters).map((f) => f.filter), [filters]), filterFunctions = (0, pion_1.useMemo)(() => {
         return Object.fromEntries(columns
             .map((col) => [
             col.name,
@@ -55,7 +58,7 @@ export const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOption
                 col.getFilterFn(col, filters[col.name]?.filter),
         ])
             .filter(([, fn]) => !!fn));
-    }, [columns, ...filterValues]), filteredItems = useMemo(() => {
+    }, [columns, ...filterValues]), filteredItems = (0, pion_1.useMemo)(() => {
         if (!Array.isArray(data) || data.length === 0) {
             return [];
         }
@@ -65,7 +68,7 @@ export const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOption
         return data.filter((item) => Object.values(filterFunctions).every((filterFn) => filterFn(item)));
     }, [data, filterFunctions, noLocalFilter]), 
     // todo: extract function
-    processedItems = useMemo(() => {
+    processedItems = (0, pion_1.useMemo)(() => {
         if (!noLocalSort &&
             !groupOnColumn &&
             sortOnColumn != null &&
@@ -107,7 +110,7 @@ export const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOption
         sortOnColumn,
         descending,
         noLocalSort,
-    ]), visibleData = useMemo(() => {
+    ]), visibleData = (0, pion_1.useMemo)(() => {
         let index = 0, groupIndex = 0;
         const result = [];
         processedItems.forEach((item) => {
@@ -126,7 +129,7 @@ export const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOption
     }, [processedItems]);
     // parse un-parsed filter values
     // filters can be left un-parsed if a column was not defined when the URL is read
-    useEffect(() => {
+    (0, pion_1.useEffect)(() => {
         setFilters((filters) => {
             const hasUnparsedFilters = Object.values(filters).some((value) => value[unparsed] != null);
             if (!hasUnparsedFilters) {
@@ -148,4 +151,5 @@ export const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOption
         setFilterState,
     };
 };
+exports.useProcessedItems = useProcessedItems;
 //# sourceMappingURL=use-processed-items.js.map

package/dist/lib/use-public-interface.js

@@ -1,6 +1,9 @@
-import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
-import { useEffect, useMemo } from '@pionjs/pion';
-import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePublicInterface = void 0;
+const use_imperative_api_1 = require("@neovici/cosmoz-utils/hooks/use-imperative-api");
+const pion_1 = require("@pionjs/pion");
+const use_notify_property_1 = require("@neovici/cosmoz-utils/hooks/use-notify-property");
 const mkNapi = (host) => {
     const /**
          * Helper method to remove an item from `data`.
@@ -56,11 +59,11 @@ const mkNapi = (host) => {
         },
     };
 };
-export const usePublicInterface = ({ host, visibleData, filters, ...api }) => {
-    const { setFilterState } = api, napi = useMemo(() => mkNapi(host), []);
-    useImperativeApi(api, Object.values(api));
-    useImperativeApi(napi, Object.values(napi));
-    useEffect(() => {
+const usePublicInterface = ({ host, visibleData, filters, ...api }) => {
+    const { setFilterState } = api, napi = (0, pion_1.useMemo)(() => mkNapi(host), []);
+    (0, use_imperative_api_1.useImperativeApi)(api, Object.values(api));
+    (0, use_imperative_api_1.useImperativeApi)(napi, Object.values(napi));
+    (0, pion_1.useEffect)(() => {
         const handler = (ev) => setFilterState(ev.detail.name, (state) => ({
             ...state,
             ...ev.detail.state,
@@ -68,15 +71,16 @@ export const usePublicInterface = ({ host, visibleData, filters, ...api }) => {
         host.addEventListener('legacy-filter-changed', handler);
         return () => host.removeEventListener('legacy-filter-changed', handler);
     }, []);
-    useNotifyProperty('visibleData', visibleData);
-    useNotifyProperty('sortedFilteredGroupedItems', api.sortedFilteredGroupedItems);
-    useNotifyProperty('selectedItems', api.selectedItems);
-    useNotifyProperty('sortOn', api.sortOn);
-    useNotifyProperty('descending', api.descending);
-    useNotifyProperty('isMini', api.isMini);
-    const filterValues = useMemo(() => Object.fromEntries(Object.entries(filters)
+    (0, use_notify_property_1.useNotifyProperty)('visibleData', visibleData);
+    (0, use_notify_property_1.useNotifyProperty)('sortedFilteredGroupedItems', api.sortedFilteredGroupedItems);
+    (0, use_notify_property_1.useNotifyProperty)('selectedItems', api.selectedItems);
+    (0, use_notify_property_1.useNotifyProperty)('sortOn', api.sortOn);
+    (0, use_notify_property_1.useNotifyProperty)('descending', api.descending);
+    (0, use_notify_property_1.useNotifyProperty)('isMini', api.isMini);
+    const filterValues = (0, pion_1.useMemo)(() => Object.fromEntries(Object.entries(filters)
         .filter(([, { filter }]) => filter !== undefined)
         .map(([key, { filter }]) => [key, filter])), [filters]);
-    useNotifyProperty('filters', filterValues, Object.values(filterValues));
+    (0, use_notify_property_1.useNotifyProperty)('filters', filterValues, Object.values(filterValues));
 };
+exports.usePublicInterface = usePublicInterface;
 //# sourceMappingURL=use-public-interface.js.map

package/dist/lib/use-resizable-columns.js

@@ -1,6 +1,9 @@
-import { useEffect, useRef } from '@pionjs/pion';
-export const useResizableColumns = ({ host, canvasWidth, layout, setSettings, }) => {
-    const onColumnResizeRef = useRef();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizableColumns = void 0;
+const pion_1 = require("@pionjs/pion");
+const useResizableColumns = ({ host, canvasWidth, layout, setSettings, }) => {
+    const onColumnResizeRef = (0, pion_1.useRef)();
     onColumnResizeRef.current = (ev) => setSettings((settings) => {
         const config = settings.columns, { detail: { newWidth, column }, } = ev, columnIndex = config.findIndex((c) => c.name === column.name), newConfig = [], maxPriority = config.reduce((p, c) => Math.max(p, c.priority), -Infinity);
         for (let i = 0; i < layout.length; i++) {
@@ -29,10 +32,11 @@ export const useResizableColumns = ({ host, canvasWidth, layout, setSettings, })
         }
         return { ...settings, columns: newConfig };
     });
-    useEffect(() => {
+    (0, pion_1.useEffect)(() => {
         const handler = (ev) => onColumnResizeRef.current(ev);
         host.addEventListener('column-resize', handler);
         return () => host.removeEventListener('column-resize', handler);
     }, []);
 };
+exports.useResizableColumns = useResizableColumns;
 //# sourceMappingURL=use-resizable-columns.js.map

package/dist/lib/use-sort-and-group-options.d.ts

@@ -1,26 +1,3 @@
-export function useSortAndGroupOptions(columns: any, hashParam: any, settings: any, setSettings: any, resetRef: any): {
-    sortAndGroup: {
-        groupOn: any;
-        setGroupOn: (value: any) => void;
-        groupOnDescending: any;
-        setGroupOnDescending: (value: any) => void;
-        sortOn: any;
-        setSortOn: (value: any) => void;
-        descending: any;
-        setDescending: (value: any) => void;
-        columns: any;
-    };
-    groupOnColumn: any;
-    sortOnColumn: any;
-    groupOn: any;
-    setGroupOn: (value: any) => void;
-    groupOnDescending: any;
-    setGroupOnDescending: (value: any) => void;
-    sortOn: any;
-    setSortOn: (value: any) => void;
-    descending: any;
-    setDescending: (value: any) => void;
-    columns: any;
-};
-export const SortAndGroupContext: import("@pionjs/pion/lib/create-context").Context<any>;
+export function useSortAndGroupOptions(columns: any, hashParam: any, settings: any, setSettings: any, resetRef: any): any;
+export const SortAndGroupContext: any;
 //# sourceMappingURL=use-sort-and-group-options.d.ts.map

package/dist/lib/use-sort-and-group-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-sort-and-group-options.d.ts","sourceRoot":"","sources":["../../src/lib/use-sort-and-group-options.js"],"names":[],"mappings":"AAqBO;;;;;;;;;;;;;;;;;;;;;;;EAiE+B;AAArC,yFAAqC"}
+{"version":3,"file":"use-sort-and-group-options.d.ts","sourceRoot":"","sources":["../../src/lib/use-sort-and-group-options.js"],"names":[],"mappings":"AAqBO,0HAiE+B;AAArC,sCAAqC"}

package/dist/lib/use-sort-and-group-options.js

@@ -1,15 +1,18 @@
-import { useMemo, createContext, component, useContext, useCallback, useEffect, } from '@pionjs/pion';
-import { useHashState } from './use-hash-state';
-const parseBool = (bool) => [true, 'true', 1, 'yes', 'on'].includes(bool), boolParam = (p) => p === '' || (p == null ? undefined : parseBool(p)), useSettingsState = (setter, name, setSettings) => useCallback((value) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortAndGroupContext = exports.useSortAndGroupOptions = void 0;
+const pion_1 = require("@pionjs/pion");
+const use_hash_state_1 = require("./use-hash-state");
+const parseBool = (bool) => [true, 'true', 1, 'yes', 'on'].includes(bool), boolParam = (p) => p === '' || (p == null ? undefined : parseBool(p)), useSettingsState = (setter, name, setSettings) => (0, pion_1.useCallback)((value) => {
     setter(value);
     setSettings((s) => ({ ...s, [name]: value }));
 }, [setter, name, setSettings]);
-export const useSortAndGroupOptions = (columns, hashParam, settings, setSettings, resetRef) => {
-    const [sortOn, setSortOn] = useHashState(settings.sortOn, hashParam, {
+const useSortAndGroupOptions = (columns, hashParam, settings, setSettings, resetRef) => {
+    const [sortOn, setSortOn] = (0, use_hash_state_1.useHashState)(settings.sortOn, hashParam, {
         suffix: '-sortOn',
-    }), [descending, setDescending] = useHashState(boolParam(settings.descending), hashParam, { suffix: '-descending', read: boolParam }), [groupOn, setGroupOn] = useHashState(settings.groupOn, hashParam, {
+    }), [descending, setDescending] = (0, use_hash_state_1.useHashState)(boolParam(settings.descending), hashParam, { suffix: '-descending', read: boolParam }), [groupOn, setGroupOn] = (0, use_hash_state_1.useHashState)(settings.groupOn, hashParam, {
         suffix: '-groupOn',
-    }), [groupOnDescending, setGroupOnDescending] = useHashState(boolParam(settings.groupOnDescending), hashParam, { suffix: '-groupOnDescending', read: boolParam }), sortOnColumn = useMemo(() => columns.find((column) => column.name === sortOn), [columns, sortOn]), groupOnColumn = useMemo(() => columns.find((column) => column.name === groupOn), [columns, groupOn]), sortAndGroup_ = {
+    }), [groupOnDescending, setGroupOnDescending] = (0, use_hash_state_1.useHashState)(boolParam(settings.groupOnDescending), hashParam, { suffix: '-groupOnDescending', read: boolParam }), sortOnColumn = (0, pion_1.useMemo)(() => columns.find((column) => column.name === sortOn), [columns, sortOn]), groupOnColumn = (0, pion_1.useMemo)(() => columns.find((column) => column.name === groupOn), [columns, groupOn]), sortAndGroup_ = {
         groupOn,
         setGroupOn: useSettingsState(setGroupOn, 'groupOn', setSettings),
         groupOnDescending,
@@ -19,18 +22,19 @@ export const useSortAndGroupOptions = (columns, hashParam, settings, setSettings
         descending,
         setDescending: useSettingsState(setDescending, 'descending', setSettings),
         columns,
-    }, sortAndGroup = useMemo(() => sortAndGroup_, Object.values(sortAndGroup_)), setSG = useCallback((c) => {
+    }, sortAndGroup = (0, pion_1.useMemo)(() => sortAndGroup_, Object.values(sortAndGroup_)), setSG = (0, pion_1.useCallback)((c) => {
         setSortOn(c.sortOn);
         setGroupOn(c.groupOn);
         setDescending(c.descending);
         setGroupOnDescending(c.groupOnDescending);
     }, []);
     // eslint-disable-next-line no-void
-    useEffect(() => void (resetRef.current = setSG), []);
+    (0, pion_1.useEffect)(() => void (resetRef.current = setSG), []);
     return { ...sortAndGroup, sortAndGroup, groupOnColumn, sortOnColumn };
-}, SortAndGroupContext = createContext();
-customElements.define('sort-and-group-provider', SortAndGroupContext.Provider);
-customElements.define('sort-and-group-consumer', component(({ render }) => render(useContext(SortAndGroupContext)), {
+};
+exports.useSortAndGroupOptions = useSortAndGroupOptions, exports.SortAndGroupContext = (0, pion_1.createContext)();
+customElements.define('sort-and-group-provider', exports.SortAndGroupContext.Provider);
+customElements.define('sort-and-group-consumer', (0, pion_1.component)(({ render }) => render((0, pion_1.useContext)(exports.SortAndGroupContext)), {
     useShadowDOM: false,
 }));
 //# sourceMappingURL=use-sort-and-group-options.js.map

package/dist/lib/use-track-size.d.ts

@@ -1,2 +1,2 @@
-export function useTrackSize(host: any, setCanvasWidth: any): void;
+export function useTrackSize(host: any, setCanvasWidth: any): any;
 //# sourceMappingURL=use-track-size.d.ts.map

package/dist/lib/use-track-size.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-track-size.d.ts","sourceRoot":"","sources":["../../src/lib/use-track-size.js"],"names":[],"mappings":"AAEO,mEAoBA"}
+{"version":3,"file":"use-track-size.d.ts","sourceRoot":"","sources":["../../src/lib/use-track-size.js"],"names":[],"mappings":"AAEO,kEAoBA"}

package/dist/lib/use-track-size.js

@@ -1,5 +1,8 @@
-import { useEffect } from '@pionjs/pion';
-export const useTrackSize = (host, setCanvasWidth) => useEffect(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTrackSize = void 0;
+const pion_1 = require("@pionjs/pion");
+const useTrackSize = (host, setCanvasWidth) => (0, pion_1.useEffect)(() => {
     const onResize = ([entry]) => {
         if (entry.contentRect?.width === 0) {
             return;
@@ -12,4 +15,5 @@ export const useTrackSize = (host, setCanvasWidth) => useEffect(() => {
     observer.observe(host);
     return () => observer.unobserve(host);
 }, []);
+exports.useTrackSize = useTrackSize;
 //# sourceMappingURL=use-track-size.js.map

package/dist/lib/use-tween-array.d.ts

@@ -1,3 +1,3 @@
 export function isCloseEnough(a?: number, b?: number): boolean;
-export function useTweenArray(target: any, speedFactor?: number, callback?: any): void;
+export function useTweenArray(target: any, speedFactor?: number, callback?: () => undefined): void;
 //# sourceMappingURL=use-tween-array.d.ts.map

package/dist/lib/use-tween-array.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-tween-array.d.ts","sourceRoot":"","sources":["../../src/lib/use-tween-array.js"],"names":[],"mappings":"AAoCO,+DAuBL;AAvBK,uFAuBL"}
+{"version":3,"file":"use-tween-array.d.ts","sourceRoot":"","sources":["../../src/lib/use-tween-array.js"],"names":[],"mappings":"AAoCO,+DAuBL;AAvBK,mGAuBL"}