@measured/puck 0.16.1-canary.841a590 → 0.16.1-canary.ed282b9
Sign up to get free protection for your applications and to get access to all the features.
- 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);
|