refactor: convert group row to ts (#868)

* chore: use pion Renderable and keep group row TS

* chore(lint): fix

* refactor: export from main pionjs

Author: megheaiulian

package-lock.json

@@ -118,7 +118,7 @@
     "@neovici/cosmoz-spinner": "^1.0.1",
     "@neovici/cosmoz-utils": "^6.14.2",
     "@neovici/nullxlsx": "^3.0.0",
-    "@pionjs/pion": "^2.0.0",
+    "@pionjs/pion": "^2.11.0",
     "@polymer/polymer": "^3.3.0",
     "file-saver-es": "^2.0.0",
     "i18next": "^25.6.0",

package.json

@@ -0,0 +1,30 @@
+import { component } from '@pionjs/pion';
+import { nothing } from 'lit-html';
+import { GroupItem } from './grouped-list/utils';
+import { Column, RenderContext } from './lib/types';
+
+interface GroupRowProps {
+	column: Column;
+	item: RenderContext['item'];
+	selected: boolean;
+	folded: boolean;
+	group: GroupItem;
+}
+
+const GroupRow = ({ column, item, selected, folded, group }: GroupRowProps) => {
+	if (!column) {
+		return nothing;
+	}
+
+	return (column.renderGroup ?? column.renderCell)?.(column, {
+		item,
+		selected,
+		folded,
+		group,
+	});
+};
+
+customElements.define(
+	'cosmoz-omnitable-group-row',
+	component(GroupRow, { useShadowDOM: false }),
+);

src/cosmoz-omnitable-group-row.js

@@ -1,4 +1,5 @@
-import { html, TemplateResult } from 'lit-html';
+import { html } from 'lit-html';
+import type { Renderable } from '@pionjs/pion';
 import { t } from 'i18next';
 import { saveAsCsvAction, CsvColumn } from './save-as-csv-action';
 import { saveAsXlsxAction, XlsxColumn } from './save-as-xlsx-action';
@@ -21,7 +22,7 @@ export const renderFooter = ({
 	xlsxFilename,
 	xlsxSheetname,
 	topPlacement,
-}: RenderFooterParams): TemplateResult =>
+}: RenderFooterParams): Renderable =>
 	html`<cosmoz-bottom-bar
 		id="bottomBar"
 		?active=${!isEmpty(selectedItems.length)}