@plitzi/sdk-elements 0.37.1 → 0.37.3

package/dist/elements/declarations/index.mjs

@@ -23,25 +23,27 @@ import x from "../media/FontAwesome/declaration.mjs";
 import S from "../media/Image/declaration.mjs";
 import C from "../media/Video/declaration.mjs";
 import w from "../provider/ApiContainer/declaration.mjs";
-import T from "../structure/Container/declaration.mjs";
-import E from "../structure/DialogContainer/declaration.mjs";
-import D from "../structure/List/declaration.mjs";
-import O from "../structure/List/ListItem/declaration.mjs";
-import k from "../structure/ModalContainer/declaration.mjs";
-import A from "../structure/Pagination/declaration.mjs";
-import j from "../structure/TabContainer/declaration.mjs";
-import M from "../structure/TabContainer/TabContainerBody/declaration.mjs";
-import N from "../structure/TabContainer/TabContainerHeader/declaration.mjs";
-import P from "../structure/TabContainer/TabContainerItem/declaration.mjs";
+import T from "../provider/Channel/declaration.mjs";
+import E from "../structure/Container/declaration.mjs";
+import D from "../structure/DialogContainer/declaration.mjs";
+import O from "../structure/List/declaration.mjs";
+import k from "../structure/List/ListItem/declaration.mjs";
+import A from "../structure/ModalContainer/declaration.mjs";
+import j from "../structure/Pagination/declaration.mjs";
+import M from "../structure/TabContainer/declaration.mjs";
+import N from "../structure/TabContainer/TabContainerBody/declaration.mjs";
+import P from "../structure/TabContainer/TabContainerHeader/declaration.mjs";
+import F from "../structure/TabContainer/TabContainerItem/declaration.mjs";
 //#region src/elements/declarations/index.ts
-var F = {
+var I = {
 	ApiContainer: w,
 	BlockHtml: e,
 	BlockJsx: t,
 	Button: a,
-	Container: T,
+	Channel: T,
+	Container: E,
 	Custom: n,
-	DialogContainer: E,
+	DialogContainer: D,
 	Dropdown: o,
 	DropdownPopup: s,
 	FontAwesome: x,
@@ -51,25 +53,25 @@ var F = {
 	Image: S,
 	LayoutContainer: _,
 	Link: l,
-	List: D,
-	ListItem: O,
+	List: O,
+	ListItem: k,
 	Loading: v,
 	Markdown: u,
-	ModalContainer: k,
+	ModalContainer: A,
 	NodeHtml: r,
 	NotFound: y,
 	Page: b,
-	Pagination: A,
+	Pagination: j,
 	Paragraph: d,
 	Reference: i,
 	RichText: f,
-	TabContainer: j,
-	TabContainerBody: M,
-	TabContainerHeader: N,
-	TabContainerItem: P,
+	TabContainer: M,
+	TabContainerBody: N,
+	TabContainerHeader: P,
+	TabContainerItem: F,
 	Text: p,
 	ThemeToggle: m,
 	Video: C
 };
 //#endregion
-export { w as ApiContainerDeclaration, e as BlockHtmlDeclaration, t as BlockJsxDeclaration, a as ButtonDeclaration, T as ContainerDeclaration, n as CustomDeclaration, E as DialogContainerDeclaration, o as DropdownDeclaration, s as DropdownPopupDeclaration, x as FontAwesomeDeclaration, g as FormControlDeclaration, h as FormDeclaration, c as HeadingDeclaration, S as ImageDeclaration, _ as LayoutContainerDeclaration, l as LinkDeclaration, D as ListDeclaration, O as ListItemDeclaration, v as LoadingDeclaration, u as MarkdownDeclaration, k as ModalContainerDeclaration, r as NodeHtmlDeclaration, y as NotFoundDeclaration, b as PageDeclaration, A as PaginationDeclaration, d as ParagraphDeclaration, i as ReferenceDeclaration, f as RichTextDeclaration, M as TabContainerBodyDeclaration, j as TabContainerDeclaration, N as TabContainerHeaderDeclaration, P as TabContainerItemDeclaration, p as TextDeclaration, m as ThemeToggleDeclaration, C as VideoDeclaration, F as elementDeclarations };
+export { w as ApiContainerDeclaration, e as BlockHtmlDeclaration, t as BlockJsxDeclaration, a as ButtonDeclaration, T as ChannelDeclaration, E as ContainerDeclaration, n as CustomDeclaration, D as DialogContainerDeclaration, o as DropdownDeclaration, s as DropdownPopupDeclaration, x as FontAwesomeDeclaration, g as FormControlDeclaration, h as FormDeclaration, c as HeadingDeclaration, S as ImageDeclaration, _ as LayoutContainerDeclaration, l as LinkDeclaration, O as ListDeclaration, k as ListItemDeclaration, v as LoadingDeclaration, u as MarkdownDeclaration, A as ModalContainerDeclaration, r as NodeHtmlDeclaration, y as NotFoundDeclaration, b as PageDeclaration, j as PaginationDeclaration, d as ParagraphDeclaration, i as ReferenceDeclaration, f as RichTextDeclaration, N as TabContainerBodyDeclaration, M as TabContainerDeclaration, P as TabContainerHeaderDeclaration, F as TabContainerItemDeclaration, p as TextDeclaration, m as ThemeToggleDeclaration, C as VideoDeclaration, I as elementDeclarations };

package/dist/elements/form/Form/Form.d.ts

@@ -35,9 +35,9 @@ export type FormContextValue = {
     setFieldValue: (name: string, value: FieldValue | null) => void;
     setFieldError: (name: string, error: string) => void;
 };
-declare const Form: ({ ref, className, children, method, actionUrl, managedByInteractions, noValidate, errors, values }: FormProps) => import("react").JSX.Element;
+declare const Form: ({ ref, className, children, method, actionUrl, managedByInteractions, noValidate, errors, values }: FormProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<FormProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<FormProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/form/Form/Form.mjs

@@ -106,17 +106,13 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 		fields: G
 	});
 	let q = s(() => ({ onSubmit: {
-		action: "onSubmit",
-		title: "On Form Submit",
-		type: "trigger",
-		params: {},
+		...r.triggers.onSubmit,
 		preview: {
+			...r.triggers.onSubmit.preview,
 			values: Object.values(O).reduce((e, t) => ({
 				...e,
 				[t.name]: ""
-			}), {}),
-			actionUrl: "",
-			method: ""
+			}), {})
 		}
 	} }), [O]), J = a((e) => {
 		let t = [...A.current].reduce((e, [t, n]) => {
@@ -165,59 +161,43 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 	}, [U]), Z = a((e) => {
 		let { name: t, error: n } = e;
 		W(t, n);
-	}, [W]), Q = s(() => ({
-		performReset: {
-			action: "performReset",
-			title: `Reset ${N}`,
-			type: "callback",
-			callback: Y,
-			params: {}
-		},
-		setFieldValue: {
-			action: "setFieldValue",
-			title: `Set Field Value ${N}`,
-			type: "callback",
-			callback: X,
-			preview: {},
-			params: {
-				name: {
-					label: "Field Name",
-					defaultValue: void 0,
-					type: "select",
-					options: Object.values(O).map((e) => ({
-						value: e.name,
-						label: e.name
-					}))
-				},
-				value: {
-					type: "text",
-					defaultValue: ""
+	}, [W]), Q = s(() => {
+		let { performReset: e, setFieldValue: t, setFieldError: n } = r.callbacks, i = Object.values(O).map((e) => ({
+			value: e.name,
+			label: e.name
+		}));
+		return {
+			performReset: {
+				...e,
+				title: `Reset ${N}`,
+				callback: Y
+			},
+			setFieldValue: {
+				...t,
+				title: `Set Field Value ${N}`,
+				callback: X,
+				params: {
+					...t.params,
+					name: {
+						...t.params.name,
+						options: i
+					}
 				}
-			}
-		},
-		setFieldError: {
-			action: "setFieldError",
-			title: `Set Field Error ${N}`,
-			type: "callback",
-			callback: Z,
-			preview: {},
-			params: {
-				name: {
-					label: "Field Name",
-					defaultValue: void 0,
-					type: "select",
-					options: Object.values(O).map((e) => ({
-						value: e.name,
-						label: e.name
-					}))
-				},
-				error: {
-					type: "text",
-					defaultValue: ""
+			},
+			setFieldError: {
+				...n,
+				title: `Set Field Error ${N}`,
+				callback: Z,
+				params: {
+					...n.params,
+					name: {
+						...n.params.name,
+						options: i
+					}
 				}
 			}
-		}
-	}), [
+		};
+	}, [
 		N,
 		Y,
 		X,

package/dist/elements/form/Form/Settings.d.ts

@@ -5,5 +5,5 @@ type SettingsProps = {
     actionUrl?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ method, managedByInteractions, noValidate, actionUrl, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ method, managedByInteractions, noValidate, actionUrl, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

package/dist/elements/form/Form/declaration.d.ts

@@ -4,7 +4,67 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type FormAttributes = AuthorableAttributes<FormProps>;
 declare const declaration: {
     readonly type: "form";
+    readonly attributeValues: {
+        readonly method: readonly string[];
+    };
     readonly sourceType: "apiContainer";
+    readonly triggers: {
+        readonly onSubmit: {
+            readonly action: "onSubmit";
+            readonly title: "On Form Submit";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly values: {};
+                readonly actionUrl: "";
+                readonly method: "";
+            };
+        };
+    };
+    readonly callbacks: {
+        readonly performReset: {
+            readonly action: "performReset";
+            readonly title: "Reset Form";
+            readonly type: "callback";
+            readonly params: {};
+        };
+        readonly setFieldValue: {
+            readonly action: "setFieldValue";
+            readonly title: "Set Field Value";
+            readonly type: "callback";
+            readonly preview: {};
+            readonly params: {
+                readonly name: {
+                    readonly label: "Field Name";
+                    readonly defaultValue: undefined;
+                    readonly type: "select";
+                    readonly options: [];
+                };
+                readonly value: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+        };
+        readonly setFieldError: {
+            readonly action: "setFieldError";
+            readonly title: "Set Field Error";
+            readonly type: "callback";
+            readonly preview: {};
+            readonly params: {
+                readonly name: {
+                    readonly label: "Field Name";
+                    readonly defaultValue: undefined;
+                    readonly type: "select";
+                    readonly options: [];
+                };
+                readonly error: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+        };
+    };
     readonly content: {
         readonly attributes: {
             readonly method: "get";

package/dist/elements/form/Form/declaration.mjs

@@ -1,8 +1,64 @@
-import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+import { elementDeclaration as e, valuesOf as t } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/form/Form/declaration.ts
-var t = e()({
+var n = e()({
 	type: "form",
+	attributeValues: { method: t()(["get", "post"]) },
 	sourceType: "apiContainer",
+	triggers: { onSubmit: {
+		action: "onSubmit",
+		title: "On Form Submit",
+		type: "trigger",
+		params: {},
+		preview: {
+			values: {},
+			actionUrl: "",
+			method: ""
+		}
+	} },
+	callbacks: {
+		performReset: {
+			action: "performReset",
+			title: "Reset Form",
+			type: "callback",
+			params: {}
+		},
+		setFieldValue: {
+			action: "setFieldValue",
+			title: "Set Field Value",
+			type: "callback",
+			preview: {},
+			params: {
+				name: {
+					label: "Field Name",
+					defaultValue: void 0,
+					type: "select",
+					options: []
+				},
+				value: {
+					type: "text",
+					defaultValue: ""
+				}
+			}
+		},
+		setFieldError: {
+			action: "setFieldError",
+			title: "Set Field Error",
+			type: "callback",
+			preview: {},
+			params: {
+				name: {
+					label: "Field Name",
+					defaultValue: void 0,
+					type: "select",
+					options: []
+				},
+				error: {
+					type: "text",
+					defaultValue: ""
+				}
+			}
+		}
+	},
 	content: {
 		attributes: {
 			method: "get",
@@ -47,4 +103,4 @@ var t = e()({
 	}
 });
 //#endregion
-export { t as default };
+export { n as default };

package/dist/elements/form/Form/index.d.ts

@@ -1,10 +1,10 @@
 declare const Form: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Form').FormProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Form').FormProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     content: {
         market: {
-            icon: import("react").JSX.Element;
+            icon: import('react').JSX.Element;
             category: "form";
             owner: "Plitzi";
             verified: true;
@@ -54,7 +54,67 @@ declare const Form: {
         settings: {};
     };
     type: "form";
+    attributeValues: {
+        readonly method: readonly string[];
+    };
     sourceType: "apiContainer";
+    triggers: {
+        readonly onSubmit: {
+            readonly action: "onSubmit";
+            readonly title: "On Form Submit";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly values: {};
+                readonly actionUrl: "";
+                readonly method: "";
+            };
+        };
+    };
+    callbacks: {
+        readonly performReset: {
+            readonly action: "performReset";
+            readonly title: "Reset Form";
+            readonly type: "callback";
+            readonly params: {};
+        };
+        readonly setFieldValue: {
+            readonly action: "setFieldValue";
+            readonly title: "Set Field Value";
+            readonly type: "callback";
+            readonly preview: {};
+            readonly params: {
+                readonly name: {
+                    readonly label: "Field Name";
+                    readonly defaultValue: undefined;
+                    readonly type: "select";
+                    readonly options: [];
+                };
+                readonly value: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+        };
+        readonly setFieldError: {
+            readonly action: "setFieldError";
+            readonly title: "Set Field Error";
+            readonly type: "callback";
+            readonly preview: {};
+            readonly params: {
+                readonly name: {
+                    readonly label: "Field Name";
+                    readonly defaultValue: undefined;
+                    readonly type: "select";
+                    readonly options: [];
+                };
+                readonly error: {
+                    readonly type: "text";
+                    readonly defaultValue: "";
+                };
+            };
+        };
+    };
     __attributes: Partial<{
         values: Record<string, unknown>;
         method: "get" | "post";

package/dist/elements/form/FormControl/FormControl.d.ts

@@ -2,11 +2,24 @@ import { ChangeEvent, RefObject } from 'react';
 export type FormControlProps = {
     ref: RefObject<HTMLElement>;
     className: string;
-    subType: 'text' | 'number' | 'email' | 'password' | 'date' | 'time' | 'checkbox' | 'switch' | 'select' | 'textarea' | 'hidden';
+    subType: 'text' | 'number' | 'email' | 'password' | 'date' | 'time' | 'checkbox' | 'switch' | 'select' | 'textarea' | 'hidden'
+    /** The browser's own colour picker: its value is `#rrggbb`. */
+     | 'color';
     name: string;
     label: string;
+    /**
+     * Keeps `label` out of sight while it still names the field — for a field whose design already says what it is for:
+     * a search box with a magnifier, a colour swatch. Without a label a screen reader or a browser agent finds an unnamed
+     * box; a placeholder names only a text field, and only until something is typed.
+     */
+    hideLabel: boolean;
     placeholder: string;
     autoComplete: boolean;
+    /**
+     * Takes the focus as it appears — a search box opened by a shortcut is typed into at once. With the control's
+     * container shown only while wanted (`loadStrategy: 'visible'`), it appears each time it is opened.
+     */
+    autoFocus: boolean;
     disabled: boolean;
     options: {
         label: string;
@@ -36,18 +49,17 @@ export type FormControlProps = {
     value: string;
     error: string;
     /**
-     * Supplied by `withFieldValue` — and only when there is a form to supply it.
+     * Supplied by `withFieldValue`, with or without a form around the control.
      *
-     * A control outside a form is a state that HOC handles explicitly (it renders the component with none of its
-     * additions), so these are optional in fact and were only ever required in the type. A select that filters a
-     * screen is exactly such a control: nothing to submit, and the change itself is the event.
+     * Inside a form the value is the form's; outside one it is the control's own, so a select that filters a screen
+     * works on its own — nothing to submit, and its `onChange` is the whole event. Validation only runs inside a form.
      */
     handleChange?: (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement> | ChangeEvent<HTMLTextAreaElement>) => void;
     handleValidate?: () => void;
 };
-declare const FormControl: ({ ref, className, subType, name, label, placeholder, autoComplete, disabled, options, required, maxLength, readOnly, value, error, handleChange, handleValidate }: FormControlProps) => import("react").JSX.Element | null;
+declare const FormControl: ({ ref, className, subType, name, label, hideLabel, placeholder, autoComplete, autoFocus, disabled, options, required, maxLength, readOnly, value, error, handleChange, handleValidate }: FormControlProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./hocs/withFieldValue').WithFieldValueProps<FormControlProps>>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./hocs/withFieldValue').WithFieldValueProps<FormControlProps>>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;