@plitzi/sdk-elements 0.37.1 → 0.37.3

package/dist/elements/structure/TabContainer/TabContainerHeader/TabContainerHeader.d.ts

@@ -4,9 +4,9 @@ export type TabContainerHeaderProps = {
     className: string;
     children: ReactNode;
 };
-declare const TabContainerHeader: ({ ref, className, children }: TabContainerHeaderProps) => import("react").JSX.Element;
+declare const TabContainerHeader: ({ ref, className, children }: TabContainerHeaderProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../../Element/hocs/withElement').WithElementProps<TabContainerHeaderProps>): import("react").JSX.Element;
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<TabContainerHeaderProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/structure/TabContainer/TabContainerHeader/TabContainerHeader.mjs

@@ -6,31 +6,35 @@ import { jsx as c } from "react/jsx-runtime";
 import l from "clsx";
 //#region src/elements/structure/TabContainer/TabContainerHeader/TabContainerHeader.tsx
 var u = ({ ref: e, className: u = "", children: d }) => {
-	let { tabSelected: f, onSelect: p } = o(n), { childrenParsed: m } = s(() => {
-		let e = { childrenParsed: [] };
-		return r.forEach(d, (t, n) => {
-			if (!a(t)) return;
-			let r = t.props;
-			e.childrenParsed.push(i(t, {
-				...r,
+	let { baseId: f, tabSelected: p, onSelect: m } = o(n), { childrenParsed: h } = s(() => {
+		let e = { childrenParsed: [] }, t = r.toArray(d).filter(a).length;
+		return r.forEach(d, (n, r) => {
+			if (!a(n)) return;
+			let o = n.props;
+			e.childrenParsed.push(i(n, {
+				...o,
 				internalProps: {
-					...r.internalProps,
+					...o.internalProps,
 					isHeader: !0,
-					onSelect: p,
-					tabSelected: f,
-					tabIndex: n
+					baseId: f,
+					onSelect: m,
+					tabSelected: p,
+					tabIndex: r,
+					tabCount: t
 				}
 			}));
 		}), e;
 	}, [
+		f,
 		d,
-		p,
-		f
+		m,
+		p
 	]);
 	return /* @__PURE__ */ c(t, {
 		ref: e,
+		role: "tablist",
 		className: l("plitzi-component__tab-container-header", u),
-		children: m
+		children: h
 	});
 }, d = e(u);
 //#endregion

package/dist/elements/structure/TabContainer/TabContainerHeader/declaration.d.ts

@@ -4,6 +4,7 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type TabContainerHeaderAttributes = AuthorableAttributes<TabContainerHeaderProps>;
 declare const declaration: {
     readonly type: "tabContainerHeader";
+    readonly ancestorType: "tabContainer";
     readonly content: {
         readonly attributes: {};
         readonly definition: {

package/dist/elements/structure/TabContainer/TabContainerHeader/declaration.mjs

@@ -2,6 +2,7 @@ import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/structure/TabContainer/TabContainerHeader/declaration.ts
 var t = e()({
 	type: "tabContainerHeader",
+	ancestorType: "tabContainer",
 	content: {
 		attributes: {},
 		definition: {

package/dist/elements/structure/TabContainer/TabContainerHeader/index.d.ts

@@ -1,8 +1,9 @@
 declare const TabContainerHeader: {
-    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./TabContainerHeader').TabContainerHeaderProps>): import("react").JSX.Element;
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./TabContainerHeader').TabContainerHeaderProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "tabContainerHeader";
+    readonly ancestorType: "tabContainer";
     readonly content: {
         readonly attributes: {};
         readonly definition: {

package/dist/elements/structure/TabContainer/TabContainerItem/Settings.d.ts

@@ -1,2 +1,2 @@
-declare const Settings: () => import("react").JSX.Element;
+declare const Settings: () => import('react').JSX.Element;
 export default Settings;

package/dist/elements/structure/TabContainer/TabContainerItem/TabContainerItem.d.ts

@@ -3,14 +3,18 @@ export type TabContainerItemProps = {
     ref: RefObject<HTMLElement>;
     className: string;
     children: ReactNode;
+    baseId?: string;
     tabSelected?: number;
+    /** The item's position among its siblings — not the HTML attribute, which the tabs set themselves. */
     tabIndex?: number;
+    /** How many tabs the header holds, so the arrow keys can go round them. */
+    tabCount?: number;
     isHeader?: boolean;
     onSelect?: Dispatch<SetStateAction<number>>;
 };
-declare const TabContainerItem: ({ className, children, ref, tabSelected, tabIndex, isHeader, onSelect }: TabContainerItemProps) => import("react").JSX.Element;
+declare const TabContainerItem: ({ className, children, ref, baseId, tabSelected, tabIndex: position, tabCount, isHeader, onSelect }: TabContainerItemProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../../Element/hocs/withElement').WithElementProps<TabContainerItemProps>): import("react").JSX.Element;
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<TabContainerItemProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/structure/TabContainer/TabContainerItem/TabContainerItem.mjs

@@ -4,21 +4,56 @@ import { useCallback as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
 import i from "clsx";
 //#region src/elements/structure/TabContainer/TabContainerItem/TabContainerItem.tsx
-var a = ({ className: e = "", children: a, ref: o, tabSelected: s, tabIndex: c = 0, isHeader: l, onSelect: u }) => {
-	let d = n(() => {
-		l && s !== c && u?.(c);
+var a = (e, t, n) => {
+	switch (e) {
+		case "ArrowRight":
+		case "ArrowDown": return (t + 1) % n;
+		case "ArrowLeft":
+		case "ArrowUp": return (t - 1 + n) % n;
+		case "Home": return 0;
+		case "End": return n - 1;
+		default: return;
+	}
+}, o = ({ className: e = "", children: o, ref: s, baseId: c = "", tabSelected: l, tabIndex: u = 0, tabCount: d = 0, isHeader: f, onSelect: p }) => {
+	let m = l === u, h = `${c}_tab_${u}`, g = `${c}_panel_${u}`, _ = n(() => {
+		f && !m && p?.(u);
+	}, [
+		f,
+		m,
+		u,
+		p
+	]), v = n((e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault(), p?.(u);
+			return;
+		}
+		let t = a(e.key, u, d);
+		t !== void 0 && d !== 0 && (e.preventDefault(), p?.(t), e.currentTarget.ownerDocument.getElementById(`${c}_tab_${t}`)?.focus());
 	}, [
-		l,
-		s,
 		c,
-		u
-	]);
+		u,
+		d,
+		p
+	]), y = f ? {
+		id: h,
+		role: "tab",
+		"aria-selected": m,
+		"aria-controls": g,
+		tabIndex: m ? 0 : -1,
+		onKeyDown: v
+	} : {
+		id: g,
+		role: "tabpanel",
+		"aria-labelledby": h,
+		tabIndex: 0
+	};
 	return /* @__PURE__ */ r(t, {
-		ref: o,
-		onClick: d,
-		className: i("plitzi-component__tab-container-item", e, { active: s === c }),
-		children: a
+		ref: s,
+		onClick: _,
+		className: i("plitzi-component__tab-container-item", e, { active: m }),
+		...c ? y : {},
+		children: o
 	});
-}, o = e(a);
+}, s = e(o);
 //#endregion
-export { a as TabContainerItem, o as default };
+export { o as TabContainerItem, s as default };

package/dist/elements/structure/TabContainer/TabContainerItem/declaration.d.ts

@@ -1,7 +1,7 @@
 import { TabContainerItemProps } from './TabContainerItem';
 import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 /** What this element can be authored with — its component's own props, minus what the runtime supplies. */
-export type TabContainerItemAttributes = AuthorableAttributes<TabContainerItemProps, 'tabSelected' | 'tabIndex' | 'isHeader' | 'onSelect'>;
+export type TabContainerItemAttributes = AuthorableAttributes<TabContainerItemProps, 'baseId' | 'tabSelected' | 'tabIndex' | 'tabCount' | 'isHeader' | 'onSelect'>;
 declare const declaration: {
     readonly type: "tabContainerItem";
     readonly content: {

package/dist/elements/structure/TabContainer/TabContainerItem/index.d.ts

@@ -1,5 +1,5 @@
 declare const TabContainerItem: {
-    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./TabContainerItem').TabContainerItemProps>): import("react").JSX.Element;
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./TabContainerItem').TabContainerItemProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "tabContainerItem";

package/dist/elements/structure/TabContainer/index.d.ts

@@ -1,13 +1,14 @@
 declare const TabContainer: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./TabContainer').TabContainerProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./TabContainer').TabContainerProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     plugins: {
         tabContainerHeader: {
-            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./TabContainerHeader/TabContainerHeader').TabContainerHeaderProps>): import("react").JSX.Element;
+            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./TabContainerHeader/TabContainerHeader').TabContainerHeaderProps>): import('react').JSX.Element;
             displayName: string;
         } & {
             readonly type: "tabContainerHeader";
+            readonly ancestorType: "tabContainer";
             readonly content: {
                 readonly attributes: {};
                 readonly definition: {
@@ -56,10 +57,11 @@ declare const TabContainer: {
             readonly initialItems: readonly ["tabContainerItem", "tabContainerItem", "tabContainerItem"];
         } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
         tabContainerBody: {
-            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./TabContainerBody/TabContainerBody').TabContainerBodyProps>): import("react").JSX.Element;
+            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./TabContainerBody/TabContainerBody').TabContainerBodyProps>): import('react').JSX.Element;
             displayName: string;
         } & {
             readonly type: "tabContainerBody";
+            readonly ancestorType: "tabContainer";
             readonly content: {
                 readonly attributes: {};
                 readonly definition: {
@@ -108,7 +110,7 @@ declare const TabContainer: {
             readonly initialItems: readonly ["tabContainerItem", "tabContainerItem", "tabContainerItem"];
         } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
         tabContainerItem: {
-            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./TabContainerItem/TabContainerItem').TabContainerItemProps>): import("react").JSX.Element;
+            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./TabContainerItem/TabContainerItem').TabContainerItemProps>): import('react').JSX.Element;
             displayName: string;
         } & {
             readonly type: "tabContainerItem";