@neovici/cosmoz-omnitable 14.14.3 → 14.15.0

package/dist/lib/use-canvas-width.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-canvas-width.d.ts","sourceRoot":"","sources":["../../src/lib/use-canvas-width.js"],"names":[],"mappings":"AAGO,+CAQN"}

package/dist/lib/use-canvas-width.js

@@ -0,0 +1,8 @@
+import { useState } from '@pionjs/pion';
+import { useTrackSize } from './use-track-size';
+export const useCanvasWidth = (host) => {
+    const [canvasWidth, setCanvasWidth] = useState(() => host.getBoundingClientRect().width);
+    useTrackSize(host, setCanvasWidth);
+    return canvasWidth;
+};
+//# sourceMappingURL=use-canvas-width.js.map

package/dist/lib/use-dom-columns.d.ts

@@ -0,0 +1,5 @@
+export function useDOMColumns(host: any, { enabledColumns }: {
+    enabledColumns: any;
+}): never[];
+export const columnSymbol: unique symbol;
+//# sourceMappingURL=use-dom-columns.d.ts.map

package/dist/lib/use-dom-columns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dom-columns.d.ts","sourceRoot":"","sources":["../../src/lib/use-dom-columns.js"],"names":[],"mappings":"AAwIO;;YA2BN;AAhKD,yCAAsC"}

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

@@ -0,0 +1,127 @@
+import { useLayoutEffect, useState } from '@pionjs/pion';
+import { memooize } from '@neovici/cosmoz-utils/memoize';
+const columnSymbol = Symbol('column');
+const verifyColumnSetup = (columns) => {
+    let ok = true;
+    const columnNames = columns.map((c) => c.name);
+    // Check if column names are set
+    columns.forEach((column) => {
+        if (column.name != null) {
+            return;
+        }
+        ok = false;
+        // eslint-disable-next-line no-console
+        console.error('The name attribute needs to be set on all columns! Missing on column', column);
+    });
+    columns.forEach((column) => {
+        if (columnNames.indexOf(column.name) === columnNames.lastIndexOf(column.name)) {
+            return;
+        }
+        ok = false;
+        // eslint-disable-next-line no-console
+        console.error('The name attribute needs to be unique among all columns! Not unique on column', column);
+    });
+    return ok;
+};
+const normalizeColumn = (column) => {
+    const valuePath = column.valuePath ?? column.name;
+    return {
+        name: column.name,
+        title: column.title,
+        valuePath,
+        groupOn: column.groupOn ?? valuePath,
+        sortOn: column.sortOn ?? valuePath,
+        minWidth: column.minWidth,
+        width: column.width,
+        flex: column.flex,
+        priority: column.priority,
+        getString: column.getString,
+        getComparableValue: column.getComparableValue,
+        serializeFilter: column.serializeFilter,
+        deserializeFilter: column.deserializeFilter,
+        toXlsxValue: column.toXlsxValue,
+        renderHeader: column.renderHeader,
+        renderCell: column.renderCell,
+        renderEditCell: column.renderEditCell,
+        renderGroup: column.renderGroup,
+        cellTitleFn: column.cellTitleFn,
+        getFilterFn: column.getFilterFn,
+        headerCellClass: column.headerCellClass,
+        cellClass: column.cellClass,
+        editable: column.editable,
+        values: column.values,
+        source: memooize(column.computeSource),
+        noLocalFilter: column.noLocalFilter,
+        mini: column.mini,
+        renderMini: column.renderMini,
+        // @deprecated
+        loading: column.loading,
+        externalValues: column.externalValues,
+        computeSource: column.computeSource,
+        // boolean columns
+        trueLabel: column.trueLabel,
+        falseLabel: column.falseLabel,
+        // list columns
+        valueProperty: column.valueProperty,
+        textProperty: column.textProperty,
+        emptyLabel: column.emptyLabel,
+        emptyValue: column.emptyValue,
+        // range columns
+        min: column.min,
+        max: column.max,
+        locale: column.locale,
+        autoupdate: column.autoupdate,
+        // number columns
+        maximumFractionDigits: column.maximumFractionDigits,
+        minimumFractionDigits: column.minimumFractionDigits,
+        // amount columns
+        currency: column.currency,
+        rates: column.rates,
+        autodetect: column.autodetect,
+        // treenode columns
+        ownerTree: column.ownerTree,
+        keyProperty: column.keyProperty,
+        ...column.getConfig?.(column),
+        [columnSymbol]: column,
+    };
+};
+const isVisibleColumn = (child) => child.isOmnitableColumn && !child.hidden;
+const collectDomColumns = (slot) => {
+    const domColumns = slot
+        .assignedElements({ flatten: true })
+        .filter(isVisibleColumn);
+    if (!verifyColumnSetup(domColumns))
+        return [];
+    return domColumns;
+};
+const normalizeColumns = (domColumns, enabledColumns) => {
+    const columns = Array.isArray(enabledColumns)
+        ? domColumns.filter((column) => enabledColumns.includes(column.name))
+        : domColumns.filter((column) => !column.disabled);
+    return columns.map(normalizeColumn);
+};
+export const useDOMColumns = (host, { enabledColumns }) => {
+    const [columns, setColumns] = useState([]);
+    useLayoutEffect(() => {
+        let sched;
+        const slot = host.shadowRoot.querySelector('#columnsSlot');
+        const update = () => {
+            setColumns(normalizeColumns(collectDomColumns(slot), enabledColumns));
+        };
+        const scheduleUpdate = () => {
+            cancelAnimationFrame(sched);
+            sched = requestAnimationFrame(update);
+        };
+        scheduleUpdate();
+        slot.addEventListener('slotchange', scheduleUpdate);
+        host.addEventListener('cosmoz-column-prop-changed', scheduleUpdate);
+        return () => {
+            slot.removeEventListener('slotchange', scheduleUpdate);
+            host.removeEventListener('cosmoz-column-prop-changed', scheduleUpdate);
+            cancelAnimationFrame(sched);
+        };
+    }, [enabledColumns]);
+    return columns;
+};
+export { columnSymbol };
+//# sourceMappingURL=use-dom-columns.js.map

package/dist/lib/use-fast-layout.d.ts

@@ -0,0 +1,13 @@
+export function useFastLayout({ host, columns, settings, setSettings, resizeSpeedFactor, sortAndGroupOptions, }: {
+    host: any;
+    columns: any;
+    settings: any;
+    setSettings: any;
+    resizeSpeedFactor: any;
+    sortAndGroupOptions: any;
+}): {
+    isMini: boolean;
+    collapsedColumns: any;
+    miniColumns: any;
+};
+//# sourceMappingURL=use-fast-layout.d.ts.map

package/dist/lib/use-fast-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-fast-layout.d.ts","sourceRoot":"","sources":["../../src/lib/use-fast-layout.js"],"names":[],"mappings":"AAsBO;;;;;;;;;;;EAkDN"}

package/dist/lib/use-fast-layout.js

@@ -0,0 +1,47 @@
+import { useEffect, useMemo } from '@pionjs/pion';
+import { toCss } from './compute-layout';
+import { useResizableColumns } from './use-resizable-columns';
+import { useCanvasWidth } from './use-canvas-width';
+import { useTweenArray } from './use-tween-array';
+import { useLayout } from './use-layout';
+import { useMini } from './use-mini';
+import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
+const useAdoptedStyleSheet = (host) => {
+    const styleSheet = useMemo(() => new CSSStyleSheet(), []);
+    useEffect(() => {
+        host.shadowRoot.adoptedStyleSheets = [
+            ...host.shadowRoot.adoptedStyleSheets,
+            styleSheet,
+        ];
+    }, []);
+    return styleSheet;
+};
+export const useFastLayout = ({ host, columns, settings, setSettings, resizeSpeedFactor, sortAndGroupOptions, }) => {
+    const canvasWidth = useCanvasWidth(host), { isMini, miniColumn, miniColumns } = useMini({
+        host,
+        canvasWidth,
+        columns,
+    }), { groupOnColumn } = sortAndGroupOptions, layout = useLayout({
+        canvasWidth,
+        groupOnColumn,
+        miniColumn,
+        config: settings.columns,
+    }), styleSheet = useAdoptedStyleSheet(host), collapsedColumns = useMemo(() => settings.columns.reduce((acc, column, index) => layout[index] != null ||
+        column.name === groupOnColumn?.name ||
+        column.disabled
+        ? acc
+        : [...acc, columns.find((c) => c.name === column.name)], []), [columns, settings, layout]);
+    const meta = useMeta({ columns: settings.columns });
+    useTweenArray(layout, resizeSpeedFactor, (tweenedlayout) => {
+        const layoutCss = toCss(tweenedlayout, meta.columns);
+        styleSheet.replace(layoutCss);
+    });
+    useResizableColumns({
+        host,
+        canvasWidth,
+        layout,
+        setSettings: (update) => setSettings(update(settings)),
+    });
+    return { isMini, collapsedColumns, miniColumns };
+};
+//# sourceMappingURL=use-fast-layout.js.map

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

@@ -0,0 +1,10 @@
+export function useFooter({ host, ...rest }: {
+    [x: string]: any;
+    host: any;
+}): {
+    csvFilename: any;
+    xlsxFilename: any;
+    xlsxSheetname: any;
+    topPlacement: any;
+};
+//# sourceMappingURL=use-footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-footer.d.ts","sourceRoot":"","sources":["../../src/lib/use-footer.js"],"names":[],"mappings":"AAAO;;;;;;;;EAeN"}

package/dist/lib/use-footer.js

@@ -0,0 +1,11 @@
+export const useFooter = ({ host, ...rest }) => {
+    const { csvFilename = 'omnitable.csv', xlsxFilename = 'omnitable.xlsx', xlsxSheetname = 'Omnitable', topPlacement = 'top-end', } = host;
+    return {
+        csvFilename,
+        xlsxFilename,
+        xlsxSheetname,
+        topPlacement,
+        ...rest,
+    };
+};
+//# sourceMappingURL=use-footer.js.map

package/dist/lib/use-hash-state.d.ts

@@ -0,0 +1,4 @@
+export function useHashState(initial: any, param: any, { suffix, read, write, multi }?: {
+    suffix?: string | undefined;
+}): any[];
+//# sourceMappingURL=use-hash-state.d.ts.map

package/dist/lib/use-hash-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hash-state.d.ts","sourceRoot":"","sources":["../../src/lib/use-hash-state.js"],"names":[],"mappings":"AA0CO;;UA4BN"}

package/dist/lib/use-hash-state.js

@@ -0,0 +1,32 @@
+import { useCallback, useState } from '@pionjs/pion';
+import { navigate } from '@neovici/cosmoz-router';
+import { identity, invoke } from '@neovici/cosmoz-utils/function';
+import { hashUrl, multiParse, singleParse, } from '@neovici/cosmoz-utils/location';
+const makeLinker = (parameterize) => (hashParam, value, codec = identity) => {
+    const url = hashUrl(), searchParams = new URLSearchParams(url.hash.replace('#', ''));
+    // TODO: make parameterize pure
+    parameterize(hashParam, value, codec, searchParams);
+    return ('#!' +
+        Object.assign(url, { hash: searchParams }).href.replace(location.origin, ''));
+}, isEmpty = (v) => v == null || v === '', singleLink = makeLinker((hashParam, value, codec, searchParams) => !isEmpty(codec(value))
+    ? searchParams.set(hashParam, codec(value))
+    : searchParams.delete(hashParam)), multiLink = makeLinker((hashParam, value, codec, searchParams) => Object.entries(value)
+    .map(codec)
+    .forEach(([key, value]) => !isEmpty(value)
+    ? searchParams.set(hashParam + key, value)
+    : searchParams.delete(hashParam + key)));
+export const useHashState = (initial, param, { suffix = '', read, write, multi } = {}) => {
+    const [link, parseHash] = multi
+        ? [multiLink, multiParse]
+        : [singleLink, singleParse], [state, _setState] = useState(() => param == null ? initial : (parseHash(param + suffix, read) ?? initial)), setState = useCallback((state) => _setState((oldState) => {
+        const newState = invoke(state, oldState);
+        if (param != null) {
+            navigate(link(param + suffix, newState, write), null, {
+                notify: false,
+            });
+        }
+        return newState;
+    }), [param, suffix, link, write]);
+    return [state, setState];
+};
+//# sourceMappingURL=use-hash-state.js.map

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

@@ -0,0 +1,21 @@
+export function useHeader({ host, selectedItems, data, sortAndGroupOptions, collapsedColumns, settings, filterFunctions, settingS, filters, ...rest }: {
+    [x: string]: any;
+    host: any;
+    selectedItems: any;
+    data: any;
+    sortAndGroupOptions: any;
+    collapsedColumns: any;
+    settings: any;
+    filterFunctions: any;
+    settingS: any;
+    filters: any;
+}): {
+    allSelected: any;
+    onAllCheckboxChange: (event: any) => void;
+    data: any;
+    settingsConfig: any;
+    filters: any;
+    groupOnColumn: any;
+    sortAndGroup: any;
+};
+//# sourceMappingURL=use-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-header.d.ts","sourceRoot":"","sources":["../../src/lib/use-header.js"],"names":[],"mappings":"AAEO;;;;;;;;;;;;;;;;;;;EAoEN"}

package/dist/lib/use-header.js

@@ -0,0 +1,38 @@
+import { useEffect, useMemo } from '@pionjs/pion';
+export const useHeader = ({ host, selectedItems, data, sortAndGroupOptions, collapsedColumns, settings, filterFunctions, settingS, filters, ...rest }) => {
+    const allSelected = data && data.length > 0 && selectedItems.length === data.length, onAllCheckboxChange = (event) => {
+        if (event.target.checked) {
+            host.shadowRoot.querySelector('#groupedList').selectAll();
+        }
+        else {
+            host.shadowRoot.querySelector('#groupedList').deselectAll();
+        }
+    }, { groupOnColumn } = sortAndGroupOptions, hasHiddenFilter = useMemo(() => [
+        groupOnColumn,
+        ...collapsedColumns,
+        ...settings.columns.filter((s) => s.disabled),
+    ].some((column) => column && Object.keys(filterFunctions).includes(column.name)), [filterFunctions, settings, collapsedColumns]), settingsConfig = useMemo(() => ({
+        ...settingS,
+        collapsed: collapsedColumns,
+        badge: hasHiddenFilter,
+        filters,
+    }), [settingS, collapsedColumns, hasHiddenFilter, filters]);
+    useEffect(() => {
+        const el = host.shadowRoot.querySelector('#tableContent'), observer = new ResizeObserver((entries) => requestAnimationFrame(() => {
+            host.style.setProperty('--ot-height', entries[0]?.contentRect.height + 'px');
+        }));
+        observer.observe(el);
+        return () => observer.unobserve(el);
+    }, []);
+    return {
+        allSelected,
+        onAllCheckboxChange,
+        data,
+        settingsConfig,
+        filters,
+        groupOnColumn,
+        sortAndGroup: sortAndGroupOptions.sortAndGroup,
+        ...rest,
+    };
+};
+//# sourceMappingURL=use-header.js.map

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

@@ -0,0 +1,7 @@
+export function useLayout({ canvasWidth, groupOnColumn, config, miniColumn }: {
+    canvasWidth: any;
+    groupOnColumn: any;
+    config: any;
+    miniColumn: any;
+}): any;
+//# sourceMappingURL=use-layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-layout.d.ts","sourceRoot":"","sources":["../../src/lib/use-layout.js"],"names":[],"mappings":"AAGO;;;;;QA4BkC"}

package/dist/lib/use-layout.js

@@ -0,0 +1,21 @@
+import { useMemo } from '@pionjs/pion';
+import { computeLayout } from './compute-layout';
+export const useLayout = ({ canvasWidth, groupOnColumn, config, miniColumn }) => useMemo(() => {
+    if (!Array.isArray(config) || canvasWidth == null || canvasWidth === 0) {
+        return [];
+    }
+    const columnConfigs = config
+        .map((c, index) => ({
+        minWidth: c.minWidth,
+        width: c.width,
+        flex: c.flex,
+        priority: c.priority,
+        name: c.name,
+        index,
+        hidden: c.name === groupOnColumn?.name || c.disabled,
+    }))
+        .map((c) => miniColumn ? { ...c, hidden: miniColumn.name !== c.name } : c)
+        .sort(({ index: aIndex, priority: aPriority }, { index: bIndex, priority: bPriority }) => aPriority === bPriority ? bIndex - aIndex : aPriority - bPriority);
+    return computeLayout(columnConfigs, canvasWidth, columnConfigs.length);
+}, [canvasWidth, groupOnColumn, config]);
+//# sourceMappingURL=use-layout.js.map

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

@@ -0,0 +1,31 @@
+export function useList({ host, error, dataIsValid, processedItems, columns, collapsedColumns, miniColumns, sortAndGroupOptions, rowPartFn, ...rest }: {
+    [x: string]: any;
+    host: any;
+    error: any;
+    dataIsValid: any;
+    processedItems: any;
+    columns: any;
+    collapsedColumns: any;
+    miniColumns: any;
+    sortAndGroupOptions: any;
+    rowPartFn: any;
+}): {
+    processedItems: any;
+    dataIsValid: any;
+    filterIsTooStrict: any;
+    loading: 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>;
+};
+//# sourceMappingURL=use-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-list.d.ts","sourceRoot":"","sources":["../../src/lib/use-list.js"],"names":[],"mappings":"AAkJO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoHN"}

package/dist/lib/use-list.js

@@ -0,0 +1,198 @@
+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"
+		focusable="false"
+	>
+		<g>
+			<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path>
+		</g>
+	</svg>
+`;
+const _getGroupRowClasses = (folded) => folded ? 'groupRow groupRow-folded' : 'groupRow';
+const renderMinis = ({ item, index }) => (columns) => when(columns?.length > 0, () => html `
+				<div class="itemRow-minis" part="item-minis">
+					${columns.map((column) => html `<div
+								class="itemRow-mini"
+								part="item-mini item-mini-${column.name}"
+							>
+								${(column.renderMini ?? column.renderCell)(column, {
+    item,
+    index,
+})}
+							</div>`)}
+				</div>
+			`);
+const renderItem = ({ columns, collapsedColumns, miniColumns, onItemClick, onCheckboxChange, dataIsValid, groupOnColumn, onItemChange, rowPartFn, }) => (item, index, { selected, expanded, toggleCollapse }) => html `
+		<div
+			?selected=${selected}
+			part="${[
+    'itemRow',
+    `itemRow-${item[indexSymbol]}`,
+    rowPartFn?.(item, index),
+]
+    .filter(Boolean)
+    .join(' ')}"
+			.dataIndex=${item[indexSymbol]}
+			.dataItem=${item}
+			class="itemRow"
+			@click=${onItemClick}
+		>
+			<div class="itemRow-wrapper" part="itemRow-wrapper">
+				<input
+					class="checkbox"
+					type="checkbox"
+					part="checkbox"
+					.checked=${selected}
+					.dataItem=${item}
+					@input=${onCheckboxChange}
+					?disabled=${!dataIsValid}
+				/>
+				<cosmoz-omnitable-item-row
+					part="itemRow-inner"
+					.columns=${columns}
+					.index=${index}
+					.selected=${selected}
+					.expanded=${expanded}
+					.item=${item}
+					.groupOnColumn=${groupOnColumn}
+					.onItemChange=${onItemChange}
+				>
+				</cosmoz-omnitable-item-row>
+				<button
+					class="expand"
+					?hidden="${isEmpty(collapsedColumns.length)}"
+					?aria-expanded="${expanded}"
+					@click="${toggleCollapse}"
+				>
+					${arrow}
+				</button>
+			</div>
+			${renderMinis({ item, index })(miniColumns)}
+		</div>
+		<cosmoz-omnitable-item-expand
+			.columns=${collapsedColumns}
+			.item=${item}
+			.index=${index}
+			?selected=${selected}
+			?expanded=${expanded}
+			.groupOnColumn=${groupOnColumn}
+			part="item-expand"
+		>
+		</cosmoz-omnitable-item-expand>
+	`;
+const renderGroup = ({ onCheckboxChange, dataIsValid, groupOnColumn }) => (item, index, { selected, folded, toggleFold }) => html ` <div
+			class="${_getGroupRowClasses(folded)}"
+			part="groupRow groupRow-${item[indexSymbol]}"
+		>
+			<input
+				class="checkbox"
+				type="checkbox"
+				.checked=${selected}
+				.dataItem=${item}
+				@input=${onCheckboxChange}
+				?disabled=${!dataIsValid}
+			/>
+			<h3 class="groupRow-label">
+				<div><span>${groupOnColumn?.title}</span>: &nbsp;</div>
+				<cosmoz-omnitable-group-row
+					.column=${groupOnColumn}
+					.item=${item.items?.[0]}
+					.selected=${selected}
+					.folded=${folded}
+					.group=${item}
+				></cosmoz-omnitable-group-row>
+			</h3>
+			<div class="groupRow-badge">${item.items.length}</div>
+			<button class="expand" ?aria-expanded="${folded}" @click=${toggleFold}>
+				${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 item = event.target.dataItem, selected = event.target.checked;
+        if (keyState.current.shiftKey) {
+            host.shadowRoot
+                .querySelector('#groupedList')
+                .toggleSelectTo(item, selected);
+        }
+        else if (keyState.current.ctrlKey) {
+            event.target.checked = true;
+            host.shadowRoot.querySelector('#groupedList').selectOnly(item);
+        }
+        else {
+            host.shadowRoot
+                .querySelector('#groupedList')
+                .toggleSelect(item, selected);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }, []);
+    useEffect(() => {
+        const handler = ({ shiftKey, ctrlKey }) => {
+            keyState.current = { shiftKey, ctrlKey };
+        };
+        window.addEventListener('keydown', handler);
+        window.addEventListener('keyup', handler);
+        return () => {
+            window.removeEventListener('keydown', handler);
+            window.removeEventListener('keyup', handler);
+        };
+    }, []);
+    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;
+        }
+        host.dispatchEvent(new window.CustomEvent('omnitable-item-click', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                item: e.currentTarget.dataItem,
+                index: e.currentTarget.dataIndex,
+            },
+        }));
+    }, []);
+    const { groupOnColumn } = sortAndGroupOptions, onItemChange = useCallback((column, item) => (value) => _onItemChange(host, column, item, value), []);
+    return {
+        ...rest,
+        processedItems,
+        dataIsValid,
+        filterIsTooStrict: dataIsValid && processedItems.length < 1,
+        loading,
+        compareItemsFn,
+        displayEmptyGroups,
+        error,
+        renderItem: useMemo(() => renderItem({
+            columns,
+            collapsedColumns,
+            miniColumns,
+            onItemClick,
+            onCheckboxChange,
+            dataIsValid,
+            groupOnColumn,
+            onItemChange,
+            rowPartFn,
+        }), [
+            columns,
+            collapsedColumns,
+            onItemClick,
+            onCheckboxChange,
+            dataIsValid,
+            groupOnColumn,
+            onItemChange,
+            rowPartFn,
+        ]),
+        renderGroup: useMemo(() => renderGroup({
+            onCheckboxChange,
+            dataIsValid,
+            groupOnColumn,
+        }), [onCheckboxChange, dataIsValid, groupOnColumn]),
+    };
+};
+//# sourceMappingURL=use-list.js.map

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

@@ -0,0 +1,10 @@
+export function useMini({ host, canvasWidth, columns: _columns }: {
+    host: any;
+    canvasWidth: any;
+    columns: any;
+}): {
+    isMini: boolean;
+    miniColumn: any;
+    miniColumns: any;
+};
+//# sourceMappingURL=use-mini.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-mini.d.ts","sourceRoot":"","sources":["../../src/lib/use-mini.js"],"names":[],"mappings":"AAEO;;;;;;;;EA2BN"}

package/dist/lib/use-mini.js

@@ -0,0 +1,19 @@
+import { useMemo, useEffect } from '@pionjs/pion';
+export const useMini = ({ host, canvasWidth, columns: _columns }) => {
+    const breakpoint = host.miniBreakpoint ?? 480;
+    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;
+    useEffect(() => {
+        host.toggleAttribute('mini', hasMiniColumn);
+    }, [hasMiniColumn]);
+    return {
+        isMini: hasMiniColumn && isMiniSize,
+        miniColumn,
+        miniColumns,
+    };
+};
+//# sourceMappingURL=use-mini.js.map