@measured/puck 0.16.1-canary.8fcf0d8 → 0.16.1-canary.ed282b9
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/index.css +14 -8
- package/dist/index.js +134 -131
- package/dist/index.mjs +115 -112
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -243,7 +243,7 @@ var get_class_name_factory_default = getClassNameFactory;
|
|
|
243
243
|
|
|
244
244
|
// css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css#css-module
|
|
245
245
|
init_react_import();
|
|
246
|
-
var styles_module_default = { "ActionBar": "
|
|
246
|
+
var styles_module_default = { "ActionBar": "_ActionBar_1xlbj_1", "ActionBar-actionsLabel": "_ActionBar-actionsLabel_1xlbj_16", "ActionBar-group": "_ActionBar-group_1xlbj_29", "ActionBar-action": "_ActionBar-action_1xlbj_16" };
|
|
247
247
|
|
|
248
248
|
// components/ActionBar/index.tsx
|
|
249
249
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -1447,6 +1447,9 @@ var ArrayField = ({
|
|
|
1447
1447
|
e.stopPropagation();
|
|
1448
1448
|
setHovering(false);
|
|
1449
1449
|
},
|
|
1450
|
+
onClick: (e) => {
|
|
1451
|
+
e.preventDefault();
|
|
1452
|
+
},
|
|
1450
1453
|
children: [
|
|
1451
1454
|
localState.arrayState.items.map((item, i) => {
|
|
1452
1455
|
const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
|
|
@@ -2488,13 +2491,8 @@ var isIos = () => [
|
|
|
2488
2491
|
].includes(navigator.platform) || // iPad on iOS 13 detection
|
|
2489
2492
|
navigator.userAgent.includes("Mac") && "ontouchend" in document;
|
|
2490
2493
|
|
|
2491
|
-
// components/DefaultOverride/index.tsx
|
|
2492
|
-
init_react_import();
|
|
2493
|
-
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2494
|
-
var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children });
|
|
2495
|
-
|
|
2496
2494
|
// components/DraggableComponent/index.tsx
|
|
2497
|
-
var
|
|
2495
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2498
2496
|
var getClassName17 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
|
|
2499
2497
|
var space = 8;
|
|
2500
2498
|
var actionsOverlayTop = space * 6.5;
|
|
@@ -2503,7 +2501,7 @@ var actionsRight = space;
|
|
|
2503
2501
|
var DefaultActionBar = ({
|
|
2504
2502
|
label,
|
|
2505
2503
|
children
|
|
2506
|
-
}) => /* @__PURE__ */ (0,
|
|
2504
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar, { label, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Group, { children }) });
|
|
2507
2505
|
var DraggableComponent = ({
|
|
2508
2506
|
children,
|
|
2509
2507
|
id,
|
|
@@ -2543,14 +2541,14 @@ var DraggableComponent = ({
|
|
|
2543
2541
|
const permissions = getPermissions({
|
|
2544
2542
|
item: selectedItem
|
|
2545
2543
|
});
|
|
2546
|
-
return /* @__PURE__ */ (0,
|
|
2544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2547
2545
|
El,
|
|
2548
2546
|
{
|
|
2549
2547
|
draggableId: id,
|
|
2550
2548
|
index,
|
|
2551
2549
|
isDragDisabled,
|
|
2552
2550
|
disableSecondaryAnimation,
|
|
2553
|
-
children: (provided, snapshot) => /* @__PURE__ */ (0,
|
|
2551
|
+
children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2554
2552
|
"div",
|
|
2555
2553
|
__spreadProps(__spreadValues(__spreadValues({
|
|
2556
2554
|
ref: provided.innerRef
|
|
@@ -2573,15 +2571,15 @@ var DraggableComponent = ({
|
|
|
2573
2571
|
onClick,
|
|
2574
2572
|
children: [
|
|
2575
2573
|
debug,
|
|
2576
|
-
isLoading && /* @__PURE__ */ (0,
|
|
2577
|
-
isSelected && /* @__PURE__ */ (0,
|
|
2574
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader, {}) }),
|
|
2575
|
+
isSelected && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2578
2576
|
"div",
|
|
2579
2577
|
{
|
|
2580
2578
|
className: getClassName17("actionsOverlay"),
|
|
2581
2579
|
style: {
|
|
2582
2580
|
top: actionsOverlayTop / zoomConfig.zoom
|
|
2583
2581
|
},
|
|
2584
|
-
children: /* @__PURE__ */ (0,
|
|
2582
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2585
2583
|
"div",
|
|
2586
2584
|
{
|
|
2587
2585
|
className: getClassName17("actions"),
|
|
@@ -2590,16 +2588,16 @@ var DraggableComponent = ({
|
|
|
2590
2588
|
top: actionsTop / zoomConfig.zoom,
|
|
2591
2589
|
right: actionsRight / zoomConfig.zoom
|
|
2592
2590
|
},
|
|
2593
|
-
children: /* @__PURE__ */ (0,
|
|
2594
|
-
permissions.duplicate && /* @__PURE__ */ (0,
|
|
2595
|
-
permissions.delete && /* @__PURE__ */ (0,
|
|
2591
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CustomActionBar, { label, children: [
|
|
2592
|
+
permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Copy, { size: 16 }) }),
|
|
2593
|
+
permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Trash, { size: 16 }) })
|
|
2596
2594
|
] })
|
|
2597
2595
|
}
|
|
2598
2596
|
)
|
|
2599
2597
|
}
|
|
2600
2598
|
),
|
|
2601
|
-
/* @__PURE__ */ (0,
|
|
2602
|
-
/* @__PURE__ */ (0,
|
|
2599
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName17("overlay") }),
|
|
2600
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: getClassName17("contents"), children })
|
|
2603
2601
|
]
|
|
2604
2602
|
})
|
|
2605
2603
|
)
|
|
@@ -2630,7 +2628,7 @@ var getZoneId = (zoneCompound) => {
|
|
|
2630
2628
|
};
|
|
2631
2629
|
|
|
2632
2630
|
// components/DropZone/context.tsx
|
|
2633
|
-
var
|
|
2631
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2634
2632
|
var dropZoneContext = (0, import_react17.createContext)(null);
|
|
2635
2633
|
var DropZoneProvider = ({
|
|
2636
2634
|
children,
|
|
@@ -2708,7 +2706,7 @@ var DropZoneProvider = ({
|
|
|
2708
2706
|
[value, setPathData]
|
|
2709
2707
|
);
|
|
2710
2708
|
const [zoneWillDrag, setZoneWillDrag] = (0, import_react17.useState)("");
|
|
2711
|
-
return /* @__PURE__ */ (0,
|
|
2709
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: value && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2712
2710
|
dropZoneContext.Provider,
|
|
2713
2711
|
{
|
|
2714
2712
|
value: __spreadValues({
|
|
@@ -2734,7 +2732,7 @@ var DropZoneProvider = ({
|
|
|
2734
2732
|
};
|
|
2735
2733
|
|
|
2736
2734
|
// components/DropZone/index.tsx
|
|
2737
|
-
var
|
|
2735
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2738
2736
|
var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default12);
|
|
2739
2737
|
function DropZoneEdit({ zone, allow, disallow, style }) {
|
|
2740
2738
|
var _a;
|
|
@@ -2789,7 +2787,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
|
|
|
2789
2787
|
const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
|
|
2790
2788
|
const draggingNewComponent = draggedSourceId == null ? void 0 : draggedSourceId.startsWith("component-list");
|
|
2791
2789
|
if (!(ctx == null ? void 0 : ctx.config) || !ctx.setHoveringArea || !ctx.setHoveringZone || !ctx.setHoveringComponent || !ctx.setItemSelector || !ctx.registerPath || !ctx.dispatch) {
|
|
2792
|
-
return /* @__PURE__ */ (0,
|
|
2790
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: "DropZone requires context to work." });
|
|
2793
2791
|
}
|
|
2794
2792
|
const {
|
|
2795
2793
|
hoveringArea = "root",
|
|
@@ -2830,7 +2828,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
|
|
|
2830
2828
|
}
|
|
2831
2829
|
const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
|
|
2832
2830
|
const isAreaSelected = selectedItem && zoneArea === selectedItem.props.id;
|
|
2833
|
-
return /* @__PURE__ */ (0,
|
|
2831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2834
2832
|
"div",
|
|
2835
2833
|
{
|
|
2836
2834
|
className: getClassName18({
|
|
@@ -2847,14 +2845,14 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
|
|
|
2847
2845
|
onMouseUp: () => {
|
|
2848
2846
|
setZoneWillDrag("");
|
|
2849
2847
|
},
|
|
2850
|
-
children: /* @__PURE__ */ (0,
|
|
2848
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2851
2849
|
Droppable,
|
|
2852
2850
|
{
|
|
2853
2851
|
droppableId: zoneCompound,
|
|
2854
2852
|
direction: "vertical",
|
|
2855
2853
|
isDropDisabled: !isEnabled,
|
|
2856
2854
|
children: (provided, snapshot) => {
|
|
2857
|
-
return /* @__PURE__ */ (0,
|
|
2855
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2858
2856
|
"div",
|
|
2859
2857
|
__spreadProps(__spreadValues({}, (provided || { droppableProps: {} }).droppableProps), {
|
|
2860
2858
|
className: getClassName18("content"),
|
|
@@ -2884,7 +2882,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
|
|
|
2884
2882
|
"draggable-"
|
|
2885
2883
|
)[1] === componentId;
|
|
2886
2884
|
const containsZone = areasWithZones ? areasWithZones[componentId] : false;
|
|
2887
|
-
const Render2 = config.components[item.type] ? config.components[item.type].render : () => /* @__PURE__ */ (0,
|
|
2885
|
+
const Render2 = config.components[item.type] ? config.components[item.type].render : () => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
|
|
2888
2886
|
"No configuration for ",
|
|
2889
2887
|
item.type
|
|
2890
2888
|
] });
|
|
@@ -2896,19 +2894,19 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
|
|
|
2896
2894
|
appContext2.state.data
|
|
2897
2895
|
)
|
|
2898
2896
|
}).drag;
|
|
2899
|
-
return /* @__PURE__ */ (0,
|
|
2897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2900
2898
|
"div",
|
|
2901
2899
|
{
|
|
2902
2900
|
className: getClassName18("item"),
|
|
2903
2901
|
style: { zIndex: isDragging ? 1 : void 0 },
|
|
2904
2902
|
children: [
|
|
2905
|
-
/* @__PURE__ */ (0,
|
|
2903
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2906
2904
|
DropZoneProvider,
|
|
2907
2905
|
{
|
|
2908
2906
|
value: __spreadProps(__spreadValues({}, ctx), {
|
|
2909
2907
|
areaId: componentId
|
|
2910
2908
|
}),
|
|
2911
|
-
children: /* @__PURE__ */ (0,
|
|
2909
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2912
2910
|
DraggableComponent,
|
|
2913
2911
|
{
|
|
2914
2912
|
label,
|
|
@@ -2976,12 +2974,12 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
|
|
|
2976
2974
|
style: {
|
|
2977
2975
|
pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
|
|
2978
2976
|
},
|
|
2979
|
-
children: /* @__PURE__ */ (0,
|
|
2977
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: getClassName18("renderWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Render2, __spreadValues({}, defaultedProps)) })
|
|
2980
2978
|
}
|
|
2981
2979
|
)
|
|
2982
2980
|
}
|
|
2983
2981
|
),
|
|
2984
|
-
userIsDragging && /* @__PURE__ */ (0,
|
|
2982
|
+
userIsDragging && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2985
2983
|
"div",
|
|
2986
2984
|
{
|
|
2987
2985
|
className: getClassName18("hitbox"),
|
|
@@ -2998,7 +2996,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
|
|
|
2998
2996
|
);
|
|
2999
2997
|
}),
|
|
3000
2998
|
provided == null ? void 0 : provided.placeholder,
|
|
3001
|
-
(snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ (0,
|
|
2999
|
+
(snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3002
3000
|
"div",
|
|
3003
3001
|
{
|
|
3004
3002
|
"data-puck-placeholder": true,
|
|
@@ -3030,14 +3028,14 @@ function DropZoneRender({ zone }) {
|
|
|
3030
3028
|
zoneCompound = `${areaId}:${zone}`;
|
|
3031
3029
|
content = setupZone(data, zoneCompound).zones[zoneCompound];
|
|
3032
3030
|
}
|
|
3033
|
-
return /* @__PURE__ */ (0,
|
|
3031
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: content.map((item) => {
|
|
3034
3032
|
const Component = config.components[item.type];
|
|
3035
3033
|
if (Component) {
|
|
3036
|
-
return /* @__PURE__ */ (0,
|
|
3034
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3037
3035
|
DropZoneProvider,
|
|
3038
3036
|
{
|
|
3039
3037
|
value: { data, config, areaId: item.props.id },
|
|
3040
|
-
children: /* @__PURE__ */ (0,
|
|
3038
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3041
3039
|
Component.render,
|
|
3042
3040
|
__spreadProps(__spreadValues({}, item.props), {
|
|
3043
3041
|
puck: { renderDropZone: DropZone }
|
|
@@ -3053,9 +3051,9 @@ function DropZoneRender({ zone }) {
|
|
|
3053
3051
|
function DropZone(props) {
|
|
3054
3052
|
const ctx = (0, import_react18.useContext)(dropZoneContext);
|
|
3055
3053
|
if ((ctx == null ? void 0 : ctx.mode) === "edit") {
|
|
3056
|
-
return /* @__PURE__ */ (0,
|
|
3054
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZoneEdit, __spreadValues({}, props));
|
|
3057
3055
|
}
|
|
3058
|
-
return /* @__PURE__ */ (0,
|
|
3056
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZoneRender, __spreadValues({}, props));
|
|
3059
3057
|
}
|
|
3060
3058
|
|
|
3061
3059
|
// components/Puck/index.tsx
|
|
@@ -3197,7 +3195,7 @@ var useBreadcrumbs = (renderCount) => {
|
|
|
3197
3195
|
};
|
|
3198
3196
|
|
|
3199
3197
|
// components/SidebarSection/index.tsx
|
|
3200
|
-
var
|
|
3198
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
3201
3199
|
var getClassName19 = get_class_name_factory_default("SidebarSection", styles_module_default13);
|
|
3202
3200
|
var SidebarSection = ({
|
|
3203
3201
|
children,
|
|
@@ -3210,15 +3208,15 @@ var SidebarSection = ({
|
|
|
3210
3208
|
}) => {
|
|
3211
3209
|
const { setUi } = useAppContext();
|
|
3212
3210
|
const breadcrumbs = useBreadcrumbs(1);
|
|
3213
|
-
return /* @__PURE__ */ (0,
|
|
3211
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
3214
3212
|
"div",
|
|
3215
3213
|
{
|
|
3216
3214
|
className: getClassName19({ noBorderTop, noPadding }),
|
|
3217
3215
|
style: { background },
|
|
3218
3216
|
children: [
|
|
3219
|
-
/* @__PURE__ */ (0,
|
|
3220
|
-
showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0,
|
|
3221
|
-
/* @__PURE__ */ (0,
|
|
3217
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("title"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19("breadcrumbs"), children: [
|
|
3218
|
+
showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19("breadcrumb"), children: [
|
|
3219
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3222
3220
|
"button",
|
|
3223
3221
|
{
|
|
3224
3222
|
type: "button",
|
|
@@ -3227,12 +3225,12 @@ var SidebarSection = ({
|
|
|
3227
3225
|
children: breadcrumb.label
|
|
3228
3226
|
}
|
|
3229
3227
|
),
|
|
3230
|
-
/* @__PURE__ */ (0,
|
|
3228
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChevronRight, { size: 16 })
|
|
3231
3229
|
] }, i)) : null,
|
|
3232
|
-
/* @__PURE__ */ (0,
|
|
3230
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, { rank: "2", size: "xs", children: title }) })
|
|
3233
3231
|
] }) }),
|
|
3234
|
-
/* @__PURE__ */ (0,
|
|
3235
|
-
isLoading && /* @__PURE__ */ (0,
|
|
3232
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("content"), children }),
|
|
3233
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Loader, { size: 32 }) })
|
|
3236
3234
|
]
|
|
3237
3235
|
}
|
|
3238
3236
|
);
|
|
@@ -3613,7 +3611,7 @@ init_react_import();
|
|
|
3613
3611
|
var styles_module_default14 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
|
|
3614
3612
|
|
|
3615
3613
|
// components/MenuBar/index.tsx
|
|
3616
|
-
var
|
|
3614
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
3617
3615
|
var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
|
|
3618
3616
|
function MenuBar({
|
|
3619
3617
|
appState,
|
|
@@ -3627,7 +3625,7 @@ function MenuBar({
|
|
|
3627
3625
|
history: { back, forward, historyStore }
|
|
3628
3626
|
} = useAppContext();
|
|
3629
3627
|
const { hasFuture = false, hasPast = false } = historyStore || {};
|
|
3630
|
-
return /* @__PURE__ */ (0,
|
|
3628
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3631
3629
|
"div",
|
|
3632
3630
|
{
|
|
3633
3631
|
className: getClassName20({ menuOpen }),
|
|
@@ -3641,12 +3639,12 @@ function MenuBar({
|
|
|
3641
3639
|
setMenuOpen(false);
|
|
3642
3640
|
}
|
|
3643
3641
|
},
|
|
3644
|
-
children: /* @__PURE__ */ (0,
|
|
3645
|
-
/* @__PURE__ */ (0,
|
|
3646
|
-
/* @__PURE__ */ (0,
|
|
3647
|
-
/* @__PURE__ */ (0,
|
|
3642
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: getClassName20("inner"), children: [
|
|
3643
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: getClassName20("history"), children: [
|
|
3644
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Undo2, { size: 21 }) }),
|
|
3645
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Redo2, { size: 21 }) })
|
|
3648
3646
|
] }),
|
|
3649
|
-
/* @__PURE__ */ (0,
|
|
3647
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: renderHeaderActions && renderHeaderActions({
|
|
3650
3648
|
state: appState,
|
|
3651
3649
|
dispatch
|
|
3652
3650
|
}) })
|
|
@@ -3668,7 +3666,7 @@ var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields
|
|
|
3668
3666
|
|
|
3669
3667
|
// components/Puck/components/Fields/index.tsx
|
|
3670
3668
|
var import_react21 = require("react");
|
|
3671
|
-
var
|
|
3669
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
3672
3670
|
var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
|
|
3673
3671
|
var defaultPageFields = {
|
|
3674
3672
|
title: { type: "text" }
|
|
@@ -3676,7 +3674,7 @@ var defaultPageFields = {
|
|
|
3676
3674
|
var DefaultFields = ({
|
|
3677
3675
|
children
|
|
3678
3676
|
}) => {
|
|
3679
|
-
return /* @__PURE__ */ (0,
|
|
3677
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children });
|
|
3680
3678
|
};
|
|
3681
3679
|
var useResolvedFields = () => {
|
|
3682
3680
|
var _a;
|
|
@@ -3755,7 +3753,7 @@ var Fields = () => {
|
|
|
3755
3753
|
const isLoading = fieldsResolving || componentResolving;
|
|
3756
3754
|
const rootProps = data.root.props || data.root;
|
|
3757
3755
|
const Wrapper = (0, import_react21.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
|
|
3758
|
-
return /* @__PURE__ */ (0,
|
|
3756
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
3759
3757
|
"form",
|
|
3760
3758
|
{
|
|
3761
3759
|
className: getClassName21(),
|
|
@@ -3763,7 +3761,7 @@ var Fields = () => {
|
|
|
3763
3761
|
e.preventDefault();
|
|
3764
3762
|
},
|
|
3765
3763
|
children: [
|
|
3766
|
-
/* @__PURE__ */ (0,
|
|
3764
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
|
|
3767
3765
|
const field = fields[fieldName];
|
|
3768
3766
|
if (!(field == null ? void 0 : field.type)) return null;
|
|
3769
3767
|
const onChange = (value, updatedUi) => {
|
|
@@ -3833,7 +3831,7 @@ var Fields = () => {
|
|
|
3833
3831
|
const { edit } = getPermissions({
|
|
3834
3832
|
item: selectedItem
|
|
3835
3833
|
});
|
|
3836
|
-
return /* @__PURE__ */ (0,
|
|
3834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3837
3835
|
AutoFieldPrivate,
|
|
3838
3836
|
{
|
|
3839
3837
|
field,
|
|
@@ -3850,7 +3848,7 @@ var Fields = () => {
|
|
|
3850
3848
|
const { edit } = getPermissions({
|
|
3851
3849
|
root: true
|
|
3852
3850
|
});
|
|
3853
|
-
return /* @__PURE__ */ (0,
|
|
3851
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3854
3852
|
AutoFieldPrivate,
|
|
3855
3853
|
{
|
|
3856
3854
|
field,
|
|
@@ -3864,7 +3862,7 @@ var Fields = () => {
|
|
|
3864
3862
|
);
|
|
3865
3863
|
}
|
|
3866
3864
|
}) }),
|
|
3867
|
-
isLoading && /* @__PURE__ */ (0,
|
|
3865
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Loader, { size: 16 }) }) })
|
|
3868
3866
|
]
|
|
3869
3867
|
}
|
|
3870
3868
|
);
|
|
@@ -3885,7 +3883,7 @@ init_react_import();
|
|
|
3885
3883
|
var styles_module_default17 = { "ComponentList": "_ComponentList_odh9d_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_odh9d_5", "ComponentList-content": "_ComponentList-content_odh9d_9", "ComponentList-title": "_ComponentList-title_odh9d_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_odh9d_53" };
|
|
3886
3884
|
|
|
3887
3885
|
// components/ComponentList/index.tsx
|
|
3888
|
-
var
|
|
3886
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
3889
3887
|
var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
|
|
3890
3888
|
var ComponentListItem = ({
|
|
3891
3889
|
name,
|
|
@@ -3896,7 +3894,7 @@ var ComponentListItem = ({
|
|
|
3896
3894
|
const canInsert = getPermissions({
|
|
3897
3895
|
type: name
|
|
3898
3896
|
}).insert;
|
|
3899
|
-
return /* @__PURE__ */ (0,
|
|
3897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3900
3898
|
Drawer.Item,
|
|
3901
3899
|
{
|
|
3902
3900
|
label,
|
|
@@ -3914,8 +3912,8 @@ var ComponentList = ({
|
|
|
3914
3912
|
}) => {
|
|
3915
3913
|
const { config, state, setUi } = useAppContext();
|
|
3916
3914
|
const { expanded = true } = state.ui.componentList[id] || {};
|
|
3917
|
-
return /* @__PURE__ */ (0,
|
|
3918
|
-
title && /* @__PURE__ */ (0,
|
|
3915
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: getClassName22({ isExpanded: expanded }), children: [
|
|
3916
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
3919
3917
|
"button",
|
|
3920
3918
|
{
|
|
3921
3919
|
type: "button",
|
|
@@ -3929,14 +3927,14 @@ var ComponentList = ({
|
|
|
3929
3927
|
}),
|
|
3930
3928
|
title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
|
|
3931
3929
|
children: [
|
|
3932
|
-
/* @__PURE__ */ (0,
|
|
3933
|
-
/* @__PURE__ */ (0,
|
|
3930
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: title }),
|
|
3931
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronDown, { size: 12 }) })
|
|
3934
3932
|
]
|
|
3935
3933
|
}
|
|
3936
3934
|
),
|
|
3937
|
-
/* @__PURE__ */ (0,
|
|
3935
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: getClassName22("content"), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Drawer, { droppableId: title, children: children || Object.keys(config.components).map((componentKey, i) => {
|
|
3938
3936
|
var _a;
|
|
3939
|
-
return /* @__PURE__ */ (0,
|
|
3937
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
3940
3938
|
ComponentListItem,
|
|
3941
3939
|
{
|
|
3942
3940
|
label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
|
|
@@ -3951,7 +3949,7 @@ var ComponentList = ({
|
|
|
3951
3949
|
ComponentList.Item = ComponentListItem;
|
|
3952
3950
|
|
|
3953
3951
|
// lib/use-component-list.tsx
|
|
3954
|
-
var
|
|
3952
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
3955
3953
|
var useComponentList = (config, ui) => {
|
|
3956
3954
|
const [componentList, setComponentList] = (0, import_react22.useState)();
|
|
3957
3955
|
(0, import_react22.useEffect)(() => {
|
|
@@ -3964,7 +3962,7 @@ var useComponentList = (config, ui) => {
|
|
|
3964
3962
|
if (category.visible === false || !category.components) {
|
|
3965
3963
|
return null;
|
|
3966
3964
|
}
|
|
3967
|
-
return /* @__PURE__ */ (0,
|
|
3965
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
3968
3966
|
ComponentList,
|
|
3969
3967
|
{
|
|
3970
3968
|
id: categoryKey,
|
|
@@ -3973,7 +3971,7 @@ var useComponentList = (config, ui) => {
|
|
|
3973
3971
|
var _a2;
|
|
3974
3972
|
matchedComponents.push(componentName);
|
|
3975
3973
|
const componentConf = config.components[componentName] || {};
|
|
3976
|
-
return /* @__PURE__ */ (0,
|
|
3974
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
3977
3975
|
ComponentList.Item,
|
|
3978
3976
|
{
|
|
3979
3977
|
label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
|
|
@@ -3993,7 +3991,7 @@ var useComponentList = (config, ui) => {
|
|
|
3993
3991
|
);
|
|
3994
3992
|
if (remainingComponents.length > 0 && !((_a = ui.componentList.other) == null ? void 0 : _a.components) && ((_b = ui.componentList.other) == null ? void 0 : _b.visible) !== false) {
|
|
3995
3993
|
_componentList.push(
|
|
3996
|
-
/* @__PURE__ */ (0,
|
|
3994
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
3997
3995
|
ComponentList,
|
|
3998
3996
|
{
|
|
3999
3997
|
id: "other",
|
|
@@ -4001,7 +3999,7 @@ var useComponentList = (config, ui) => {
|
|
|
4001
3999
|
children: remainingComponents.map((componentName, i) => {
|
|
4002
4000
|
var _a2;
|
|
4003
4001
|
const componentConf = config.components[componentName] || {};
|
|
4004
|
-
return /* @__PURE__ */ (0,
|
|
4002
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
4005
4003
|
ComponentList.Item,
|
|
4006
4004
|
{
|
|
4007
4005
|
name: componentName,
|
|
@@ -4024,12 +4022,12 @@ var useComponentList = (config, ui) => {
|
|
|
4024
4022
|
|
|
4025
4023
|
// components/Puck/components/Components/index.tsx
|
|
4026
4024
|
var import_react23 = require("react");
|
|
4027
|
-
var
|
|
4025
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
4028
4026
|
var Components = () => {
|
|
4029
4027
|
const { config, state, overrides } = useAppContext();
|
|
4030
4028
|
const componentList = useComponentList(config, state.ui);
|
|
4031
4029
|
const Wrapper = (0, import_react23.useMemo)(() => overrides.components || "div", [overrides]);
|
|
4032
|
-
return /* @__PURE__ */ (0,
|
|
4030
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ComponentList, { id: "all" }) });
|
|
4033
4031
|
};
|
|
4034
4032
|
|
|
4035
4033
|
// components/Puck/components/Preview/index.tsx
|
|
@@ -4041,7 +4039,7 @@ init_react_import();
|
|
|
4041
4039
|
var import_react24 = require("react");
|
|
4042
4040
|
var import_object_hash = __toESM(require("object-hash"));
|
|
4043
4041
|
var import_react_dom2 = require("react-dom");
|
|
4044
|
-
var
|
|
4042
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
4045
4043
|
var styleSelector = 'style, link[rel="stylesheet"]';
|
|
4046
4044
|
var collectStyles = (doc) => {
|
|
4047
4045
|
const collected = [];
|
|
@@ -4241,7 +4239,7 @@ var CopyHostStyles = ({
|
|
|
4241
4239
|
observer.disconnect();
|
|
4242
4240
|
};
|
|
4243
4241
|
}, []);
|
|
4244
|
-
return /* @__PURE__ */ (0,
|
|
4242
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children });
|
|
4245
4243
|
};
|
|
4246
4244
|
var autoFrameContext = (0, import_react24.createContext)({});
|
|
4247
4245
|
var useFrame = () => (0, import_react24.useContext)(autoFrameContext);
|
|
@@ -4273,7 +4271,7 @@ function AutoFrame(_a) {
|
|
|
4273
4271
|
setMountTarget((_a2 = ref.current.contentDocument) == null ? void 0 : _a2.getElementById("frame-root"));
|
|
4274
4272
|
}
|
|
4275
4273
|
}, [ref, loaded]);
|
|
4276
|
-
return /* @__PURE__ */ (0,
|
|
4274
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4277
4275
|
"iframe",
|
|
4278
4276
|
__spreadProps(__spreadValues({}, props), {
|
|
4279
4277
|
className,
|
|
@@ -4283,7 +4281,7 @@ function AutoFrame(_a) {
|
|
|
4283
4281
|
onLoad: () => {
|
|
4284
4282
|
setLoaded(true);
|
|
4285
4283
|
},
|
|
4286
|
-
children: /* @__PURE__ */ (0,
|
|
4284
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CopyHostStyles, { debug, onStylesLoaded, children: (0, import_react_dom2.createPortal)(children, mountTarget) }) })
|
|
4287
4285
|
})
|
|
4288
4286
|
);
|
|
4289
4287
|
}
|
|
@@ -4295,7 +4293,7 @@ init_react_import();
|
|
|
4295
4293
|
var styles_module_default18 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
|
|
4296
4294
|
|
|
4297
4295
|
// components/Puck/components/Preview/index.tsx
|
|
4298
|
-
var
|
|
4296
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
4299
4297
|
var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
|
|
4300
4298
|
var Preview = ({ id = "puck-preview" }) => {
|
|
4301
4299
|
const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
|
|
@@ -4304,13 +4302,13 @@ var Preview = ({ id = "puck-preview" }) => {
|
|
|
4304
4302
|
var _a, _b;
|
|
4305
4303
|
return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
|
|
4306
4304
|
id: "puck-root"
|
|
4307
|
-
}, pageProps)) : /* @__PURE__ */ (0,
|
|
4305
|
+
}, pageProps)) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: pageProps.children });
|
|
4308
4306
|
},
|
|
4309
4307
|
[config.root]
|
|
4310
4308
|
);
|
|
4311
4309
|
const Frame = (0, import_react25.useMemo)(() => overrides.iframe, [overrides]);
|
|
4312
4310
|
const rootProps = state.data.root.props || state.data.root;
|
|
4313
|
-
return /* @__PURE__ */ (0,
|
|
4311
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4314
4312
|
"div",
|
|
4315
4313
|
{
|
|
4316
4314
|
className: getClassName23(),
|
|
@@ -4318,7 +4316,7 @@ var Preview = ({ id = "puck-preview" }) => {
|
|
|
4318
4316
|
onClick: () => {
|
|
4319
4317
|
dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
|
|
4320
4318
|
},
|
|
4321
|
-
children: iframe.enabled ? /* @__PURE__ */ (0,
|
|
4319
|
+
children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4322
4320
|
AutoFrame_default,
|
|
4323
4321
|
{
|
|
4324
4322
|
id: "preview-frame",
|
|
@@ -4327,27 +4325,27 @@ var Preview = ({ id = "puck-preview" }) => {
|
|
|
4327
4325
|
onStylesLoaded: () => {
|
|
4328
4326
|
setStatus("READY");
|
|
4329
4327
|
},
|
|
4330
|
-
children: /* @__PURE__ */ (0,
|
|
4331
|
-
const inner = /* @__PURE__ */ (0,
|
|
4328
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
|
|
4329
|
+
const inner = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4332
4330
|
Page,
|
|
4333
4331
|
__spreadProps(__spreadValues({}, rootProps), {
|
|
4334
4332
|
puck: { renderDropZone: DropZone, isEditing: true },
|
|
4335
4333
|
editMode: true,
|
|
4336
|
-
children: /* @__PURE__ */ (0,
|
|
4334
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropZone, { zone: rootDroppableId })
|
|
4337
4335
|
})
|
|
4338
4336
|
);
|
|
4339
4337
|
if (Frame) {
|
|
4340
|
-
return /* @__PURE__ */ (0,
|
|
4338
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Frame, { document: document2, children: inner });
|
|
4341
4339
|
}
|
|
4342
4340
|
return inner;
|
|
4343
4341
|
} })
|
|
4344
4342
|
}
|
|
4345
|
-
) : /* @__PURE__ */ (0,
|
|
4343
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4346
4344
|
Page,
|
|
4347
4345
|
__spreadProps(__spreadValues({}, rootProps), {
|
|
4348
4346
|
puck: { renderDropZone: DropZone, isEditing: true },
|
|
4349
4347
|
editMode: true,
|
|
4350
|
-
children: /* @__PURE__ */ (0,
|
|
4348
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropZone, { zone: rootDroppableId })
|
|
4351
4349
|
})
|
|
4352
4350
|
) })
|
|
4353
4351
|
}
|
|
@@ -4411,7 +4409,7 @@ var isChildOfZone = (item, maybeChild, ctx) => {
|
|
|
4411
4409
|
};
|
|
4412
4410
|
|
|
4413
4411
|
// components/LayerTree/index.tsx
|
|
4414
|
-
var
|
|
4412
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
4415
4413
|
var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default19);
|
|
4416
4414
|
var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default19);
|
|
4417
4415
|
var LayerTree = ({
|
|
@@ -4425,14 +4423,14 @@ var LayerTree = ({
|
|
|
4425
4423
|
}) => {
|
|
4426
4424
|
const zones = data.zones || {};
|
|
4427
4425
|
const ctx = (0, import_react26.useContext)(dropZoneContext);
|
|
4428
|
-
return /* @__PURE__ */ (0,
|
|
4429
|
-
label && /* @__PURE__ */ (0,
|
|
4430
|
-
/* @__PURE__ */ (0,
|
|
4426
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
|
|
4427
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
|
|
4428
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Layers, { size: "16" }) }),
|
|
4431
4429
|
" ",
|
|
4432
4430
|
label
|
|
4433
4431
|
] }),
|
|
4434
|
-
/* @__PURE__ */ (0,
|
|
4435
|
-
zoneContent.length === 0 && /* @__PURE__ */ (0,
|
|
4432
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("ul", { className: getClassName24(), children: [
|
|
4433
|
+
zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("helper"), children: "No items" }),
|
|
4436
4434
|
zoneContent.map((item, i) => {
|
|
4437
4435
|
var _a;
|
|
4438
4436
|
const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
|
|
@@ -4450,7 +4448,7 @@ var LayerTree = ({
|
|
|
4450
4448
|
const childIsSelected = isChildOfZone(item, selectedItem, ctx);
|
|
4451
4449
|
const componentConfig = config.components[item.type];
|
|
4452
4450
|
const label2 = (_a = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _a : item.type.toString();
|
|
4453
|
-
return /* @__PURE__ */ (0,
|
|
4451
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
4454
4452
|
"li",
|
|
4455
4453
|
{
|
|
4456
4454
|
className: getClassNameLayer({
|
|
@@ -4460,7 +4458,7 @@ var LayerTree = ({
|
|
|
4460
4458
|
childIsSelected
|
|
4461
4459
|
}),
|
|
4462
4460
|
children: [
|
|
4463
|
-
/* @__PURE__ */ (0,
|
|
4461
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
4464
4462
|
"button",
|
|
4465
4463
|
{
|
|
4466
4464
|
type: "button",
|
|
@@ -4493,22 +4491,22 @@ var LayerTree = ({
|
|
|
4493
4491
|
setHoveringComponent(null);
|
|
4494
4492
|
},
|
|
4495
4493
|
children: [
|
|
4496
|
-
containsZone && /* @__PURE__ */ (0,
|
|
4494
|
+
containsZone && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4497
4495
|
"div",
|
|
4498
4496
|
{
|
|
4499
4497
|
className: getClassNameLayer("chevron"),
|
|
4500
4498
|
title: isSelected ? "Collapse" : "Expand",
|
|
4501
|
-
children: /* @__PURE__ */ (0,
|
|
4499
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronDown, { size: "12" })
|
|
4502
4500
|
}
|
|
4503
4501
|
),
|
|
4504
|
-
/* @__PURE__ */ (0,
|
|
4505
|
-
/* @__PURE__ */ (0,
|
|
4506
|
-
/* @__PURE__ */ (0,
|
|
4502
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassNameLayer("title"), children: [
|
|
4503
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LayoutGrid, { size: "16" }) }),
|
|
4504
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("name"), children: label2 })
|
|
4507
4505
|
] })
|
|
4508
4506
|
]
|
|
4509
4507
|
}
|
|
4510
4508
|
) }),
|
|
4511
|
-
containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0,
|
|
4509
|
+
containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4512
4510
|
LayerTree,
|
|
4513
4511
|
{
|
|
4514
4512
|
config,
|
|
@@ -4531,7 +4529,7 @@ var LayerTree = ({
|
|
|
4531
4529
|
|
|
4532
4530
|
// components/Puck/components/Outline/index.tsx
|
|
4533
4531
|
var import_react27 = require("react");
|
|
4534
|
-
var
|
|
4532
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
4535
4533
|
var Outline = () => {
|
|
4536
4534
|
const { dispatch, state, overrides, config } = useAppContext();
|
|
4537
4535
|
const { data, ui } = state;
|
|
@@ -4546,8 +4544,8 @@ var Outline = () => {
|
|
|
4546
4544
|
[]
|
|
4547
4545
|
);
|
|
4548
4546
|
const Wrapper = (0, import_react27.useMemo)(() => overrides.outline || "div", [overrides]);
|
|
4549
|
-
return /* @__PURE__ */ (0,
|
|
4550
|
-
(ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0,
|
|
4547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
4548
|
+
(ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4551
4549
|
LayerTree,
|
|
4552
4550
|
{
|
|
4553
4551
|
config,
|
|
@@ -4560,7 +4558,7 @@ var Outline = () => {
|
|
|
4560
4558
|
),
|
|
4561
4559
|
Object.entries(findZonesForArea(data, "root")).map(
|
|
4562
4560
|
([zoneKey, zone]) => {
|
|
4563
|
-
return /* @__PURE__ */ (0,
|
|
4561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
4564
4562
|
LayerTree,
|
|
4565
4563
|
{
|
|
4566
4564
|
config,
|
|
@@ -4817,11 +4815,11 @@ init_react_import();
|
|
|
4817
4815
|
var styles_module_default20 = { "ViewportControls": "_ViewportControls_g1wgg_1", "ViewportControls-divider": "_ViewportControls-divider_g1wgg_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_g1wgg_21", "ViewportButton--isActive": "_ViewportButton--isActive_g1wgg_34", "ViewportButton-inner": "_ViewportButton-inner_g1wgg_34" };
|
|
4818
4816
|
|
|
4819
4817
|
// components/ViewportControls/index.tsx
|
|
4820
|
-
var
|
|
4818
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
4821
4819
|
var icons = {
|
|
4822
|
-
Smartphone: /* @__PURE__ */ (0,
|
|
4823
|
-
Tablet: /* @__PURE__ */ (0,
|
|
4824
|
-
Monitor: /* @__PURE__ */ (0,
|
|
4820
|
+
Smartphone: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Smartphone, { size: 16 }),
|
|
4821
|
+
Tablet: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Tablet, { size: 16 }),
|
|
4822
|
+
Monitor: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Monitor, { size: 16 })
|
|
4825
4823
|
};
|
|
4826
4824
|
var getClassName25 = get_class_name_factory_default("ViewportControls", styles_module_default20);
|
|
4827
4825
|
var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default20);
|
|
@@ -4837,7 +4835,7 @@ var ViewportButton = ({
|
|
|
4837
4835
|
(0, import_react29.useEffect)(() => {
|
|
4838
4836
|
setIsActive(width === state.ui.viewports.current.width);
|
|
4839
4837
|
}, [width, state.ui.viewports.current.width]);
|
|
4840
|
-
return /* @__PURE__ */ (0,
|
|
4838
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4841
4839
|
IconButton,
|
|
4842
4840
|
{
|
|
4843
4841
|
title,
|
|
@@ -4846,7 +4844,7 @@ var ViewportButton = ({
|
|
|
4846
4844
|
e.stopPropagation();
|
|
4847
4845
|
onClick({ width, height });
|
|
4848
4846
|
},
|
|
4849
|
-
children: /* @__PURE__ */ (0,
|
|
4847
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: getClassNameButton("inner"), children })
|
|
4850
4848
|
}
|
|
4851
4849
|
) });
|
|
4852
4850
|
};
|
|
@@ -4882,8 +4880,8 @@ var ViewportControls = ({
|
|
|
4882
4880
|
].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
|
|
4883
4881
|
[autoZoom]
|
|
4884
4882
|
);
|
|
4885
|
-
return /* @__PURE__ */ (0,
|
|
4886
|
-
viewports.map((viewport, i) => /* @__PURE__ */ (0,
|
|
4883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25(), children: [
|
|
4884
|
+
viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4887
4885
|
ViewportButton,
|
|
4888
4886
|
{
|
|
4889
4887
|
height: viewport.height,
|
|
@@ -4894,8 +4892,8 @@ var ViewportControls = ({
|
|
|
4894
4892
|
},
|
|
4895
4893
|
i
|
|
4896
4894
|
)),
|
|
4897
|
-
/* @__PURE__ */ (0,
|
|
4898
|
-
/* @__PURE__ */ (0,
|
|
4895
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("divider") }),
|
|
4896
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4899
4897
|
IconButton,
|
|
4900
4898
|
{
|
|
4901
4899
|
title: "Zoom viewport out",
|
|
@@ -4909,10 +4907,10 @@ var ViewportControls = ({
|
|
|
4909
4907
|
)].value
|
|
4910
4908
|
);
|
|
4911
4909
|
},
|
|
4912
|
-
children: /* @__PURE__ */ (0,
|
|
4910
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ZoomOut, { size: 16 })
|
|
4913
4911
|
}
|
|
4914
4912
|
),
|
|
4915
|
-
/* @__PURE__ */ (0,
|
|
4913
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4916
4914
|
IconButton,
|
|
4917
4915
|
{
|
|
4918
4916
|
title: "Zoom viewport in",
|
|
@@ -4926,11 +4924,11 @@ var ViewportControls = ({
|
|
|
4926
4924
|
)].value
|
|
4927
4925
|
);
|
|
4928
4926
|
},
|
|
4929
|
-
children: /* @__PURE__ */ (0,
|
|
4927
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ZoomIn, { size: 16 })
|
|
4930
4928
|
}
|
|
4931
4929
|
),
|
|
4932
|
-
/* @__PURE__ */ (0,
|
|
4933
|
-
/* @__PURE__ */ (0,
|
|
4930
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("divider") }),
|
|
4931
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4934
4932
|
"select",
|
|
4935
4933
|
{
|
|
4936
4934
|
className: getClassName25("zoomSelect"),
|
|
@@ -4938,7 +4936,7 @@ var ViewportControls = ({
|
|
|
4938
4936
|
onChange: (e) => {
|
|
4939
4937
|
onZoom(parseFloat(e.currentTarget.value));
|
|
4940
4938
|
},
|
|
4941
|
-
children: zoomOptions.map((option) => /* @__PURE__ */ (0,
|
|
4939
|
+
children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4942
4940
|
"option",
|
|
4943
4941
|
{
|
|
4944
4942
|
value: option.value,
|
|
@@ -4986,7 +4984,7 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
|
|
|
4986
4984
|
};
|
|
4987
4985
|
|
|
4988
4986
|
// components/Puck/components/Canvas/index.tsx
|
|
4989
|
-
var
|
|
4987
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
4990
4988
|
var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
|
|
4991
4989
|
var ZOOM_ON_CHANGE = true;
|
|
4992
4990
|
var Canvas = () => {
|
|
@@ -4996,7 +4994,7 @@ var Canvas = () => {
|
|
|
4996
4994
|
const frameRef = (0, import_react30.useRef)(null);
|
|
4997
4995
|
const [showTransition, setShowTransition] = (0, import_react30.useState)(false);
|
|
4998
4996
|
const defaultRender = (0, import_react30.useMemo)(() => {
|
|
4999
|
-
const PuckDefault = ({ children }) => /* @__PURE__ */ (0,
|
|
4997
|
+
const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
|
|
5000
4998
|
return PuckDefault;
|
|
5001
4999
|
}, []);
|
|
5002
5000
|
const CustomPreview = (0, import_react30.useMemo)(
|
|
@@ -5057,7 +5055,7 @@ var Canvas = () => {
|
|
|
5057
5055
|
setShowLoader(true);
|
|
5058
5056
|
}, 500);
|
|
5059
5057
|
}, []);
|
|
5060
|
-
return /* @__PURE__ */ (0,
|
|
5058
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
5061
5059
|
"div",
|
|
5062
5060
|
{
|
|
5063
5061
|
className: getClassName26({
|
|
@@ -5070,7 +5068,7 @@ var Canvas = () => {
|
|
|
5070
5068
|
recordHistory: true
|
|
5071
5069
|
}),
|
|
5072
5070
|
children: [
|
|
5073
|
-
ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0,
|
|
5071
|
+
ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName26("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
5074
5072
|
ViewportControls,
|
|
5075
5073
|
{
|
|
5076
5074
|
autoZoom: zoomConfig.autoZoom,
|
|
@@ -5095,8 +5093,8 @@ var Canvas = () => {
|
|
|
5095
5093
|
}
|
|
5096
5094
|
}
|
|
5097
5095
|
) }),
|
|
5098
|
-
/* @__PURE__ */ (0,
|
|
5099
|
-
/* @__PURE__ */ (0,
|
|
5096
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: getClassName26("inner"), ref: frameRef, children: [
|
|
5097
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
5100
5098
|
"div",
|
|
5101
5099
|
{
|
|
5102
5100
|
className: getClassName26("root"),
|
|
@@ -5108,10 +5106,10 @@ var Canvas = () => {
|
|
|
5108
5106
|
overflow: iframe.enabled ? void 0 : "auto"
|
|
5109
5107
|
},
|
|
5110
5108
|
suppressHydrationWarning: true,
|
|
5111
|
-
children: /* @__PURE__ */ (0,
|
|
5109
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Preview, {}) })
|
|
5112
5110
|
}
|
|
5113
5111
|
),
|
|
5114
|
-
/* @__PURE__ */ (0,
|
|
5112
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: getClassName26("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Loader, { size: 24 }) })
|
|
5115
5113
|
] })
|
|
5116
5114
|
]
|
|
5117
5115
|
}
|
|
@@ -5199,6 +5197,11 @@ var useLoadedOverrides = ({
|
|
|
5199
5197
|
}, [plugins, overrides]);
|
|
5200
5198
|
};
|
|
5201
5199
|
|
|
5200
|
+
// components/DefaultOverride/index.tsx
|
|
5201
|
+
init_react_import();
|
|
5202
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
5203
|
+
var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
|
|
5204
|
+
|
|
5202
5205
|
// components/Puck/index.tsx
|
|
5203
5206
|
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
5204
5207
|
var getClassName27 = get_class_name_factory_default("Puck", styles_module_default15);
|