@plitzi/sdk-elements 0.37.2 → 0.37.3

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/TabContainerItem/TabContainerItem.d.ts

@@ -3,12 +3,16 @@ 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;
     displayName: string;

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/index.d.ts

@@ -78,6 +78,9 @@ export declare const defaultElements: {
             } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
         };
         type: "dropdown";
+        attributeValues: {
+            readonly popupPlacement: readonly string[];
+        };
         content: {
             readonly attributes: {
                 readonly popupPlacement: "bottom";
@@ -494,6 +497,7 @@ export declare const defaultElements: {
         defaultValue?: string | number | readonly string[] | undefined;
         onLoad?: import('react').ReactEventHandler<"span"> | undefined;
         onClick?: import('react').MouseEventHandler<"span"> | undefined;
+        onPointerDown?: import('react').PointerEventHandler<"span"> | undefined;
         onMouseEnter?: import('react').MouseEventHandler<"span"> | undefined;
         onMouseLeave?: import('react').MouseEventHandler<"span"> | undefined;
         onFocus?: import('react').FocusEventHandler<"span"> | undefined;
@@ -682,7 +686,6 @@ export declare const defaultElements: {
         onTouchMoveCapture?: import('react').TouchEventHandler<"span"> | undefined;
         onTouchStart?: import('react').TouchEventHandler<"span"> | undefined;
         onTouchStartCapture?: import('react').TouchEventHandler<"span"> | undefined;
-        onPointerDown?: import('react').PointerEventHandler<"span"> | undefined;
         onPointerDownCapture?: import('react').PointerEventHandler<"span"> | undefined;
         onPointerMove?: import('react').PointerEventHandler<"span"> | undefined;
         onPointerMoveCapture?: import('react').PointerEventHandler<"span"> | undefined;
@@ -916,6 +919,9 @@ export declare const defaultElements: {
         displayName: string;
     } & {
         readonly type: "container";
+        readonly attributeValues: {
+            readonly subType: readonly string[];
+        };
         readonly content: {
             readonly attributes: {
                 readonly subType: "div";
@@ -964,13 +970,18 @@ export declare const defaultElements: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | undefined;
+        label?: string | undefined;
+        subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "dl" | "dt" | "dd" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        decorative?: boolean | undefined;
     }>>;
     layoutContainer: {
         (props: import('./Element/hocs/withElement').WithElementProps<import('./elements/internal/LayoutContainer/LayoutContainer').LayoutContainerProps>): import('react').JSX.Element;
         displayName: string;
     } & {
         readonly type: "layoutContainer";
+        readonly attributeValues: {
+            readonly subType: readonly string[];
+        };
         readonly content: {
             readonly attributes: {
                 readonly subType: "div";
@@ -1664,6 +1675,9 @@ export declare const defaultElements: {
         displayName: string;
     } & {
         readonly type: "heading";
+        readonly attributeValues: {
+            readonly subType: readonly string[];
+        };
         readonly content: {
             readonly attributes: {
                 readonly content: "Heading";
@@ -1718,7 +1732,7 @@ export declare const defaultElements: {
                                     readonly 'margin-bottom': "25px";
                                     readonly 'font-size': "38px";
                                     readonly 'font-weight': 700;
-                                    readonly 'line-height': "44px";
+                                    readonly 'line-height': "1.158";
                                 };
                             };
                         };
@@ -1733,7 +1747,7 @@ export declare const defaultElements: {
                                     readonly 'margin-bottom': "25px";
                                     readonly 'font-size': "32px";
                                     readonly 'font-weight': 700;
-                                    readonly 'line-height': "36px";
+                                    readonly 'line-height': "1.125";
                                 };
                             };
                         };
@@ -1748,7 +1762,7 @@ export declare const defaultElements: {
                                     readonly 'margin-bottom': "25px";
                                     readonly 'font-size': "24px";
                                     readonly 'font-weight': 700;
-                                    readonly 'line-height': "30px";
+                                    readonly 'line-height': "1.25";
                                 };
                             };
                         };
@@ -1763,7 +1777,7 @@ export declare const defaultElements: {
                                     readonly 'margin-bottom': "25px";
                                     readonly 'font-size': "18px";
                                     readonly 'font-weight': 700;
-                                    readonly 'line-height': "24px";
+                                    readonly 'line-height': "1.333";
                                 };
                             };
                         };
@@ -1778,7 +1792,7 @@ export declare const defaultElements: {
                                     readonly 'margin-bottom': "25px";
                                     readonly 'font-size': "14px";
                                     readonly 'font-weight': 700;
-                                    readonly 'line-height': "20px";
+                                    readonly 'line-height': "1.429";
                                 };
                             };
                         };
@@ -1793,7 +1807,7 @@ export declare const defaultElements: {
                                     readonly 'margin-bottom': "25px";
                                     readonly 'font-size': "12px";
                                     readonly 'font-weight': 700;
-                                    readonly 'line-height': "18px";
+                                    readonly 'line-height': "1.5";
                                 };
                             };
                         };
@@ -1811,10 +1825,15 @@ export declare const defaultElements: {
         displayName: string;
     } & {
         readonly type: "image";
+        readonly attributeValues: {
+            readonly fetchPriority: readonly string[];
+            readonly loadMode: readonly string[];
+        };
         readonly content: {
             readonly attributes: {
                 readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
                 readonly alt: "";
+                readonly decorative: false;
                 readonly fetchPriority: "auto";
                 readonly loadMode: "auto";
             };
@@ -1867,7 +1886,8 @@ export declare const defaultElements: {
         fetchPriority?: "high" | "low" | "auto" | undefined;
         src?: string | undefined;
         alt?: string | undefined;
-        loadMode?: "eager" | "lazy" | undefined;
+        decorative?: boolean | undefined;
+        loadMode?: "auto" | "eager" | "lazy" | undefined;
     }>>;
     video: {
         (props: import('./Element/hocs/withElement').WithElementProps<import('./elements/media/Video/Video').VideoProps>): import('react').JSX.Element;
@@ -1991,6 +2011,7 @@ export declare const defaultElements: {
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
         size?: string | undefined;
+        label?: string | undefined;
         icon?: string | undefined;
         iconAnimation?: string | undefined;
     }>>;
@@ -1999,6 +2020,10 @@ export declare const defaultElements: {
         displayName: string;
     } & {
         readonly type: "button";
+        readonly attributeValues: {
+            readonly subType: readonly string[];
+            readonly contentPlacement: readonly string[];
+        };
         readonly content: {
             readonly attributes: {
                 readonly contentPlacement: "after";
@@ -2058,7 +2083,7 @@ export declare const defaultElements: {
                                     readonly 'padding-bottom': "6px";
                                     readonly cursor: "pointer";
                                     readonly 'font-size': "16px";
-                                    readonly 'line-height': "24px";
+                                    readonly 'line-height': "1.5";
                                     readonly 'border-top-left-radius': "4px";
                                     readonly 'border-top-right-radius': "4px";
                                     readonly 'border-bottom-left-radius': "4px";
@@ -2079,7 +2104,7 @@ export declare const defaultElements: {
                                     readonly 'padding-bottom': "6px";
                                     readonly cursor: "pointer";
                                     readonly 'font-size': "16px";
-                                    readonly 'line-height': "24px";
+                                    readonly 'line-height': "1.5";
                                     readonly 'border-top-left-radius': "4px";
                                     readonly 'border-top-right-radius': "4px";
                                     readonly 'border-bottom-left-radius': "4px";
@@ -2100,7 +2125,7 @@ export declare const defaultElements: {
                                     readonly 'padding-bottom': "6px";
                                     readonly cursor: "pointer";
                                     readonly 'font-size': "16px";
-                                    readonly 'line-height': "24px";
+                                    readonly 'line-height': "1.5";
                                     readonly 'border-top-left-radius': "4px";
                                     readonly 'border-top-right-radius': "4px";
                                     readonly 'border-bottom-left-radius': "4px";
@@ -2114,6 +2139,7 @@ export declare const defaultElements: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+        label?: string | undefined;
         title?: string | undefined;
         content?: string | undefined;
         disabled?: boolean | undefined;
@@ -2224,7 +2250,7 @@ export declare const defaultElements: {
                     readonly base: {
                         readonly default: {
                             readonly 'font-size': "14px";
-                            readonly 'line-height': "24px";
+                            readonly 'line-height': "1.714";
                             readonly display: "inline";
                         };
                     };
@@ -2240,6 +2266,9 @@ export declare const defaultElements: {
         displayName: string;
     } & {
         readonly type: "themeToggle";
+        readonly attributeValues: {
+            readonly subType: readonly string[];
+        };
         readonly triggers: {
             readonly onThemeChange: {
                 readonly action: "onThemeChange";
@@ -2372,6 +2401,10 @@ export declare const defaultElements: {
             } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
         };
         type: "list";
+        attributeValues: {
+            readonly subType: readonly string[];
+            readonly source: readonly string[];
+        };
         sourceType: "list";
         content: {
             readonly attributes: {
@@ -2461,6 +2494,10 @@ export declare const defaultElements: {
         displayName: string;
     } & {
         readonly type: "link";
+        readonly attributeValues: {
+            readonly mode: readonly string[];
+            readonly target: readonly string[];
+        };
         readonly content: {
             readonly attributes: {
                 readonly href: "#";
@@ -2516,9 +2553,9 @@ export declare const defaultElements: {
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
         mode?: "page" | "internal" | "external" | undefined;
+        href?: string | undefined;
         label?: string | undefined;
         target?: "self" | "blank" | "parent" | "top" | undefined;
-        href?: string | undefined;
     }>>;
     markdown: {
         (props: import('./Element/hocs/withElement').WithElementProps<import('./elements/basic/Markdown/Markdown').MarkdownProps>): import('react').JSX.Element;
@@ -2566,7 +2603,7 @@ export declare const defaultElements: {
                     readonly base: {
                         readonly default: {
                             readonly 'font-size': "14px";
-                            readonly 'line-height': "24px";
+                            readonly 'line-height': "1.714";
                         };
                     };
                 };
@@ -2581,6 +2618,9 @@ export declare const defaultElements: {
         displayName: string;
     } & {
         readonly type: "richText";
+        readonly attributeValues: {
+            readonly format: readonly string[];
+        };
         readonly content: {
             readonly attributes: {
                 readonly content: "";
@@ -2640,6 +2680,10 @@ export declare const defaultElements: {
         displayName: string;
     } & {
         readonly type: "pagination";
+        readonly attributeValues: {
+            readonly mode: readonly string[];
+            readonly target: readonly string[];
+        };
         readonly triggers: {
             readonly onPageChange: {
                 readonly action: "onPageChange";
@@ -2712,6 +2756,7 @@ export declare const defaultElements: {
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
         mode?: "pages" | "loadMore" | undefined;
+        label?: string | undefined;
         target?: "url" | "interaction" | undefined;
         pageParam?: string | undefined;
         pageInfo?: import('./elements/structure/Pagination/Pagination').PaginationPageInfo | undefined;
@@ -2776,6 +2821,9 @@ export declare const defaultElements: {
             settings: {};
         };
         type: "form";
+        attributeValues: {
+            readonly method: readonly string[];
+        };
         sourceType: "apiContainer";
         triggers: {
             readonly onSubmit: {
@@ -2861,9 +2909,11 @@ export declare const defaultElements: {
                 readonly subType: "text";
                 readonly name: "";
                 readonly label: "Label";
+                readonly hideLabel: false;
                 readonly placeholder: "";
                 readonly defaultValue: "";
                 readonly autoComplete: true;
+                readonly autoFocus: false;
                 readonly disabled: false;
                 readonly options: readonly [];
                 readonly required: true;
@@ -3340,6 +3390,9 @@ export declare const defaultElements: {
             settings: {};
         };
         type: "formControl";
+        attributeValues: {
+            readonly subType: readonly string[];
+        };
         triggers: {
             readonly onChange: {
                 readonly action: "onChange";
@@ -3359,6 +3412,12 @@ export declare const defaultElements: {
         displayName: string;
     } & {
         readonly type: "apiContainer";
+        readonly attributeValues: {
+            readonly subType: readonly string[];
+            readonly method: readonly string[];
+            readonly credentials: readonly string[];
+            readonly pagination: readonly string[];
+        };
         readonly sourceType: "apiContainer";
         readonly triggers: {
             readonly onApiError: {
@@ -3392,7 +3451,14 @@ export declare const defaultElements: {
                 readonly title: "Perform Query";
                 readonly type: "callback";
                 readonly preview: {};
-                readonly params: {};
+                readonly params: {
+                    readonly input: {
+                        readonly label: "Input (server providers)";
+                        readonly type: "codemirror-json";
+                        readonly defaultValue: "{}";
+                        readonly description: string;
+                    };
+                };
             };
             readonly loadMore: {
                 readonly action: "loadMore";
@@ -3499,5 +3565,143 @@ export declare const defaultElements: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<import('./elements/provider/ApiContainer/declaration').ApiContainerAttributes>;
+    channel: {
+        (props: import('./Element/hocs/withElement').WithElementProps<import('./elements/provider/Channel/Channel').ChannelProps>): import('react').JSX.Element;
+        displayName: string;
+    } & {
+        readonly type: "channel";
+        readonly attributeValues: {
+            readonly subType: readonly string[];
+        };
+        readonly sourceType: "channel";
+        readonly triggers: {
+            readonly onMessage: {
+                readonly action: "onMessage";
+                readonly title: "On Message";
+                readonly type: "trigger";
+                readonly params: {};
+                readonly preview: {
+                    readonly type: "";
+                    readonly data: "";
+                    readonly from: "";
+                    readonly user: "";
+                    readonly at: "";
+                };
+            };
+            readonly onJoin: {
+                readonly action: "onJoin";
+                readonly title: "On Join";
+                readonly type: "trigger";
+                readonly params: {};
+                readonly preview: {
+                    readonly from: "";
+                    readonly user: "";
+                    readonly state: {};
+                };
+            };
+            readonly onLeave: {
+                readonly action: "onLeave";
+                readonly title: "On Leave";
+                readonly type: "trigger";
+                readonly params: {};
+                readonly preview: {
+                    readonly from: "";
+                    readonly user: "";
+                    readonly state: {};
+                };
+            };
+        };
+        readonly callbacks: {
+            readonly publish: {
+                readonly action: "publish";
+                readonly title: "Publish";
+                readonly type: "callback";
+                readonly preview: {};
+                readonly params: {
+                    readonly type: {
+                        readonly label: "Type";
+                        readonly defaultValue: "";
+                        readonly type: "text";
+                    };
+                    readonly data: {
+                        readonly label: "Data (JSON or a template)";
+                        readonly defaultValue: "";
+                        readonly type: "text";
+                    };
+                };
+            };
+            readonly setPresence: {
+                readonly action: "setPresence";
+                readonly title: "Set Presence";
+                readonly type: "callback";
+                readonly preview: {};
+                readonly params: {
+                    readonly data: {
+                        readonly label: "State (JSON or a template)";
+                        readonly defaultValue: "";
+                        readonly type: "text";
+                    };
+                };
+            };
+        };
+        readonly content: {
+            readonly attributes: {
+                readonly topic: "";
+                readonly grant: "";
+                readonly keep: 20;
+                readonly subType: "";
+            };
+            readonly definition: {
+                readonly label: "Channel";
+                readonly type: "channel";
+                readonly description: string;
+                readonly items: readonly [];
+                readonly bindings: {};
+                readonly styleSelectors: {
+                    readonly base: "";
+                };
+                readonly initialState: {
+                    readonly visibility: true;
+                };
+            };
+            readonly builder: {
+                readonly canDelete: true;
+                readonly canSelect: true;
+                readonly canDragDrop: true;
+                readonly canMove: true;
+                readonly canTemplate: true;
+                readonly itemsAllowed: readonly [];
+                readonly itemsNotAllowed: readonly [];
+            };
+            readonly market: {
+                readonly category: "provider";
+                readonly owner: "Plitzi";
+                readonly verified: true;
+                readonly license: "MIT";
+                readonly website: "https://plitzi.com";
+                readonly backgroundColor: "#4422ee";
+                readonly icon: "fa-solid fa-tower-broadcast";
+            };
+            readonly defaultStyle: {
+                readonly name: "Channel";
+                readonly displayMode: "desktop";
+                readonly style: {
+                    readonly base: {
+                        readonly default: {};
+                    };
+                };
+                readonly subTypes: {};
+            };
+            readonly settings: {};
+        };
+    } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+        subType?: "" | "div" | "section" | "aside" | "main" | undefined;
+        topic?: string | undefined;
+        grant?: string | undefined;
+        presence?: unknown;
+        keep?: number | string | undefined;
+    }>>;
 };
 export { useRscData, elements, elementSettings, JsxManager };
+export { default as useChannel } from './realtime/useChannel';
+export type { ChannelHandle, UseChannelOptions } from './realtime/useChannel';