@measured/puck 0.19.0-canary.fb0e8e24 → 0.19.1-canary.5f63993d
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/chunk-H4SMAS54.mjs +959 -0
- package/dist/index.css +177 -170
- package/dist/index.d.mts +14 -7
- package/dist/index.d.ts +14 -7
- package/dist/index.js +1355 -1309
- package/dist/index.mjs +1034 -1373
- package/dist/rsc.d.mts +2 -2
- package/dist/rsc.d.ts +2 -2
- package/dist/rsc.js +527 -159
- package/dist/rsc.mjs +3 -1
- package/dist/{walk-tree-CM-cu7GU.d.mts → walk-tree-DBd3aQ_5.d.mts} +30 -23
- package/dist/{walk-tree-CM-cu7GU.d.ts → walk-tree-DBd3aQ_5.d.ts} +30 -23
- package/package.json +12 -7
- package/dist/chunk-COT3ZFIM.mjs +0 -576
package/dist/index.mjs
CHANGED
@@ -4,16 +4,16 @@ import {
|
|
4
4
|
__async,
|
5
5
|
__commonJS,
|
6
6
|
__objRest,
|
7
|
-
__privateAdd,
|
8
|
-
__privateGet,
|
9
|
-
__privateSet,
|
10
7
|
__spreadProps,
|
11
8
|
__spreadValues,
|
12
9
|
__toESM,
|
13
|
-
|
10
|
+
defaultAppState,
|
11
|
+
defaultSlots,
|
12
|
+
defaultViewports,
|
13
|
+
expandNode,
|
14
14
|
getChanged,
|
15
15
|
init_react_import,
|
16
|
-
|
16
|
+
migrate,
|
17
17
|
resolveAllData,
|
18
18
|
resolveComponentData,
|
19
19
|
rootAreaId,
|
@@ -22,8 +22,10 @@ import {
|
|
22
22
|
setupZone,
|
23
23
|
transformProps,
|
24
24
|
useSlots,
|
25
|
+
walkAppState,
|
26
|
+
walkField,
|
25
27
|
walkTree
|
26
|
-
} from "./chunk-
|
28
|
+
} from "./chunk-H4SMAS54.mjs";
|
27
29
|
|
28
30
|
// ../../node_modules/classnames/index.js
|
29
31
|
var require_classnames = __commonJS({
|
@@ -212,7 +214,7 @@ init_react_import();
|
|
212
214
|
|
213
215
|
// css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
|
214
216
|
init_react_import();
|
215
|
-
var styles_module_default2 = { "InputWrapper": "
|
217
|
+
var styles_module_default2 = { "InputWrapper": "_InputWrapper_py9hf_1", "Input-label": "_Input-label_py9hf_5", "Input-labelIcon": "_Input-labelIcon_py9hf_14", "Input-disabledIcon": "_Input-disabledIcon_py9hf_21", "Input-input": "_Input-input_py9hf_26", "Input": "_Input_py9hf_1", "Input--readOnly": "_Input--readOnly_py9hf_76", "Input-radioGroupItems": "_Input-radioGroupItems_py9hf_87", "Input-radio": "_Input-radio_py9hf_87", "Input-radioInner": "_Input-radioInner_py9hf_104", "Input-radioInput": "_Input-radioInput_py9hf_149" };
|
216
218
|
|
217
219
|
// components/AutoField/index.tsx
|
218
220
|
import {
|
@@ -703,198 +705,6 @@ init_react_import();
|
|
703
705
|
|
704
706
|
// reducer/actions/set.ts
|
705
707
|
init_react_import();
|
706
|
-
|
707
|
-
// lib/data/walk-app-state.ts
|
708
|
-
init_react_import();
|
709
|
-
|
710
|
-
// lib/data/for-each-slot.ts
|
711
|
-
init_react_import();
|
712
|
-
var forEachSlot = (item, cb, recursive = false, isSlot2 = isSlot) => {
|
713
|
-
const props = item.props || {};
|
714
|
-
const propKeys = Object.keys(props);
|
715
|
-
for (let i = 0; i < propKeys.length; i++) {
|
716
|
-
const propKey = propKeys[i];
|
717
|
-
const itemType = "type" in item ? item.type : "root";
|
718
|
-
if (isSlot2(itemType, propKey, props[propKey])) {
|
719
|
-
const content = props[propKey];
|
720
|
-
cb(props.id, propKey, content);
|
721
|
-
if (recursive) {
|
722
|
-
content.forEach(
|
723
|
-
(childItem) => __async(void 0, null, function* () {
|
724
|
-
return forEachSlot(childItem, cb, true, isSlot2);
|
725
|
-
})
|
726
|
-
);
|
727
|
-
}
|
728
|
-
}
|
729
|
-
}
|
730
|
-
};
|
731
|
-
|
732
|
-
// lib/data/for-related-zones.ts
|
733
|
-
init_react_import();
|
734
|
-
|
735
|
-
// lib/get-zone-id.ts
|
736
|
-
init_react_import();
|
737
|
-
var getZoneId = (zoneCompound) => {
|
738
|
-
if (!zoneCompound) {
|
739
|
-
return [];
|
740
|
-
}
|
741
|
-
if (zoneCompound && zoneCompound.indexOf(":") > -1) {
|
742
|
-
return zoneCompound.split(":");
|
743
|
-
}
|
744
|
-
return [rootDroppableId, zoneCompound];
|
745
|
-
};
|
746
|
-
|
747
|
-
// lib/data/for-related-zones.ts
|
748
|
-
function forRelatedZones(item, data, cb, path = []) {
|
749
|
-
Object.entries(data.zones || {}).forEach(([zoneCompound, content]) => {
|
750
|
-
const [parentId] = getZoneId(zoneCompound);
|
751
|
-
if (parentId === item.props.id) {
|
752
|
-
cb(path, zoneCompound, content);
|
753
|
-
}
|
754
|
-
});
|
755
|
-
}
|
756
|
-
|
757
|
-
// lib/data/strip-slots.ts
|
758
|
-
init_react_import();
|
759
|
-
var stripSlots = (data) => {
|
760
|
-
return __spreadProps(__spreadValues({}, data), {
|
761
|
-
props: Object.entries(data.props).reduce(
|
762
|
-
(acc, [propKey, propVal]) => {
|
763
|
-
if (isSlot(propVal)) {
|
764
|
-
return acc;
|
765
|
-
}
|
766
|
-
return __spreadProps(__spreadValues({}, acc), { [propKey]: propVal });
|
767
|
-
},
|
768
|
-
{ id: data.props.id }
|
769
|
-
)
|
770
|
-
});
|
771
|
-
};
|
772
|
-
|
773
|
-
// lib/data/walk-app-state.ts
|
774
|
-
function walkAppState(state, config, mapContent = (content) => content, mapNodeOrSkip = (item) => item) {
|
775
|
-
var _a;
|
776
|
-
let newZones = {};
|
777
|
-
const newZoneIndex = {};
|
778
|
-
const newNodeIndex = {};
|
779
|
-
const processContent = (path, zoneCompound, content, zoneType, newId) => {
|
780
|
-
var _a2;
|
781
|
-
const [parentId] = zoneCompound.split(":");
|
782
|
-
const mappedContent = ((_a2 = mapContent(content, zoneCompound, zoneType)) != null ? _a2 : content) || [];
|
783
|
-
const [_2, zone] = zoneCompound.split(":");
|
784
|
-
const newZoneCompound = `${newId || parentId}:${zone}`;
|
785
|
-
const newContent2 = mappedContent.map(
|
786
|
-
(zoneChild, index) => processItem(zoneChild, [...path, newZoneCompound], index)
|
787
|
-
);
|
788
|
-
newZoneIndex[newZoneCompound] = {
|
789
|
-
contentIds: newContent2.map((item) => item.props.id),
|
790
|
-
type: zoneType
|
791
|
-
};
|
792
|
-
return [newZoneCompound, newContent2];
|
793
|
-
};
|
794
|
-
const processRelatedZones = (item, newId, initialPath) => {
|
795
|
-
forRelatedZones(
|
796
|
-
item,
|
797
|
-
state.data,
|
798
|
-
(relatedPath, relatedZoneCompound, relatedContent) => {
|
799
|
-
const [zoneCompound, newContent2] = processContent(
|
800
|
-
relatedPath,
|
801
|
-
relatedZoneCompound,
|
802
|
-
relatedContent,
|
803
|
-
"dropzone",
|
804
|
-
newId
|
805
|
-
);
|
806
|
-
newZones[zoneCompound] = newContent2;
|
807
|
-
},
|
808
|
-
initialPath
|
809
|
-
);
|
810
|
-
};
|
811
|
-
const processItem = (item, path, index) => {
|
812
|
-
const mappedItem = mapNodeOrSkip(item, path, index);
|
813
|
-
if (!mappedItem) return item;
|
814
|
-
const id = mappedItem.props.id;
|
815
|
-
const newProps = __spreadValues({}, mappedItem.props);
|
816
|
-
forEachSlot(
|
817
|
-
mappedItem,
|
818
|
-
(parentId2, slotId, content) => {
|
819
|
-
const zoneCompound = `${parentId2}:${slotId}`;
|
820
|
-
const [_2, newContent2] = processContent(
|
821
|
-
path,
|
822
|
-
zoneCompound,
|
823
|
-
content,
|
824
|
-
"slot",
|
825
|
-
parentId2
|
826
|
-
);
|
827
|
-
newProps[slotId] = newContent2;
|
828
|
-
},
|
829
|
-
false,
|
830
|
-
createIsSlotConfig(config)
|
831
|
-
);
|
832
|
-
processRelatedZones(item, id, path);
|
833
|
-
const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
|
834
|
-
const thisZoneCompound = path[path.length - 1];
|
835
|
-
const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
|
836
|
-
newNodeIndex[id] = {
|
837
|
-
data: newItem,
|
838
|
-
flatData: stripSlots(newItem),
|
839
|
-
path,
|
840
|
-
parentId,
|
841
|
-
zone
|
842
|
-
};
|
843
|
-
const finalData = __spreadProps(__spreadValues({}, newItem), { props: __spreadValues({}, newItem.props) });
|
844
|
-
if (newProps.id === "root") {
|
845
|
-
delete finalData["type"];
|
846
|
-
delete finalData.props["id"];
|
847
|
-
}
|
848
|
-
return finalData;
|
849
|
-
};
|
850
|
-
const zones = state.data.zones || {};
|
851
|
-
const [_, newContent] = processContent(
|
852
|
-
[],
|
853
|
-
rootDroppableId,
|
854
|
-
state.data.content,
|
855
|
-
"root"
|
856
|
-
);
|
857
|
-
const processedContent = newContent;
|
858
|
-
const zonesAlreadyProcessed = Object.keys(newZones);
|
859
|
-
Object.keys(zones || {}).forEach((zoneCompound) => {
|
860
|
-
const [parentId] = zoneCompound.split(":");
|
861
|
-
if (zonesAlreadyProcessed.includes(zoneCompound)) {
|
862
|
-
return;
|
863
|
-
}
|
864
|
-
const [_2, newContent2] = processContent(
|
865
|
-
[rootDroppableId],
|
866
|
-
zoneCompound,
|
867
|
-
zones[zoneCompound],
|
868
|
-
"dropzone",
|
869
|
-
parentId
|
870
|
-
);
|
871
|
-
newZones[zoneCompound] = newContent2;
|
872
|
-
}, newZones);
|
873
|
-
const processedRoot = processItem(
|
874
|
-
{
|
875
|
-
type: "root",
|
876
|
-
props: __spreadProps(__spreadValues({}, (_a = state.data.root.props) != null ? _a : state.data.root), { id: "root" })
|
877
|
-
},
|
878
|
-
[],
|
879
|
-
-1
|
880
|
-
);
|
881
|
-
const root = __spreadProps(__spreadValues({}, state.data.root), {
|
882
|
-
props: processedRoot.props
|
883
|
-
});
|
884
|
-
return __spreadProps(__spreadValues({}, state), {
|
885
|
-
data: {
|
886
|
-
root,
|
887
|
-
content: processedContent,
|
888
|
-
zones: __spreadValues(__spreadValues({}, state.data.zones), newZones)
|
889
|
-
},
|
890
|
-
indexes: {
|
891
|
-
nodes: __spreadValues(__spreadValues({}, state.indexes.nodes), newNodeIndex),
|
892
|
-
zones: __spreadValues(__spreadValues({}, state.indexes.zones), newZoneIndex)
|
893
|
-
}
|
894
|
-
});
|
895
|
-
}
|
896
|
-
|
897
|
-
// reducer/actions/set.ts
|
898
708
|
var setAction = (state, action, appStore) => {
|
899
709
|
if (typeof action.state === "object") {
|
900
710
|
const newState = __spreadValues(__spreadValues({}, state), action.state);
|
@@ -939,7 +749,7 @@ var populateIds = (data, config, override = false) => {
|
|
939
749
|
const id = generateId(data.type);
|
940
750
|
return walkTree(
|
941
751
|
__spreadProps(__spreadValues({}, data), {
|
942
|
-
props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({
|
752
|
+
props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({}, data.props)
|
943
753
|
}),
|
944
754
|
config,
|
945
755
|
(contents) => contents.map((item) => {
|
@@ -1377,14 +1187,6 @@ function createReducer({
|
|
1377
1187
|
);
|
1378
1188
|
}
|
1379
1189
|
|
1380
|
-
// components/ViewportControls/default-viewports.ts
|
1381
|
-
init_react_import();
|
1382
|
-
var defaultViewports = [
|
1383
|
-
{ width: 360, height: "auto", icon: "Smartphone", label: "Small" },
|
1384
|
-
{ width: 768, height: "auto", icon: "Tablet", label: "Medium" },
|
1385
|
-
{ width: 1280, height: "auto", icon: "Monitor", label: "Large" }
|
1386
|
-
];
|
1387
|
-
|
1388
1190
|
// store/index.ts
|
1389
1191
|
import { create as create2, useStore } from "zustand";
|
1390
1192
|
import { subscribeWithSelector as subscribeWithSelector2 } from "zustand/middleware";
|
@@ -1626,7 +1428,11 @@ var createNodesSlice = (set, get) => ({
|
|
1626
1428
|
const s = get().nodes;
|
1627
1429
|
const emptyNode = {
|
1628
1430
|
id,
|
1629
|
-
methods: {
|
1431
|
+
methods: {
|
1432
|
+
sync: () => null,
|
1433
|
+
hideOverlay: () => null,
|
1434
|
+
showOverlay: () => null
|
1435
|
+
},
|
1630
1436
|
element: null
|
1631
1437
|
};
|
1632
1438
|
const existingNode = s.nodes[id];
|
@@ -1816,7 +1622,8 @@ var createFieldsSlice = (_set, _get) => {
|
|
1816
1622
|
return {
|
1817
1623
|
fields: {},
|
1818
1624
|
loading: false,
|
1819
|
-
lastResolvedData: {}
|
1625
|
+
lastResolvedData: {},
|
1626
|
+
id: void 0
|
1820
1627
|
};
|
1821
1628
|
};
|
1822
1629
|
var useRegisterFieldsSlice = (appStore, id) => {
|
@@ -1837,7 +1644,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
|
|
1837
1644
|
let lastFields = fields;
|
1838
1645
|
if (reset) {
|
1839
1646
|
appStore.setState((s) => ({
|
1840
|
-
fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields })
|
1647
|
+
fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields, id })
|
1841
1648
|
}));
|
1842
1649
|
lastFields = defaultFields;
|
1843
1650
|
}
|
@@ -1865,12 +1672,13 @@ var useRegisterFieldsSlice = (appStore, id) => {
|
|
1865
1672
|
fields: {
|
1866
1673
|
fields: newFields,
|
1867
1674
|
loading: false,
|
1868
|
-
lastResolvedData: componentData
|
1675
|
+
lastResolvedData: componentData,
|
1676
|
+
id
|
1869
1677
|
}
|
1870
1678
|
});
|
1871
1679
|
} else {
|
1872
1680
|
appStore.setState((s) => ({
|
1873
|
-
fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields })
|
1681
|
+
fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields, id })
|
1874
1682
|
}));
|
1875
1683
|
}
|
1876
1684
|
}),
|
@@ -1903,31 +1711,6 @@ var toRoot = (item) => {
|
|
1903
1711
|
};
|
1904
1712
|
|
1905
1713
|
// store/index.ts
|
1906
|
-
var defaultAppState = {
|
1907
|
-
data: { content: [], root: {}, zones: {} },
|
1908
|
-
ui: {
|
1909
|
-
leftSideBarVisible: true,
|
1910
|
-
rightSideBarVisible: true,
|
1911
|
-
arrayState: {},
|
1912
|
-
itemSelector: null,
|
1913
|
-
componentList: {},
|
1914
|
-
isDragging: false,
|
1915
|
-
previewMode: "edit",
|
1916
|
-
viewports: {
|
1917
|
-
current: {
|
1918
|
-
width: defaultViewports[0].width,
|
1919
|
-
height: defaultViewports[0].height || "auto"
|
1920
|
-
},
|
1921
|
-
options: [],
|
1922
|
-
controlsVisible: true
|
1923
|
-
},
|
1924
|
-
field: { focus: null }
|
1925
|
-
},
|
1926
|
-
indexes: {
|
1927
|
-
nodes: {},
|
1928
|
-
zones: {}
|
1929
|
-
}
|
1930
|
-
};
|
1931
1714
|
var defaultPageFields = {
|
1932
1715
|
title: { type: "text" }
|
1933
1716
|
};
|
@@ -2116,340 +1899,30 @@ function useAppStoreApi() {
|
|
2116
1899
|
init_react_import();
|
2117
1900
|
import { DragDropProvider } from "@dnd-kit/react";
|
2118
1901
|
|
2119
|
-
// lib/dnd/dnd-kit/safe.ts
|
2120
|
-
init_react_import();
|
2121
|
-
import {
|
2122
|
-
useDraggable,
|
2123
|
-
useDroppable
|
2124
|
-
} from "@dnd-kit/react";
|
2125
|
-
import { useSortable } from "@dnd-kit/react/sortable";
|
2126
|
-
function useDroppableSafe(input) {
|
2127
|
-
if (typeof window === "undefined") {
|
2128
|
-
return { ref: () => {
|
2129
|
-
} };
|
2130
|
-
}
|
2131
|
-
return useDroppable(input);
|
2132
|
-
}
|
2133
|
-
function useDraggableSafe(input) {
|
2134
|
-
if (typeof window === "undefined") {
|
2135
|
-
return { ref: () => {
|
2136
|
-
} };
|
2137
|
-
}
|
2138
|
-
return useDraggable(input);
|
2139
|
-
}
|
2140
|
-
function useSortableSafe(input) {
|
2141
|
-
if (typeof window === "undefined") {
|
2142
|
-
return { ref: () => {
|
2143
|
-
}, status: "idle", handleRef: () => {
|
2144
|
-
} };
|
2145
|
-
}
|
2146
|
-
return useSortable(input);
|
2147
|
-
}
|
2148
|
-
|
2149
1902
|
// lib/dnd/use-sensors.ts
|
2150
1903
|
init_react_import();
|
2151
1904
|
import { useState as useState2 } from "react";
|
2152
|
-
|
2153
|
-
|
2154
|
-
|
2155
|
-
|
2156
|
-
|
2157
|
-
|
2158
|
-
exceedsDistance
|
2159
|
-
} from "@dnd-kit/geometry";
|
2160
|
-
import {
|
2161
|
-
getDocument,
|
2162
|
-
isElement,
|
2163
|
-
isHTMLElement,
|
2164
|
-
isPointerEvent,
|
2165
|
-
Listeners,
|
2166
|
-
getFrameTransform
|
2167
|
-
} from "@dnd-kit/dom/utilities";
|
2168
|
-
var _clearTimeout;
|
2169
|
-
var _PointerSensor = class _PointerSensor extends Sensor {
|
2170
|
-
constructor(manager, options) {
|
2171
|
-
super(manager);
|
2172
|
-
this.manager = manager;
|
2173
|
-
this.options = options;
|
2174
|
-
this.listeners = new Listeners();
|
2175
|
-
this.cleanup = /* @__PURE__ */ new Set();
|
2176
|
-
this.source = void 0;
|
2177
|
-
this.started = false;
|
2178
|
-
__privateAdd(this, _clearTimeout);
|
2179
|
-
this.handleCancel = this.handleCancel.bind(this);
|
2180
|
-
this.handlePointerUp = this.handlePointerUp.bind(this);
|
2181
|
-
this.handleKeyDown = this.handleKeyDown.bind(this);
|
2182
|
-
effect(() => {
|
2183
|
-
const unbindGlobal = this.bindGlobal(options != null ? options : {});
|
2184
|
-
return () => {
|
2185
|
-
unbindGlobal();
|
2186
|
-
};
|
2187
|
-
});
|
2188
|
-
}
|
2189
|
-
bind(source, options = this.options) {
|
2190
|
-
const unbind = effect(() => {
|
2191
|
-
var _a;
|
2192
|
-
const target = (_a = source.handle) != null ? _a : source.element;
|
2193
|
-
const listener = (event) => {
|
2194
|
-
if (isPointerEvent(event)) {
|
2195
|
-
this.handlePointerDown(event, source, options);
|
2196
|
-
}
|
2197
|
-
};
|
2198
|
-
if (target) {
|
2199
|
-
patchWindow(target.ownerDocument.defaultView);
|
2200
|
-
target.addEventListener("pointerdown", listener);
|
2201
|
-
return () => {
|
2202
|
-
target.removeEventListener("pointerdown", listener);
|
2203
|
-
};
|
2204
|
-
}
|
2205
|
-
});
|
2206
|
-
return unbind;
|
2207
|
-
}
|
2208
|
-
bindGlobal(options) {
|
2209
|
-
const documents = /* @__PURE__ */ new Set();
|
2210
|
-
for (const draggable of this.manager.registry.draggables.value) {
|
2211
|
-
if (draggable.element) {
|
2212
|
-
documents.add(getDocument(draggable.element));
|
2213
|
-
}
|
2214
|
-
}
|
2215
|
-
for (const droppable of this.manager.registry.droppables.value) {
|
2216
|
-
if (droppable.element) {
|
2217
|
-
documents.add(getDocument(droppable.element));
|
2218
|
-
}
|
2219
|
-
}
|
2220
|
-
const unbindFns = Array.from(documents).map(
|
2221
|
-
(doc) => this.listeners.bind(doc, [
|
2222
|
-
{
|
2223
|
-
type: "pointermove",
|
2224
|
-
listener: (event) => this.handlePointerMove(event, doc, options)
|
2225
|
-
},
|
2226
|
-
{
|
2227
|
-
type: "pointerup",
|
2228
|
-
listener: this.handlePointerUp,
|
2229
|
-
options: {
|
2230
|
-
capture: true
|
2231
|
-
}
|
2232
|
-
},
|
2233
|
-
{
|
2234
|
-
// Cancel activation if there is a competing Drag and Drop interaction
|
2235
|
-
type: "dragstart",
|
2236
|
-
listener: this.handleDragStart
|
2237
|
-
}
|
2238
|
-
])
|
2239
|
-
);
|
2240
|
-
return () => {
|
2241
|
-
unbindFns.forEach((unbind) => unbind());
|
2242
|
-
};
|
2243
|
-
}
|
2244
|
-
handlePointerDown(event, source, options = {}) {
|
2245
|
-
if (this.disabled || !event.isPrimary || event.button !== 0 || !isElement(event.target) || source.disabled) {
|
2246
|
-
return;
|
2247
|
-
}
|
2248
|
-
const offset = getFrameTransform(source.element);
|
2249
|
-
this.initialCoordinates = {
|
2250
|
-
x: event.clientX * offset.scaleX + offset.x,
|
2251
|
-
y: event.clientY * offset.scaleY + offset.y
|
2252
|
-
};
|
2253
|
-
this.source = source;
|
2254
|
-
const { activationConstraints } = options;
|
2255
|
-
const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
|
2256
|
-
event.stopImmediatePropagation();
|
2257
|
-
if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
|
2258
|
-
this.handleStart(source, event);
|
2259
|
-
} else {
|
2260
|
-
const { delay } = constraints;
|
2261
|
-
if (delay) {
|
2262
|
-
const timeout3 = setTimeout(
|
2263
|
-
() => this.handleStart(source, event),
|
2264
|
-
delay.value
|
2265
|
-
);
|
2266
|
-
__privateSet(this, _clearTimeout, () => {
|
2267
|
-
clearTimeout(timeout3);
|
2268
|
-
__privateSet(this, _clearTimeout, void 0);
|
2269
|
-
});
|
2270
|
-
}
|
2271
|
-
}
|
2272
|
-
const cleanup = () => {
|
2273
|
-
var _a;
|
2274
|
-
(_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
|
2275
|
-
this.initialCoordinates = void 0;
|
2276
|
-
this.source = void 0;
|
2277
|
-
};
|
2278
|
-
this.cleanup.add(cleanup);
|
2279
|
-
}
|
2280
|
-
handlePointerMove(event, doc, options) {
|
2281
|
-
if (!this.source) {
|
2282
|
-
return;
|
2283
|
-
}
|
2284
|
-
const ownerDocument = this.source.element && getDocument(this.source.element);
|
2285
|
-
if (doc !== ownerDocument) {
|
2286
|
-
return;
|
2287
|
-
}
|
2288
|
-
const coordinates = {
|
2289
|
-
x: event.clientX,
|
2290
|
-
y: event.clientY
|
2291
|
-
};
|
2292
|
-
const offset = getFrameTransform(this.source.element);
|
2293
|
-
coordinates.x = coordinates.x * offset.scaleX + offset.x;
|
2294
|
-
coordinates.y = coordinates.y * offset.scaleY + offset.y;
|
2295
|
-
if (this.manager.dragOperation.status.dragging) {
|
2296
|
-
event.preventDefault();
|
2297
|
-
event.stopPropagation();
|
2298
|
-
this.manager.actions.move({ to: coordinates });
|
2299
|
-
return;
|
2300
|
-
}
|
2301
|
-
if (!this.initialCoordinates) {
|
2302
|
-
return;
|
2303
|
-
}
|
2304
|
-
const delta = {
|
2305
|
-
x: coordinates.x - this.initialCoordinates.x,
|
2306
|
-
y: coordinates.y - this.initialCoordinates.y
|
2307
|
-
};
|
2308
|
-
const { activationConstraints } = options;
|
2309
|
-
const constraints = typeof activationConstraints === "function" ? activationConstraints(event, this.source) : activationConstraints;
|
2310
|
-
const { distance, delay } = constraints != null ? constraints : {};
|
2311
|
-
if (distance) {
|
2312
|
-
if (distance.tolerance != null && exceedsDistance(delta, distance.tolerance)) {
|
2313
|
-
return this.handleCancel();
|
2314
|
-
}
|
2315
|
-
if (exceedsDistance(delta, distance.value)) {
|
2316
|
-
return this.handleStart(this.source, event);
|
2317
|
-
}
|
2318
|
-
}
|
2319
|
-
if (delay) {
|
2320
|
-
if (exceedsDistance(delta, delay.tolerance)) {
|
2321
|
-
return this.handleCancel();
|
2322
|
-
}
|
2323
|
-
}
|
2324
|
-
}
|
2325
|
-
handlePointerUp(event) {
|
2326
|
-
if (!this.source) {
|
2327
|
-
return;
|
2328
|
-
}
|
2329
|
-
event.preventDefault();
|
2330
|
-
event.stopPropagation();
|
2331
|
-
const { status } = this.manager.dragOperation;
|
2332
|
-
if (!status.idle) {
|
2333
|
-
const canceled = !status.initialized;
|
2334
|
-
this.manager.actions.stop({ canceled });
|
2335
|
-
} else if (this.started) {
|
2336
|
-
setTimeout(() => {
|
2337
|
-
if (!this.manager.dragOperation.status.idle) {
|
2338
|
-
this.manager.actions.stop({ canceled: false });
|
2339
|
-
}
|
2340
|
-
}, 10);
|
2341
|
-
}
|
2342
|
-
this.cleanup.forEach((cleanup) => cleanup());
|
2343
|
-
this.cleanup.clear();
|
2344
|
-
}
|
2345
|
-
handleKeyDown(event) {
|
2346
|
-
if (event.key === "Escape") {
|
2347
|
-
event.preventDefault();
|
2348
|
-
this.handleCancel();
|
2349
|
-
}
|
2350
|
-
}
|
2351
|
-
handleStart(source, event) {
|
2352
|
-
var _a;
|
2353
|
-
const { manager, initialCoordinates } = this;
|
2354
|
-
(_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
|
2355
|
-
if (!initialCoordinates || manager.dragOperation.status.initialized || this.started) {
|
2356
|
-
return;
|
2357
|
-
}
|
2358
|
-
if (event.defaultPrevented) {
|
2359
|
-
return;
|
2360
|
-
}
|
2361
|
-
this.started = true;
|
2362
|
-
event.preventDefault();
|
2363
|
-
batch(() => {
|
2364
|
-
manager.actions.setDragSource(source.id);
|
2365
|
-
manager.actions.start({ coordinates: initialCoordinates, event });
|
2366
|
-
});
|
2367
|
-
const ownerDocument = getDocument(event.target);
|
2368
|
-
const unbind = this.listeners.bind(ownerDocument, [
|
2369
|
-
{
|
2370
|
-
// Prevent scrolling on touch devices
|
2371
|
-
type: "touchmove",
|
2372
|
-
listener: preventDefault,
|
2373
|
-
options: {
|
2374
|
-
passive: false
|
2375
|
-
}
|
2376
|
-
},
|
2377
|
-
{
|
2378
|
-
// Prevent click events
|
2379
|
-
type: "click",
|
2380
|
-
listener: preventDefault
|
2381
|
-
},
|
2382
|
-
{
|
2383
|
-
type: "keydown",
|
2384
|
-
listener: this.handleKeyDown
|
2385
|
-
}
|
2386
|
-
]);
|
2387
|
-
ownerDocument.body.setPointerCapture(event.pointerId);
|
2388
|
-
this.cleanup.add(unbind);
|
2389
|
-
this.cleanup.add(() => {
|
2390
|
-
this.started = false;
|
2391
|
-
});
|
2392
|
-
}
|
2393
|
-
handleDragStart(event) {
|
2394
|
-
const { target } = event;
|
2395
|
-
if (!isElement(target)) {
|
2396
|
-
return;
|
2397
|
-
}
|
2398
|
-
const isNativeDraggable = isHTMLElement(target) && target.draggable && target.getAttribute("draggable") === "true";
|
2399
|
-
if (isNativeDraggable) {
|
2400
|
-
this.handleCancel();
|
2401
|
-
} else {
|
2402
|
-
preventDefault(event);
|
2403
|
-
}
|
2404
|
-
}
|
2405
|
-
handleCancel() {
|
2406
|
-
const { dragOperation } = this.manager;
|
2407
|
-
if (dragOperation.status.initialized) {
|
2408
|
-
this.manager.actions.stop({ canceled: true });
|
2409
|
-
}
|
2410
|
-
this.cleanup.forEach((cleanup) => cleanup());
|
2411
|
-
this.cleanup.clear();
|
2412
|
-
}
|
2413
|
-
destroy() {
|
2414
|
-
this.listeners.clear();
|
2415
|
-
}
|
1905
|
+
import { PointerSensor } from "@dnd-kit/react";
|
1906
|
+
import { isElement } from "@dnd-kit/dom/utilities";
|
1907
|
+
var touchDefault = { delay: { value: 200, tolerance: 10 } };
|
1908
|
+
var otherDefault = {
|
1909
|
+
delay: { value: 200, tolerance: 10 },
|
1910
|
+
distance: { value: 5 }
|
2416
1911
|
};
|
2417
|
-
_clearTimeout = new WeakMap();
|
2418
|
-
_PointerSensor.configure = configurator(_PointerSensor);
|
2419
|
-
var PointerSensor = _PointerSensor;
|
2420
|
-
function preventDefault(event) {
|
2421
|
-
event.preventDefault();
|
2422
|
-
}
|
2423
|
-
function noop() {
|
2424
|
-
}
|
2425
|
-
var windows = /* @__PURE__ */ new WeakSet();
|
2426
|
-
function patchWindow(window2) {
|
2427
|
-
if (!window2 || windows.has(window2)) {
|
2428
|
-
return;
|
2429
|
-
}
|
2430
|
-
window2.addEventListener("touchmove", noop, {
|
2431
|
-
capture: false,
|
2432
|
-
passive: false
|
2433
|
-
});
|
2434
|
-
windows.add(window2);
|
2435
|
-
}
|
2436
|
-
|
2437
|
-
// lib/dnd/use-sensors.ts
|
2438
|
-
import { isElement as isElement2 } from "@dnd-kit/dom/utilities";
|
2439
1912
|
var useSensors = ({
|
2440
|
-
other,
|
1913
|
+
other = otherDefault,
|
2441
1914
|
mouse,
|
2442
|
-
touch
|
1915
|
+
touch = touchDefault
|
2443
1916
|
} = {
|
2444
|
-
touch:
|
2445
|
-
other:
|
1917
|
+
touch: touchDefault,
|
1918
|
+
other: otherDefault
|
2446
1919
|
}) => {
|
2447
1920
|
const [sensors] = useState2(() => [
|
2448
1921
|
PointerSensor.configure({
|
2449
1922
|
activationConstraints(event, source) {
|
2450
1923
|
var _a;
|
2451
1924
|
const { pointerType, target } = event;
|
2452
|
-
if (pointerType === "mouse" &&
|
1925
|
+
if (pointerType === "mouse" && isElement(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
|
2453
1926
|
return mouse;
|
2454
1927
|
}
|
2455
1928
|
if (pointerType === "touch") {
|
@@ -2619,7 +2092,7 @@ import { Point as Point2 } from "@dnd-kit/geometry";
|
|
2619
2092
|
import { CollisionPriority as CollisionPriority2, CollisionType as CollisionType22 } from "@dnd-kit/abstract";
|
2620
2093
|
import { Point as Point22 } from "@dnd-kit/geometry";
|
2621
2094
|
import { CollisionPriority as CollisionPriority3, CollisionType as CollisionType3 } from "@dnd-kit/abstract";
|
2622
|
-
import { Point as Point3 } from "@dnd-kit/geometry";
|
2095
|
+
import { Point as Point3, Rectangle } from "@dnd-kit/geometry";
|
2623
2096
|
import { CollisionPriority as CollisionPriority4, CollisionType as CollisionType4 } from "@dnd-kit/abstract";
|
2624
2097
|
import { Point as Point4 } from "@dnd-kit/geometry";
|
2625
2098
|
import { CollisionPriority as CollisionPriority5, CollisionType as CollisionType5 } from "@dnd-kit/abstract";
|
@@ -2655,31 +2128,15 @@ var closestCorners = (input) => {
|
|
2655
2128
|
if (!droppable.shape) {
|
2656
2129
|
return null;
|
2657
2130
|
}
|
2658
|
-
const
|
2659
|
-
const
|
2660
|
-
|
2661
|
-
|
2662
|
-
|
2663
|
-
},
|
2664
|
-
{
|
2665
|
-
x: right,
|
2666
|
-
y: top
|
2667
|
-
},
|
2668
|
-
{
|
2669
|
-
x: left,
|
2670
|
-
y: bottom
|
2671
|
-
},
|
2672
|
-
{
|
2673
|
-
x: right,
|
2674
|
-
y: bottom
|
2675
|
-
}
|
2676
|
-
];
|
2677
|
-
const distance = corners.reduce(
|
2678
|
-
(acc, corner) => {
|
2131
|
+
const shapeCorners = shape ? Rectangle.from(shape.current.boundingRectangle).corners : void 0;
|
2132
|
+
const distance = Rectangle.from(
|
2133
|
+
droppable.shape.boundingRectangle
|
2134
|
+
).corners.reduce(
|
2135
|
+
(acc, corner, index) => {
|
2679
2136
|
var _a;
|
2680
2137
|
return acc + Point3.distance(
|
2681
2138
|
Point3.from(corner),
|
2682
|
-
(_a =
|
2139
|
+
(_a = shapeCorners == null ? void 0 : shapeCorners[index]) != null ? _a : position.current
|
2683
2140
|
);
|
2684
2141
|
},
|
2685
2142
|
0
|
@@ -2714,12 +2171,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
2714
2171
|
const { center: dragCenter } = dragShape;
|
2715
2172
|
const { fallbackEnabled } = collisionStore.getState();
|
2716
2173
|
const interval = trackMovementInterval(position.current, dragAxis);
|
2717
|
-
|
2718
|
-
direction: interval.direction
|
2719
|
-
});
|
2720
|
-
const collisionMap = dragOperation.data.collisionMap || {};
|
2721
|
-
dragOperation.data.collisionMap = collisionMap;
|
2722
|
-
collisionMap[droppable.id] = {
|
2174
|
+
const data = {
|
2723
2175
|
direction: interval.direction
|
2724
2176
|
};
|
2725
2177
|
const { center: dropCenter } = dropShape;
|
@@ -2734,7 +2186,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
2734
2186
|
collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
|
2735
2187
|
if (collision) {
|
2736
2188
|
return __spreadProps(__spreadValues({}, collision), {
|
2737
|
-
priority: CollisionPriority7.Highest
|
2189
|
+
priority: CollisionPriority7.Highest,
|
2190
|
+
data
|
2738
2191
|
});
|
2739
2192
|
}
|
2740
2193
|
}
|
@@ -2756,7 +2209,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
2756
2209
|
};
|
2757
2210
|
const shouldFlushId = flushNext === droppable.id;
|
2758
2211
|
flushNext = "";
|
2759
|
-
return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id });
|
2212
|
+
return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id, data });
|
2760
2213
|
}
|
2761
2214
|
if (fallbackEnabled && ((_c = dragOperation.source) == null ? void 0 : _c.id) !== droppable.id) {
|
2762
2215
|
const xAxisIntersection = dropShape.boundingRectangle.right > dragShape.boundingRectangle.left && dropShape.boundingRectangle.left < dragShape.boundingRectangle.right;
|
@@ -2768,9 +2221,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
2768
2221
|
x: dragShape.center.x - (((_d = droppable.shape) == null ? void 0 : _d.center.x) || 0),
|
2769
2222
|
y: dragShape.center.y - (((_e = droppable.shape) == null ? void 0 : _e.center.y) || 0)
|
2770
2223
|
});
|
2771
|
-
|
2772
|
-
direction
|
2773
|
-
};
|
2224
|
+
data.direction = direction;
|
2774
2225
|
if (intersectionArea) {
|
2775
2226
|
collisionDebug(
|
2776
2227
|
dragCenter,
|
@@ -2781,7 +2232,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
2781
2232
|
);
|
2782
2233
|
flushNext = droppable.id;
|
2783
2234
|
return __spreadProps(__spreadValues({}, fallbackCollision), {
|
2784
|
-
priority: CollisionPriority7.Low
|
2235
|
+
priority: CollisionPriority7.Low,
|
2236
|
+
data
|
2785
2237
|
});
|
2786
2238
|
}
|
2787
2239
|
collisionDebug(
|
@@ -2791,16 +2243,19 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
2791
2243
|
"orange",
|
2792
2244
|
direction || ""
|
2793
2245
|
);
|
2794
|
-
return __spreadProps(__spreadValues({}, fallbackCollision), {
|
2246
|
+
return __spreadProps(__spreadValues({}, fallbackCollision), {
|
2247
|
+
priority: CollisionPriority7.Lowest,
|
2248
|
+
data
|
2249
|
+
});
|
2795
2250
|
}
|
2796
2251
|
}
|
2797
2252
|
}
|
2798
2253
|
collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
|
2799
|
-
delete collisionMap[droppable.id];
|
2800
2254
|
return null;
|
2801
2255
|
};
|
2802
2256
|
|
2803
2257
|
// components/Sortable/index.tsx
|
2258
|
+
import { useSortable } from "@dnd-kit/react/sortable";
|
2804
2259
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
2805
2260
|
var SortableProvider = ({
|
2806
2261
|
children,
|
@@ -2820,16 +2275,16 @@ var SortableProvider = ({
|
|
2820
2275
|
return onDragStart((_b = (_a = event.operation.source) == null ? void 0 : _a.id.toString()) != null ? _b : "");
|
2821
2276
|
},
|
2822
2277
|
onDragOver: (event, manager) => {
|
2823
|
-
var _a
|
2278
|
+
var _a;
|
2824
2279
|
event.preventDefault();
|
2825
2280
|
const { operation } = event;
|
2826
2281
|
const { source, target } = operation;
|
2827
2282
|
if (!source || !target) return;
|
2828
2283
|
let sourceIndex = source.data.index;
|
2829
2284
|
let targetIndex = target.data.index;
|
2830
|
-
const collisionData = (
|
2285
|
+
const collisionData = (_a = manager.collisionObserver.collisions[0]) == null ? void 0 : _a.data;
|
2831
2286
|
if (sourceIndex !== targetIndex && source.id !== target.id) {
|
2832
|
-
const collisionPosition = collisionData.direction === "up" ? "before" : "after";
|
2287
|
+
const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" ? "before" : "after";
|
2833
2288
|
if (targetIndex >= sourceIndex) {
|
2834
2289
|
targetIndex = targetIndex - 1;
|
2835
2290
|
}
|
@@ -2860,9 +2315,10 @@ var Sortable = ({
|
|
2860
2315
|
}) => {
|
2861
2316
|
const {
|
2862
2317
|
ref: sortableRef,
|
2863
|
-
|
2318
|
+
isDragging,
|
2319
|
+
isDropping,
|
2864
2320
|
handleRef
|
2865
|
-
} =
|
2321
|
+
} = useSortable({
|
2866
2322
|
id,
|
2867
2323
|
type,
|
2868
2324
|
index,
|
@@ -2870,7 +2326,7 @@ var Sortable = ({
|
|
2870
2326
|
data: { index },
|
2871
2327
|
collisionDetector: createDynamicCollisionDetector("y")
|
2872
2328
|
});
|
2873
|
-
return children({
|
2329
|
+
return children({ isDragging, isDropping, ref: sortableRef, handleRef });
|
2874
2330
|
};
|
2875
2331
|
|
2876
2332
|
// components/AutoField/context.tsx
|
@@ -2995,12 +2451,25 @@ var ArrayField = ({
|
|
2995
2451
|
}
|
2996
2452
|
}, []);
|
2997
2453
|
const [draggedItem, setDraggedItem] = useState3("");
|
2998
|
-
const
|
2454
|
+
const isDraggingAny = !!draggedItem;
|
2999
2455
|
const canEdit = useAppStore(
|
3000
2456
|
(s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
|
3001
2457
|
);
|
3002
2458
|
const forceReadOnly = !canEdit;
|
3003
2459
|
const valueRef = useRef(value);
|
2460
|
+
const uniqifyItem = useCallback2(
|
2461
|
+
(val) => {
|
2462
|
+
if (field.type !== "array" || !field.arrayFields) return;
|
2463
|
+
const config = appStore.getState().config;
|
2464
|
+
return walkField({
|
2465
|
+
value: val,
|
2466
|
+
fields: field.arrayFields,
|
2467
|
+
map: (content) => content.map((item) => populateIds(item, config, true)),
|
2468
|
+
config
|
2469
|
+
});
|
2470
|
+
},
|
2471
|
+
[appStore, field]
|
2472
|
+
);
|
3004
2473
|
if (field.type !== "array" || !field.arrayFields) {
|
3005
2474
|
return null;
|
3006
2475
|
}
|
@@ -3060,13 +2529,13 @@ var ArrayField = ({
|
|
3060
2529
|
id: _arrayId,
|
3061
2530
|
index: i,
|
3062
2531
|
disabled: readOnly,
|
3063
|
-
children: ({
|
2532
|
+
children: ({ isDragging, ref, handleRef }) => /* @__PURE__ */ jsxs3(
|
3064
2533
|
"div",
|
3065
2534
|
{
|
3066
2535
|
ref,
|
3067
2536
|
className: getClassNameItem({
|
3068
2537
|
isExpanded: arrayState.openId === _arrayId,
|
3069
|
-
isDragging
|
2538
|
+
isDragging,
|
3070
2539
|
readOnly
|
3071
2540
|
}),
|
3072
2541
|
children: [
|
@@ -3105,11 +2574,10 @@ var ArrayField = ({
|
|
3105
2574
|
onClick: (e) => {
|
3106
2575
|
e.stopPropagation();
|
3107
2576
|
const existingValue = [...value || []];
|
3108
|
-
|
3109
|
-
i,
|
3110
|
-
0,
|
2577
|
+
const newItem = uniqifyItem(
|
3111
2578
|
existingValue[i]
|
3112
2579
|
);
|
2580
|
+
existingValue.splice(i, 0, newItem);
|
3113
2581
|
const newUi = mapArrayStateToUi(
|
3114
2582
|
regenerateArrayState(existingValue)
|
3115
2583
|
);
|
@@ -3207,12 +2675,14 @@ var ArrayField = ({
|
|
3207
2675
|
type: "button",
|
3208
2676
|
className: getClassName5("addButton"),
|
3209
2677
|
onClick: () => {
|
3210
|
-
|
2678
|
+
var _a;
|
2679
|
+
if (isDraggingAny) return;
|
3211
2680
|
const existingValue = value || [];
|
3212
|
-
const
|
3213
|
-
|
3214
|
-
field.
|
3215
|
-
|
2681
|
+
const newItem = defaultSlots(
|
2682
|
+
uniqifyItem((_a = field.defaultItemProps) != null ? _a : {}),
|
2683
|
+
field.arrayFields
|
2684
|
+
);
|
2685
|
+
const newValue = [...existingValue, newItem];
|
3216
2686
|
const newArrayState = regenerateArrayState(newValue);
|
3217
2687
|
setUi(mapArrayStateToUi(newArrayState), false);
|
3218
2688
|
onChange(newValue);
|
@@ -4112,6 +3582,10 @@ function AutoFieldInternal(props) {
|
|
4112
3582
|
});
|
4113
3583
|
}
|
4114
3584
|
}, []);
|
3585
|
+
const { visible = true } = props.field;
|
3586
|
+
if (!visible) {
|
3587
|
+
return null;
|
3588
|
+
}
|
4115
3589
|
if (field.type === "slot") {
|
4116
3590
|
return null;
|
4117
3591
|
}
|
@@ -4196,7 +3670,7 @@ init_react_import();
|
|
4196
3670
|
|
4197
3671
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css#css-module
|
4198
3672
|
init_react_import();
|
4199
|
-
var styles_module_default10 = { "Drawer": "
|
3673
|
+
var styles_module_default10 = { "Drawer": "_Drawer_pl7z0_1", "Drawer-draggable": "_Drawer-draggable_pl7z0_8", "Drawer-draggableBg": "_Drawer-draggableBg_pl7z0_12", "DrawerItem-draggable": "_DrawerItem-draggable_pl7z0_22", "DrawerItem--disabled": "_DrawerItem--disabled_pl7z0_35", "DrawerItem": "_DrawerItem_pl7z0_22", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_pl7z0_45", "DrawerItem-name": "_DrawerItem-name_pl7z0_63" };
|
4200
3674
|
|
4201
3675
|
// components/Drawer/index.tsx
|
4202
3676
|
import { useMemo as useMemo11, useState as useState15 } from "react";
|
@@ -4206,11 +3680,11 @@ init_react_import();
|
|
4206
3680
|
import { DragDropProvider as DragDropProvider2 } from "@dnd-kit/react";
|
4207
3681
|
import {
|
4208
3682
|
createContext as createContext4,
|
4209
|
-
useCallback as
|
4210
|
-
useContext as
|
4211
|
-
useEffect as
|
3683
|
+
useCallback as useCallback11,
|
3684
|
+
useContext as useContext8,
|
3685
|
+
useEffect as useEffect17,
|
4212
3686
|
useMemo as useMemo10,
|
4213
|
-
useRef as
|
3687
|
+
useRef as useRef5,
|
4214
3688
|
useState as useState14
|
4215
3689
|
} from "react";
|
4216
3690
|
import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
|
@@ -4220,22 +3694,23 @@ init_react_import();
|
|
4220
3694
|
import {
|
4221
3695
|
forwardRef as forwardRef3,
|
4222
3696
|
memo,
|
4223
|
-
useCallback as
|
4224
|
-
useContext as
|
4225
|
-
useEffect as
|
3697
|
+
useCallback as useCallback10,
|
3698
|
+
useContext as useContext7,
|
3699
|
+
useEffect as useEffect16,
|
4226
3700
|
useMemo as useMemo9,
|
4227
|
-
useRef as
|
3701
|
+
useRef as useRef4
|
4228
3702
|
} from "react";
|
4229
3703
|
|
4230
3704
|
// components/DraggableComponent/index.tsx
|
4231
3705
|
init_react_import();
|
4232
3706
|
import {
|
4233
|
-
useCallback as
|
3707
|
+
useCallback as useCallback7,
|
4234
3708
|
useContext as useContext5,
|
4235
|
-
useEffect as
|
3709
|
+
useEffect as useEffect12,
|
4236
3710
|
useMemo as useMemo7,
|
4237
3711
|
useRef as useRef2,
|
4238
|
-
useState as useState10
|
3712
|
+
useState as useState10,
|
3713
|
+
useTransition
|
4239
3714
|
} from "react";
|
4240
3715
|
|
4241
3716
|
// css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
|
@@ -4269,8 +3744,7 @@ init_react_import();
|
|
4269
3744
|
import {
|
4270
3745
|
createContext as createContext3,
|
4271
3746
|
useCallback as useCallback5,
|
4272
|
-
useMemo as useMemo6
|
4273
|
-
useState as useState9
|
3747
|
+
useMemo as useMemo6
|
4274
3748
|
} from "react";
|
4275
3749
|
import { createStore as createStore2 } from "zustand";
|
4276
3750
|
import { Fragment as Fragment5, jsx as jsx19 } from "react/jsx-runtime";
|
@@ -4282,7 +3756,9 @@ var ZoneStoreContext = createContext3(
|
|
4282
3756
|
areaDepthIndex: {},
|
4283
3757
|
nextAreaDepthIndex: {},
|
4284
3758
|
draggedItem: null,
|
4285
|
-
previewIndex: {}
|
3759
|
+
previewIndex: {},
|
3760
|
+
enabledIndex: {},
|
3761
|
+
hoveringComponent: null
|
4286
3762
|
}))
|
4287
3763
|
);
|
4288
3764
|
var ZoneStoreProvider = ({
|
@@ -4295,7 +3771,6 @@ var DropZoneProvider = ({
|
|
4295
3771
|
children,
|
4296
3772
|
value
|
4297
3773
|
}) => {
|
4298
|
-
const [hoveringComponent, setHoveringComponent] = useState9();
|
4299
3774
|
const dispatch = useAppStore((s) => s.dispatch);
|
4300
3775
|
const registerZone = useCallback5(
|
4301
3776
|
(zoneCompound) => {
|
@@ -4317,16 +3792,33 @@ var DropZoneProvider = ({
|
|
4317
3792
|
);
|
4318
3793
|
const memoValue = useMemo6(
|
4319
3794
|
() => __spreadValues({
|
4320
|
-
hoveringComponent,
|
4321
|
-
setHoveringComponent,
|
4322
3795
|
registerZone,
|
4323
3796
|
unregisterZone
|
4324
3797
|
}, value),
|
4325
|
-
[value
|
3798
|
+
[value]
|
4326
3799
|
);
|
4327
3800
|
return /* @__PURE__ */ jsx19(Fragment5, { children: memoValue && /* @__PURE__ */ jsx19(dropZoneContext.Provider, { value: memoValue, children }) });
|
4328
3801
|
};
|
4329
3802
|
|
3803
|
+
// components/DraggableComponent/index.tsx
|
3804
|
+
import { useShallow as useShallow2 } from "zustand/react/shallow";
|
3805
|
+
import { useSortable as useSortable2 } from "@dnd-kit/react/sortable";
|
3806
|
+
|
3807
|
+
// lib/accumulate-transform.ts
|
3808
|
+
init_react_import();
|
3809
|
+
function accumulateTransform(el) {
|
3810
|
+
let matrix = new DOMMatrixReadOnly();
|
3811
|
+
let n = el.parentElement;
|
3812
|
+
while (n && n !== document.documentElement) {
|
3813
|
+
const t = getComputedStyle(n).transform;
|
3814
|
+
if (t && t !== "none") {
|
3815
|
+
matrix = new DOMMatrixReadOnly(t).multiply(matrix);
|
3816
|
+
}
|
3817
|
+
n = n.parentElement;
|
3818
|
+
}
|
3819
|
+
return { scaleX: matrix.a, scaleY: matrix.d };
|
3820
|
+
}
|
3821
|
+
|
4330
3822
|
// lib/use-context-store.ts
|
4331
3823
|
init_react_import();
|
4332
3824
|
import { useContext as useContext4 } from "react";
|
@@ -4340,8 +3832,39 @@ function useContextStore(context, selector) {
|
|
4340
3832
|
return useStore2(store, useShallow(selector));
|
4341
3833
|
}
|
4342
3834
|
|
3835
|
+
// lib/dnd/use-on-drag-finished.ts
|
3836
|
+
init_react_import();
|
3837
|
+
import { useCallback as useCallback6 } from "react";
|
3838
|
+
var useOnDragFinished = (cb, deps = []) => {
|
3839
|
+
const appStore = useAppStoreApi();
|
3840
|
+
return useCallback6(() => {
|
3841
|
+
let dispose = () => {
|
3842
|
+
};
|
3843
|
+
const processDragging = (isDragging2) => {
|
3844
|
+
if (isDragging2) {
|
3845
|
+
cb(false);
|
3846
|
+
} else {
|
3847
|
+
setTimeout(() => {
|
3848
|
+
cb(true);
|
3849
|
+
}, 0);
|
3850
|
+
if (dispose) dispose();
|
3851
|
+
}
|
3852
|
+
};
|
3853
|
+
const isDragging = appStore.getState().state.ui.isDragging;
|
3854
|
+
processDragging(isDragging);
|
3855
|
+
if (isDragging) {
|
3856
|
+
dispose = appStore.subscribe(
|
3857
|
+
(s) => s.state.ui.isDragging,
|
3858
|
+
(isDragging2) => {
|
3859
|
+
processDragging(isDragging2);
|
3860
|
+
}
|
3861
|
+
);
|
3862
|
+
}
|
3863
|
+
return dispose;
|
3864
|
+
}, [appStore, ...deps]);
|
3865
|
+
};
|
3866
|
+
|
4343
3867
|
// components/DraggableComponent/index.tsx
|
4344
|
-
import { useShallow as useShallow2 } from "zustand/react/shallow";
|
4345
3868
|
import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
|
4346
3869
|
var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
|
4347
3870
|
var DEBUG2 = false;
|
@@ -4371,7 +3894,6 @@ var DraggableComponent = ({
|
|
4371
3894
|
isSelected = false,
|
4372
3895
|
debug,
|
4373
3896
|
label,
|
4374
|
-
isEnabled,
|
4375
3897
|
autoDragAxis,
|
4376
3898
|
userDragAxis,
|
4377
3899
|
inDroppableZone = true
|
@@ -4387,7 +3909,7 @@ var DraggableComponent = ({
|
|
4387
3909
|
const iframe = useAppStore((s) => s.iframe);
|
4388
3910
|
const ctx = useContext5(dropZoneContext);
|
4389
3911
|
const [localZones, setLocalZones] = useState10({});
|
4390
|
-
const registerLocalZone =
|
3912
|
+
const registerLocalZone = useCallback7(
|
4391
3913
|
(zoneCompound2, active) => {
|
4392
3914
|
var _a;
|
4393
3915
|
(_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
|
@@ -4397,7 +3919,7 @@ var DraggableComponent = ({
|
|
4397
3919
|
},
|
4398
3920
|
[setLocalZones]
|
4399
3921
|
);
|
4400
|
-
const unregisterLocalZone =
|
3922
|
+
const unregisterLocalZone = useCallback7(
|
4401
3923
|
(zoneCompound2) => {
|
4402
3924
|
var _a;
|
4403
3925
|
(_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
|
@@ -4420,14 +3942,17 @@ var DraggableComponent = ({
|
|
4420
3942
|
return s.permissions.getPermissions({ item });
|
4421
3943
|
})
|
4422
3944
|
);
|
4423
|
-
const
|
4424
|
-
ZoneStoreContext,
|
4425
|
-
(s) => !!s.draggedItem
|
4426
|
-
);
|
4427
|
-
const canCollide = permissions.drag || userIsDragging;
|
4428
|
-
const disabled = !isEnabled || !canCollide;
|
3945
|
+
const zoneStore = useContext5(ZoneStoreContext);
|
4429
3946
|
const [dragAxis, setDragAxis] = useState10(userDragAxis || autoDragAxis);
|
4430
|
-
const
|
3947
|
+
const dynamicCollisionDetector = useMemo7(
|
3948
|
+
() => createDynamicCollisionDetector(dragAxis),
|
3949
|
+
[dragAxis]
|
3950
|
+
);
|
3951
|
+
const {
|
3952
|
+
ref: sortableRef,
|
3953
|
+
isDragging: thisIsDragging,
|
3954
|
+
sortable
|
3955
|
+
} = useSortable2({
|
4431
3956
|
id,
|
4432
3957
|
index,
|
4433
3958
|
group: zoneCompound,
|
@@ -4442,18 +3967,34 @@ var DraggableComponent = ({
|
|
4442
3967
|
path: path || [],
|
4443
3968
|
inDroppableZone
|
4444
3969
|
},
|
4445
|
-
collisionPriority:
|
4446
|
-
collisionDetector:
|
4447
|
-
disabled,
|
3970
|
+
collisionPriority: depth,
|
3971
|
+
collisionDetector: dynamicCollisionDetector,
|
4448
3972
|
// "Out of the way" transition from react-beautiful-dnd
|
4449
3973
|
transition: {
|
4450
3974
|
duration: 200,
|
4451
3975
|
easing: "cubic-bezier(0.2, 0, 0, 1)"
|
4452
|
-
}
|
3976
|
+
},
|
3977
|
+
feedback: "clone"
|
4453
3978
|
});
|
4454
|
-
|
3979
|
+
useEffect12(() => {
|
3980
|
+
const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
|
3981
|
+
sortable.droppable.disabled = !isEnabled;
|
3982
|
+
sortable.draggable.disabled = !permissions.drag;
|
3983
|
+
const cleanup = zoneStore.subscribe((s) => {
|
3984
|
+
sortable.droppable.disabled = !s.enabledIndex[zoneCompound];
|
3985
|
+
});
|
3986
|
+
if (ref.current && !permissions.drag) {
|
3987
|
+
ref.current.setAttribute("data-puck-disabled", "");
|
3988
|
+
return () => {
|
3989
|
+
var _a;
|
3990
|
+
(_a = ref.current) == null ? void 0 : _a.removeAttribute("data-puck-disabled");
|
3991
|
+
cleanup();
|
3992
|
+
};
|
3993
|
+
}
|
3994
|
+
return cleanup;
|
3995
|
+
}, [permissions.drag, zoneCompound]);
|
4455
3996
|
const ref = useRef2(null);
|
4456
|
-
const refSetter =
|
3997
|
+
const refSetter = useCallback7(
|
4457
3998
|
(el) => {
|
4458
3999
|
sortableRef(el);
|
4459
4000
|
if (el) {
|
@@ -4463,13 +4004,13 @@ var DraggableComponent = ({
|
|
4463
4004
|
[sortableRef]
|
4464
4005
|
);
|
4465
4006
|
const [portalEl, setPortalEl] = useState10();
|
4466
|
-
|
4007
|
+
useEffect12(() => {
|
4467
4008
|
var _a, _b, _c;
|
4468
4009
|
setPortalEl(
|
4469
4010
|
iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
|
4470
4011
|
);
|
4471
4012
|
}, [iframe.enabled, ref.current]);
|
4472
|
-
const getStyle =
|
4013
|
+
const getStyle = useCallback7(() => {
|
4473
4014
|
var _a, _b, _c;
|
4474
4015
|
if (!ref.current) return;
|
4475
4016
|
const rect = ref.current.getBoundingClientRect();
|
@@ -4481,40 +4022,61 @@ var DraggableComponent = ({
|
|
4481
4022
|
x: deepScrollPosition.x - portalScroll.x - ((_b = portalContainerRect == null ? void 0 : portalContainerRect.left) != null ? _b : 0),
|
4482
4023
|
y: deepScrollPosition.y - portalScroll.y - ((_c = portalContainerRect == null ? void 0 : portalContainerRect.top) != null ? _c : 0)
|
4483
4024
|
};
|
4025
|
+
const untransformed = {
|
4026
|
+
height: ref.current.offsetHeight,
|
4027
|
+
width: ref.current.offsetWidth
|
4028
|
+
};
|
4029
|
+
const transform = accumulateTransform(ref.current);
|
4484
4030
|
const style2 = {
|
4485
|
-
left: `${rect.left + scroll.x}px`,
|
4486
|
-
top: `${rect.top + scroll.y}px`,
|
4487
|
-
height: `${
|
4488
|
-
width: `${
|
4031
|
+
left: `${(rect.left + scroll.x) / transform.scaleX}px`,
|
4032
|
+
top: `${(rect.top + scroll.y) / transform.scaleY}px`,
|
4033
|
+
height: `${untransformed.height}px`,
|
4034
|
+
width: `${untransformed.width}px`
|
4489
4035
|
};
|
4490
4036
|
return style2;
|
4491
4037
|
}, [ref.current]);
|
4492
4038
|
const [style, setStyle] = useState10();
|
4493
|
-
const sync =
|
4039
|
+
const sync = useCallback7(() => {
|
4494
4040
|
setStyle(getStyle());
|
4495
4041
|
}, [ref.current, iframe]);
|
4496
|
-
|
4497
|
-
if (ref.current
|
4042
|
+
useEffect12(() => {
|
4043
|
+
if (ref.current) {
|
4498
4044
|
const observer = new ResizeObserver(sync);
|
4499
4045
|
observer.observe(ref.current);
|
4500
4046
|
return () => {
|
4501
4047
|
observer.disconnect();
|
4502
4048
|
};
|
4503
4049
|
}
|
4504
|
-
}, [ref.current
|
4050
|
+
}, [ref.current]);
|
4505
4051
|
const registerNode = useAppStore((s) => s.nodes.registerNode);
|
4506
|
-
|
4507
|
-
|
4508
|
-
|
4509
|
-
|
4510
|
-
|
4052
|
+
const hideOverlay = useCallback7(() => {
|
4053
|
+
setIsVisible(false);
|
4054
|
+
}, []);
|
4055
|
+
const showOverlay = useCallback7(() => {
|
4056
|
+
setIsVisible(true);
|
4057
|
+
}, []);
|
4058
|
+
useEffect12(() => {
|
4059
|
+
var _a;
|
4060
|
+
registerNode(id, {
|
4061
|
+
methods: { sync, showOverlay, hideOverlay },
|
4062
|
+
element: (_a = ref.current) != null ? _a : null
|
4063
|
+
});
|
4064
|
+
return () => {
|
4065
|
+
registerNode(id, {
|
4066
|
+
methods: {
|
4067
|
+
sync: () => null,
|
4068
|
+
hideOverlay: () => null,
|
4069
|
+
showOverlay: () => null
|
4070
|
+
},
|
4071
|
+
element: null
|
4072
|
+
});
|
4511
4073
|
};
|
4512
4074
|
}, [id, zoneCompound, index, componentType, sync]);
|
4513
4075
|
const CustomActionBar = useMemo7(
|
4514
4076
|
() => overrides.actionBar || DefaultActionBar,
|
4515
4077
|
[overrides.actionBar]
|
4516
4078
|
);
|
4517
|
-
const onClick =
|
4079
|
+
const onClick = useCallback7(
|
4518
4080
|
(e) => {
|
4519
4081
|
e.stopPropagation();
|
4520
4082
|
dispatch({
|
@@ -4527,7 +4089,7 @@ var DraggableComponent = ({
|
|
4527
4089
|
[index, zoneCompound, id]
|
4528
4090
|
);
|
4529
4091
|
const appStore = useAppStoreApi();
|
4530
|
-
const onSelectParent =
|
4092
|
+
const onSelectParent = useCallback7(() => {
|
4531
4093
|
const { nodes, zones } = appStore.getState().state.indexes;
|
4532
4094
|
const node = nodes[id];
|
4533
4095
|
const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
|
@@ -4548,14 +4110,14 @@ var DraggableComponent = ({
|
|
4548
4110
|
}
|
4549
4111
|
});
|
4550
4112
|
}, [ctx, path]);
|
4551
|
-
const onDuplicate =
|
4113
|
+
const onDuplicate = useCallback7(() => {
|
4552
4114
|
dispatch({
|
4553
4115
|
type: "duplicate",
|
4554
4116
|
sourceIndex: index,
|
4555
4117
|
sourceZone: zoneCompound
|
4556
4118
|
});
|
4557
4119
|
}, [index, zoneCompound]);
|
4558
|
-
const onDelete =
|
4120
|
+
const onDelete = useCallback7(() => {
|
4559
4121
|
dispatch({
|
4560
4122
|
type: "remove",
|
4561
4123
|
index,
|
@@ -4563,13 +4125,17 @@ var DraggableComponent = ({
|
|
4563
4125
|
});
|
4564
4126
|
}, [index, zoneCompound]);
|
4565
4127
|
const [hover, setHover] = useState10(false);
|
4566
|
-
const indicativeHover = (
|
4567
|
-
|
4128
|
+
const indicativeHover = useContextStore(
|
4129
|
+
ZoneStoreContext,
|
4130
|
+
(s) => s.hoveringComponent === id
|
4131
|
+
);
|
4132
|
+
useEffect12(() => {
|
4568
4133
|
if (!ref.current) {
|
4569
4134
|
return;
|
4570
4135
|
}
|
4571
4136
|
const el = ref.current;
|
4572
4137
|
const _onMouseOver = (e) => {
|
4138
|
+
const userIsDragging = !!zoneStore.getState().draggedItem;
|
4573
4139
|
if (userIsDragging) {
|
4574
4140
|
if (thisIsDragging) {
|
4575
4141
|
setHover(true);
|
@@ -4591,18 +4157,12 @@ var DraggableComponent = ({
|
|
4591
4157
|
el.addEventListener("click", onClick);
|
4592
4158
|
el.addEventListener("mouseover", _onMouseOver);
|
4593
4159
|
el.addEventListener("mouseout", _onMouseOut);
|
4594
|
-
if (thisIsDragging) {
|
4595
|
-
el.setAttribute("data-puck-dragging", "");
|
4596
|
-
} else {
|
4597
|
-
el.removeAttribute("data-puck-dragging");
|
4598
|
-
}
|
4599
4160
|
return () => {
|
4600
4161
|
el.removeAttribute("data-puck-component");
|
4601
4162
|
el.removeAttribute("data-puck-dnd");
|
4602
4163
|
el.removeEventListener("click", onClick);
|
4603
4164
|
el.removeEventListener("mouseover", _onMouseOver);
|
4604
4165
|
el.removeEventListener("mouseout", _onMouseOut);
|
4605
|
-
el.removeAttribute("data-puck-dragging");
|
4606
4166
|
};
|
4607
4167
|
}, [
|
4608
4168
|
ref,
|
@@ -4610,29 +4170,43 @@ var DraggableComponent = ({
|
|
4610
4170
|
containsActiveZone,
|
4611
4171
|
zoneCompound,
|
4612
4172
|
id,
|
4613
|
-
userIsDragging,
|
4614
4173
|
thisIsDragging,
|
4615
4174
|
inDroppableZone
|
4616
4175
|
]);
|
4617
|
-
useEffect11(() => {
|
4618
|
-
if (ref.current && disabled) {
|
4619
|
-
ref.current.setAttribute("data-puck-disabled", "");
|
4620
|
-
return () => {
|
4621
|
-
var _a;
|
4622
|
-
(_a = ref.current) == null ? void 0 : _a.removeAttribute("data-puck-disabled");
|
4623
|
-
};
|
4624
|
-
}
|
4625
|
-
}, [disabled, ref]);
|
4626
4176
|
const [isVisible, setIsVisible] = useState10(false);
|
4627
|
-
|
4628
|
-
|
4629
|
-
|
4630
|
-
|
4177
|
+
const [dragFinished, setDragFinished] = useState10(true);
|
4178
|
+
const [_, startTransition] = useTransition();
|
4179
|
+
useEffect12(() => {
|
4180
|
+
startTransition(() => {
|
4181
|
+
if (hover || indicativeHover || isSelected) {
|
4182
|
+
sync();
|
4183
|
+
setIsVisible(true);
|
4184
|
+
setThisWasDragging(false);
|
4185
|
+
} else {
|
4186
|
+
setIsVisible(false);
|
4187
|
+
}
|
4188
|
+
});
|
4189
|
+
}, [hover, indicativeHover, isSelected, iframe]);
|
4190
|
+
const [thisWasDragging, setThisWasDragging] = useState10(false);
|
4191
|
+
const onDragFinished = useOnDragFinished((finished) => {
|
4192
|
+
if (finished) {
|
4193
|
+
startTransition(() => {
|
4194
|
+
sync();
|
4195
|
+
setDragFinished(true);
|
4196
|
+
});
|
4631
4197
|
} else {
|
4632
|
-
|
4198
|
+
setDragFinished(false);
|
4199
|
+
}
|
4200
|
+
});
|
4201
|
+
useEffect12(() => {
|
4202
|
+
if (thisIsDragging) {
|
4203
|
+
setThisWasDragging(true);
|
4633
4204
|
}
|
4634
|
-
}, [
|
4635
|
-
|
4205
|
+
}, [thisIsDragging]);
|
4206
|
+
useEffect12(() => {
|
4207
|
+
if (thisWasDragging) return onDragFinished();
|
4208
|
+
}, [thisWasDragging, onDragFinished]);
|
4209
|
+
const syncActionsPosition = useCallback7(
|
4636
4210
|
(el) => {
|
4637
4211
|
if (el) {
|
4638
4212
|
const view = el.ownerDocument.defaultView;
|
@@ -4657,7 +4231,7 @@ var DraggableComponent = ({
|
|
4657
4231
|
},
|
4658
4232
|
[zoom]
|
4659
4233
|
);
|
4660
|
-
|
4234
|
+
useEffect12(() => {
|
4661
4235
|
if (userDragAxis) {
|
4662
4236
|
setDragAxis(userDragAxis);
|
4663
4237
|
return;
|
@@ -4671,7 +4245,10 @@ var DraggableComponent = ({
|
|
4671
4245
|
}
|
4672
4246
|
setDragAxis(autoDragAxis);
|
4673
4247
|
}, [ref, userDragAxis, autoDragAxis]);
|
4674
|
-
const parentAction = (
|
4248
|
+
const parentAction = useMemo7(
|
4249
|
+
() => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx20(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx20(CornerLeftUp, { size: 16 }) }),
|
4250
|
+
[ctx == null ? void 0 : ctx.areaId]
|
4251
|
+
);
|
4675
4252
|
const nextContextValue = useMemo7(
|
4676
4253
|
() => __spreadProps(__spreadValues({}, ctx), {
|
4677
4254
|
areaId: id,
|
@@ -4692,7 +4269,7 @@ var DraggableComponent = ({
|
|
4692
4269
|
]
|
4693
4270
|
);
|
4694
4271
|
return /* @__PURE__ */ jsxs9(DropZoneProvider, { value: nextContextValue, children: [
|
4695
|
-
isVisible && createPortal2(
|
4272
|
+
dragFinished && isVisible && createPortal2(
|
4696
4273
|
/* @__PURE__ */ jsxs9(
|
4697
4274
|
"div",
|
4698
4275
|
{
|
@@ -4752,11 +4329,15 @@ var DraggableComponent = ({
|
|
4752
4329
|
|
4753
4330
|
// css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
|
4754
4331
|
init_react_import();
|
4755
|
-
var styles_module_default12 = { "DropZone": "
|
4332
|
+
var styles_module_default12 = { "DropZone": "_DropZone_1i2sv_1", "DropZone--hasChildren": "_DropZone--hasChildren_1i2sv_11", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_1i2sv_24", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_1i2sv_25", "DropZone--isRootZone": "_DropZone--isRootZone_1i2sv_25", "DropZone--isDestination": "_DropZone--isDestination_1i2sv_35", "DropZone-item": "_DropZone-item_1i2sv_47", "DropZone-hitbox": "_DropZone-hitbox_1i2sv_51", "DropZone--isEnabled": "_DropZone--isEnabled_1i2sv_59", "DropZone--isAnimating": "_DropZone--isAnimating_1i2sv_68" };
|
4333
|
+
|
4334
|
+
// components/DropZone/index.tsx
|
4335
|
+
import { useDroppable } from "@dnd-kit/react";
|
4756
4336
|
|
4757
4337
|
// components/DropZone/lib/use-min-empty-height.ts
|
4758
4338
|
init_react_import();
|
4759
|
-
import { useEffect as
|
4339
|
+
import { useEffect as useEffect13, useRef as useRef3, useState as useState11 } from "react";
|
4340
|
+
var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
|
4760
4341
|
var useMinEmptyHeight = ({
|
4761
4342
|
zoneCompound,
|
4762
4343
|
userMinEmptyHeight,
|
@@ -4772,32 +4353,52 @@ var useMinEmptyHeight = ({
|
|
4772
4353
|
isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
|
4773
4354
|
};
|
4774
4355
|
});
|
4775
|
-
|
4356
|
+
const numItems = useRef3(0);
|
4357
|
+
const onDragFinished = useOnDragFinished(
|
4358
|
+
(finished) => {
|
4359
|
+
var _a;
|
4360
|
+
if (finished) {
|
4361
|
+
const newNumItems = getNumItems(appStore, zoneCompound);
|
4362
|
+
setPrevHeight(0);
|
4363
|
+
if (newNumItems || numItems.current === 0) {
|
4364
|
+
setIsAnimating(false);
|
4365
|
+
return;
|
4366
|
+
}
|
4367
|
+
const selectedItem = appStore.getState().selectedItem;
|
4368
|
+
const zones = appStore.getState().state.indexes.zones;
|
4369
|
+
const nodes = appStore.getState().nodes;
|
4370
|
+
(_a = nodes.nodes[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.methods.hideOverlay();
|
4371
|
+
setTimeout(() => {
|
4372
|
+
var _a2;
|
4373
|
+
const contentIds = ((_a2 = zones[zoneCompound]) == null ? void 0 : _a2.contentIds) || [];
|
4374
|
+
contentIds.forEach((contentId) => {
|
4375
|
+
const node = nodes.nodes[contentId];
|
4376
|
+
node == null ? void 0 : node.methods.sync();
|
4377
|
+
});
|
4378
|
+
if (selectedItem) {
|
4379
|
+
setTimeout(() => {
|
4380
|
+
var _a3, _b;
|
4381
|
+
(_a3 = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _a3.methods.sync();
|
4382
|
+
(_b = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _b.methods.showOverlay();
|
4383
|
+
}, 200);
|
4384
|
+
}
|
4385
|
+
setIsAnimating(false);
|
4386
|
+
}, 100);
|
4387
|
+
}
|
4388
|
+
},
|
4389
|
+
[appStore, prevHeight, zoneCompound]
|
4390
|
+
);
|
4391
|
+
useEffect13(() => {
|
4776
4392
|
if (draggedItem && ref.current) {
|
4777
4393
|
if (isZone) {
|
4778
4394
|
const rect = ref.current.getBoundingClientRect();
|
4395
|
+
numItems.current = getNumItems(appStore, zoneCompound);
|
4779
4396
|
setPrevHeight(rect.height);
|
4780
4397
|
setIsAnimating(true);
|
4781
|
-
return;
|
4398
|
+
return onDragFinished();
|
4782
4399
|
}
|
4783
4400
|
}
|
4784
|
-
|
4785
|
-
setTimeout(() => {
|
4786
|
-
var _a, _b;
|
4787
|
-
const zones = appStore.getState().state.indexes.zones;
|
4788
|
-
const nodes = appStore.getState().nodes;
|
4789
|
-
const selectedItem = appStore.getState().selectedItem;
|
4790
|
-
const contentIds = ((_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) || [];
|
4791
|
-
contentIds.forEach((contentId) => {
|
4792
|
-
const node = nodes.nodes[contentId];
|
4793
|
-
node == null ? void 0 : node.methods.sync();
|
4794
|
-
});
|
4795
|
-
if (selectedItem) {
|
4796
|
-
(_b = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _b.methods.sync();
|
4797
|
-
}
|
4798
|
-
setIsAnimating(false);
|
4799
|
-
}, 400);
|
4800
|
-
}, [ref.current, draggedItem, zoneCompound]);
|
4401
|
+
}, [ref.current, draggedItem, onDragFinished]);
|
4801
4402
|
return [prevHeight || userMinEmptyHeight, isAnimating];
|
4802
4403
|
};
|
4803
4404
|
|
@@ -4818,15 +4419,15 @@ function assignRefs(refs, node) {
|
|
4818
4419
|
|
4819
4420
|
// components/DropZone/lib/use-content-with-preview.ts
|
4820
4421
|
init_react_import();
|
4821
|
-
import { useEffect as
|
4422
|
+
import { useContext as useContext6, useEffect as useEffect14, useState as useState12 } from "react";
|
4822
4423
|
|
4823
4424
|
// lib/dnd/use-rendered-callback.ts
|
4824
4425
|
init_react_import();
|
4825
4426
|
import { useDragDropManager } from "@dnd-kit/react";
|
4826
|
-
import { useCallback as
|
4427
|
+
import { useCallback as useCallback8 } from "react";
|
4827
4428
|
function useRenderedCallback(callback, deps) {
|
4828
4429
|
const manager = useDragDropManager();
|
4829
|
-
return
|
4430
|
+
return useCallback8(
|
4830
4431
|
(...args) => __async(this, null, function* () {
|
4831
4432
|
yield manager == null ? void 0 : manager.renderer.rendering;
|
4832
4433
|
return callback(...args);
|
@@ -4837,16 +4438,10 @@ function useRenderedCallback(callback, deps) {
|
|
4837
4438
|
|
4838
4439
|
// components/DropZone/lib/use-content-with-preview.ts
|
4839
4440
|
var useContentIdsWithPreview = (contentIds, zoneCompound) => {
|
4840
|
-
const
|
4441
|
+
const zoneStore = useContext6(ZoneStoreContext);
|
4442
|
+
const preview = useContextStore(
|
4841
4443
|
ZoneStoreContext,
|
4842
|
-
(s) =>
|
4843
|
-
var _a;
|
4844
|
-
return {
|
4845
|
-
draggedItemId: (_a = s.draggedItem) == null ? void 0 : _a.id,
|
4846
|
-
preview: s.previewIndex[zoneCompound],
|
4847
|
-
previewExists: Object.keys(s.previewIndex || {}).length > 0
|
4848
|
-
};
|
4849
|
-
}
|
4444
|
+
(s) => s.previewIndex[zoneCompound]
|
4850
4445
|
);
|
4851
4446
|
const isDragging = useAppStore((s) => s.state.ui.isDragging);
|
4852
4447
|
const [contentIdsWithPreview, setContentIdsWithPreview] = useState12(contentIds);
|
@@ -4854,7 +4449,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
|
|
4854
4449
|
preview
|
4855
4450
|
);
|
4856
4451
|
const updateContent = useRenderedCallback(
|
4857
|
-
(contentIds2, preview2, isDragging2) => {
|
4452
|
+
(contentIds2, preview2, isDragging2, draggedItemId, previewExists) => {
|
4858
4453
|
if (isDragging2 && !previewExists) {
|
4859
4454
|
return;
|
4860
4455
|
}
|
@@ -4883,17 +4478,27 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
|
|
4883
4478
|
}
|
4884
4479
|
setLocalPreview(preview2);
|
4885
4480
|
},
|
4886
|
-
[
|
4481
|
+
[]
|
4887
4482
|
);
|
4888
|
-
|
4889
|
-
|
4483
|
+
useEffect14(() => {
|
4484
|
+
var _a;
|
4485
|
+
const s = zoneStore.getState();
|
4486
|
+
const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
|
4487
|
+
const previewExists = Object.keys(s.previewIndex || {}).length > 0;
|
4488
|
+
updateContent(
|
4489
|
+
contentIds,
|
4490
|
+
preview,
|
4491
|
+
isDragging,
|
4492
|
+
draggedItemId,
|
4493
|
+
previewExists
|
4494
|
+
);
|
4890
4495
|
}, [contentIds, preview, isDragging]);
|
4891
4496
|
return [contentIdsWithPreview, localPreview];
|
4892
4497
|
};
|
4893
4498
|
|
4894
4499
|
// components/DropZone/lib/use-drag-axis.ts
|
4895
4500
|
init_react_import();
|
4896
|
-
import { useCallback as
|
4501
|
+
import { useCallback as useCallback9, useEffect as useEffect15, useState as useState13 } from "react";
|
4897
4502
|
var GRID_DRAG_AXIS = "dynamic";
|
4898
4503
|
var FLEX_ROW_DRAG_AXIS = "x";
|
4899
4504
|
var DEFAULT_DRAG_AXIS = "y";
|
@@ -4902,7 +4507,7 @@ var useDragAxis = (ref, collisionAxis) => {
|
|
4902
4507
|
const [dragAxis, setDragAxis] = useState13(
|
4903
4508
|
collisionAxis || DEFAULT_DRAG_AXIS
|
4904
4509
|
);
|
4905
|
-
const calculateDragAxis =
|
4510
|
+
const calculateDragAxis = useCallback9(() => {
|
4906
4511
|
if (ref.current) {
|
4907
4512
|
const computedStyle = window.getComputedStyle(ref.current);
|
4908
4513
|
if (computedStyle.display === "grid") {
|
@@ -4914,7 +4519,7 @@ var useDragAxis = (ref, collisionAxis) => {
|
|
4914
4519
|
}
|
4915
4520
|
}
|
4916
4521
|
}, [ref.current]);
|
4917
|
-
|
4522
|
+
useEffect15(() => {
|
4918
4523
|
const onViewportChange = () => {
|
4919
4524
|
calculateDragAxis();
|
4920
4525
|
};
|
@@ -4923,12 +4528,12 @@ var useDragAxis = (ref, collisionAxis) => {
|
|
4923
4528
|
window.removeEventListener("viewportchange", onViewportChange);
|
4924
4529
|
};
|
4925
4530
|
}, []);
|
4926
|
-
|
4531
|
+
useEffect15(calculateDragAxis, [status, collisionAxis]);
|
4927
4532
|
return [dragAxis, calculateDragAxis];
|
4928
4533
|
};
|
4929
4534
|
|
4930
4535
|
// components/DropZone/index.tsx
|
4931
|
-
import { useShallow as
|
4536
|
+
import { useShallow as useShallow4 } from "zustand/react/shallow";
|
4932
4537
|
|
4933
4538
|
// components/Render/index.tsx
|
4934
4539
|
init_react_import();
|
@@ -4936,6 +4541,7 @@ import React3, { useMemo as useMemo8 } from "react";
|
|
4936
4541
|
|
4937
4542
|
// components/SlotRender/index.tsx
|
4938
4543
|
init_react_import();
|
4544
|
+
import { useShallow as useShallow3 } from "zustand/react/shallow";
|
4939
4545
|
import { jsx as jsx21 } from "react/jsx-runtime";
|
4940
4546
|
var ContextSlotRender = ({
|
4941
4547
|
componentId,
|
@@ -4944,10 +4550,12 @@ var ContextSlotRender = ({
|
|
4944
4550
|
const config = useAppStore((s) => s.config);
|
4945
4551
|
const metadata = useAppStore((s) => s.metadata);
|
4946
4552
|
const slotContent = useAppStore(
|
4947
|
-
(s) => {
|
4553
|
+
useShallow3((s) => {
|
4948
4554
|
var _a, _b;
|
4949
|
-
|
4950
|
-
|
4555
|
+
const indexes = s.state.indexes;
|
4556
|
+
const contentIds = (_b = (_a = indexes.zones[`${componentId}:${zone}`]) == null ? void 0 : _a.contentIds) != null ? _b : [];
|
4557
|
+
return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
|
4558
|
+
})
|
4951
4559
|
);
|
4952
4560
|
return /* @__PURE__ */ jsx21(
|
4953
4561
|
SlotRenderPure,
|
@@ -4977,7 +4585,7 @@ function Render({
|
|
4977
4585
|
root: data.root || {},
|
4978
4586
|
content: data.content || []
|
4979
4587
|
});
|
4980
|
-
const rootProps = defaultedData.root.props
|
4588
|
+
const rootProps = "props" in defaultedData.root ? defaultedData.root.props : defaultedData.root;
|
4981
4589
|
const title = (rootProps == null ? void 0 : rootProps.title) || "";
|
4982
4590
|
const pageProps = __spreadProps(__spreadValues({}, rootProps), {
|
4983
4591
|
puck: {
|
@@ -4990,7 +4598,11 @@ function Render({
|
|
4990
4598
|
editMode: false,
|
4991
4599
|
id: "puck-root"
|
4992
4600
|
});
|
4993
|
-
const propsWithSlots = useSlots(
|
4601
|
+
const propsWithSlots = useSlots(
|
4602
|
+
config,
|
4603
|
+
{ type: "root", props: pageProps },
|
4604
|
+
(props) => /* @__PURE__ */ jsx22(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
|
4605
|
+
);
|
4994
4606
|
const nextContextValue = useMemo8(
|
4995
4607
|
() => ({
|
4996
4608
|
mode: "render",
|
@@ -5013,19 +4625,18 @@ var DropZoneEditPure = (props) => /* @__PURE__ */ jsx23(DropZoneEdit, __spreadVa
|
|
5013
4625
|
var DropZoneChild = ({
|
5014
4626
|
zoneCompound,
|
5015
4627
|
componentId,
|
5016
|
-
preview,
|
5017
4628
|
index,
|
5018
|
-
isEnabled,
|
5019
4629
|
dragAxis,
|
5020
4630
|
collisionAxis,
|
5021
4631
|
inDroppableZone
|
5022
4632
|
}) => {
|
5023
4633
|
var _a, _b;
|
5024
4634
|
const metadata = useAppStore((s) => s.metadata);
|
5025
|
-
const ctx =
|
4635
|
+
const ctx = useContext7(dropZoneContext);
|
5026
4636
|
const { depth = 1 } = ctx != null ? ctx : {};
|
4637
|
+
const zoneStore = useContext7(ZoneStoreContext);
|
5027
4638
|
const nodeProps = useAppStore(
|
5028
|
-
|
4639
|
+
useShallow4((s) => {
|
5029
4640
|
var _a2;
|
5030
4641
|
return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.flatData.props;
|
5031
4642
|
})
|
@@ -5037,22 +4648,42 @@ var DropZoneChild = ({
|
|
5037
4648
|
}
|
5038
4649
|
);
|
5039
4650
|
const nodeReadOnly = useAppStore(
|
5040
|
-
|
4651
|
+
useShallow4((s) => {
|
5041
4652
|
var _a2;
|
5042
4653
|
return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.readOnly;
|
5043
4654
|
})
|
5044
4655
|
);
|
5045
|
-
const
|
5046
|
-
const item =
|
4656
|
+
const appStore = useAppStoreApi();
|
4657
|
+
const item = useMemo9(() => {
|
4658
|
+
if (nodeProps) {
|
4659
|
+
const expanded = expandNode({
|
4660
|
+
type: nodeType,
|
4661
|
+
props: nodeProps
|
4662
|
+
});
|
4663
|
+
return expanded;
|
4664
|
+
}
|
4665
|
+
const preview = zoneStore.getState().previewIndex[zoneCompound];
|
4666
|
+
if (componentId === (preview == null ? void 0 : preview.props.id)) {
|
4667
|
+
return {
|
4668
|
+
type: preview.componentType,
|
4669
|
+
props: preview.props,
|
4670
|
+
previewType: preview.type
|
4671
|
+
};
|
4672
|
+
}
|
4673
|
+
return null;
|
4674
|
+
}, [appStore, componentId, zoneCompound, nodeType, nodeProps]);
|
5047
4675
|
const componentConfig = useAppStore(
|
5048
4676
|
(s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
|
5049
4677
|
);
|
5050
|
-
const puckProps =
|
5051
|
-
|
5052
|
-
|
5053
|
-
|
5054
|
-
|
5055
|
-
|
4678
|
+
const puckProps = useMemo9(
|
4679
|
+
() => ({
|
4680
|
+
renderDropZone: DropZoneEditPure,
|
4681
|
+
isEditing: true,
|
4682
|
+
dragRef: null,
|
4683
|
+
metadata: __spreadValues(__spreadValues({}, metadata), componentConfig == null ? void 0 : componentConfig.metadata)
|
4684
|
+
}),
|
4685
|
+
[metadata, componentConfig == null ? void 0 : componentConfig.metadata]
|
4686
|
+
);
|
5056
4687
|
const overrides = useAppStore((s) => s.overrides);
|
5057
4688
|
const isLoading = useAppStore(
|
5058
4689
|
(s) => {
|
@@ -5068,7 +4699,7 @@ var DropZoneChild = ({
|
|
5068
4699
|
);
|
5069
4700
|
let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
|
5070
4701
|
const renderPreview = useMemo9(
|
5071
|
-
() => function
|
4702
|
+
() => function Preview3() {
|
5072
4703
|
return /* @__PURE__ */ jsx23(DrawerItemInner, { name: label, children: overrides.componentItem });
|
5073
4704
|
},
|
5074
4705
|
[componentId, label, overrides]
|
@@ -5081,9 +4712,17 @@ var DropZoneChild = ({
|
|
5081
4712
|
}),
|
5082
4713
|
[componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
|
5083
4714
|
);
|
4715
|
+
const defaultedNode = useMemo9(
|
4716
|
+
() => {
|
4717
|
+
var _a2;
|
4718
|
+
return { type: (_a2 = item == null ? void 0 : item.type) != null ? _a2 : nodeType, props: defaultsProps };
|
4719
|
+
},
|
4720
|
+
[item == null ? void 0 : item.type, nodeType, defaultsProps]
|
4721
|
+
);
|
4722
|
+
const config = useAppStore((s) => s.config);
|
5084
4723
|
const defaultedPropsWithSlots = useSlots(
|
5085
|
-
|
5086
|
-
|
4724
|
+
config,
|
4725
|
+
defaultedNode,
|
5087
4726
|
DropZoneEditPure,
|
5088
4727
|
(slotProps) => /* @__PURE__ */ jsx23(ContextSlotRender, { componentId, zone: slotProps.zone }),
|
5089
4728
|
nodeReadOnly,
|
@@ -5095,8 +4734,8 @@ var DropZoneChild = ({
|
|
5095
4734
|
item.type
|
5096
4735
|
] });
|
5097
4736
|
let componentType = item.type;
|
5098
|
-
const
|
5099
|
-
if (
|
4737
|
+
const isInserting = "previewType" in item ? item.previewType === "insert" : false;
|
4738
|
+
if (isInserting) {
|
5100
4739
|
Render2 = renderPreview;
|
5101
4740
|
}
|
5102
4741
|
return /* @__PURE__ */ jsx23(
|
@@ -5110,11 +4749,10 @@ var DropZoneChild = ({
|
|
5110
4749
|
isLoading,
|
5111
4750
|
isSelected,
|
5112
4751
|
label,
|
5113
|
-
isEnabled,
|
5114
4752
|
autoDragAxis: dragAxis,
|
5115
4753
|
userDragAxis: collisionAxis,
|
5116
4754
|
inDroppableZone,
|
5117
|
-
children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !
|
4755
|
+
children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx23(Fragment6, { children: /* @__PURE__ */ jsx23(
|
5118
4756
|
Render2,
|
5119
4757
|
__spreadProps(__spreadValues({}, defaultedPropsWithSlots), {
|
5120
4758
|
puck: __spreadProps(__spreadValues({}, defaultedPropsWithSlots.puck), {
|
@@ -5136,7 +4774,7 @@ var DropZoneEdit = forwardRef3(
|
|
5136
4774
|
minEmptyHeight: userMinEmptyHeight = 128,
|
5137
4775
|
collisionAxis
|
5138
4776
|
}, userRef) {
|
5139
|
-
const ctx =
|
4777
|
+
const ctx = useContext7(dropZoneContext);
|
5140
4778
|
const {
|
5141
4779
|
// These all need setting via context
|
5142
4780
|
areaId,
|
@@ -5145,7 +4783,7 @@ var DropZoneEdit = forwardRef3(
|
|
5145
4783
|
unregisterLocalZone
|
5146
4784
|
} = ctx != null ? ctx : {};
|
5147
4785
|
const path = useAppStore(
|
5148
|
-
|
4786
|
+
useShallow4((s) => {
|
5149
4787
|
var _a;
|
5150
4788
|
return areaId ? (_a = s.state.indexes.nodes[areaId]) == null ? void 0 : _a.path : null;
|
5151
4789
|
})
|
@@ -5157,39 +4795,24 @@ var DropZoneEdit = forwardRef3(
|
|
5157
4795
|
}
|
5158
4796
|
}
|
5159
4797
|
const isRootZone = zoneCompound === rootDroppableId || zone === rootDroppableId || areaId === "root";
|
5160
|
-
const
|
5161
|
-
|
5162
|
-
|
5163
|
-
|
5164
|
-
userIsDragging
|
5165
|
-
} = useContextStore(ZoneStoreContext, (s) => {
|
5166
|
-
var _a, _b;
|
5167
|
-
return {
|
5168
|
-
isDeepestZone: (_a = s.zoneDepthIndex[zoneCompound]) != null ? _a : false,
|
5169
|
-
inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
|
5170
|
-
draggedComponentType: (_b = s.draggedItem) == null ? void 0 : _b.data.componentType,
|
5171
|
-
userIsDragging: !!s.draggedItem
|
5172
|
-
};
|
5173
|
-
});
|
4798
|
+
const inNextDeepestArea = useContextStore(
|
4799
|
+
ZoneStoreContext,
|
4800
|
+
(s) => s.nextAreaDepthIndex[areaId || ""]
|
4801
|
+
);
|
5174
4802
|
const zoneContentIds = useAppStore(
|
5175
|
-
|
4803
|
+
useShallow4((s) => {
|
5176
4804
|
var _a;
|
5177
4805
|
return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds;
|
5178
4806
|
})
|
5179
4807
|
);
|
5180
4808
|
const zoneType = useAppStore(
|
5181
|
-
|
4809
|
+
useShallow4((s) => {
|
5182
4810
|
var _a;
|
5183
4811
|
return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
|
5184
4812
|
})
|
5185
4813
|
);
|
5186
|
-
|
4814
|
+
useEffect16(() => {
|
5187
4815
|
if (!zoneType || zoneType === "dropzone") {
|
5188
|
-
if (zoneCompound !== rootDroppableId) {
|
5189
|
-
console.warn(
|
5190
|
-
"DropZones have been deprecated in favor of slot fields and will be removed in a future version of Puck. Please see the migration guide: https://www.puckeditor.com/docs/guides/migrations/dropzones-to-slots"
|
5191
|
-
);
|
5192
|
-
}
|
5193
4816
|
if (ctx == null ? void 0 : ctx.registerZone) {
|
5194
4817
|
ctx == null ? void 0 : ctx.registerZone(zoneCompound);
|
5195
4818
|
}
|
@@ -5200,11 +4823,20 @@ var DropZoneEdit = forwardRef3(
|
|
5200
4823
|
};
|
5201
4824
|
}
|
5202
4825
|
}, [zoneType]);
|
4826
|
+
useEffect16(() => {
|
4827
|
+
if (zoneType === "dropzone") {
|
4828
|
+
if (zoneCompound !== rootDroppableId) {
|
4829
|
+
console.warn(
|
4830
|
+
"DropZones have been deprecated in favor of slot fields and will be removed in a future version of Puck. Please see the migration guide: https://www.puckeditor.com/docs/guides/migrations/dropzones-to-slots"
|
4831
|
+
);
|
4832
|
+
}
|
4833
|
+
}
|
4834
|
+
}, [zoneType]);
|
5203
4835
|
const contentIds = useMemo9(() => {
|
5204
4836
|
return zoneContentIds || [];
|
5205
4837
|
}, [zoneContentIds]);
|
5206
|
-
const ref =
|
5207
|
-
const acceptsTarget =
|
4838
|
+
const ref = useRef4(null);
|
4839
|
+
const acceptsTarget = useCallback10(
|
5208
4840
|
(componentType) => {
|
5209
4841
|
if (!componentType) {
|
5210
4842
|
return true;
|
@@ -5226,29 +4858,44 @@ var DropZoneEdit = forwardRef3(
|
|
5226
4858
|
},
|
5227
4859
|
[allow, disallow]
|
5228
4860
|
);
|
5229
|
-
|
4861
|
+
const targetAccepted = useContextStore(ZoneStoreContext, (s) => {
|
4862
|
+
var _a;
|
4863
|
+
const draggedComponentType = (_a = s.draggedItem) == null ? void 0 : _a.data.componentType;
|
4864
|
+
return acceptsTarget(draggedComponentType);
|
4865
|
+
});
|
4866
|
+
const hoveringOverArea = inNextDeepestArea || isRootZone;
|
4867
|
+
const isEnabled = useContextStore(ZoneStoreContext, (s) => {
|
4868
|
+
var _a;
|
4869
|
+
let _isEnabled = true;
|
4870
|
+
const isDeepestZone = (_a = s.zoneDepthIndex[zoneCompound]) != null ? _a : false;
|
4871
|
+
_isEnabled = isDeepestZone;
|
4872
|
+
if (_isEnabled) {
|
4873
|
+
_isEnabled = targetAccepted;
|
4874
|
+
}
|
4875
|
+
return _isEnabled;
|
4876
|
+
});
|
4877
|
+
useEffect16(() => {
|
5230
4878
|
if (registerLocalZone) {
|
5231
|
-
registerLocalZone(zoneCompound,
|
4879
|
+
registerLocalZone(zoneCompound, targetAccepted || isEnabled);
|
5232
4880
|
}
|
5233
4881
|
return () => {
|
5234
4882
|
if (unregisterLocalZone) {
|
5235
4883
|
unregisterLocalZone(zoneCompound);
|
5236
4884
|
}
|
5237
4885
|
};
|
5238
|
-
}, [
|
5239
|
-
const hoveringOverArea = inNextDeepestArea || isRootZone;
|
5240
|
-
let isEnabled = true;
|
5241
|
-
if (userIsDragging) {
|
5242
|
-
isEnabled = isDeepestZone;
|
5243
|
-
}
|
5244
|
-
if (isEnabled) {
|
5245
|
-
isEnabled = acceptsTarget(draggedComponentType);
|
5246
|
-
}
|
4886
|
+
}, [targetAccepted, isEnabled, zoneCompound]);
|
5247
4887
|
const [contentIdsWithPreview, preview] = useContentIdsWithPreview(
|
5248
4888
|
contentIds,
|
5249
4889
|
zoneCompound
|
5250
4890
|
);
|
5251
4891
|
const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
|
4892
|
+
const zoneStore = useContext7(ZoneStoreContext);
|
4893
|
+
useEffect16(() => {
|
4894
|
+
const { enabledIndex } = zoneStore.getState();
|
4895
|
+
zoneStore.setState({
|
4896
|
+
enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
|
4897
|
+
});
|
4898
|
+
}, [isEnabled, zoneStore, zoneCompound]);
|
5252
4899
|
const droppableConfig = {
|
5253
4900
|
id: zoneCompound,
|
5254
4901
|
collisionPriority: isEnabled ? depth : 0,
|
@@ -5258,11 +4905,11 @@ var DropZoneEdit = forwardRef3(
|
|
5258
4905
|
data: {
|
5259
4906
|
areaId,
|
5260
4907
|
depth,
|
5261
|
-
isDroppableTarget:
|
4908
|
+
isDroppableTarget: targetAccepted,
|
5262
4909
|
path: path || []
|
5263
4910
|
}
|
5264
4911
|
};
|
5265
|
-
const { ref: dropRef } =
|
4912
|
+
const { ref: dropRef } = useDroppable(droppableConfig);
|
5266
4913
|
const isAreaSelected = useAppStore(
|
5267
4914
|
(s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
|
5268
4915
|
);
|
@@ -5277,7 +4924,6 @@ var DropZoneEdit = forwardRef3(
|
|
5277
4924
|
{
|
5278
4925
|
className: `${getClassName17({
|
5279
4926
|
isRootZone,
|
5280
|
-
userIsDragging,
|
5281
4927
|
hoveringOverArea,
|
5282
4928
|
isEnabled,
|
5283
4929
|
isAreaSelected,
|
@@ -5299,12 +4945,10 @@ var DropZoneEdit = forwardRef3(
|
|
5299
4945
|
{
|
5300
4946
|
zoneCompound,
|
5301
4947
|
componentId,
|
5302
|
-
preview,
|
5303
4948
|
dragAxis,
|
5304
|
-
isEnabled,
|
5305
4949
|
index: i,
|
5306
4950
|
collisionAxis,
|
5307
|
-
inDroppableZone:
|
4951
|
+
inDroppableZone: targetAccepted
|
5308
4952
|
},
|
5309
4953
|
componentId
|
5310
4954
|
);
|
@@ -5319,7 +4963,7 @@ var DropZoneRenderItem = ({
|
|
5319
4963
|
metadata
|
5320
4964
|
}) => {
|
5321
4965
|
const Component = config.components[item.type];
|
5322
|
-
const props = useSlots(
|
4966
|
+
const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx23(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
|
5323
4967
|
const nextContextValue = useMemo9(
|
5324
4968
|
() => ({
|
5325
4969
|
areaId: props.id,
|
@@ -5340,12 +4984,12 @@ var DropZoneRenderItem = ({
|
|
5340
4984
|
var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx23(DropZoneRender, __spreadValues({}, props));
|
5341
4985
|
var DropZoneRender = forwardRef3(
|
5342
4986
|
function DropZoneRenderInternal({ className, style, zone }, ref) {
|
5343
|
-
const ctx =
|
4987
|
+
const ctx = useContext7(dropZoneContext);
|
5344
4988
|
const { areaId = "root" } = ctx || {};
|
5345
|
-
const { config, data, metadata } =
|
4989
|
+
const { config, data, metadata } = useContext7(renderContext);
|
5346
4990
|
let zoneCompound = rootDroppableId;
|
5347
4991
|
let content = (data == null ? void 0 : data.content) || [];
|
5348
|
-
|
4992
|
+
useEffect16(() => {
|
5349
4993
|
if (!content) {
|
5350
4994
|
if (ctx == null ? void 0 : ctx.registerZone) {
|
5351
4995
|
ctx == null ? void 0 : ctx.registerZone(zoneCompound);
|
@@ -5384,7 +5028,7 @@ var DropZoneRender = forwardRef3(
|
|
5384
5028
|
var DropZonePure = (props) => /* @__PURE__ */ jsx23(DropZone, __spreadValues({}, props));
|
5385
5029
|
var DropZone = forwardRef3(
|
5386
5030
|
function DropZone2(props, ref) {
|
5387
|
-
const ctx =
|
5031
|
+
const ctx = useContext7(dropZoneContext);
|
5388
5032
|
if ((ctx == null ? void 0 : ctx.mode) === "edit") {
|
5389
5033
|
return /* @__PURE__ */ jsx23(Fragment6, { children: /* @__PURE__ */ jsx23(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
|
5390
5034
|
}
|
@@ -5395,7 +5039,6 @@ var DropZone = forwardRef3(
|
|
5395
5039
|
// lib/dnd/NestedDroppablePlugin.ts
|
5396
5040
|
init_react_import();
|
5397
5041
|
import { Plugin } from "@dnd-kit/abstract";
|
5398
|
-
import { effects } from "@dnd-kit/state";
|
5399
5042
|
|
5400
5043
|
// lib/throttle.ts
|
5401
5044
|
init_react_import();
|
@@ -5444,7 +5087,7 @@ var GlobalPosition = class {
|
|
5444
5087
|
var _a;
|
5445
5088
|
this.target = target;
|
5446
5089
|
this.original = original;
|
5447
|
-
this.frameEl = document.querySelector("#preview-frame");
|
5090
|
+
this.frameEl = document.querySelector("iframe#preview-frame");
|
5448
5091
|
if (this.frameEl) {
|
5449
5092
|
this.frameRect = this.frameEl.getBoundingClientRect();
|
5450
5093
|
this.scaleFactor = this.frameRect.width / (((_a = this.frameEl.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
|
@@ -5509,7 +5152,7 @@ var depthSort = (candidates) => {
|
|
5509
5152
|
return 0;
|
5510
5153
|
});
|
5511
5154
|
};
|
5512
|
-
var
|
5155
|
+
var getZoneId = (candidate) => {
|
5513
5156
|
let id = candidate == null ? void 0 : candidate.id;
|
5514
5157
|
if (!candidate) return null;
|
5515
5158
|
if (candidate.type === "component") {
|
@@ -5524,6 +5167,7 @@ var getZoneId2 = (candidate) => {
|
|
5524
5167
|
}
|
5525
5168
|
return id;
|
5526
5169
|
};
|
5170
|
+
var BUFFER = 6;
|
5527
5171
|
var getPointerCollisions = (position, manager) => {
|
5528
5172
|
const candidates = [];
|
5529
5173
|
let elements = position.target.ownerDocument.elementsFromPoint(
|
@@ -5547,13 +5191,26 @@ var getPointerCollisions = (position, manager) => {
|
|
5547
5191
|
for (let i = 0; i < elements.length; i++) {
|
5548
5192
|
const element = elements[i];
|
5549
5193
|
const dropzoneId = element.getAttribute("data-puck-dropzone");
|
5194
|
+
const id = element.getAttribute("data-puck-dnd");
|
5195
|
+
const isVoid = element.hasAttribute("data-puck-dnd-void");
|
5196
|
+
if (BUFFER && (dropzoneId || id) && !isVoid) {
|
5197
|
+
const box = element.getBoundingClientRect();
|
5198
|
+
const contractedBox = {
|
5199
|
+
left: box.left + BUFFER,
|
5200
|
+
right: box.right - BUFFER,
|
5201
|
+
top: box.top + BUFFER,
|
5202
|
+
bottom: box.bottom - BUFFER
|
5203
|
+
};
|
5204
|
+
if (position.frame.x < contractedBox.left || position.frame.x > contractedBox.right || position.frame.y > contractedBox.bottom || position.frame.y < contractedBox.top) {
|
5205
|
+
continue;
|
5206
|
+
}
|
5207
|
+
}
|
5550
5208
|
if (dropzoneId) {
|
5551
5209
|
const droppable = manager.registry.droppables.get(dropzoneId);
|
5552
5210
|
if (droppable) {
|
5553
5211
|
candidates.push(droppable);
|
5554
5212
|
}
|
5555
5213
|
}
|
5556
|
-
const id = element.getAttribute("data-puck-dnd");
|
5557
5214
|
if (id) {
|
5558
5215
|
const droppable = manager.registry.droppables.get(id);
|
5559
5216
|
if (droppable) {
|
@@ -5602,13 +5259,16 @@ var findDeepestCandidate = (position, manager) => {
|
|
5602
5259
|
return true;
|
5603
5260
|
});
|
5604
5261
|
filteredCandidates.reverse();
|
5605
|
-
const
|
5606
|
-
const
|
5262
|
+
const primaryCandidate = filteredCandidates[0];
|
5263
|
+
const primaryCandidateData = primaryCandidate.data;
|
5264
|
+
const primaryCandidateIsComponent = "containsActiveZone" in primaryCandidateData;
|
5265
|
+
const zone = getZoneId(primaryCandidate);
|
5266
|
+
const area = primaryCandidateIsComponent && primaryCandidateData.containsActiveZone ? filteredCandidates[0].id : (_a = filteredCandidates[0]) == null ? void 0 : _a.data.areaId;
|
5607
5267
|
return { zone, area };
|
5608
5268
|
}
|
5609
5269
|
return {
|
5610
|
-
zone:
|
5611
|
-
area:
|
5270
|
+
zone: rootDroppableId,
|
5271
|
+
area: rootAreaId
|
5612
5272
|
};
|
5613
5273
|
};
|
5614
5274
|
var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlugin extends Plugin {
|
@@ -5617,7 +5277,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
|
|
5617
5277
|
if (typeof window === "undefined") {
|
5618
5278
|
return;
|
5619
5279
|
}
|
5620
|
-
|
5280
|
+
this.registerEffect(() => {
|
5621
5281
|
const handleMove = (event) => {
|
5622
5282
|
const target = event instanceof BubbledPointerEvent ? event.originalTarget || event.target : event.target;
|
5623
5283
|
const position = new GlobalPosition(target, {
|
@@ -5641,12 +5301,12 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
|
|
5641
5301
|
capture: true
|
5642
5302
|
// dndkit's PointerSensor prevents propagation during drag
|
5643
5303
|
});
|
5644
|
-
|
5304
|
+
const cleanup = () => {
|
5645
5305
|
document.body.removeEventListener("pointermove", handlePointerMove, {
|
5646
5306
|
capture: true
|
5647
5307
|
});
|
5648
|
-
cleanupEffect();
|
5649
5308
|
};
|
5309
|
+
return cleanup;
|
5650
5310
|
});
|
5651
5311
|
}
|
5652
5312
|
};
|
@@ -5706,14 +5366,15 @@ function getDeepDir(el) {
|
|
5706
5366
|
}
|
5707
5367
|
|
5708
5368
|
// components/DragDropContext/index.tsx
|
5369
|
+
import { effect } from "@dnd-kit/state";
|
5709
5370
|
import { jsx as jsx24 } from "react/jsx-runtime";
|
5710
5371
|
var DEBUG3 = false;
|
5711
5372
|
var dragListenerContext = createContext4({
|
5712
5373
|
dragListeners: {}
|
5713
5374
|
});
|
5714
5375
|
function useDragListener(type, fn, deps = []) {
|
5715
|
-
const { setDragListeners } =
|
5716
|
-
|
5376
|
+
const { setDragListeners } = useContext8(dragListenerContext);
|
5377
|
+
useEffect17(() => {
|
5717
5378
|
if (setDragListeners) {
|
5718
5379
|
setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
|
5719
5380
|
[type]: [...old[type] || [], fn]
|
@@ -5723,8 +5384,8 @@ function useDragListener(type, fn, deps = []) {
|
|
5723
5384
|
}
|
5724
5385
|
var AREA_CHANGE_DEBOUNCE_MS = 100;
|
5725
5386
|
var useTempDisableFallback = (timeout3) => {
|
5726
|
-
const lastFallbackDisable =
|
5727
|
-
return
|
5387
|
+
const lastFallbackDisable = useRef5(null);
|
5388
|
+
return useCallback11((manager) => {
|
5728
5389
|
collisionStore.setState({ fallbackEnabled: false });
|
5729
5390
|
const fallbackId = generateId();
|
5730
5391
|
lastFallbackDisable.current = fallbackId;
|
@@ -5743,7 +5404,7 @@ var DragDropContextClient = ({
|
|
5743
5404
|
const dispatch = useAppStore((s) => s.dispatch);
|
5744
5405
|
const appStore = useAppStoreApi();
|
5745
5406
|
const id = useSafeId();
|
5746
|
-
const debouncedParamsRef =
|
5407
|
+
const debouncedParamsRef = useRef5(null);
|
5747
5408
|
const tempDisableFallback = useTempDisableFallback(100);
|
5748
5409
|
const [zoneStore] = useState14(
|
5749
5410
|
() => createStore3(() => ({
|
@@ -5752,10 +5413,12 @@ var DragDropContextClient = ({
|
|
5752
5413
|
areaDepthIndex: {},
|
5753
5414
|
nextAreaDepthIndex: {},
|
5754
5415
|
draggedItem: null,
|
5755
|
-
previewIndex: {}
|
5416
|
+
previewIndex: {},
|
5417
|
+
enabledIndex: {},
|
5418
|
+
hoveringComponent: null
|
5756
5419
|
}))
|
5757
5420
|
);
|
5758
|
-
const getChanged2 =
|
5421
|
+
const getChanged2 = useCallback11(
|
5759
5422
|
(params, id2) => {
|
5760
5423
|
const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
|
5761
5424
|
const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
|
@@ -5776,7 +5439,7 @@ var DragDropContextClient = ({
|
|
5776
5439
|
},
|
5777
5440
|
[zoneStore]
|
5778
5441
|
);
|
5779
|
-
const setDeepestAndCollide =
|
5442
|
+
const setDeepestAndCollide = useCallback11(
|
5780
5443
|
(params, manager) => {
|
5781
5444
|
const { zoneChanged, areaChanged } = getChanged2(params, id);
|
5782
5445
|
if (!zoneChanged && !areaChanged) return;
|
@@ -5800,7 +5463,7 @@ var DragDropContextClient = ({
|
|
5800
5463
|
setDeepestDb.cancel();
|
5801
5464
|
debouncedParamsRef.current = null;
|
5802
5465
|
};
|
5803
|
-
|
5466
|
+
useEffect17(() => {
|
5804
5467
|
if (DEBUG3) {
|
5805
5468
|
zoneStore.subscribe(
|
5806
5469
|
(s) => {
|
@@ -5863,8 +5526,8 @@ var DragDropContextClient = ({
|
|
5863
5526
|
]);
|
5864
5527
|
const sensors = useSensors();
|
5865
5528
|
const [dragListeners, setDragListeners] = useState14({});
|
5866
|
-
const dragMode =
|
5867
|
-
const initialSelector =
|
5529
|
+
const dragMode = useRef5(null);
|
5530
|
+
const initialSelector = useRef5(void 0);
|
5868
5531
|
const nextContextValue = useMemo10(
|
5869
5532
|
() => ({
|
5870
5533
|
mode: "edit",
|
@@ -5886,7 +5549,9 @@ var DragDropContextClient = ({
|
|
5886
5549
|
plugins,
|
5887
5550
|
sensors,
|
5888
5551
|
onDragEnd: (event, manager) => {
|
5889
|
-
var _a;
|
5552
|
+
var _a, _b;
|
5553
|
+
const entryEl = (_a = getFrame()) == null ? void 0 : _a.querySelector("[data-puck-entry]");
|
5554
|
+
entryEl == null ? void 0 : entryEl.removeAttribute("data-puck-dragging");
|
5890
5555
|
const { source, target } = event.operation;
|
5891
5556
|
if (!source) {
|
5892
5557
|
zoneStore.setState({ draggedItem: null });
|
@@ -5894,9 +5559,9 @@ var DragDropContextClient = ({
|
|
5894
5559
|
}
|
5895
5560
|
const { zone, index } = source.data;
|
5896
5561
|
const { previewIndex = {} } = zoneStore.getState() || {};
|
5897
|
-
const thisPreview = ((
|
5898
|
-
|
5899
|
-
var _a2,
|
5562
|
+
const thisPreview = ((_b = previewIndex[zone]) == null ? void 0 : _b.props.id) === source.id ? previewIndex[zone] : null;
|
5563
|
+
const onAnimationEnd = () => {
|
5564
|
+
var _a2, _b2;
|
5900
5565
|
zoneStore.setState({ draggedItem: null });
|
5901
5566
|
if (event.canceled || (target == null ? void 0 : target.type) === "void") {
|
5902
5567
|
zoneStore.setState({ previewIndex: {} });
|
@@ -5932,23 +5597,28 @@ var DragDropContextClient = ({
|
|
5932
5597
|
});
|
5933
5598
|
}
|
5934
5599
|
}
|
5935
|
-
|
5936
|
-
|
5937
|
-
|
5938
|
-
|
5939
|
-
|
5940
|
-
|
5941
|
-
|
5942
|
-
|
5943
|
-
|
5944
|
-
}, 50);
|
5945
|
-
(_b = dragListeners.dragend) == null ? void 0 : _b.forEach((fn) => {
|
5600
|
+
dispatch({
|
5601
|
+
type: "setUi",
|
5602
|
+
ui: {
|
5603
|
+
itemSelector: { index, zone },
|
5604
|
+
isDragging: false
|
5605
|
+
},
|
5606
|
+
recordHistory: true
|
5607
|
+
});
|
5608
|
+
(_b2 = dragListeners.dragend) == null ? void 0 : _b2.forEach((fn) => {
|
5946
5609
|
fn(event, manager);
|
5947
5610
|
});
|
5948
|
-
}
|
5611
|
+
};
|
5612
|
+
let dispose;
|
5613
|
+
dispose = effect(() => {
|
5614
|
+
if (source.status === "idle") {
|
5615
|
+
onAnimationEnd();
|
5616
|
+
dispose == null ? void 0 : dispose();
|
5617
|
+
}
|
5618
|
+
});
|
5949
5619
|
},
|
5950
5620
|
onDragOver: (event, manager) => {
|
5951
|
-
var _a, _b, _c, _d
|
5621
|
+
var _a, _b, _c, _d;
|
5952
5622
|
event.preventDefault();
|
5953
5623
|
const draggedItem = (_a = zoneStore.getState()) == null ? void 0 : _a.draggedItem;
|
5954
5624
|
if (!draggedItem) return;
|
@@ -5966,7 +5636,7 @@ var DragDropContextClient = ({
|
|
5966
5636
|
const targetData = target.data;
|
5967
5637
|
targetZone = targetData.zone;
|
5968
5638
|
targetIndex = targetData.index;
|
5969
|
-
const collisionData = (
|
5639
|
+
const collisionData = (_b = manager.collisionObserver.collisions[0]) == null ? void 0 : _b.data;
|
5970
5640
|
const dir = getDeepDir(target.element);
|
5971
5641
|
const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" || dir === "ltr" && (collisionData == null ? void 0 : collisionData.direction) === "left" || dir === "rtl" && (collisionData == null ? void 0 : collisionData.direction) === "right" ? "before" : "after";
|
5972
5642
|
if (targetIndex >= sourceIndex && sourceZone === targetZone) {
|
@@ -5979,7 +5649,7 @@ var DragDropContextClient = ({
|
|
5979
5649
|
targetZone = target.id.toString();
|
5980
5650
|
targetIndex = 0;
|
5981
5651
|
}
|
5982
|
-
const path = ((
|
5652
|
+
const path = ((_c = appStore.getState().state.indexes.nodes[target.id]) == null ? void 0 : _c.path) || [];
|
5983
5653
|
if (targetId === sourceId || path.find((path2) => {
|
5984
5654
|
const [pathId] = path2.split(":");
|
5985
5655
|
return pathId === sourceId;
|
@@ -6025,16 +5695,12 @@ var DragDropContextClient = ({
|
|
6025
5695
|
});
|
6026
5696
|
}
|
6027
5697
|
}
|
6028
|
-
(
|
5698
|
+
(_d = dragListeners.dragover) == null ? void 0 : _d.forEach((fn) => {
|
6029
5699
|
fn(event, manager);
|
6030
5700
|
});
|
6031
5701
|
},
|
6032
5702
|
onDragStart: (event, manager) => {
|
6033
5703
|
var _a;
|
6034
|
-
dispatch({
|
6035
|
-
type: "setUi",
|
6036
|
-
ui: { itemSelector: null, isDragging: true }
|
6037
|
-
});
|
6038
5704
|
const { source } = event.operation;
|
6039
5705
|
if (source && source.type !== "void") {
|
6040
5706
|
const sourceData = source.data;
|
@@ -6064,11 +5730,31 @@ var DragDropContextClient = ({
|
|
6064
5730
|
});
|
6065
5731
|
},
|
6066
5732
|
onBeforeDragStart: (event) => {
|
6067
|
-
var _a;
|
6068
|
-
const isNewComponent = ((_a = event.operation.source) == null ? void 0 : _a.
|
5733
|
+
var _a, _b, _c, _d;
|
5734
|
+
const isNewComponent = ((_a = event.operation.source) == null ? void 0 : _a.type) === "drawer";
|
6069
5735
|
dragMode.current = isNewComponent ? "new" : "existing";
|
6070
5736
|
initialSelector.current = void 0;
|
6071
5737
|
zoneStore.setState({ draggedItem: event.operation.source });
|
5738
|
+
if (((_b = appStore.getState().selectedItem) == null ? void 0 : _b.props.id) !== ((_c = event.operation.source) == null ? void 0 : _c.id)) {
|
5739
|
+
dispatch({
|
5740
|
+
type: "setUi",
|
5741
|
+
ui: {
|
5742
|
+
itemSelector: null,
|
5743
|
+
isDragging: true
|
5744
|
+
},
|
5745
|
+
recordHistory: false
|
5746
|
+
});
|
5747
|
+
} else {
|
5748
|
+
dispatch({
|
5749
|
+
type: "setUi",
|
5750
|
+
ui: {
|
5751
|
+
isDragging: true
|
5752
|
+
},
|
5753
|
+
recordHistory: false
|
5754
|
+
});
|
5755
|
+
}
|
5756
|
+
const entryEl = (_d = getFrame()) == null ? void 0 : _d.querySelector("[data-puck-entry]");
|
5757
|
+
entryEl == null ? void 0 : entryEl.setAttribute("data-puck-dragging", "true");
|
6072
5758
|
},
|
6073
5759
|
children: /* @__PURE__ */ jsx24(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx24(DropZoneProvider, { value: nextContextValue, children }) })
|
6074
5760
|
}
|
@@ -6088,6 +5774,7 @@ var DragDropContext = ({
|
|
6088
5774
|
};
|
6089
5775
|
|
6090
5776
|
// components/Drawer/index.tsx
|
5777
|
+
import { useDraggable, useDroppable as useDroppable2 } from "@dnd-kit/react";
|
6091
5778
|
import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
|
6092
5779
|
var getClassName18 = get_class_name_factory_default("Drawer", styles_module_default10);
|
6093
5780
|
var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
|
@@ -6124,10 +5811,11 @@ var DrawerItemDraggable = ({
|
|
6124
5811
|
id,
|
6125
5812
|
isDragDisabled
|
6126
5813
|
}) => {
|
6127
|
-
const { ref } =
|
5814
|
+
const { ref } = useDraggable({
|
6128
5815
|
id,
|
6129
|
-
data: {
|
6130
|
-
disabled: isDragDisabled
|
5816
|
+
data: { componentType: name },
|
5817
|
+
disabled: isDragDisabled,
|
5818
|
+
type: "drawer"
|
6131
5819
|
});
|
6132
5820
|
return /* @__PURE__ */ jsxs11("div", { className: getClassName18("draggable"), children: [
|
6133
5821
|
/* @__PURE__ */ jsx25("div", { className: getClassName18("draggableBg"), children: /* @__PURE__ */ jsx25(DrawerItemInner, { name, label, children }) }),
|
@@ -6192,7 +5880,7 @@ var Drawer = ({
|
|
6192
5880
|
);
|
6193
5881
|
}
|
6194
5882
|
const id = useSafeId();
|
6195
|
-
const { ref } =
|
5883
|
+
const { ref } = useDroppable2({
|
6196
5884
|
id,
|
6197
5885
|
type: "void",
|
6198
5886
|
collisionPriority: 0
|
@@ -6205,6 +5893,7 @@ var Drawer = ({
|
|
6205
5893
|
ref,
|
6206
5894
|
"data-puck-dnd": id,
|
6207
5895
|
"data-puck-drawer": true,
|
5896
|
+
"data-puck-dnd-void": true,
|
6208
5897
|
children
|
6209
5898
|
}
|
6210
5899
|
);
|
@@ -6215,11 +5904,12 @@ Drawer.Item = DrawerItem;
|
|
6215
5904
|
init_react_import();
|
6216
5905
|
import {
|
6217
5906
|
createContext as createContext7,
|
6218
|
-
useCallback as
|
6219
|
-
useContext as
|
6220
|
-
useEffect as
|
6221
|
-
useMemo as
|
6222
|
-
|
5907
|
+
useCallback as useCallback18,
|
5908
|
+
useContext as useContext12,
|
5909
|
+
useEffect as useEffect25,
|
5910
|
+
useMemo as useMemo21,
|
5911
|
+
useRef as useRef8,
|
5912
|
+
useState as useState23
|
6223
5913
|
} from "react";
|
6224
5914
|
|
6225
5915
|
// components/SidebarSection/index.tsx
|
@@ -6315,70 +6005,26 @@ var SidebarSection = ({
|
|
6315
6005
|
);
|
6316
6006
|
};
|
6317
6007
|
|
6318
|
-
// components/MenuBar/index.tsx
|
6319
|
-
init_react_import();
|
6320
|
-
|
6321
|
-
// css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
|
6322
|
-
init_react_import();
|
6323
|
-
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" };
|
6324
|
-
|
6325
|
-
// components/MenuBar/index.tsx
|
6326
|
-
import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
|
6327
|
-
var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
|
6328
|
-
function MenuBar({
|
6329
|
-
menuOpen = false,
|
6330
|
-
renderHeaderActions,
|
6331
|
-
setMenuOpen
|
6332
|
-
}) {
|
6333
|
-
const back = useAppStore((s) => s.history.back);
|
6334
|
-
const forward = useAppStore((s) => s.history.forward);
|
6335
|
-
const hasFuture = useAppStore((s) => s.history.hasFuture());
|
6336
|
-
const hasPast = useAppStore((s) => s.history.hasPast());
|
6337
|
-
return /* @__PURE__ */ jsx27(
|
6338
|
-
"div",
|
6339
|
-
{
|
6340
|
-
className: getClassName20({ menuOpen }),
|
6341
|
-
onClick: (event) => {
|
6342
|
-
var _a;
|
6343
|
-
const element = event.target;
|
6344
|
-
if (window.matchMedia("(min-width: 638px)").matches) {
|
6345
|
-
return;
|
6346
|
-
}
|
6347
|
-
if (element.tagName === "A" && ((_a = element.getAttribute("href")) == null ? void 0 : _a.startsWith("#"))) {
|
6348
|
-
setMenuOpen(false);
|
6349
|
-
}
|
6350
|
-
},
|
6351
|
-
children: /* @__PURE__ */ jsxs13("div", { className: getClassName20("inner"), children: [
|
6352
|
-
/* @__PURE__ */ jsxs13("div", { className: getClassName20("history"), children: [
|
6353
|
-
/* @__PURE__ */ jsx27(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx27(Undo2, { size: 21 }) }),
|
6354
|
-
/* @__PURE__ */ jsx27(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx27(Redo2, { size: 21 }) })
|
6355
|
-
] }),
|
6356
|
-
/* @__PURE__ */ jsx27(Fragment7, { children: renderHeaderActions && renderHeaderActions() })
|
6357
|
-
] })
|
6358
|
-
}
|
6359
|
-
);
|
6360
|
-
}
|
6361
|
-
|
6362
6008
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
|
6363
6009
|
init_react_import();
|
6364
|
-
var
|
6010
|
+
var styles_module_default14 = { "Puck": "_Puck_dnlfp_19", "Puck-portal": "_Puck-portal_dnlfp_31", "PuckLayout-inner": "_PuckLayout-inner_dnlfp_38", "PuckLayout--mounted": "_PuckLayout--mounted_dnlfp_50", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_dnlfp_54", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_dnlfp_60", "PuckLayout-mounted": "_PuckLayout-mounted_dnlfp_74", "PuckLayout": "_PuckLayout_dnlfp_38", "PuckLayout-leftSideBar": "_PuckLayout-leftSideBar_dnlfp_115", "PuckLayout-rightSideBar": "_PuckLayout-rightSideBar_dnlfp_124" };
|
6365
6011
|
|
6366
6012
|
// components/Puck/components/Fields/index.tsx
|
6367
6013
|
init_react_import();
|
6368
6014
|
|
6369
6015
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
|
6370
6016
|
init_react_import();
|
6371
|
-
var
|
6017
|
+
var styles_module_default15 = { "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" };
|
6372
6018
|
|
6373
6019
|
// components/Puck/components/Fields/index.tsx
|
6374
|
-
import { useCallback as
|
6375
|
-
import { useShallow as
|
6376
|
-
import { Fragment as
|
6377
|
-
var
|
6020
|
+
import { memo as memo2, useCallback as useCallback12, useMemo as useMemo13 } from "react";
|
6021
|
+
import { useShallow as useShallow5 } from "zustand/react/shallow";
|
6022
|
+
import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
|
6023
|
+
var getClassName20 = get_class_name_factory_default("PuckFields", styles_module_default15);
|
6378
6024
|
var DefaultFields = ({
|
6379
6025
|
children
|
6380
6026
|
}) => {
|
6381
|
-
return /* @__PURE__ */
|
6027
|
+
return /* @__PURE__ */ jsx27(Fragment7, { children });
|
6382
6028
|
};
|
6383
6029
|
var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void 0, null, function* () {
|
6384
6030
|
let currentProps;
|
@@ -6438,18 +6084,19 @@ var FieldsChild = ({ fieldName }) => {
|
|
6438
6084
|
return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
|
6439
6085
|
});
|
6440
6086
|
const permissions = useAppStore(
|
6441
|
-
|
6087
|
+
useShallow5((s) => {
|
6442
6088
|
const { selectedItem, permissions: permissions2 } = s;
|
6443
6089
|
return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
|
6444
6090
|
})
|
6445
6091
|
);
|
6446
6092
|
const appStore = useAppStoreApi();
|
6447
|
-
const onChange =
|
6093
|
+
const onChange = useCallback12(createOnChange(fieldName, appStore), [
|
6448
6094
|
fieldName
|
6449
6095
|
]);
|
6450
|
-
|
6096
|
+
const { visible = true } = field != null ? field : {};
|
6097
|
+
if (!field || !id || !visible) return null;
|
6451
6098
|
if (field.type === "slot") return null;
|
6452
|
-
return /* @__PURE__ */
|
6099
|
+
return /* @__PURE__ */ jsx27("div", { className: getClassName20("field"), children: /* @__PURE__ */ jsx27(
|
6453
6100
|
AutoFieldPrivate,
|
6454
6101
|
{
|
6455
6102
|
field,
|
@@ -6461,14 +6108,15 @@ var FieldsChild = ({ fieldName }) => {
|
|
6461
6108
|
}
|
6462
6109
|
) }, id);
|
6463
6110
|
};
|
6464
|
-
var
|
6111
|
+
var FieldsChildMemo = memo2(FieldsChild);
|
6112
|
+
var FieldsInternal = ({ wrapFields = true }) => {
|
6465
6113
|
const overrides = useAppStore((s) => s.overrides);
|
6466
6114
|
const componentResolving = useAppStore((s) => {
|
6467
6115
|
var _a, _b;
|
6468
6116
|
const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["root"]) == null ? void 0 : _b.loadingCount;
|
6469
6117
|
return (loadingCount != null ? loadingCount : 0) > 0;
|
6470
6118
|
});
|
6471
|
-
const itemSelector = useAppStore(
|
6119
|
+
const itemSelector = useAppStore(useShallow5((s) => s.state.ui.itemSelector));
|
6472
6120
|
const id = useAppStore((s) => {
|
6473
6121
|
var _a;
|
6474
6122
|
return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
|
@@ -6477,42 +6125,48 @@ var Fields = ({ wrapFields = true }) => {
|
|
6477
6125
|
useRegisterFieldsSlice(appStore, id);
|
6478
6126
|
const fieldsLoading = useAppStore((s) => s.fields.loading);
|
6479
6127
|
const fieldNames = useAppStore(
|
6480
|
-
|
6128
|
+
useShallow5((s) => {
|
6129
|
+
if (s.fields.id === id) {
|
6130
|
+
return Object.keys(s.fields.fields);
|
6131
|
+
}
|
6132
|
+
return [];
|
6133
|
+
})
|
6481
6134
|
);
|
6482
6135
|
const isLoading = fieldsLoading || componentResolving;
|
6483
6136
|
const Wrapper = useMemo13(() => overrides.fields || DefaultFields, [overrides]);
|
6484
|
-
return /* @__PURE__ */
|
6137
|
+
return /* @__PURE__ */ jsxs13(
|
6485
6138
|
"form",
|
6486
6139
|
{
|
6487
|
-
className:
|
6140
|
+
className: getClassName20({ wrapFields }),
|
6488
6141
|
onSubmit: (e) => {
|
6489
6142
|
e.preventDefault();
|
6490
6143
|
},
|
6491
6144
|
children: [
|
6492
|
-
/* @__PURE__ */
|
6493
|
-
isLoading && /* @__PURE__ */
|
6145
|
+
/* @__PURE__ */ jsx27(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx27(FieldsChildMemo, { fieldName }, fieldName)) }),
|
6146
|
+
isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName20("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName20("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
|
6494
6147
|
]
|
6495
6148
|
}
|
6496
6149
|
);
|
6497
6150
|
};
|
6151
|
+
var Fields = memo2(FieldsInternal);
|
6498
6152
|
|
6499
6153
|
// components/Puck/components/Components/index.tsx
|
6500
6154
|
init_react_import();
|
6501
6155
|
|
6502
6156
|
// lib/use-component-list.tsx
|
6503
6157
|
init_react_import();
|
6504
|
-
import { useEffect as
|
6158
|
+
import { useEffect as useEffect18, useState as useState16 } from "react";
|
6505
6159
|
|
6506
6160
|
// components/ComponentList/index.tsx
|
6507
6161
|
init_react_import();
|
6508
6162
|
|
6509
6163
|
// css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
|
6510
6164
|
init_react_import();
|
6511
|
-
var
|
6165
|
+
var styles_module_default16 = { "ComponentList": "_ComponentList_1rrlt_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1rrlt_5", "ComponentList-content": "_ComponentList-content_1rrlt_9", "ComponentList-title": "_ComponentList-title_1rrlt_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1rrlt_53" };
|
6512
6166
|
|
6513
6167
|
// components/ComponentList/index.tsx
|
6514
|
-
import { jsx as
|
6515
|
-
var
|
6168
|
+
import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
|
6169
|
+
var getClassName21 = get_class_name_factory_default("ComponentList", styles_module_default16);
|
6516
6170
|
var ComponentListItem = ({
|
6517
6171
|
name,
|
6518
6172
|
label
|
@@ -6523,7 +6177,7 @@ var ComponentListItem = ({
|
|
6523
6177
|
type: name
|
6524
6178
|
}).insert
|
6525
6179
|
);
|
6526
|
-
return /* @__PURE__ */
|
6180
|
+
return /* @__PURE__ */ jsx28(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
|
6527
6181
|
};
|
6528
6182
|
var ComponentList = ({
|
6529
6183
|
children,
|
@@ -6534,12 +6188,12 @@ var ComponentList = ({
|
|
6534
6188
|
const setUi = useAppStore((s) => s.setUi);
|
6535
6189
|
const componentList = useAppStore((s) => s.state.ui.componentList);
|
6536
6190
|
const { expanded = true } = componentList[id] || {};
|
6537
|
-
return /* @__PURE__ */
|
6538
|
-
title && /* @__PURE__ */
|
6191
|
+
return /* @__PURE__ */ jsxs14("div", { className: getClassName21({ isExpanded: expanded }), children: [
|
6192
|
+
title && /* @__PURE__ */ jsxs14(
|
6539
6193
|
"button",
|
6540
6194
|
{
|
6541
6195
|
type: "button",
|
6542
|
-
className:
|
6196
|
+
className: getClassName21("title"),
|
6543
6197
|
onClick: () => setUi({
|
6544
6198
|
componentList: __spreadProps(__spreadValues({}, componentList), {
|
6545
6199
|
[id]: __spreadProps(__spreadValues({}, componentList[id]), {
|
@@ -6549,14 +6203,14 @@ var ComponentList = ({
|
|
6549
6203
|
}),
|
6550
6204
|
title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
|
6551
6205
|
children: [
|
6552
|
-
/* @__PURE__ */
|
6553
|
-
/* @__PURE__ */
|
6206
|
+
/* @__PURE__ */ jsx28("div", { children: title }),
|
6207
|
+
/* @__PURE__ */ jsx28("div", { className: getClassName21("titleIcon"), children: expanded ? /* @__PURE__ */ jsx28(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx28(ChevronDown, { size: 12 }) })
|
6554
6208
|
]
|
6555
6209
|
}
|
6556
6210
|
),
|
6557
|
-
/* @__PURE__ */
|
6211
|
+
/* @__PURE__ */ jsx28("div", { className: getClassName21("content"), children: /* @__PURE__ */ jsx28(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
|
6558
6212
|
var _a;
|
6559
|
-
return /* @__PURE__ */
|
6213
|
+
return /* @__PURE__ */ jsx28(
|
6560
6214
|
ComponentListItem,
|
6561
6215
|
{
|
6562
6216
|
label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
|
@@ -6570,12 +6224,12 @@ var ComponentList = ({
|
|
6570
6224
|
ComponentList.Item = ComponentListItem;
|
6571
6225
|
|
6572
6226
|
// lib/use-component-list.tsx
|
6573
|
-
import { jsx as
|
6227
|
+
import { jsx as jsx29 } from "react/jsx-runtime";
|
6574
6228
|
var useComponentList = () => {
|
6575
6229
|
const [componentList, setComponentList] = useState16();
|
6576
6230
|
const config = useAppStore((s) => s.config);
|
6577
6231
|
const uiComponentList = useAppStore((s) => s.state.ui.componentList);
|
6578
|
-
|
6232
|
+
useEffect18(() => {
|
6579
6233
|
var _a, _b, _c;
|
6580
6234
|
if (Object.keys(uiComponentList).length > 0) {
|
6581
6235
|
const matchedComponents = [];
|
@@ -6585,7 +6239,7 @@ var useComponentList = () => {
|
|
6585
6239
|
if (category.visible === false || !category.components) {
|
6586
6240
|
return null;
|
6587
6241
|
}
|
6588
|
-
return /* @__PURE__ */
|
6242
|
+
return /* @__PURE__ */ jsx29(
|
6589
6243
|
ComponentList,
|
6590
6244
|
{
|
6591
6245
|
id: categoryKey,
|
@@ -6594,7 +6248,7 @@ var useComponentList = () => {
|
|
6594
6248
|
var _a2;
|
6595
6249
|
matchedComponents.push(componentName);
|
6596
6250
|
const componentConf = config.components[componentName] || {};
|
6597
|
-
return /* @__PURE__ */
|
6251
|
+
return /* @__PURE__ */ jsx29(
|
6598
6252
|
ComponentList.Item,
|
6599
6253
|
{
|
6600
6254
|
label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
|
@@ -6614,7 +6268,7 @@ var useComponentList = () => {
|
|
6614
6268
|
);
|
6615
6269
|
if (remainingComponents.length > 0 && !((_a = uiComponentList.other) == null ? void 0 : _a.components) && ((_b = uiComponentList.other) == null ? void 0 : _b.visible) !== false) {
|
6616
6270
|
_componentList.push(
|
6617
|
-
/* @__PURE__ */
|
6271
|
+
/* @__PURE__ */ jsx29(
|
6618
6272
|
ComponentList,
|
6619
6273
|
{
|
6620
6274
|
id: "other",
|
@@ -6622,7 +6276,7 @@ var useComponentList = () => {
|
|
6622
6276
|
children: remainingComponents.map((componentName, i) => {
|
6623
6277
|
var _a2;
|
6624
6278
|
const componentConf = config.components[componentName] || {};
|
6625
|
-
return /* @__PURE__ */
|
6279
|
+
return /* @__PURE__ */ jsx29(
|
6626
6280
|
ComponentList.Item,
|
6627
6281
|
{
|
6628
6282
|
name: componentName,
|
@@ -6645,29 +6299,29 @@ var useComponentList = () => {
|
|
6645
6299
|
|
6646
6300
|
// components/Puck/components/Components/index.tsx
|
6647
6301
|
import { useMemo as useMemo14 } from "react";
|
6648
|
-
import { jsx as
|
6302
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
6649
6303
|
var Components = () => {
|
6650
6304
|
const overrides = useAppStore((s) => s.overrides);
|
6651
6305
|
const componentList = useComponentList();
|
6652
6306
|
const Wrapper = useMemo14(() => overrides.components || "div", [overrides]);
|
6653
|
-
return /* @__PURE__ */
|
6307
|
+
return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
|
6654
6308
|
};
|
6655
6309
|
|
6656
6310
|
// components/Puck/components/Preview/index.tsx
|
6657
6311
|
init_react_import();
|
6658
|
-
import { useCallback as
|
6312
|
+
import { useCallback as useCallback13, useEffect as useEffect20, useRef as useRef6, useMemo as useMemo15 } from "react";
|
6659
6313
|
|
6660
6314
|
// components/AutoFrame/index.tsx
|
6661
6315
|
init_react_import();
|
6662
6316
|
import {
|
6663
6317
|
createContext as createContext5,
|
6664
|
-
useContext as
|
6665
|
-
useEffect as
|
6318
|
+
useContext as useContext9,
|
6319
|
+
useEffect as useEffect19,
|
6666
6320
|
useState as useState17
|
6667
6321
|
} from "react";
|
6668
6322
|
import hash from "object-hash";
|
6669
6323
|
import { createPortal as createPortal3 } from "react-dom";
|
6670
|
-
import { Fragment as
|
6324
|
+
import { Fragment as Fragment8, jsx as jsx31 } from "react/jsx-runtime";
|
6671
6325
|
var styleSelector = 'style, link[rel="stylesheet"]';
|
6672
6326
|
var collectStyles = (doc) => {
|
6673
6327
|
const collected = [];
|
@@ -6710,7 +6364,7 @@ var CopyHostStyles = ({
|
|
6710
6364
|
onStylesLoaded = () => null
|
6711
6365
|
}) => {
|
6712
6366
|
const { document: doc, window: win } = useFrame();
|
6713
|
-
|
6367
|
+
useEffect19(() => {
|
6714
6368
|
if (!win || !doc) {
|
6715
6369
|
return () => {
|
6716
6370
|
};
|
@@ -6867,10 +6521,10 @@ var CopyHostStyles = ({
|
|
6867
6521
|
observer.disconnect();
|
6868
6522
|
};
|
6869
6523
|
}, []);
|
6870
|
-
return /* @__PURE__ */
|
6524
|
+
return /* @__PURE__ */ jsx31(Fragment8, { children });
|
6871
6525
|
};
|
6872
6526
|
var autoFrameContext = createContext5({});
|
6873
|
-
var useFrame = () =>
|
6527
|
+
var useFrame = () => useContext9(autoFrameContext);
|
6874
6528
|
function AutoFrame(_a) {
|
6875
6529
|
var _b = _a, {
|
6876
6530
|
children,
|
@@ -6895,7 +6549,7 @@ function AutoFrame(_a) {
|
|
6895
6549
|
const [ctx, setCtx] = useState17({});
|
6896
6550
|
const [mountTarget, setMountTarget] = useState17();
|
6897
6551
|
const [stylesLoaded, setStylesLoaded] = useState17(false);
|
6898
|
-
|
6552
|
+
useEffect19(() => {
|
6899
6553
|
var _a2;
|
6900
6554
|
if (frameRef.current) {
|
6901
6555
|
const doc = frameRef.current.contentDocument;
|
@@ -6914,7 +6568,7 @@ function AutoFrame(_a) {
|
|
6914
6568
|
}
|
6915
6569
|
}
|
6916
6570
|
}, [frameRef, loaded, stylesLoaded]);
|
6917
|
-
return /* @__PURE__ */
|
6571
|
+
return /* @__PURE__ */ jsx31(
|
6918
6572
|
"iframe",
|
6919
6573
|
__spreadProps(__spreadValues({}, props), {
|
6920
6574
|
className,
|
@@ -6924,7 +6578,7 @@ function AutoFrame(_a) {
|
|
6924
6578
|
onLoad: () => {
|
6925
6579
|
setLoaded(true);
|
6926
6580
|
},
|
6927
|
-
children: /* @__PURE__ */
|
6581
|
+
children: /* @__PURE__ */ jsx31(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx31(
|
6928
6582
|
CopyHostStyles,
|
6929
6583
|
{
|
6930
6584
|
debug,
|
@@ -6940,14 +6594,14 @@ var AutoFrame_default = AutoFrame;
|
|
6940
6594
|
|
6941
6595
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
|
6942
6596
|
init_react_import();
|
6943
|
-
var
|
6597
|
+
var styles_module_default17 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
|
6944
6598
|
|
6945
6599
|
// components/Puck/components/Preview/index.tsx
|
6946
|
-
import { Fragment as
|
6947
|
-
var
|
6600
|
+
import { Fragment as Fragment9, jsx as jsx32 } from "react/jsx-runtime";
|
6601
|
+
var getClassName22 = get_class_name_factory_default("PuckPreview", styles_module_default17);
|
6948
6602
|
var useBubbleIframeEvents = (ref) => {
|
6949
6603
|
const status = useAppStore((s) => s.status);
|
6950
|
-
|
6604
|
+
useEffect20(() => {
|
6951
6605
|
if (ref.current && status === "READY") {
|
6952
6606
|
const iframe = ref.current;
|
6953
6607
|
const handlePointerMove = (event) => {
|
@@ -6985,7 +6639,7 @@ var useBubbleIframeEvents = (ref) => {
|
|
6985
6639
|
}
|
6986
6640
|
}, [status]);
|
6987
6641
|
};
|
6988
|
-
var
|
6642
|
+
var Preview2 = ({ id = "puck-preview" }) => {
|
6989
6643
|
const dispatch = useAppStore((s) => s.dispatch);
|
6990
6644
|
const root = useAppStore((s) => s.state.data.root);
|
6991
6645
|
const config = useAppStore((s) => s.config);
|
@@ -6996,22 +6650,25 @@ var Preview3 = ({ id = "puck-preview" }) => {
|
|
6996
6650
|
const renderData = useAppStore(
|
6997
6651
|
(s) => s.state.ui.previewMode === "edit" ? null : s.state.data
|
6998
6652
|
);
|
6999
|
-
const Page =
|
6653
|
+
const Page = useCallback13(
|
7000
6654
|
(pageProps) => {
|
7001
6655
|
var _a, _b;
|
7002
|
-
const
|
7003
|
-
|
6656
|
+
const propsWithSlots = useSlots(
|
6657
|
+
config,
|
6658
|
+
{ type: "root", props: pageProps },
|
6659
|
+
DropZoneEditPure
|
6660
|
+
);
|
7004
6661
|
return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
|
7005
6662
|
id: "puck-root"
|
7006
|
-
}, propsWithSlots)) : /* @__PURE__ */
|
6663
|
+
}, propsWithSlots)) : /* @__PURE__ */ jsx32(Fragment9, { children: propsWithSlots.children });
|
7007
6664
|
},
|
7008
|
-
[config
|
6665
|
+
[config]
|
7009
6666
|
);
|
7010
6667
|
const Frame = useMemo15(() => overrides.iframe, [overrides]);
|
7011
6668
|
const rootProps = root.props || root;
|
7012
|
-
const ref =
|
6669
|
+
const ref = useRef6(null);
|
7013
6670
|
useBubbleIframeEvents(ref);
|
7014
|
-
const inner = !renderData ? /* @__PURE__ */
|
6671
|
+
const inner = !renderData ? /* @__PURE__ */ jsx32(
|
7015
6672
|
Page,
|
7016
6673
|
__spreadProps(__spreadValues({}, rootProps), {
|
7017
6674
|
puck: {
|
@@ -7021,28 +6678,28 @@ var Preview3 = ({ id = "puck-preview" }) => {
|
|
7021
6678
|
metadata
|
7022
6679
|
},
|
7023
6680
|
editMode: true,
|
7024
|
-
children: /* @__PURE__ */
|
6681
|
+
children: /* @__PURE__ */ jsx32(DropZonePure, { zone: rootDroppableId })
|
7025
6682
|
})
|
7026
|
-
) : /* @__PURE__ */
|
7027
|
-
|
6683
|
+
) : /* @__PURE__ */ jsx32(Render, { data: renderData, config });
|
6684
|
+
useEffect20(() => {
|
7028
6685
|
if (!iframe.enabled) {
|
7029
6686
|
setStatus("READY");
|
7030
6687
|
}
|
7031
6688
|
}, [iframe.enabled]);
|
7032
|
-
return /* @__PURE__ */
|
6689
|
+
return /* @__PURE__ */ jsx32(
|
7033
6690
|
"div",
|
7034
6691
|
{
|
7035
|
-
className:
|
6692
|
+
className: getClassName22(),
|
7036
6693
|
id,
|
7037
6694
|
"data-puck-preview": true,
|
7038
6695
|
onClick: () => {
|
7039
6696
|
dispatch({ type: "setUi", ui: { itemSelector: null } });
|
7040
6697
|
},
|
7041
|
-
children: iframe.enabled ? /* @__PURE__ */
|
6698
|
+
children: iframe.enabled ? /* @__PURE__ */ jsx32(
|
7042
6699
|
AutoFrame_default,
|
7043
6700
|
{
|
7044
6701
|
id: "preview-frame",
|
7045
|
-
className:
|
6702
|
+
className: getClassName22("frame"),
|
7046
6703
|
"data-rfd-iframe": true,
|
7047
6704
|
onReady: () => {
|
7048
6705
|
setStatus("READY");
|
@@ -7051,18 +6708,18 @@ var Preview3 = ({ id = "puck-preview" }) => {
|
|
7051
6708
|
setStatus("MOUNTED");
|
7052
6709
|
},
|
7053
6710
|
frameRef: ref,
|
7054
|
-
children: /* @__PURE__ */
|
6711
|
+
children: /* @__PURE__ */ jsx32(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
|
7055
6712
|
if (Frame) {
|
7056
|
-
return /* @__PURE__ */
|
6713
|
+
return /* @__PURE__ */ jsx32(Frame, { document: document2, children: inner });
|
7057
6714
|
}
|
7058
6715
|
return inner;
|
7059
6716
|
} })
|
7060
6717
|
}
|
7061
|
-
) : /* @__PURE__ */
|
6718
|
+
) : /* @__PURE__ */ jsx32(
|
7062
6719
|
"div",
|
7063
6720
|
{
|
7064
6721
|
id: "preview-frame",
|
7065
|
-
className:
|
6722
|
+
className: getClassName22("frame"),
|
7066
6723
|
ref,
|
7067
6724
|
"data-puck-entry": true,
|
7068
6725
|
children: inner
|
@@ -7080,7 +6737,7 @@ init_react_import();
|
|
7080
6737
|
|
7081
6738
|
// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
|
7082
6739
|
init_react_import();
|
7083
|
-
var
|
6740
|
+
var styles_module_default18 = { "LayerTree": "_LayerTree_7rx04_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_7rx04_11", "LayerTree-helper": "_LayerTree-helper_7rx04_17", "Layer": "_Layer_7rx04_1", "Layer-inner": "_Layer-inner_7rx04_29", "Layer--containsZone": "_Layer--containsZone_7rx04_35", "Layer-clickable": "_Layer-clickable_7rx04_39", "Layer--isSelected": "_Layer--isSelected_7rx04_61", "Layer-chevron": "_Layer-chevron_7rx04_77", "Layer--childIsSelected": "_Layer--childIsSelected_7rx04_78", "Layer-zones": "_Layer-zones_7rx04_82", "Layer-title": "_Layer-title_7rx04_96", "Layer-name": "_Layer-name_7rx04_105", "Layer-icon": "_Layer-icon_7rx04_111", "Layer-zoneIcon": "_Layer-zoneIcon_7rx04_116" };
|
7084
6741
|
|
7085
6742
|
// lib/scroll-into-view.ts
|
7086
6743
|
init_react_import();
|
@@ -7094,7 +6751,7 @@ var scrollIntoView = (el) => {
|
|
7094
6751
|
};
|
7095
6752
|
|
7096
6753
|
// components/LayerTree/index.tsx
|
7097
|
-
import { useCallback as
|
6754
|
+
import { useCallback as useCallback14, useContext as useContext10 } from "react";
|
7098
6755
|
|
7099
6756
|
// lib/on-scroll-end.ts
|
7100
6757
|
init_react_import();
|
@@ -7116,21 +6773,21 @@ var onScrollEnd = (frame, cb) => {
|
|
7116
6773
|
};
|
7117
6774
|
|
7118
6775
|
// components/LayerTree/index.tsx
|
7119
|
-
import { useShallow as
|
7120
|
-
import { Fragment as
|
7121
|
-
var
|
7122
|
-
var getClassNameLayer = get_class_name_factory_default("Layer",
|
6776
|
+
import { useShallow as useShallow6 } from "zustand/react/shallow";
|
6777
|
+
import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
|
6778
|
+
var getClassName23 = get_class_name_factory_default("LayerTree", styles_module_default18);
|
6779
|
+
var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default18);
|
7123
6780
|
var Layer = ({
|
7124
6781
|
index,
|
7125
6782
|
itemId,
|
7126
6783
|
zoneCompound
|
7127
6784
|
}) => {
|
7128
6785
|
var _a;
|
7129
|
-
const ctx =
|
6786
|
+
const ctx = useContext10(dropZoneContext);
|
7130
6787
|
const config = useAppStore((s) => s.config);
|
7131
6788
|
const itemSelector = useAppStore((s) => s.state.ui.itemSelector);
|
7132
6789
|
const dispatch = useAppStore((s) => s.dispatch);
|
7133
|
-
const setItemSelector =
|
6790
|
+
const setItemSelector = useCallback14(
|
7134
6791
|
(itemSelector2) => {
|
7135
6792
|
dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
|
7136
6793
|
},
|
@@ -7143,16 +6800,18 @@ var Layer = ({
|
|
7143
6800
|
const isSelected = selecedItemId === itemId || itemSelector && itemSelector.zone === rootDroppableId && !zoneCompound;
|
7144
6801
|
const nodeData = useAppStore((s) => s.state.indexes.nodes[itemId]);
|
7145
6802
|
const zonesForItem = useAppStore(
|
7146
|
-
|
6803
|
+
useShallow6(
|
7147
6804
|
(s) => Object.keys(s.state.indexes.zones).filter(
|
7148
6805
|
(z) => z.split(":")[0] === itemId
|
7149
6806
|
)
|
7150
6807
|
)
|
7151
6808
|
);
|
7152
6809
|
const containsZone = zonesForItem.length > 0;
|
7153
|
-
const
|
7154
|
-
|
7155
|
-
|
6810
|
+
const zoneStore = useContext10(ZoneStoreContext);
|
6811
|
+
const isHovering = useContextStore(
|
6812
|
+
ZoneStoreContext,
|
6813
|
+
(s) => s.hoveringComponent === itemId
|
6814
|
+
);
|
7156
6815
|
const childIsSelected = useAppStore((s) => {
|
7157
6816
|
var _a2, _b;
|
7158
6817
|
const selectedData = s.state.indexes.nodes[(_a2 = s.selectedItem) == null ? void 0 : _a2.props.id];
|
@@ -7163,7 +6822,7 @@ var Layer = ({
|
|
7163
6822
|
});
|
7164
6823
|
const componentConfig = config.components[nodeData.data.type];
|
7165
6824
|
const label = (_a = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _a : nodeData.data.type.toString();
|
7166
|
-
return /* @__PURE__ */
|
6825
|
+
return /* @__PURE__ */ jsxs15(
|
7167
6826
|
"li",
|
7168
6827
|
{
|
7169
6828
|
className: getClassNameLayer({
|
@@ -7173,7 +6832,7 @@ var Layer = ({
|
|
7173
6832
|
childIsSelected
|
7174
6833
|
}),
|
7175
6834
|
children: [
|
7176
|
-
/* @__PURE__ */
|
6835
|
+
/* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs15(
|
7177
6836
|
"button",
|
7178
6837
|
{
|
7179
6838
|
type: "button",
|
@@ -7188,7 +6847,10 @@ var Layer = ({
|
|
7188
6847
|
`[data-puck-component="${itemId}"]`
|
7189
6848
|
);
|
7190
6849
|
if (!el) {
|
7191
|
-
|
6850
|
+
setItemSelector({
|
6851
|
+
index,
|
6852
|
+
zone: zoneCompound
|
6853
|
+
});
|
7192
6854
|
return;
|
7193
6855
|
}
|
7194
6856
|
scrollIntoView(el);
|
@@ -7199,31 +6861,31 @@ var Layer = ({
|
|
7199
6861
|
});
|
7200
6862
|
});
|
7201
6863
|
},
|
7202
|
-
|
6864
|
+
onMouseEnter: (e) => {
|
7203
6865
|
e.stopPropagation();
|
7204
|
-
|
6866
|
+
zoneStore.setState({ hoveringComponent: itemId });
|
7205
6867
|
},
|
7206
|
-
|
6868
|
+
onMouseLeave: (e) => {
|
7207
6869
|
e.stopPropagation();
|
7208
|
-
|
6870
|
+
zoneStore.setState({ hoveringComponent: null });
|
7209
6871
|
},
|
7210
6872
|
children: [
|
7211
|
-
containsZone && /* @__PURE__ */
|
6873
|
+
containsZone && /* @__PURE__ */ jsx33(
|
7212
6874
|
"div",
|
7213
6875
|
{
|
7214
6876
|
className: getClassNameLayer("chevron"),
|
7215
6877
|
title: isSelected ? "Collapse" : "Expand",
|
7216
|
-
children: /* @__PURE__ */
|
6878
|
+
children: /* @__PURE__ */ jsx33(ChevronDown, { size: "12" })
|
7217
6879
|
}
|
7218
6880
|
),
|
7219
|
-
/* @__PURE__ */
|
7220
|
-
/* @__PURE__ */
|
7221
|
-
/* @__PURE__ */
|
6881
|
+
/* @__PURE__ */ jsxs15("div", { className: getClassNameLayer("title"), children: [
|
6882
|
+
/* @__PURE__ */ jsx33("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx33(Type, { size: "16" }) : /* @__PURE__ */ jsx33(LayoutGrid, { size: "16" }) }),
|
6883
|
+
/* @__PURE__ */ jsx33("div", { className: getClassNameLayer("name"), children: label })
|
7222
6884
|
] })
|
7223
6885
|
]
|
7224
6886
|
}
|
7225
6887
|
) }),
|
7226
|
-
containsZone && zonesForItem.map((subzone) => /* @__PURE__ */
|
6888
|
+
containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx33(LayerTree, { zoneCompound: subzone }) }, subzone))
|
7227
6889
|
]
|
7228
6890
|
}
|
7229
6891
|
);
|
@@ -7234,22 +6896,22 @@ var LayerTree = ({
|
|
7234
6896
|
}) => {
|
7235
6897
|
const label = _label != null ? _label : zoneCompound.split(":")[1];
|
7236
6898
|
const contentIds = useAppStore(
|
7237
|
-
|
6899
|
+
useShallow6(
|
7238
6900
|
(s) => {
|
7239
6901
|
var _a, _b;
|
7240
6902
|
return zoneCompound ? (_b = (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [] : [];
|
7241
6903
|
}
|
7242
6904
|
)
|
7243
6905
|
);
|
7244
|
-
return /* @__PURE__ */
|
7245
|
-
label && /* @__PURE__ */
|
7246
|
-
/* @__PURE__ */
|
6906
|
+
return /* @__PURE__ */ jsxs15(Fragment10, { children: [
|
6907
|
+
label && /* @__PURE__ */ jsxs15("div", { className: getClassName23("zoneTitle"), children: [
|
6908
|
+
/* @__PURE__ */ jsx33("div", { className: getClassName23("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
|
7247
6909
|
label
|
7248
6910
|
] }),
|
7249
|
-
/* @__PURE__ */
|
7250
|
-
contentIds.length === 0 && /* @__PURE__ */
|
6911
|
+
/* @__PURE__ */ jsxs15("ul", { className: getClassName23(), children: [
|
6912
|
+
contentIds.length === 0 && /* @__PURE__ */ jsx33("div", { className: getClassName23("helper"), children: "No items" }),
|
7251
6913
|
contentIds.map((itemId, i) => {
|
7252
|
-
return /* @__PURE__ */
|
6914
|
+
return /* @__PURE__ */ jsx33(
|
7253
6915
|
Layer,
|
7254
6916
|
{
|
7255
6917
|
index: i,
|
@@ -7275,15 +6937,15 @@ var findZonesForArea = (state, area) => {
|
|
7275
6937
|
};
|
7276
6938
|
|
7277
6939
|
// components/Puck/components/Outline/index.tsx
|
7278
|
-
import { useShallow as
|
7279
|
-
import { jsx as
|
6940
|
+
import { useShallow as useShallow7 } from "zustand/react/shallow";
|
6941
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
7280
6942
|
var Outline = () => {
|
7281
6943
|
const outlineOverride = useAppStore((s) => s.overrides.outline);
|
7282
6944
|
const rootZones = useAppStore(
|
7283
|
-
|
6945
|
+
useShallow7((s) => findZonesForArea(s.state, "root"))
|
7284
6946
|
);
|
7285
6947
|
const Wrapper = useMemo16(() => outlineOverride || "div", [outlineOverride]);
|
7286
|
-
return /* @__PURE__ */
|
6948
|
+
return /* @__PURE__ */ jsx34(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx34(
|
7287
6949
|
LayerTree,
|
7288
6950
|
{
|
7289
6951
|
label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
|
@@ -7417,30 +7079,30 @@ var getBox = function getBox2(el) {
|
|
7417
7079
|
|
7418
7080
|
// components/Puck/components/Canvas/index.tsx
|
7419
7081
|
import {
|
7420
|
-
useCallback as
|
7421
|
-
useEffect as
|
7082
|
+
useCallback as useCallback15,
|
7083
|
+
useEffect as useEffect22,
|
7422
7084
|
useMemo as useMemo18,
|
7423
|
-
useRef as
|
7085
|
+
useRef as useRef7,
|
7424
7086
|
useState as useState19
|
7425
7087
|
} from "react";
|
7426
7088
|
|
7427
7089
|
// components/ViewportControls/index.tsx
|
7428
7090
|
init_react_import();
|
7429
|
-
import { useEffect as
|
7091
|
+
import { useEffect as useEffect21, useMemo as useMemo17, useState as useState18 } from "react";
|
7430
7092
|
|
7431
7093
|
// css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
|
7432
7094
|
init_react_import();
|
7433
|
-
var
|
7095
|
+
var styles_module_default19 = { "ViewportControls": "_ViewportControls_gejzr_1", "ViewportControls-divider": "_ViewportControls-divider_gejzr_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gejzr_21", "ViewportButton--isActive": "_ViewportButton--isActive_gejzr_38", "ViewportButton-inner": "_ViewportButton-inner_gejzr_38" };
|
7434
7096
|
|
7435
7097
|
// components/ViewportControls/index.tsx
|
7436
|
-
import { jsx as
|
7098
|
+
import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
|
7437
7099
|
var icons = {
|
7438
|
-
Smartphone: /* @__PURE__ */
|
7439
|
-
Tablet: /* @__PURE__ */
|
7440
|
-
Monitor: /* @__PURE__ */
|
7100
|
+
Smartphone: /* @__PURE__ */ jsx35(Smartphone, { size: 16 }),
|
7101
|
+
Tablet: /* @__PURE__ */ jsx35(Tablet, { size: 16 }),
|
7102
|
+
Monitor: /* @__PURE__ */ jsx35(Monitor, { size: 16 })
|
7441
7103
|
};
|
7442
|
-
var
|
7443
|
-
var getClassNameButton = get_class_name_factory_default("ViewportButton",
|
7104
|
+
var getClassName24 = get_class_name_factory_default("ViewportControls", styles_module_default19);
|
7105
|
+
var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default19);
|
7444
7106
|
var ViewportButton = ({
|
7445
7107
|
children,
|
7446
7108
|
height = "auto",
|
@@ -7450,10 +7112,10 @@ var ViewportButton = ({
|
|
7450
7112
|
}) => {
|
7451
7113
|
const viewports = useAppStore((s) => s.state.ui.viewports);
|
7452
7114
|
const [isActive, setIsActive] = useState18(false);
|
7453
|
-
|
7115
|
+
useEffect21(() => {
|
7454
7116
|
setIsActive(width === viewports.current.width);
|
7455
7117
|
}, [width, viewports.current.width]);
|
7456
|
-
return /* @__PURE__ */
|
7118
|
+
return /* @__PURE__ */ jsx35("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx35(
|
7457
7119
|
IconButton,
|
7458
7120
|
{
|
7459
7121
|
title,
|
@@ -7462,7 +7124,7 @@ var ViewportButton = ({
|
|
7462
7124
|
e.stopPropagation();
|
7463
7125
|
onClick({ width, height });
|
7464
7126
|
},
|
7465
|
-
children: /* @__PURE__ */
|
7127
|
+
children: /* @__PURE__ */ jsx35("span", { className: getClassNameButton("inner"), children })
|
7466
7128
|
}
|
7467
7129
|
) });
|
7468
7130
|
};
|
@@ -7498,8 +7160,8 @@ var ViewportControls = ({
|
|
7498
7160
|
].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
|
7499
7161
|
[autoZoom]
|
7500
7162
|
);
|
7501
|
-
return /* @__PURE__ */
|
7502
|
-
viewports.map((viewport, i) => /* @__PURE__ */
|
7163
|
+
return /* @__PURE__ */ jsxs16("div", { className: getClassName24(), children: [
|
7164
|
+
viewports.map((viewport, i) => /* @__PURE__ */ jsx35(
|
7503
7165
|
ViewportButton,
|
7504
7166
|
{
|
7505
7167
|
height: viewport.height,
|
@@ -7510,8 +7172,8 @@ var ViewportControls = ({
|
|
7510
7172
|
},
|
7511
7173
|
i
|
7512
7174
|
)),
|
7513
|
-
/* @__PURE__ */
|
7514
|
-
/* @__PURE__ */
|
7175
|
+
/* @__PURE__ */ jsx35("div", { className: getClassName24("divider") }),
|
7176
|
+
/* @__PURE__ */ jsx35(
|
7515
7177
|
IconButton,
|
7516
7178
|
{
|
7517
7179
|
title: "Zoom viewport out",
|
@@ -7525,10 +7187,10 @@ var ViewportControls = ({
|
|
7525
7187
|
)].value
|
7526
7188
|
);
|
7527
7189
|
},
|
7528
|
-
children: /* @__PURE__ */
|
7190
|
+
children: /* @__PURE__ */ jsx35(ZoomOut, { size: 16 })
|
7529
7191
|
}
|
7530
7192
|
),
|
7531
|
-
/* @__PURE__ */
|
7193
|
+
/* @__PURE__ */ jsx35(
|
7532
7194
|
IconButton,
|
7533
7195
|
{
|
7534
7196
|
title: "Zoom viewport in",
|
@@ -7542,19 +7204,19 @@ var ViewportControls = ({
|
|
7542
7204
|
)].value
|
7543
7205
|
);
|
7544
7206
|
},
|
7545
|
-
children: /* @__PURE__ */
|
7207
|
+
children: /* @__PURE__ */ jsx35(ZoomIn, { size: 16 })
|
7546
7208
|
}
|
7547
7209
|
),
|
7548
|
-
/* @__PURE__ */
|
7549
|
-
/* @__PURE__ */
|
7210
|
+
/* @__PURE__ */ jsx35("div", { className: getClassName24("divider") }),
|
7211
|
+
/* @__PURE__ */ jsx35(
|
7550
7212
|
"select",
|
7551
7213
|
{
|
7552
|
-
className:
|
7214
|
+
className: getClassName24("zoomSelect"),
|
7553
7215
|
value: zoom.toString(),
|
7554
7216
|
onChange: (e) => {
|
7555
7217
|
onZoom(parseFloat(e.currentTarget.value));
|
7556
7218
|
},
|
7557
|
-
children: zoomOptions.map((option) => /* @__PURE__ */
|
7219
|
+
children: zoomOptions.map((option) => /* @__PURE__ */ jsx35(
|
7558
7220
|
"option",
|
7559
7221
|
{
|
7560
7222
|
value: option.value,
|
@@ -7569,7 +7231,7 @@ var ViewportControls = ({
|
|
7569
7231
|
|
7570
7232
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
|
7571
7233
|
init_react_import();
|
7572
|
-
var
|
7234
|
+
var styles_module_default20 = { "PuckCanvas": "_PuckCanvas_18jay_1", "PuckCanvas-controls": "_PuckCanvas-controls_18jay_16", "PuckCanvas-inner": "_PuckCanvas-inner_18jay_21", "PuckCanvas-root": "_PuckCanvas-root_18jay_30", "PuckCanvas--ready": "_PuckCanvas--ready_18jay_55", "PuckCanvas-loader": "_PuckCanvas-loader_18jay_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_18jay_70" };
|
7573
7235
|
|
7574
7236
|
// lib/get-zoom-config.ts
|
7575
7237
|
init_react_import();
|
@@ -7602,9 +7264,9 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
|
|
7602
7264
|
};
|
7603
7265
|
|
7604
7266
|
// components/Puck/components/Canvas/index.tsx
|
7605
|
-
import { useShallow as
|
7606
|
-
import { Fragment as
|
7607
|
-
var
|
7267
|
+
import { useShallow as useShallow8 } from "zustand/react/shallow";
|
7268
|
+
import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
|
7269
|
+
var getClassName25 = get_class_name_factory_default("PuckCanvas", styles_module_default20);
|
7608
7270
|
var ZOOM_ON_CHANGE = true;
|
7609
7271
|
var Canvas = () => {
|
7610
7272
|
const {
|
@@ -7616,7 +7278,7 @@ var Canvas = () => {
|
|
7616
7278
|
status,
|
7617
7279
|
iframe
|
7618
7280
|
} = useAppStore(
|
7619
|
-
|
7281
|
+
useShallow8((s) => ({
|
7620
7282
|
dispatch: s.dispatch,
|
7621
7283
|
overrides: s.overrides,
|
7622
7284
|
setUi: s.setUi,
|
@@ -7627,23 +7289,23 @@ var Canvas = () => {
|
|
7627
7289
|
}))
|
7628
7290
|
);
|
7629
7291
|
const { leftSideBarVisible, rightSideBarVisible, viewports } = useAppStore(
|
7630
|
-
|
7292
|
+
useShallow8((s) => ({
|
7631
7293
|
leftSideBarVisible: s.state.ui.leftSideBarVisible,
|
7632
7294
|
rightSideBarVisible: s.state.ui.rightSideBarVisible,
|
7633
7295
|
viewports: s.state.ui.viewports
|
7634
7296
|
}))
|
7635
7297
|
);
|
7636
|
-
const frameRef =
|
7298
|
+
const frameRef = useRef7(null);
|
7637
7299
|
const [showTransition, setShowTransition] = useState19(false);
|
7638
7300
|
const defaultRender = useMemo18(() => {
|
7639
|
-
const PuckDefault = ({ children }) => /* @__PURE__ */
|
7301
|
+
const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment11, { children });
|
7640
7302
|
return PuckDefault;
|
7641
7303
|
}, []);
|
7642
7304
|
const CustomPreview = useMemo18(
|
7643
7305
|
() => overrides.preview || defaultRender,
|
7644
7306
|
[overrides]
|
7645
7307
|
);
|
7646
|
-
const getFrameDimensions =
|
7308
|
+
const getFrameDimensions = useCallback15(() => {
|
7647
7309
|
if (frameRef.current) {
|
7648
7310
|
const frame = frameRef.current;
|
7649
7311
|
const box = getBox(frame);
|
@@ -7651,7 +7313,7 @@ var Canvas = () => {
|
|
7651
7313
|
}
|
7652
7314
|
return { width: 0, height: 0 };
|
7653
7315
|
}, [frameRef]);
|
7654
|
-
const resetAutoZoom =
|
7316
|
+
const resetAutoZoom = useCallback15(
|
7655
7317
|
(newViewports = viewports) => {
|
7656
7318
|
if (frameRef.current) {
|
7657
7319
|
setZoomConfig(
|
@@ -7665,11 +7327,11 @@ var Canvas = () => {
|
|
7665
7327
|
},
|
7666
7328
|
[frameRef, zoomConfig, viewports]
|
7667
7329
|
);
|
7668
|
-
|
7330
|
+
useEffect22(() => {
|
7669
7331
|
setShowTransition(false);
|
7670
7332
|
resetAutoZoom(viewports);
|
7671
7333
|
}, [frameRef, leftSideBarVisible, rightSideBarVisible]);
|
7672
|
-
|
7334
|
+
useEffect22(() => {
|
7673
7335
|
const { height: frameHeight } = getFrameDimensions();
|
7674
7336
|
if (viewports.current.height === "auto") {
|
7675
7337
|
setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
|
@@ -7677,13 +7339,13 @@ var Canvas = () => {
|
|
7677
7339
|
}));
|
7678
7340
|
}
|
7679
7341
|
}, [zoomConfig.zoom]);
|
7680
|
-
|
7342
|
+
useEffect22(() => {
|
7681
7343
|
if (ZOOM_ON_CHANGE) {
|
7682
7344
|
setShowTransition(true);
|
7683
7345
|
resetAutoZoom(viewports);
|
7684
7346
|
}
|
7685
7347
|
}, [viewports.current.width]);
|
7686
|
-
|
7348
|
+
useEffect22(() => {
|
7687
7349
|
const cb = () => {
|
7688
7350
|
setShowTransition(false);
|
7689
7351
|
resetAutoZoom();
|
@@ -7694,15 +7356,15 @@ var Canvas = () => {
|
|
7694
7356
|
};
|
7695
7357
|
}, []);
|
7696
7358
|
const [showLoader, setShowLoader] = useState19(false);
|
7697
|
-
|
7359
|
+
useEffect22(() => {
|
7698
7360
|
setTimeout(() => {
|
7699
7361
|
setShowLoader(true);
|
7700
7362
|
}, 500);
|
7701
7363
|
}, []);
|
7702
|
-
return /* @__PURE__ */
|
7364
|
+
return /* @__PURE__ */ jsxs17(
|
7703
7365
|
"div",
|
7704
7366
|
{
|
7705
|
-
className:
|
7367
|
+
className: getClassName25({
|
7706
7368
|
ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
|
7707
7369
|
showLoader
|
7708
7370
|
}),
|
@@ -7712,7 +7374,7 @@ var Canvas = () => {
|
|
7712
7374
|
recordHistory: true
|
7713
7375
|
}),
|
7714
7376
|
children: [
|
7715
|
-
viewports.controlsVisible && iframe.enabled && /* @__PURE__ */
|
7377
|
+
viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx36("div", { className: getClassName25("controls"), children: /* @__PURE__ */ jsx36(
|
7716
7378
|
ViewportControls,
|
7717
7379
|
{
|
7718
7380
|
autoZoom: zoomConfig.autoZoom,
|
@@ -7738,11 +7400,11 @@ var Canvas = () => {
|
|
7738
7400
|
}
|
7739
7401
|
}
|
7740
7402
|
) }),
|
7741
|
-
/* @__PURE__ */
|
7742
|
-
/* @__PURE__ */
|
7403
|
+
/* @__PURE__ */ jsxs17("div", { className: getClassName25("inner"), ref: frameRef, children: [
|
7404
|
+
/* @__PURE__ */ jsx36(
|
7743
7405
|
"div",
|
7744
7406
|
{
|
7745
|
-
className:
|
7407
|
+
className: getClassName25("root"),
|
7746
7408
|
style: {
|
7747
7409
|
width: iframe.enabled ? viewports.current.width : "100%",
|
7748
7410
|
height: zoomConfig.rootHeight,
|
@@ -7760,10 +7422,10 @@ var Canvas = () => {
|
|
7760
7422
|
})
|
7761
7423
|
);
|
7762
7424
|
},
|
7763
|
-
children: /* @__PURE__ */
|
7425
|
+
children: /* @__PURE__ */ jsx36(CustomPreview, { children: /* @__PURE__ */ jsx36(Preview2, {}) })
|
7764
7426
|
}
|
7765
7427
|
),
|
7766
|
-
/* @__PURE__ */
|
7428
|
+
/* @__PURE__ */ jsx36("div", { className: getClassName25("loader"), children: /* @__PURE__ */ jsx36(Loader, { size: 24 }) })
|
7767
7429
|
] })
|
7768
7430
|
]
|
7769
7431
|
}
|
@@ -7818,19 +7480,19 @@ var useLoadedOverrides = ({
|
|
7818
7480
|
|
7819
7481
|
// components/DefaultOverride/index.tsx
|
7820
7482
|
init_react_import();
|
7821
|
-
import { Fragment as
|
7822
|
-
var DefaultOverride = ({ children }) => /* @__PURE__ */
|
7483
|
+
import { Fragment as Fragment12, jsx as jsx37 } from "react/jsx-runtime";
|
7484
|
+
var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx37(Fragment12, { children });
|
7823
7485
|
|
7824
7486
|
// lib/use-inject-css.ts
|
7825
7487
|
init_react_import();
|
7826
|
-
import { useEffect as
|
7488
|
+
import { useEffect as useEffect23, useState as useState20 } from "react";
|
7827
7489
|
var styles = ``;
|
7828
7490
|
var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
|
7829
7491
|
const [el, setEl] = useState20();
|
7830
|
-
|
7492
|
+
useEffect23(() => {
|
7831
7493
|
setEl(document.createElement("style"));
|
7832
7494
|
}, []);
|
7833
|
-
|
7495
|
+
useEffect23(() => {
|
7834
7496
|
var _a;
|
7835
7497
|
if (!el || typeof window === "undefined") {
|
7836
7498
|
return;
|
@@ -7850,10 +7512,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
|
|
7850
7512
|
|
7851
7513
|
// lib/use-preview-mode-hotkeys.ts
|
7852
7514
|
init_react_import();
|
7853
|
-
import { useCallback as
|
7515
|
+
import { useCallback as useCallback16 } from "react";
|
7854
7516
|
var usePreviewModeHotkeys = () => {
|
7855
7517
|
const appStore = useAppStoreApi();
|
7856
|
-
const toggleInteractive =
|
7518
|
+
const toggleInteractive = useCallback16(() => {
|
7857
7519
|
const dispatch = appStore.getState().dispatch;
|
7858
7520
|
dispatch({
|
7859
7521
|
type: "setUi",
|
@@ -7868,7 +7530,7 @@ var usePreviewModeHotkeys = () => {
|
|
7868
7530
|
|
7869
7531
|
// lib/use-puck.ts
|
7870
7532
|
init_react_import();
|
7871
|
-
import { createContext as createContext6, useContext as
|
7533
|
+
import { createContext as createContext6, useContext as useContext11, useEffect as useEffect24, useState as useState21 } from "react";
|
7872
7534
|
import { createStore as createStore4, useStore as useStore3 } from "zustand";
|
7873
7535
|
var generateUsePuck = (store) => {
|
7874
7536
|
const history = {
|
@@ -7921,7 +7583,7 @@ var useRegisterUsePuckStore = (appStore) => {
|
|
7921
7583
|
() => generateUsePuck(convertToPickedStore(appStore.getState()))
|
7922
7584
|
)
|
7923
7585
|
);
|
7924
|
-
|
7586
|
+
useEffect24(() => {
|
7925
7587
|
return appStore.subscribe(
|
7926
7588
|
(store) => convertToPickedStore(store),
|
7927
7589
|
(pickedStore) => {
|
@@ -7933,7 +7595,7 @@ var useRegisterUsePuckStore = (appStore) => {
|
|
7933
7595
|
};
|
7934
7596
|
function createUsePuck() {
|
7935
7597
|
return function usePuck2(selector) {
|
7936
|
-
const usePuckApi =
|
7598
|
+
const usePuckApi = useContext11(UsePuckStoreContext);
|
7937
7599
|
if (!usePuckApi) {
|
7938
7600
|
throw new Error("usePuck must be used inside <Puck>.");
|
7939
7601
|
}
|
@@ -7945,32 +7607,255 @@ function createUsePuck() {
|
|
7945
7607
|
};
|
7946
7608
|
}
|
7947
7609
|
function usePuck() {
|
7948
|
-
|
7610
|
+
useEffect24(() => {
|
7949
7611
|
console.warn(
|
7950
7612
|
"You're using the `usePuck` method without a selector, which may cause unnecessary re-renders. Replace with `createUsePuck` and provide a selector for improved performance."
|
7951
7613
|
);
|
7952
7614
|
}, []);
|
7953
7615
|
return createUsePuck()((s) => s);
|
7954
7616
|
}
|
7617
|
+
function useGetPuck() {
|
7618
|
+
const usePuckApi = useContext11(UsePuckStoreContext);
|
7619
|
+
if (!usePuckApi) {
|
7620
|
+
throw new Error("usePuckGet must be used inside <Puck>.");
|
7621
|
+
}
|
7622
|
+
return usePuckApi.getState;
|
7623
|
+
}
|
7955
7624
|
|
7956
7625
|
// components/Puck/index.tsx
|
7957
|
-
import
|
7958
|
-
|
7959
|
-
|
7960
|
-
|
7961
|
-
|
7962
|
-
|
7963
|
-
|
7964
|
-
|
7965
|
-
|
7966
|
-
|
7967
|
-
|
7968
|
-
};
|
7969
|
-
|
7626
|
+
import fdeq from "fast-deep-equal";
|
7627
|
+
|
7628
|
+
// components/Puck/components/Header/index.tsx
|
7629
|
+
init_react_import();
|
7630
|
+
import { memo as memo3, useCallback as useCallback17, useMemo as useMemo20, useState as useState22 } from "react";
|
7631
|
+
|
7632
|
+
// components/MenuBar/index.tsx
|
7633
|
+
init_react_import();
|
7634
|
+
|
7635
|
+
// css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
|
7636
|
+
init_react_import();
|
7637
|
+
var styles_module_default21 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
|
7638
|
+
|
7639
|
+
// components/MenuBar/index.tsx
|
7640
|
+
import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
|
7641
|
+
var getClassName26 = get_class_name_factory_default("MenuBar", styles_module_default21);
|
7642
|
+
function MenuBar({
|
7643
|
+
menuOpen = false,
|
7644
|
+
renderHeaderActions,
|
7645
|
+
setMenuOpen
|
7646
|
+
}) {
|
7647
|
+
const back = useAppStore((s) => s.history.back);
|
7648
|
+
const forward = useAppStore((s) => s.history.forward);
|
7649
|
+
const hasFuture = useAppStore((s) => s.history.hasFuture());
|
7650
|
+
const hasPast = useAppStore((s) => s.history.hasPast());
|
7651
|
+
return /* @__PURE__ */ jsx38(
|
7652
|
+
"div",
|
7653
|
+
{
|
7654
|
+
className: getClassName26({ menuOpen }),
|
7655
|
+
onClick: (event) => {
|
7656
|
+
var _a;
|
7657
|
+
const element = event.target;
|
7658
|
+
if (window.matchMedia("(min-width: 638px)").matches) {
|
7659
|
+
return;
|
7660
|
+
}
|
7661
|
+
if (element.tagName === "A" && ((_a = element.getAttribute("href")) == null ? void 0 : _a.startsWith("#"))) {
|
7662
|
+
setMenuOpen(false);
|
7663
|
+
}
|
7664
|
+
},
|
7665
|
+
children: /* @__PURE__ */ jsxs18("div", { className: getClassName26("inner"), children: [
|
7666
|
+
/* @__PURE__ */ jsxs18("div", { className: getClassName26("history"), children: [
|
7667
|
+
/* @__PURE__ */ jsx38(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx38(Undo2, { size: 21 }) }),
|
7668
|
+
/* @__PURE__ */ jsx38(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx38(Redo2, { size: 21 }) })
|
7669
|
+
] }),
|
7670
|
+
/* @__PURE__ */ jsx38(Fragment13, { children: renderHeaderActions && renderHeaderActions() })
|
7671
|
+
] })
|
7672
|
+
}
|
7673
|
+
);
|
7674
|
+
}
|
7675
|
+
|
7676
|
+
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css#css-module
|
7677
|
+
init_react_import();
|
7678
|
+
var styles_module_default22 = { "PuckHeader": "_PuckHeader_15xnq_1", "PuckHeader-inner": "_PuckHeader-inner_15xnq_10", "PuckHeader-toggle": "_PuckHeader-toggle_15xnq_20", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_15xnq_27", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_15xnq_27", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_15xnq_28", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_15xnq_28", "PuckHeader-title": "_PuckHeader-title_15xnq_32", "PuckHeader-path": "_PuckHeader-path_15xnq_36", "PuckHeader-tools": "_PuckHeader-tools_15xnq_43", "PuckHeader-menuButton": "_PuckHeader-menuButton_15xnq_49", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_15xnq_54" };
|
7679
|
+
|
7680
|
+
// components/Puck/components/Header/index.tsx
|
7681
|
+
import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
|
7682
|
+
var getClassName27 = get_class_name_factory_default("PuckHeader", styles_module_default22);
|
7683
|
+
var HeaderInner = () => {
|
7684
|
+
const {
|
7685
|
+
onPublish,
|
7686
|
+
renderHeader,
|
7687
|
+
renderHeaderActions,
|
7688
|
+
headerTitle,
|
7689
|
+
headerPath,
|
7690
|
+
iframe: _iframe
|
7691
|
+
} = usePropsContext();
|
7692
|
+
const dispatch = useAppStore((s) => s.dispatch);
|
7693
|
+
const appStore = useAppStoreApi();
|
7694
|
+
const defaultHeaderRender = useMemo20(() => {
|
7695
|
+
if (renderHeader) {
|
7696
|
+
console.warn(
|
7697
|
+
"`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
|
7698
|
+
);
|
7699
|
+
const RenderHeader = (_a) => {
|
7700
|
+
var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
|
7701
|
+
const Comp = renderHeader;
|
7702
|
+
const appState = useAppStore((s) => s.state);
|
7703
|
+
return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
|
7704
|
+
};
|
7705
|
+
return RenderHeader;
|
7706
|
+
}
|
7707
|
+
return DefaultOverride;
|
7708
|
+
}, [renderHeader]);
|
7709
|
+
const defaultHeaderActionsRender = useMemo20(() => {
|
7710
|
+
if (renderHeaderActions) {
|
7711
|
+
console.warn(
|
7712
|
+
"`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
|
7713
|
+
);
|
7714
|
+
const RenderHeader = (props) => {
|
7715
|
+
const Comp = renderHeaderActions;
|
7716
|
+
const appState = useAppStore((s) => s.state);
|
7717
|
+
return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
|
7718
|
+
};
|
7719
|
+
return RenderHeader;
|
7720
|
+
}
|
7721
|
+
return DefaultOverride;
|
7722
|
+
}, [renderHeader]);
|
7723
|
+
const CustomHeader = useAppStore(
|
7724
|
+
(s) => s.overrides.header || defaultHeaderRender
|
7725
|
+
);
|
7726
|
+
const CustomHeaderActions = useAppStore(
|
7727
|
+
(s) => s.overrides.headerActions || defaultHeaderActionsRender
|
7728
|
+
);
|
7729
|
+
const [menuOpen, setMenuOpen] = useState22(false);
|
7730
|
+
const rootTitle = useAppStore((s) => {
|
7731
|
+
var _a, _b;
|
7732
|
+
const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
|
7733
|
+
return (_b = rootData.props.title) != null ? _b : "";
|
7734
|
+
});
|
7735
|
+
const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
|
7736
|
+
const rightSideBarVisible = useAppStore(
|
7737
|
+
(s) => s.state.ui.rightSideBarVisible
|
7738
|
+
);
|
7739
|
+
const toggleSidebars = useCallback17(
|
7740
|
+
(sidebar) => {
|
7741
|
+
const widerViewport = window.matchMedia("(min-width: 638px)").matches;
|
7742
|
+
const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
|
7743
|
+
const oppositeSideBar = sidebar === "left" ? "rightSideBarVisible" : "leftSideBarVisible";
|
7744
|
+
dispatch({
|
7745
|
+
type: "setUi",
|
7746
|
+
ui: __spreadValues({
|
7747
|
+
[`${sidebar}SideBarVisible`]: !sideBarVisible
|
7748
|
+
}, !widerViewport ? { [oppositeSideBar]: false } : {})
|
7749
|
+
});
|
7750
|
+
},
|
7751
|
+
[dispatch, leftSideBarVisible, rightSideBarVisible]
|
7752
|
+
);
|
7753
|
+
return /* @__PURE__ */ jsx39(
|
7754
|
+
CustomHeader,
|
7755
|
+
{
|
7756
|
+
actions: /* @__PURE__ */ jsx39(Fragment14, { children: /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
|
7757
|
+
Button,
|
7758
|
+
{
|
7759
|
+
onClick: () => {
|
7760
|
+
const data = appStore.getState().state.data;
|
7761
|
+
onPublish && onPublish(data);
|
7762
|
+
},
|
7763
|
+
icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
|
7764
|
+
children: "Publish"
|
7765
|
+
}
|
7766
|
+
) }) }),
|
7767
|
+
children: /* @__PURE__ */ jsx39(
|
7768
|
+
"header",
|
7769
|
+
{
|
7770
|
+
className: getClassName27({ leftSideBarVisible, rightSideBarVisible }),
|
7771
|
+
children: /* @__PURE__ */ jsxs19("div", { className: getClassName27("inner"), children: [
|
7772
|
+
/* @__PURE__ */ jsxs19("div", { className: getClassName27("toggle"), children: [
|
7773
|
+
/* @__PURE__ */ jsx39("div", { className: getClassName27("leftSideBarToggle"), children: /* @__PURE__ */ jsx39(
|
7774
|
+
IconButton,
|
7775
|
+
{
|
7776
|
+
onClick: () => {
|
7777
|
+
toggleSidebars("left");
|
7778
|
+
},
|
7779
|
+
title: "Toggle left sidebar",
|
7780
|
+
children: /* @__PURE__ */ jsx39(PanelLeft, { focusable: "false" })
|
7781
|
+
}
|
7782
|
+
) }),
|
7783
|
+
/* @__PURE__ */ jsx39("div", { className: getClassName27("rightSideBarToggle"), children: /* @__PURE__ */ jsx39(
|
7784
|
+
IconButton,
|
7785
|
+
{
|
7786
|
+
onClick: () => {
|
7787
|
+
toggleSidebars("right");
|
7788
|
+
},
|
7789
|
+
title: "Toggle right sidebar",
|
7790
|
+
children: /* @__PURE__ */ jsx39(PanelRight, { focusable: "false" })
|
7791
|
+
}
|
7792
|
+
) })
|
7793
|
+
] }),
|
7794
|
+
/* @__PURE__ */ jsx39("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs19(Heading, { rank: "2", size: "xs", children: [
|
7795
|
+
headerTitle || rootTitle || "Page",
|
7796
|
+
headerPath && /* @__PURE__ */ jsxs19(Fragment14, { children: [
|
7797
|
+
" ",
|
7798
|
+
/* @__PURE__ */ jsx39("code", { className: getClassName27("path"), children: headerPath })
|
7799
|
+
] })
|
7800
|
+
] }) }),
|
7801
|
+
/* @__PURE__ */ jsxs19("div", { className: getClassName27("tools"), children: [
|
7802
|
+
/* @__PURE__ */ jsx39("div", { className: getClassName27("menuButton"), children: /* @__PURE__ */ jsx39(
|
7803
|
+
IconButton,
|
7804
|
+
{
|
7805
|
+
onClick: () => {
|
7806
|
+
return setMenuOpen(!menuOpen);
|
7807
|
+
},
|
7808
|
+
title: "Toggle menu bar",
|
7809
|
+
children: menuOpen ? /* @__PURE__ */ jsx39(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx39(ChevronDown, { focusable: "false" })
|
7810
|
+
}
|
7811
|
+
) }),
|
7812
|
+
/* @__PURE__ */ jsx39(
|
7813
|
+
MenuBar,
|
7814
|
+
{
|
7815
|
+
dispatch,
|
7816
|
+
onPublish,
|
7817
|
+
menuOpen,
|
7818
|
+
renderHeaderActions: () => /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
|
7819
|
+
Button,
|
7820
|
+
{
|
7821
|
+
onClick: () => {
|
7822
|
+
const data = appStore.getState().state.data;
|
7823
|
+
onPublish && onPublish(data);
|
7824
|
+
},
|
7825
|
+
icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
|
7826
|
+
children: "Publish"
|
7827
|
+
}
|
7828
|
+
) }),
|
7829
|
+
setMenuOpen
|
7830
|
+
}
|
7831
|
+
)
|
7832
|
+
] })
|
7833
|
+
] })
|
7834
|
+
}
|
7835
|
+
)
|
7836
|
+
}
|
7837
|
+
);
|
7838
|
+
};
|
7839
|
+
var Header = memo3(HeaderInner);
|
7840
|
+
|
7841
|
+
// components/Puck/index.tsx
|
7842
|
+
import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
|
7843
|
+
var getClassName28 = get_class_name_factory_default("Puck", styles_module_default14);
|
7844
|
+
var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default14);
|
7845
|
+
var FieldSideBar = () => {
|
7846
|
+
const title = useAppStore(
|
7847
|
+
(s) => {
|
7848
|
+
var _a, _b;
|
7849
|
+
return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : "Page";
|
7850
|
+
}
|
7851
|
+
);
|
7852
|
+
return /* @__PURE__ */ jsx40(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx40(Fields, {}) });
|
7853
|
+
};
|
7854
|
+
var propsContext = createContext7({});
|
7970
7855
|
function PropsProvider(props) {
|
7971
|
-
return /* @__PURE__ */
|
7856
|
+
return /* @__PURE__ */ jsx40(propsContext.Provider, { value: props, children: props.children });
|
7972
7857
|
}
|
7973
|
-
var usePropsContext = () =>
|
7858
|
+
var usePropsContext = () => useContext12(propsContext);
|
7974
7859
|
function PuckProvider({ children }) {
|
7975
7860
|
const {
|
7976
7861
|
config,
|
@@ -7986,11 +7871,14 @@ function PuckProvider({ children }) {
|
|
7986
7871
|
metadata,
|
7987
7872
|
onAction
|
7988
7873
|
} = usePropsContext();
|
7989
|
-
const iframe =
|
7990
|
-
|
7991
|
-
|
7992
|
-
|
7993
|
-
|
7874
|
+
const iframe = useMemo21(
|
7875
|
+
() => __spreadValues({
|
7876
|
+
enabled: true,
|
7877
|
+
waitForStyles: true
|
7878
|
+
}, _iframe),
|
7879
|
+
[_iframe]
|
7880
|
+
);
|
7881
|
+
const [generatedAppState] = useState23(() => {
|
7994
7882
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
7995
7883
|
const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
|
7996
7884
|
let clientUiState = {};
|
@@ -8050,7 +7938,7 @@ function PuckProvider({ children }) {
|
|
8050
7938
|
return walkAppState(newAppState, config);
|
8051
7939
|
});
|
8052
7940
|
const { appendData = true } = _initialHistory || {};
|
8053
|
-
const [blendedHistories] =
|
7941
|
+
const [blendedHistories] = useState23(
|
8054
7942
|
[
|
8055
7943
|
...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
|
8056
7944
|
...appendData ? [{ state: generatedAppState }] : []
|
@@ -8070,7 +7958,7 @@ function PuckProvider({ children }) {
|
|
8070
7958
|
overrides,
|
8071
7959
|
plugins
|
8072
7960
|
});
|
8073
|
-
const generateAppStore =
|
7961
|
+
const generateAppStore = useCallback18(
|
8074
7962
|
(state) => {
|
8075
7963
|
return {
|
8076
7964
|
state,
|
@@ -8094,10 +7982,15 @@ function PuckProvider({ children }) {
|
|
8094
7982
|
metadata
|
8095
7983
|
]
|
8096
7984
|
);
|
8097
|
-
const [appStore] =
|
7985
|
+
const [appStore] = useState23(
|
8098
7986
|
() => createAppStore(generateAppStore(initialAppState))
|
8099
7987
|
);
|
8100
|
-
|
7988
|
+
useEffect25(() => {
|
7989
|
+
if (process.env.NODE_ENV !== "production") {
|
7990
|
+
window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
|
7991
|
+
}
|
7992
|
+
}, [appStore]);
|
7993
|
+
useEffect25(() => {
|
8101
7994
|
const state = appStore.getState().state;
|
8102
7995
|
appStore.setState(__spreadValues({}, generateAppStore(state)));
|
8103
7996
|
}, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
|
@@ -8106,66 +7999,47 @@ function PuckProvider({ children }) {
|
|
8106
7999
|
index: initialHistoryIndex,
|
8107
8000
|
initialAppState
|
8108
8001
|
});
|
8109
|
-
|
8110
|
-
|
8111
|
-
|
8112
|
-
|
8002
|
+
const previousData = useRef8(null);
|
8003
|
+
useEffect25(() => {
|
8004
|
+
appStore.subscribe(
|
8005
|
+
(s) => s.state.data,
|
8006
|
+
(data) => {
|
8007
|
+
if (onChange) {
|
8008
|
+
if (fdeq(data, previousData.current)) return;
|
8009
|
+
onChange(data);
|
8010
|
+
previousData.current = data;
|
8011
|
+
}
|
8012
|
+
}
|
8013
|
+
);
|
8113
8014
|
}, []);
|
8114
8015
|
useRegisterPermissionsSlice(appStore, permissions);
|
8115
8016
|
const uPuckStore = useRegisterUsePuckStore(appStore);
|
8116
|
-
|
8017
|
+
useEffect25(() => {
|
8117
8018
|
const { resolveAndCommitData } = appStore.getState();
|
8118
8019
|
resolveAndCommitData();
|
8119
8020
|
}, []);
|
8120
|
-
return /* @__PURE__ */
|
8021
|
+
return /* @__PURE__ */ jsx40(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx40(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
|
8121
8022
|
}
|
8122
8023
|
function PuckLayout({ children }) {
|
8123
8024
|
const {
|
8124
|
-
onChange,
|
8125
|
-
onPublish,
|
8126
|
-
renderHeader,
|
8127
|
-
renderHeaderActions,
|
8128
|
-
headerTitle,
|
8129
|
-
headerPath,
|
8130
8025
|
iframe: _iframe,
|
8131
8026
|
dnd,
|
8132
8027
|
initialHistory: _initialHistory
|
8133
8028
|
} = usePropsContext();
|
8134
|
-
const iframe =
|
8135
|
-
|
8136
|
-
|
8137
|
-
|
8029
|
+
const iframe = useMemo21(
|
8030
|
+
() => __spreadValues({
|
8031
|
+
enabled: true,
|
8032
|
+
waitForStyles: true
|
8033
|
+
}, _iframe),
|
8034
|
+
[_iframe]
|
8035
|
+
);
|
8138
8036
|
useInjectGlobalCss(iframe.enabled);
|
8139
8037
|
const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
|
8140
8038
|
const rightSideBarVisible = useAppStore(
|
8141
8039
|
(s) => s.state.ui.rightSideBarVisible
|
8142
8040
|
);
|
8143
|
-
const [menuOpen, setMenuOpen] = useState22(false);
|
8144
|
-
const appStore = useAppStoreApi();
|
8145
|
-
useEffect24(() => {
|
8146
|
-
return appStore.subscribe((s) => {
|
8147
|
-
if (onChange) onChange(s.state.data);
|
8148
|
-
});
|
8149
|
-
}, [appStore]);
|
8150
|
-
const rootProps = useAppStore(
|
8151
|
-
(s) => s.state.data.root.props || s.state.data.root.props
|
8152
|
-
);
|
8153
8041
|
const dispatch = useAppStore((s) => s.dispatch);
|
8154
|
-
|
8155
|
-
(sidebar) => {
|
8156
|
-
const widerViewport = window.matchMedia("(min-width: 638px)").matches;
|
8157
|
-
const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
|
8158
|
-
const oppositeSideBar = sidebar === "left" ? "rightSideBarVisible" : "leftSideBarVisible";
|
8159
|
-
dispatch({
|
8160
|
-
type: "setUi",
|
8161
|
-
ui: __spreadValues({
|
8162
|
-
[`${sidebar}SideBarVisible`]: !sideBarVisible
|
8163
|
-
}, !widerViewport ? { [oppositeSideBar]: false } : {})
|
8164
|
-
});
|
8165
|
-
},
|
8166
|
-
[dispatch, leftSideBarVisible, rightSideBarVisible]
|
8167
|
-
);
|
8168
|
-
useEffect24(() => {
|
8042
|
+
useEffect25(() => {
|
8169
8043
|
if (!window.matchMedia("(min-width: 638px)").matches) {
|
8170
8044
|
dispatch({
|
8171
8045
|
type: "setUi",
|
@@ -8188,55 +8062,18 @@ function PuckLayout({ children }) {
|
|
8188
8062
|
window.removeEventListener("resize", handleResize);
|
8189
8063
|
};
|
8190
8064
|
}, []);
|
8191
|
-
const defaultHeaderRender = useMemo20(() => {
|
8192
|
-
if (renderHeader) {
|
8193
|
-
console.warn(
|
8194
|
-
"`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
|
8195
|
-
);
|
8196
|
-
const RenderHeader = (_a) => {
|
8197
|
-
var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
|
8198
|
-
const Comp = renderHeader;
|
8199
|
-
const appState = useAppStore((s) => s.state);
|
8200
|
-
return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
|
8201
|
-
};
|
8202
|
-
return RenderHeader;
|
8203
|
-
}
|
8204
|
-
return DefaultOverride;
|
8205
|
-
}, [renderHeader]);
|
8206
|
-
const defaultHeaderActionsRender = useMemo20(() => {
|
8207
|
-
if (renderHeaderActions) {
|
8208
|
-
console.warn(
|
8209
|
-
"`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
|
8210
|
-
);
|
8211
|
-
const RenderHeader = (props) => {
|
8212
|
-
const Comp = renderHeaderActions;
|
8213
|
-
const appState = useAppStore((s) => s.state);
|
8214
|
-
return /* @__PURE__ */ jsx39(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
|
8215
|
-
};
|
8216
|
-
return RenderHeader;
|
8217
|
-
}
|
8218
|
-
return DefaultOverride;
|
8219
|
-
}, [renderHeader]);
|
8220
8065
|
const overrides = useAppStore((s) => s.overrides);
|
8221
|
-
const CustomPuck =
|
8066
|
+
const CustomPuck = useMemo21(
|
8222
8067
|
() => overrides.puck || DefaultOverride,
|
8223
8068
|
[overrides]
|
8224
8069
|
);
|
8225
|
-
const
|
8226
|
-
|
8227
|
-
[overrides]
|
8228
|
-
);
|
8229
|
-
const CustomHeaderActions = useMemo20(
|
8230
|
-
() => overrides.headerActions || defaultHeaderActionsRender,
|
8231
|
-
[overrides]
|
8232
|
-
);
|
8233
|
-
const [mounted, setMounted] = useState22(false);
|
8234
|
-
useEffect24(() => {
|
8070
|
+
const [mounted, setMounted] = useState23(false);
|
8071
|
+
useEffect25(() => {
|
8235
8072
|
setMounted(true);
|
8236
8073
|
}, []);
|
8237
8074
|
const ready = useAppStore((s) => s.status === "READY");
|
8238
8075
|
useMonitorHotkeys();
|
8239
|
-
|
8076
|
+
useEffect25(() => {
|
8240
8077
|
if (ready && iframe.enabled) {
|
8241
8078
|
const frameDoc = getFrame();
|
8242
8079
|
if (frameDoc) {
|
@@ -8245,213 +8082,36 @@ function PuckLayout({ children }) {
|
|
8245
8082
|
}
|
8246
8083
|
}, [ready, iframe.enabled]);
|
8247
8084
|
usePreviewModeHotkeys();
|
8248
|
-
return /* @__PURE__ */
|
8249
|
-
/* @__PURE__ */
|
8085
|
+
return /* @__PURE__ */ jsxs20("div", { className: `Puck ${getClassName28()}`, children: [
|
8086
|
+
/* @__PURE__ */ jsx40(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx40(CustomPuck, { children: children || /* @__PURE__ */ jsx40(
|
8250
8087
|
"div",
|
8251
8088
|
{
|
8252
8089
|
className: getLayoutClassName({
|
8253
8090
|
leftSideBarVisible,
|
8254
|
-
menuOpen,
|
8255
8091
|
mounted,
|
8256
8092
|
rightSideBarVisible
|
8257
8093
|
}),
|
8258
|
-
children: /* @__PURE__ */
|
8259
|
-
/* @__PURE__ */
|
8260
|
-
|
8261
|
-
{
|
8262
|
-
|
8263
|
-
Button,
|
8264
|
-
{
|
8265
|
-
onClick: () => {
|
8266
|
-
const data = appStore.getState().state.data;
|
8267
|
-
onPublish && onPublish(data);
|
8268
|
-
},
|
8269
|
-
icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
|
8270
|
-
children: "Publish"
|
8271
|
-
}
|
8272
|
-
) }) }),
|
8273
|
-
children: /* @__PURE__ */ jsx39("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("headerInner"), children: [
|
8274
|
-
/* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("headerToggle"), children: [
|
8275
|
-
/* @__PURE__ */ jsx39(
|
8276
|
-
"div",
|
8277
|
-
{
|
8278
|
-
className: getLayoutClassName("leftSideBarToggle"),
|
8279
|
-
children: /* @__PURE__ */ jsx39(
|
8280
|
-
IconButton,
|
8281
|
-
{
|
8282
|
-
onClick: () => {
|
8283
|
-
toggleSidebars("left");
|
8284
|
-
},
|
8285
|
-
title: "Toggle left sidebar",
|
8286
|
-
children: /* @__PURE__ */ jsx39(PanelLeft, { focusable: "false" })
|
8287
|
-
}
|
8288
|
-
)
|
8289
|
-
}
|
8290
|
-
),
|
8291
|
-
/* @__PURE__ */ jsx39(
|
8292
|
-
"div",
|
8293
|
-
{
|
8294
|
-
className: getLayoutClassName("rightSideBarToggle"),
|
8295
|
-
children: /* @__PURE__ */ jsx39(
|
8296
|
-
IconButton,
|
8297
|
-
{
|
8298
|
-
onClick: () => {
|
8299
|
-
toggleSidebars("right");
|
8300
|
-
},
|
8301
|
-
title: "Toggle right sidebar",
|
8302
|
-
children: /* @__PURE__ */ jsx39(PanelRight, { focusable: "false" })
|
8303
|
-
}
|
8304
|
-
)
|
8305
|
-
}
|
8306
|
-
)
|
8307
|
-
] }),
|
8308
|
-
/* @__PURE__ */ jsx39("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ jsxs19(Heading, { rank: "2", size: "xs", children: [
|
8309
|
-
headerTitle || (rootProps == null ? void 0 : rootProps.title) || "Page",
|
8310
|
-
headerPath && /* @__PURE__ */ jsxs19(Fragment14, { children: [
|
8311
|
-
" ",
|
8312
|
-
/* @__PURE__ */ jsx39(
|
8313
|
-
"code",
|
8314
|
-
{
|
8315
|
-
className: getLayoutClassName("headerPath"),
|
8316
|
-
children: headerPath
|
8317
|
-
}
|
8318
|
-
)
|
8319
|
-
] })
|
8320
|
-
] }) }),
|
8321
|
-
/* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("headerTools"), children: [
|
8322
|
-
/* @__PURE__ */ jsx39("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ jsx39(
|
8323
|
-
IconButton,
|
8324
|
-
{
|
8325
|
-
onClick: () => {
|
8326
|
-
return setMenuOpen(!menuOpen);
|
8327
|
-
},
|
8328
|
-
title: "Toggle menu bar",
|
8329
|
-
children: menuOpen ? /* @__PURE__ */ jsx39(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx39(ChevronDown, { focusable: "false" })
|
8330
|
-
}
|
8331
|
-
) }),
|
8332
|
-
/* @__PURE__ */ jsx39(
|
8333
|
-
MenuBar,
|
8334
|
-
{
|
8335
|
-
dispatch,
|
8336
|
-
onPublish,
|
8337
|
-
menuOpen,
|
8338
|
-
renderHeaderActions: () => /* @__PURE__ */ jsx39(CustomHeaderActions, { children: /* @__PURE__ */ jsx39(
|
8339
|
-
Button,
|
8340
|
-
{
|
8341
|
-
onClick: () => {
|
8342
|
-
const data = appStore.getState().state.data;
|
8343
|
-
onPublish && onPublish(data);
|
8344
|
-
},
|
8345
|
-
icon: /* @__PURE__ */ jsx39(Globe, { size: "14px" }),
|
8346
|
-
children: "Publish"
|
8347
|
-
}
|
8348
|
-
) }),
|
8349
|
-
setMenuOpen
|
8350
|
-
}
|
8351
|
-
)
|
8352
|
-
] })
|
8353
|
-
] }) })
|
8354
|
-
}
|
8355
|
-
),
|
8356
|
-
/* @__PURE__ */ jsxs19("div", { className: getLayoutClassName("leftSideBar"), children: [
|
8357
|
-
/* @__PURE__ */ jsx39(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx39(Components, {}) }),
|
8358
|
-
/* @__PURE__ */ jsx39(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx39(Outline, {}) })
|
8094
|
+
children: /* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("inner"), children: [
|
8095
|
+
/* @__PURE__ */ jsx40(Header, {}),
|
8096
|
+
/* @__PURE__ */ jsxs20("div", { className: getLayoutClassName("leftSideBar"), children: [
|
8097
|
+
/* @__PURE__ */ jsx40(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx40(Components, {}) }),
|
8098
|
+
/* @__PURE__ */ jsx40(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx40(Outline, {}) })
|
8359
8099
|
] }),
|
8360
|
-
/* @__PURE__ */
|
8361
|
-
/* @__PURE__ */
|
8100
|
+
/* @__PURE__ */ jsx40(Canvas, {}),
|
8101
|
+
/* @__PURE__ */ jsx40("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ jsx40(FieldSideBar, {}) })
|
8362
8102
|
] })
|
8363
8103
|
}
|
8364
8104
|
) }) }),
|
8365
|
-
/* @__PURE__ */
|
8105
|
+
/* @__PURE__ */ jsx40("div", { id: "puck-portal-root", className: getClassName28("portal") })
|
8366
8106
|
] });
|
8367
8107
|
}
|
8368
8108
|
function Puck(props) {
|
8369
|
-
return /* @__PURE__ */
|
8109
|
+
return /* @__PURE__ */ jsx40(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx40(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx40(PuckLayout, __spreadValues({}, props)) })) }));
|
8370
8110
|
}
|
8371
8111
|
Puck.Components = Components;
|
8372
8112
|
Puck.Fields = Fields;
|
8373
8113
|
Puck.Outline = Outline;
|
8374
|
-
Puck.Preview =
|
8375
|
-
|
8376
|
-
// lib/migrate.ts
|
8377
|
-
init_react_import();
|
8378
|
-
var migrations = [
|
8379
|
-
// Migrate root to root.props
|
8380
|
-
(data) => {
|
8381
|
-
const rootProps = data.root.props || data.root;
|
8382
|
-
if (Object.keys(data.root).length > 0 && !data.root.props) {
|
8383
|
-
console.warn(
|
8384
|
-
"Migration applied: Root props moved from `root` to `root.props`."
|
8385
|
-
);
|
8386
|
-
return __spreadProps(__spreadValues({}, data), {
|
8387
|
-
root: {
|
8388
|
-
props: __spreadValues({}, rootProps)
|
8389
|
-
}
|
8390
|
-
});
|
8391
|
-
}
|
8392
|
-
return data;
|
8393
|
-
},
|
8394
|
-
// Migrate zones to slots
|
8395
|
-
(data, config) => {
|
8396
|
-
var _a;
|
8397
|
-
if (!config) return data;
|
8398
|
-
console.log("Migrating DropZones to slots...");
|
8399
|
-
const updatedItems = {};
|
8400
|
-
const appState = __spreadProps(__spreadValues({}, defaultAppState), { data });
|
8401
|
-
const { indexes } = walkAppState(appState, config);
|
8402
|
-
const deletedCompounds = [];
|
8403
|
-
walkAppState(appState, config, (content, zoneCompound, zoneType) => {
|
8404
|
-
var _a2, _b;
|
8405
|
-
if (zoneType === "dropzone") {
|
8406
|
-
const [id, slotName] = zoneCompound.split(":");
|
8407
|
-
const nodeData = indexes.nodes[id].data;
|
8408
|
-
const componentType = nodeData.type;
|
8409
|
-
const configForComponent = config.components[componentType];
|
8410
|
-
if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
|
8411
|
-
updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
|
8412
|
-
props: __spreadProps(__spreadValues({}, nodeData.props), {
|
8413
|
-
[slotName]: content
|
8414
|
-
})
|
8415
|
-
});
|
8416
|
-
deletedCompounds.push(zoneCompound);
|
8417
|
-
}
|
8418
|
-
return content;
|
8419
|
-
}
|
8420
|
-
return content;
|
8421
|
-
});
|
8422
|
-
const updated = walkAppState(
|
8423
|
-
appState,
|
8424
|
-
config,
|
8425
|
-
(content) => content,
|
8426
|
-
(item) => {
|
8427
|
-
var _a2;
|
8428
|
-
return (_a2 = updatedItems[item.props.id]) != null ? _a2 : item;
|
8429
|
-
}
|
8430
|
-
);
|
8431
|
-
deletedCompounds.forEach((zoneCompound) => {
|
8432
|
-
var _a2;
|
8433
|
-
const [_, propName] = zoneCompound.split(":");
|
8434
|
-
console.log(
|
8435
|
-
`\u2713 Success: Migrated "${zoneCompound}" from DropZone to slot field "${propName}"`
|
8436
|
-
);
|
8437
|
-
(_a2 = updated.data.zones) == null ? true : delete _a2[zoneCompound];
|
8438
|
-
});
|
8439
|
-
Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
|
8440
|
-
const [_, propName] = zoneCompound.split(":");
|
8441
|
-
throw new Error(
|
8442
|
-
`Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
|
8443
|
-
);
|
8444
|
-
});
|
8445
|
-
delete updated.data.zones;
|
8446
|
-
return updated.data;
|
8447
|
-
}
|
8448
|
-
];
|
8449
|
-
function migrate(data, config) {
|
8450
|
-
return migrations == null ? void 0 : migrations.reduce(
|
8451
|
-
(acc, migration) => migration(acc, config),
|
8452
|
-
data
|
8453
|
-
);
|
8454
|
-
}
|
8114
|
+
Puck.Preview = Preview2;
|
8455
8115
|
export {
|
8456
8116
|
Action,
|
8457
8117
|
ActionBar,
|
@@ -8471,6 +8131,7 @@ export {
|
|
8471
8131
|
renderContext,
|
8472
8132
|
resolveAllData,
|
8473
8133
|
transformProps,
|
8134
|
+
useGetPuck,
|
8474
8135
|
usePuck,
|
8475
8136
|
walkTree
|
8476
8137
|
};
|