@neovici/cosmoz-omnitable 14.21.2 → 14.22.0

package/dist/lib/use-list.js

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

package/dist/lib/use-mini.js

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

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

@@ -16,8 +16,16 @@ export function useOmnitable(host: any): {
         compareItemsFn: any;
         displayEmptyGroups: any;
         error: any;
-        renderItem: any;
-        renderGroup: 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>;
     };
     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,34 +1,31 @@
-"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), 
+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), 
     // TODO: drop filterFunctions
-    { processedItems, visibleData, filters, setFilterState, filterFunctions } = (0, use_processed_items_1.useProcessedItems)({
+    { processedItems, visibleData, filters, setFilterState, filterFunctions } = useProcessedItems({
         data,
         columns,
         hashParam,
         sortAndGroupOptions,
         noLocalSort,
         noLocalFilter,
-    }), { isMini, collapsedColumns, miniColumns } = (0, use_fast_layout_1.useFastLayout)({
+    }), { isMini, collapsedColumns, miniColumns } = useFastLayout({
         host,
         columns,
         settings,
         setSettings,
         resizeSpeedFactor,
         sortAndGroupOptions,
-    }), dataIsValid = data && Array.isArray(data) && data.length > 0, [selectedItems, setSelectedItems] = (0, pion_1.useState)([]);
-    (0, use_public_interface_1.usePublicInterface)({
+    }), dataIsValid = data && Array.isArray(data) && data.length > 0, [selectedItems, setSelectedItems] = useState([]);
+    usePublicInterface({
         host,
         visibleData,
         sortedFilteredGroupedItems: processedItems,
@@ -40,7 +37,7 @@ const useOmnitable = (host) => {
         ...sortAndGroupOptions,
     });
     return {
-        header: (0, use_header_1.useHeader)({
+        header: useHeader({
             host,
             selectedItems,
             sortAndGroupOptions,
@@ -55,7 +52,7 @@ const useOmnitable = (host) => {
             setFilterState,
             hideSelectAll: host.hideSelectAll === true,
         }),
-        list: (0, use_list_1.useList)({
+        list: useList({
             host,
             error,
             dataIsValid,
@@ -67,12 +64,11 @@ const useOmnitable = (host) => {
             sortAndGroupOptions,
             rowPartFn,
         }),
-        footer: (0, use_footer_1.useFooter)({
+        footer: useFooter({
             host,
             selectedItems,
             columns,
         }),
     };
 };
-exports.useOmnitable = useOmnitable;
 //# sourceMappingURL=use-omnitable.js.map

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

@@ -7,9 +7,11 @@ export function useProcessedItems({ data, columns, hashParam, sortAndGroupOption
     noLocalFilter: any;
 }): {
     processedItems: any;
-    visibleData: any;
+    visibleData: any[];
     filters: any;
-    filterFunctions: any;
-    setFilterState: any;
+    filterFunctions: {
+        [k: string]: any;
+    };
+    setFilterState: (name: any, state: any) => 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,28 +1,25 @@
-"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) => {
+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) => {
     if (!column || !changes) {
         return;
     }
     Object.entries(changes).forEach(([key, value]) => {
-        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`, {
+        column[columnSymbol].__ownChange = true;
+        column[columnSymbol][key] = value;
+        column[columnSymbol].__ownChange = false;
+        column[columnSymbol].dispatchEvent(new CustomEvent(`${kebab(key)}-changed`, {
             bubbles: true,
             detail: { 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]) => {
+}, 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]) => {
         const column = columns.find(({ name }) => name === filter);
         if (column == null) {
             return [filter, undefined];
@@ -31,7 +28,7 @@ const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOptions, noLo
             filter,
             value.filter && column.serializeFilter(column, value.filter),
         ];
-    }, [columns]), read = (0, pion_1.useCallback)(([filter, value]) => {
+    }, [columns]), read = useCallback(([filter, value]) => {
         const column = columns.find(({ name }) => name === filter);
         if (column == null) {
             return [filter, { [unparsed]: value }];
@@ -39,18 +36,18 @@ const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOptions, noLo
         const state = { filter: column.deserializeFilter(column, value) };
         notifyChanges(column, state);
         return [filter, state];
-    }, [columns]), [filters, setFilters] = (0, use_hash_state_1.useHashState)({}, hashParam, {
+    }, [columns]), [filters, setFilters] = useHashState({}, hashParam, {
         multi: true,
         suffix: '-filter--',
         write,
         read,
     }), 
     // TODO: drop extra info from state
-    setFilterState = (0, pion_1.useCallback)((name, state) => setFilters((filters) => {
-        const newState = (0, function_1.invoke)(state, filters[name]);
+    setFilterState = useCallback((name, state) => setFilters((filters) => {
+        const newState = invoke(state, filters[name]);
         notifyChanges(columns.find((c) => c.name === name), newState);
         return { ...filters, [name]: { ...filters[name], ...newState } };
-    }), [columns, setFilters]), filterValues = (0, pion_1.useMemo)(() => Object.values(filters).map((f) => f.filter), [filters]), filterFunctions = (0, pion_1.useMemo)(() => {
+    }), [columns, setFilters]), filterValues = useMemo(() => Object.values(filters).map((f) => f.filter), [filters]), filterFunctions = useMemo(() => {
         return Object.fromEntries(columns
             .map((col) => [
             col.name,
@@ -58,7 +55,7 @@ const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOptions, noLo
                 col.getFilterFn(col, filters[col.name]?.filter),
         ])
             .filter(([, fn]) => !!fn));
-    }, [columns, ...filterValues]), filteredItems = (0, pion_1.useMemo)(() => {
+    }, [columns, ...filterValues]), filteredItems = useMemo(() => {
         if (!Array.isArray(data) || data.length === 0) {
             return [];
         }
@@ -68,7 +65,7 @@ const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOptions, noLo
         return data.filter((item) => Object.values(filterFunctions).every((filterFn) => filterFn(item)));
     }, [data, filterFunctions, noLocalFilter]), 
     // todo: extract function
-    processedItems = (0, pion_1.useMemo)(() => {
+    processedItems = useMemo(() => {
         if (!noLocalSort &&
             !groupOnColumn &&
             sortOnColumn != null &&
@@ -110,7 +107,7 @@ const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOptions, noLo
         sortOnColumn,
         descending,
         noLocalSort,
-    ]), visibleData = (0, pion_1.useMemo)(() => {
+    ]), visibleData = useMemo(() => {
         let index = 0, groupIndex = 0;
         const result = [];
         processedItems.forEach((item) => {
@@ -129,7 +126,7 @@ const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOptions, noLo
     }, [processedItems]);
     // parse un-parsed filter values
     // filters can be left un-parsed if a column was not defined when the URL is read
-    (0, pion_1.useEffect)(() => {
+    useEffect(() => {
         setFilters((filters) => {
             const hasUnparsedFilters = Object.values(filters).some((value) => value[unparsed] != null);
             if (!hasUnparsedFilters) {
@@ -151,5 +148,4 @@ const useProcessedItems = ({ data, columns, hashParam, sortAndGroupOptions, noLo
         setFilterState,
     };
 };
-exports.useProcessedItems = useProcessedItems;
 //# sourceMappingURL=use-processed-items.js.map

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

@@ -1,9 +1,6 @@
-"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");
+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';
 const mkNapi = (host) => {
     const /**
          * Helper method to remove an item from `data`.
@@ -59,11 +56,11 @@ const mkNapi = (host) => {
         },
     };
 };
-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)(() => {
+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 handler = (ev) => setFilterState(ev.detail.name, (state) => ({
             ...state,
             ...ev.detail.state,
@@ -71,16 +68,15 @@ const usePublicInterface = ({ host, visibleData, filters, ...api }) => {
         host.addEventListener('legacy-filter-changed', handler);
         return () => host.removeEventListener('legacy-filter-changed', handler);
     }, []);
-    (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)
+    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)
         .filter(([, { filter }]) => filter !== undefined)
         .map(([key, { filter }]) => [key, filter])), [filters]);
-    (0, use_notify_property_1.useNotifyProperty)('filters', filterValues, Object.values(filterValues));
+    useNotifyProperty('filters', filterValues, Object.values(filterValues));
 };
-exports.usePublicInterface = usePublicInterface;
 //# sourceMappingURL=use-public-interface.js.map

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

@@ -1,9 +1,6 @@
-"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)();
+import { useEffect, useRef } from '@pionjs/pion';
+export const useResizableColumns = ({ host, canvasWidth, layout, setSettings, }) => {
+    const onColumnResizeRef = 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++) {
@@ -32,11 +29,10 @@ const useResizableColumns = ({ host, canvasWidth, layout, setSettings, }) => {
         }
         return { ...settings, columns: newConfig };
     });
-    (0, pion_1.useEffect)(() => {
+    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,3 +1,26 @@
-export function useSortAndGroupOptions(columns: any, hashParam: any, settings: any, setSettings: any, resetRef: any): any;
-export const SortAndGroupContext: any;
+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>;
 //# 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,0HAiE+B;AAArC,sCAAqC"}
+{"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"}

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

@@ -1,18 +1,15 @@
-"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) => {
+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) => {
     setter(value);
     setSettings((s) => ({ ...s, [name]: value }));
 }, [setter, name, setSettings]);
-const useSortAndGroupOptions = (columns, hashParam, settings, setSettings, resetRef) => {
-    const [sortOn, setSortOn] = (0, use_hash_state_1.useHashState)(settings.sortOn, hashParam, {
+export const useSortAndGroupOptions = (columns, hashParam, settings, setSettings, resetRef) => {
+    const [sortOn, setSortOn] = useHashState(settings.sortOn, hashParam, {
         suffix: '-sortOn',
-    }), [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, {
+    }), [descending, setDescending] = useHashState(boolParam(settings.descending), hashParam, { suffix: '-descending', read: boolParam }), [groupOn, setGroupOn] = useHashState(settings.groupOn, hashParam, {
         suffix: '-groupOn',
-    }), [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_ = {
+    }), [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_ = {
         groupOn,
         setGroupOn: useSettingsState(setGroupOn, 'groupOn', setSettings),
         groupOnDescending,
@@ -22,19 +19,18 @@ const useSortAndGroupOptions = (columns, hashParam, settings, setSettings, reset
         descending,
         setDescending: useSettingsState(setDescending, 'descending', setSettings),
         columns,
-    }, sortAndGroup = (0, pion_1.useMemo)(() => sortAndGroup_, Object.values(sortAndGroup_)), setSG = (0, pion_1.useCallback)((c) => {
+    }, sortAndGroup = useMemo(() => sortAndGroup_, Object.values(sortAndGroup_)), setSG = useCallback((c) => {
         setSortOn(c.sortOn);
         setGroupOn(c.groupOn);
         setDescending(c.descending);
         setGroupOnDescending(c.groupOnDescending);
     }, []);
     // eslint-disable-next-line no-void
-    (0, pion_1.useEffect)(() => void (resetRef.current = setSG), []);
+    useEffect(() => void (resetRef.current = setSG), []);
     return { ...sortAndGroup, sortAndGroup, groupOnColumn, sortOnColumn };
-};
-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)), {
+}, SortAndGroupContext = createContext();
+customElements.define('sort-and-group-provider', SortAndGroupContext.Provider);
+customElements.define('sort-and-group-consumer', component(({ render }) => render(useContext(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): any;
+export function useTrackSize(host: any, setCanvasWidth: any): void;
 //# 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,kEAoBA"}
+{"version":3,"file":"use-track-size.d.ts","sourceRoot":"","sources":["../../src/lib/use-track-size.js"],"names":[],"mappings":"AAEO,mEAoBA"}

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

@@ -1,8 +1,5 @@
-"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)(() => {
+import { useEffect } from '@pionjs/pion';
+export const useTrackSize = (host, setCanvasWidth) => useEffect(() => {
     const onResize = ([entry]) => {
         if (entry.contentRect?.width === 0) {
             return;
@@ -15,5 +12,4 @@ const useTrackSize = (host, setCanvasWidth) => (0, pion_1.useEffect)(() => {
     observer.observe(host);
     return () => observer.unobserve(host);
 }, []);
-exports.useTrackSize = useTrackSize;
 //# sourceMappingURL=use-track-size.js.map