@plitzi/sdk-elements 0.35.1 → 0.35.3

package/CHANGELOG.md

@@ -1,5 +1,72 @@
 # @plitzi/sdk-elements
 
+## 0.35.3
+
+### Patch Changes
+
+- 0211dc4: A form speaks the site's language when it refuses a value.
+
+  - **Every rule of a `formControl` can say what it wants to say.** `requiredMessage`, `minLengthMessage`,
+    `maxLengthMessage` and `formatMessage` join `patternMessage` and `matchesMessage`; left empty, each falls back to
+    the English sentence it said before. `formatMessage` is said when the value does not have the shape the control's
+    type asks for — an address, for an `email` — one attribute for every type that has a shape. Offered in the builder under the rule they belong to.
+  - **A `form` can turn the browser's own checks off (`noValidate`, "Skip Browser Validation" in the builder).** Left on
+    — the default, as before — the browser answers first for a blank required field and a malformed address, in a
+    bubble no style reaches and in the browser's language, while every other rule answers under the control. Turned
+    on, the form's rules are the only ones, and all of them answer under the control.
+  - **An `email` control checks the address itself,** by the same definition the browser uses, so the format is still
+    asked for when the browser's checks are off.
+
+- Updated dependencies [0211dc4]
+  - @plitzi/sdk-auth@0.35.3
+  - @plitzi/sdk-dev-tools@0.35.3
+  - @plitzi/sdk-event-bridge@0.35.3
+  - @plitzi/sdk-interactions@0.35.3
+  - @plitzi/sdk-navigation@0.35.3
+  - @plitzi/sdk-schema@0.35.3
+  - @plitzi/sdk-shared@0.35.3
+
+## 0.35.2
+
+### Minor Changes
+
+- 470aaf8: A booking form can ask for a date, and a toggle can say it is one.
+
+  - **`formControl` accepts `subType: 'date'`.** It renders the browser's own date picker and submits `YYYY-MM-DD`, so
+    a flow or a server action reads one format whatever the visitor's locale. Until now a date was a free text field
+    and every form that needed one parsed whatever somebody typed. Offered in the builder's Input Type list.
+  - **`button` accepts `ariaExpanded` and `ariaPressed`.** A button that opens a menu or an answer, or one that stays on
+    like a filter, can tell assistive technology so — statically, or bound to the state it flips
+    (`bind: { ariaExpanded: 'state.menuOpen' }`). Left out, neither attribute is rendered: an ordinary button does not
+    claim to control anything.
+
+- 470aaf8: The theme is a data source, and a binding reads every source its template names.
+
+  - **`theme` global source.** `GlobalSources` publishes `runtime.sources.theme` as `{ mode, resolved }` for the area
+    the space paints in. `resolved` is always `light` or `dark`, so `{{ theme.resolved }}` is what a URL or a `when`
+    rule wants — a dashboard asking the API for a thumbnail in the visitor's scheme, for one. The comments that promised
+    `{{ theme.resolved }}` through the app store's `theme` mirror were wrong: nothing a binding reads lives there.
+  - **A binding subscribes to the roots of its `twigTemplate`.** It used to get only the head of its `source`, so a
+    binding on `list_spaces.item.id` whose template also said `{{ theme.resolved }}` or `{{ state.scope }}` resolved the
+    second name to nothing, silently. The names are read off the parsed template (`templateRootNames`, exported from
+    `@plitzi/sdk-shared/helpers/twigWrapper`). A name that is not a source is left out of the map rather than set to
+    `undefined`, so `{{ source }}` and the variables lifted to the template's root are never shadowed.
+  - **Authoring.** `theme` joins `GLOBAL_SOURCES`: `bind: { src: 'theme.resolved' }` is accepted, and an element can no
+    longer be named `theme`.
+
+### Patch Changes
+
+- v0.35.2
+- Updated dependencies
+- Updated dependencies [470aaf8]
+  - @plitzi/sdk-auth@0.35.2
+  - @plitzi/sdk-dev-tools@0.35.2
+  - @plitzi/sdk-event-bridge@0.35.2
+  - @plitzi/sdk-interactions@0.35.2
+  - @plitzi/sdk-navigation@0.35.2
+  - @plitzi/sdk-schema@0.35.2
+  - @plitzi/sdk-shared@0.35.2
+
 ## 0.35.1
 
 ### Patch Changes

package/dist/Element/hooks/useElementDataSource.mjs

@@ -1,23 +1,27 @@
 import { useMemo as e } from "react";
 import { useCommonStore as t } from "@plitzi/sdk-shared/store";
+import { templateRootNames as n } from "@plitzi/sdk-shared/helpers/twigWrapper";
 //#region src/Element/hooks/useElementDataSource.ts
-var n = ({ bindings: n, sources: r }) => {
-	let i = e(() => {
-		let e = new Set(r ?? []);
-		for (let t of Object.values(n ?? {})) if (Array.isArray(t)) {
-			for (let { source: n } of t) if (n) {
-				let t = n.indexOf(".");
-				e.add(t > -1 ? n.substring(0, t) : n);
-			}
-		}
+var r = ({ source: e, transformers: t }) => {
+	let r = [];
+	if (e) {
+		let t = e.indexOf(".");
+		r.push(t > -1 ? e.substring(0, t) : e);
+	}
+	for (let { action: e, params: i } of t ?? []) e === "twigTemplate" && i.template && r.push(...n(i.template));
+	return r;
+}, i = ({ bindings: n, sources: i }) => {
+	let a = e(() => {
+		let e = new Set(i ?? []);
+		for (let t of Object.values(n ?? {})) if (Array.isArray(t)) for (let n of t) for (let t of r(n)) e.add(t);
 		return e.size > 0 && !e.has("variables") && e.add("variables"), [...e];
-	}, [n, r]), a = e(() => i.map((e) => `runtime.sources.${e}`), [i]), [o] = t(a);
+	}, [n, i]), o = e(() => a.map((e) => `runtime.sources.${e}`), [a]), [s] = t(o);
 	return e(() => {
 		let e = {};
-		return i.forEach((t, n) => {
-			e[t] = o[n];
+		return a.forEach((t, n) => {
+			s[n] !== void 0 && (e[t] = s[n]);
 		}), e;
-	}, [i, o]);
+	}, [a, s]);
 };
 //#endregion
-export { n as default };
+export { i as default };

package/dist/dataSource/GlobalSources.mjs

@@ -2,67 +2,68 @@ import { use as e, useCallback as t, useMemo as n } from "react";
 import { useCommonStore as r, useCommonStoreSync as i, useRenderSettings as a } from "@plitzi/sdk-shared/store";
 import { get as o } from "@plitzi/plitzi-ui/helpers";
 import { getPathsFromObeject as s } from "@plitzi/sdk-shared/helpers/utils";
-import c from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
-import l from "@plitzi/sdk-auth/AuthContext";
-import { resolveVariables as u } from "@plitzi/sdk-shared/dataSource";
+import c, { SPACE_THEME_AREA as l } from "@plitzi/sdk-shared/theme/useTheme";
+import u from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import d from "@plitzi/sdk-auth/AuthContext";
+import { resolveVariables as f } from "@plitzi/sdk-shared/dataSource";
 //#region src/dataSource/GlobalSources.tsx
-var d = ({ children: d }) => {
-	let { environment: f } = a(), [[p, m, h, g, _, v]] = r([
+var p = ({ children: p }) => {
+	let { environment: m } = a(), [[h, g, _, v, y, b]] = r([
 		"schema.variables",
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.hostname",
 		"navigation.origin",
 		"navigation.currentPageId"
-	]), y = n(() => u(p, {
-		routeParams: m,
-		queryParams: h,
-		hostname: g,
-		environment: f
+	]), x = n(() => f(h, {
+		routeParams: g,
+		queryParams: _,
+		hostname: v,
+		environment: m
 	}), [
-		f,
-		g,
-		h,
 		m,
-		p
-	]), b = t(() => s(y).map((e) => ({
+		v,
+		_,
+		g,
+		h
+	]), S = t(() => s(x).map((e) => ({
 		path: e,
 		name: `variables.${e}`
-	})), [y]);
-	c({
+	})), [x]);
+	u({
 		id: "global",
 		source: "variables",
 		name: "Variables",
-		fields: b
-	}), i("runtime.sources.variables", y);
-	let [x = {}] = r("pageDefinitions"), S = n(() => Object.values(x).map((e) => ({
+		fields: S
+	}), i("runtime.sources.variables", x);
+	let [C = {}] = r("pageDefinitions"), w = n(() => Object.values(C).map((e) => ({
 		value: e.id,
 		label: o(e, "attributes.name", e.id)
-	})), [x]), C = n(() => ({
-		routeParams: m,
-		queryParams: h,
-		origin: _,
-		currentPageId: v
+	})), [C]), T = n(() => ({
+		routeParams: g,
+		queryParams: _,
+		origin: y,
+		currentPageId: b
 	}), [
-		m,
-		h,
+		g,
 		_,
-		v
-	]), w = t(() => {
+		y,
+		b
+	]), E = t(() => {
 		let e = s({
-			routeParams: m,
-			queryParams: h
+			routeParams: g,
+			queryParams: _
 		}).map((e) => ({
 			path: e,
 			name: `navigation.${e}`
 		})), t = {
 			path: "origin",
 			name: "Origin"
-		}, n = S.length > 0 ? {
+		}, n = w.length > 0 ? {
 			path: "currentPageId",
 			name: "Current Page",
 			inputType: "select",
-			values: S
+			values: w
 		} : {
 			path: "currentPageId",
 			name: "Current Page"
@@ -73,61 +74,74 @@ var d = ({ children: d }) => {
 			n
 		];
 	}, [
-		m,
-		h,
-		S
+		g,
+		_,
+		w
 	]);
-	c({
+	u({
 		id: "global",
 		source: "navigation",
 		name: "Navigation",
-		fields: w
-	}), i("runtime.sources.navigation", C);
-	let { user: T, authenticated: E } = e(l), [D = "basic"] = r("schema.settings.userProvider"), O = n(() => D === "" ? {} : {
-		isAuthenticated: E,
-		accessToken: T?.accessToken ?? "",
+		fields: E
+	}), i("runtime.sources.navigation", T);
+	let { user: D, authenticated: O } = e(d), [k = "basic"] = r("schema.settings.userProvider"), A = n(() => k === "" ? {} : {
+		isAuthenticated: O,
+		accessToken: D?.accessToken ?? "",
 		details: {
 			username: "",
 			email: "",
 			roles: "",
 			permissions: "",
 			verified: "",
-			...T?.details ?? {}
+			...D?.details ?? {}
 		}
 	}, [
+		k,
 		D,
-		T,
-		E
-	]), k = t(() => s(O).map((e) => ({
+		O
+	]), j = t(() => s(A).map((e) => ({
 		path: e,
 		name: `user.${e}`
-	})), [O]);
-	c({
+	})), [A]);
+	u({
 		id: "global",
 		source: "auth",
 		name: "Auth State",
-		fields: k
-	}), i("runtime.sources.auth", O);
-	let [A] = r("runtime.state"), j = t(() => s(A).map((e) => ({
+		fields: j
+	}), i("runtime.sources.auth", A);
+	let [M] = r("runtime.state"), N = t(() => s(M).map((e) => ({
 		path: e,
 		name: `state.${e}`
-	})), [A]);
-	c({
+	})), [M]);
+	u({
 		id: "global",
 		source: "state",
 		name: "State",
-		fields: j
-	}), i("runtime.sources.state", A);
-	let [M] = r("runtime.host"), N = t(() => s(M).map((e) => ({
+		fields: N
+	}), i("runtime.sources.state", M);
+	let [P] = r("runtime.host"), F = t(() => s(P).map((e) => ({
 		path: e,
 		name: `host.${e}`
-	})), [M]);
-	return c({
+	})), [P]);
+	u({
 		id: "global",
 		source: "host",
 		name: "Host",
-		fields: N
-	}), i("runtime.sources.host", M), d;
+		fields: F
+	}), i("runtime.sources.host", P);
+	let { theme: I, resolvedTheme: L } = c(l), R = n(() => ({
+		mode: I,
+		resolved: L
+	}), [I, L]), z = t(() => s(R).map((e) => ({
+		path: e,
+		name: `theme.${e}`
+	})), [R]);
+	return u({
+		id: "global",
+		source: "theme",
+		name: "Theme",
+		fields: z
+	}), i("runtime.sources.theme", R), p;
 };
 //#endregion
-export { d as default };
+export { p as default };

package/dist/elements/basic/Button/Button.d.ts

@@ -7,8 +7,17 @@ export type ButtonProps = {
     content?: string;
     subType?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
+    /**
+     * For a button that shows and hides something — a menu, an answer, a panel: `true` while that is open.
+     *
+     * Left out, the button claims to control nothing, which is not the same as `false` ("it controls something, and it
+     * is closed"). A screen reader announces the difference, so an ordinary button must not get a default here.
+     */
+    ariaExpanded?: boolean;
+    /** For a button that stays on or off — a filter, a mode: `true` while it is on. Left out, it is a plain button. */
+    ariaPressed?: boolean;
 };
-declare const Button: ({ ref, className, children, contentPlacement, content, subType, disabled }: ButtonProps) => import("react").JSX.Element;
+declare const Button: ({ ref, className, children, contentPlacement, content, subType, disabled, ariaExpanded, ariaPressed }: ButtonProps) => import("react").JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ButtonProps>): import("react").JSX.Element;
     displayName: string;

package/dist/elements/basic/Button/Button.mjs

@@ -6,15 +6,17 @@ import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { jsxs as a } from "react/jsx-runtime";
 import o from "clsx";
 //#region src/elements/basic/Button/Button.tsx
-var s = ({ ref: e, className: s = "", children: c, contentPlacement: l = "after", content: u = "Button", subType: d = "button", disabled: f = !1 }) => {
-	let { definition: { label: p } } = t(), { settings: { previewMode: m } } = i(), h = r(() => typeof u == "string" ? u : p, [u, p]);
+var s = ({ ref: e, className: s = "", children: c, contentPlacement: l = "after", content: u = "Button", subType: d = "button", disabled: f = !1, ariaExpanded: p, ariaPressed: m }) => {
+	let { definition: { label: h } } = t(), { settings: { previewMode: g } } = i(), _ = r(() => typeof u == "string" ? u : h, [u, h]);
 	return /* @__PURE__ */ a(n, {
 		ref: e,
 		tag: "button",
-		type: m ? d : "button",
-		className: o("plitzi-component__button", s, { "container--empty--skip": !m && !c && u }),
+		type: g ? d : "button",
+		className: o("plitzi-component__button", s, { "container--empty--skip": !g && !c && u }),
 		disabled: f,
-		"aria-label": h,
+		"aria-label": _,
+		"aria-expanded": p,
+		"aria-pressed": m,
 		children: [
 			l === "before" && u,
 			c,

package/dist/elements/basic/Button/declaration.d.ts

@@ -123,5 +123,7 @@ declare const declaration: {
     disabled?: boolean | undefined;
     subType?: "button" | "submit" | "reset" | undefined;
     contentPlacement?: "before" | "after" | undefined;
+    ariaExpanded?: boolean | undefined;
+    ariaPressed?: boolean | undefined;
 }>>;
 export default declaration;

package/dist/elements/basic/Button/index.d.ts

@@ -122,5 +122,7 @@ declare const Button: {
     disabled?: boolean | undefined;
     subType?: "button" | "submit" | "reset" | undefined;
     contentPlacement?: "before" | "after" | undefined;
+    ariaExpanded?: boolean | undefined;
+    ariaPressed?: boolean | undefined;
 }>>;
 export default Button;

package/dist/elements/declarations/index.d.ts

@@ -320,6 +320,8 @@ export declare const elementDeclarations: {
         disabled?: boolean | undefined;
         subType?: "button" | "submit" | "reset" | undefined;
         contentPlacement?: "before" | "after" | undefined;
+        ariaExpanded?: boolean | undefined;
+        ariaPressed?: boolean | undefined;
     }>>;
     readonly Container: {
         readonly type: "container";
@@ -789,6 +791,7 @@ export declare const elementDeclarations: {
                 readonly method: "get";
                 readonly actionUrl: "";
                 readonly managedByInteractions: false;
+                readonly noValidate: false;
                 readonly errors: {};
                 readonly values: {};
             };
@@ -836,6 +839,7 @@ export declare const elementDeclarations: {
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
         values: Record<string, unknown>;
         method: "get" | "post";
+        noValidate: boolean;
         actionUrl: string;
         managedByInteractions: boolean;
         errors: Record<string, string>;
@@ -853,8 +857,12 @@ export declare const elementDeclarations: {
                 readonly disabled: false;
                 readonly options: readonly [];
                 readonly required: true;
+                readonly requiredMessage: "";
                 readonly minLength: 0;
+                readonly minLengthMessage: "";
                 readonly maxLength: 0;
+                readonly maxLengthMessage: "";
+                readonly formatMessage: "";
                 readonly pattern: "";
                 readonly patternMessage: "";
                 readonly matches: "";

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

@@ -7,6 +7,14 @@ export type FormProps = {
     method: 'get' | 'post';
     actionUrl: string;
     managedByInteractions: boolean;
+    /**
+     * Turns the browser's own checks off, leaving the controls' rules as the whole of the validation.
+     *
+     * Left on, the browser answers first for the two rules it knows (a blank required field, a malformed address) in a
+     * bubble no style reaches and in the BROWSER's language, while every other rule answers under the control. On, every
+     * rule answers under the control in the words its `…Message` gives — `validateField` asks for both of those itself.
+     */
+    noValidate: boolean;
     errors: Record<string, string>;
     values: Record<string, unknown>;
 };
@@ -27,7 +35,7 @@ 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, 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;
     displayName: string;