@neovici/cosmoz-tabs 8.3.0 → 8.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-tabs",
-	"version": "8.3.0",
+	"version": "8.5.0",
 	"description": "A multi views container element that allow navigation between the views using tabs or an accordion.",
 	"keywords": [
 		"web-components"
@@ -31,7 +31,7 @@
 		"test:watch": "wtr --watch",
 		"storybook:build": "build-storybook",
 		"storybook:deploy": "storybook-to-ghpages",
-		"prepare": "husky install"
+		"prepare": "husky"
 	},
 	"release": {
 		"plugins": [
@@ -74,7 +74,7 @@
 		"@pionjs/pion": "^2.0.0",
 		"@polymer/iron-icon": "^3.0.0",
 		"@polymer/iron-icons": "^3.0.0",
-		"compute-scroll-into-view": "^1.0.17",
+		"compute-scroll-into-view": "^3.0.0",
 		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {
@@ -87,7 +87,7 @@
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.0",
 		"@web/dev-server-storybook": "^2.0.0",
-		"husky": "^8.0.0",
+		"husky": "^9.0.0",
 		"semantic-release": "^23.0.0",
 		"sinon": "^17.0.0",
 		"typescript": "^5.0.0"

package/src/cosmoz-tab-card.js

@@ -45,7 +45,7 @@ const CosmozTabCard = (host) => {
 		host.toggleAttribute('collapsed', collapsed);
 	}, [collapsed]);
 
-	return html`<div id="header" part="header">
+	return html`<div class="header" part="header">
 			${when(
 				collapsable,
 				() => html`
@@ -64,8 +64,8 @@ const CosmozTabCard = (host) => {
 			<slot name="card-actions"></slot>
 		</div>
 
-		<cosmoz-collapse ?opened=${!collapsed}>
-			<div id="content" part="content">
+		<cosmoz-collapse class="collapse" ?opened=${!collapsed}>
+			<div class="content" part="content">
 				<slot></slot>
 			</div>
 		</cosmoz-collapse> `;
@@ -88,12 +88,17 @@ const style = css`
 		);
 	}
 
-	#content {
+	.collapse {
+		display: flex:;
+		flex: auto;
+	}
+
+	.content {
 		line-height: var(--cosmoz-tab-card-content-line-height, initial);
 		padding: var(--cosmoz-tab-card-content-padding, initial);
 	}
 
-	#header {
+	.header {
 		display: flex;
 		align-items: center;
 		gap: 8px;

package/src/next/cosmoz-tab.js

@@ -1,7 +1,7 @@
 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';
+import { compute } from 'compute-scroll-into-view';
 
 import style from './cosmoz-tab.css';
 
@@ -22,12 +22,12 @@ const Tab = (host) => {
 		if (!active) {
 			return;
 		}
-		computeScroll(el, {
+		compute(el, {
 			block: 'nearest',
 			inline: 'center',
 			boundary: el.parentElement,
 		}).forEach(({ el, top, left }) =>
-			el.scroll({ top, left, behavior: 'smooth' })
+			el.scroll({ top, left, behavior: 'smooth' }),
 		);
 	}, [active]);
 
@@ -49,5 +49,5 @@ customElements.define(
 	'cosmoz-tab-next',
 	component(Tab, {
 		observedAttributes: ['active', 'badge', 'href'],
-	})
+	}),
 );

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

@@ -31,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> {
@@ -41,5 +41,10 @@ export interface RenderOptions<T extends RenderTab> {
 }
 
 export declare const renderTabs: <T extends Tab>(
-	opts: RenderTabs<T>
+	opts: RenderTabs<T>,
 ) => unknown;
+
+export declare const renderActivated: <T extends Tab, R>(
+	opts: RenderTabs<T>,
+	render: (t: T & { isActive: boolean }) => R,
+) => R[];

package/src/next/use-tabs.js

@@ -61,3 +61,8 @@ export const renderTabs = ({ tabs, active, onActivate }) =>
 			>${tab.content ?? title}</cosmoz-tab-next
 		>`;
 	});
+
+export const renderActivated = ({ tabs, active, activated }, render) =>
+	tabs
+		.filter((t) => activated.includes(t.name))
+		.map((tab) => render({ ...tab, isActive: active.name === tab.name }));

package/src/use-tabs.js

@@ -3,7 +3,7 @@ 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';
 import { choose, collect, getName, isValid } from './utils';
-import computeScroll from 'compute-scroll-into-view';
+import { compute } from 'compute-scroll-into-view';
 
 const useTabSelectedEffect = (host, selectedTab) => {
 		useEffect(() => {
@@ -19,7 +19,7 @@ const useTabSelectedEffect = (host, selectedTab) => {
 			const eventOpts = { composed: true };
 			if (!selectedTab._active) {
 				selectedTab.dispatchEvent(
-					new CustomEvent('tab-first-select', eventOpts)
+					new CustomEvent('tab-first-select', eventOpts),
 				);
 				selectedTab._active = true;
 			}
@@ -39,12 +39,12 @@ const useTabSelectedEffect = (host, selectedTab) => {
 			if (!el) {
 				return;
 			}
-			computeScroll(el, {
+			compute(el, {
 				block: 'nearest',
 				inline: 'center',
 				boundary: el.parentElement,
 			}).forEach(({ el, top, left }) =>
-				el.scroll({ top, left, behavior: 'smooth' })
+				el.scroll({ top, left, behavior: 'smooth' }),
 			);
 		}, [selectedTab]);
 	},
@@ -82,7 +82,7 @@ const useTabSelectedEffect = (host, selectedTab) => {
 
 		const href = useCallback(
 			(tab) => (isValid(tab) ? link(hashParam, getName(tab)) : undefined),
-			[hashParam]
+			[hashParam],
 		);
 
 		return {
@@ -90,7 +90,7 @@ const useTabSelectedEffect = (host, selectedTab) => {
 			selectedTab,
 			onSlot: useCallback(
 				({ target }) => requestAnimationFrame(() => setTabs(collect(target))),
-				[]
+				[],
 			),
 			onSelect: useCallback((e) => {
 				if (e.button !== 0 || e.metaKey || e.ctrlKey) {
@@ -106,7 +106,7 @@ const useTabSelectedEffect = (host, selectedTab) => {
 				e.preventDefault();
 				window.history.pushState({}, '', href(tab));
 				requestAnimationFrame(() =>
-					window.dispatchEvent(new CustomEvent('hashchange'))
+					window.dispatchEvent(new CustomEvent('hashchange')),
 				);
 			}, []),
 			href,