@arkcit/engine-react 0.3.4 → 0.3.6
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.
- package/dist/engine.js +70 -11
- package/dist/index.js +75 -17
- package/dist/materialization.js +59 -14
- package/dist/rendering.d.ts +8 -4
- package/dist/rendering.js +71 -12
- package/dist/static-engine.js +70 -11
- package/package.json +4 -4
package/dist/engine.js
CHANGED
|
@@ -73,16 +73,45 @@ import {
|
|
|
73
73
|
} from "@arkcit/engine-render-layer";
|
|
74
74
|
|
|
75
75
|
// src/rendering/gridItemWrapperProps.ts
|
|
76
|
-
var
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
var GRID_ITEM_RESPONSIVE_STYLE = `
|
|
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 {
|
|
82
|
+
grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@media (min-width: 768px) {
|
|
86
|
+
.arkcit-grid-item-responsive {
|
|
87
|
+
grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
|
|
80
88
|
}
|
|
81
|
-
|
|
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));
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
`;
|
|
95
|
+
var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobileColOffset = 0) => {
|
|
96
|
+
const style = {
|
|
97
|
+
"--arkcit-grid-col-base": String(mobileColSpan),
|
|
98
|
+
"--arkcit-grid-col-md": String(colSpan),
|
|
99
|
+
"--arkcit-grid-col-offset-base": String(mobileColOffset),
|
|
100
|
+
"--arkcit-grid-col-offset-md": String(colOffset)
|
|
101
|
+
};
|
|
102
|
+
return {
|
|
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(" "),
|
|
108
|
+
style
|
|
109
|
+
};
|
|
110
|
+
};
|
|
82
111
|
|
|
83
112
|
// src/materialization/materializeChildContent.tsx
|
|
84
113
|
import React2 from "react";
|
|
85
|
-
import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
|
|
114
|
+
import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
86
115
|
var materializeChildContent = ({
|
|
87
116
|
descriptor,
|
|
88
117
|
renderSafeNode
|
|
@@ -92,14 +121,31 @@ var materializeChildContent = ({
|
|
|
92
121
|
}
|
|
93
122
|
const renderDescriptor = (childDescriptor) => {
|
|
94
123
|
if (childDescriptor.kind === "grid-item") {
|
|
95
|
-
return /* @__PURE__ */ jsx3(
|
|
124
|
+
return /* @__PURE__ */ jsx3(
|
|
125
|
+
"div",
|
|
126
|
+
__spreadProps(__spreadValues({}, getGridItemWrapperProps(
|
|
127
|
+
childDescriptor.colSpan,
|
|
128
|
+
childDescriptor.mobileColSpan,
|
|
129
|
+
childDescriptor.colOffset,
|
|
130
|
+
childDescriptor.mobileColOffset
|
|
131
|
+
)), {
|
|
132
|
+
children: renderSafeNode(childDescriptor.child)
|
|
133
|
+
}),
|
|
134
|
+
childDescriptor.child.id
|
|
135
|
+
);
|
|
96
136
|
}
|
|
97
137
|
return /* @__PURE__ */ jsx3(React2.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
|
|
98
138
|
};
|
|
99
139
|
if (descriptor.kind === "single") {
|
|
100
|
-
return
|
|
140
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
141
|
+
descriptor.child.kind === "grid-item" ? /* @__PURE__ */ jsx3("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
|
|
142
|
+
renderDescriptor(descriptor.child)
|
|
143
|
+
] });
|
|
101
144
|
}
|
|
102
|
-
return /* @__PURE__ */
|
|
145
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
146
|
+
descriptor.children.some((child) => child.kind === "grid-item") ? /* @__PURE__ */ jsx3("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
|
|
147
|
+
descriptor.children.map(renderDescriptor)
|
|
148
|
+
] });
|
|
103
149
|
};
|
|
104
150
|
|
|
105
151
|
// src/rendering/prepareRenderableChildren.tsx
|
|
@@ -117,10 +163,23 @@ var prepareRenderableChildren = ({
|
|
|
117
163
|
});
|
|
118
164
|
const children = resolvedDescriptors.map((descriptor) => {
|
|
119
165
|
if (descriptor.kind === "grid-item") {
|
|
120
|
-
return /* @__PURE__ */ jsx4(
|
|
166
|
+
return /* @__PURE__ */ jsx4(
|
|
167
|
+
"div",
|
|
168
|
+
__spreadProps(__spreadValues({}, getGridItemWrapperProps(
|
|
169
|
+
descriptor.colSpan,
|
|
170
|
+
descriptor.mobileColSpan,
|
|
171
|
+
descriptor.colOffset,
|
|
172
|
+
descriptor.mobileColOffset
|
|
173
|
+
)), {
|
|
174
|
+
children: renderSafeNode(descriptor.child)
|
|
175
|
+
}),
|
|
176
|
+
descriptor.child.id
|
|
177
|
+
);
|
|
121
178
|
}
|
|
122
179
|
return /* @__PURE__ */ jsx4(React3.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
|
|
123
180
|
});
|
|
181
|
+
const hasGridItems = resolvedDescriptors.some((descriptor) => descriptor.kind === "grid-item");
|
|
182
|
+
const wrappedChildren = hasGridItems ? [/* @__PURE__ */ jsx4("style", { children: GRID_ITEM_RESPONSIVE_STYLE }, "arkcit-grid-item-responsive-style"), ...children] : children;
|
|
124
183
|
const resolvedChildContentDescriptor = childContentDescriptor != null ? childContentDescriptor : resolveChildContentDescriptor({
|
|
125
184
|
childDescriptors: resolvedDescriptors
|
|
126
185
|
});
|
|
@@ -129,7 +188,7 @@ var prepareRenderableChildren = ({
|
|
|
129
188
|
renderSafeNode
|
|
130
189
|
});
|
|
131
190
|
return {
|
|
132
|
-
children,
|
|
191
|
+
children: wrappedChildren,
|
|
133
192
|
resolvedChildContent,
|
|
134
193
|
childDescriptors: resolvedDescriptors,
|
|
135
194
|
childContentDescriptor: resolvedChildContentDescriptor
|
package/dist/index.js
CHANGED
|
@@ -450,16 +450,45 @@ import {
|
|
|
450
450
|
} from "@arkcit/engine-render-layer";
|
|
451
451
|
|
|
452
452
|
// src/rendering/gridItemWrapperProps.ts
|
|
453
|
-
var
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
453
|
+
var GRID_ITEM_RESPONSIVE_STYLE = `
|
|
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 {
|
|
459
|
+
grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
@media (min-width: 768px) {
|
|
463
|
+
.arkcit-grid-item-responsive {
|
|
464
|
+
grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
|
|
457
465
|
}
|
|
458
|
-
|
|
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));
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
`;
|
|
472
|
+
var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobileColOffset = 0) => {
|
|
473
|
+
const style = {
|
|
474
|
+
"--arkcit-grid-col-base": String(mobileColSpan),
|
|
475
|
+
"--arkcit-grid-col-md": String(colSpan),
|
|
476
|
+
"--arkcit-grid-col-offset-base": String(mobileColOffset),
|
|
477
|
+
"--arkcit-grid-col-offset-md": String(colOffset)
|
|
478
|
+
};
|
|
479
|
+
return {
|
|
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(" "),
|
|
485
|
+
style
|
|
486
|
+
};
|
|
487
|
+
};
|
|
459
488
|
|
|
460
489
|
// src/materialization/materializeChildContent.tsx
|
|
461
490
|
import React5 from "react";
|
|
462
|
-
import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
|
|
491
|
+
import { Fragment as Fragment2, jsx as jsx6, jsxs } from "react/jsx-runtime";
|
|
463
492
|
var materializeChildContent = ({
|
|
464
493
|
descriptor,
|
|
465
494
|
renderSafeNode
|
|
@@ -469,14 +498,31 @@ var materializeChildContent = ({
|
|
|
469
498
|
}
|
|
470
499
|
const renderDescriptor = (childDescriptor) => {
|
|
471
500
|
if (childDescriptor.kind === "grid-item") {
|
|
472
|
-
return /* @__PURE__ */ jsx6(
|
|
501
|
+
return /* @__PURE__ */ jsx6(
|
|
502
|
+
"div",
|
|
503
|
+
__spreadProps(__spreadValues({}, getGridItemWrapperProps(
|
|
504
|
+
childDescriptor.colSpan,
|
|
505
|
+
childDescriptor.mobileColSpan,
|
|
506
|
+
childDescriptor.colOffset,
|
|
507
|
+
childDescriptor.mobileColOffset
|
|
508
|
+
)), {
|
|
509
|
+
children: renderSafeNode(childDescriptor.child)
|
|
510
|
+
}),
|
|
511
|
+
childDescriptor.child.id
|
|
512
|
+
);
|
|
473
513
|
}
|
|
474
514
|
return /* @__PURE__ */ jsx6(React5.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
|
|
475
515
|
};
|
|
476
516
|
if (descriptor.kind === "single") {
|
|
477
|
-
return
|
|
517
|
+
return /* @__PURE__ */ jsxs(Fragment2, { children: [
|
|
518
|
+
descriptor.child.kind === "grid-item" ? /* @__PURE__ */ jsx6("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
|
|
519
|
+
renderDescriptor(descriptor.child)
|
|
520
|
+
] });
|
|
478
521
|
}
|
|
479
|
-
return /* @__PURE__ */
|
|
522
|
+
return /* @__PURE__ */ jsxs(Fragment2, { children: [
|
|
523
|
+
descriptor.children.some((child) => child.kind === "grid-item") ? /* @__PURE__ */ jsx6("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
|
|
524
|
+
descriptor.children.map(renderDescriptor)
|
|
525
|
+
] });
|
|
480
526
|
};
|
|
481
527
|
|
|
482
528
|
// src/rendering/prepareRenderableChildren.tsx
|
|
@@ -494,10 +540,23 @@ var prepareRenderableChildren = ({
|
|
|
494
540
|
});
|
|
495
541
|
const children = resolvedDescriptors.map((descriptor) => {
|
|
496
542
|
if (descriptor.kind === "grid-item") {
|
|
497
|
-
return /* @__PURE__ */ jsx7(
|
|
543
|
+
return /* @__PURE__ */ jsx7(
|
|
544
|
+
"div",
|
|
545
|
+
__spreadProps(__spreadValues({}, getGridItemWrapperProps(
|
|
546
|
+
descriptor.colSpan,
|
|
547
|
+
descriptor.mobileColSpan,
|
|
548
|
+
descriptor.colOffset,
|
|
549
|
+
descriptor.mobileColOffset
|
|
550
|
+
)), {
|
|
551
|
+
children: renderSafeNode(descriptor.child)
|
|
552
|
+
}),
|
|
553
|
+
descriptor.child.id
|
|
554
|
+
);
|
|
498
555
|
}
|
|
499
556
|
return /* @__PURE__ */ jsx7(React6.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
|
|
500
557
|
});
|
|
558
|
+
const hasGridItems = resolvedDescriptors.some((descriptor) => descriptor.kind === "grid-item");
|
|
559
|
+
const wrappedChildren = hasGridItems ? [/* @__PURE__ */ jsx7("style", { children: GRID_ITEM_RESPONSIVE_STYLE }, "arkcit-grid-item-responsive-style"), ...children] : children;
|
|
501
560
|
const resolvedChildContentDescriptor = childContentDescriptor != null ? childContentDescriptor : resolveChildContentDescriptor({
|
|
502
561
|
childDescriptors: resolvedDescriptors
|
|
503
562
|
});
|
|
@@ -506,7 +565,7 @@ var prepareRenderableChildren = ({
|
|
|
506
565
|
renderSafeNode
|
|
507
566
|
});
|
|
508
567
|
return {
|
|
509
|
-
children,
|
|
568
|
+
children: wrappedChildren,
|
|
510
569
|
resolvedChildContent,
|
|
511
570
|
childDescriptors: resolvedDescriptors,
|
|
512
571
|
childContentDescriptor: resolvedChildContentDescriptor
|
|
@@ -1065,7 +1124,6 @@ var useUIEngineEffects = ({
|
|
|
1065
1124
|
// src/materialization/contentStudio.tsx
|
|
1066
1125
|
import React9 from "react";
|
|
1067
1126
|
import { Fragment as Fragment3, jsx as jsx11 } from "react/jsx-runtime";
|
|
1068
|
-
var COVER_MEDIA_FRAME_CLASSNAME = "h-56 w-full overflow-hidden rounded-xl bg-surface ring-1 ring-border/60";
|
|
1069
1127
|
var buildCoverMedia = ({
|
|
1070
1128
|
mediaSource,
|
|
1071
1129
|
mediaSrc,
|
|
@@ -1073,21 +1131,21 @@ var buildCoverMedia = ({
|
|
|
1073
1131
|
}) => {
|
|
1074
1132
|
if (mediaSource === "none") return void 0;
|
|
1075
1133
|
if (mediaSource === "image" && mediaSrc) {
|
|
1076
|
-
return /* @__PURE__ */ jsx11("div", { className:
|
|
1134
|
+
return /* @__PURE__ */ jsx11("div", { className: "h-full w-full bg-transparent", children: /* @__PURE__ */ jsx11(
|
|
1077
1135
|
"img",
|
|
1078
1136
|
{
|
|
1079
1137
|
src: mediaSrc,
|
|
1080
1138
|
alt: mediaAlt || "Cover media",
|
|
1081
|
-
className: "h-full w-full object-cover"
|
|
1139
|
+
className: "block h-full w-full object-cover"
|
|
1082
1140
|
}
|
|
1083
1141
|
) });
|
|
1084
1142
|
}
|
|
1085
1143
|
if (mediaSource === "video" && mediaSrc) {
|
|
1086
|
-
return /* @__PURE__ */ jsx11("div", { className:
|
|
1144
|
+
return /* @__PURE__ */ jsx11("div", { className: "h-full w-full bg-transparent", children: /* @__PURE__ */ jsx11(
|
|
1087
1145
|
"video",
|
|
1088
1146
|
{
|
|
1089
1147
|
src: mediaSrc,
|
|
1090
|
-
className: "h-full w-full object-cover",
|
|
1148
|
+
className: "block h-full w-full object-cover",
|
|
1091
1149
|
controls: true,
|
|
1092
1150
|
preload: "metadata"
|
|
1093
1151
|
}
|
|
@@ -1294,7 +1352,7 @@ var configurePreviewLinkBehavior = (componentProps) => {
|
|
|
1294
1352
|
};
|
|
1295
1353
|
|
|
1296
1354
|
// src/rendering/finalizeRenderedNode.tsx
|
|
1297
|
-
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"]);
|
|
1298
1356
|
var RESPONSIVE_MEDIA_CLASS_NAME = "max-md:!w-full max-md:![flex-basis:100%!important] max-md:!h-auto";
|
|
1299
1357
|
var hasExplicitStudioSizing = (studioSizing) => Boolean(
|
|
1300
1358
|
studioSizing && (studioSizing.widthPct !== null || studioSizing.heightPct !== null || studioSizing.heightPx !== null)
|
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:
|
|
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-cover"
|
|
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:
|
|
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
|
}
|
|
@@ -221,15 +220,44 @@ var materializeBoundTable = ({
|
|
|
221
220
|
import React3 from "react";
|
|
222
221
|
|
|
223
222
|
// src/rendering/gridItemWrapperProps.ts
|
|
224
|
-
var
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
223
|
+
var GRID_ITEM_RESPONSIVE_STYLE = `
|
|
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 {
|
|
229
|
+
grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
@media (min-width: 768px) {
|
|
233
|
+
.arkcit-grid-item-responsive {
|
|
234
|
+
grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
|
|
228
235
|
}
|
|
229
|
-
|
|
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));
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
`;
|
|
242
|
+
var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobileColOffset = 0) => {
|
|
243
|
+
const style = {
|
|
244
|
+
"--arkcit-grid-col-base": String(mobileColSpan),
|
|
245
|
+
"--arkcit-grid-col-md": String(colSpan),
|
|
246
|
+
"--arkcit-grid-col-offset-base": String(mobileColOffset),
|
|
247
|
+
"--arkcit-grid-col-offset-md": String(colOffset)
|
|
248
|
+
};
|
|
249
|
+
return {
|
|
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(" "),
|
|
255
|
+
style
|
|
256
|
+
};
|
|
257
|
+
};
|
|
230
258
|
|
|
231
259
|
// src/materialization/materializeChildContent.tsx
|
|
232
|
-
import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
|
|
260
|
+
import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
233
261
|
var materializeChildContent = ({
|
|
234
262
|
descriptor,
|
|
235
263
|
renderSafeNode
|
|
@@ -239,14 +267,31 @@ var materializeChildContent = ({
|
|
|
239
267
|
}
|
|
240
268
|
const renderDescriptor = (childDescriptor) => {
|
|
241
269
|
if (childDescriptor.kind === "grid-item") {
|
|
242
|
-
return /* @__PURE__ */ jsx2(
|
|
270
|
+
return /* @__PURE__ */ jsx2(
|
|
271
|
+
"div",
|
|
272
|
+
__spreadProps(__spreadValues({}, getGridItemWrapperProps(
|
|
273
|
+
childDescriptor.colSpan,
|
|
274
|
+
childDescriptor.mobileColSpan,
|
|
275
|
+
childDescriptor.colOffset,
|
|
276
|
+
childDescriptor.mobileColOffset
|
|
277
|
+
)), {
|
|
278
|
+
children: renderSafeNode(childDescriptor.child)
|
|
279
|
+
}),
|
|
280
|
+
childDescriptor.child.id
|
|
281
|
+
);
|
|
243
282
|
}
|
|
244
283
|
return /* @__PURE__ */ jsx2(React3.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
|
|
245
284
|
};
|
|
246
285
|
if (descriptor.kind === "single") {
|
|
247
|
-
return
|
|
286
|
+
return /* @__PURE__ */ jsxs(Fragment2, { children: [
|
|
287
|
+
descriptor.child.kind === "grid-item" ? /* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
|
|
288
|
+
renderDescriptor(descriptor.child)
|
|
289
|
+
] });
|
|
248
290
|
}
|
|
249
|
-
return /* @__PURE__ */
|
|
291
|
+
return /* @__PURE__ */ jsxs(Fragment2, { children: [
|
|
292
|
+
descriptor.children.some((child) => child.kind === "grid-item") ? /* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
|
|
293
|
+
descriptor.children.map(renderDescriptor)
|
|
294
|
+
] });
|
|
250
295
|
};
|
|
251
296
|
|
|
252
297
|
// src/materialization/materializeCoverContent.tsx
|
package/dist/rendering.d.ts
CHANGED
|
@@ -35,11 +35,15 @@ type FinalizeRenderedNodeParams = {
|
|
|
35
35
|
};
|
|
36
36
|
declare const finalizeRenderedNode: ({ node, children, componentProps, registryComponent, runtime, isStudioRendererContext, studioSizing, plans: providedPlans, dependencies, }: FinalizeRenderedNodeParams) => React__default.ReactNode | null;
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
type GridItemWrapperStyle = React__default.CSSProperties & {
|
|
39
|
+
"--arkcit-grid-col-base": string;
|
|
40
|
+
"--arkcit-grid-col-md": string;
|
|
41
|
+
"--arkcit-grid-col-offset-base": string;
|
|
42
|
+
"--arkcit-grid-col-offset-md": string;
|
|
43
|
+
};
|
|
44
|
+
declare const getGridItemWrapperProps: (colSpan: number, mobileColSpan?: number, colOffset?: number, mobileColOffset?: number) => {
|
|
39
45
|
className: string;
|
|
40
|
-
style:
|
|
41
|
-
gridColumn: string;
|
|
42
|
-
};
|
|
46
|
+
style: GridItemWrapperStyle;
|
|
43
47
|
};
|
|
44
48
|
|
|
45
49
|
declare const buildNodeResetToken: (node: UINode) => string;
|
package/dist/rendering.js
CHANGED
|
@@ -174,7 +174,7 @@ 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
179
|
var hasExplicitStudioSizing = (studioSizing) => Boolean(
|
|
180
180
|
studioSizing && (studioSizing.widthPct !== null || studioSizing.heightPct !== null || studioSizing.heightPx !== null)
|
|
@@ -239,12 +239,41 @@ var finalizeRenderedNode = ({
|
|
|
239
239
|
};
|
|
240
240
|
|
|
241
241
|
// src/rendering/gridItemWrapperProps.ts
|
|
242
|
-
var
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
242
|
+
var GRID_ITEM_RESPONSIVE_STYLE = `
|
|
243
|
+
.arkcit-grid-item-responsive {
|
|
244
|
+
grid-column: span var(--arkcit-grid-col-base, 12);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.arkcit-grid-item-responsive.arkcit-grid-item-offset-base {
|
|
248
|
+
grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
@media (min-width: 768px) {
|
|
252
|
+
.arkcit-grid-item-responsive {
|
|
253
|
+
grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
|
|
246
254
|
}
|
|
247
|
-
|
|
255
|
+
|
|
256
|
+
.arkcit-grid-item-responsive.arkcit-grid-item-offset-md {
|
|
257
|
+
grid-column: calc(var(--arkcit-grid-col-offset-md, 0) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
`;
|
|
261
|
+
var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobileColOffset = 0) => {
|
|
262
|
+
const style = {
|
|
263
|
+
"--arkcit-grid-col-base": String(mobileColSpan),
|
|
264
|
+
"--arkcit-grid-col-md": String(colSpan),
|
|
265
|
+
"--arkcit-grid-col-offset-base": String(mobileColOffset),
|
|
266
|
+
"--arkcit-grid-col-offset-md": String(colOffset)
|
|
267
|
+
};
|
|
268
|
+
return {
|
|
269
|
+
className: [
|
|
270
|
+
"w-full min-w-0 arkcit-grid-item-responsive",
|
|
271
|
+
mobileColOffset > 0 ? "arkcit-grid-item-offset-base" : "",
|
|
272
|
+
colOffset > 0 ? "arkcit-grid-item-offset-md" : ""
|
|
273
|
+
].filter(Boolean).join(" "),
|
|
274
|
+
style
|
|
275
|
+
};
|
|
276
|
+
};
|
|
248
277
|
|
|
249
278
|
// src/rendering/nodeResetToken.ts
|
|
250
279
|
import { isValidElement } from "react";
|
|
@@ -283,7 +312,7 @@ import {
|
|
|
283
312
|
|
|
284
313
|
// src/materialization/materializeChildContent.tsx
|
|
285
314
|
import React3 from "react";
|
|
286
|
-
import { Fragment, jsx } from "react/jsx-runtime";
|
|
315
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
287
316
|
var materializeChildContent = ({
|
|
288
317
|
descriptor,
|
|
289
318
|
renderSafeNode
|
|
@@ -293,14 +322,31 @@ var materializeChildContent = ({
|
|
|
293
322
|
}
|
|
294
323
|
const renderDescriptor = (childDescriptor) => {
|
|
295
324
|
if (childDescriptor.kind === "grid-item") {
|
|
296
|
-
return /* @__PURE__ */ jsx(
|
|
325
|
+
return /* @__PURE__ */ jsx(
|
|
326
|
+
"div",
|
|
327
|
+
__spreadProps(__spreadValues({}, getGridItemWrapperProps(
|
|
328
|
+
childDescriptor.colSpan,
|
|
329
|
+
childDescriptor.mobileColSpan,
|
|
330
|
+
childDescriptor.colOffset,
|
|
331
|
+
childDescriptor.mobileColOffset
|
|
332
|
+
)), {
|
|
333
|
+
children: renderSafeNode(childDescriptor.child)
|
|
334
|
+
}),
|
|
335
|
+
childDescriptor.child.id
|
|
336
|
+
);
|
|
297
337
|
}
|
|
298
338
|
return /* @__PURE__ */ jsx(React3.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
|
|
299
339
|
};
|
|
300
340
|
if (descriptor.kind === "single") {
|
|
301
|
-
return
|
|
341
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
342
|
+
descriptor.child.kind === "grid-item" ? /* @__PURE__ */ jsx("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
|
|
343
|
+
renderDescriptor(descriptor.child)
|
|
344
|
+
] });
|
|
302
345
|
}
|
|
303
|
-
return /* @__PURE__ */
|
|
346
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
347
|
+
descriptor.children.some((child) => child.kind === "grid-item") ? /* @__PURE__ */ jsx("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
|
|
348
|
+
descriptor.children.map(renderDescriptor)
|
|
349
|
+
] });
|
|
304
350
|
};
|
|
305
351
|
|
|
306
352
|
// src/rendering/prepareRenderableChildren.tsx
|
|
@@ -318,10 +364,23 @@ var prepareRenderableChildren = ({
|
|
|
318
364
|
});
|
|
319
365
|
const children = resolvedDescriptors.map((descriptor) => {
|
|
320
366
|
if (descriptor.kind === "grid-item") {
|
|
321
|
-
return /* @__PURE__ */ jsx2(
|
|
367
|
+
return /* @__PURE__ */ jsx2(
|
|
368
|
+
"div",
|
|
369
|
+
__spreadProps(__spreadValues({}, getGridItemWrapperProps(
|
|
370
|
+
descriptor.colSpan,
|
|
371
|
+
descriptor.mobileColSpan,
|
|
372
|
+
descriptor.colOffset,
|
|
373
|
+
descriptor.mobileColOffset
|
|
374
|
+
)), {
|
|
375
|
+
children: renderSafeNode(descriptor.child)
|
|
376
|
+
}),
|
|
377
|
+
descriptor.child.id
|
|
378
|
+
);
|
|
322
379
|
}
|
|
323
380
|
return /* @__PURE__ */ jsx2(React4.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
|
|
324
381
|
});
|
|
382
|
+
const hasGridItems = resolvedDescriptors.some((descriptor) => descriptor.kind === "grid-item");
|
|
383
|
+
const wrappedChildren = hasGridItems ? [/* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }, "arkcit-grid-item-responsive-style"), ...children] : children;
|
|
325
384
|
const resolvedChildContentDescriptor = childContentDescriptor != null ? childContentDescriptor : resolveChildContentDescriptor({
|
|
326
385
|
childDescriptors: resolvedDescriptors
|
|
327
386
|
});
|
|
@@ -330,7 +389,7 @@ var prepareRenderableChildren = ({
|
|
|
330
389
|
renderSafeNode
|
|
331
390
|
});
|
|
332
391
|
return {
|
|
333
|
-
children,
|
|
392
|
+
children: wrappedChildren,
|
|
334
393
|
resolvedChildContent,
|
|
335
394
|
childDescriptors: resolvedDescriptors,
|
|
336
395
|
childContentDescriptor: resolvedChildContentDescriptor
|
package/dist/static-engine.js
CHANGED
|
@@ -46,16 +46,45 @@ import {
|
|
|
46
46
|
} from "@arkcit/engine-render-layer";
|
|
47
47
|
|
|
48
48
|
// src/rendering/gridItemWrapperProps.ts
|
|
49
|
-
var
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
var GRID_ITEM_RESPONSIVE_STYLE = `
|
|
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 {
|
|
55
|
+
grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@media (min-width: 768px) {
|
|
59
|
+
.arkcit-grid-item-responsive {
|
|
60
|
+
grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
|
|
53
61
|
}
|
|
54
|
-
|
|
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));
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
`;
|
|
68
|
+
var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobileColOffset = 0) => {
|
|
69
|
+
const style = {
|
|
70
|
+
"--arkcit-grid-col-base": String(mobileColSpan),
|
|
71
|
+
"--arkcit-grid-col-md": String(colSpan),
|
|
72
|
+
"--arkcit-grid-col-offset-base": String(mobileColOffset),
|
|
73
|
+
"--arkcit-grid-col-offset-md": String(colOffset)
|
|
74
|
+
};
|
|
75
|
+
return {
|
|
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(" "),
|
|
81
|
+
style
|
|
82
|
+
};
|
|
83
|
+
};
|
|
55
84
|
|
|
56
85
|
// src/materialization/materializeChildContent.tsx
|
|
57
86
|
import React from "react";
|
|
58
|
-
import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
|
|
87
|
+
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
59
88
|
var materializeChildContent = ({
|
|
60
89
|
descriptor,
|
|
61
90
|
renderSafeNode
|
|
@@ -65,14 +94,31 @@ var materializeChildContent = ({
|
|
|
65
94
|
}
|
|
66
95
|
const renderDescriptor = (childDescriptor) => {
|
|
67
96
|
if (childDescriptor.kind === "grid-item") {
|
|
68
|
-
return /* @__PURE__ */ jsx2(
|
|
97
|
+
return /* @__PURE__ */ jsx2(
|
|
98
|
+
"div",
|
|
99
|
+
__spreadProps(__spreadValues({}, getGridItemWrapperProps(
|
|
100
|
+
childDescriptor.colSpan,
|
|
101
|
+
childDescriptor.mobileColSpan,
|
|
102
|
+
childDescriptor.colOffset,
|
|
103
|
+
childDescriptor.mobileColOffset
|
|
104
|
+
)), {
|
|
105
|
+
children: renderSafeNode(childDescriptor.child)
|
|
106
|
+
}),
|
|
107
|
+
childDescriptor.child.id
|
|
108
|
+
);
|
|
69
109
|
}
|
|
70
110
|
return /* @__PURE__ */ jsx2(React.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
|
|
71
111
|
};
|
|
72
112
|
if (descriptor.kind === "single") {
|
|
73
|
-
return
|
|
113
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
114
|
+
descriptor.child.kind === "grid-item" ? /* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
|
|
115
|
+
renderDescriptor(descriptor.child)
|
|
116
|
+
] });
|
|
74
117
|
}
|
|
75
|
-
return /* @__PURE__ */
|
|
118
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
119
|
+
descriptor.children.some((child) => child.kind === "grid-item") ? /* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
|
|
120
|
+
descriptor.children.map(renderDescriptor)
|
|
121
|
+
] });
|
|
76
122
|
};
|
|
77
123
|
|
|
78
124
|
// src/rendering/prepareRenderableChildren.tsx
|
|
@@ -90,10 +136,23 @@ var prepareRenderableChildren = ({
|
|
|
90
136
|
});
|
|
91
137
|
const children = resolvedDescriptors.map((descriptor) => {
|
|
92
138
|
if (descriptor.kind === "grid-item") {
|
|
93
|
-
return /* @__PURE__ */ jsx3(
|
|
139
|
+
return /* @__PURE__ */ jsx3(
|
|
140
|
+
"div",
|
|
141
|
+
__spreadProps(__spreadValues({}, getGridItemWrapperProps(
|
|
142
|
+
descriptor.colSpan,
|
|
143
|
+
descriptor.mobileColSpan,
|
|
144
|
+
descriptor.colOffset,
|
|
145
|
+
descriptor.mobileColOffset
|
|
146
|
+
)), {
|
|
147
|
+
children: renderSafeNode(descriptor.child)
|
|
148
|
+
}),
|
|
149
|
+
descriptor.child.id
|
|
150
|
+
);
|
|
94
151
|
}
|
|
95
152
|
return /* @__PURE__ */ jsx3(React2.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
|
|
96
153
|
});
|
|
154
|
+
const hasGridItems = resolvedDescriptors.some((descriptor) => descriptor.kind === "grid-item");
|
|
155
|
+
const wrappedChildren = hasGridItems ? [/* @__PURE__ */ jsx3("style", { children: GRID_ITEM_RESPONSIVE_STYLE }, "arkcit-grid-item-responsive-style"), ...children] : children;
|
|
97
156
|
const resolvedChildContentDescriptor = childContentDescriptor != null ? childContentDescriptor : resolveChildContentDescriptor({
|
|
98
157
|
childDescriptors: resolvedDescriptors
|
|
99
158
|
});
|
|
@@ -102,7 +161,7 @@ var prepareRenderableChildren = ({
|
|
|
102
161
|
renderSafeNode
|
|
103
162
|
});
|
|
104
163
|
return {
|
|
105
|
-
children,
|
|
164
|
+
children: wrappedChildren,
|
|
106
165
|
resolvedChildContent,
|
|
107
166
|
childDescriptors: resolvedDescriptors,
|
|
108
167
|
childContentDescriptor: resolvedChildContentDescriptor
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arkcit/engine-react",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.6",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"description": "React-specific renderer package for the Arkcit engine platform.",
|
|
@@ -75,10 +75,10 @@
|
|
|
75
75
|
"test": "npm run test:smoke && npm run test:unit"
|
|
76
76
|
},
|
|
77
77
|
"dependencies": {
|
|
78
|
-
"@arkcit/engine-core": "^0.3.
|
|
79
|
-
"@arkcit/engine-render-layer": "^0.3.
|
|
78
|
+
"@arkcit/engine-core": "^0.3.2",
|
|
79
|
+
"@arkcit/engine-render-layer": "^0.3.2",
|
|
80
80
|
"@arkcit/engine-runtime": "^0.3.1",
|
|
81
|
-
"@arkcit/engine-schema": "^0.3.
|
|
81
|
+
"@arkcit/engine-schema": "^0.3.2"
|
|
82
82
|
},
|
|
83
83
|
"peerDependencies": {
|
|
84
84
|
"react": "^19.1.0",
|