@neovici/cosmoz-omnitable 8.14.2 → 9.0.1

package/lib/settings/cosmoz-omnitable-settings.js

@@ -72,7 +72,14 @@ const placement = ['bottom-right', ...defaultPlacement],
 				</style>
 				<div class="headline">
 					${_('Sort and filter')}
-					<button class="close" @click=${(e) => e.currentTarget?.blur()}>
+					<button
+						class="close"
+						@click=${(e) => {
+							const tg = e.currentTarget;
+							tg?.focus();
+							tg?.blur();
+						}}
+					>
 						${close}
 					</button>
 				</div>

package/lib/settings/style.css.js

@@ -17,14 +17,15 @@ export default css`
 		font-weight: 500;
 		font-size: 16px;
 		line-height: 0.95;
-		padding: 12px 14px 11px 14px;
+		padding: 10px 14px;
 		display: flex;
+		align-items: center
 	}
 	.close {
 		border: none;
 		background: none;
 		cursor: pointer;
-		padding: 0;
+		padding: 2.5px 6px;
 		margin-left: auto;
 	}
 
@@ -56,6 +57,7 @@ export default css`
 	}
 	.heading svg {
 		margin-left: auto;
+		margin-right: 4px;
 	}
 	.heading[data-opened] svg {
 		transform: scaleY(-1);
@@ -147,6 +149,7 @@ export default css`
 		padding: 14px;
 	}
 	.sg {
+		color: inherit;
 		border: 1px solid rgba(0, 0, 0, 0.2);
 		border-radius: 2px;
 		font-size: 13px;

package/lib/use-dom-columns.js

@@ -120,10 +120,7 @@ const
 		useEffect(() => {
 			const
 				slot = host.shadowRoot.querySelector('#columnsSlot'),
-				handler = () => {
-					host.suppressNextScrollReset();
-					setColumns(domColumnsToConfig(host, { enabledColumns }));
-				};
+				handler = () => setColumns(domColumnsToConfig(host, { enabledColumns }));
 
 			handler();
 			slot.addEventListener('slotchange', handler);

package/lib/use-fast-layout.js

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useMemo } from 'haunted';
+import { useLayoutEffect, useMemo } from 'haunted';
 import { toCss } from './compute-layout';
 import { useResizableColumns } from './use-resizable-columns';
 import { useCanvasWidth } from './use-canvas-width';
@@ -6,33 +6,33 @@ import { useTweenArray } from './use-tween-array';
 import { useLayout } from './use-layout';
 import { render } from 'lit-html';
 
-export const useFastLayout = ({ host, settings, setSettings, groupOnColumn, resizeSpeedFactor }) => {
-	const
-		canvasWidth = useCanvasWidth(host),
-		layout = useLayout({ canvasWidth, groupOnColumn, config: settings.columns }),
+export const useFastLayout = ({
+	host,
+	settings,
+	setSettings,
+	groupOnColumn,
+	resizeSpeedFactor,
+}) => {
+	const canvasWidth = useCanvasWidth(host),
+		layout = useLayout({
+			canvasWidth,
+			groupOnColumn,
+			config: settings.columns,
+		}),
 		tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
-		layoutCss = useMemo(() => toCss(tweenedlayout, settings.columns), [tweenedlayout]);
+		layoutCss = useMemo(
+			() => toCss(tweenedlayout, settings.columns),
+			[tweenedlayout]
+		);
 
-	useResizableColumns({ host, canvasWidth, layout, setSettings: update => setSettings(update(settings)) });
+	useResizableColumns({
+		host,
+		canvasWidth,
+		layout,
+		setSettings: (update) => setSettings(update(settings)),
+	});
 
 	useLayoutEffect(() => render(layoutCss, host.$.layoutStyle), [layoutCss]);
 
-	// force iron-list to render when the omnitable becomes visible
-	useEffect(() => {
-		let lastWidth = 0;
-
-		const
-			onResize = ([entry]) => {
-				if (lastWidth === 0) {
-					requestAnimationFrame(() => host.$.groupedList.$.list._render());
-				}
-				lastWidth = entry.contentRect?.width;
-			},
-			observer = new ResizeObserver(onResize);
-
-		observer.observe(host);
-		return () => observer.unobserve(host);
-	}, []);
-
 	return layout;
 };

package/lib/use-omnitable.js

@@ -5,6 +5,7 @@ import { useSettings } from './settings';
 import { useDOMColumns } from './use-dom-columns';
 import { useSortAndGroupOptions } from './use-sort-and-group-options';
 import { onItemChange } from './utils-data';
+import { useNotifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property'
 
 // eslint-disable-next-line max-lines-per-function
 export const useOmnitable = (host) => {
@@ -19,6 +20,7 @@ export const useOmnitable = (host) => {
 		// TODO: drop filterFunctions
 		{
 			processedItems,
+			visibleData,
 			filters,
 			setFilterState,
 			numProcessedItems,
@@ -99,6 +101,8 @@ export const useOmnitable = (host) => {
 		return () => observer.unobserve(el);
 	}, []);
 
+	useNotifyProperty('visibleData', visibleData);
+
 	return {
 		...sortAndGroupOptions,
 

package/lib/use-processed-items.js

@@ -3,10 +3,12 @@ import { genericSorter } from './generic-sorter';
 import { invoke } from './invoke';
 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(),
+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;
@@ -16,55 +18,93 @@ const
 			column[columnSymbol].__ownChange = true;
 			column[columnSymbol][key] = value;
 			column[columnSymbol].__ownChange = false;
-			column[columnSymbol].dispatchEvent(new CustomEvent(`${ kebab(key) }-changed`, { bubbles: true, detail: { value }}));
+			column[columnSymbol].dispatchEvent(
+				new CustomEvent(`${kebab(key)}-changed`, {
+					bubbles: true,
+					detail: { value },
+				})
+			);
 		});
-	};
+	},
+	assignIndex = (item, index) => Object.assign(item, { [indexSymbol]: index });
 
 // eslint-disable-next-line max-lines-per-function
-export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescending, sortOnColumn, descending, hashParam }) => {
-	const
-		write = useCallback(([filter, value]) => {
-			const column = columns.find(({ name }) => name === filter);
-			if (column == null) {
-				return [filter, undefined];
-			}
-			return [filter, value.filter && column.serializeFilter(column, value.filter)];
-		}, [columns]),
-
-		read = useCallback(([filter, value]) => {
-			const column = columns.find(({ name }) => name === filter);
-			if (column == null) {
-				return [filter, undefined];
-			}
-
-			const state = { filter: column.deserializeFilter(column, value) };
-			notifyChanges(column, state);
-			return [filter, state];
-		}, [columns]),
-
-		[filters, setFilters] = 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]);
-
-			notifyChanges(columns.find(c => c.name === name), newState);
-
-			return {
-				...filters,
-				[name]: {
-					...filters[name],
-					...newState
+export const useProcessedItems = ({
+	data,
+	columns,
+	groupOnColumn,
+	groupOnDescending,
+	sortOnColumn,
+	descending,
+	hashParam,
+}) => {
+	const write = useCallback(
+			([filter, value]) => {
+				const column = columns.find(({ name }) => name === filter);
+				if (column == null) {
+					return [filter, undefined];
+				}
+				return [
+					filter,
+					value.filter && column.serializeFilter(column, value.filter),
+				];
+			},
+			[columns]
+		),
+		read = useCallback(
+			([filter, value]) => {
+				const column = columns.find(({ name }) => name === filter);
+				if (column == null) {
+					return [filter, undefined];
 				}
-			};
-		}), [columns, setFilters]),
 
-		filterValues = useMemo(() => Object.values(filters).map(f => f.filter), [filters]),
+				const state = { filter: column.deserializeFilter(column, value) };
+				notifyChanges(column, state);
+				return [filter, state];
+			},
+			[columns]
+		),
+		[filters, setFilters] = 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]);
+
+					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(() => {
-			return Object.fromEntries(columns
-				.map(col => [col.name, col.getFilterFn(col, filters[col.name]?.filter)])
-				.filter(([, fn]) => fn !== undefined));
+			return Object.fromEntries(
+				columns
+					.map((col) => [
+						col.name,
+						col.getFilterFn(col, filters[col.name]?.filter),
+					])
+					.filter(([, fn]) => fn !== undefined)
+			);
 		}, [columns, ...filterValues]),
-
 		filteredItems = useMemo(() => {
 			if (!Array.isArray(data) || data.length === 0) {
 				return [];
@@ -74,30 +114,50 @@ export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescend
 				return data.slice();
 			}
 
-			return data.filter(item => Object.values(filterFunctions).every(filterFn => filterFn(item)));
+			return data.filter((item) =>
+				Object.values(filterFunctions).every((filterFn) => filterFn(item))
+			);
 		}, [data, filterFunctions]),
-
 		// todo: extract function
+		// eslint-disable-next-line max-lines-per-function
 		processedItems = useMemo(() => {
-			if (!groupOnColumn && sortOnColumn != null && sortOnColumn.sortOn != null) {
-				return filteredItems.slice().sort(sortBy(a => sortOnColumn.getComparableValue({ ...sortOnColumn, valuePath: sortOnColumn.sortOn }, a), descending));
+			if (
+				!groupOnColumn &&
+				sortOnColumn != null &&
+				sortOnColumn.sortOn != null
+			) {
+				return filteredItems
+					.slice()
+					.sort(
+						sortBy(
+							(a) =>
+								sortOnColumn.getComparableValue(
+									{ ...sortOnColumn, valuePath: sortOnColumn.sortOn },
+									a
+								),
+							descending
+						)
+					);
 			}
 
 			if (groupOnColumn != null && groupOnColumn.groupOn != null) {
 				const groupedResults = filteredItems.reduce((acc, item) => {
-					const gval = groupOnColumn.getComparableValue({ ...groupOnColumn, valuePath: groupOnColumn.groupOn }, item);
+					const gval = groupOnColumn.getComparableValue(
+						{ ...groupOnColumn, valuePath: groupOnColumn.groupOn },
+						item
+					);
 
 					if (gval === undefined) {
 						return acc;
 					}
 
-					let group = acc.find(g => g.id === gval);
+					let group = acc.find((g) => g.id === gval);
 
 					if (!group) {
 						group = {
 							id: gval,
 							name: gval,
-							items: [item]
+							items: [item],
 						};
 						return [...acc, group];
 					}
@@ -106,30 +166,74 @@ export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescend
 					return acc;
 				}, []);
 
-				groupedResults.sort(sortBy(
-					a => groupOnColumn.getComparableValue({ ...groupOnColumn, valuePath: groupOnColumn.groupOn }, a.items[0]), groupOnDescending));
+				groupedResults.sort(
+					sortBy(
+						(a) =>
+							groupOnColumn.getComparableValue(
+								{ ...groupOnColumn, valuePath: groupOnColumn.groupOn },
+								a.items[0]
+							),
+						groupOnDescending
+					)
+				);
 
 				if (!sortOnColumn) {
 					return groupedResults;
 				}
 
 				return groupedResults
-					.filter(group => Array.isArray(group.items))
-					.map(group => {
-						group.items.sort(sortBy(a => sortOnColumn.getComparableValue({ ...sortOnColumn, valuePath: sortOnColumn.sortOn }, a), descending));
+					.filter((group) => Array.isArray(group.items))
+					.map((group) => {
+						group.items.sort(
+							sortBy(
+								(a) =>
+									sortOnColumn.getComparableValue(
+										{ ...sortOnColumn, valuePath: sortOnColumn.sortOn },
+										a
+									),
+								descending
+							)
+						);
 						return group;
 					});
 			}
 
 			return filteredItems;
-		}, [filteredItems, groupOnColumn, groupOnDescending, sortOnColumn, descending]);
+		}, [
+			filteredItems,
+			groupOnColumn,
+			groupOnDescending,
+			sortOnColumn,
+			descending,
+		]),
+		visibleData = useMemo(() => {
+			let index = 0,
+				groupIndex = 0;
+			const result = [];
+			processedItems.forEach((item) => {
+				
+				if(Array.isArray(item.items)) {
+					assignIndex(item, groupIndex++);
+					item.items.forEach(groupItem => {
+						assignIndex(groupItem, index++);
+						result.push(groupItem);						
+					})
+					return;
+				}
+
+				assignIndex(item, index++);
+				return result.push(item);
+			}, []);
+			return result;
+		}, [processedItems]);
 
 	return {
 		processedItems,
+		visibleData,
 		filters,
 		filterFunctions,
 		setFilterState,
 		numProcessedItems: filteredItems.length,
-		groupsCount: processedItems[0]?.items != null ? processedItems.length : 0
+		groupsCount: processedItems[0]?.items != null ? processedItems.length : 0,
 	};
 };

package/lib/use-tween-array.js

@@ -1,47 +1,49 @@
-import { useEffect, useRef, useState } from 'haunted';
+import { useCallback, useEffect, useRef, useState } from 'haunted';
 
-export const
-	isCloseEnough = (a = 0, b = 0) => Math.abs(a - b) < 0.1,
+export const isCloseEnough = (a = 0, b = 0) => Math.abs(a - b) < 0.1,
+	// eslint-disable-next-line max-lines-per-function
 	useTweenArray = (target, speedFactor = 1.9) => {
-		const
-			requestRef = useRef(),
-			targetRef = useRef(target),
-			runningRef = useRef(false),
+		const state = useRef({
+				request: undefined,
+				target,
+				running: false,
+			}),
 			[tween, setTween] = useState(target),
+			animate = useCallback(() => {
+				state.current.request = requestAnimationFrame(animate);
 
-			animate = () => {
-				requestRef.current = requestAnimationFrame(animate);
-
-				if (!runningRef.current) {
+				if (!state.current.running) {
 					return;
 				}
 
-				setTween(tween => {
-					const target = targetRef.current;
+				setTween((tween) => {
+					const target = state.current.target;
 
 					if (target.every((t, idx) => tween[idx] === t)) {
-						runningRef.current = false;
+						state.current.running = false;
 						return tween;
 					}
 
 					return target.map((t, idx) =>
 						isCloseEnough(tween[idx], t)
 							? t
-							: (tween[idx] ?? 0) + ((t ?? 0) - (tween[idx] ?? 0)) / speedFactor || 0);
+							: (tween[idx] ?? 0) +
+									((t ?? 0) - (tween[idx] ?? 0)) / speedFactor || 0
+					);
 				});
-			};
+			}, []);
 
 		useEffect(() => {
-			requestRef.current = requestAnimationFrame(animate);
-			return () => cancelAnimationFrame(requestRef.current);
+			state.current.request = requestAnimationFrame(animate);
+			return () => cancelAnimationFrame(state.current.request);
 		}, []);
 
 		useEffect(() => {
-			if (targetRef.current.length === 0 && target.length > 0) {
+			if (state.current.target.length === 0 && target.length > 0) {
 				setTween(target);
 			}
-			targetRef.current = target;
-			runningRef.current = true;
+			state.current.target = target;
+			state.current.running = true;
 		}, [target]);
 
 		return tween;

package/lib/utils.js

@@ -0,0 +1,10 @@
+const notifyResize = (target, index) =>
+	target.dispatchEvent(
+		new CustomEvent('update-item-size', {
+			bubbles: true,
+			detail: { index },
+		})
+	),
+	indexSymbol = Symbol('index');
+
+export { notifyResize, indexSymbol };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "8.14.2",
+	"version": "9.0.1",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -57,7 +57,7 @@
 		"@neovici/cosmoz-collapse": "^1.1.0",
 		"@neovici/cosmoz-datetime-input": "^3.0.3",
 		"@neovici/cosmoz-dropdown": "^1.5.0",
-		"@neovici/cosmoz-grouped-list": "^3.2.0",
+		"@neovici/cosmoz-grouped-list": "^4.0.7",
 		"@neovici/cosmoz-i18next": "^3.1.1",
 		"@neovici/cosmoz-page-router": "^7.0.0 || ^8.0.0",
 		"@neovici/cosmoz-utils": "^3.19.0",