@measured/puck 0.16.1-canary.31c1f9b → 0.16.1-canary.4345165
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +14 -8
- package/dist/index.js +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);
|