@neovici/cosmoz-omnitable 12.29.0 → 13.1.0

package/cosmoz-omnitable-group-row.js

@@ -1,4 +1,4 @@
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import { nothing } from 'lit-html';
 
 const GroupRow = ({ column, item, selected, folded, group }) => {

package/cosmoz-omnitable-header-row.js

@@ -1,4 +1,4 @@
-import { html, component } from 'haunted';
+import { html, component } from '@pionjs/pion';
 import { repeat } from 'lit-html/directives/repeat.js';
 import './lib/cosmoz-omnitable-resize-nub';
 import { render } from './lib/settings/cosmoz-omnitable-sort-group';

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

@@ -1,4 +1,4 @@
-import { component, html } from 'haunted';
+import { component, html } from '@pionjs/pion';
 
 const OmnitableItemExpandLine = ({ column }) => html`
 	<style>

package/cosmoz-omnitable-item-expand.js

@@ -1,5 +1,5 @@
 /* eslint-disable object-curly-newline */
-import { component, useEffect } from 'haunted';
+import { component, useEffect } from '@pionjs/pion';
 import { html, nothing } from 'lit-html';
 import './cosmoz-omnitable-item-expand-line';
 import { notifyResize } from './lib/utils';

package/cosmoz-omnitable-item-row.js

@@ -1,4 +1,4 @@
-import { component, html } from 'haunted';
+import { component, html } from '@pionjs/pion';
 import { repeat } from 'lit-html/directives/repeat.js';
 
 const

package/cosmoz-omnitable.js

@@ -21,7 +21,7 @@ import { html } from 'lit-html';
 import { guard } from 'lit-html/directives/guard.js';
 
 import { useOmnitable } from './lib/use-omnitable';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import { renderHeader } from './lib/render-header';
 import { renderFooter } from './lib/render-footer';
 import { renderList } from './lib/render-list';

package/lib/compute-layout.js

@@ -1,4 +1,4 @@
-import { html } from 'haunted';
+import { html } from '@pionjs/pion';
 import { layout } from './layout';
 
 const

package/lib/cosmoz-omnitable-resize-nub.js

@@ -1,4 +1,4 @@
-import { useEffect, component } from 'haunted';
+import { useEffect, component } from '@pionjs/pion';
 import { nothing } from 'lit-html';
 
 const

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

@@ -1,4 +1,4 @@
-import { html, component } from 'haunted';
+import { html, component } from '@pionjs/pion';
 import { _ } from '@neovici/cosmoz-i18next';
 import { isEmpty } from '@neovici/cosmoz-utils/template';
 import { defaultPlacement } from '@neovici/cosmoz-dropdown';

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

@@ -1,4 +1,4 @@
-import { html } from 'haunted';
+import { html } from '@pionjs/pion';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { triangle } from '../icons';
 

package/lib/settings/drivers/context.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo } from 'haunted';
+import { createContext, useContext, useMemo } from '@pionjs/pion';
 import local from './local';
 
 export const DriverContext = createContext(local),

package/lib/settings/use-saved-settings.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'haunted';
+import { useCallback, useEffect, useState } from '@pionjs/pion';
 import { normalizeStore } from './normalize';
 import { useDriver } from './drivers';
 

package/lib/settings/use-settings-ui.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'haunted';
+import { useCallback } from '@pionjs/pion';
 import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 
 const parseIndex = (str) => {

package/lib/settings/use-settings.js

@@ -1,4 +1,4 @@
-import { useMemo, useState, useRef, useCallback } from 'haunted';
+import { useMemo, useState, useRef, useCallback } from '@pionjs/pion';
 
 import useSavedSettings from './use-saved-settings';
 import normalize, { sgProps } from './normalize';

package/lib/use-canvas-width.js

@@ -1,4 +1,4 @@
-import { useState } from 'haunted';
+import { useState } from '@pionjs/pion';
 import { useTrackSize } from './use-track-size';
 
 export const useCanvasWidth = host => {

package/lib/use-dom-columns.js

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useState } from 'haunted';
+import { useEffect, useLayoutEffect, useState } from '@pionjs/pion';
 import { memooize } from '@neovici/cosmoz-utils/memoize';
 
 const columnSymbol = Symbol('column'),

package/lib/use-fast-layout.js

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useMemo } from 'haunted';
+import { useLayoutEffect, useMemo } from '@pionjs/pion';
 import { toCss } from './compute-layout';
 import { useResizableColumns } from './use-resizable-columns';
 import { useCanvasWidth } from './use-canvas-width';

package/lib/use-hash-state.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'haunted';
+import { useCallback, useState } from '@pionjs/pion';
 import { navigate } from '@neovici/cosmoz-router';
 import { identity, invoke } from '@neovici/cosmoz-utils/function';
 

package/lib/use-header.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines-per-function */
-import { useEffect, useMemo } from 'haunted';
+import { useEffect, useMemo } from '@pionjs/pion';
 
 export const useHeader = ({
 	host,

package/lib/use-layout.js

@@ -1,4 +1,4 @@
-import { useMemo } from 'haunted';
+import { useMemo } from '@pionjs/pion';
 import { computeLayout } from './compute-layout';
 
 export const useLayout = ({ canvasWidth, groupOnColumn, config }) => useMemo(() => {

package/lib/use-list.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines-per-function */
-import { html, useCallback, useEffect, useMemo, useRef } from 'haunted';
+import { html, useCallback, useEffect, useMemo, useRef } from '@pionjs/pion';
 import { indexSymbol } from './utils';
 import { isEmpty } from '@neovici/cosmoz-utils/template';
 import { onItemChange as _onItemChange } from './utils-data';
@@ -7,20 +7,24 @@ import { onItemChange as _onItemChange } from './utils-data';
 const _getGroupRowClasses = (folded) =>
 		folded ? 'groupRow groupRow-folded' : 'groupRow',
 	_getFoldIcon = (expanded) => (expanded ? 'expand-less' : 'expand-more'),
-	renderItem = ({
-		columns,
-		collapsedColumns,
-		onItemClick,
-		onCheckboxChange,
-		dataIsValid,
-		groupOnColumn,
-		onItemChange,
-	}) => {
-		return (item, index, { selected, expanded, toggleCollapse }) => {
-			return html` <div class="item-row-wrapper">
+	renderItem =
+		({
+			columns,
+			collapsedColumns,
+			onItemClick,
+			onCheckboxChange,
+			dataIsValid,
+			groupOnColumn,
+			onItemChange,
+			rowPartFn,
+		}) =>
+		(item, index, { selected, expanded, toggleCollapse }) =>
+			html` <div class="item-row-wrapper">
 				<div
 					?selected=${selected}
-					part="itemRow itemRow-${item[indexSymbol]}"
+					part="${['itemRow', `itemRow-${item[indexSymbol]}`, rowPartFn?.(item, index)]
+						.filter(Boolean)
+						.join(' ')}"
 					.dataIndex=${item[indexSymbol]}
 					.dataItem=${item}
 					class="itemRow"
@@ -62,9 +66,7 @@ const _getGroupRowClasses = (folded) =>
 					part="item-expand"
 				>
 				</cosmoz-omnitable-item-expand>
-			</div>`;
-		};
-	},
+			</div>`,
 	renderGroup = ({ onCheckboxChange, dataIsValid, groupOnColumn }) => {
 		return (item, index, { selected, folded, toggleFold }) =>
 			html` <div
@@ -106,6 +108,7 @@ export const useList = ({
 	columns,
 	collapsedColumns,
 	sortAndGroupOptions,
+	rowPartFn,
 	...rest
 }) => {
 	const { loading = false, displayEmptyGroups = false, compareItemsFn } = host,
@@ -193,6 +196,7 @@ export const useList = ({
 					dataIsValid,
 					groupOnColumn,
 					onItemChange,
+					rowPartFn,
 				}),
 			[
 				columns,
@@ -202,6 +206,7 @@ export const useList = ({
 				dataIsValid,
 				groupOnColumn,
 				onItemChange,
+				rowPartFn,
 			],
 		),
 		renderGroup: useMemo(

package/lib/use-omnitable.js

@@ -1,4 +1,4 @@
-import { useState } from 'haunted';
+import { useState } from '@pionjs/pion';
 import { useProcessedItems } from './use-processed-items';
 import { useFastLayout } from './use-fast-layout';
 import { useSettings } from './settings';
@@ -18,7 +18,8 @@ export const useOmnitable = (host) => {
 			noLocal,
 			noLocalSort = noLocal,
 			noLocalFilter = noLocal,
-			error
+			error,
+			rowPartFn
 		} = host,
 		settingS = useSettings({ settingsId, host }),
 		{ settings, setSettings, columns, resetRef } = settingS,
@@ -86,6 +87,7 @@ export const useOmnitable = (host) => {
 			columns,
 			collapsedColumns,
 			sortAndGroupOptions,
+			rowPartFn
 		}),
 		footer: useFooter({
 			host,

package/lib/use-processed-items.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'haunted';
+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';

package/lib/use-public-interface.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines-per-function */
 import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
-import { useEffect, useMemo } from 'haunted';
+import { useEffect, useMemo } from '@pionjs/pion';
 import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 
 const mkNapi = (host) => {

package/lib/use-resizable-columns.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'haunted';
+import { useEffect, useRef } from '@pionjs/pion';
 
 export const useResizableColumns = ({
 	host,

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

@@ -5,7 +5,7 @@ import {
 	useContext,
 	useCallback,
 	useEffect,
-} from 'haunted';
+} from '@pionjs/pion';
 import { useHashState } from './use-hash-state';
 
 const parseBool = (bool) => [true, 'true', 1, 'yes', 'on'].includes(bool),
@@ -16,7 +16,7 @@ const parseBool = (bool) => [true, 'true', 1, 'yes', 'on'].includes(bool),
 				setter(value);
 				setSettings((s) => ({ ...s, [name]: value }));
 			},
-			[setter, name, setSettings]
+			[setter, name, setSettings],
 		);
 
 // eslint-disable-next-line max-lines-per-function
@@ -25,7 +25,7 @@ export const useSortAndGroupOptions = (
 		hashParam,
 		settings,
 		setSettings,
-		resetRef
+		resetRef,
 	) => {
 		const [sortOn, setSortOn] = useHashState(settings.sortOn, hashParam, {
 				suffix: '-sortOn',
@@ -36,7 +36,7 @@ export const useSortAndGroupOptions = (
 				{
 					suffix: '-descending',
 					read: boolParam,
-				}
+				},
 			),
 			[groupOn, setGroupOn] = useHashState(settings.groupOn, hashParam, {
 				suffix: '-groupOn',
@@ -44,15 +44,15 @@ export const useSortAndGroupOptions = (
 			[groupOnDescending, setGroupOnDescending] = useHashState(
 				settings.groupOnDescending,
 				hashParam,
-				{ suffix: '-groupOnDescending', read: boolParam }
+				{ suffix: '-groupOnDescending', read: boolParam },
 			),
 			sortOnColumn = useMemo(
 				() => columns.find((column) => column.name === sortOn),
-				[columns, sortOn]
+				[columns, sortOn],
 			),
 			groupOnColumn = useMemo(
 				() => columns.find((column) => column.name === groupOn),
-				[columns, groupOn]
+				[columns, groupOn],
 			),
 			sortAndGroup_ = {
 				groupOn,
@@ -61,7 +61,7 @@ export const useSortAndGroupOptions = (
 				setGroupOnDescending: useSettingsState(
 					setGroupOnDescending,
 					'groupOnDescending',
-					setSettings
+					setSettings,
 				),
 
 				sortOn,
@@ -70,7 +70,7 @@ export const useSortAndGroupOptions = (
 				setDescending: useSettingsState(
 					setDescending,
 					'descending',
-					setSettings
+					setSettings,
 				),
 
 				columns,
@@ -100,5 +100,5 @@ customElements.define(
 	'sort-and-group-consumer',
 	component(({ render }) => render(useContext(SortAndGroupContext)), {
 		useShadowDOM: false,
-	})
+	}),
 );

package/lib/use-track-size.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'haunted';
+import { useEffect } from '@pionjs/pion';
 
 export const useTrackSize = (host, setCanvasWidth) =>
 	useEffect(() => {

package/lib/use-tween-array.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'haunted';
+import { useCallback, useEffect, useRef, useState } from '@pionjs/pion';
 
 export const isCloseEnough = (a = 0, b = 0) => Math.abs(a - b) < 0.1,
 	// eslint-disable-next-line max-lines-per-function

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "12.29.0",
+	"version": "13.1.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -59,17 +59,18 @@
 		}
 	},
 	"dependencies": {
-		"@neovici/cosmoz-autocomplete": "^6.0.0 || ^7.0.0",
-		"@neovici/cosmoz-bottom-bar": "^6.0.0",
+		"@neovici/cosmoz-autocomplete": "^8.0.0",
+		"@neovici/cosmoz-bottom-bar": "^7.0.0",
 		"@neovici/cosmoz-collapse": "^1.1.0",
-		"@neovici/cosmoz-datetime-input": "^3.0.3",
-		"@neovici/cosmoz-dropdown": "^3.0.0",
-		"@neovici/cosmoz-grouped-list": "^6.0.0",
+		"@neovici/cosmoz-datetime-input": "^4.0.0",
+		"@neovici/cosmoz-dropdown": "^4.0.0",
+		"@neovici/cosmoz-grouped-list": "^7.0.0",
 		"@neovici/cosmoz-i18next": "^3.1.1",
-		"@neovici/cosmoz-input": "^3.15.0",
-		"@neovici/cosmoz-router": "^10.0.0",
-		"@neovici/cosmoz-utils": "^5.16.0",
+		"@neovici/cosmoz-input": "^4.0.0",
+		"@neovici/cosmoz-router": "^11.0.0",
+		"@neovici/cosmoz-utils": "^6.0.0",
 		"@neovici/nullxlsx": "^3.0.0",
+		"@pionjs/pion": "^2.0.0",
 		"@polymer/iron-icon": "^3.0.0",
 		"@polymer/iron-icons": "^3.0.0",
 		"@polymer/paper-dropdown-menu": "^3.2.0",
@@ -77,15 +78,14 @@
 		"@polymer/paper-spinner": "^3.0.0",
 		"@polymer/polymer": "^3.3.0",
 		"file-saver-es": "^2.0.0",
-		"haunted": "^5.0.0",
-		"lit-html": "^2.0.0"
+		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^18.0.0",
 		"@commitlint/config-conventional": "^18.0.0",
 		"@neovici/cfg": "^1.18.0",
-		"@neovici/cosmoz-viewinfo": "^3.1.0",
-		"@open-wc/testing": "^3.0.0",
+		"@neovici/cosmoz-viewinfo": "^4.0.0",
+		"@open-wc/testing": "^4.0.0",
 		"@polymer/iron-test-helpers": "^3.0.0",
 		"@polymer/paper-button": "^3.0.0",
 		"@polymer/paper-item": "^3.0.0",

package/ui-helpers/cosmoz-clear-button.js

@@ -1,5 +1,5 @@
 import { tagged as css } from '@neovici/cosmoz-utils';
-import { html, component } from 'haunted';
+import { html, component } from '@pionjs/pion';
 
 const styles = css`
 	:host {