@arkcit/engine-react 0.3.5 → 0.3.7

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 (6) hide show
  1. package/dist/engine.js +14 -2
  2. package/dist/index.js +60 -8
  3. package/dist/materialization.js +18 -7
  4. package/dist/rendering.js +56 -3
  5. package/dist/static-engine.js +14 -2
  6. package/package.json +1 -1
package/dist/engine.js CHANGED
@@ -75,12 +75,20 @@ import {
75
75
  // src/rendering/gridItemWrapperProps.ts
76
76
  var GRID_ITEM_RESPONSIVE_STYLE = `
77
77
  .arkcit-grid-item-responsive {
78
+ grid-column: span var(--arkcit-grid-col-base, 12);
79
+ }
80
+
81
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-base {
78
82
  grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
79
83
  }
80
84
 
81
85
  @media (min-width: 768px) {
82
86
  .arkcit-grid-item-responsive {
83
- grid-column: calc(var(--arkcit-grid-col-offset-md, var(--arkcit-grid-col-offset-base, 0)) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
87
+ grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
88
+ }
89
+
90
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-md {
91
+ grid-column: calc(var(--arkcit-grid-col-offset-md, 0) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
84
92
  }
85
93
  }
86
94
  `;
@@ -92,7 +100,11 @@ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobil
92
100
  "--arkcit-grid-col-offset-md": String(colOffset)
93
101
  };
94
102
  return {
95
- className: "w-full min-w-0 arkcit-grid-item-responsive",
103
+ className: [
104
+ "w-full min-w-0 arkcit-grid-item-responsive",
105
+ mobileColOffset > 0 ? "arkcit-grid-item-offset-base" : "",
106
+ colOffset > 0 ? "arkcit-grid-item-offset-md" : ""
107
+ ].filter(Boolean).join(" "),
96
108
  style
97
109
  };
98
110
  };
package/dist/index.js CHANGED
@@ -452,12 +452,20 @@ import {
452
452
  // src/rendering/gridItemWrapperProps.ts
453
453
  var GRID_ITEM_RESPONSIVE_STYLE = `
454
454
  .arkcit-grid-item-responsive {
455
+ grid-column: span var(--arkcit-grid-col-base, 12);
456
+ }
457
+
458
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-base {
455
459
  grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
456
460
  }
457
461
 
458
462
  @media (min-width: 768px) {
459
463
  .arkcit-grid-item-responsive {
460
- grid-column: calc(var(--arkcit-grid-col-offset-md, var(--arkcit-grid-col-offset-base, 0)) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
464
+ grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
465
+ }
466
+
467
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-md {
468
+ grid-column: calc(var(--arkcit-grid-col-offset-md, 0) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
461
469
  }
462
470
  }
463
471
  `;
@@ -469,7 +477,11 @@ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobil
469
477
  "--arkcit-grid-col-offset-md": String(colOffset)
470
478
  };
471
479
  return {
472
- className: "w-full min-w-0 arkcit-grid-item-responsive",
480
+ className: [
481
+ "w-full min-w-0 arkcit-grid-item-responsive",
482
+ mobileColOffset > 0 ? "arkcit-grid-item-offset-base" : "",
483
+ colOffset > 0 ? "arkcit-grid-item-offset-md" : ""
484
+ ].filter(Boolean).join(" "),
473
485
  style
474
486
  };
475
487
  };
@@ -1112,7 +1124,6 @@ var useUIEngineEffects = ({
1112
1124
  // src/materialization/contentStudio.tsx
1113
1125
  import React9 from "react";
1114
1126
  import { Fragment as Fragment3, jsx as jsx11 } from "react/jsx-runtime";
1115
- var COVER_MEDIA_FRAME_CLASSNAME = "h-56 w-full overflow-hidden rounded-xl bg-surface ring-1 ring-border/60";
1116
1127
  var buildCoverMedia = ({
1117
1128
  mediaSource,
1118
1129
  mediaSrc,
@@ -1120,21 +1131,21 @@ var buildCoverMedia = ({
1120
1131
  }) => {
1121
1132
  if (mediaSource === "none") return void 0;
1122
1133
  if (mediaSource === "image" && mediaSrc) {
1123
- return /* @__PURE__ */ jsx11("div", { className: COVER_MEDIA_FRAME_CLASSNAME, children: /* @__PURE__ */ jsx11(
1134
+ return /* @__PURE__ */ jsx11("div", { className: "h-full w-full bg-transparent", children: /* @__PURE__ */ jsx11(
1124
1135
  "img",
1125
1136
  {
1126
1137
  src: mediaSrc,
1127
1138
  alt: mediaAlt || "Cover media",
1128
- className: "h-full w-full object-contain"
1139
+ className: "block h-full w-full object-cover"
1129
1140
  }
1130
1141
  ) });
1131
1142
  }
1132
1143
  if (mediaSource === "video" && mediaSrc) {
1133
- return /* @__PURE__ */ jsx11("div", { className: COVER_MEDIA_FRAME_CLASSNAME, children: /* @__PURE__ */ jsx11(
1144
+ return /* @__PURE__ */ jsx11("div", { className: "h-full w-full bg-transparent", children: /* @__PURE__ */ jsx11(
1134
1145
  "video",
1135
1146
  {
1136
1147
  src: mediaSrc,
1137
- className: "h-full w-full object-cover",
1148
+ className: "block h-full w-full object-cover",
1138
1149
  controls: true,
1139
1150
  preload: "metadata"
1140
1151
  }
@@ -1341,8 +1352,45 @@ var configurePreviewLinkBehavior = (componentProps) => {
1341
1352
  };
1342
1353
 
1343
1354
  // src/rendering/finalizeRenderedNode.tsx
1344
- var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover"]);
1355
+ var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover", "Document"]);
1345
1356
  var RESPONSIVE_MEDIA_CLASS_NAME = "max-md:!w-full max-md:![flex-basis:100%!important] max-md:!h-auto";
1357
+ var RESPONSIVE_TEXT_NODE_TYPES = /* @__PURE__ */ new Set([
1358
+ "Typography",
1359
+ "H1",
1360
+ "H2",
1361
+ "H3",
1362
+ "Text",
1363
+ "Muted",
1364
+ "Lead",
1365
+ "Code"
1366
+ ]);
1367
+ var RESPONSIVE_AUTO_HEIGHT_NODE_TYPES = /* @__PURE__ */ new Set([
1368
+ ...RESPONSIVE_MEDIA_NODE_TYPES,
1369
+ ...RESPONSIVE_TEXT_NODE_TYPES,
1370
+ "Accordion",
1371
+ "BookingCalendar",
1372
+ "Button",
1373
+ "Breadcrumb",
1374
+ "Link",
1375
+ "Card",
1376
+ "Carousel",
1377
+ "ContentSlider",
1378
+ "Cover",
1379
+ "DataGrid",
1380
+ "ExpandablePanel",
1381
+ "FilterBar",
1382
+ "Form",
1383
+ "FormWizard",
1384
+ "Grid",
1385
+ "Container",
1386
+ "MapCard",
1387
+ "Pagination",
1388
+ "QRCode",
1389
+ "Slider",
1390
+ "Table",
1391
+ "Tabs"
1392
+ ]);
1393
+ var RESPONSIVE_TEXT_CLASS_NAME = "max-md:!h-auto";
1346
1394
  var hasExplicitStudioSizing = (studioSizing) => Boolean(
1347
1395
  studioSizing && (studioSizing.widthPct !== null || studioSizing.heightPct !== null || studioSizing.heightPx !== null)
1348
1396
  );
@@ -1361,6 +1409,10 @@ var finalizeRenderedNode = ({
1361
1409
  const currentClassName = typeof componentProps.className === "string" ? componentProps.className : "";
1362
1410
  componentProps.className = [currentClassName, RESPONSIVE_MEDIA_CLASS_NAME].filter(Boolean).join(" ");
1363
1411
  }
1412
+ if (RESPONSIVE_AUTO_HEIGHT_NODE_TYPES.has(node.type) && hasExplicitStudioSizing(studioSizing)) {
1413
+ const currentClassName = typeof componentProps.className === "string" ? componentProps.className : "";
1414
+ componentProps.className = [currentClassName, RESPONSIVE_TEXT_CLASS_NAME].filter(Boolean).join(" ");
1415
+ }
1364
1416
  const plans = providedPlans != null ? providedPlans : dependencies.resolveFinalRenderPlan({
1365
1417
  node,
1366
1418
  componentProps,
package/dist/materialization.js CHANGED
@@ -21,7 +21,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
21
  // src/materialization/contentStudio.tsx
22
22
  import React from "react";
23
23
  import { Fragment, jsx } from "react/jsx-runtime";
24
- var COVER_MEDIA_FRAME_CLASSNAME = "h-56 w-full overflow-hidden rounded-xl bg-surface ring-1 ring-border/60";
25
24
  var buildCoverMedia = ({
26
25
  mediaSource,
27
26
  mediaSrc,
@@ -29,21 +28,21 @@ var buildCoverMedia = ({
29
28
  }) => {
30
29
  if (mediaSource === "none") return void 0;
31
30
  if (mediaSource === "image" && mediaSrc) {
32
- return /* @__PURE__ */ jsx("div", { className: COVER_MEDIA_FRAME_CLASSNAME, children: /* @__PURE__ */ jsx(
31
+ return /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-transparent", children: /* @__PURE__ */ jsx(
33
32
  "img",
34
33
  {
35
34
  src: mediaSrc,
36
35
  alt: mediaAlt || "Cover media",
37
- className: "h-full w-full object-contain"
36
+ className: "block h-full w-full object-cover"
38
37
  }
39
38
  ) });
40
39
  }
41
40
  if (mediaSource === "video" && mediaSrc) {
42
- return /* @__PURE__ */ jsx("div", { className: COVER_MEDIA_FRAME_CLASSNAME, children: /* @__PURE__ */ jsx(
41
+ return /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-transparent", children: /* @__PURE__ */ jsx(
43
42
  "video",
44
43
  {
45
44
  src: mediaSrc,
46
- className: "h-full w-full object-cover",
45
+ className: "block h-full w-full object-cover",
47
46
  controls: true,
48
47
  preload: "metadata"
49
48
  }
@@ -223,12 +222,20 @@ import React3 from "react";
223
222
  // src/rendering/gridItemWrapperProps.ts
224
223
  var GRID_ITEM_RESPONSIVE_STYLE = `
225
224
  .arkcit-grid-item-responsive {
225
+ grid-column: span var(--arkcit-grid-col-base, 12);
226
+ }
227
+
228
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-base {
226
229
  grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
227
230
  }
228
231
 
229
232
  @media (min-width: 768px) {
230
233
  .arkcit-grid-item-responsive {
231
- grid-column: calc(var(--arkcit-grid-col-offset-md, var(--arkcit-grid-col-offset-base, 0)) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
234
+ grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
235
+ }
236
+
237
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-md {
238
+ grid-column: calc(var(--arkcit-grid-col-offset-md, 0) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
232
239
  }
233
240
  }
234
241
  `;
@@ -240,7 +247,11 @@ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobil
240
247
  "--arkcit-grid-col-offset-md": String(colOffset)
241
248
  };
242
249
  return {
243
- className: "w-full min-w-0 arkcit-grid-item-responsive",
250
+ className: [
251
+ "w-full min-w-0 arkcit-grid-item-responsive",
252
+ mobileColOffset > 0 ? "arkcit-grid-item-offset-base" : "",
253
+ colOffset > 0 ? "arkcit-grid-item-offset-md" : ""
254
+ ].filter(Boolean).join(" "),
244
255
  style
245
256
  };
246
257
  };
package/dist/rendering.js CHANGED
@@ -174,8 +174,45 @@ var materializeBoundTable = ({
174
174
  };
175
175
 
176
176
  // src/rendering/finalizeRenderedNode.tsx
177
- var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover"]);
177
+ var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover", "Document"]);
178
178
  var RESPONSIVE_MEDIA_CLASS_NAME = "max-md:!w-full max-md:![flex-basis:100%!important] max-md:!h-auto";
179
+ var RESPONSIVE_TEXT_NODE_TYPES = /* @__PURE__ */ new Set([
180
+ "Typography",
181
+ "H1",
182
+ "H2",
183
+ "H3",
184
+ "Text",
185
+ "Muted",
186
+ "Lead",
187
+ "Code"
188
+ ]);
189
+ var RESPONSIVE_AUTO_HEIGHT_NODE_TYPES = /* @__PURE__ */ new Set([
190
+ ...RESPONSIVE_MEDIA_NODE_TYPES,
191
+ ...RESPONSIVE_TEXT_NODE_TYPES,
192
+ "Accordion",
193
+ "BookingCalendar",
194
+ "Button",
195
+ "Breadcrumb",
196
+ "Link",
197
+ "Card",
198
+ "Carousel",
199
+ "ContentSlider",
200
+ "Cover",
201
+ "DataGrid",
202
+ "ExpandablePanel",
203
+ "FilterBar",
204
+ "Form",
205
+ "FormWizard",
206
+ "Grid",
207
+ "Container",
208
+ "MapCard",
209
+ "Pagination",
210
+ "QRCode",
211
+ "Slider",
212
+ "Table",
213
+ "Tabs"
214
+ ]);
215
+ var RESPONSIVE_TEXT_CLASS_NAME = "max-md:!h-auto";
179
216
  var hasExplicitStudioSizing = (studioSizing) => Boolean(
180
217
  studioSizing && (studioSizing.widthPct !== null || studioSizing.heightPct !== null || studioSizing.heightPx !== null)
181
218
  );
@@ -194,6 +231,10 @@ var finalizeRenderedNode = ({
194
231
  const currentClassName = typeof componentProps.className === "string" ? componentProps.className : "";
195
232
  componentProps.className = [currentClassName, RESPONSIVE_MEDIA_CLASS_NAME].filter(Boolean).join(" ");
196
233
  }
234
+ if (RESPONSIVE_AUTO_HEIGHT_NODE_TYPES.has(node.type) && hasExplicitStudioSizing(studioSizing)) {
235
+ const currentClassName = typeof componentProps.className === "string" ? componentProps.className : "";
236
+ componentProps.className = [currentClassName, RESPONSIVE_TEXT_CLASS_NAME].filter(Boolean).join(" ");
237
+ }
197
238
  const plans = providedPlans != null ? providedPlans : dependencies.resolveFinalRenderPlan({
198
239
  node,
199
240
  componentProps,
@@ -241,12 +282,20 @@ var finalizeRenderedNode = ({
241
282
  // src/rendering/gridItemWrapperProps.ts
242
283
  var GRID_ITEM_RESPONSIVE_STYLE = `
243
284
  .arkcit-grid-item-responsive {
285
+ grid-column: span var(--arkcit-grid-col-base, 12);
286
+ }
287
+
288
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-base {
244
289
  grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
245
290
  }
246
291
 
247
292
  @media (min-width: 768px) {
248
293
  .arkcit-grid-item-responsive {
249
- grid-column: calc(var(--arkcit-grid-col-offset-md, var(--arkcit-grid-col-offset-base, 0)) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
294
+ grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
295
+ }
296
+
297
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-md {
298
+ grid-column: calc(var(--arkcit-grid-col-offset-md, 0) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
250
299
  }
251
300
  }
252
301
  `;
@@ -258,7 +307,11 @@ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobil
258
307
  "--arkcit-grid-col-offset-md": String(colOffset)
259
308
  };
260
309
  return {
261
- className: "w-full min-w-0 arkcit-grid-item-responsive",
310
+ className: [
311
+ "w-full min-w-0 arkcit-grid-item-responsive",
312
+ mobileColOffset > 0 ? "arkcit-grid-item-offset-base" : "",
313
+ colOffset > 0 ? "arkcit-grid-item-offset-md" : ""
314
+ ].filter(Boolean).join(" "),
262
315
  style
263
316
  };
264
317
  };
package/dist/static-engine.js CHANGED
@@ -48,12 +48,20 @@ import {
48
48
  // src/rendering/gridItemWrapperProps.ts
49
49
  var GRID_ITEM_RESPONSIVE_STYLE = `
50
50
  .arkcit-grid-item-responsive {
51
+ grid-column: span var(--arkcit-grid-col-base, 12);
52
+ }
53
+
54
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-base {
51
55
  grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
52
56
  }
53
57
 
54
58
  @media (min-width: 768px) {
55
59
  .arkcit-grid-item-responsive {
56
- grid-column: calc(var(--arkcit-grid-col-offset-md, var(--arkcit-grid-col-offset-base, 0)) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
60
+ grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
61
+ }
62
+
63
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-md {
64
+ grid-column: calc(var(--arkcit-grid-col-offset-md, 0) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
57
65
  }
58
66
  }
59
67
  `;
@@ -65,7 +73,11 @@ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobil
65
73
  "--arkcit-grid-col-offset-md": String(colOffset)
66
74
  };
67
75
  return {
68
- className: "w-full min-w-0 arkcit-grid-item-responsive",
76
+ className: [
77
+ "w-full min-w-0 arkcit-grid-item-responsive",
78
+ mobileColOffset > 0 ? "arkcit-grid-item-offset-base" : "",
79
+ colOffset > 0 ? "arkcit-grid-item-offset-md" : ""
80
+ ].filter(Boolean).join(" "),
69
81
  style
70
82
  };
71
83
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@arkcit/engine-react",
3
3
  "private": false,
4
- "version": "0.3.5",
4
+ "version": "0.3.7",
5
5
  "type": "module",
6
6
  "sideEffects": false,
7
7
  "description": "React-specific renderer package for the Arkcit engine platform.",