@neovici/cosmoz-omnitable 14.21.3 → 14.22.0

package/dist/cosmoz-omnitable-item-expand.js

@@ -1,11 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const pion_1 = require("@pionjs/pion");
-const lit_html_1 = require("lit-html");
-const map_js_1 = require("lit-html/directives/map.js");
-require("./cosmoz-omnitable-item-expand-line");
+import { component } from '@pionjs/pion';
+import { html } from 'lit-html';
+import { map } from 'lit-html/directives/map.js';
+import './cosmoz-omnitable-item-expand-line';
 const ItemExpand = ({ columns, item, selected, expanded, groupOnColumn }) => {
-    return (0, map_js_1.map)(columns, (column) => (0, lit_html_1.html) `<cosmoz-omnitable-item-expand-line
+    return map(columns, (column) => html `<cosmoz-omnitable-item-expand-line
 				.column=${column}
 				?hidden=${column === groupOnColumn}
 				exportparts="item-expand-label, item-expand-value"
@@ -16,7 +14,7 @@ const ItemExpand = ({ columns, item, selected, expanded, groupOnColumn }) => {
     })}</cosmoz-omnitable-item-expand-line
 			>`);
 };
-customElements.define('cosmoz-omnitable-item-expand', (0, pion_1.component)(ItemExpand, {
+customElements.define('cosmoz-omnitable-item-expand', component(ItemExpand, {
     useShadowDOM: false,
 }));
 //# sourceMappingURL=cosmoz-omnitable-item-expand.js.map

package/dist/cosmoz-omnitable-item-row.js

@@ -1,12 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const pion_1 = require("@pionjs/pion");
-const repeat_js_1 = require("lit-html/directives/repeat.js");
+import { component, html } from '@pionjs/pion';
+import { repeat } from 'lit-html/directives/repeat.js';
 const renderCell = (column, data, onItemChange) => column.editable
     ? column.renderEditCell(column, data, onItemChange(column, data.item))
     : column.renderCell(column, data);
-const ItemRow = ({ columns, groupOnColumn, item, index, selected, expanded, onItemChange, }) => (0, repeat_js_1.repeat)(columns, (column) => column.name, (column) => {
-    return (0, pion_1.html) `<div
+const ItemRow = ({ columns, groupOnColumn, item, index, selected, expanded, onItemChange, }) => repeat(columns, (column) => column.name, (column) => {
+    return html `<div
 				class="cell itemRow-cell ${column.cellClass ?? ''}"
 				part="cell itemRow-cell cell-${column.name} itemRow-cell-${column.name}"
 				?hidden="${column === groupOnColumn}"
@@ -17,5 +15,5 @@ const ItemRow = ({ columns, groupOnColumn, item, index, selected, expanded, onIt
 				${renderCell(column, { item, index, selected, expanded }, onItemChange)}
 			</div>`;
 });
-customElements.define('cosmoz-omnitable-item-row', (0, pion_1.component)(ItemRow, { useShadowDOM: false }));
+customElements.define('cosmoz-omnitable-item-row', component(ItemRow, { useShadowDOM: false }));
 //# sourceMappingURL=cosmoz-omnitable-item-row.js.map

package/dist/cosmoz-omnitable-skeleton.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const pion_1 = require("@pionjs/pion");
-const styles = (0, pion_1.css) `
+import { html, css, component } from '@pionjs/pion';
+const styles = css `
 	:host {
 		max-width: 100%;
 		overflow-x: hidden;
@@ -46,10 +44,10 @@ const styles = (0, pion_1.css) `
 `;
 const Skeleton = ({ settingsConfig }) => {
     const { columns, collapsed } = settingsConfig, showingColumns = columns.filter((column) => !collapsed.some((hidden) => hidden.name === column.name));
-    return (0, pion_1.html) `<div class="skeleton">
-		${Array.from({ length: 5 }, () => (0, pion_1.html) `<div>
+    return html `<div class="skeleton">
+		${Array.from({ length: 5 }, () => html `<div>
 					<div class="checkbox"></div>
-					${showingColumns.map((col) => (0, pion_1.html) `<div
+					${showingColumns.map((col) => html `<div
 								class="cell"
 								part=${`cell-${col.name}`}
 								name=${col.name}
@@ -57,5 +55,5 @@ const Skeleton = ({ settingsConfig }) => {
 				</div>`)}
 	</div>`;
 };
-customElements.define('cosmoz-omnitable-skeleton', (0, pion_1.component)(Skeleton, { styleSheets: [styles] }));
+customElements.define('cosmoz-omnitable-skeleton', component(Skeleton, { styleSheets: [styles] }));
 //# sourceMappingURL=cosmoz-omnitable-skeleton.js.map

package/dist/cosmoz-omnitable-styles.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkbox = void 0;
 /* eslint-disable max-lines */
-const cosmoz_utils_1 = require("@neovici/cosmoz-utils");
-exports.checkbox = (0, cosmoz_utils_1.tagged) `
+import { tagged as css } from '@neovici/cosmoz-utils';
+export const checkbox = css `
 	.checkbox {
 		box-sizing: border-box;
 		width: 18px;
@@ -82,7 +79,7 @@ exports.checkbox = (0, cosmoz_utils_1.tagged) `
 		);
 	}
 `;
-exports.default = (0, cosmoz_utils_1.tagged) `
+export default css `
 	:host {
 		display: flex;
 		flex-direction: column;
@@ -455,7 +452,7 @@ exports.default = (0, cosmoz_utils_1.tagged) `
 		color: rgba(0, 0, 0, 0.54);
 	}
 
-	${exports.checkbox}
+	${checkbox}
 
 	.all {
 		margin-bottom: 6px;

package/dist/cosmoz-omnitable.d.ts

@@ -1,3 +1,3 @@
-export const actionSlots: import("lit-html", { with: { "resolution-mode": "import" } }).TemplateResult<1>;
+export const actionSlots: import("lit-html").TemplateResult<1>;
 export const actionSlotsPolymer: HTMLTemplateElement;
 //# sourceMappingURL=cosmoz-omnitable.d.ts.map

package/dist/cosmoz-omnitable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cosmoz-omnitable.d.ts","sourceRoot":"","sources":["../src/cosmoz-omnitable.js"],"names":[],"mappings":"AAgFa,0GAA4D;AACxE,qDAA0E"}
+{"version":3,"file":"cosmoz-omnitable.d.ts","sourceRoot":"","sources":["../src/cosmoz-omnitable.js"],"names":[],"mappings":"AAgFa,+DAA4D;AACxE,qDAA0E"}

package/dist/cosmoz-omnitable.js

@@ -1,43 +1,37 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.actionSlotsPolymer = exports.actionSlots = void 0;
-require("@neovici/cosmoz-bottom-bar");
-require("@polymer/iron-icon/iron-icon");
-require("@polymer/iron-icons/iron-icons");
-require("./cosmoz-omnitable-column");
-require("./cosmoz-omnitable-columns");
-require("./cosmoz-omnitable-group-row");
-require("./cosmoz-omnitable-header-row");
-require("./cosmoz-omnitable-item-expand");
-require("./cosmoz-omnitable-item-row");
-const use_notify_property_1 = require("@neovici/cosmoz-utils/hooks/use-notify-property");
-const pion_1 = require("@pionjs/pion");
-const html_tag_1 = require("@polymer/polymer/lib/utils/html-tag");
-const lit_html_1 = require("lit-html");
-const guard_js_1 = require("lit-html/directives/guard.js");
-const cosmoz_omnitable_styles_1 = __importDefault(require("./cosmoz-omnitable-styles"));
-const render_footer_1 = require("./lib/render-footer");
-const render_header_1 = require("./lib/render-header");
-const render_list_1 = require("./lib/render-list");
-const use_omnitable_1 = require("./lib/use-omnitable");
-require("./grouped-list/index.js");
+import '@neovici/cosmoz-bottom-bar';
+import '@polymer/iron-icon/iron-icon';
+import '@polymer/iron-icons/iron-icons';
+import './cosmoz-omnitable-column';
+import './cosmoz-omnitable-columns';
+import './cosmoz-omnitable-group-row';
+import './cosmoz-omnitable-header-row';
+import './cosmoz-omnitable-item-expand';
+import './cosmoz-omnitable-item-row';
+import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+import { component } from '@pionjs/pion';
+import { html as polymerHtml } from '@polymer/polymer/lib/utils/html-tag';
+import { html } from 'lit-html';
+import { guard } from 'lit-html/directives/guard.js';
+import styles from './cosmoz-omnitable-styles';
+import { renderFooter } from './lib/render-footer';
+import { renderHeader } from './lib/render-header';
+import { renderList } from './lib/render-list';
+import { useOmnitable } from './lib/use-omnitable';
+import './grouped-list/index.js';
 const shimCSS = (s) => window.ShadyCSS?.ApplyShim?.transformCssText?.(s) || s;
 const Omnitable = (host) => {
-    const { header, list, footer } = (0, use_omnitable_1.useOmnitable)(host);
-    return (0, lit_html_1.html) `
+    const { header, list, footer } = useOmnitable(host);
+    return html `
 		<style>
-			${(0, guard_js_1.guard)([], () => shimCSS(cosmoz_omnitable_styles_1.default))}
+			${guard([], () => shimCSS(styles))}
 		</style>
 
 		<div class="mainContainer">
-			${(0, render_header_1.renderHeader)(header)}
+			${renderHeader(header)}
 			<div class="tableContent" id="tableContent">
-				${(0, render_list_1.renderList)(header, list)}
+				${renderList(header, list)}
 			</div>
-			${(0, render_footer_1.renderFooter)(footer)}
+			${renderFooter(footer)}
 		</div>
 
 		<div id="columns">
@@ -45,7 +39,7 @@ const Omnitable = (host) => {
 		</div>
 	`;
 };
-customElements.define('cosmoz-omnitable', class extends (0, pion_1.component)(Omnitable, {
+customElements.define('cosmoz-omnitable', class extends component(Omnitable, {
     observedAttributes: [
         'hash-param',
         'sort-on',
@@ -63,13 +57,13 @@ customElements.define('cosmoz-omnitable', class extends (0, pion_1.component)(Om
 }) {
     connectedCallback() {
         super.connectedCallback();
-        (0, use_notify_property_1.notifyProperty)(this, 'selectedItems', []);
-        (0, use_notify_property_1.notifyProperty)(this, 'visibleData', []);
-        (0, use_notify_property_1.notifyProperty)(this, 'sortedFilteredGroupedItems', []);
+        notifyProperty(this, 'selectedItems', []);
+        notifyProperty(this, 'visibleData', []);
+        notifyProperty(this, 'sortedFilteredGroupedItems', []);
     }
 });
 const tmplt = `
 	<slot name="actions" slot="actions"></slot>
 `;
-exports.actionSlots = (0, lit_html_1.html)(Object.assign([tmplt], { raw: [tmplt] })), exports.actionSlotsPolymer = (0, html_tag_1.html)(Object.assign([tmplt], { raw: [tmplt] }));
+export const actionSlots = html(Object.assign([tmplt], { raw: [tmplt] })), actionSlotsPolymer = polymerHtml(Object.assign([tmplt], { raw: [tmplt] }));
 //# sourceMappingURL=cosmoz-omnitable.js.map

package/dist/grouped-list/cosmoz-grouped-list-row.js

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const lit_html_1 = require("lit-html");
+import { render } from 'lit-html';
 customElements.define('cosmoz-grouped-list-row', class Element extends HTMLElement {
     get item() {
         return this._item;
@@ -27,7 +25,7 @@ customElements.define('cosmoz-grouped-list-row', class Element extends HTMLEleme
         if (this._item == null || this._index == null || this._renderFn == null) {
             return;
         }
-        (0, lit_html_1.render)(this._renderFn(this._item, this._index), this);
+        render(this._renderFn(this._item, this._index), this);
     }
 });
 //# sourceMappingURL=cosmoz-grouped-list-row.js.map

package/dist/grouped-list/cosmoz-grouped-list.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const use_cosmoz_grouped_list_js_1 = require("./use-cosmoz-grouped-list.js");
-const pion_1 = require("@pionjs/pion");
-const CosmozGroupedList = (host) => (0, use_cosmoz_grouped_list_js_1.renderCosmozGroupedList)((0, use_cosmoz_grouped_list_js_1.useCosmozGroupedList)(host));
-customElements.define('cosmoz-grouped-list', (0, pion_1.component)(CosmozGroupedList, { useShadowDOM: false }));
+import { renderCosmozGroupedList, useCosmozGroupedList, } from './use-cosmoz-grouped-list.js';
+import { component } from '@pionjs/pion';
+const CosmozGroupedList = (host) => renderCosmozGroupedList(useCosmozGroupedList(host));
+customElements.define('cosmoz-grouped-list', component(CosmozGroupedList, { useShadowDOM: false }));
 //# sourceMappingURL=cosmoz-grouped-list.js.map

package/dist/grouped-list/index.js

@@ -1,4 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("./cosmoz-grouped-list.js");
+import './cosmoz-grouped-list.js';
 //# sourceMappingURL=index.js.map

package/dist/grouped-list/use-collapsible-items.d.ts

@@ -1,7 +1,7 @@
 export function useCollapsibleItems(): {
-    state: any;
-    signal: any;
-    toggleFold: any;
-    toggleCollapse: any;
+    state: WeakMap<object, any>;
+    signal: WeakMap<object, any>[];
+    toggleFold: (item: any, folded: any) => void;
+    toggleCollapse: (item: any, collapsed: any) => void;
 };
 //# sourceMappingURL=use-collapsible-items.d.ts.map

package/dist/grouped-list/use-collapsible-items.js

@@ -1,19 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCollapsibleItems = void 0;
-const pion_1 = require("@pionjs/pion");
-const use_weak_state_1 = require("./use-weak-state");
-const utils_1 = require("./utils");
-const useCollapsibleItems = () => {
-    const { setItemState, state, signal } = (0, use_weak_state_1.useWeakState)(), toggleFold = (0, pion_1.useCallback)((item, folded) => {
-        if (!(0, utils_1.isGroup)(item)) {
+import { useCallback } from '@pionjs/pion';
+import { useWeakState } from './use-weak-state';
+import { isGroup } from './utils';
+export const useCollapsibleItems = () => {
+    const { setItemState, state, signal } = useWeakState(), toggleFold = useCallback((item, folded) => {
+        if (!isGroup(item)) {
             return;
         }
         setItemState(item, (state) => ({
             folded: folded !== undefined ? folded : !state.folded,
         }));
-    }, []), toggleCollapse = (0, pion_1.useCallback)((item, collapsed) => {
-        if ((0, utils_1.isGroup)(item)) {
+    }, []), toggleCollapse = useCallback((item, collapsed) => {
+        if (isGroup(item)) {
             return;
         }
         setItemState(item, (state) => ({
@@ -27,5 +24,4 @@ const useCollapsibleItems = () => {
         toggleCollapse,
     };
 };
-exports.useCollapsibleItems = useCollapsibleItems;
 //# sourceMappingURL=use-collapsible-items.js.map

package/dist/grouped-list/use-cosmoz-grouped-list.d.ts

@@ -9,7 +9,7 @@ export function renderCosmozGroupedList({ renderRow, flatData }: {
     flatData: any[];
 }): any;
 export function useCosmozGroupedList(host: any): {
-    renderRow: any;
+    renderRow: (item: any, index: any) => any;
     flatData: any;
 };
 //# sourceMappingURL=use-cosmoz-grouped-list.d.ts.map

package/dist/grouped-list/use-cosmoz-grouped-list.js

@@ -1,37 +1,34 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCosmozGroupedList = exports.renderCosmozGroupedList = void 0;
-const use_imperative_api_1 = require("@neovici/cosmoz-utils/hooks/use-imperative-api");
-const use_notify_property_1 = require("@neovici/cosmoz-utils/hooks/use-notify-property");
-const pion_1 = require("@pionjs/pion");
-const lit_html_1 = require("lit-html");
-require("./cosmoz-grouped-list-row");
-const use_collapsible_items_1 = require("./use-collapsible-items");
-const use_selected_items_1 = require("./use-selected-items");
-const utils_1 = require("./utils");
-const virtualize_js_1 = require("@lit-labs/virtualizer/virtualize.js");
+import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
+import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+import { useCallback, useLayoutEffect, useMemo } from '@pionjs/pion';
+import { html } from 'lit-html';
+import './cosmoz-grouped-list-row';
+import { useCollapsibleItems } from './use-collapsible-items';
+import { useSelectedItems } from './use-selected-items';
+import { byReference, isExpanded, isFolded, prepareData } from './utils';
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
 const styles = {
     host: { position: 'relative', display: 'flex', flexDirection: 'column' },
 }, useCosmozGroupedList = (host) => {
-    const { data, renderItem, renderGroup, displayEmptyGroups, compareItemsFn = utils_1.byReference, } = host, { toggleFold, toggleCollapse, state, signal } = (0, use_collapsible_items_1.useCollapsibleItems)(), 
+    const { data, renderItem, renderGroup, displayEmptyGroups, compareItemsFn = byReference, } = host, { toggleFold, toggleCollapse, state, signal } = useCollapsibleItems(), 
     // TODO: state changes trigger recalculation, which is slow (200ms with 10k items)
     // it only makes sense to do it when a group is folded
     // suggested fix: separate signal for item collapse and group fold
-    flatData = (0, pion_1.useMemo)(() => (0, utils_1.prepareData)(data, displayEmptyGroups, state), [data, displayEmptyGroups, signal]), { selectedItems, isItemSelected, isGroupSelected, isSelected, select, deselect, selectOnly, selectAll, deselectAll, toggleSelect, toggleSelectTo, } = (0, use_selected_items_1.useSelectedItems)({ initial: [], compareItemsFn, data, flatData }), renderRow = (0, pion_1.useCallback)((item, index) => Array.isArray(item.items)
+    flatData = useMemo(() => prepareData(data, displayEmptyGroups, state), [data, displayEmptyGroups, signal]), { selectedItems, isItemSelected, isGroupSelected, isSelected, select, deselect, selectOnly, selectAll, deselectAll, toggleSelect, toggleSelectTo, } = useSelectedItems({ initial: [], compareItemsFn, data, flatData }), renderRow = useCallback((item, index) => Array.isArray(item.items)
         ? renderGroup(item, index, {
             selected: isGroupSelected(item, selectedItems),
-            folded: (0, utils_1.isFolded)(item, state),
+            folded: isFolded(item, state),
             toggleSelect: (selected) => toggleSelect(item, typeof selected === 'boolean' ? selected : undefined),
             toggleFold: () => toggleFold(item),
         })
         : renderItem(item, index, {
             selected: selectedItems.includes(item),
-            expanded: (0, utils_1.isExpanded)(item, state),
+            expanded: isExpanded(item, state),
             toggleSelect: (selected) => toggleSelect(item, typeof selected === 'boolean' ? selected : undefined),
             toggleCollapse: () => toggleCollapse(item),
         }), [renderItem, renderGroup, selectedItems, toggleSelect, signal]);
-    (0, pion_1.useLayoutEffect)(() => Object.assign(host.style, styles.host), []);
-    (0, use_notify_property_1.useNotifyProperty)('selectedItems', selectedItems);
+    useLayoutEffect(() => Object.assign(host.style, styles.host), []);
+    useNotifyProperty('selectedItems', selectedItems);
     const api = {
         toggleFold,
         toggleCollapse,
@@ -46,10 +43,9 @@ const styles = {
         toggleSelect,
         toggleSelectTo,
     };
-    (0, use_imperative_api_1.useImperativeApi)(api, Object.values(api));
+    useImperativeApi(api, Object.values(api));
     return { renderRow, flatData };
 };
-exports.useCosmozGroupedList = useCosmozGroupedList;
 /**
  * @param {Object} params
  * @param {Function} params.renderRow
@@ -57,14 +53,14 @@ exports.useCosmozGroupedList = useCosmozGroupedList;
  * @returns {*}
  */
 const renderCosmozGroupedList = ({ renderRow, flatData }) => {
-    return (0, virtualize_js_1.virtualize)({
+    return virtualize({
         items: flatData,
-        renderItem: (item, index) => (0, lit_html_1.html) `<cosmoz-grouped-list-row
+        renderItem: (item, index) => html `<cosmoz-grouped-list-row
 				.item=${item}
 				.index=${index}
 				.renderFn=${renderRow}
 			></cosmoz-grouped-list-row>`,
     });
 };
-exports.renderCosmozGroupedList = renderCosmozGroupedList;
+export { renderCosmozGroupedList, useCosmozGroupedList };
 //# sourceMappingURL=use-cosmoz-grouped-list.js.map

package/dist/grouped-list/use-selected-items.d.ts

@@ -5,15 +5,15 @@ export function useSelectedItems({ initial, compareItemsFn, data, flatData, }: {
     flatData: any;
 }): {
     selectedItems: any;
-    isItemSelected: any;
-    isGroupSelected: any;
-    isSelected: any;
-    select: any;
-    deselect: any;
-    selectOnly: any;
-    selectAll: any;
-    deselectAll: any;
-    toggleSelect: any;
-    toggleSelectTo: any;
+    isItemSelected: (item: any) => any;
+    isGroupSelected: (group: any) => any;
+    isSelected: (item: any) => any;
+    select: (item: any) => void;
+    deselect: (item: any) => void;
+    selectOnly: (item: any) => void;
+    selectAll: () => void;
+    deselectAll: () => void;
+    toggleSelect: (item: any, selected?: boolean) => void;
+    toggleSelectTo: (item: any, selected: any) => void;
 };
 //# sourceMappingURL=use-selected-items.d.ts.map

package/dist/grouped-list/use-selected-items.js

@@ -1,34 +1,31 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelectedItems = void 0;
-const pion_1 = require("@pionjs/pion");
-const utils_1 = require("./utils");
-const useSelectedItems = ({ initial, compareItemsFn, data, flatData, }) => {
-    const [selectedItems, setSelectedItems] = (0, pion_1.useState)(initial), [lastSelection, setLastSelection] = (0, pion_1.useState)(), 
+import { useCallback, useEffect, useState } from '@pionjs/pion';
+import { isGroup } from './utils';
+export const useSelectedItems = ({ initial, compareItemsFn, data, flatData, }) => {
+    const [selectedItems, setSelectedItems] = useState(initial), [lastSelection, setLastSelection] = useState(), 
     /**
      * Check if item is selected.
      * @param {object} item Item.
      * @returns {boolean} Whether item is selected.
      */
-    isItemSelected = (0, pion_1.useCallback)((item) => selectedItems.includes(item), [selectedItems]), 
+    isItemSelected = useCallback((item) => selectedItems.includes(item), [selectedItems]), 
     /**
      * Check if group is selected.
      * @param {object} group Group.
      * @returns {boolean} Whether group is selected.
      */
-    isGroupSelected = (0, pion_1.useCallback)((group) => group?.items?.every(isItemSelected), [isItemSelected]), 
+    isGroupSelected = useCallback((group) => group?.items?.every(isItemSelected), [isItemSelected]), 
     /**
      * Check if item.group is selected.
      * @param {object} item Item.
      * @returns {boolean} Whether item is selected.
      */
-    isSelected = (0, pion_1.useCallback)((item) => isItemSelected(item) || isGroupSelected(item), [isItemSelected, isGroupSelected]), 
+    isSelected = useCallback((item) => isItemSelected(item) || isGroupSelected(item), [isItemSelected, isGroupSelected]), 
     /**
      * Add an item/group to the list of selected items.
      * @param {object} item Item to select.
      * @returns {void}
      */
-    select = (0, pion_1.useCallback)((item) => {
+    select = useCallback((item) => {
         const items = item.items ?? [item];
         setSelectedItems((selection) => [
             ...selection,
@@ -41,11 +38,11 @@ const useSelectedItems = ({ initial, compareItemsFn, data, flatData, }) => {
      * @param {object} item Item to select.
      * @returns {void}
      */
-    deselect = (0, pion_1.useCallback)((item) => {
+    deselect = useCallback((item) => {
         const items = item.items ?? [item];
         setSelectedItems((selection) => selection.filter((i) => !items.includes(i)));
         setLastSelection(item);
-    }, []), selectOnly = (0, pion_1.useCallback)((item) => {
+    }, []), selectOnly = useCallback((item) => {
         setSelectedItems(item.items?.slice() || [item]);
         setLastSelection(item);
     }, []), 
@@ -53,7 +50,7 @@ const useSelectedItems = ({ initial, compareItemsFn, data, flatData, }) => {
      * Select all items.
      * @returns {void}
      */
-    selectAll = (0, pion_1.useCallback)(() => {
+    selectAll = useCallback(() => {
         setSelectedItems(data.flatMap((item) => item.items || item));
         setLastSelection(undefined);
     }, [data]), 
@@ -61,7 +58,7 @@ const useSelectedItems = ({ initial, compareItemsFn, data, flatData, }) => {
      * Deselect all selected items.
      * @returns {void}
      */
-    deselectAll = (0, pion_1.useCallback)(() => {
+    deselectAll = useCallback(() => {
         setSelectedItems([]);
         setLastSelection(undefined);
     }, []), 
@@ -71,7 +68,7 @@ const useSelectedItems = ({ initial, compareItemsFn, data, flatData, }) => {
      * @param {boolean=} selected Select or deselect, fallback to toggling.
      * @returns {void}
      */
-    toggleSelect = (0, pion_1.useCallback)((item, selected = !isSelected(item)) => selected ? select(item) : deselect(item), [isSelected]), toggleSelectTo = (0, pion_1.useCallback)((item, selected) => {
+    toggleSelect = useCallback((item, selected = !isSelected(item)) => selected ? select(item) : deselect(item), [isSelected]), toggleSelectTo = useCallback((item, selected) => {
         const last = lastSelection
             ? flatData.findIndex((i) => compareItemsFn(i, lastSelection))
             : -1;
@@ -80,7 +77,7 @@ const useSelectedItems = ({ initial, compareItemsFn, data, flatData, }) => {
         }
         const [from, to] = [last, flatData.indexOf(item)].sort((a, b) => a - b);
         flatData.slice(from, to + 1).forEach((item, i, items) => {
-            if (i > 0 && i < items.length - 1 && (0, utils_1.isGroup)(item)) {
+            if (i > 0 && i < items.length - 1 && isGroup(item)) {
                 return;
             }
             toggleSelect(item, selected);
@@ -88,7 +85,7 @@ const useSelectedItems = ({ initial, compareItemsFn, data, flatData, }) => {
         setLastSelection(item);
     }, [flatData, compareItemsFn, toggleSelect]);
     // keep selected items across data updates
-    (0, pion_1.useEffect)(() => setSelectedItems((selectedItems) => selectedItems.length > 0
+    useEffect(() => setSelectedItems((selectedItems) => selectedItems.length > 0
         ? flatData.filter((i) => selectedItems.find((item) => compareItemsFn(i, item)))
         : selectedItems), [flatData]);
     return {
@@ -105,5 +102,4 @@ const useSelectedItems = ({ initial, compareItemsFn, data, flatData, }) => {
         toggleSelectTo,
     };
 };
-exports.useSelectedItems = useSelectedItems;
 //# sourceMappingURL=use-selected-items.js.map

package/dist/grouped-list/use-weak-state.d.ts

@@ -1,6 +1,6 @@
 export function useWeakState(): {
-    setItemState: any;
-    state: any;
-    signal: any;
+    setItemState: (item: any, newItemState: any) => void;
+    state: WeakMap<object, any>;
+    signal: WeakMap<object, any>[];
 };
 //# sourceMappingURL=use-weak-state.d.ts.map

package/dist/grouped-list/use-weak-state.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWeakState = void 0;
-const pion_1 = require("@pionjs/pion");
-const utils_1 = require("./utils");
-const useWeakState = () => {
-    const [wrapper, setState] = (0, pion_1.useState)(() => [new WeakMap()]), setItemState = (0, pion_1.useCallback)((item, newItemState) => setState(([state]) => {
-        const itemState = (0, utils_1.getItemState)(item, state);
-        Object.assign(itemState, (0, utils_1.callFn)(newItemState, itemState));
+import { useCallback, useState } from '@pionjs/pion';
+import { callFn, getItemState } from './utils';
+export const useWeakState = () => {
+    const [wrapper, setState] = useState(() => [new WeakMap()]), setItemState = useCallback((item, newItemState) => setState(([state]) => {
+        const itemState = getItemState(item, state);
+        Object.assign(itemState, callFn(newItemState, itemState));
         return [state];
     }), []);
     return {
@@ -15,5 +12,4 @@ const useWeakState = () => {
         signal: wrapper,
     };
 };
-exports.useWeakState = useWeakState;
 //# sourceMappingURL=use-weak-state.js.map

package/dist/grouped-list/utils.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.byReference = exports.callFn = exports.isGroup = exports.isFolded = exports.isExpanded = exports.getItemState = exports.prepareData = exports.symbols = void 0;
 const symbols = {
     group: Symbol('group'),
 }, getItemState = (item, itemsState) => {
@@ -56,12 +53,5 @@ prepareData = (data, displayEmptyGroups, itemsState) => {
     }, []);
     return flatData;
 }, callFn = (fn, ...args) => (typeof fn === 'function' ? fn(...args) : fn), byReference = (a, b) => a === b;
-exports.symbols = symbols;
-exports.getItemState = getItemState;
-exports.isExpanded = isExpanded;
-exports.isFolded = isFolded;
-exports.isGroup = isGroup;
-exports.prepareData = prepareData;
-exports.callFn = callFn;
-exports.byReference = byReference;
+export { symbols, prepareData, getItemState, isExpanded, isFolded, isGroup, callFn, byReference, };
 //# sourceMappingURL=utils.js.map