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