@neovici/cosmoz-tabs 7.5.0 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-tabs",
-	"version": "7.5.0",
+	"version": "8.0.0",
 	"description": "A multi views container element that allow navigation between the views using tabs or an accordion.",
 	"keywords": [
 		"web-components"
@@ -68,29 +68,27 @@
 		"./next/*": "./src/next/*"
 	},
 	"dependencies": {
-		"@neovici/cosmoz-router": "^10.0.0",
-		"@neovici/cosmoz-utils": "^5.0.0",
+		"@neovici/cosmoz-router": "^11.0.0",
+		"@neovici/cosmoz-utils": "^6.0.0",
+		"@pionjs/pion": "^2.0.0",
 		"@polymer/iron-icon": "^3.0.0",
 		"@polymer/iron-icons": "^3.0.0",
 		"compute-scroll-into-view": "^1.0.17",
-		"haunted": "^5.0.0",
-		"lit-html": "^2.0.0"
+		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^17.0.0",
-		"@commitlint/config-conventional": "^17.0.0",
+		"@commitlint/cli": "^18.0.0",
+		"@commitlint/config-conventional": "^18.0.0",
 		"@neovici/cfg": "^1.11.0",
-		"@open-wc/testing": "^3.0.0",
+		"@open-wc/testing": "^4.0.0",
 		"@polymer/iron-list": "^3.1.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.0",
-		"@web/dev-server-storybook": "^0.5.0",
-		"@web/test-runner": "^0.15.0",
-		"eslint-import-resolver-typescript": "^3.2.7",
+		"@web/dev-server-storybook": "^2.0.0",
 		"husky": "^8.0.0",
-		"semantic-release": "^20.0.0",
-		"sinon": "^15.0.0",
-		"typescript": "^4.4.0"
+		"semantic-release": "^22.0.0",
+		"sinon": "^17.0.0",
+		"typescript": "^5.0.0"
 	}
 }

package/src/cosmoz-tab-card.js

@@ -1,8 +1,5 @@
 // @license Copyright (C) 2015 Neovici AB - Apache 2 License
-import {
-	html,
-	component
-} from 'haunted';
+import { html, component } from '@pionjs/pion';
 
 /**
 
@@ -22,52 +19,60 @@ Custom property                         | Description              | Default
 `--cosmoz-tab-card-content-line-height` | Card content line height | `initial`
 `--cosmoz-tab-card-content-padding`     | Card content padding     | `initial`
 */
-const CosmozTabCard = ({ heading }) => html`
-<style>
-	:host {
-		display: block;
-		position: relative;
-		box-sizing: border-box;
-		background-color: #fff;
-		border-radius: 3px;
-		margin: 15px;
-		align-self: flex-start;
-		padding: var(--cosmoz-tab-card-padding, 0);
-		width: var(--cosmoz-tab-card-width, 300px);
-		box-shadow: var(--cosmoz-shadow-2dp, var(--shadow-elevation-2dp_-_box-shadow, 0 2px 4px 0 #e5e5e5));
-	}
+const CosmozTabCard = ({ heading }) =>
+	html` <style>
+			:host {
+				display: block;
+				position: relative;
+				box-sizing: border-box;
+				background-color: #fff;
+				border-radius: 3px;
+				margin: 15px;
+				align-self: flex-start;
+				padding: var(--cosmoz-tab-card-padding, 0);
+				width: var(--cosmoz-tab-card-width, 300px);
+				box-shadow: var(
+					--cosmoz-shadow-2dp,
+					var(--shadow-elevation-2dp_-_box-shadow, 0 2px 4px 0 #e5e5e5)
+				);
+			}
 
-	#content {
-		line-height: var(--cosmoz-tab-card-content-line-height, initial);
-		padding: var(--cosmoz-tab-card-content-padding, initial);
-	}
+			#content {
+				line-height: var(--cosmoz-tab-card-content-line-height, initial);
+				padding: var(--cosmoz-tab-card-content-padding, initial);
+			}
 
-	#header {
-		display: flex;
-		align-items: center;
-		background-color: #fff;
-		cursor: default;
-		-webkit-tap-highlight-color: rgba(0,0,0,0);
-	}
+			#header {
+				display: flex;
+				align-items: center;
+				background-color: #fff;
+				cursor: default;
+				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+			}
 
-	.heading {
-		font-family: inherit;
-		font-size: 17px;
-		font-weight: 400;
-		flex: 1;
-		margin: 0.67em 0 0;
-	}
-</style>
+			.heading {
+				font-family: inherit;
+				font-size: 17px;
+				font-weight: 400;
+				flex: 1;
+				margin: 0.67em 0 0;
+			}
+		</style>
 
-<div id="header" part="header">
-	<h1 class="heading" part="heading">${ heading }<slot name="after-title"></slot></h1>
-	<slot name="card-actions"></slot>
-</div>
+		<div id="header" part="header">
+			<h1 class="heading" part="heading">
+				${heading}<slot name="after-title"></slot>
+			</h1>
+			<slot name="card-actions"></slot>
+		</div>
 
-<div id="content" part="content">
-	<slot></slot>
-</div>`;
+		<div id="content" part="content">
+			<slot></slot>
+		</div>`;
 
-customElements.define('cosmoz-tab-card', component(CosmozTabCard, {
-	observedAttributes: ['heading']
-}));
+customElements.define(
+	'cosmoz-tab-card',
+	component(CosmozTabCard, {
+		observedAttributes: ['heading'],
+	}),
+);

package/src/cosmoz-tab.js

@@ -3,7 +3,7 @@ import './cosmoz-tab-card.js';
 import {
 	html,
 	component
-} from 'haunted';
+} from '@pionjs/pion';
 import { useTab } from './use-tab';
 
 /**

package/src/cosmoz-tabs.js

@@ -1,5 +1,5 @@
 // @license Copyright (C) 2015 Neovici AB - Apache 2 License
-import { html, component } from 'haunted';
+import { html, component } from '@pionjs/pion';
 import { useTabs } from './use-tabs';
 import { style, renderTab } from './render';
 import './cosmoz-tab.js';

package/src/next/cosmoz-tab.js

@@ -1,4 +1,4 @@
-import { component, useEffect, useLayoutEffect } from 'haunted';
+import { component, useEffect, useLayoutEffect } from '@pionjs/pion';
 import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import computeScroll from 'compute-scroll-into-view';

package/src/next/cosmoz-tabs.js

@@ -1,4 +1,4 @@
-import { html, component, useEffect } from 'haunted';
+import { html, component, useEffect } from '@pionjs/pion';
 import style from './cosmoz-tabs.css';
 
 const Tabs = (host) => {

package/src/next/use-tabs.d.ts

@@ -11,6 +11,7 @@ export interface RenderTab extends Tab {
 
 export interface Options {
 	hashParam?: string;
+	onActivate?: (name: string) => void;
 }
 
 type Unpacked<T> = T extends (infer U)[] ? U : T;
@@ -30,7 +31,7 @@ export type RenderTabs<T extends Tab> = Pick<
 
 export declare const useTabs: <T extends Tab, P extends Options>(
 	tabs: T[],
-	opts: P
+	opts?: P
 ) => Result<T>;
 
 export interface RenderOptions<T extends RenderTab> {

package/src/next/use-tabs.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/group-exports */
-import { html, useMemo, useCallback, useRef } from 'haunted';
+import { html, useMemo, useCallback, useRef } from '@pionjs/pion';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 /* eslint-disable-next-line import/no-unresolved */
 import { useHashParam } from '@neovici/cosmoz-router/use-hash-param';
@@ -16,15 +16,21 @@ const isValid = (tab) => !tab.hidden && !tab.disabled,
 		return tab && isValid(tab) ? tab : valid(tabs);
 	};
 
-export const useTabs = (tabs, { hashParam }) => {
+export const useTabs = (tabs, { hashParam, onActivate }) => {
 	const [name, activate] = useHashParam(hashParam),
 		ref = useRef([]),
 		active = useMemo(() => choose(tabs, name), [tabs, name]),
 		activated = useMemo(() => {
 			const name = active.name;
 			return (ref.current = [...ref.current.filter((i) => i !== name), name]);
-		}, [active]),
-		onActivate = useCallback(
+		}, [active]);
+
+	return {
+		tabs,
+		active,
+		activated,
+		activate,
+		onActivate: useCallback(
 			(e) => {
 				if (e.button !== 0 || e.metaKey || e.ctrlKey) {
 					return;
@@ -33,17 +39,11 @@ export const useTabs = (tabs, { hashParam }) => {
 				if (!name) {
 					return;
 				}
+				onActivate?.(name);
 				activate(name);
 			},
-			[activate]
-		);
-
-	return {
-		tabs,
-		active,
-		activated,
-		activate,
-		onActivate,
+			[activate, onActivate]
+		),
 	};
 };
 

package/src/render.js

@@ -1,4 +1,4 @@
-import { html } from 'haunted';
+import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { getIcon, getIconStyle } from './utils';
 
@@ -100,29 +100,42 @@ const style = `
 	color: #ffffff;
 	text-align: center;
 }`,
+	renderTab =
+		({ selectedTab, onSelect, href }) =>
+		(tab, i, tabs) => {
+			const isSelected = selectedTab === tab,
+				icon = getIcon(tab, isSelected);
+			return html`<a
+				class="tab"
+				tabindex="-1"
+				role="tab"
+				part=${[
+					'tab',
+					i === 0 && 'first-tab',
+					i === tabs.length - 1 && 'last-tab',
+					isSelected && 'selected-tab',
+				]
+					.filter(Boolean)
+					.join(' ')}
+				?hidden=${tab.hidden}
+				?disabled=${tab.disabled}
+				?aria-selected=${isSelected}
+				@click=${onSelect}
+				.tab=${tab}
+				href=${ifDefined(href(tab))}
+			>
+				${icon
+					? html`<iron-icon
+							class="icon"
+							icon=${icon}
+							style=${getIconStyle(tab)}
+						></iron-icon>`
+					: ''}
+				<span>${tab.heading}</span>
+				${tab.badge
+					? html`<div class="badge" title=${tab.badge}>${tab.badge}</div>`
+					: ''}
+			</a>`;
+		};
 
-	renderTab = ({
-		selectedTab,
-		onSelect,
-		href
-	}) => (tab, i, tabs) => {
-		const isSelected = selectedTab === tab,
-			icon = getIcon(tab, isSelected);
-		return html`<a class="tab" tabindex="-1" role="tab"
-			part=${ ['tab', i === 0 && 'first-tab', i === tabs.length - 1 && 'last-tab', isSelected && 'selected-tab'].filter(Boolean).join(' ') }
-			?hidden=${ tab.hidden } ?disabled=${ tab.disabled }
-			?aria-selected=${ isSelected }
-			@click=${ onSelect }
-			.tab=${ tab }
-			href=${ ifDefined(href(tab)) }
-		>
-			${ icon ? html `<iron-icon class="icon" icon=${ icon } style=${ getIconStyle(tab) }></iron-icon>` : '' }
-			<span>${ tab.heading }</span>
-			${ tab.badge ? html`<div class="badge" title=${ tab.badge }>${ tab.badge }</div>` : '' }
-		</a>`;
-	};
-
-export {
-	style,
-	renderTab
-};
+export { style, renderTab };

package/src/use-tab.js

@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from 'haunted';
+import { useEffect, useCallback } from '@pionjs/pion';
 import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 
 const useTab = (host) => {

package/src/use-tabs.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useCallback } from 'haunted';
+import { useState, useEffect, useMemo, useCallback } from '@pionjs/pion';
 import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 /* eslint-disable-next-line import/no-unresolved */
 import { useHashParam, link } from '@neovici/cosmoz-router/use-hash-param';