@neovici/cosmoz-omnitable 14.0.5 → 14.1.0

package/cosmoz-omnitable-header-row.js

@@ -1,8 +1,9 @@
-import { html, component } from '@pionjs/pion';
+import { html, component, useContext } 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';
 import { when } from 'lit-html/directives/when.js';
+import { SortAndGroupContext } from './lib/use-sort-and-group-options';
 
 const /* eslint-disable-next-line max-lines-per-function */
 	renderHeaderRow = ({
@@ -11,66 +12,64 @@ const /* eslint-disable-next-line max-lines-per-function */
 		groupOnColumn,
 		filters,
 		setFilterState,
+		sortAndGroup: {
+			sortOn: on,
+			setSortOn: setOn,
+			descending,
+			setDescending,
+		} = {},
 	}) =>
 		repeat(
 			columns,
 			(column) => column.name,
-			(column) => [
+			(column) =>
 				html`<div
-					class="cell ${column.headerCellClass} header-cell"
-					part="cell header-cell cell-${column.name} header-cell-${column.name}"
-					?hidden=${column === groupOnColumn}
-					title=${column.title}
-					name=${column.name}
-				>
-					${[
-						column.renderHeader(
+						class="cell ${column.headerCellClass} header-cell"
+						part="cell header-cell cell-${column.name} header-cell-${column.name}"
+						?hidden="${column === groupOnColumn}"
+						title="${column.title}"
+						name="${column.name}"
+					>
+						${column.renderHeader(
 							column,
 							filters[column.name] ?? {},
 							(state) => setFilterState(column.name, state),
 							column.source(column, data),
-						),
-						html` <sort-and-group-consumer
-							style="display:contents"
-							.render=${({
-								sortOn: on,
-								setSortOn: setOn,
-								descending,
-								setDescending,
-							} = {}) =>
-								render({
-									on,
-									setOn,
-									descending,
-									setDescending,
-									column,
-								})}
-						>
-						</sort-and-group-consumer>`,
-					]}
-				</div>`,
-				html`<cosmoz-omnitable-resize-nub
-					.column=${column}
-					name=${column.name}
-				></cosmoz-omnitable-resize-nub>`,
-			],
-		),
-	HeaderRow = ({ columns, settingsConfig, hideSelectAll, ...thru }) => [
-		columns &&
+						)}
+						${render({
+							on,
+							setOn,
+							descending,
+							setDescending,
+							column,
+						})}
+					</div>
+					<cosmoz-omnitable-resize-nub
+						.column="${column}"
+						name="${column.name}"
+					></cosmoz-omnitable-resize-nub>`,
+		);
+
+const HeaderRow = ({ columns, settingsConfig, hideSelectAll, ...thru }) => {
+	const sortAndGroup = useContext(SortAndGroupContext);
+	return html`
+		${when(columns, (columns) =>
 			renderHeaderRow({
 				columns,
+				sortAndGroup,
 				...thru,
 			}),
-		when(
+		)}
+		${when(
 			!hideSelectAll,
 			() =>
 				html` <cosmoz-omnitable-settings
 					.config=${settingsConfig}
 					part="settings"
-				>
-				</cosmoz-omnitable-settings>`,
-		),
-	];
+				></cosmoz-omnitable-settings>`,
+		)}
+	`;
+};
 
 customElements.define(
 	'cosmoz-omnitable-header-row',

package/cosmoz-omnitable-styles.js

@@ -37,7 +37,8 @@ const checkbox = css`
 		box-sizing: content-box;
 		width: 5px;
 		height: 10px;
-		border: 2.4px solid #fff;
+		border: 2.4px solid
+			var(--cosmoz-omnitable-checkbox-checked-tick-color, #fff);
 		border-top: none;
 		border-left: none;
 		transform-origin: 5px 10px;
@@ -523,7 +524,7 @@ export default css`
 	.sg:not([data-on='desc']) {
 		transform: scaleY(-1);
 	}
-	:not(:hover) > * > .sg:not([data-on]) {
+	:not(:hover) > .sg:not([data-on]) {
 		display: none;
 	}
 	.header-cell {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-omnitable",
-  "version": "14.0.5",
+  "version": "14.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"