@plitzi/sdk-elements 0.38.8 → 0.38.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/CHANGELOG.md +157 -0
  2. package/dist/Component/ComponentHelper.mjs +22 -13
  3. package/dist/Element/hooks/useElementInternal.mjs +67 -59
  4. package/dist/elements/advanced/BlockHtml/index.mjs +3 -3
  5. package/dist/elements/advanced/BlockJsx/index.mjs +3 -3
  6. package/dist/elements/advanced/Custom/index.mjs +3 -3
  7. package/dist/elements/basic/Button/index.mjs +3 -3
  8. package/dist/elements/basic/Text/Settings.d.ts +2 -1
  9. package/dist/elements/basic/Text/Settings.mjs +16 -10
  10. package/dist/elements/basic/Text/Text.d.ts +3 -1
  11. package/dist/elements/basic/Text/Text.mjs +6 -5
  12. package/dist/elements/basic/Text/declaration.d.ts +1 -0
  13. package/dist/elements/basic/Text/index.d.ts +1 -0
  14. package/dist/elements/basic/ThemeToggle/ThemeToggle.mjs +13 -13
  15. package/dist/elements/declarations/index.d.ts +26 -17
  16. package/dist/elements/declarations/index.mjs +6 -6
  17. package/dist/elements/form/Form/Form.mjs +19 -19
  18. package/dist/elements/form/FormControl/FormControl.d.ts +1 -0
  19. package/dist/elements/form/FormControl/FormControl.mjs +10 -10
  20. package/dist/elements/form/FormControl/Settings.mjs +1 -1
  21. package/dist/elements/form/FormControl/declaration.d.ts +1 -1
  22. package/dist/elements/form/FormControl/declaration.mjs +3 -3
  23. package/dist/elements/form/FormControl/index.d.ts +1 -1
  24. package/dist/elements/internal/NotFound/index.mjs +3 -3
  25. package/dist/elements/internal/Page/Page.d.ts +5 -0
  26. package/dist/elements/internal/Page/Page.mjs +26 -25
  27. package/dist/elements/internal/Page/PageHead.d.ts +12 -0
  28. package/dist/elements/internal/Page/PageHead.mjs +29 -0
  29. package/dist/elements/internal/Page/declaration.d.ts +2 -0
  30. package/dist/elements/internal/Page/declaration.mjs +5 -0
  31. package/dist/elements/internal/Page/index.d.ts +2 -0
  32. package/dist/elements/provider/ApiContainer/ApiContainer.d.ts +7 -0
  33. package/dist/elements/provider/ApiContainer/ApiContainer.mjs +187 -187
  34. package/dist/elements/provider/ApiContainer/declaration.d.ts +11 -9
  35. package/dist/elements/provider/ApiContainer/declaration.mjs +2 -1
  36. package/dist/elements/provider/ApiContainer/index.d.ts +11 -9
  37. package/dist/elements/provider/Channel/Channel.mjs +15 -15
  38. package/dist/elements/provider/Channel/declaration.d.ts +1 -1
  39. package/dist/elements/provider/Channel/index.d.ts +1 -1
  40. package/dist/elements/structure/Carousel/Carousel.mjs +72 -72
  41. package/dist/elements/structure/Carousel/CarouselTrack/index.mjs +3 -3
  42. package/dist/elements/structure/Carousel/declaration.d.ts +1 -1
  43. package/dist/elements/structure/Carousel/index.d.ts +1 -1
  44. package/dist/elements/structure/Container/Container.mjs +8 -8
  45. package/dist/elements/structure/DialogContainer/DialogContainer.mjs +14 -14
  46. package/dist/elements/structure/DialogContainer/declaration.d.ts +1 -2
  47. package/dist/elements/structure/DialogContainer/declaration.mjs +1 -2
  48. package/dist/elements/structure/DialogContainer/index.d.ts +1 -2
  49. package/dist/elements/structure/List/List.d.ts +3 -1
  50. package/dist/elements/structure/List/List.mjs +3 -1
  51. package/dist/elements/structure/List/Settings.d.ts +2 -1
  52. package/dist/elements/structure/List/Settings.mjs +12 -5
  53. package/dist/elements/structure/List/declaration.d.ts +1 -0
  54. package/dist/elements/structure/List/index.d.ts +1 -0
  55. package/dist/elements/structure/List/modes/ListBasic.d.ts +3 -1
  56. package/dist/elements/structure/List/modes/ListBasic.mjs +2 -1
  57. package/dist/elements/structure/List/modes/ListControlled/ListControlled.d.ts +3 -1
  58. package/dist/elements/structure/List/modes/ListControlled/ListControlled.mjs +24 -23
  59. package/dist/elements/structure/ModalContainer/ModalContainer.mjs +16 -16
  60. package/dist/elements/structure/ModalContainer/declaration.d.ts +2 -3
  61. package/dist/elements/structure/ModalContainer/declaration.mjs +2 -3
  62. package/dist/elements/structure/ModalContainer/index.d.ts +2 -3
  63. package/dist/elements/structure/Pagination/Pagination.mjs +10 -10
  64. package/dist/index.d.ts +21 -17
  65. package/package.json +11 -7
@@ -48,6 +48,7 @@ export declare const elementDeclarations: {
48
48
  readonly pagination: readonly string[];
49
49
  };
50
50
  readonly sourceType: "apiContainer";
51
+ readonly serverTemplates: readonly ["notFound"];
51
52
  readonly triggers: {
52
53
  readonly onApiError: {
53
54
  readonly action: "onApiError";
@@ -209,26 +210,27 @@ export declare const elementDeclarations: {
209
210
  method?: "get" | "post" | "put" | "delete" | "patch" | undefined;
210
211
  resource?: string | undefined;
211
212
  headers?: Record<string, string> | undefined;
213
+ notFound?: string | undefined;
212
214
  subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "" | undefined;
215
+ credentials?: RequestCredentials | undefined;
216
+ staleTime?: number | string | undefined;
217
+ gcTime?: number | string | undefined;
218
+ pageParam?: string | undefined;
213
219
  query?: string | undefined;
214
220
  accessToken?: string | undefined;
215
221
  mockData?: (Record<string, unknown> | string) | undefined;
216
- credentials?: RequestCredentials | undefined;
222
+ singleRecord?: boolean | undefined;
223
+ pagination?: import('../provider/ApiContainer/hooks/useProviderPagination').ProviderPagination | undefined;
224
+ renderWhileLoading?: boolean | undefined;
225
+ loadingSlot?: string | undefined;
226
+ refreshSeconds?: number | string | undefined;
217
227
  connector?: string | undefined;
218
228
  limit?: string | undefined;
219
- singleRecord?: boolean | undefined;
220
229
  filters?: {
221
230
  field: string;
222
231
  operator: string;
223
232
  value: string;
224
233
  }[] | undefined;
225
- pagination?: import('../provider/ApiContainer/hooks/useProviderPagination').ProviderPagination | undefined;
226
- pageParam?: string | undefined;
227
- renderWhileLoading?: boolean | undefined;
228
- loadingSlot?: string | undefined;
229
- staleTime?: number | string | undefined;
230
- gcTime?: number | string | undefined;
231
- refreshSeconds?: number | string | undefined;
232
234
  }>>;
233
235
  readonly BlockHtml: {
234
236
  readonly type: "blockHtml";
@@ -601,8 +603,8 @@ export declare const elementDeclarations: {
601
603
  items?: unknown[] | undefined;
602
604
  speed?: number | undefined;
603
605
  loop?: boolean | undefined;
604
- autoplay?: number | undefined;
605
606
  pauseOnHover?: boolean | undefined;
607
+ autoplay?: number | undefined;
606
608
  transition?: import('../structure/Carousel/CarouselContext').CarouselTransition | undefined;
607
609
  itemKey?: string | undefined;
608
610
  }>>;
@@ -785,9 +787,9 @@ export declare const elementDeclarations: {
785
787
  };
786
788
  } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
787
789
  subType?: "" | "div" | "section" | "aside" | "main" | undefined;
788
- topic?: string | undefined;
789
790
  grant?: string | undefined;
790
791
  presence?: unknown;
792
+ topic?: string | undefined;
791
793
  keep?: number | string | undefined;
792
794
  }>>;
793
795
  readonly Container: {
@@ -1060,8 +1062,7 @@ export declare const elementDeclarations: {
1060
1062
  readonly top: "0";
1061
1063
  readonly position: "absolute";
1062
1064
  readonly 'z-index': "210";
1063
- readonly 'background-color': "black";
1064
- readonly opacity: "0.5";
1065
+ readonly 'background-color': "rgb(0 0 0 / 50%)";
1065
1066
  };
1066
1067
  };
1067
1068
  readonly rootContainer: {
@@ -1620,7 +1621,7 @@ export declare const elementDeclarations: {
1620
1621
  readonly autoFocus: false;
1621
1622
  readonly disabled: false;
1622
1623
  readonly options: readonly [];
1623
- readonly required: true;
1624
+ readonly required: false;
1624
1625
  readonly requiredMessage: "";
1625
1626
  readonly minLength: 0;
1626
1627
  readonly minLengthMessage: "";
@@ -2800,6 +2801,7 @@ export declare const elementDeclarations: {
2800
2801
  readonly initialItems: readonly ["listItem", "listItem", "listItem"];
2801
2802
  } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
2802
2803
  source?: "none" | "controlled" | undefined;
2804
+ label?: string | undefined;
2803
2805
  items?: unknown[] | undefined;
2804
2806
  subType?: "ul" | "ol" | undefined;
2805
2807
  itemKey?: string | undefined;
@@ -3034,7 +3036,7 @@ export declare const elementDeclarations: {
3034
3036
  readonly definition: {
3035
3037
  readonly label: "Modal Container";
3036
3038
  readonly type: "modalContainer";
3037
- readonly description: "A modal overlay container opened and closed through interactions; use for dialogs over the page.";
3039
+ readonly description: string;
3038
3040
  readonly items: readonly [];
3039
3041
  readonly bindings: {};
3040
3042
  readonly loadStrategy: "lazy";
@@ -3091,8 +3093,7 @@ export declare const elementDeclarations: {
3091
3093
  readonly top: "0";
3092
3094
  readonly position: "absolute";
3093
3095
  readonly 'z-index': "210";
3094
- readonly 'background-color': "black";
3095
- readonly opacity: "0.5";
3096
+ readonly 'background-color': "rgb(0 0 0 / 50%)";
3096
3097
  };
3097
3098
  };
3098
3099
  readonly rootContainer: {
@@ -3577,6 +3578,7 @@ export declare const elementDeclarations: {
3577
3578
  } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
3578
3579
  readonly Page: {
3579
3580
  readonly type: "page";
3581
+ readonly serverTemplates: readonly ["seoPageTitle", "seoPageDescription", "notFound"];
3580
3582
  readonly triggers: {
3581
3583
  readonly onPageLoad: {
3582
3584
  readonly action: "onPageLoad";
@@ -3657,6 +3659,7 @@ export declare const elementDeclarations: {
3657
3659
  };
3658
3660
  } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
3659
3661
  layout?: string | undefined;
3662
+ notFound?: string | undefined;
3660
3663
  layoutContainer?: string | undefined;
3661
3664
  seoEnabled?: boolean | undefined;
3662
3665
  seoPageTitle?: string | undefined;
@@ -4250,6 +4253,7 @@ export declare const elementDeclarations: {
4250
4253
  } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
4251
4254
  title?: string | undefined;
4252
4255
  content?: string | number | undefined;
4256
+ decorative?: boolean | undefined;
4253
4257
  }>>;
4254
4258
  readonly ThemeToggle: {
4255
4259
  readonly type: "themeToggle";
@@ -4440,3 +4444,8 @@ export declare const elementDeclarations: {
4440
4444
  };
4441
4445
  export type ElementDeclarationName = keyof typeof elementDeclarations;
4442
4446
  export { ApiContainerDeclaration, BlockHtmlDeclaration, BlockJsxDeclaration, ButtonDeclaration, CarouselDeclaration, CarouselTrackDeclaration, ChannelDeclaration, ContainerDeclaration, CustomDeclaration, DialogContainerDeclaration, DropdownDeclaration, DropdownPopupDeclaration, EmbedDeclaration, FontAwesomeDeclaration, FormControlDeclaration, FormDeclaration, HeadingDeclaration, ImageDeclaration, LayoutContainerDeclaration, LinkDeclaration, ListDeclaration, ListItemDeclaration, LoadingDeclaration, MarkdownDeclaration, ModalContainerDeclaration, NodeHtmlDeclaration, NotFoundDeclaration, PageDeclaration, PaginationDeclaration, ParagraphDeclaration, ReferenceDeclaration, RichTextDeclaration, SvgDeclaration, TabContainerBodyDeclaration, TabContainerDeclaration, TabContainerHeaderDeclaration, TabContainerItemDeclaration, TextDeclaration, ThemeToggleDeclaration, VideoDeclaration };
4447
+ /**
4448
+ * Each type's `serverTemplates`, by the type a document names: the attributes the page server evaluates against a
4449
+ * context of its own, which the element runtime leaves as written and the authoring lint holds to that context.
4450
+ */
4451
+ export declare const serverTemplatesByType: Readonly<Record<string, readonly string[]>>;
@@ -26,8 +26,8 @@ import w from "../media/Svg/declaration.mjs";
26
26
  import T from "../media/Video/declaration.mjs";
27
27
  import E from "../provider/ApiContainer/declaration.mjs";
28
28
  import D from "../provider/Channel/declaration.mjs";
29
- import O from "../structure/Carousel/declaration.mjs";
30
- import k from "../structure/Carousel/CarouselTrack/declaration.mjs";
29
+ import O from "../structure/Carousel/CarouselTrack/declaration.mjs";
30
+ import k from "../structure/Carousel/declaration.mjs";
31
31
  import A from "../structure/Container/declaration.mjs";
32
32
  import j from "../structure/DialogContainer/declaration.mjs";
33
33
  import M from "../structure/List/declaration.mjs";
@@ -44,8 +44,8 @@ var B = {
44
44
  BlockHtml: e,
45
45
  BlockJsx: t,
46
46
  Button: a,
47
- Carousel: O,
48
- CarouselTrack: k,
47
+ Carousel: k,
48
+ CarouselTrack: O,
49
49
  Channel: D,
50
50
  Container: A,
51
51
  Custom: n,
@@ -80,6 +80,6 @@ var B = {
80
80
  Text: p,
81
81
  ThemeToggle: m,
82
82
  Video: T
83
- };
83
+ }, V = Object.fromEntries(Object.values(B).flatMap((e) => "serverTemplates" in e ? [[e.type, e.serverTemplates]] : []));
84
84
  //#endregion
85
- export { E as ApiContainerDeclaration, e as BlockHtmlDeclaration, t as BlockJsxDeclaration, a as ButtonDeclaration, O as CarouselDeclaration, k as CarouselTrackDeclaration, D as ChannelDeclaration, A as ContainerDeclaration, n as CustomDeclaration, j as DialogContainerDeclaration, o as DropdownDeclaration, s as DropdownPopupDeclaration, x as EmbedDeclaration, S as FontAwesomeDeclaration, g as FormControlDeclaration, h as FormDeclaration, c as HeadingDeclaration, C as ImageDeclaration, _ as LayoutContainerDeclaration, l as LinkDeclaration, M as ListDeclaration, N as ListItemDeclaration, v as LoadingDeclaration, u as MarkdownDeclaration, P as ModalContainerDeclaration, r as NodeHtmlDeclaration, y as NotFoundDeclaration, b as PageDeclaration, F as PaginationDeclaration, d as ParagraphDeclaration, i as ReferenceDeclaration, f as RichTextDeclaration, w as SvgDeclaration, L as TabContainerBodyDeclaration, I as TabContainerDeclaration, R as TabContainerHeaderDeclaration, z as TabContainerItemDeclaration, p as TextDeclaration, m as ThemeToggleDeclaration, T as VideoDeclaration, B as elementDeclarations };
85
+ export { E as ApiContainerDeclaration, e as BlockHtmlDeclaration, t as BlockJsxDeclaration, a as ButtonDeclaration, k as CarouselDeclaration, O as CarouselTrackDeclaration, D as ChannelDeclaration, A as ContainerDeclaration, n as CustomDeclaration, j as DialogContainerDeclaration, o as DropdownDeclaration, s as DropdownPopupDeclaration, x as EmbedDeclaration, S as FontAwesomeDeclaration, g as FormControlDeclaration, h as FormDeclaration, c as HeadingDeclaration, C as ImageDeclaration, _ as LayoutContainerDeclaration, l as LinkDeclaration, M as ListDeclaration, N as ListItemDeclaration, v as LoadingDeclaration, u as MarkdownDeclaration, P as ModalContainerDeclaration, r as NodeHtmlDeclaration, y as NotFoundDeclaration, b as PageDeclaration, F as PaginationDeclaration, d as ParagraphDeclaration, i as ReferenceDeclaration, f as RichTextDeclaration, w as SvgDeclaration, L as TabContainerBodyDeclaration, I as TabContainerDeclaration, R as TabContainerHeaderDeclaration, z as TabContainerItemDeclaration, p as TextDeclaration, m as ThemeToggleDeclaration, T as VideoDeclaration, B as elementDeclarations, V as serverTemplatesByType };
@@ -1,7 +1,7 @@
1
- import e from "../../../Element/hocs/withElement.mjs";
2
- import t from "../../../Element/hooks/useElement.mjs";
3
- import { RootElement as n } from "../../../Element/RootElement.mjs";
4
- import r from "./declaration.mjs";
1
+ import e from "./declaration.mjs";
2
+ import t from "../../../Element/hocs/withElement.mjs";
3
+ import n from "../../../Element/hooks/useElement.mjs";
4
+ import { RootElement as r } from "../../../Element/RootElement.mjs";
5
5
  import { use as i, useCallback as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
6
6
  import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
7
7
  import { get as d, omit as f } from "@plitzi/plitzi-ui/helpers";
@@ -13,8 +13,8 @@ import { produce as _ } from "immer";
13
13
  import v from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
14
14
  import y from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
15
15
  //#region src/elements/form/Form/Form.tsx
16
- var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl: C = "", managedByInteractions: w = !1, noValidate: T = !1, errors: E = m, values: D = m }) => {
17
- let [O, k] = l({}), A = c(/* @__PURE__ */ new Map()), j = c(!1), { id: M, definition: { label: N = "Form" }, setElementState: P } = t(), F = v(r.sourceType, M), { settings: { previewMode: I }, contexts: { InteractionsContext: L } } = u(), { interactionsManager: R } = i(L), z = a((e) => k((t) => ({
16
+ var b = ({ ref: t, className: b = "", children: x, method: S = "get", actionUrl: C = "", managedByInteractions: w = !1, noValidate: T = !1, errors: E = m, values: D = m }) => {
17
+ let [O, k] = l({}), A = c(/* @__PURE__ */ new Map()), j = c(!1), { id: M, definition: { label: N = "Form" }, setElementState: P } = n(), F = v(e.sourceType, M), { settings: { previewMode: I }, contexts: { InteractionsContext: L } } = u(), { interactionsManager: R } = i(L), z = a((e) => k((t) => ({
18
18
  ...t,
19
19
  [e.name]: e
20
20
  })), [k]);
@@ -106,9 +106,9 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
106
106
  fields: G
107
107
  });
108
108
  let q = s(() => ({ onSubmit: {
109
- ...r.triggers.onSubmit,
109
+ ...e.triggers.onSubmit,
110
110
  preview: {
111
- ...r.triggers.onSubmit.preview,
111
+ ...e.triggers.onSubmit.preview,
112
112
  values: Object.values(O).reduce((e, t) => ({
113
113
  ...e,
114
114
  [t.name]: ""
@@ -162,36 +162,36 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
162
162
  let { name: t, error: n } = e;
163
163
  W(t, n);
164
164
  }, [W]), Q = s(() => {
165
- let { performReset: e, setFieldValue: t, setFieldError: n } = r.callbacks, i = Object.values(O).map((e) => ({
165
+ let { performReset: t, setFieldValue: n, setFieldError: r } = e.callbacks, i = Object.values(O).map((e) => ({
166
166
  value: e.name,
167
167
  label: e.name
168
168
  }));
169
169
  return {
170
170
  performReset: {
171
- ...e,
171
+ ...t,
172
172
  title: `Reset ${N}`,
173
173
  callback: Y
174
174
  },
175
175
  setFieldValue: {
176
- ...t,
176
+ ...n,
177
177
  title: `Set Field Value ${N}`,
178
178
  callback: X,
179
179
  params: {
180
- ...t.params,
180
+ ...n.params,
181
181
  name: {
182
- ...t.params.name,
182
+ ...n.params.name,
183
183
  options: i
184
184
  }
185
185
  }
186
186
  },
187
187
  setFieldError: {
188
- ...n,
188
+ ...r,
189
189
  title: `Set Field Error ${N}`,
190
190
  callback: Z,
191
191
  params: {
192
- ...n.params,
192
+ ...r.params,
193
193
  name: {
194
- ...n.params.name,
194
+ ...r.params.name,
195
195
  options: i
196
196
  }
197
197
  }
@@ -204,9 +204,9 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
204
204
  O,
205
205
  Z
206
206
  ]);
207
- return /* @__PURE__ */ h(n, {
207
+ return /* @__PURE__ */ h(r, {
208
208
  tag: "form",
209
- ref: e,
209
+ ref: t,
210
210
  noValidate: T,
211
211
  method: S,
212
212
  className: g("plitzi-component__form", b),
@@ -222,6 +222,6 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
222
222
  children: x
223
223
  })
224
224
  });
225
- }, x = e(b);
225
+ }, x = t(b);
226
226
  //#endregion
227
227
  export { b as Form, x as default };
@@ -29,6 +29,7 @@ export type FormControlProps = {
29
29
  label: string;
30
30
  value: string;
31
31
  }[];
32
+ /** Optional unless it says so, as an HTML field is: a required field left empty stops the submit. */
32
33
  required: boolean;
33
34
  /**
34
35
  * The rules a value has to meet before the form submits, checked by the form at submit time and by the control when
@@ -1,7 +1,7 @@
1
- import e from "../../../Element/hocs/withElement.mjs";
2
- import t from "../../../Element/hooks/useElement.mjs";
3
- import { RootElement as n } from "../../../Element/RootElement.mjs";
4
- import r from "./declaration.mjs";
1
+ import e from "./declaration.mjs";
2
+ import t from "../../../Element/hocs/withElement.mjs";
3
+ import n from "../../../Element/hooks/useElement.mjs";
4
+ import { RootElement as r } from "../../../Element/RootElement.mjs";
5
5
  import { VISUALLY_HIDDEN as i } from "./components/visuallyHidden.mjs";
6
6
  import a from "./components/Label.mjs";
7
7
  import { isChecked as o } from "./helpers/isChecked.mjs";
@@ -17,8 +17,8 @@ import { createStoreHook as ee } from "@plitzi/nexus/react";
17
17
  import { jsx as _, jsxs as v } from "react/jsx-runtime";
18
18
  import y from "clsx";
19
19
  //#region src/elements/form/FormControl/FormControl.tsx
20
- var b = ({ ref: e, className: s = "", subType: b = "text", name: x = "", label: S = "Label", hideLabel: C = !1, placeholder: w = "", autoComplete: T = !0, autoFocus: E = !1, disabled: D = !1, options: O = [], required: k = !0, maxLength: A = 0, readOnly: j = !1, value: M = "", error: N = "", handleChange: P, handleValidate: F }) => {
21
- let { id: I, rootId: L, visible: R, definition: { styleSelectors: z } } = t(), { settings: { previewMode: B }, contexts: { InteractionsContext: V } } = g(), { interactionsManager: H } = p(V), { useStore: U } = ee(), [W] = U("runtime.sources.form"), G = m((e) => {
20
+ var b = ({ ref: t, className: s = "", subType: b = "text", name: x = "", label: S = "Label", hideLabel: C = !1, placeholder: w = "", autoComplete: T = !0, autoFocus: E = !1, disabled: D = !1, options: O = [], required: k = !1, maxLength: A = 0, readOnly: j = !1, value: M = "", error: N = "", handleChange: P, handleValidate: F }) => {
21
+ let { id: I, rootId: L, visible: R, definition: { styleSelectors: z } } = n(), { settings: { previewMode: B }, contexts: { InteractionsContext: V } } = g(), { interactionsManager: H } = p(V), { useStore: U } = ee(), [W] = U("runtime.sources.form"), G = m((e) => {
22
22
  if (P?.(e), !B) return;
23
23
  let { target: t } = e, n = t instanceof HTMLInputElement && t.type === "checkbox" ? t.checked : t.value;
24
24
  H.interactionTrigger(I, "onChange", {
@@ -52,9 +52,9 @@ var b = ({ ref: e, className: s = "", subType: b = "text", name: x = "", label:
52
52
  x,
53
53
  K,
54
54
  q
55
- ]), /* @__PURE__ */ v(n, {
56
- ref: e,
57
- interactionTriggers: r.triggers,
55
+ ]), /* @__PURE__ */ v(r, {
56
+ ref: t,
57
+ interactionTriggers: e.triggers,
58
58
  className: y("plitzi-component__form-control", {
59
59
  "form-control--invalid": N && B,
60
60
  [`plitzi-component__form-control-${b}`]: b
@@ -161,6 +161,6 @@ var b = ({ ref: e, className: s = "", subType: b = "text", name: x = "", label:
161
161
  })
162
162
  ]
163
163
  });
164
- }, x = e(s(b));
164
+ }, x = t(s(b));
165
165
  //#endregion
166
166
  export { b as FormControl, x as default };
@@ -9,7 +9,7 @@ import c from "@plitzi/plitzi-ui/Select";
9
9
  var l = (e) => {
10
10
  let t = parseInt(e, 10);
11
11
  return Number.isNaN(t) || t < 0 ? 0 : t;
12
- }, u = ({ subType: u = "text", name: d = "", label: f = "Label", hideLabel: p = !1, defaultValue: m = "", placeholder: h = "", autoComplete: g = !0, autoFocus: _ = !1, options: v, required: y = !0, requiredMessage: b = "", minLength: x = 0, minLengthMessage: S = "", maxLength: C = 0, maxLengthMessage: w = "", formatMessage: T = "", pattern: E = "", patternMessage: D = "", matches: O = "", matchesMessage: k = "", readOnly: A = !1, disabled: j = !1, previewError: M = !1, onUpdate: N }) => {
12
+ }, u = ({ subType: u = "text", name: d = "", label: f = "Label", hideLabel: p = !1, defaultValue: m = "", placeholder: h = "", autoComplete: g = !0, autoFocus: _ = !1, options: v, required: y = !1, requiredMessage: b = "", minLength: x = 0, minLengthMessage: S = "", maxLength: C = 0, maxLengthMessage: w = "", formatMessage: T = "", pattern: E = "", patternMessage: D = "", matches: O = "", matchesMessage: k = "", readOnly: A = !1, disabled: j = !1, previewError: M = !1, onUpdate: N }) => {
13
13
  let P = [
14
14
  "text",
15
15
  "textarea",
@@ -35,7 +35,7 @@ declare const declaration: {
35
35
  readonly autoFocus: false;
36
36
  readonly disabled: false;
37
37
  readonly options: readonly [];
38
- readonly required: true;
38
+ readonly required: false;
39
39
  readonly requiredMessage: "";
40
40
  readonly minLength: 0;
41
41
  readonly minLengthMessage: "";
@@ -63,7 +63,7 @@ var n = {
63
63
  "padding-left": "0px",
64
64
  display: "block",
65
65
  ...c,
66
- "background-color": "inherit",
66
+ "background-color": "transparent",
67
67
  color: "inherit",
68
68
  "line-height": "inherit",
69
69
  "font-family": "inherit",
@@ -186,7 +186,7 @@ var n = {
186
186
  autoFocus: !1,
187
187
  disabled: !1,
188
188
  options: [],
189
- required: !0,
189
+ required: !1,
190
190
  requiredMessage: "",
191
191
  minLength: 0,
192
192
  minLengthMessage: "",
@@ -202,7 +202,7 @@ var n = {
202
202
  definition: {
203
203
  label: "Form Control",
204
204
  type: "formControl",
205
- description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes. A `switch` is a checkbox announced and drawn as an on/off switch (`role=\"switch\"`), for a setting that applies at once; both hold `true`/`false`, and a `defaultValue` of `\"true\"` starts them on. Its slots: `label`, `requiredMark` (the `*` that ends the label of a required field), `input` (the box a typed field or a select is drawn in — a textarea, checkbox or switch is its own box), `field` (the `<input>` or `<select>` inside that box), `icon` (the show/hide button of a password) and `error`. The thumb of a switch is no element a class reaches: the class on its `input` slot sets `--plitzi-switch-thumb` (off), `--plitzi-switch-thumb-checked` (on, white by default) and `--plitzi-switch-thumb-shadow`.",
205
+ description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. Optional unless `required: true`, as an HTML field is: a `requiredMessage` alone requires nothing. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes. A `switch` is a checkbox announced and drawn as an on/off switch (`role=\"switch\"`), for a setting that applies at once; both hold `true`/`false`, and a `defaultValue` of `\"true\"` starts them on. Its slots: `label`, `requiredMark` (the `*` that ends the label of a required field), `input` (the box a typed field or a select is drawn in — a textarea, checkbox or switch is its own box), `field` (the `<input>` or `<select>` inside that box), `icon` (the show/hide button of a password) and `error`. The box is ringed (`2px solid currentColor`) while the field inside has keyboard focus: restyle it with a `focus-within` state on the `input` slot — the box never takes `focus` itself. The thumb of a switch is no element a class reaches: the class on its `input` slot sets `--plitzi-switch-thumb` (off), `--plitzi-switch-thumb-checked` (on, white by default) and `--plitzi-switch-thumb-shadow`.",
206
206
  bindings: {},
207
207
  styleSelectors: {
208
208
  base: "",
@@ -23,7 +23,7 @@ declare const FormControl: {
23
23
  readonly autoFocus: false;
24
24
  readonly disabled: false;
25
25
  readonly options: readonly [];
26
- readonly required: true;
26
+ readonly required: false;
27
27
  readonly requiredMessage: "";
28
28
  readonly minLength: 0;
29
29
  readonly minLengthMessage: "";
@@ -1,6 +1,6 @@
1
- import e from "./NotFound.mjs";
2
- import t from "./declaration.mjs";
1
+ import e from "./declaration.mjs";
2
+ import t from "./NotFound.mjs";
3
3
  //#region src/elements/internal/NotFound/index.ts
4
- var n = Object.assign(e, t);
4
+ var n = Object.assign(t, e);
5
5
  //#endregion
6
6
  export { n as NotFound, n as default };
@@ -4,6 +4,11 @@ export type PageProps = {
4
4
  seoEnabled?: boolean;
5
5
  seoPageTitle?: string;
6
6
  seoPageDescription?: string;
7
+ /**
8
+ * A template over the page's server providers and `navigation` that says this address shows nothing — a record that
9
+ * is not there: the page server sends it with status 404, rendered as written. Read there only (`serverTemplates`).
10
+ */
11
+ notFound?: string;
7
12
  className?: string;
8
13
  layout?: string;
9
14
  layoutContainer?: string;
@@ -1,16 +1,16 @@
1
1
  import e from "../../../Element/LayoutBody.mjs";
2
- import t from "../../../Element/hocs/withElement.mjs";
3
- import n from "../../../Element/hooks/useElement.mjs";
4
- import { RootElement as r } from "../../../Element/RootElement.mjs";
5
- import i from "../LayoutContainer/index.mjs";
6
- import a from "./declaration.mjs";
2
+ import t from "./declaration.mjs";
3
+ import n from "../../../Element/hocs/withElement.mjs";
4
+ import r from "../../../Element/hooks/useElement.mjs";
5
+ import { RootElement as i } from "../../../Element/RootElement.mjs";
6
+ import a from "../LayoutContainer/index.mjs";
7
7
  import o from "../../../Element/hooks/useLayoutChain.mjs";
8
- import { use as s, useEffect as c, useMemo as l } from "react";
9
- import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
10
- import { useRenderSettings as d, useSdkStore as f } from "@plitzi/sdk-shared/store";
11
- import { jsx as p, jsxs as m } from "react/jsx-runtime";
12
- import h from "clsx";
13
- import { Helmet as g } from "@dr.pogodin/react-helmet";
8
+ import s from "./PageHead.mjs";
9
+ import { use as c, useEffect as l, useMemo as u } from "react";
10
+ import d from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
11
+ import { useRenderSettings as f, useSdkStore as p } from "@plitzi/sdk-shared/store";
12
+ import { jsx as m, jsxs as h } from "react/jsx-runtime";
13
+ import g from "clsx";
14
14
  //#region src/elements/internal/Page/Page.tsx
15
15
  var _ = (e) => e.map((e) => ({
16
16
  ...e,
@@ -19,20 +19,20 @@ var _ = (e) => e.map((e) => ({
19
19
  rootId: e.slot,
20
20
  type: "layout"
21
21
  }
22
- })), v = (t, n, r) => t.reduce((t, { layout: r, slot: a, plitziElementLayout: o }) => /* @__PURE__ */ p(e, {
23
- bodies: { [a]: t },
24
- children: /* @__PURE__ */ p(i, { internalProps: {
22
+ })), v = (t, n, r) => t.reduce((t, { layout: r, slot: i, plitziElementLayout: o }) => /* @__PURE__ */ m(e, {
23
+ bodies: { [i]: t },
24
+ children: /* @__PURE__ */ m(a, { internalProps: {
25
25
  id: r,
26
26
  rootId: n,
27
27
  plitziElementLayout: o
28
28
  } })
29
- }, a), r), y = ({ ref: e, seoEnabled: t = !1, seoPageTitle: i = "Title", seoPageDescription: y = "Description", className: b = "", layout: x = "", layoutContainer: S = "", children: C }) => {
30
- let { id: w } = n(), { settings: { previewMode: T }, contexts: { InteractionsContext: E } } = u(), { interactionsManager: D } = s(E), { ownsHead: O } = d(), [[k, A]] = f(["navigation.routeParams", "navigation.queryParams"]), j = o(x, S), M = l(() => _(j), [j]), N = l(() => v(M, w, C), [
29
+ }, i), r), y = ({ ref: e, seoEnabled: n = !1, seoPageTitle: a = "Title", seoPageDescription: y = "Description", className: b = "", layout: x = "", layoutContainer: S = "", children: C }) => {
30
+ let { id: w } = r(), { settings: { previewMode: T }, contexts: { InteractionsContext: E } } = d(), { interactionsManager: D } = c(E), { ownsHead: O } = f(), [[k, A]] = p(["navigation.routeParams", "navigation.queryParams"]), j = o(x, S), M = u(() => _(j), [j]), N = u(() => v(M, w, C), [
31
31
  M,
32
32
  w,
33
33
  C
34
34
  ]);
35
- return c(() => {
35
+ return l(() => {
36
36
  let e = !1;
37
37
  return queueMicrotask(() => {
38
38
  e || D.interactionTrigger(w, "onPageLoad", {
@@ -48,15 +48,16 @@ var _ = (e) => e.map((e) => ({
48
48
  D,
49
49
  A,
50
50
  k
51
- ]), /* @__PURE__ */ m(r, {
51
+ ]), /* @__PURE__ */ h(i, {
52
52
  ref: e,
53
- className: h("plitzi-component__page", b),
54
- interactionTriggers: a.triggers,
55
- children: [t && T && O && /* @__PURE__ */ m(g, { children: [!!i && /* @__PURE__ */ p("title", { children: i }), !!y && /* @__PURE__ */ p("meta", {
56
- name: "description",
57
- content: y
58
- })] }), N]
53
+ className: g("plitzi-component__page", b),
54
+ interactionTriggers: t.triggers,
55
+ children: [n && T && O && /* @__PURE__ */ m(s, {
56
+ pageId: w,
57
+ title: a,
58
+ description: y
59
+ }), N]
59
60
  });
60
- }, b = t(y);
61
+ }, b = n(y);
61
62
  //#endregion
62
63
  export { y as Page, b as default };
@@ -0,0 +1,12 @@
1
+ export type PageHeadProps = {
2
+ pageId: string;
3
+ title?: string;
4
+ description?: string;
5
+ };
6
+ /**
7
+ * The page's title and description in the head: its words, or its templates read against the answers of its server
8
+ * providers — `rsc.data`, what the server wrote the HTML's head from, and what a navigation fetches before it lands —
9
+ * so the tab says the record a detail page shows, on arrival and after every move.
10
+ */
11
+ declare const PageHead: ({ pageId, title, description }: PageHeadProps) => import('react').JSX.Element;
12
+ export default PageHead;
@@ -0,0 +1,29 @@
1
+ import { useMemo as e } from "react";
2
+ import { useCommonStore as t } from "@plitzi/sdk-shared/store";
3
+ import { isRecord as n } from "@plitzi/sdk-shared/helpers/isRecord";
4
+ import { jsx as r, jsxs as i } from "react/jsx-runtime";
5
+ import { Helmet as a } from "@dr.pogodin/react-helmet";
6
+ import { collectServerElements as o, pageSeoText as s, pageServerContext as c } from "@plitzi/sdk-shared/schema/serverElements";
7
+ //#region src/elements/internal/Page/PageHead.tsx
8
+ var l = ({ pageId: l, title: u, description: d }) => {
9
+ let [[f, p, m, h]] = t([
10
+ "schema.flat",
11
+ "rsc.data",
12
+ "navigation.routeParams",
13
+ "navigation.queryParams"
14
+ ]), g = e(() => n(f) ? o({ flat: f }, l) : [], [f, l]), _ = e(() => c(g, p ?? {}, {
15
+ routeParams: m,
16
+ queryParams: h
17
+ }), [
18
+ g,
19
+ p,
20
+ m,
21
+ h
22
+ ]), v = s(u, _), y = s(d, _);
23
+ return /* @__PURE__ */ i(a, { children: [!!v && /* @__PURE__ */ r("title", { children: v }), !!y && /* @__PURE__ */ r("meta", {
24
+ name: "description",
25
+ content: y
26
+ })] });
27
+ };
28
+ //#endregion
29
+ export { l as default };
@@ -4,6 +4,7 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
4
4
  export type PageAttributes = AuthorableAttributes<PageProps>;
5
5
  declare const declaration: {
6
6
  readonly type: "page";
7
+ readonly serverTemplates: readonly ["seoPageTitle", "seoPageDescription", "notFound"];
7
8
  readonly triggers: {
8
9
  readonly onPageLoad: {
9
10
  readonly action: "onPageLoad";
@@ -84,6 +85,7 @@ declare const declaration: {
84
85
  };
85
86
  } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
86
87
  layout?: string | undefined;
88
+ notFound?: string | undefined;
87
89
  layoutContainer?: string | undefined;
88
90
  seoEnabled?: boolean | undefined;
89
91
  seoPageTitle?: string | undefined;
@@ -2,6 +2,11 @@ import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
2
2
  //#region src/elements/internal/Page/declaration.ts
3
3
  var t = e()({
4
4
  type: "page",
5
+ serverTemplates: [
6
+ "seoPageTitle",
7
+ "seoPageDescription",
8
+ "notFound"
9
+ ],
5
10
  triggers: { onPageLoad: {
6
11
  action: "onPageLoad",
7
12
  title: "On Page Load",
@@ -3,6 +3,7 @@ declare const Page: {
3
3
  displayName: string;
4
4
  } & {
5
5
  readonly type: "page";
6
+ readonly serverTemplates: readonly ["seoPageTitle", "seoPageDescription", "notFound"];
6
7
  readonly triggers: {
7
8
  readonly onPageLoad: {
8
9
  readonly action: "onPageLoad";
@@ -83,6 +84,7 @@ declare const Page: {
83
84
  };
84
85
  } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
85
86
  layout?: string | undefined;
87
+ notFound?: string | undefined;
86
88
  layoutContainer?: string | undefined;
87
89
  seoEnabled?: boolean | undefined;
88
90
  seoPageTitle?: string | undefined;
@@ -82,6 +82,13 @@ export type ApiContainerProps = {
82
82
  * flight. A text field in the builder, hence the string.
83
83
  */
84
84
  refreshSeconds?: number | string;
85
+ /**
86
+ * With `runtime: 'server'`: when this provider's answer means the address shows nothing — `{{ source.found == false
87
+ * }}` — a template against the answer, as `visible` is. The page server reads it once the answer is in and sends the
88
+ * page with status 404, rendered as it is written (its own "not found" part). Read by the server alone: a browser
89
+ * provider's answer arrives after the status was sent.
90
+ */
91
+ notFound?: string;
85
92
  };
86
93
  declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials, singleRecord, pagination, pageParam, renderWhileLoading, loadingSlot, cache, staleTime, gcTime, refreshSeconds, connector, action, input }: ApiContainerProps) => import('react').JSX.Element;
87
94
  declare const _default: {