@measured/puck 0.18.0-canary.4a04445 → 0.18.0-canary.51219fa
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +3 -3
- package/dist/index.css +45 -48
- package/dist/index.d.mts +5 -2
- package/dist/index.d.ts +5 -2
- package/dist/index.js +236 -151
- package/dist/index.mjs +227 -142
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
@@ -205,7 +205,7 @@ init_react_import();
|
|
205
205
|
|
206
206
|
// css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
|
207
207
|
init_react_import();
|
208
|
-
var styles_module_default2 = { "InputWrapper": "
|
208
|
+
var styles_module_default2 = { "InputWrapper": "_InputWrapper_1h1p1_1", "Input-label": "_Input-label_1h1p1_5", "Input-labelIcon": "_Input-labelIcon_1h1p1_14", "Input-disabledIcon": "_Input-disabledIcon_1h1p1_21", "Input-input": "_Input-input_1h1p1_26", "Input": "_Input_1h1p1_1", "Input--readOnly": "_Input--readOnly_1h1p1_70", "Input-radioGroupItems": "_Input-radioGroupItems_1h1p1_81", "Input-radio": "_Input-radio_1h1p1_81", "Input-radioInner": "_Input-radioInner_1h1p1_98", "Input-radioInput": "_Input-radioInput_1h1p1_143" };
|
209
209
|
|
210
210
|
// components/AutoField/index.tsx
|
211
211
|
import {
|
@@ -1504,12 +1504,13 @@ var DefaultField = ({
|
|
1504
1504
|
field,
|
1505
1505
|
onChange,
|
1506
1506
|
readOnly,
|
1507
|
-
value,
|
1507
|
+
value: _value,
|
1508
1508
|
name,
|
1509
1509
|
label,
|
1510
1510
|
Label: Label2,
|
1511
1511
|
id
|
1512
1512
|
}) => {
|
1513
|
+
const value = _value;
|
1513
1514
|
return /* @__PURE__ */ jsx9(
|
1514
1515
|
Label2,
|
1515
1516
|
{
|
@@ -1527,7 +1528,7 @@ var DefaultField = ({
|
|
1527
1528
|
type: field.type,
|
1528
1529
|
title: label || name,
|
1529
1530
|
name,
|
1530
|
-
value:
|
1531
|
+
value: (value == null ? void 0 : value.toString) ? value.toString() : "",
|
1531
1532
|
onChange: (e) => {
|
1532
1533
|
if (field.type === "number") {
|
1533
1534
|
const numberValue = Number(e.currentTarget.value);
|
@@ -2436,7 +2437,7 @@ import {
|
|
2436
2437
|
useContext as useContext7,
|
2437
2438
|
useEffect as useEffect15,
|
2438
2439
|
useId,
|
2439
|
-
useRef as
|
2440
|
+
useRef as useRef3,
|
2440
2441
|
useState as useState17
|
2441
2442
|
} from "react";
|
2442
2443
|
import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
|
@@ -2449,7 +2450,7 @@ import {
|
|
2449
2450
|
useContext as useContext6,
|
2450
2451
|
useEffect as useEffect14,
|
2451
2452
|
useMemo as useMemo8,
|
2452
|
-
useRef as
|
2453
|
+
useRef as useRef2
|
2453
2454
|
} from "react";
|
2454
2455
|
|
2455
2456
|
// components/DraggableComponent/index.tsx
|
@@ -2459,7 +2460,7 @@ import {
|
|
2459
2460
|
useContext as useContext5,
|
2460
2461
|
useEffect as useEffect10,
|
2461
2462
|
useMemo as useMemo7,
|
2462
|
-
useRef
|
2463
|
+
useRef,
|
2463
2464
|
useState as useState13
|
2464
2465
|
} from "react";
|
2465
2466
|
|
@@ -3047,7 +3048,7 @@ var DraggableComponent = ({
|
|
3047
3048
|
}
|
3048
3049
|
});
|
3049
3050
|
const thisIsDragging = status === "dragging";
|
3050
|
-
const ref =
|
3051
|
+
const ref = useRef(null);
|
3051
3052
|
const refSetter = useCallback7(
|
3052
3053
|
(el) => {
|
3053
3054
|
sortableRef(el);
|
@@ -3098,13 +3099,19 @@ var DraggableComponent = ({
|
|
3098
3099
|
}
|
3099
3100
|
}, [ref.current]);
|
3100
3101
|
useEffect10(() => {
|
3101
|
-
|
3102
|
-
|
3102
|
+
ctx == null ? void 0 : ctx.registerPath(
|
3103
|
+
id,
|
3104
|
+
{
|
3103
3105
|
index,
|
3104
3106
|
zone: zoneCompound
|
3105
|
-
}
|
3106
|
-
|
3107
|
-
|
3107
|
+
},
|
3108
|
+
componentType
|
3109
|
+
);
|
3110
|
+
return () => {
|
3111
|
+
var _a;
|
3112
|
+
(_a = ctx == null ? void 0 : ctx.unregisterPath) == null ? void 0 : _a.call(ctx, id);
|
3113
|
+
};
|
3114
|
+
}, [id, zoneCompound, index, componentType]);
|
3108
3115
|
const CustomActionBar = useMemo7(
|
3109
3116
|
() => overrides.actionBar || DefaultActionBar,
|
3110
3117
|
[overrides.actionBar]
|
@@ -3424,9 +3431,20 @@ var useContentWithPreview = (content, zoneCompound) => {
|
|
3424
3431
|
};
|
3425
3432
|
}
|
3426
3433
|
);
|
3434
|
+
const {
|
3435
|
+
state: {
|
3436
|
+
ui: { isDragging }
|
3437
|
+
}
|
3438
|
+
} = useAppContext();
|
3427
3439
|
const [contentWithPreview, setContentWithPreview] = useState15(content);
|
3440
|
+
const [localPreview, setLocalPreview] = useState15(
|
3441
|
+
preview
|
3442
|
+
);
|
3428
3443
|
const updateContent = useRenderedCallback(
|
3429
|
-
(content2, preview2) => {
|
3444
|
+
(content2, preview2, isDragging2) => {
|
3445
|
+
if (isDragging2 && !previewExists) {
|
3446
|
+
return;
|
3447
|
+
}
|
3430
3448
|
if (preview2) {
|
3431
3449
|
if (preview2.type === "insert") {
|
3432
3450
|
setContentWithPreview(
|
@@ -3456,13 +3474,14 @@ var useContentWithPreview = (content, zoneCompound) => {
|
|
3456
3474
|
previewExists ? content2.filter((item) => item.props.id !== draggedItemId) : content2
|
3457
3475
|
);
|
3458
3476
|
}
|
3477
|
+
setLocalPreview(preview2);
|
3459
3478
|
},
|
3460
3479
|
[draggedItemId, previewExists]
|
3461
3480
|
);
|
3462
3481
|
useEffect12(() => {
|
3463
|
-
updateContent(content, preview);
|
3464
|
-
}, [content, preview]);
|
3465
|
-
return contentWithPreview;
|
3482
|
+
updateContent(content, preview, isDragging);
|
3483
|
+
}, [content, preview, isDragging]);
|
3484
|
+
return [contentWithPreview, localPreview];
|
3466
3485
|
};
|
3467
3486
|
|
3468
3487
|
// components/DropZone/lib/use-drag-axis.ts
|
@@ -3506,6 +3525,7 @@ import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-r
|
|
3506
3525
|
var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default12);
|
3507
3526
|
var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
|
3508
3527
|
var RENDER_DEBUG = false;
|
3528
|
+
var DropZoneEditPure = (props) => /* @__PURE__ */ jsx22(DropZoneEdit, __spreadValues({}, props));
|
3509
3529
|
var DropZoneEdit = forwardRef3(
|
3510
3530
|
function DropZoneEditInternal({
|
3511
3531
|
zone,
|
@@ -3541,8 +3561,7 @@ var DropZoneEdit = forwardRef3(
|
|
3541
3561
|
isDeepestZone,
|
3542
3562
|
inNextDeepestArea,
|
3543
3563
|
draggedComponentType,
|
3544
|
-
userIsDragging
|
3545
|
-
preview
|
3564
|
+
userIsDragging
|
3546
3565
|
} = useContextStore(ZoneStoreContext, (s) => {
|
3547
3566
|
var _a, _b, _c;
|
3548
3567
|
return {
|
@@ -3550,8 +3569,7 @@ var DropZoneEdit = forwardRef3(
|
|
3550
3569
|
inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
|
3551
3570
|
draggedItemId: (_b = s.draggedItem) == null ? void 0 : _b.id,
|
3552
3571
|
draggedComponentType: (_c = s.draggedItem) == null ? void 0 : _c.data.componentType,
|
3553
|
-
userIsDragging: !!s.draggedItem
|
3554
|
-
preview: s.previewIndex[zoneCompound]
|
3572
|
+
userIsDragging: !!s.draggedItem
|
3555
3573
|
};
|
3556
3574
|
});
|
3557
3575
|
const { itemSelector } = appContext2.state.ui;
|
@@ -3576,7 +3594,7 @@ var DropZoneEdit = forwardRef3(
|
|
3576
3594
|
}
|
3577
3595
|
return data.content || [];
|
3578
3596
|
}, [data, zoneCompound]);
|
3579
|
-
const ref =
|
3597
|
+
const ref = useRef2(null);
|
3580
3598
|
const acceptsTarget = useCallback10(
|
3581
3599
|
(componentType) => {
|
3582
3600
|
if (!componentType) {
|
@@ -3617,7 +3635,10 @@ var DropZoneEdit = forwardRef3(
|
|
3617
3635
|
if (isEnabled) {
|
3618
3636
|
isEnabled = acceptsTarget(draggedComponentType);
|
3619
3637
|
}
|
3620
|
-
const contentWithPreview = useContentWithPreview(
|
3638
|
+
const [contentWithPreview, preview] = useContentWithPreview(
|
3639
|
+
content,
|
3640
|
+
zoneCompound
|
3641
|
+
);
|
3621
3642
|
const isDropEnabled = isEnabled && (preview ? contentWithPreview.length === 1 : contentWithPreview.length === 0);
|
3622
3643
|
const droppableConfig = {
|
3623
3644
|
id: zoneCompound,
|
@@ -3659,16 +3680,15 @@ var DropZoneEdit = forwardRef3(
|
|
3659
3680
|
},
|
3660
3681
|
"data-testid": `dropzone:${zoneCompound}`,
|
3661
3682
|
"data-puck-dropzone": zoneCompound,
|
3662
|
-
"data-puck-dnd": zoneCompound,
|
3663
3683
|
style: __spreadProps(__spreadValues({}, style), {
|
3664
3684
|
"--min-empty-height": `${minEmptyHeight}px`,
|
3665
|
-
backgroundColor: RENDER_DEBUG ? getRandomColor() : void 0
|
3685
|
+
backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
|
3666
3686
|
}),
|
3667
3687
|
children: contentWithPreview.map((item, i) => {
|
3668
|
-
var _a, _b, _c, _d, _e;
|
3688
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
3669
3689
|
const componentId = item.props.id;
|
3670
3690
|
const puckProps = {
|
3671
|
-
renderDropZone:
|
3691
|
+
renderDropZone: DropZoneEditPure,
|
3672
3692
|
isEditing: true,
|
3673
3693
|
dragRef: null
|
3674
3694
|
};
|
@@ -3685,13 +3705,13 @@ var DropZoneEdit = forwardRef3(
|
|
3685
3705
|
const componentConfig = config.components[item.type];
|
3686
3706
|
let componentType = item.type;
|
3687
3707
|
let label = (_b = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _b : item.type.toString();
|
3688
|
-
if (item.type === "preview"
|
3708
|
+
if (item.type === "preview") {
|
3689
3709
|
let Preview4 = function() {
|
3690
3710
|
return /* @__PURE__ */ jsx22(DrawerItemInner, { name: label, children: appContext2.overrides.componentItem });
|
3691
3711
|
};
|
3692
3712
|
var Preview3 = Preview4;
|
3693
|
-
componentType = preview.componentType;
|
3694
|
-
label = (
|
3713
|
+
componentType = (_c = preview == null ? void 0 : preview.componentType) != null ? _c : "__preview";
|
3714
|
+
label = (_f = (_e = (_d = config.components[componentType]) == null ? void 0 : _d.label) != null ? _e : componentType) != null ? _f : "Preview";
|
3695
3715
|
Render2 = Preview4;
|
3696
3716
|
}
|
3697
3717
|
return /* @__PURE__ */ jsx22(
|
@@ -3706,7 +3726,7 @@ var DropZoneEdit = forwardRef3(
|
|
3706
3726
|
zoneCompound,
|
3707
3727
|
depth: depth + 1,
|
3708
3728
|
index: i,
|
3709
|
-
isLoading: ((
|
3729
|
+
isLoading: ((_g = appContext2.componentState[componentId]) == null ? void 0 : _g.loadingCount) > 0,
|
3710
3730
|
isSelected,
|
3711
3731
|
label,
|
3712
3732
|
isEnabled,
|
@@ -3731,6 +3751,7 @@ var DropZoneEdit = forwardRef3(
|
|
3731
3751
|
);
|
3732
3752
|
}
|
3733
3753
|
);
|
3754
|
+
var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx22(DropZoneRender, __spreadValues({}, props));
|
3734
3755
|
var DropZoneRender = forwardRef3(
|
3735
3756
|
function DropZoneRenderInternal({ className, style, zone }, ref) {
|
3736
3757
|
const ctx = useContext6(dropZoneContext);
|
@@ -3770,7 +3791,9 @@ var DropZoneRender = forwardRef3(
|
|
3770
3791
|
children: /* @__PURE__ */ jsx22(
|
3771
3792
|
Component.render,
|
3772
3793
|
__spreadProps(__spreadValues({}, item.props), {
|
3773
|
-
puck: {
|
3794
|
+
puck: {
|
3795
|
+
renderDropZone: DropZoneRenderPure
|
3796
|
+
}
|
3774
3797
|
})
|
3775
3798
|
)
|
3776
3799
|
},
|
@@ -3938,6 +3961,13 @@ var getPointerCollisions = (position, manager) => {
|
|
3938
3961
|
if (elements) {
|
3939
3962
|
for (let i = 0; i < elements.length; i++) {
|
3940
3963
|
const element = elements[i];
|
3964
|
+
const dropzoneId = element.getAttribute("data-puck-dropzone");
|
3965
|
+
if (dropzoneId) {
|
3966
|
+
const droppable = manager.registry.droppables.get(dropzoneId);
|
3967
|
+
if (droppable) {
|
3968
|
+
candidates.push(droppable);
|
3969
|
+
}
|
3970
|
+
}
|
3941
3971
|
const id = element.getAttribute("data-puck-dnd");
|
3942
3972
|
if (id) {
|
3943
3973
|
const droppable = manager.registry.droppables.get(id);
|
@@ -4346,6 +4376,11 @@ var reduceUi = (ui, action) => {
|
|
4346
4376
|
itemSelector: { index: action.sourceIndex + 1, zone: action.sourceZone }
|
4347
4377
|
});
|
4348
4378
|
}
|
4379
|
+
if (action.type === "remove") {
|
4380
|
+
return __spreadProps(__spreadValues({}, ui), {
|
4381
|
+
itemSelector: null
|
4382
|
+
});
|
4383
|
+
}
|
4349
4384
|
return ui;
|
4350
4385
|
};
|
4351
4386
|
|
@@ -4605,6 +4640,9 @@ var _PointerSensor = class _PointerSensor extends Sensor {
|
|
4605
4640
|
}
|
4606
4641
|
}
|
4607
4642
|
handlePointerUp(event) {
|
4643
|
+
if (!this.source) {
|
4644
|
+
return;
|
4645
|
+
}
|
4608
4646
|
event.preventDefault();
|
4609
4647
|
event.stopPropagation();
|
4610
4648
|
const { status } = this.manager.dragOperation;
|
@@ -4722,7 +4760,7 @@ function useDragListener(type, fn, deps = []) {
|
|
4722
4760
|
}
|
4723
4761
|
var AREA_CHANGE_DEBOUNCE_MS = 100;
|
4724
4762
|
var useTempDisableFallback = (timeout3) => {
|
4725
|
-
const lastFallbackDisable =
|
4763
|
+
const lastFallbackDisable = useRef3(null);
|
4726
4764
|
return useCallback11((manager) => {
|
4727
4765
|
collisionStore.setState({ fallbackEnabled: false });
|
4728
4766
|
const fallbackId = generateId();
|
@@ -4742,7 +4780,7 @@ var DragDropContextClient = ({
|
|
4742
4780
|
const { state, config, dispatch, resolveData } = useAppContext();
|
4743
4781
|
const id = useId();
|
4744
4782
|
const { data } = state;
|
4745
|
-
const debouncedParamsRef =
|
4783
|
+
const debouncedParamsRef = useRef3(null);
|
4746
4784
|
const tempDisableFallback = useTempDisableFallback(100);
|
4747
4785
|
const [zoneStore] = useState17(
|
4748
4786
|
() => createStore3(() => ({
|
@@ -4881,30 +4919,36 @@ var DragDropContextClient = ({
|
|
4881
4919
|
]);
|
4882
4920
|
const [dragListeners, setDragListeners] = useState17({});
|
4883
4921
|
const [pathData, setPathData] = useState17();
|
4884
|
-
const dragMode =
|
4922
|
+
const dragMode = useRef3(null);
|
4885
4923
|
const registerPath = useCallback11(
|
4886
|
-
(selector) => {
|
4887
|
-
const item = getItem(selector, data);
|
4888
|
-
if (!item) {
|
4889
|
-
return;
|
4890
|
-
}
|
4924
|
+
(id2, selector, label) => {
|
4891
4925
|
const [area] = getZoneId(selector.zone);
|
4892
4926
|
setPathData((latestPathData = {}) => {
|
4893
4927
|
const parentPathData = latestPathData[area] || { path: [] };
|
4894
4928
|
return __spreadProps(__spreadValues({}, latestPathData), {
|
4895
|
-
[
|
4929
|
+
[id2]: {
|
4896
4930
|
path: [
|
4897
4931
|
...parentPathData.path,
|
4898
4932
|
...selector.zone ? [selector.zone] : []
|
4899
4933
|
],
|
4900
|
-
label
|
4934
|
+
label
|
4901
4935
|
}
|
4902
4936
|
});
|
4903
4937
|
});
|
4904
4938
|
},
|
4905
4939
|
[data, setPathData]
|
4906
4940
|
);
|
4907
|
-
const
|
4941
|
+
const unregisterPath = useCallback11(
|
4942
|
+
(id2) => {
|
4943
|
+
setPathData((latestPathData = {}) => {
|
4944
|
+
const newPathData = __spreadValues({}, latestPathData);
|
4945
|
+
delete newPathData[id2];
|
4946
|
+
return newPathData;
|
4947
|
+
});
|
4948
|
+
},
|
4949
|
+
[data, setPathData]
|
4950
|
+
);
|
4951
|
+
const initialSelector = useRef3(void 0);
|
4908
4952
|
return /* @__PURE__ */ jsx23("div", { id, children: /* @__PURE__ */ jsx23(
|
4909
4953
|
dragListenerContext.Provider,
|
4910
4954
|
{
|
@@ -5100,6 +5144,7 @@ var DragDropContextClient = ({
|
|
5100
5144
|
areaId: "root",
|
5101
5145
|
depth: 0,
|
5102
5146
|
registerPath,
|
5147
|
+
unregisterPath,
|
5103
5148
|
pathData,
|
5104
5149
|
path: []
|
5105
5150
|
},
|
@@ -5249,9 +5294,9 @@ Drawer.Item = DrawerItem;
|
|
5249
5294
|
// components/Puck/index.tsx
|
5250
5295
|
init_react_import();
|
5251
5296
|
import {
|
5252
|
-
useCallback as
|
5253
|
-
useEffect as
|
5254
|
-
useMemo as
|
5297
|
+
useCallback as useCallback18,
|
5298
|
+
useEffect as useEffect24,
|
5299
|
+
useMemo as useMemo19,
|
5255
5300
|
useReducer,
|
5256
5301
|
useState as useState26
|
5257
5302
|
} from "react";
|
@@ -5447,36 +5492,61 @@ init_react_import();
|
|
5447
5492
|
|
5448
5493
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
|
5449
5494
|
init_react_import();
|
5450
|
-
var styles_module_default16 = { "PuckFields": "
|
5495
|
+
var styles_module_default16 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
|
5451
5496
|
|
5452
5497
|
// components/Puck/components/Fields/index.tsx
|
5453
|
-
import {
|
5498
|
+
import { useMemo as useMemo12 } from "react";
|
5499
|
+
|
5500
|
+
// lib/use-resolved-fields.ts
|
5501
|
+
init_react_import();
|
5502
|
+
import { useCallback as useCallback13, useEffect as useEffect17, useMemo as useMemo11, useRef as useRef5, useState as useState19 } from "react";
|
5454
5503
|
|
5455
5504
|
// lib/use-parent.ts
|
5456
5505
|
init_react_import();
|
5457
|
-
import { useContext as useContext9 } from "react";
|
5458
|
-
var
|
5506
|
+
import { useCallback as useCallback12, useContext as useContext9 } from "react";
|
5507
|
+
var getParent = (itemSelector, pathData, data) => {
|
5459
5508
|
var _a;
|
5460
|
-
|
5461
|
-
const
|
5462
|
-
const
|
5463
|
-
const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
|
5509
|
+
if (!itemSelector) return null;
|
5510
|
+
const item = getItem(itemSelector, data);
|
5511
|
+
const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, data);
|
5464
5512
|
const lastItem = breadcrumbs[breadcrumbs.length - 1];
|
5465
|
-
const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector,
|
5513
|
+
const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, data)) != null ? _a : null : null;
|
5466
5514
|
return parent || null;
|
5467
5515
|
};
|
5516
|
+
var useGetParent = () => {
|
5517
|
+
const { state } = useAppContext();
|
5518
|
+
const { pathData } = useContext9(dropZoneContext) || {};
|
5519
|
+
return useCallback12(
|
5520
|
+
() => getParent(state.ui.itemSelector, pathData, state.data),
|
5521
|
+
[state.ui.itemSelector, pathData, state.data]
|
5522
|
+
);
|
5523
|
+
};
|
5524
|
+
var useParent = () => {
|
5525
|
+
return useGetParent()();
|
5526
|
+
};
|
5468
5527
|
|
5469
|
-
//
|
5470
|
-
|
5471
|
-
|
5528
|
+
// lib/use-on-value-change.ts
|
5529
|
+
init_react_import();
|
5530
|
+
import { useRef as useRef4, useEffect as useEffect16 } from "react";
|
5531
|
+
function useOnValueChange(value, onChange, compare = Object.is, deps = []) {
|
5532
|
+
const tracked = useRef4(value);
|
5533
|
+
useEffect16(() => {
|
5534
|
+
const oldValue = tracked.current;
|
5535
|
+
if (!compare(value, oldValue)) {
|
5536
|
+
tracked.current = value;
|
5537
|
+
onChange(value, oldValue);
|
5538
|
+
}
|
5539
|
+
}, [onChange, compare, value, ...deps]);
|
5540
|
+
}
|
5541
|
+
|
5542
|
+
// lib/selector-is.ts
|
5543
|
+
init_react_import();
|
5544
|
+
var selectorIs = (a, b) => (a == null ? void 0 : a.zone) === (b == null ? void 0 : b.zone) && (a == null ? void 0 : a.index) === (b == null ? void 0 : b.index);
|
5545
|
+
|
5546
|
+
// lib/use-resolved-fields.ts
|
5472
5547
|
var defaultPageFields = {
|
5473
5548
|
title: { type: "text" }
|
5474
5549
|
};
|
5475
|
-
var DefaultFields = ({
|
5476
|
-
children
|
5477
|
-
}) => {
|
5478
|
-
return /* @__PURE__ */ jsx27(Fragment8, { children });
|
5479
|
-
};
|
5480
5550
|
var useResolvedFields = () => {
|
5481
5551
|
var _a, _b;
|
5482
5552
|
const { selectedItem, state, config } = useAppContext();
|
@@ -5492,12 +5562,13 @@ var useResolvedFields = () => {
|
|
5492
5562
|
const [lastSelectedData, setLastSelectedData] = useState19({});
|
5493
5563
|
const [resolvedFields, setResolvedFields] = useState19(defaultFields);
|
5494
5564
|
const [fieldsLoading, setFieldsLoading] = useState19(false);
|
5565
|
+
const lastFields = useRef5(defaultFields);
|
5495
5566
|
const defaultResolveFields = (_componentData, _params) => defaultFields;
|
5496
5567
|
const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
|
5497
5568
|
const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
|
5498
5569
|
const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
|
5499
5570
|
const hasResolver = hasComponentResolver || hasRootResolver;
|
5500
|
-
const resolveFields =
|
5571
|
+
const resolveFields = useCallback13(
|
5501
5572
|
(..._0) => __async(void 0, [..._0], function* (fields = {}) {
|
5502
5573
|
var _a2;
|
5503
5574
|
const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
|
@@ -5509,7 +5580,7 @@ var useResolvedFields = () => {
|
|
5509
5580
|
{
|
5510
5581
|
changed,
|
5511
5582
|
fields,
|
5512
|
-
lastFields:
|
5583
|
+
lastFields: lastFields.current,
|
5513
5584
|
lastData,
|
5514
5585
|
appState: state,
|
5515
5586
|
parent
|
@@ -5520,7 +5591,7 @@ var useResolvedFields = () => {
|
|
5520
5591
|
return yield config.root.resolveFields(componentData, {
|
5521
5592
|
changed,
|
5522
5593
|
fields,
|
5523
|
-
lastFields:
|
5594
|
+
lastFields: lastFields.current,
|
5524
5595
|
lastData,
|
5525
5596
|
appState: state,
|
5526
5597
|
parent
|
@@ -5529,40 +5600,56 @@ var useResolvedFields = () => {
|
|
5529
5600
|
return defaultResolveFields(componentData, {
|
5530
5601
|
changed,
|
5531
5602
|
fields,
|
5532
|
-
lastFields:
|
5603
|
+
lastFields: lastFields.current,
|
5533
5604
|
lastData
|
5534
5605
|
});
|
5535
5606
|
}),
|
5536
|
-
[data, config, componentData, selectedItem,
|
5607
|
+
[data, config, componentData, selectedItem, state, parent]
|
5537
5608
|
);
|
5538
|
-
const
|
5539
|
-
|
5540
|
-
|
5541
|
-
}, [parent]);
|
5542
|
-
useEffect16(() => {
|
5543
|
-
var _a2;
|
5544
|
-
if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || hasParent) {
|
5609
|
+
const triggerResolver = useCallback13(() => {
|
5610
|
+
var _a2, _b2;
|
5611
|
+
if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" || parent) {
|
5545
5612
|
if (hasResolver) {
|
5546
5613
|
setFieldsLoading(true);
|
5547
5614
|
resolveFields(defaultFields).then((fields) => {
|
5548
5615
|
setResolvedFields(fields || {});
|
5616
|
+
lastFields.current = fields;
|
5549
5617
|
setFieldsLoading(false);
|
5550
5618
|
});
|
5551
|
-
|
5552
|
-
setResolvedFields(defaultFields);
|
5619
|
+
return;
|
5553
5620
|
}
|
5554
5621
|
}
|
5555
|
-
|
5556
|
-
|
5557
|
-
|
5622
|
+
setResolvedFields(defaultFields);
|
5623
|
+
}, [defaultFields, state.ui.itemSelector, hasResolver, parent]);
|
5624
|
+
useOnValueChange(
|
5558
5625
|
state.ui.itemSelector,
|
5559
|
-
|
5560
|
-
|
5561
|
-
|
5562
|
-
|
5626
|
+
() => {
|
5627
|
+
lastFields.current = defaultFields;
|
5628
|
+
},
|
5629
|
+
selectorIs
|
5630
|
+
);
|
5631
|
+
useOnValueChange(
|
5632
|
+
{ data, parent, itemSelector: state.ui.itemSelector },
|
5633
|
+
() => {
|
5634
|
+
triggerResolver();
|
5635
|
+
},
|
5636
|
+
(a, b) => JSON.stringify(a) === JSON.stringify(b)
|
5637
|
+
);
|
5638
|
+
useEffect17(() => {
|
5639
|
+
triggerResolver();
|
5640
|
+
}, []);
|
5563
5641
|
return [resolvedFields, fieldsLoading];
|
5564
5642
|
};
|
5565
|
-
|
5643
|
+
|
5644
|
+
// components/Puck/components/Fields/index.tsx
|
5645
|
+
import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
|
5646
|
+
var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
|
5647
|
+
var DefaultFields = ({
|
5648
|
+
children
|
5649
|
+
}) => {
|
5650
|
+
return /* @__PURE__ */ jsx27(Fragment8, { children });
|
5651
|
+
};
|
5652
|
+
var Fields = ({ wrapFields = true }) => {
|
5566
5653
|
var _a, _b;
|
5567
5654
|
const {
|
5568
5655
|
selectedItem,
|
@@ -5580,11 +5667,11 @@ var Fields = () => {
|
|
5580
5667
|
const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
|
5581
5668
|
const isLoading = fieldsResolving || componentResolving;
|
5582
5669
|
const rootProps = data.root.props || data.root;
|
5583
|
-
const Wrapper =
|
5670
|
+
const Wrapper = useMemo12(() => overrides.fields || DefaultFields, [overrides]);
|
5584
5671
|
return /* @__PURE__ */ jsxs14(
|
5585
5672
|
"form",
|
5586
5673
|
{
|
5587
|
-
className: getClassName21(),
|
5674
|
+
className: getClassName21({ wrapFields }),
|
5588
5675
|
onSubmit: (e) => {
|
5589
5676
|
e.preventDefault();
|
5590
5677
|
},
|
@@ -5660,7 +5747,7 @@ var Fields = () => {
|
|
5660
5747
|
item: selectedItem
|
5661
5748
|
});
|
5662
5749
|
const id = `${selectedItem.props.id}_${field.type}_${fieldName}`;
|
5663
|
-
return /* @__PURE__ */ jsx27(
|
5750
|
+
return /* @__PURE__ */ jsx27("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx27(
|
5664
5751
|
AutoFieldPrivate,
|
5665
5752
|
{
|
5666
5753
|
field,
|
@@ -5669,16 +5756,15 @@ var Fields = () => {
|
|
5669
5756
|
readOnly: !edit || readOnly[fieldName],
|
5670
5757
|
value: selectedItem.props[fieldName],
|
5671
5758
|
onChange
|
5672
|
-
}
|
5673
|
-
|
5674
|
-
);
|
5759
|
+
}
|
5760
|
+
) }, id);
|
5675
5761
|
} else {
|
5676
5762
|
const readOnly = data.root.readOnly || {};
|
5677
5763
|
const { edit } = getPermissions({
|
5678
5764
|
root: true
|
5679
5765
|
});
|
5680
5766
|
const id = `root_${field.type}_${fieldName}`;
|
5681
|
-
return /* @__PURE__ */ jsx27(
|
5767
|
+
return /* @__PURE__ */ jsx27("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx27(
|
5682
5768
|
AutoFieldPrivate,
|
5683
5769
|
{
|
5684
5770
|
field,
|
@@ -5687,9 +5773,8 @@ var Fields = () => {
|
|
5687
5773
|
readOnly: !edit || readOnly[fieldName],
|
5688
5774
|
value: rootProps[fieldName],
|
5689
5775
|
onChange
|
5690
|
-
}
|
5691
|
-
|
5692
|
-
);
|
5776
|
+
}
|
5777
|
+
) }, id);
|
5693
5778
|
}
|
5694
5779
|
}) }),
|
5695
5780
|
isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
|
@@ -5703,7 +5788,7 @@ init_react_import();
|
|
5703
5788
|
|
5704
5789
|
// lib/use-component-list.tsx
|
5705
5790
|
init_react_import();
|
5706
|
-
import { useEffect as
|
5791
|
+
import { useEffect as useEffect18, useState as useState20 } from "react";
|
5707
5792
|
|
5708
5793
|
// components/ComponentList/index.tsx
|
5709
5794
|
init_react_import();
|
@@ -5771,7 +5856,7 @@ ComponentList.Item = ComponentListItem;
|
|
5771
5856
|
import { jsx as jsx29 } from "react/jsx-runtime";
|
5772
5857
|
var useComponentList = (config, ui) => {
|
5773
5858
|
const [componentList, setComponentList] = useState20();
|
5774
|
-
|
5859
|
+
useEffect18(() => {
|
5775
5860
|
var _a, _b, _c;
|
5776
5861
|
if (Object.keys(ui.componentList).length > 0) {
|
5777
5862
|
const matchedComponents = [];
|
@@ -5840,25 +5925,25 @@ var useComponentList = (config, ui) => {
|
|
5840
5925
|
};
|
5841
5926
|
|
5842
5927
|
// components/Puck/components/Components/index.tsx
|
5843
|
-
import { useMemo as
|
5928
|
+
import { useMemo as useMemo13 } from "react";
|
5844
5929
|
import { jsx as jsx30 } from "react/jsx-runtime";
|
5845
5930
|
var Components = () => {
|
5846
5931
|
const { config, state, overrides } = useAppContext();
|
5847
5932
|
const componentList = useComponentList(config, state.ui);
|
5848
|
-
const Wrapper =
|
5933
|
+
const Wrapper = useMemo13(() => overrides.components || "div", [overrides]);
|
5849
5934
|
return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
|
5850
5935
|
};
|
5851
5936
|
|
5852
5937
|
// components/Puck/components/Preview/index.tsx
|
5853
5938
|
init_react_import();
|
5854
|
-
import { useCallback as
|
5939
|
+
import { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef7, useMemo as useMemo14 } from "react";
|
5855
5940
|
|
5856
5941
|
// components/AutoFrame/index.tsx
|
5857
5942
|
init_react_import();
|
5858
5943
|
import {
|
5859
5944
|
createContext as createContext5,
|
5860
5945
|
useContext as useContext10,
|
5861
|
-
useEffect as
|
5946
|
+
useEffect as useEffect19,
|
5862
5947
|
useState as useState21
|
5863
5948
|
} from "react";
|
5864
5949
|
import hash from "object-hash";
|
@@ -5906,7 +5991,7 @@ var CopyHostStyles = ({
|
|
5906
5991
|
onStylesLoaded = () => null
|
5907
5992
|
}) => {
|
5908
5993
|
const { document: doc, window: win } = useFrame();
|
5909
|
-
|
5994
|
+
useEffect19(() => {
|
5910
5995
|
if (!win || !doc) {
|
5911
5996
|
return () => {
|
5912
5997
|
};
|
@@ -6086,7 +6171,7 @@ function AutoFrame(_a) {
|
|
6086
6171
|
const [loaded, setLoaded] = useState21(false);
|
6087
6172
|
const [ctx, setCtx] = useState21({});
|
6088
6173
|
const [mountTarget, setMountTarget] = useState21();
|
6089
|
-
|
6174
|
+
useEffect19(() => {
|
6090
6175
|
var _a2;
|
6091
6176
|
if (frameRef.current) {
|
6092
6177
|
setCtx({
|
@@ -6180,7 +6265,7 @@ import { Fragment as Fragment10, jsx as jsx33 } from "react/jsx-runtime";
|
|
6180
6265
|
var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
|
6181
6266
|
var useBubbleIframeEvents = (ref) => {
|
6182
6267
|
const { status } = useAppContext();
|
6183
|
-
|
6268
|
+
useEffect20(() => {
|
6184
6269
|
var _a;
|
6185
6270
|
if (ref.current && status === "READY") {
|
6186
6271
|
const iframe = ref.current;
|
@@ -6219,7 +6304,7 @@ var useBubbleIframeEvents = (ref) => {
|
|
6219
6304
|
};
|
6220
6305
|
var Preview2 = ({ id = "puck-preview" }) => {
|
6221
6306
|
const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
|
6222
|
-
const Page =
|
6307
|
+
const Page = useCallback14(
|
6223
6308
|
(pageProps) => {
|
6224
6309
|
var _a, _b;
|
6225
6310
|
return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
|
@@ -6228,9 +6313,9 @@ var Preview2 = ({ id = "puck-preview" }) => {
|
|
6228
6313
|
},
|
6229
6314
|
[config.root]
|
6230
6315
|
);
|
6231
|
-
const Frame =
|
6316
|
+
const Frame = useMemo14(() => overrides.iframe, [overrides]);
|
6232
6317
|
const rootProps = state.data.root.props || state.data.root;
|
6233
|
-
const ref =
|
6318
|
+
const ref = useRef7(null);
|
6234
6319
|
useBubbleIframeEvents(ref);
|
6235
6320
|
const inner = state.ui.previewMode === "edit" ? /* @__PURE__ */ jsx33(
|
6236
6321
|
Page,
|
@@ -6480,13 +6565,13 @@ var LayerTree = ({
|
|
6480
6565
|
};
|
6481
6566
|
|
6482
6567
|
// components/Puck/components/Outline/index.tsx
|
6483
|
-
import { useCallback as
|
6568
|
+
import { useCallback as useCallback15, useMemo as useMemo15 } from "react";
|
6484
6569
|
import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
|
6485
6570
|
var Outline = () => {
|
6486
6571
|
const { dispatch, state, overrides, config } = useAppContext();
|
6487
6572
|
const { data, ui } = state;
|
6488
6573
|
const { itemSelector } = ui;
|
6489
|
-
const setItemSelector =
|
6574
|
+
const setItemSelector = useCallback15(
|
6490
6575
|
(newItemSelector) => {
|
6491
6576
|
dispatch({
|
6492
6577
|
type: "setUi",
|
@@ -6495,7 +6580,7 @@ var Outline = () => {
|
|
6495
6580
|
},
|
6496
6581
|
[]
|
6497
6582
|
);
|
6498
|
-
const Wrapper =
|
6583
|
+
const Wrapper = useMemo15(() => overrides.outline || "div", [overrides]);
|
6499
6584
|
return /* @__PURE__ */ jsx35(Wrapper, { children: /* @__PURE__ */ jsx35(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs17(Fragment12, { children: [
|
6500
6585
|
(ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx35(
|
6501
6586
|
LayerTree,
|
@@ -6782,16 +6867,16 @@ var getBox = function getBox2(el) {
|
|
6782
6867
|
|
6783
6868
|
// components/Puck/components/Canvas/index.tsx
|
6784
6869
|
import {
|
6785
|
-
useCallback as
|
6786
|
-
useEffect as
|
6787
|
-
useMemo as
|
6788
|
-
useRef as
|
6870
|
+
useCallback as useCallback16,
|
6871
|
+
useEffect as useEffect22,
|
6872
|
+
useMemo as useMemo17,
|
6873
|
+
useRef as useRef8,
|
6789
6874
|
useState as useState24
|
6790
6875
|
} from "react";
|
6791
6876
|
|
6792
6877
|
// components/ViewportControls/index.tsx
|
6793
6878
|
init_react_import();
|
6794
|
-
import { useEffect as
|
6879
|
+
import { useEffect as useEffect21, useMemo as useMemo16, useState as useState23 } from "react";
|
6795
6880
|
|
6796
6881
|
// css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
|
6797
6882
|
init_react_import();
|
@@ -6815,7 +6900,7 @@ var ViewportButton = ({
|
|
6815
6900
|
}) => {
|
6816
6901
|
const { state } = useAppContext();
|
6817
6902
|
const [isActive, setIsActive] = useState23(false);
|
6818
|
-
|
6903
|
+
useEffect21(() => {
|
6819
6904
|
setIsActive(width === state.ui.viewports.current.width);
|
6820
6905
|
}, [width, state.ui.viewports.current.width]);
|
6821
6906
|
return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
|
@@ -6851,7 +6936,7 @@ var ViewportControls = ({
|
|
6851
6936
|
const defaultsContainAutoZoom = defaultZoomOptions.find(
|
6852
6937
|
(option) => option.value === autoZoom
|
6853
6938
|
);
|
6854
|
-
const zoomOptions =
|
6939
|
+
const zoomOptions = useMemo16(
|
6855
6940
|
() => [
|
6856
6941
|
...defaultZoomOptions,
|
6857
6942
|
...defaultsContainAutoZoom ? [] : [
|
@@ -6974,17 +7059,17 @@ var Canvas = () => {
|
|
6974
7059
|
const { status, iframe } = useAppContext();
|
6975
7060
|
const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
|
6976
7061
|
const { ui } = state;
|
6977
|
-
const frameRef =
|
7062
|
+
const frameRef = useRef8(null);
|
6978
7063
|
const [showTransition, setShowTransition] = useState24(false);
|
6979
|
-
const defaultRender =
|
7064
|
+
const defaultRender = useMemo17(() => {
|
6980
7065
|
const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment13, { children });
|
6981
7066
|
return PuckDefault;
|
6982
7067
|
}, []);
|
6983
|
-
const CustomPreview =
|
7068
|
+
const CustomPreview = useMemo17(
|
6984
7069
|
() => overrides.preview || defaultRender,
|
6985
7070
|
[overrides]
|
6986
7071
|
);
|
6987
|
-
const getFrameDimensions =
|
7072
|
+
const getFrameDimensions = useCallback16(() => {
|
6988
7073
|
if (frameRef.current) {
|
6989
7074
|
const frame = frameRef.current;
|
6990
7075
|
const box = getBox(frame);
|
@@ -6992,7 +7077,7 @@ var Canvas = () => {
|
|
6992
7077
|
}
|
6993
7078
|
return { width: 0, height: 0 };
|
6994
7079
|
}, [frameRef]);
|
6995
|
-
const resetAutoZoom =
|
7080
|
+
const resetAutoZoom = useCallback16(
|
6996
7081
|
(ui2 = state.ui) => {
|
6997
7082
|
if (frameRef.current) {
|
6998
7083
|
setZoomConfig(
|
@@ -7002,11 +7087,11 @@ var Canvas = () => {
|
|
7002
7087
|
},
|
7003
7088
|
[frameRef, zoomConfig, state.ui]
|
7004
7089
|
);
|
7005
|
-
|
7090
|
+
useEffect22(() => {
|
7006
7091
|
setShowTransition(false);
|
7007
7092
|
resetAutoZoom();
|
7008
7093
|
}, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
|
7009
|
-
|
7094
|
+
useEffect22(() => {
|
7010
7095
|
const { height: frameHeight } = getFrameDimensions();
|
7011
7096
|
if (ui.viewports.current.height === "auto") {
|
7012
7097
|
setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
|
@@ -7014,13 +7099,13 @@ var Canvas = () => {
|
|
7014
7099
|
}));
|
7015
7100
|
}
|
7016
7101
|
}, [zoomConfig.zoom]);
|
7017
|
-
|
7102
|
+
useEffect22(() => {
|
7018
7103
|
if (ZOOM_ON_CHANGE) {
|
7019
7104
|
setShowTransition(true);
|
7020
7105
|
resetAutoZoom(ui);
|
7021
7106
|
}
|
7022
7107
|
}, [ui.viewports.current.width]);
|
7023
|
-
|
7108
|
+
useEffect22(() => {
|
7024
7109
|
const cb = () => {
|
7025
7110
|
setShowTransition(false);
|
7026
7111
|
resetAutoZoom();
|
@@ -7031,7 +7116,7 @@ var Canvas = () => {
|
|
7031
7116
|
};
|
7032
7117
|
}, []);
|
7033
7118
|
const [showLoader, setShowLoader] = useState24(false);
|
7034
|
-
|
7119
|
+
useEffect22(() => {
|
7035
7120
|
setTimeout(() => {
|
7036
7121
|
setShowLoader(true);
|
7037
7122
|
}, 500);
|
@@ -7109,7 +7194,7 @@ var Canvas = () => {
|
|
7109
7194
|
|
7110
7195
|
// lib/use-loaded-overrides.ts
|
7111
7196
|
init_react_import();
|
7112
|
-
import { useMemo as
|
7197
|
+
import { useMemo as useMemo18 } from "react";
|
7113
7198
|
|
7114
7199
|
// lib/load-overrides.ts
|
7115
7200
|
init_react_import();
|
@@ -7148,7 +7233,7 @@ var useLoadedOverrides = ({
|
|
7148
7233
|
overrides,
|
7149
7234
|
plugins
|
7150
7235
|
}) => {
|
7151
|
-
return
|
7236
|
+
return useMemo18(() => {
|
7152
7237
|
return loadOverrides({ overrides, plugins });
|
7153
7238
|
}, [plugins, overrides]);
|
7154
7239
|
};
|
@@ -7160,14 +7245,14 @@ var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment14, { chil
|
|
7160
7245
|
|
7161
7246
|
// lib/use-inject-css.ts
|
7162
7247
|
init_react_import();
|
7163
|
-
import { useEffect as
|
7248
|
+
import { useEffect as useEffect23, useState as useState25 } from "react";
|
7164
7249
|
var styles = ``;
|
7165
7250
|
var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
|
7166
7251
|
const [el, setEl] = useState25();
|
7167
|
-
|
7252
|
+
useEffect23(() => {
|
7168
7253
|
setEl(document.createElement("style"));
|
7169
7254
|
}, []);
|
7170
|
-
|
7255
|
+
useEffect23(() => {
|
7171
7256
|
var _a;
|
7172
7257
|
if (!el || typeof window === "undefined") {
|
7173
7258
|
return;
|
@@ -7187,10 +7272,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
|
|
7187
7272
|
|
7188
7273
|
// lib/use-preview-mode-hotkeys.ts
|
7189
7274
|
init_react_import();
|
7190
|
-
import { useCallback as
|
7275
|
+
import { useCallback as useCallback17 } from "react";
|
7191
7276
|
import { useHotkeys as useHotkeys2 } from "react-hotkeys-hook";
|
7192
7277
|
var usePreviewModeHotkeys = (dispatch, iframeEnabled) => {
|
7193
|
-
const toggleInteractive =
|
7278
|
+
const toggleInteractive = useCallback17(() => {
|
7194
7279
|
dispatch({
|
7195
7280
|
type: "setUi",
|
7196
7281
|
ui: (ui) => ({
|
@@ -7335,11 +7420,11 @@ function Puck({
|
|
7335
7420
|
const [menuOpen, setMenuOpen] = useState26(false);
|
7336
7421
|
const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
|
7337
7422
|
const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
|
7338
|
-
|
7423
|
+
useEffect24(() => {
|
7339
7424
|
if (onChange) onChange(data);
|
7340
7425
|
}, [data]);
|
7341
7426
|
const rootProps = data.root.props || data.root;
|
7342
|
-
const toggleSidebars =
|
7427
|
+
const toggleSidebars = useCallback18(
|
7343
7428
|
(sidebar) => {
|
7344
7429
|
const widerViewport = window.matchMedia("(min-width: 638px)").matches;
|
7345
7430
|
const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
|
@@ -7353,7 +7438,7 @@ function Puck({
|
|
7353
7438
|
},
|
7354
7439
|
[dispatch, leftSideBarVisible, rightSideBarVisible]
|
7355
7440
|
);
|
7356
|
-
|
7441
|
+
useEffect24(() => {
|
7357
7442
|
if (!window.matchMedia("(min-width: 638px)").matches) {
|
7358
7443
|
dispatch({
|
7359
7444
|
type: "setUi",
|
@@ -7376,7 +7461,7 @@ function Puck({
|
|
7376
7461
|
window.removeEventListener("resize", handleResize);
|
7377
7462
|
};
|
7378
7463
|
}, []);
|
7379
|
-
const defaultHeaderRender =
|
7464
|
+
const defaultHeaderRender = useMemo19(() => {
|
7380
7465
|
if (renderHeader) {
|
7381
7466
|
console.warn(
|
7382
7467
|
"`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
|
@@ -7390,7 +7475,7 @@ function Puck({
|
|
7390
7475
|
}
|
7391
7476
|
return DefaultOverride;
|
7392
7477
|
}, [renderHeader]);
|
7393
|
-
const defaultHeaderActionsRender =
|
7478
|
+
const defaultHeaderActionsRender = useMemo19(() => {
|
7394
7479
|
if (renderHeaderActions) {
|
7395
7480
|
console.warn(
|
7396
7481
|
"`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
|
@@ -7407,20 +7492,20 @@ function Puck({
|
|
7407
7492
|
overrides,
|
7408
7493
|
plugins
|
7409
7494
|
});
|
7410
|
-
const CustomPuck =
|
7495
|
+
const CustomPuck = useMemo19(
|
7411
7496
|
() => loadedOverrides.puck || DefaultOverride,
|
7412
7497
|
[loadedOverrides]
|
7413
7498
|
);
|
7414
|
-
const CustomHeader =
|
7499
|
+
const CustomHeader = useMemo19(
|
7415
7500
|
() => loadedOverrides.header || defaultHeaderRender,
|
7416
7501
|
[loadedOverrides]
|
7417
7502
|
);
|
7418
|
-
const CustomHeaderActions =
|
7503
|
+
const CustomHeaderActions = useMemo19(
|
7419
7504
|
() => loadedOverrides.headerActions || defaultHeaderActionsRender,
|
7420
7505
|
[loadedOverrides]
|
7421
7506
|
);
|
7422
7507
|
const [mounted, setMounted] = useState26(false);
|
7423
|
-
|
7508
|
+
useEffect24(() => {
|
7424
7509
|
setMounted(true);
|
7425
7510
|
}, []);
|
7426
7511
|
const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
|