@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.js
CHANGED
@@ -9,9 +9,6 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
9
|
var __getProtoOf = Object.getPrototypeOf;
|
10
10
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
11
11
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
12
|
-
var __typeError = (msg) => {
|
13
|
-
throw TypeError(msg);
|
14
|
-
};
|
15
12
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
16
13
|
var __spreadValues = (a, b) => {
|
17
14
|
for (var prop in b || (b = {}))
|
@@ -64,10 +61,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
64
61
|
mod
|
65
62
|
));
|
66
63
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
67
|
-
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
68
|
-
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
69
|
-
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
70
|
-
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
71
64
|
var __async = (__this, __arguments, generator) => {
|
72
65
|
return new Promise((resolve, reject) => {
|
73
66
|
var fulfilled = (value) => {
|
@@ -181,6 +174,7 @@ __export(core_exports, {
|
|
181
174
|
renderContext: () => renderContext,
|
182
175
|
resolveAllData: () => resolveAllData,
|
183
176
|
transformProps: () => transformProps,
|
177
|
+
useGetPuck: () => useGetPuck,
|
184
178
|
usePuck: () => usePuck,
|
185
179
|
walkTree: () => walkTree
|
186
180
|
});
|
@@ -309,7 +303,7 @@ init_react_import();
|
|
309
303
|
|
310
304
|
// css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
|
311
305
|
init_react_import();
|
312
|
-
var styles_module_default2 = { "InputWrapper": "
|
306
|
+
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" };
|
313
307
|
|
314
308
|
// components/AutoField/index.tsx
|
315
309
|
var import_react22 = require("react");
|
@@ -798,43 +792,6 @@ init_react_import();
|
|
798
792
|
// lib/data/walk-app-state.ts
|
799
793
|
init_react_import();
|
800
794
|
|
801
|
-
// lib/data/for-each-slot.ts
|
802
|
-
init_react_import();
|
803
|
-
|
804
|
-
// lib/data/is-slot.ts
|
805
|
-
init_react_import();
|
806
|
-
var isSlot = (prop) => {
|
807
|
-
var _a, _b;
|
808
|
-
return Array.isArray(prop) && typeof ((_a = prop[0]) == null ? void 0 : _a.type) === "string" && typeof ((_b = prop[0]) == null ? void 0 : _b.props) === "object";
|
809
|
-
};
|
810
|
-
var createIsSlotConfig = (config) => (itemType, propName, propValue) => {
|
811
|
-
var _a, _b;
|
812
|
-
const configForComponent = itemType === "root" ? config == null ? void 0 : config.root : config == null ? void 0 : config.components[itemType];
|
813
|
-
if (!configForComponent) return isSlot(propValue);
|
814
|
-
return ((_b = (_a = configForComponent.fields) == null ? void 0 : _a[propName]) == null ? void 0 : _b.type) === "slot";
|
815
|
-
};
|
816
|
-
|
817
|
-
// lib/data/for-each-slot.ts
|
818
|
-
var forEachSlot = (item, cb, recursive = false, isSlot2 = isSlot) => {
|
819
|
-
const props = item.props || {};
|
820
|
-
const propKeys = Object.keys(props);
|
821
|
-
for (let i = 0; i < propKeys.length; i++) {
|
822
|
-
const propKey = propKeys[i];
|
823
|
-
const itemType = "type" in item ? item.type : "root";
|
824
|
-
if (isSlot2(itemType, propKey, props[propKey])) {
|
825
|
-
const content = props[propKey];
|
826
|
-
cb(props.id, propKey, content);
|
827
|
-
if (recursive) {
|
828
|
-
content.forEach(
|
829
|
-
(childItem) => __async(void 0, null, function* () {
|
830
|
-
return forEachSlot(childItem, cb, true, isSlot2);
|
831
|
-
})
|
832
|
-
);
|
833
|
-
}
|
834
|
-
}
|
835
|
-
}
|
836
|
-
};
|
837
|
-
|
838
795
|
// lib/data/for-related-zones.ts
|
839
796
|
init_react_import();
|
840
797
|
|
@@ -868,19 +825,169 @@ function forRelatedZones(item, data, cb, path = []) {
|
|
868
825
|
});
|
869
826
|
}
|
870
827
|
|
828
|
+
// lib/data/map-slots.ts
|
829
|
+
init_react_import();
|
830
|
+
|
831
|
+
// lib/data/default-slots.ts
|
832
|
+
init_react_import();
|
833
|
+
var defaultSlots = (value, fields) => Object.keys(fields).reduce(
|
834
|
+
(acc, fieldName) => fields[fieldName].type === "slot" ? __spreadValues({ [fieldName]: [] }, acc) : acc,
|
835
|
+
value
|
836
|
+
);
|
837
|
+
|
838
|
+
// lib/data/map-slots.ts
|
839
|
+
var isPromise = (v) => !!v && typeof v.then === "function";
|
840
|
+
var flatten = (values) => values.reduce((acc, item) => __spreadValues(__spreadValues({}, acc), item), {});
|
841
|
+
var containsPromise = (arr) => arr.some(isPromise);
|
842
|
+
var walkField = ({
|
843
|
+
value,
|
844
|
+
fields,
|
845
|
+
map,
|
846
|
+
propKey = "",
|
847
|
+
propPath = "",
|
848
|
+
id = "",
|
849
|
+
config,
|
850
|
+
recurseSlots = false
|
851
|
+
}) => {
|
852
|
+
var _a, _b, _c;
|
853
|
+
if (((_a = fields[propKey]) == null ? void 0 : _a.type) === "slot") {
|
854
|
+
const content = value || [];
|
855
|
+
const mappedContent = recurseSlots ? content.map((el) => {
|
856
|
+
var _a2;
|
857
|
+
const componentConfig = config.components[el.type];
|
858
|
+
if (!componentConfig) {
|
859
|
+
throw new Error(`Could not find component config for ${el.type}`);
|
860
|
+
}
|
861
|
+
const fields2 = (_a2 = componentConfig.fields) != null ? _a2 : {};
|
862
|
+
return walkField({
|
863
|
+
value: __spreadProps(__spreadValues({}, el), { props: defaultSlots(el.props, fields2) }),
|
864
|
+
fields: fields2,
|
865
|
+
map,
|
866
|
+
id: el.props.id,
|
867
|
+
config,
|
868
|
+
recurseSlots
|
869
|
+
});
|
870
|
+
}) : content;
|
871
|
+
if (containsPromise(mappedContent)) {
|
872
|
+
return Promise.all(mappedContent);
|
873
|
+
}
|
874
|
+
return map(mappedContent, id, propPath, fields[propKey], propPath);
|
875
|
+
}
|
876
|
+
if (value && typeof value === "object") {
|
877
|
+
if (Array.isArray(value)) {
|
878
|
+
const arrayFields = ((_b = fields[propKey]) == null ? void 0 : _b.type) === "array" ? fields[propKey].arrayFields : null;
|
879
|
+
if (!arrayFields) return value;
|
880
|
+
const newValue = value.map(
|
881
|
+
(el, idx) => walkField({
|
882
|
+
value: el,
|
883
|
+
fields: arrayFields,
|
884
|
+
map,
|
885
|
+
propKey,
|
886
|
+
propPath: `${propPath}[${idx}]`,
|
887
|
+
id,
|
888
|
+
config,
|
889
|
+
recurseSlots
|
890
|
+
})
|
891
|
+
);
|
892
|
+
if (containsPromise(newValue)) {
|
893
|
+
return Promise.all(newValue);
|
894
|
+
}
|
895
|
+
return newValue;
|
896
|
+
} else if ("$$typeof" in value) {
|
897
|
+
return value;
|
898
|
+
} else {
|
899
|
+
const objectFields = ((_c = fields[propKey]) == null ? void 0 : _c.type) === "object" ? fields[propKey].objectFields : fields;
|
900
|
+
return walkObject({
|
901
|
+
value,
|
902
|
+
fields: objectFields,
|
903
|
+
map,
|
904
|
+
id,
|
905
|
+
getPropPath: (k) => `${propPath}.${k}`,
|
906
|
+
config,
|
907
|
+
recurseSlots
|
908
|
+
});
|
909
|
+
}
|
910
|
+
}
|
911
|
+
return value;
|
912
|
+
};
|
913
|
+
var walkObject = ({
|
914
|
+
value,
|
915
|
+
fields,
|
916
|
+
map,
|
917
|
+
id,
|
918
|
+
getPropPath,
|
919
|
+
config,
|
920
|
+
recurseSlots
|
921
|
+
}) => {
|
922
|
+
const newProps = Object.entries(value).map(([k, v]) => {
|
923
|
+
const opts = {
|
924
|
+
value: v,
|
925
|
+
fields,
|
926
|
+
map,
|
927
|
+
propKey: k,
|
928
|
+
propPath: getPropPath(k),
|
929
|
+
id,
|
930
|
+
config,
|
931
|
+
recurseSlots
|
932
|
+
};
|
933
|
+
const newValue = walkField(opts);
|
934
|
+
if (isPromise(newValue)) {
|
935
|
+
return newValue.then((resolvedValue) => ({
|
936
|
+
[k]: resolvedValue
|
937
|
+
}));
|
938
|
+
}
|
939
|
+
return {
|
940
|
+
[k]: newValue
|
941
|
+
};
|
942
|
+
}, {});
|
943
|
+
if (containsPromise(newProps)) {
|
944
|
+
return Promise.all(newProps).then(flatten);
|
945
|
+
}
|
946
|
+
return flatten(newProps);
|
947
|
+
};
|
948
|
+
function mapSlots(item, map, config, recurseSlots = false) {
|
949
|
+
var _a, _b, _c, _d, _e;
|
950
|
+
const itemType = "type" in item ? item.type : "root";
|
951
|
+
const componentConfig = itemType === "root" ? config.root : (_a = config.components) == null ? void 0 : _a[itemType];
|
952
|
+
const newProps = walkObject({
|
953
|
+
value: defaultSlots((_b = item.props) != null ? _b : {}, (_c = componentConfig == null ? void 0 : componentConfig.fields) != null ? _c : {}),
|
954
|
+
fields: (_d = componentConfig == null ? void 0 : componentConfig.fields) != null ? _d : {},
|
955
|
+
map,
|
956
|
+
id: item.props ? (_e = item.props.id) != null ? _e : "root" : "root",
|
957
|
+
getPropPath: (k) => k,
|
958
|
+
config,
|
959
|
+
recurseSlots
|
960
|
+
});
|
961
|
+
if (isPromise(newProps)) {
|
962
|
+
return newProps.then((resolvedProps) => __spreadProps(__spreadValues({}, item), {
|
963
|
+
props: resolvedProps
|
964
|
+
}));
|
965
|
+
}
|
966
|
+
return __spreadProps(__spreadValues({}, item), {
|
967
|
+
props: newProps
|
968
|
+
});
|
969
|
+
}
|
970
|
+
|
971
|
+
// lib/data/flatten-node.ts
|
972
|
+
init_react_import();
|
973
|
+
var import_flat = require("flat");
|
974
|
+
|
871
975
|
// lib/data/strip-slots.ts
|
872
976
|
init_react_import();
|
873
|
-
var stripSlots = (data) => {
|
874
|
-
return
|
875
|
-
|
876
|
-
|
877
|
-
|
878
|
-
|
879
|
-
|
880
|
-
|
881
|
-
|
882
|
-
|
883
|
-
|
977
|
+
var stripSlots = (data, config) => {
|
978
|
+
return mapSlots(data, () => null, config);
|
979
|
+
};
|
980
|
+
|
981
|
+
// lib/data/flatten-node.ts
|
982
|
+
var flattenNode = (node, config) => {
|
983
|
+
return __spreadProps(__spreadValues({}, node), {
|
984
|
+
props: (0, import_flat.flatten)(stripSlots(node, config).props)
|
985
|
+
});
|
986
|
+
};
|
987
|
+
var expandNode = (node) => {
|
988
|
+
const props = (0, import_flat.unflatten)(node.props);
|
989
|
+
return __spreadProps(__spreadValues({}, node), {
|
990
|
+
props
|
884
991
|
});
|
885
992
|
};
|
886
993
|
|
@@ -926,10 +1033,9 @@ function walkAppState(state, config, mapContent = (content) => content, mapNodeO
|
|
926
1033
|
const mappedItem = mapNodeOrSkip(item, path, index);
|
927
1034
|
if (!mappedItem) return item;
|
928
1035
|
const id = mappedItem.props.id;
|
929
|
-
const newProps = __spreadValues({},
|
930
|
-
forEachSlot(
|
1036
|
+
const newProps = __spreadProps(__spreadValues({}, mapSlots(
|
931
1037
|
mappedItem,
|
932
|
-
(parentId2, slotId
|
1038
|
+
(content, parentId2, slotId) => {
|
933
1039
|
const zoneCompound = `${parentId2}:${slotId}`;
|
934
1040
|
const [_2, newContent2] = processContent(
|
935
1041
|
path,
|
@@ -938,18 +1044,19 @@ function walkAppState(state, config, mapContent = (content) => content, mapNodeO
|
|
938
1044
|
"slot",
|
939
1045
|
parentId2
|
940
1046
|
);
|
941
|
-
|
1047
|
+
return newContent2;
|
942
1048
|
},
|
943
|
-
|
944
|
-
|
945
|
-
|
1049
|
+
config
|
1050
|
+
).props), {
|
1051
|
+
id
|
1052
|
+
});
|
946
1053
|
processRelatedZones(item, id, path);
|
947
1054
|
const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
|
948
1055
|
const thisZoneCompound = path[path.length - 1];
|
949
1056
|
const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
|
950
1057
|
newNodeIndex[id] = {
|
951
1058
|
data: newItem,
|
952
|
-
flatData:
|
1059
|
+
flatData: flattenNode(newItem, config),
|
953
1060
|
path,
|
954
1061
|
parentId,
|
955
1062
|
zone
|
@@ -1052,56 +1159,17 @@ init_react_import();
|
|
1052
1159
|
|
1053
1160
|
// lib/data/walk-tree.ts
|
1054
1161
|
init_react_import();
|
1055
|
-
|
1056
|
-
// lib/data/map-slots.ts
|
1057
|
-
init_react_import();
|
1058
|
-
function mapSlotsAsync(_0, _1) {
|
1059
|
-
return __async(this, arguments, function* (item, map, recursive = true, isSlot2 = isSlot) {
|
1060
|
-
const props = __spreadValues({}, item.props);
|
1061
|
-
const propKeys = Object.keys(props);
|
1062
|
-
for (let i = 0; i < propKeys.length; i++) {
|
1063
|
-
const propKey = propKeys[i];
|
1064
|
-
const itemType = "type" in item ? item.type : "root";
|
1065
|
-
if (isSlot2(itemType, propKey, props[propKey])) {
|
1066
|
-
const content = props[propKey];
|
1067
|
-
const mappedContent = recursive ? yield Promise.all(
|
1068
|
-
content.map((item2) => __async(this, null, function* () {
|
1069
|
-
return yield mapSlotsAsync(item2, map, recursive, isSlot2);
|
1070
|
-
}))
|
1071
|
-
) : content;
|
1072
|
-
props[propKey] = yield map(mappedContent, propKey);
|
1073
|
-
}
|
1074
|
-
}
|
1075
|
-
return __spreadProps(__spreadValues({}, item), { props });
|
1076
|
-
});
|
1077
|
-
}
|
1078
|
-
function mapSlotsSync(item, map, isSlot2 = isSlot) {
|
1079
|
-
var _a, _b;
|
1080
|
-
const props = __spreadValues({}, item.props);
|
1081
|
-
const propKeys = Object.keys(props);
|
1082
|
-
for (let i = 0; i < propKeys.length; i++) {
|
1083
|
-
const propKey = propKeys[i];
|
1084
|
-
const itemType = "type" in item ? item.type : "root";
|
1085
|
-
if (isSlot2(itemType, propKey, props[propKey])) {
|
1086
|
-
const content = props[propKey];
|
1087
|
-
const mappedContent = content.map((item2) => {
|
1088
|
-
return mapSlotsSync(item2, map, isSlot2);
|
1089
|
-
});
|
1090
|
-
props[propKey] = (_b = map(mappedContent, (_a = props.id) != null ? _a : "root", propKey)) != null ? _b : mappedContent;
|
1091
|
-
}
|
1092
|
-
}
|
1093
|
-
return __spreadProps(__spreadValues({}, item), { props });
|
1094
|
-
}
|
1095
|
-
|
1096
|
-
// lib/data/walk-tree.ts
|
1097
1162
|
function walkTree(data, config, callbackFn) {
|
1098
1163
|
var _a, _b;
|
1099
|
-
const isSlot2 = createIsSlotConfig(config);
|
1100
1164
|
const walkItem = (item) => {
|
1101
|
-
return
|
1165
|
+
return mapSlots(
|
1102
1166
|
item,
|
1103
|
-
(content, parentId, propName) =>
|
1104
|
-
|
1167
|
+
(content, parentId, propName) => {
|
1168
|
+
var _a2;
|
1169
|
+
return (_a2 = callbackFn(content, { parentId, propName })) != null ? _a2 : content;
|
1170
|
+
},
|
1171
|
+
config,
|
1172
|
+
true
|
1105
1173
|
);
|
1106
1174
|
};
|
1107
1175
|
if ("props" in data) {
|
@@ -1130,7 +1198,7 @@ var populateIds = (data, config, override = false) => {
|
|
1130
1198
|
const id = generateId(data.type);
|
1131
1199
|
return walkTree(
|
1132
1200
|
__spreadProps(__spreadValues({}, data), {
|
1133
|
-
props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({
|
1201
|
+
props: override ? __spreadProps(__spreadValues({}, data.props), { id }) : __spreadValues({}, data.props)
|
1134
1202
|
}),
|
1135
1203
|
config,
|
1136
1204
|
(contents) => contents.map((item) => {
|
@@ -1832,7 +1900,11 @@ var createNodesSlice = (set, get) => ({
|
|
1832
1900
|
const s = get().nodes;
|
1833
1901
|
const emptyNode = {
|
1834
1902
|
id,
|
1835
|
-
methods: {
|
1903
|
+
methods: {
|
1904
|
+
sync: () => null,
|
1905
|
+
hideOverlay: () => null,
|
1906
|
+
showOverlay: () => null
|
1907
|
+
},
|
1836
1908
|
element: null
|
1837
1909
|
};
|
1838
1910
|
const existingNode = s.nodes[id];
|
@@ -1883,12 +1955,13 @@ var flattenData = (state, config) => {
|
|
1883
1955
|
|
1884
1956
|
// lib/get-changed.ts
|
1885
1957
|
init_react_import();
|
1958
|
+
var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
|
1886
1959
|
var getChanged = (newItem, oldItem) => {
|
1887
1960
|
return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
|
1888
1961
|
const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
|
1889
1962
|
const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
|
1890
1963
|
return __spreadProps(__spreadValues({}, acc), {
|
1891
|
-
[item]: oldItemProps[item]
|
1964
|
+
[item]: !(0, import_fast_deep_equal.default)(oldItemProps[item], newItemProps[item])
|
1892
1965
|
});
|
1893
1966
|
}, {}) : {};
|
1894
1967
|
};
|
@@ -2034,7 +2107,8 @@ var createFieldsSlice = (_set, _get) => {
|
|
2034
2107
|
return {
|
2035
2108
|
fields: {},
|
2036
2109
|
loading: false,
|
2037
|
-
lastResolvedData: {}
|
2110
|
+
lastResolvedData: {},
|
2111
|
+
id: void 0
|
2038
2112
|
};
|
2039
2113
|
};
|
2040
2114
|
var useRegisterFieldsSlice = (appStore, id) => {
|
@@ -2055,7 +2129,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
|
|
2055
2129
|
let lastFields = fields;
|
2056
2130
|
if (reset) {
|
2057
2131
|
appStore.setState((s) => ({
|
2058
|
-
fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields })
|
2132
|
+
fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields, id })
|
2059
2133
|
}));
|
2060
2134
|
lastFields = defaultFields;
|
2061
2135
|
}
|
@@ -2083,12 +2157,13 @@ var useRegisterFieldsSlice = (appStore, id) => {
|
|
2083
2157
|
fields: {
|
2084
2158
|
fields: newFields,
|
2085
2159
|
loading: false,
|
2086
|
-
lastResolvedData: componentData
|
2160
|
+
lastResolvedData: componentData,
|
2161
|
+
id
|
2087
2162
|
}
|
2088
2163
|
});
|
2089
2164
|
} else {
|
2090
2165
|
appStore.setState((s) => ({
|
2091
|
-
fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields })
|
2166
|
+
fields: __spreadProps(__spreadValues({}, s.fields), { fields: defaultFields, id })
|
2092
2167
|
}));
|
2093
2168
|
}
|
2094
2169
|
}),
|
@@ -2105,14 +2180,16 @@ var useRegisterFieldsSlice = (appStore, id) => {
|
|
2105
2180
|
|
2106
2181
|
// lib/resolve-component-data.ts
|
2107
2182
|
init_react_import();
|
2108
|
-
var
|
2183
|
+
var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"));
|
2109
2184
|
var cache = { lastChange: {} };
|
2110
|
-
var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace"
|
2185
|
+
var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
|
2111
2186
|
const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
|
2112
|
-
|
2113
|
-
|
2187
|
+
const resolvedItem = __spreadValues({}, item);
|
2188
|
+
const shouldRunResolver = (configForItem == null ? void 0 : configForItem.resolveData) && item.props;
|
2189
|
+
const id = "id" in item.props ? item.props.id : "root";
|
2190
|
+
if (shouldRunResolver) {
|
2114
2191
|
const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
|
2115
|
-
if (item && (0,
|
2192
|
+
if (item && (0, import_fast_deep_equal2.default)(item, oldItem)) {
|
2116
2193
|
return { node: resolved, didChange: false };
|
2117
2194
|
}
|
2118
2195
|
const changed = getChanged(item, oldItem);
|
@@ -2125,46 +2202,42 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
|
|
2125
2202
|
metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
|
2126
2203
|
trigger
|
2127
2204
|
});
|
2128
|
-
|
2129
|
-
props: __spreadValues(__spreadValues({}, item.props), resolvedProps)
|
2130
|
-
});
|
2131
|
-
if (recursive) {
|
2132
|
-
resolvedItem = yield mapSlotsAsync(
|
2133
|
-
resolvedItem,
|
2134
|
-
(content) => __async(void 0, null, function* () {
|
2135
|
-
return Promise.all(
|
2136
|
-
content.map(
|
2137
|
-
(childItem) => __async(void 0, null, function* () {
|
2138
|
-
return (yield resolveComponentData(
|
2139
|
-
childItem,
|
2140
|
-
config,
|
2141
|
-
metadata,
|
2142
|
-
onResolveStart,
|
2143
|
-
onResolveEnd,
|
2144
|
-
trigger,
|
2145
|
-
false
|
2146
|
-
)).node;
|
2147
|
-
})
|
2148
|
-
)
|
2149
|
-
);
|
2150
|
-
}),
|
2151
|
-
false,
|
2152
|
-
createIsSlotConfig(config)
|
2153
|
-
);
|
2154
|
-
}
|
2205
|
+
resolvedItem.props = __spreadValues(__spreadValues({}, item.props), resolvedProps);
|
2155
2206
|
if (Object.keys(readOnly).length) {
|
2156
2207
|
resolvedItem.readOnly = readOnly;
|
2157
2208
|
}
|
2158
|
-
cache.lastChange[id] = {
|
2159
|
-
item,
|
2160
|
-
resolved: resolvedItem
|
2161
|
-
};
|
2162
|
-
if (onResolveEnd) {
|
2163
|
-
onResolveEnd(resolvedItem);
|
2164
|
-
}
|
2165
|
-
return { node: resolvedItem, didChange: !(0, import_fast_deep_equal.default)(item, resolvedItem) };
|
2166
2209
|
}
|
2167
|
-
|
2210
|
+
let itemWithResolvedChildren = yield mapSlots(
|
2211
|
+
resolvedItem,
|
2212
|
+
(content) => __async(void 0, null, function* () {
|
2213
|
+
return yield Promise.all(
|
2214
|
+
content.map(
|
2215
|
+
(childItem) => __async(void 0, null, function* () {
|
2216
|
+
return (yield resolveComponentData(
|
2217
|
+
childItem,
|
2218
|
+
config,
|
2219
|
+
metadata,
|
2220
|
+
onResolveStart,
|
2221
|
+
onResolveEnd,
|
2222
|
+
trigger
|
2223
|
+
)).node;
|
2224
|
+
})
|
2225
|
+
)
|
2226
|
+
);
|
2227
|
+
}),
|
2228
|
+
config
|
2229
|
+
);
|
2230
|
+
if (shouldRunResolver && onResolveEnd) {
|
2231
|
+
onResolveEnd(resolvedItem);
|
2232
|
+
}
|
2233
|
+
cache.lastChange[id] = {
|
2234
|
+
item,
|
2235
|
+
resolved: itemWithResolvedChildren
|
2236
|
+
};
|
2237
|
+
return {
|
2238
|
+
node: itemWithResolvedChildren,
|
2239
|
+
didChange: !(0, import_fast_deep_equal2.default)(item, itemWithResolvedChildren)
|
2240
|
+
};
|
2168
2241
|
});
|
2169
2242
|
|
2170
2243
|
// lib/data/to-root.ts
|
@@ -2184,7 +2257,8 @@ var toRoot = (item) => {
|
|
2184
2257
|
return { props: {}, readOnly };
|
2185
2258
|
};
|
2186
2259
|
|
2187
|
-
// store/
|
2260
|
+
// store/default-app-state.ts
|
2261
|
+
init_react_import();
|
2188
2262
|
var defaultAppState = {
|
2189
2263
|
data: { content: [], root: {}, zones: {} },
|
2190
2264
|
ui: {
|
@@ -2210,6 +2284,8 @@ var defaultAppState = {
|
|
2210
2284
|
zones: {}
|
2211
2285
|
}
|
2212
2286
|
};
|
2287
|
+
|
2288
|
+
// store/index.ts
|
2213
2289
|
var defaultPageFields = {
|
2214
2290
|
title: { type: "text" }
|
2215
2291
|
};
|
@@ -2398,328 +2474,30 @@ function useAppStoreApi() {
|
|
2398
2474
|
init_react_import();
|
2399
2475
|
var import_react12 = require("@dnd-kit/react");
|
2400
2476
|
|
2401
|
-
// lib/dnd/dnd-kit/safe.ts
|
2402
|
-
init_react_import();
|
2403
|
-
var import_react10 = require("@dnd-kit/react");
|
2404
|
-
var import_sortable = require("@dnd-kit/react/sortable");
|
2405
|
-
function useDroppableSafe(input) {
|
2406
|
-
if (typeof window === "undefined") {
|
2407
|
-
return { ref: () => {
|
2408
|
-
} };
|
2409
|
-
}
|
2410
|
-
return (0, import_react10.useDroppable)(input);
|
2411
|
-
}
|
2412
|
-
function useDraggableSafe(input) {
|
2413
|
-
if (typeof window === "undefined") {
|
2414
|
-
return { ref: () => {
|
2415
|
-
} };
|
2416
|
-
}
|
2417
|
-
return (0, import_react10.useDraggable)(input);
|
2418
|
-
}
|
2419
|
-
function useSortableSafe(input) {
|
2420
|
-
if (typeof window === "undefined") {
|
2421
|
-
return { ref: () => {
|
2422
|
-
}, status: "idle", handleRef: () => {
|
2423
|
-
} };
|
2424
|
-
}
|
2425
|
-
return (0, import_sortable.useSortable)(input);
|
2426
|
-
}
|
2427
|
-
|
2428
2477
|
// lib/dnd/use-sensors.ts
|
2429
2478
|
init_react_import();
|
2430
|
-
var
|
2431
|
-
|
2432
|
-
// lib/dnd/PointerSensor.ts
|
2433
|
-
init_react_import();
|
2434
|
-
var import_state = require("@dnd-kit/state");
|
2435
|
-
var import_abstract = require("@dnd-kit/abstract");
|
2436
|
-
var import_geometry = require("@dnd-kit/geometry");
|
2479
|
+
var import_react10 = require("react");
|
2480
|
+
var import_react11 = require("@dnd-kit/react");
|
2437
2481
|
var import_utilities = require("@dnd-kit/dom/utilities");
|
2438
|
-
var
|
2439
|
-
var
|
2440
|
-
|
2441
|
-
|
2442
|
-
this.manager = manager;
|
2443
|
-
this.options = options;
|
2444
|
-
this.listeners = new import_utilities.Listeners();
|
2445
|
-
this.cleanup = /* @__PURE__ */ new Set();
|
2446
|
-
this.source = void 0;
|
2447
|
-
this.started = false;
|
2448
|
-
__privateAdd(this, _clearTimeout);
|
2449
|
-
this.handleCancel = this.handleCancel.bind(this);
|
2450
|
-
this.handlePointerUp = this.handlePointerUp.bind(this);
|
2451
|
-
this.handleKeyDown = this.handleKeyDown.bind(this);
|
2452
|
-
(0, import_state.effect)(() => {
|
2453
|
-
const unbindGlobal = this.bindGlobal(options != null ? options : {});
|
2454
|
-
return () => {
|
2455
|
-
unbindGlobal();
|
2456
|
-
};
|
2457
|
-
});
|
2458
|
-
}
|
2459
|
-
bind(source, options = this.options) {
|
2460
|
-
const unbind = (0, import_state.effect)(() => {
|
2461
|
-
var _a;
|
2462
|
-
const target = (_a = source.handle) != null ? _a : source.element;
|
2463
|
-
const listener = (event) => {
|
2464
|
-
if ((0, import_utilities.isPointerEvent)(event)) {
|
2465
|
-
this.handlePointerDown(event, source, options);
|
2466
|
-
}
|
2467
|
-
};
|
2468
|
-
if (target) {
|
2469
|
-
patchWindow(target.ownerDocument.defaultView);
|
2470
|
-
target.addEventListener("pointerdown", listener);
|
2471
|
-
return () => {
|
2472
|
-
target.removeEventListener("pointerdown", listener);
|
2473
|
-
};
|
2474
|
-
}
|
2475
|
-
});
|
2476
|
-
return unbind;
|
2477
|
-
}
|
2478
|
-
bindGlobal(options) {
|
2479
|
-
const documents = /* @__PURE__ */ new Set();
|
2480
|
-
for (const draggable of this.manager.registry.draggables.value) {
|
2481
|
-
if (draggable.element) {
|
2482
|
-
documents.add((0, import_utilities.getDocument)(draggable.element));
|
2483
|
-
}
|
2484
|
-
}
|
2485
|
-
for (const droppable of this.manager.registry.droppables.value) {
|
2486
|
-
if (droppable.element) {
|
2487
|
-
documents.add((0, import_utilities.getDocument)(droppable.element));
|
2488
|
-
}
|
2489
|
-
}
|
2490
|
-
const unbindFns = Array.from(documents).map(
|
2491
|
-
(doc) => this.listeners.bind(doc, [
|
2492
|
-
{
|
2493
|
-
type: "pointermove",
|
2494
|
-
listener: (event) => this.handlePointerMove(event, doc, options)
|
2495
|
-
},
|
2496
|
-
{
|
2497
|
-
type: "pointerup",
|
2498
|
-
listener: this.handlePointerUp,
|
2499
|
-
options: {
|
2500
|
-
capture: true
|
2501
|
-
}
|
2502
|
-
},
|
2503
|
-
{
|
2504
|
-
// Cancel activation if there is a competing Drag and Drop interaction
|
2505
|
-
type: "dragstart",
|
2506
|
-
listener: this.handleDragStart
|
2507
|
-
}
|
2508
|
-
])
|
2509
|
-
);
|
2510
|
-
return () => {
|
2511
|
-
unbindFns.forEach((unbind) => unbind());
|
2512
|
-
};
|
2513
|
-
}
|
2514
|
-
handlePointerDown(event, source, options = {}) {
|
2515
|
-
if (this.disabled || !event.isPrimary || event.button !== 0 || !(0, import_utilities.isElement)(event.target) || source.disabled) {
|
2516
|
-
return;
|
2517
|
-
}
|
2518
|
-
const offset = (0, import_utilities.getFrameTransform)(source.element);
|
2519
|
-
this.initialCoordinates = {
|
2520
|
-
x: event.clientX * offset.scaleX + offset.x,
|
2521
|
-
y: event.clientY * offset.scaleY + offset.y
|
2522
|
-
};
|
2523
|
-
this.source = source;
|
2524
|
-
const { activationConstraints } = options;
|
2525
|
-
const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
|
2526
|
-
event.stopImmediatePropagation();
|
2527
|
-
if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
|
2528
|
-
this.handleStart(source, event);
|
2529
|
-
} else {
|
2530
|
-
const { delay } = constraints;
|
2531
|
-
if (delay) {
|
2532
|
-
const timeout3 = setTimeout(
|
2533
|
-
() => this.handleStart(source, event),
|
2534
|
-
delay.value
|
2535
|
-
);
|
2536
|
-
__privateSet(this, _clearTimeout, () => {
|
2537
|
-
clearTimeout(timeout3);
|
2538
|
-
__privateSet(this, _clearTimeout, void 0);
|
2539
|
-
});
|
2540
|
-
}
|
2541
|
-
}
|
2542
|
-
const cleanup = () => {
|
2543
|
-
var _a;
|
2544
|
-
(_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
|
2545
|
-
this.initialCoordinates = void 0;
|
2546
|
-
this.source = void 0;
|
2547
|
-
};
|
2548
|
-
this.cleanup.add(cleanup);
|
2549
|
-
}
|
2550
|
-
handlePointerMove(event, doc, options) {
|
2551
|
-
if (!this.source) {
|
2552
|
-
return;
|
2553
|
-
}
|
2554
|
-
const ownerDocument = this.source.element && (0, import_utilities.getDocument)(this.source.element);
|
2555
|
-
if (doc !== ownerDocument) {
|
2556
|
-
return;
|
2557
|
-
}
|
2558
|
-
const coordinates = {
|
2559
|
-
x: event.clientX,
|
2560
|
-
y: event.clientY
|
2561
|
-
};
|
2562
|
-
const offset = (0, import_utilities.getFrameTransform)(this.source.element);
|
2563
|
-
coordinates.x = coordinates.x * offset.scaleX + offset.x;
|
2564
|
-
coordinates.y = coordinates.y * offset.scaleY + offset.y;
|
2565
|
-
if (this.manager.dragOperation.status.dragging) {
|
2566
|
-
event.preventDefault();
|
2567
|
-
event.stopPropagation();
|
2568
|
-
this.manager.actions.move({ to: coordinates });
|
2569
|
-
return;
|
2570
|
-
}
|
2571
|
-
if (!this.initialCoordinates) {
|
2572
|
-
return;
|
2573
|
-
}
|
2574
|
-
const delta = {
|
2575
|
-
x: coordinates.x - this.initialCoordinates.x,
|
2576
|
-
y: coordinates.y - this.initialCoordinates.y
|
2577
|
-
};
|
2578
|
-
const { activationConstraints } = options;
|
2579
|
-
const constraints = typeof activationConstraints === "function" ? activationConstraints(event, this.source) : activationConstraints;
|
2580
|
-
const { distance, delay } = constraints != null ? constraints : {};
|
2581
|
-
if (distance) {
|
2582
|
-
if (distance.tolerance != null && (0, import_geometry.exceedsDistance)(delta, distance.tolerance)) {
|
2583
|
-
return this.handleCancel();
|
2584
|
-
}
|
2585
|
-
if ((0, import_geometry.exceedsDistance)(delta, distance.value)) {
|
2586
|
-
return this.handleStart(this.source, event);
|
2587
|
-
}
|
2588
|
-
}
|
2589
|
-
if (delay) {
|
2590
|
-
if ((0, import_geometry.exceedsDistance)(delta, delay.tolerance)) {
|
2591
|
-
return this.handleCancel();
|
2592
|
-
}
|
2593
|
-
}
|
2594
|
-
}
|
2595
|
-
handlePointerUp(event) {
|
2596
|
-
if (!this.source) {
|
2597
|
-
return;
|
2598
|
-
}
|
2599
|
-
event.preventDefault();
|
2600
|
-
event.stopPropagation();
|
2601
|
-
const { status } = this.manager.dragOperation;
|
2602
|
-
if (!status.idle) {
|
2603
|
-
const canceled = !status.initialized;
|
2604
|
-
this.manager.actions.stop({ canceled });
|
2605
|
-
} else if (this.started) {
|
2606
|
-
setTimeout(() => {
|
2607
|
-
if (!this.manager.dragOperation.status.idle) {
|
2608
|
-
this.manager.actions.stop({ canceled: false });
|
2609
|
-
}
|
2610
|
-
}, 10);
|
2611
|
-
}
|
2612
|
-
this.cleanup.forEach((cleanup) => cleanup());
|
2613
|
-
this.cleanup.clear();
|
2614
|
-
}
|
2615
|
-
handleKeyDown(event) {
|
2616
|
-
if (event.key === "Escape") {
|
2617
|
-
event.preventDefault();
|
2618
|
-
this.handleCancel();
|
2619
|
-
}
|
2620
|
-
}
|
2621
|
-
handleStart(source, event) {
|
2622
|
-
var _a;
|
2623
|
-
const { manager, initialCoordinates } = this;
|
2624
|
-
(_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
|
2625
|
-
if (!initialCoordinates || manager.dragOperation.status.initialized || this.started) {
|
2626
|
-
return;
|
2627
|
-
}
|
2628
|
-
if (event.defaultPrevented) {
|
2629
|
-
return;
|
2630
|
-
}
|
2631
|
-
this.started = true;
|
2632
|
-
event.preventDefault();
|
2633
|
-
(0, import_state.batch)(() => {
|
2634
|
-
manager.actions.setDragSource(source.id);
|
2635
|
-
manager.actions.start({ coordinates: initialCoordinates, event });
|
2636
|
-
});
|
2637
|
-
const ownerDocument = (0, import_utilities.getDocument)(event.target);
|
2638
|
-
const unbind = this.listeners.bind(ownerDocument, [
|
2639
|
-
{
|
2640
|
-
// Prevent scrolling on touch devices
|
2641
|
-
type: "touchmove",
|
2642
|
-
listener: preventDefault,
|
2643
|
-
options: {
|
2644
|
-
passive: false
|
2645
|
-
}
|
2646
|
-
},
|
2647
|
-
{
|
2648
|
-
// Prevent click events
|
2649
|
-
type: "click",
|
2650
|
-
listener: preventDefault
|
2651
|
-
},
|
2652
|
-
{
|
2653
|
-
type: "keydown",
|
2654
|
-
listener: this.handleKeyDown
|
2655
|
-
}
|
2656
|
-
]);
|
2657
|
-
ownerDocument.body.setPointerCapture(event.pointerId);
|
2658
|
-
this.cleanup.add(unbind);
|
2659
|
-
this.cleanup.add(() => {
|
2660
|
-
this.started = false;
|
2661
|
-
});
|
2662
|
-
}
|
2663
|
-
handleDragStart(event) {
|
2664
|
-
const { target } = event;
|
2665
|
-
if (!(0, import_utilities.isElement)(target)) {
|
2666
|
-
return;
|
2667
|
-
}
|
2668
|
-
const isNativeDraggable = (0, import_utilities.isHTMLElement)(target) && target.draggable && target.getAttribute("draggable") === "true";
|
2669
|
-
if (isNativeDraggable) {
|
2670
|
-
this.handleCancel();
|
2671
|
-
} else {
|
2672
|
-
preventDefault(event);
|
2673
|
-
}
|
2674
|
-
}
|
2675
|
-
handleCancel() {
|
2676
|
-
const { dragOperation } = this.manager;
|
2677
|
-
if (dragOperation.status.initialized) {
|
2678
|
-
this.manager.actions.stop({ canceled: true });
|
2679
|
-
}
|
2680
|
-
this.cleanup.forEach((cleanup) => cleanup());
|
2681
|
-
this.cleanup.clear();
|
2682
|
-
}
|
2683
|
-
destroy() {
|
2684
|
-
this.listeners.clear();
|
2685
|
-
}
|
2482
|
+
var touchDefault = { delay: { value: 200, tolerance: 10 } };
|
2483
|
+
var otherDefault = {
|
2484
|
+
delay: { value: 200, tolerance: 10 },
|
2485
|
+
distance: { value: 5 }
|
2686
2486
|
};
|
2687
|
-
_clearTimeout = new WeakMap();
|
2688
|
-
_PointerSensor.configure = (0, import_abstract.configurator)(_PointerSensor);
|
2689
|
-
var PointerSensor = _PointerSensor;
|
2690
|
-
function preventDefault(event) {
|
2691
|
-
event.preventDefault();
|
2692
|
-
}
|
2693
|
-
function noop() {
|
2694
|
-
}
|
2695
|
-
var windows = /* @__PURE__ */ new WeakSet();
|
2696
|
-
function patchWindow(window2) {
|
2697
|
-
if (!window2 || windows.has(window2)) {
|
2698
|
-
return;
|
2699
|
-
}
|
2700
|
-
window2.addEventListener("touchmove", noop, {
|
2701
|
-
capture: false,
|
2702
|
-
passive: false
|
2703
|
-
});
|
2704
|
-
windows.add(window2);
|
2705
|
-
}
|
2706
|
-
|
2707
|
-
// lib/dnd/use-sensors.ts
|
2708
|
-
var import_utilities2 = require("@dnd-kit/dom/utilities");
|
2709
2487
|
var useSensors = ({
|
2710
|
-
other,
|
2488
|
+
other = otherDefault,
|
2711
2489
|
mouse,
|
2712
|
-
touch
|
2490
|
+
touch = touchDefault
|
2713
2491
|
} = {
|
2714
|
-
touch:
|
2715
|
-
other:
|
2492
|
+
touch: touchDefault,
|
2493
|
+
other: otherDefault
|
2716
2494
|
}) => {
|
2717
|
-
const [sensors] = (0,
|
2718
|
-
PointerSensor.configure({
|
2495
|
+
const [sensors] = (0, import_react10.useState)(() => [
|
2496
|
+
import_react11.PointerSensor.configure({
|
2719
2497
|
activationConstraints(event, source) {
|
2720
2498
|
var _a;
|
2721
2499
|
const { pointerType, target } = event;
|
2722
|
-
if (pointerType === "mouse" && (0,
|
2500
|
+
if (pointerType === "mouse" && (0, import_utilities.isElement)(target) && (source.handle === target || ((_a = source.handle) == null ? void 0 : _a.contains(target)))) {
|
2723
2501
|
return mouse;
|
2724
2502
|
}
|
2725
2503
|
if (pointerType === "touch") {
|
@@ -2734,11 +2512,11 @@ var useSensors = ({
|
|
2734
2512
|
|
2735
2513
|
// lib/dnd/collision/dynamic/index.ts
|
2736
2514
|
init_react_import();
|
2737
|
-
var
|
2515
|
+
var import_abstract8 = require("@dnd-kit/abstract");
|
2738
2516
|
|
2739
2517
|
// lib/dnd/collision/directional/index.ts
|
2740
2518
|
init_react_import();
|
2741
|
-
var
|
2519
|
+
var import_abstract = require("@dnd-kit/abstract");
|
2742
2520
|
|
2743
2521
|
// lib/dnd/collision/collision-debug.ts
|
2744
2522
|
init_react_import();
|
@@ -2816,7 +2594,7 @@ var directionalCollision = (input, previous) => {
|
|
2816
2594
|
return {
|
2817
2595
|
id: droppable.id,
|
2818
2596
|
value: 1,
|
2819
|
-
type:
|
2597
|
+
type: import_abstract.CollisionType.Collision
|
2820
2598
|
};
|
2821
2599
|
}
|
2822
2600
|
return null;
|
@@ -2858,7 +2636,7 @@ var getMidpointImpact = (dragShape, dropShape, direction, offsetMultiplier = 0)
|
|
2858
2636
|
|
2859
2637
|
// lib/dnd/collision/dynamic/track-movement-interval.ts
|
2860
2638
|
init_react_import();
|
2861
|
-
var
|
2639
|
+
var import_geometry = require("@dnd-kit/geometry");
|
2862
2640
|
var INTERVAL_SENSITIVITY = 10;
|
2863
2641
|
var intervalCache = {
|
2864
2642
|
current: { x: 0, y: 0 },
|
@@ -2874,13 +2652,15 @@ var trackMovementInterval = (point, dragAxis = "dynamic") => {
|
|
2874
2652
|
};
|
2875
2653
|
intervalCache.direction = getDirection(dragAxis, intervalCache.delta) || intervalCache.direction;
|
2876
2654
|
if (Math.abs(intervalCache.delta.x) > INTERVAL_SENSITIVITY || Math.abs(intervalCache.delta.y) > INTERVAL_SENSITIVITY) {
|
2877
|
-
intervalCache.previous =
|
2655
|
+
intervalCache.previous = import_geometry.Point.from(point);
|
2878
2656
|
}
|
2879
2657
|
return intervalCache;
|
2880
2658
|
};
|
2881
2659
|
|
2882
2660
|
// ../../node_modules/@dnd-kit/collision/dist/index.js
|
2883
2661
|
init_react_import();
|
2662
|
+
var import_abstract2 = require("@dnd-kit/abstract");
|
2663
|
+
var import_geometry2 = require("@dnd-kit/geometry");
|
2884
2664
|
var import_abstract3 = require("@dnd-kit/abstract");
|
2885
2665
|
var import_geometry3 = require("@dnd-kit/geometry");
|
2886
2666
|
var import_abstract4 = require("@dnd-kit/abstract");
|
@@ -2891,8 +2671,6 @@ var import_abstract6 = require("@dnd-kit/abstract");
|
|
2891
2671
|
var import_geometry6 = require("@dnd-kit/geometry");
|
2892
2672
|
var import_abstract7 = require("@dnd-kit/abstract");
|
2893
2673
|
var import_geometry7 = require("@dnd-kit/geometry");
|
2894
|
-
var import_abstract8 = require("@dnd-kit/abstract");
|
2895
|
-
var import_geometry8 = require("@dnd-kit/geometry");
|
2896
2674
|
var pointerIntersection = ({
|
2897
2675
|
dragOperation,
|
2898
2676
|
droppable
|
@@ -2906,12 +2684,12 @@ var pointerIntersection = ({
|
|
2906
2684
|
return null;
|
2907
2685
|
}
|
2908
2686
|
if (droppable.shape.containsPoint(pointerCoordinates)) {
|
2909
|
-
const distance =
|
2687
|
+
const distance = import_geometry2.Point.distance(droppable.shape.center, pointerCoordinates);
|
2910
2688
|
return {
|
2911
2689
|
id,
|
2912
2690
|
value: 1 / distance,
|
2913
|
-
type:
|
2914
|
-
priority:
|
2691
|
+
type: import_abstract2.CollisionType.PointerIntersection,
|
2692
|
+
priority: import_abstract2.CollisionPriority.High
|
2915
2693
|
};
|
2916
2694
|
}
|
2917
2695
|
return null;
|
@@ -2922,31 +2700,15 @@ var closestCorners = (input) => {
|
|
2922
2700
|
if (!droppable.shape) {
|
2923
2701
|
return null;
|
2924
2702
|
}
|
2925
|
-
const
|
2926
|
-
const
|
2927
|
-
|
2928
|
-
|
2929
|
-
|
2930
|
-
},
|
2931
|
-
{
|
2932
|
-
x: right,
|
2933
|
-
y: top
|
2934
|
-
},
|
2935
|
-
{
|
2936
|
-
x: left,
|
2937
|
-
y: bottom
|
2938
|
-
},
|
2939
|
-
{
|
2940
|
-
x: right,
|
2941
|
-
y: bottom
|
2942
|
-
}
|
2943
|
-
];
|
2944
|
-
const distance = corners.reduce(
|
2945
|
-
(acc, corner) => {
|
2703
|
+
const shapeCorners = shape ? import_geometry4.Rectangle.from(shape.current.boundingRectangle).corners : void 0;
|
2704
|
+
const distance = import_geometry4.Rectangle.from(
|
2705
|
+
droppable.shape.boundingRectangle
|
2706
|
+
).corners.reduce(
|
2707
|
+
(acc, corner, index) => {
|
2946
2708
|
var _a;
|
2947
|
-
return acc +
|
2948
|
-
|
2949
|
-
(_a =
|
2709
|
+
return acc + import_geometry4.Point.distance(
|
2710
|
+
import_geometry4.Point.from(corner),
|
2711
|
+
(_a = shapeCorners == null ? void 0 : shapeCorners[index]) != null ? _a : position.current
|
2950
2712
|
);
|
2951
2713
|
},
|
2952
2714
|
0
|
@@ -2955,8 +2717,8 @@ var closestCorners = (input) => {
|
|
2955
2717
|
return {
|
2956
2718
|
id: droppable.id,
|
2957
2719
|
value: 1 / value,
|
2958
|
-
type:
|
2959
|
-
priority:
|
2720
|
+
type: import_abstract4.CollisionType.Collision,
|
2721
|
+
priority: import_abstract4.CollisionPriority.Normal
|
2960
2722
|
};
|
2961
2723
|
};
|
2962
2724
|
|
@@ -2981,12 +2743,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
2981
2743
|
const { center: dragCenter } = dragShape;
|
2982
2744
|
const { fallbackEnabled } = collisionStore.getState();
|
2983
2745
|
const interval = trackMovementInterval(position.current, dragAxis);
|
2984
|
-
|
2985
|
-
direction: interval.direction
|
2986
|
-
});
|
2987
|
-
const collisionMap = dragOperation.data.collisionMap || {};
|
2988
|
-
dragOperation.data.collisionMap = collisionMap;
|
2989
|
-
collisionMap[droppable.id] = {
|
2746
|
+
const data = {
|
2990
2747
|
direction: interval.direction
|
2991
2748
|
};
|
2992
2749
|
const { center: dropCenter } = dropShape;
|
@@ -3001,7 +2758,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
3001
2758
|
collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
|
3002
2759
|
if (collision) {
|
3003
2760
|
return __spreadProps(__spreadValues({}, collision), {
|
3004
|
-
priority:
|
2761
|
+
priority: import_abstract8.CollisionPriority.Highest,
|
2762
|
+
data
|
3005
2763
|
});
|
3006
2764
|
}
|
3007
2765
|
}
|
@@ -3018,12 +2776,12 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
3018
2776
|
const collision = {
|
3019
2777
|
id: droppable.id,
|
3020
2778
|
value: intersectionRatio,
|
3021
|
-
priority:
|
3022
|
-
type:
|
2779
|
+
priority: import_abstract8.CollisionPriority.High,
|
2780
|
+
type: import_abstract8.CollisionType.Collision
|
3023
2781
|
};
|
3024
2782
|
const shouldFlushId = flushNext === droppable.id;
|
3025
2783
|
flushNext = "";
|
3026
|
-
return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id });
|
2784
|
+
return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id, data });
|
3027
2785
|
}
|
3028
2786
|
if (fallbackEnabled && ((_c = dragOperation.source) == null ? void 0 : _c.id) !== droppable.id) {
|
3029
2787
|
const xAxisIntersection = dropShape.boundingRectangle.right > dragShape.boundingRectangle.left && dropShape.boundingRectangle.left < dragShape.boundingRectangle.right;
|
@@ -3035,9 +2793,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
3035
2793
|
x: dragShape.center.x - (((_d = droppable.shape) == null ? void 0 : _d.center.x) || 0),
|
3036
2794
|
y: dragShape.center.y - (((_e = droppable.shape) == null ? void 0 : _e.center.y) || 0)
|
3037
2795
|
});
|
3038
|
-
|
3039
|
-
direction
|
3040
|
-
};
|
2796
|
+
data.direction = direction;
|
3041
2797
|
if (intersectionArea) {
|
3042
2798
|
collisionDebug(
|
3043
2799
|
dragCenter,
|
@@ -3048,7 +2804,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
3048
2804
|
);
|
3049
2805
|
flushNext = droppable.id;
|
3050
2806
|
return __spreadProps(__spreadValues({}, fallbackCollision), {
|
3051
|
-
priority:
|
2807
|
+
priority: import_abstract8.CollisionPriority.Low,
|
2808
|
+
data
|
3052
2809
|
});
|
3053
2810
|
}
|
3054
2811
|
collisionDebug(
|
@@ -3058,16 +2815,19 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
|
|
3058
2815
|
"orange",
|
3059
2816
|
direction || ""
|
3060
2817
|
);
|
3061
|
-
return __spreadProps(__spreadValues({}, fallbackCollision), {
|
2818
|
+
return __spreadProps(__spreadValues({}, fallbackCollision), {
|
2819
|
+
priority: import_abstract8.CollisionPriority.Lowest,
|
2820
|
+
data
|
2821
|
+
});
|
3062
2822
|
}
|
3063
2823
|
}
|
3064
2824
|
}
|
3065
2825
|
collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
|
3066
|
-
delete collisionMap[droppable.id];
|
3067
2826
|
return null;
|
3068
2827
|
};
|
3069
2828
|
|
3070
2829
|
// components/Sortable/index.tsx
|
2830
|
+
var import_sortable = require("@dnd-kit/react/sortable");
|
3071
2831
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
3072
2832
|
var SortableProvider = ({
|
3073
2833
|
children,
|
@@ -3087,16 +2847,16 @@ var SortableProvider = ({
|
|
3087
2847
|
return onDragStart((_b = (_a = event.operation.source) == null ? void 0 : _a.id.toString()) != null ? _b : "");
|
3088
2848
|
},
|
3089
2849
|
onDragOver: (event, manager) => {
|
3090
|
-
var _a
|
2850
|
+
var _a;
|
3091
2851
|
event.preventDefault();
|
3092
2852
|
const { operation } = event;
|
3093
2853
|
const { source, target } = operation;
|
3094
2854
|
if (!source || !target) return;
|
3095
2855
|
let sourceIndex = source.data.index;
|
3096
2856
|
let targetIndex = target.data.index;
|
3097
|
-
const collisionData = (
|
2857
|
+
const collisionData = (_a = manager.collisionObserver.collisions[0]) == null ? void 0 : _a.data;
|
3098
2858
|
if (sourceIndex !== targetIndex && source.id !== target.id) {
|
3099
|
-
const collisionPosition = collisionData.direction === "up" ? "before" : "after";
|
2859
|
+
const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" ? "before" : "after";
|
3100
2860
|
if (targetIndex >= sourceIndex) {
|
3101
2861
|
targetIndex = targetIndex - 1;
|
3102
2862
|
}
|
@@ -3127,9 +2887,10 @@ var Sortable = ({
|
|
3127
2887
|
}) => {
|
3128
2888
|
const {
|
3129
2889
|
ref: sortableRef,
|
3130
|
-
|
2890
|
+
isDragging,
|
2891
|
+
isDropping,
|
3131
2892
|
handleRef
|
3132
|
-
} =
|
2893
|
+
} = (0, import_sortable.useSortable)({
|
3133
2894
|
id,
|
3134
2895
|
type,
|
3135
2896
|
index,
|
@@ -3137,7 +2898,7 @@ var Sortable = ({
|
|
3137
2898
|
data: { index },
|
3138
2899
|
collisionDetector: createDynamicCollisionDetector("y")
|
3139
2900
|
});
|
3140
|
-
return children({
|
2901
|
+
return children({ isDragging, isDropping, ref: sortableRef, handleRef });
|
3141
2902
|
};
|
3142
2903
|
|
3143
2904
|
// components/AutoField/context.tsx
|
@@ -3262,12 +3023,25 @@ var ArrayField = ({
|
|
3262
3023
|
}
|
3263
3024
|
}, []);
|
3264
3025
|
const [draggedItem, setDraggedItem] = (0, import_react14.useState)("");
|
3265
|
-
const
|
3026
|
+
const isDraggingAny = !!draggedItem;
|
3266
3027
|
const canEdit = useAppStore(
|
3267
3028
|
(s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
|
3268
3029
|
);
|
3269
3030
|
const forceReadOnly = !canEdit;
|
3270
3031
|
const valueRef = (0, import_react14.useRef)(value);
|
3032
|
+
const uniqifyItem = (0, import_react14.useCallback)(
|
3033
|
+
(val) => {
|
3034
|
+
if (field.type !== "array" || !field.arrayFields) return;
|
3035
|
+
const config = appStore.getState().config;
|
3036
|
+
return walkField({
|
3037
|
+
value: val,
|
3038
|
+
fields: field.arrayFields,
|
3039
|
+
map: (content) => content.map((item) => populateIds(item, config, true)),
|
3040
|
+
config
|
3041
|
+
});
|
3042
|
+
},
|
3043
|
+
[appStore, field]
|
3044
|
+
);
|
3271
3045
|
if (field.type !== "array" || !field.arrayFields) {
|
3272
3046
|
return null;
|
3273
3047
|
}
|
@@ -3327,13 +3101,13 @@ var ArrayField = ({
|
|
3327
3101
|
id: _arrayId,
|
3328
3102
|
index: i,
|
3329
3103
|
disabled: readOnly,
|
3330
|
-
children: ({
|
3104
|
+
children: ({ isDragging, ref, handleRef }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
3331
3105
|
"div",
|
3332
3106
|
{
|
3333
3107
|
ref,
|
3334
3108
|
className: getClassNameItem({
|
3335
3109
|
isExpanded: arrayState.openId === _arrayId,
|
3336
|
-
isDragging
|
3110
|
+
isDragging,
|
3337
3111
|
readOnly
|
3338
3112
|
}),
|
3339
3113
|
children: [
|
@@ -3372,11 +3146,10 @@ var ArrayField = ({
|
|
3372
3146
|
onClick: (e) => {
|
3373
3147
|
e.stopPropagation();
|
3374
3148
|
const existingValue = [...value || []];
|
3375
|
-
|
3376
|
-
i,
|
3377
|
-
0,
|
3149
|
+
const newItem = uniqifyItem(
|
3378
3150
|
existingValue[i]
|
3379
3151
|
);
|
3152
|
+
existingValue.splice(i, 0, newItem);
|
3380
3153
|
const newUi = mapArrayStateToUi(
|
3381
3154
|
regenerateArrayState(existingValue)
|
3382
3155
|
);
|
@@ -3474,12 +3247,14 @@ var ArrayField = ({
|
|
3474
3247
|
type: "button",
|
3475
3248
|
className: getClassName5("addButton"),
|
3476
3249
|
onClick: () => {
|
3477
|
-
|
3250
|
+
var _a;
|
3251
|
+
if (isDraggingAny) return;
|
3478
3252
|
const existingValue = value || [];
|
3479
|
-
const
|
3480
|
-
|
3481
|
-
field.
|
3482
|
-
|
3253
|
+
const newItem = defaultSlots(
|
3254
|
+
uniqifyItem((_a = field.defaultItemProps) != null ? _a : {}),
|
3255
|
+
field.arrayFields
|
3256
|
+
);
|
3257
|
+
const newValue = [...existingValue, newItem];
|
3483
3258
|
const newArrayState = regenerateArrayState(newValue);
|
3484
3259
|
setUi(mapArrayStateToUi(newArrayState), false);
|
3485
3260
|
onChange(newValue);
|
@@ -4373,6 +4148,10 @@ function AutoFieldInternal(props) {
|
|
4373
4148
|
});
|
4374
4149
|
}
|
4375
4150
|
}, []);
|
4151
|
+
const { visible = true } = props.field;
|
4152
|
+
if (!visible) {
|
4153
|
+
return null;
|
4154
|
+
}
|
4376
4155
|
if (field.type === "slot") {
|
4377
4156
|
return null;
|
4378
4157
|
}
|
@@ -4457,24 +4236,24 @@ init_react_import();
|
|
4457
4236
|
|
4458
4237
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css#css-module
|
4459
4238
|
init_react_import();
|
4460
|
-
var styles_module_default10 = { "Drawer": "
|
4239
|
+
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" };
|
4461
4240
|
|
4462
4241
|
// components/Drawer/index.tsx
|
4463
|
-
var
|
4242
|
+
var import_react39 = require("react");
|
4464
4243
|
|
4465
4244
|
// components/DragDropContext/index.tsx
|
4466
4245
|
init_react_import();
|
4467
|
-
var
|
4468
|
-
var
|
4246
|
+
var import_react37 = require("@dnd-kit/react");
|
4247
|
+
var import_react38 = require("react");
|
4469
4248
|
var import_dom = require("@dnd-kit/dom");
|
4470
4249
|
|
4471
4250
|
// components/DropZone/index.tsx
|
4472
4251
|
init_react_import();
|
4473
|
-
var
|
4252
|
+
var import_react35 = require("react");
|
4474
4253
|
|
4475
4254
|
// components/DraggableComponent/index.tsx
|
4476
4255
|
init_react_import();
|
4477
|
-
var
|
4256
|
+
var import_react26 = require("react");
|
4478
4257
|
|
4479
4258
|
// css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
|
4480
4259
|
init_react_import();
|
@@ -4515,7 +4294,9 @@ var ZoneStoreContext = (0, import_react23.createContext)(
|
|
4515
4294
|
areaDepthIndex: {},
|
4516
4295
|
nextAreaDepthIndex: {},
|
4517
4296
|
draggedItem: null,
|
4518
|
-
previewIndex: {}
|
4297
|
+
previewIndex: {},
|
4298
|
+
enabledIndex: {},
|
4299
|
+
hoveringComponent: null
|
4519
4300
|
}))
|
4520
4301
|
);
|
4521
4302
|
var ZoneStoreProvider = ({
|
@@ -4528,7 +4309,6 @@ var DropZoneProvider = ({
|
|
4528
4309
|
children,
|
4529
4310
|
value
|
4530
4311
|
}) => {
|
4531
|
-
const [hoveringComponent, setHoveringComponent] = (0, import_react23.useState)();
|
4532
4312
|
const dispatch = useAppStore((s) => s.dispatch);
|
4533
4313
|
const registerZone = (0, import_react23.useCallback)(
|
4534
4314
|
(zoneCompound) => {
|
@@ -4550,16 +4330,33 @@ var DropZoneProvider = ({
|
|
4550
4330
|
);
|
4551
4331
|
const memoValue = (0, import_react23.useMemo)(
|
4552
4332
|
() => __spreadValues({
|
4553
|
-
hoveringComponent,
|
4554
|
-
setHoveringComponent,
|
4555
4333
|
registerZone,
|
4556
4334
|
unregisterZone
|
4557
4335
|
}, value),
|
4558
|
-
[value
|
4336
|
+
[value]
|
4559
4337
|
);
|
4560
4338
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: memoValue && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(dropZoneContext.Provider, { value: memoValue, children }) });
|
4561
4339
|
};
|
4562
4340
|
|
4341
|
+
// components/DraggableComponent/index.tsx
|
4342
|
+
var import_shallow2 = require("zustand/react/shallow");
|
4343
|
+
var import_sortable2 = require("@dnd-kit/react/sortable");
|
4344
|
+
|
4345
|
+
// lib/accumulate-transform.ts
|
4346
|
+
init_react_import();
|
4347
|
+
function accumulateTransform(el) {
|
4348
|
+
let matrix = new DOMMatrixReadOnly();
|
4349
|
+
let n = el.parentElement;
|
4350
|
+
while (n && n !== document.documentElement) {
|
4351
|
+
const t = getComputedStyle(n).transform;
|
4352
|
+
if (t && t !== "none") {
|
4353
|
+
matrix = new DOMMatrixReadOnly(t).multiply(matrix);
|
4354
|
+
}
|
4355
|
+
n = n.parentElement;
|
4356
|
+
}
|
4357
|
+
return { scaleX: matrix.a, scaleY: matrix.d };
|
4358
|
+
}
|
4359
|
+
|
4563
4360
|
// lib/use-context-store.ts
|
4564
4361
|
init_react_import();
|
4565
4362
|
var import_react24 = require("react");
|
@@ -4573,8 +4370,39 @@ function useContextStore(context, selector) {
|
|
4573
4370
|
return (0, import_zustand4.useStore)(store, (0, import_shallow.useShallow)(selector));
|
4574
4371
|
}
|
4575
4372
|
|
4373
|
+
// lib/dnd/use-on-drag-finished.ts
|
4374
|
+
init_react_import();
|
4375
|
+
var import_react25 = require("react");
|
4376
|
+
var useOnDragFinished = (cb, deps = []) => {
|
4377
|
+
const appStore = useAppStoreApi();
|
4378
|
+
return (0, import_react25.useCallback)(() => {
|
4379
|
+
let dispose = () => {
|
4380
|
+
};
|
4381
|
+
const processDragging = (isDragging2) => {
|
4382
|
+
if (isDragging2) {
|
4383
|
+
cb(false);
|
4384
|
+
} else {
|
4385
|
+
setTimeout(() => {
|
4386
|
+
cb(true);
|
4387
|
+
}, 0);
|
4388
|
+
if (dispose) dispose();
|
4389
|
+
}
|
4390
|
+
};
|
4391
|
+
const isDragging = appStore.getState().state.ui.isDragging;
|
4392
|
+
processDragging(isDragging);
|
4393
|
+
if (isDragging) {
|
4394
|
+
dispose = appStore.subscribe(
|
4395
|
+
(s) => s.state.ui.isDragging,
|
4396
|
+
(isDragging2) => {
|
4397
|
+
processDragging(isDragging2);
|
4398
|
+
}
|
4399
|
+
);
|
4400
|
+
}
|
4401
|
+
return dispose;
|
4402
|
+
}, [appStore, ...deps]);
|
4403
|
+
};
|
4404
|
+
|
4576
4405
|
// components/DraggableComponent/index.tsx
|
4577
|
-
var import_shallow2 = require("zustand/react/shallow");
|
4578
4406
|
var import_jsx_runtime20 = require("react/jsx-runtime");
|
4579
4407
|
var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
|
4580
4408
|
var DEBUG2 = false;
|
@@ -4604,7 +4432,6 @@ var DraggableComponent = ({
|
|
4604
4432
|
isSelected = false,
|
4605
4433
|
debug,
|
4606
4434
|
label,
|
4607
|
-
isEnabled,
|
4608
4435
|
autoDragAxis,
|
4609
4436
|
userDragAxis,
|
4610
4437
|
inDroppableZone = true
|
@@ -4618,9 +4445,9 @@ var DraggableComponent = ({
|
|
4618
4445
|
const overrides = useAppStore((s) => s.overrides);
|
4619
4446
|
const dispatch = useAppStore((s) => s.dispatch);
|
4620
4447
|
const iframe = useAppStore((s) => s.iframe);
|
4621
|
-
const ctx = (0,
|
4622
|
-
const [localZones, setLocalZones] = (0,
|
4623
|
-
const registerLocalZone = (0,
|
4448
|
+
const ctx = (0, import_react26.useContext)(dropZoneContext);
|
4449
|
+
const [localZones, setLocalZones] = (0, import_react26.useState)({});
|
4450
|
+
const registerLocalZone = (0, import_react26.useCallback)(
|
4624
4451
|
(zoneCompound2, active) => {
|
4625
4452
|
var _a;
|
4626
4453
|
(_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
|
@@ -4630,7 +4457,7 @@ var DraggableComponent = ({
|
|
4630
4457
|
},
|
4631
4458
|
[setLocalZones]
|
4632
4459
|
);
|
4633
|
-
const unregisterLocalZone = (0,
|
4460
|
+
const unregisterLocalZone = (0, import_react26.useCallback)(
|
4634
4461
|
(zoneCompound2) => {
|
4635
4462
|
var _a;
|
4636
4463
|
(_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
|
@@ -4653,14 +4480,17 @@ var DraggableComponent = ({
|
|
4653
4480
|
return s.permissions.getPermissions({ item });
|
4654
4481
|
})
|
4655
4482
|
);
|
4656
|
-
const
|
4657
|
-
|
4658
|
-
|
4483
|
+
const zoneStore = (0, import_react26.useContext)(ZoneStoreContext);
|
4484
|
+
const [dragAxis, setDragAxis] = (0, import_react26.useState)(userDragAxis || autoDragAxis);
|
4485
|
+
const dynamicCollisionDetector = (0, import_react26.useMemo)(
|
4486
|
+
() => createDynamicCollisionDetector(dragAxis),
|
4487
|
+
[dragAxis]
|
4659
4488
|
);
|
4660
|
-
const
|
4661
|
-
|
4662
|
-
|
4663
|
-
|
4489
|
+
const {
|
4490
|
+
ref: sortableRef,
|
4491
|
+
isDragging: thisIsDragging,
|
4492
|
+
sortable
|
4493
|
+
} = (0, import_sortable2.useSortable)({
|
4664
4494
|
id,
|
4665
4495
|
index,
|
4666
4496
|
group: zoneCompound,
|
@@ -4675,18 +4505,34 @@ var DraggableComponent = ({
|
|
4675
4505
|
path: path || [],
|
4676
4506
|
inDroppableZone
|
4677
4507
|
},
|
4678
|
-
collisionPriority:
|
4679
|
-
collisionDetector:
|
4680
|
-
disabled,
|
4508
|
+
collisionPriority: depth,
|
4509
|
+
collisionDetector: dynamicCollisionDetector,
|
4681
4510
|
// "Out of the way" transition from react-beautiful-dnd
|
4682
4511
|
transition: {
|
4683
4512
|
duration: 200,
|
4684
4513
|
easing: "cubic-bezier(0.2, 0, 0, 1)"
|
4685
|
-
}
|
4514
|
+
},
|
4515
|
+
feedback: "clone"
|
4686
4516
|
});
|
4687
|
-
|
4688
|
-
|
4689
|
-
|
4517
|
+
(0, import_react26.useEffect)(() => {
|
4518
|
+
const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
|
4519
|
+
sortable.droppable.disabled = !isEnabled;
|
4520
|
+
sortable.draggable.disabled = !permissions.drag;
|
4521
|
+
const cleanup = zoneStore.subscribe((s) => {
|
4522
|
+
sortable.droppable.disabled = !s.enabledIndex[zoneCompound];
|
4523
|
+
});
|
4524
|
+
if (ref.current && !permissions.drag) {
|
4525
|
+
ref.current.setAttribute("data-puck-disabled", "");
|
4526
|
+
return () => {
|
4527
|
+
var _a;
|
4528
|
+
(_a = ref.current) == null ? void 0 : _a.removeAttribute("data-puck-disabled");
|
4529
|
+
cleanup();
|
4530
|
+
};
|
4531
|
+
}
|
4532
|
+
return cleanup;
|
4533
|
+
}, [permissions.drag, zoneCompound]);
|
4534
|
+
const ref = (0, import_react26.useRef)(null);
|
4535
|
+
const refSetter = (0, import_react26.useCallback)(
|
4690
4536
|
(el) => {
|
4691
4537
|
sortableRef(el);
|
4692
4538
|
if (el) {
|
@@ -4695,14 +4541,14 @@ var DraggableComponent = ({
|
|
4695
4541
|
},
|
4696
4542
|
[sortableRef]
|
4697
4543
|
);
|
4698
|
-
const [portalEl, setPortalEl] = (0,
|
4699
|
-
(0,
|
4544
|
+
const [portalEl, setPortalEl] = (0, import_react26.useState)();
|
4545
|
+
(0, import_react26.useEffect)(() => {
|
4700
4546
|
var _a, _b, _c;
|
4701
4547
|
setPortalEl(
|
4702
4548
|
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
|
4703
4549
|
);
|
4704
4550
|
}, [iframe.enabled, ref.current]);
|
4705
|
-
const getStyle = (0,
|
4551
|
+
const getStyle = (0, import_react26.useCallback)(() => {
|
4706
4552
|
var _a, _b, _c;
|
4707
4553
|
if (!ref.current) return;
|
4708
4554
|
const rect = ref.current.getBoundingClientRect();
|
@@ -4714,40 +4560,61 @@ var DraggableComponent = ({
|
|
4714
4560
|
x: deepScrollPosition.x - portalScroll.x - ((_b = portalContainerRect == null ? void 0 : portalContainerRect.left) != null ? _b : 0),
|
4715
4561
|
y: deepScrollPosition.y - portalScroll.y - ((_c = portalContainerRect == null ? void 0 : portalContainerRect.top) != null ? _c : 0)
|
4716
4562
|
};
|
4563
|
+
const untransformed = {
|
4564
|
+
height: ref.current.offsetHeight,
|
4565
|
+
width: ref.current.offsetWidth
|
4566
|
+
};
|
4567
|
+
const transform = accumulateTransform(ref.current);
|
4717
4568
|
const style2 = {
|
4718
|
-
left: `${rect.left + scroll.x}px`,
|
4719
|
-
top: `${rect.top + scroll.y}px`,
|
4720
|
-
height: `${
|
4721
|
-
width: `${
|
4569
|
+
left: `${(rect.left + scroll.x) / transform.scaleX}px`,
|
4570
|
+
top: `${(rect.top + scroll.y) / transform.scaleY}px`,
|
4571
|
+
height: `${untransformed.height}px`,
|
4572
|
+
width: `${untransformed.width}px`
|
4722
4573
|
};
|
4723
4574
|
return style2;
|
4724
4575
|
}, [ref.current]);
|
4725
|
-
const [style, setStyle] = (0,
|
4726
|
-
const sync = (0,
|
4576
|
+
const [style, setStyle] = (0, import_react26.useState)();
|
4577
|
+
const sync = (0, import_react26.useCallback)(() => {
|
4727
4578
|
setStyle(getStyle());
|
4728
4579
|
}, [ref.current, iframe]);
|
4729
|
-
(0,
|
4730
|
-
if (ref.current
|
4580
|
+
(0, import_react26.useEffect)(() => {
|
4581
|
+
if (ref.current) {
|
4731
4582
|
const observer = new ResizeObserver(sync);
|
4732
4583
|
observer.observe(ref.current);
|
4733
4584
|
return () => {
|
4734
4585
|
observer.disconnect();
|
4735
4586
|
};
|
4736
4587
|
}
|
4737
|
-
}, [ref.current
|
4588
|
+
}, [ref.current]);
|
4738
4589
|
const registerNode = useAppStore((s) => s.nodes.registerNode);
|
4739
|
-
(0,
|
4590
|
+
const hideOverlay = (0, import_react26.useCallback)(() => {
|
4591
|
+
setIsVisible(false);
|
4592
|
+
}, []);
|
4593
|
+
const showOverlay = (0, import_react26.useCallback)(() => {
|
4594
|
+
setIsVisible(true);
|
4595
|
+
}, []);
|
4596
|
+
(0, import_react26.useEffect)(() => {
|
4740
4597
|
var _a;
|
4741
|
-
registerNode(id, {
|
4598
|
+
registerNode(id, {
|
4599
|
+
methods: { sync, showOverlay, hideOverlay },
|
4600
|
+
element: (_a = ref.current) != null ? _a : null
|
4601
|
+
});
|
4742
4602
|
return () => {
|
4743
|
-
registerNode(id, {
|
4603
|
+
registerNode(id, {
|
4604
|
+
methods: {
|
4605
|
+
sync: () => null,
|
4606
|
+
hideOverlay: () => null,
|
4607
|
+
showOverlay: () => null
|
4608
|
+
},
|
4609
|
+
element: null
|
4610
|
+
});
|
4744
4611
|
};
|
4745
4612
|
}, [id, zoneCompound, index, componentType, sync]);
|
4746
|
-
const CustomActionBar = (0,
|
4613
|
+
const CustomActionBar = (0, import_react26.useMemo)(
|
4747
4614
|
() => overrides.actionBar || DefaultActionBar,
|
4748
4615
|
[overrides.actionBar]
|
4749
4616
|
);
|
4750
|
-
const onClick = (0,
|
4617
|
+
const onClick = (0, import_react26.useCallback)(
|
4751
4618
|
(e) => {
|
4752
4619
|
e.stopPropagation();
|
4753
4620
|
dispatch({
|
@@ -4760,7 +4627,7 @@ var DraggableComponent = ({
|
|
4760
4627
|
[index, zoneCompound, id]
|
4761
4628
|
);
|
4762
4629
|
const appStore = useAppStoreApi();
|
4763
|
-
const onSelectParent = (0,
|
4630
|
+
const onSelectParent = (0, import_react26.useCallback)(() => {
|
4764
4631
|
const { nodes, zones } = appStore.getState().state.indexes;
|
4765
4632
|
const node = nodes[id];
|
4766
4633
|
const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
|
@@ -4781,28 +4648,32 @@ var DraggableComponent = ({
|
|
4781
4648
|
}
|
4782
4649
|
});
|
4783
4650
|
}, [ctx, path]);
|
4784
|
-
const onDuplicate = (0,
|
4651
|
+
const onDuplicate = (0, import_react26.useCallback)(() => {
|
4785
4652
|
dispatch({
|
4786
4653
|
type: "duplicate",
|
4787
4654
|
sourceIndex: index,
|
4788
4655
|
sourceZone: zoneCompound
|
4789
4656
|
});
|
4790
4657
|
}, [index, zoneCompound]);
|
4791
|
-
const onDelete = (0,
|
4658
|
+
const onDelete = (0, import_react26.useCallback)(() => {
|
4792
4659
|
dispatch({
|
4793
4660
|
type: "remove",
|
4794
4661
|
index,
|
4795
4662
|
zone: zoneCompound
|
4796
4663
|
});
|
4797
4664
|
}, [index, zoneCompound]);
|
4798
|
-
const [hover, setHover] = (0,
|
4799
|
-
const indicativeHover = (
|
4800
|
-
|
4665
|
+
const [hover, setHover] = (0, import_react26.useState)(false);
|
4666
|
+
const indicativeHover = useContextStore(
|
4667
|
+
ZoneStoreContext,
|
4668
|
+
(s) => s.hoveringComponent === id
|
4669
|
+
);
|
4670
|
+
(0, import_react26.useEffect)(() => {
|
4801
4671
|
if (!ref.current) {
|
4802
4672
|
return;
|
4803
4673
|
}
|
4804
4674
|
const el = ref.current;
|
4805
4675
|
const _onMouseOver = (e) => {
|
4676
|
+
const userIsDragging = !!zoneStore.getState().draggedItem;
|
4806
4677
|
if (userIsDragging) {
|
4807
4678
|
if (thisIsDragging) {
|
4808
4679
|
setHover(true);
|
@@ -4824,18 +4695,12 @@ var DraggableComponent = ({
|
|
4824
4695
|
el.addEventListener("click", onClick);
|
4825
4696
|
el.addEventListener("mouseover", _onMouseOver);
|
4826
4697
|
el.addEventListener("mouseout", _onMouseOut);
|
4827
|
-
if (thisIsDragging) {
|
4828
|
-
el.setAttribute("data-puck-dragging", "");
|
4829
|
-
} else {
|
4830
|
-
el.removeAttribute("data-puck-dragging");
|
4831
|
-
}
|
4832
4698
|
return () => {
|
4833
4699
|
el.removeAttribute("data-puck-component");
|
4834
4700
|
el.removeAttribute("data-puck-dnd");
|
4835
4701
|
el.removeEventListener("click", onClick);
|
4836
4702
|
el.removeEventListener("mouseover", _onMouseOver);
|
4837
4703
|
el.removeEventListener("mouseout", _onMouseOut);
|
4838
|
-
el.removeAttribute("data-puck-dragging");
|
4839
4704
|
};
|
4840
4705
|
}, [
|
4841
4706
|
ref,
|
@@ -4843,29 +4708,43 @@ var DraggableComponent = ({
|
|
4843
4708
|
containsActiveZone,
|
4844
4709
|
zoneCompound,
|
4845
4710
|
id,
|
4846
|
-
userIsDragging,
|
4847
4711
|
thisIsDragging,
|
4848
4712
|
inDroppableZone
|
4849
4713
|
]);
|
4850
|
-
(0,
|
4851
|
-
|
4852
|
-
|
4853
|
-
|
4854
|
-
|
4855
|
-
|
4856
|
-
|
4857
|
-
|
4858
|
-
|
4859
|
-
|
4860
|
-
|
4861
|
-
|
4862
|
-
|
4863
|
-
|
4714
|
+
const [isVisible, setIsVisible] = (0, import_react26.useState)(false);
|
4715
|
+
const [dragFinished, setDragFinished] = (0, import_react26.useState)(true);
|
4716
|
+
const [_, startTransition] = (0, import_react26.useTransition)();
|
4717
|
+
(0, import_react26.useEffect)(() => {
|
4718
|
+
startTransition(() => {
|
4719
|
+
if (hover || indicativeHover || isSelected) {
|
4720
|
+
sync();
|
4721
|
+
setIsVisible(true);
|
4722
|
+
setThisWasDragging(false);
|
4723
|
+
} else {
|
4724
|
+
setIsVisible(false);
|
4725
|
+
}
|
4726
|
+
});
|
4727
|
+
}, [hover, indicativeHover, isSelected, iframe]);
|
4728
|
+
const [thisWasDragging, setThisWasDragging] = (0, import_react26.useState)(false);
|
4729
|
+
const onDragFinished = useOnDragFinished((finished) => {
|
4730
|
+
if (finished) {
|
4731
|
+
startTransition(() => {
|
4732
|
+
sync();
|
4733
|
+
setDragFinished(true);
|
4734
|
+
});
|
4864
4735
|
} else {
|
4865
|
-
|
4736
|
+
setDragFinished(false);
|
4737
|
+
}
|
4738
|
+
});
|
4739
|
+
(0, import_react26.useEffect)(() => {
|
4740
|
+
if (thisIsDragging) {
|
4741
|
+
setThisWasDragging(true);
|
4866
4742
|
}
|
4867
|
-
}, [
|
4868
|
-
|
4743
|
+
}, [thisIsDragging]);
|
4744
|
+
(0, import_react26.useEffect)(() => {
|
4745
|
+
if (thisWasDragging) return onDragFinished();
|
4746
|
+
}, [thisWasDragging, onDragFinished]);
|
4747
|
+
const syncActionsPosition = (0, import_react26.useCallback)(
|
4869
4748
|
(el) => {
|
4870
4749
|
if (el) {
|
4871
4750
|
const view = el.ownerDocument.defaultView;
|
@@ -4890,7 +4769,7 @@ var DraggableComponent = ({
|
|
4890
4769
|
},
|
4891
4770
|
[zoom]
|
4892
4771
|
);
|
4893
|
-
(0,
|
4772
|
+
(0, import_react26.useEffect)(() => {
|
4894
4773
|
if (userDragAxis) {
|
4895
4774
|
setDragAxis(userDragAxis);
|
4896
4775
|
return;
|
@@ -4904,8 +4783,11 @@ var DraggableComponent = ({
|
|
4904
4783
|
}
|
4905
4784
|
setDragAxis(autoDragAxis);
|
4906
4785
|
}, [ref, userDragAxis, autoDragAxis]);
|
4907
|
-
const parentAction = (
|
4908
|
-
|
4786
|
+
const parentAction = (0, import_react26.useMemo)(
|
4787
|
+
() => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CornerLeftUp, { size: 16 }) }),
|
4788
|
+
[ctx == null ? void 0 : ctx.areaId]
|
4789
|
+
);
|
4790
|
+
const nextContextValue = (0, import_react26.useMemo)(
|
4909
4791
|
() => __spreadProps(__spreadValues({}, ctx), {
|
4910
4792
|
areaId: id,
|
4911
4793
|
zoneCompound,
|
@@ -4925,7 +4807,7 @@ var DraggableComponent = ({
|
|
4925
4807
|
]
|
4926
4808
|
);
|
4927
4809
|
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropZoneProvider, { value: nextContextValue, children: [
|
4928
|
-
isVisible && (0, import_react_dom2.createPortal)(
|
4810
|
+
dragFinished && isVisible && (0, import_react_dom2.createPortal)(
|
4929
4811
|
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
4930
4812
|
"div",
|
4931
4813
|
{
|
@@ -4985,19 +4867,23 @@ var DraggableComponent = ({
|
|
4985
4867
|
|
4986
4868
|
// css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
|
4987
4869
|
init_react_import();
|
4988
|
-
var styles_module_default12 = { "DropZone": "
|
4870
|
+
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" };
|
4871
|
+
|
4872
|
+
// components/DropZone/index.tsx
|
4873
|
+
var import_react36 = require("@dnd-kit/react");
|
4989
4874
|
|
4990
4875
|
// components/DropZone/lib/use-min-empty-height.ts
|
4991
4876
|
init_react_import();
|
4992
|
-
var
|
4877
|
+
var import_react27 = require("react");
|
4878
|
+
var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
|
4993
4879
|
var useMinEmptyHeight = ({
|
4994
4880
|
zoneCompound,
|
4995
4881
|
userMinEmptyHeight,
|
4996
4882
|
ref
|
4997
4883
|
}) => {
|
4998
4884
|
const appStore = useAppStoreApi();
|
4999
|
-
const [prevHeight, setPrevHeight] = (0,
|
5000
|
-
const [isAnimating, setIsAnimating] = (0,
|
4885
|
+
const [prevHeight, setPrevHeight] = (0, import_react27.useState)(0);
|
4886
|
+
const [isAnimating, setIsAnimating] = (0, import_react27.useState)(false);
|
5001
4887
|
const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
|
5002
4888
|
var _a, _b;
|
5003
4889
|
return {
|
@@ -5005,32 +4891,52 @@ var useMinEmptyHeight = ({
|
|
5005
4891
|
isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
|
5006
4892
|
};
|
5007
4893
|
});
|
5008
|
-
(0,
|
4894
|
+
const numItems = (0, import_react27.useRef)(0);
|
4895
|
+
const onDragFinished = useOnDragFinished(
|
4896
|
+
(finished) => {
|
4897
|
+
var _a;
|
4898
|
+
if (finished) {
|
4899
|
+
const newNumItems = getNumItems(appStore, zoneCompound);
|
4900
|
+
setPrevHeight(0);
|
4901
|
+
if (newNumItems || numItems.current === 0) {
|
4902
|
+
setIsAnimating(false);
|
4903
|
+
return;
|
4904
|
+
}
|
4905
|
+
const selectedItem = appStore.getState().selectedItem;
|
4906
|
+
const zones = appStore.getState().state.indexes.zones;
|
4907
|
+
const nodes = appStore.getState().nodes;
|
4908
|
+
(_a = nodes.nodes[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.methods.hideOverlay();
|
4909
|
+
setTimeout(() => {
|
4910
|
+
var _a2;
|
4911
|
+
const contentIds = ((_a2 = zones[zoneCompound]) == null ? void 0 : _a2.contentIds) || [];
|
4912
|
+
contentIds.forEach((contentId) => {
|
4913
|
+
const node = nodes.nodes[contentId];
|
4914
|
+
node == null ? void 0 : node.methods.sync();
|
4915
|
+
});
|
4916
|
+
if (selectedItem) {
|
4917
|
+
setTimeout(() => {
|
4918
|
+
var _a3, _b;
|
4919
|
+
(_a3 = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _a3.methods.sync();
|
4920
|
+
(_b = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _b.methods.showOverlay();
|
4921
|
+
}, 200);
|
4922
|
+
}
|
4923
|
+
setIsAnimating(false);
|
4924
|
+
}, 100);
|
4925
|
+
}
|
4926
|
+
},
|
4927
|
+
[appStore, prevHeight, zoneCompound]
|
4928
|
+
);
|
4929
|
+
(0, import_react27.useEffect)(() => {
|
5009
4930
|
if (draggedItem && ref.current) {
|
5010
4931
|
if (isZone) {
|
5011
4932
|
const rect = ref.current.getBoundingClientRect();
|
4933
|
+
numItems.current = getNumItems(appStore, zoneCompound);
|
5012
4934
|
setPrevHeight(rect.height);
|
5013
4935
|
setIsAnimating(true);
|
5014
|
-
return;
|
4936
|
+
return onDragFinished();
|
5015
4937
|
}
|
5016
4938
|
}
|
5017
|
-
|
5018
|
-
setTimeout(() => {
|
5019
|
-
var _a, _b;
|
5020
|
-
const zones = appStore.getState().state.indexes.zones;
|
5021
|
-
const nodes = appStore.getState().nodes;
|
5022
|
-
const selectedItem = appStore.getState().selectedItem;
|
5023
|
-
const contentIds = ((_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) || [];
|
5024
|
-
contentIds.forEach((contentId) => {
|
5025
|
-
const node = nodes.nodes[contentId];
|
5026
|
-
node == null ? void 0 : node.methods.sync();
|
5027
|
-
});
|
5028
|
-
if (selectedItem) {
|
5029
|
-
(_b = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _b.methods.sync();
|
5030
|
-
}
|
5031
|
-
setIsAnimating(false);
|
5032
|
-
}, 400);
|
5033
|
-
}, [ref.current, draggedItem, zoneCompound]);
|
4939
|
+
}, [ref.current, draggedItem, onDragFinished]);
|
5034
4940
|
return [prevHeight || userMinEmptyHeight, isAnimating];
|
5035
4941
|
};
|
5036
4942
|
|
@@ -5051,15 +4957,15 @@ function assignRefs(refs, node) {
|
|
5051
4957
|
|
5052
4958
|
// components/DropZone/lib/use-content-with-preview.ts
|
5053
4959
|
init_react_import();
|
5054
|
-
var
|
4960
|
+
var import_react30 = require("react");
|
5055
4961
|
|
5056
4962
|
// lib/dnd/use-rendered-callback.ts
|
5057
4963
|
init_react_import();
|
5058
|
-
var
|
5059
|
-
var
|
4964
|
+
var import_react28 = require("@dnd-kit/react");
|
4965
|
+
var import_react29 = require("react");
|
5060
4966
|
function useRenderedCallback(callback, deps) {
|
5061
|
-
const manager = (0,
|
5062
|
-
return (0,
|
4967
|
+
const manager = (0, import_react28.useDragDropManager)();
|
4968
|
+
return (0, import_react29.useCallback)(
|
5063
4969
|
(...args) => __async(this, null, function* () {
|
5064
4970
|
yield manager == null ? void 0 : manager.renderer.rendering;
|
5065
4971
|
return callback(...args);
|
@@ -5070,24 +4976,18 @@ function useRenderedCallback(callback, deps) {
|
|
5070
4976
|
|
5071
4977
|
// components/DropZone/lib/use-content-with-preview.ts
|
5072
4978
|
var useContentIdsWithPreview = (contentIds, zoneCompound) => {
|
5073
|
-
const
|
4979
|
+
const zoneStore = (0, import_react30.useContext)(ZoneStoreContext);
|
4980
|
+
const preview = useContextStore(
|
5074
4981
|
ZoneStoreContext,
|
5075
|
-
(s) =>
|
5076
|
-
var _a;
|
5077
|
-
return {
|
5078
|
-
draggedItemId: (_a = s.draggedItem) == null ? void 0 : _a.id,
|
5079
|
-
preview: s.previewIndex[zoneCompound],
|
5080
|
-
previewExists: Object.keys(s.previewIndex || {}).length > 0
|
5081
|
-
};
|
5082
|
-
}
|
4982
|
+
(s) => s.previewIndex[zoneCompound]
|
5083
4983
|
);
|
5084
4984
|
const isDragging = useAppStore((s) => s.state.ui.isDragging);
|
5085
|
-
const [contentIdsWithPreview, setContentIdsWithPreview] = (0,
|
5086
|
-
const [localPreview, setLocalPreview] = (0,
|
4985
|
+
const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react30.useState)(contentIds);
|
4986
|
+
const [localPreview, setLocalPreview] = (0, import_react30.useState)(
|
5087
4987
|
preview
|
5088
4988
|
);
|
5089
4989
|
const updateContent = useRenderedCallback(
|
5090
|
-
(contentIds2, preview2, isDragging2) => {
|
4990
|
+
(contentIds2, preview2, isDragging2, draggedItemId, previewExists) => {
|
5091
4991
|
if (isDragging2 && !previewExists) {
|
5092
4992
|
return;
|
5093
4993
|
}
|
@@ -5116,26 +5016,36 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
|
|
5116
5016
|
}
|
5117
5017
|
setLocalPreview(preview2);
|
5118
5018
|
},
|
5119
|
-
[
|
5019
|
+
[]
|
5120
5020
|
);
|
5121
|
-
(0,
|
5122
|
-
|
5021
|
+
(0, import_react30.useEffect)(() => {
|
5022
|
+
var _a;
|
5023
|
+
const s = zoneStore.getState();
|
5024
|
+
const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
|
5025
|
+
const previewExists = Object.keys(s.previewIndex || {}).length > 0;
|
5026
|
+
updateContent(
|
5027
|
+
contentIds,
|
5028
|
+
preview,
|
5029
|
+
isDragging,
|
5030
|
+
draggedItemId,
|
5031
|
+
previewExists
|
5032
|
+
);
|
5123
5033
|
}, [contentIds, preview, isDragging]);
|
5124
5034
|
return [contentIdsWithPreview, localPreview];
|
5125
5035
|
};
|
5126
5036
|
|
5127
5037
|
// components/DropZone/lib/use-drag-axis.ts
|
5128
5038
|
init_react_import();
|
5129
|
-
var
|
5039
|
+
var import_react31 = require("react");
|
5130
5040
|
var GRID_DRAG_AXIS = "dynamic";
|
5131
5041
|
var FLEX_ROW_DRAG_AXIS = "x";
|
5132
5042
|
var DEFAULT_DRAG_AXIS = "y";
|
5133
5043
|
var useDragAxis = (ref, collisionAxis) => {
|
5134
5044
|
const status = useAppStore((s) => s.status);
|
5135
|
-
const [dragAxis, setDragAxis] = (0,
|
5045
|
+
const [dragAxis, setDragAxis] = (0, import_react31.useState)(
|
5136
5046
|
collisionAxis || DEFAULT_DRAG_AXIS
|
5137
5047
|
);
|
5138
|
-
const calculateDragAxis = (0,
|
5048
|
+
const calculateDragAxis = (0, import_react31.useCallback)(() => {
|
5139
5049
|
if (ref.current) {
|
5140
5050
|
const computedStyle = window.getComputedStyle(ref.current);
|
5141
5051
|
if (computedStyle.display === "grid") {
|
@@ -5147,7 +5057,7 @@ var useDragAxis = (ref, collisionAxis) => {
|
|
5147
5057
|
}
|
5148
5058
|
}
|
5149
5059
|
}, [ref.current]);
|
5150
|
-
(0,
|
5060
|
+
(0, import_react31.useEffect)(() => {
|
5151
5061
|
const onViewportChange = () => {
|
5152
5062
|
calculateDragAxis();
|
5153
5063
|
};
|
@@ -5156,54 +5066,57 @@ var useDragAxis = (ref, collisionAxis) => {
|
|
5156
5066
|
window.removeEventListener("viewportchange", onViewportChange);
|
5157
5067
|
};
|
5158
5068
|
}, []);
|
5159
|
-
(0,
|
5069
|
+
(0, import_react31.useEffect)(calculateDragAxis, [status, collisionAxis]);
|
5160
5070
|
return [dragAxis, calculateDragAxis];
|
5161
5071
|
};
|
5162
5072
|
|
5163
5073
|
// components/DropZone/index.tsx
|
5164
|
-
var
|
5074
|
+
var import_shallow4 = require("zustand/react/shallow");
|
5165
5075
|
|
5166
5076
|
// components/Render/index.tsx
|
5167
5077
|
init_react_import();
|
5168
5078
|
|
5169
5079
|
// lib/use-slots.tsx
|
5170
5080
|
init_react_import();
|
5171
|
-
var
|
5172
|
-
function useSlots(config,
|
5173
|
-
const slotProps = (0,
|
5174
|
-
|
5175
|
-
|
5176
|
-
|
5177
|
-
|
5178
|
-
|
5179
|
-
|
5180
|
-
if ((field == null ? void 0 : field.type) === "slot") {
|
5181
|
-
const content = props[fieldKey] || [];
|
5182
|
-
const render = (readOnly == null ? void 0 : readOnly[fieldKey]) || forceReadOnly ? renderSlotRender : renderSlotEdit;
|
5081
|
+
var import_react32 = require("react");
|
5082
|
+
function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
|
5083
|
+
const slotProps = (0, import_react32.useMemo)(() => {
|
5084
|
+
const mapped = mapSlots(
|
5085
|
+
item,
|
5086
|
+
(content, _parentId, propName, field, propPath) => {
|
5087
|
+
const wildcardPath = propPath.replace(/\[\d+\]/g, "[*]");
|
5088
|
+
const isReadOnly = (readOnly == null ? void 0 : readOnly[propPath]) || (readOnly == null ? void 0 : readOnly[wildcardPath]) || forceReadOnly;
|
5089
|
+
const render = isReadOnly ? renderSlotRender : renderSlotEdit;
|
5183
5090
|
const Slot = (dzProps) => render(__spreadProps(__spreadValues({
|
5184
|
-
allow: field.allow,
|
5185
|
-
disallow: field.disallow
|
5091
|
+
allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
|
5092
|
+
disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
|
5186
5093
|
}, dzProps), {
|
5187
|
-
zone:
|
5094
|
+
zone: propName,
|
5188
5095
|
content
|
5189
5096
|
}));
|
5190
|
-
|
5191
|
-
}
|
5192
|
-
|
5193
|
-
|
5194
|
-
|
5195
|
-
|
5097
|
+
return Slot;
|
5098
|
+
},
|
5099
|
+
config
|
5100
|
+
).props;
|
5101
|
+
return mapped;
|
5102
|
+
}, [config, item, readOnly, forceReadOnly]);
|
5103
|
+
const mergedProps = (0, import_react32.useMemo)(
|
5104
|
+
() => __spreadValues(__spreadValues({}, item.props), slotProps),
|
5105
|
+
[item.props, slotProps]
|
5106
|
+
);
|
5107
|
+
return mergedProps;
|
5196
5108
|
}
|
5197
5109
|
|
5198
5110
|
// components/Render/index.tsx
|
5199
|
-
var
|
5111
|
+
var import_react34 = __toESM(require("react"));
|
5200
5112
|
|
5201
5113
|
// components/SlotRender/index.tsx
|
5202
5114
|
init_react_import();
|
5115
|
+
var import_shallow3 = require("zustand/react/shallow");
|
5203
5116
|
|
5204
5117
|
// components/SlotRender/server.tsx
|
5205
5118
|
init_react_import();
|
5206
|
-
var
|
5119
|
+
var import_react33 = require("react");
|
5207
5120
|
|
5208
5121
|
// components/ServerRender/index.tsx
|
5209
5122
|
init_react_import();
|
@@ -5238,12 +5151,15 @@ function DropZoneRender({
|
|
5238
5151
|
metadata
|
5239
5152
|
}
|
5240
5153
|
),
|
5241
|
-
metadata
|
5154
|
+
metadata,
|
5155
|
+
dragRef: null,
|
5156
|
+
isEditing: false
|
5242
5157
|
}
|
5243
5158
|
});
|
5244
|
-
const
|
5159
|
+
const renderItem = __spreadProps(__spreadValues({}, item), { props });
|
5160
|
+
const propsWithSlots = useSlots(config, renderItem, (props2) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
|
5245
5161
|
if (Component) {
|
5246
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Component.render, __spreadValues({}, propsWithSlots),
|
5162
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Component.render, __spreadValues({}, propsWithSlots), renderItem.props.id);
|
5247
5163
|
}
|
5248
5164
|
return null;
|
5249
5165
|
}) });
|
@@ -5258,7 +5174,7 @@ var Item = ({
|
|
5258
5174
|
metadata
|
5259
5175
|
}) => {
|
5260
5176
|
const Component = config.components[item.type];
|
5261
|
-
const props = useSlots(
|
5177
|
+
const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
|
5262
5178
|
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
5263
5179
|
Component.render,
|
5264
5180
|
__spreadProps(__spreadValues({}, props), {
|
@@ -5269,7 +5185,7 @@ var Item = ({
|
|
5269
5185
|
})
|
5270
5186
|
);
|
5271
5187
|
};
|
5272
|
-
var SlotRender = (0,
|
5188
|
+
var SlotRender = (0, import_react33.forwardRef)(
|
5273
5189
|
function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
|
5274
5190
|
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className, style, ref, children: content.map((item) => {
|
5275
5191
|
if (!config.components[item.type]) {
|
@@ -5297,10 +5213,12 @@ var ContextSlotRender = ({
|
|
5297
5213
|
const config = useAppStore((s) => s.config);
|
5298
5214
|
const metadata = useAppStore((s) => s.metadata);
|
5299
5215
|
const slotContent = useAppStore(
|
5300
|
-
(s) => {
|
5216
|
+
(0, import_shallow3.useShallow)((s) => {
|
5301
5217
|
var _a, _b;
|
5302
|
-
|
5303
|
-
|
5218
|
+
const indexes = s.state.indexes;
|
5219
|
+
const contentIds = (_b = (_a = indexes.zones[`${componentId}:${zone}`]) == null ? void 0 : _a.contentIds) != null ? _b : [];
|
5220
|
+
return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
|
5221
|
+
})
|
5304
5222
|
);
|
5305
5223
|
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
5306
5224
|
SlotRenderPure,
|
@@ -5315,7 +5233,7 @@ var ContextSlotRender = ({
|
|
5315
5233
|
|
5316
5234
|
// components/Render/index.tsx
|
5317
5235
|
var import_jsx_runtime24 = require("react/jsx-runtime");
|
5318
|
-
var renderContext =
|
5236
|
+
var renderContext = import_react34.default.createContext({
|
5319
5237
|
config: { components: {} },
|
5320
5238
|
data: { root: {}, content: [] },
|
5321
5239
|
metadata: {}
|
@@ -5330,7 +5248,7 @@ function Render({
|
|
5330
5248
|
root: data.root || {},
|
5331
5249
|
content: data.content || []
|
5332
5250
|
});
|
5333
|
-
const rootProps = defaultedData.root.props
|
5251
|
+
const rootProps = "props" in defaultedData.root ? defaultedData.root.props : defaultedData.root;
|
5334
5252
|
const title = (rootProps == null ? void 0 : rootProps.title) || "";
|
5335
5253
|
const pageProps = __spreadProps(__spreadValues({}, rootProps), {
|
5336
5254
|
puck: {
|
@@ -5343,8 +5261,12 @@ function Render({
|
|
5343
5261
|
editMode: false,
|
5344
5262
|
id: "puck-root"
|
5345
5263
|
});
|
5346
|
-
const propsWithSlots = useSlots(
|
5347
|
-
|
5264
|
+
const propsWithSlots = useSlots(
|
5265
|
+
config,
|
5266
|
+
{ type: "root", props: pageProps },
|
5267
|
+
(props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
|
5268
|
+
);
|
5269
|
+
const nextContextValue = (0, import_react34.useMemo)(
|
5348
5270
|
() => ({
|
5349
5271
|
mode: "render",
|
5350
5272
|
depth: 0
|
@@ -5366,19 +5288,18 @@ var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5366
5288
|
var DropZoneChild = ({
|
5367
5289
|
zoneCompound,
|
5368
5290
|
componentId,
|
5369
|
-
preview,
|
5370
5291
|
index,
|
5371
|
-
isEnabled,
|
5372
5292
|
dragAxis,
|
5373
5293
|
collisionAxis,
|
5374
5294
|
inDroppableZone
|
5375
5295
|
}) => {
|
5376
5296
|
var _a, _b;
|
5377
5297
|
const metadata = useAppStore((s) => s.metadata);
|
5378
|
-
const ctx = (0,
|
5298
|
+
const ctx = (0, import_react35.useContext)(dropZoneContext);
|
5379
5299
|
const { depth = 1 } = ctx != null ? ctx : {};
|
5300
|
+
const zoneStore = (0, import_react35.useContext)(ZoneStoreContext);
|
5380
5301
|
const nodeProps = useAppStore(
|
5381
|
-
(0,
|
5302
|
+
(0, import_shallow4.useShallow)((s) => {
|
5382
5303
|
var _a2;
|
5383
5304
|
return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.flatData.props;
|
5384
5305
|
})
|
@@ -5390,22 +5311,42 @@ var DropZoneChild = ({
|
|
5390
5311
|
}
|
5391
5312
|
);
|
5392
5313
|
const nodeReadOnly = useAppStore(
|
5393
|
-
(0,
|
5314
|
+
(0, import_shallow4.useShallow)((s) => {
|
5394
5315
|
var _a2;
|
5395
5316
|
return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.readOnly;
|
5396
5317
|
})
|
5397
5318
|
);
|
5398
|
-
const
|
5399
|
-
const item =
|
5319
|
+
const appStore = useAppStoreApi();
|
5320
|
+
const item = (0, import_react35.useMemo)(() => {
|
5321
|
+
if (nodeProps) {
|
5322
|
+
const expanded = expandNode({
|
5323
|
+
type: nodeType,
|
5324
|
+
props: nodeProps
|
5325
|
+
});
|
5326
|
+
return expanded;
|
5327
|
+
}
|
5328
|
+
const preview = zoneStore.getState().previewIndex[zoneCompound];
|
5329
|
+
if (componentId === (preview == null ? void 0 : preview.props.id)) {
|
5330
|
+
return {
|
5331
|
+
type: preview.componentType,
|
5332
|
+
props: preview.props,
|
5333
|
+
previewType: preview.type
|
5334
|
+
};
|
5335
|
+
}
|
5336
|
+
return null;
|
5337
|
+
}, [appStore, componentId, zoneCompound, nodeType, nodeProps]);
|
5400
5338
|
const componentConfig = useAppStore(
|
5401
5339
|
(s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
|
5402
5340
|
);
|
5403
|
-
const puckProps =
|
5404
|
-
|
5405
|
-
|
5406
|
-
|
5407
|
-
|
5408
|
-
|
5341
|
+
const puckProps = (0, import_react35.useMemo)(
|
5342
|
+
() => ({
|
5343
|
+
renderDropZone: DropZoneEditPure,
|
5344
|
+
isEditing: true,
|
5345
|
+
dragRef: null,
|
5346
|
+
metadata: __spreadValues(__spreadValues({}, metadata), componentConfig == null ? void 0 : componentConfig.metadata)
|
5347
|
+
}),
|
5348
|
+
[metadata, componentConfig == null ? void 0 : componentConfig.metadata]
|
5349
|
+
);
|
5409
5350
|
const overrides = useAppStore((s) => s.overrides);
|
5410
5351
|
const isLoading = useAppStore(
|
5411
5352
|
(s) => {
|
@@ -5420,13 +5361,13 @@ var DropZoneChild = ({
|
|
5420
5361
|
}
|
5421
5362
|
);
|
5422
5363
|
let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
|
5423
|
-
const renderPreview = (0,
|
5424
|
-
() => function
|
5364
|
+
const renderPreview = (0, import_react35.useMemo)(
|
5365
|
+
() => function Preview3() {
|
5425
5366
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DrawerItemInner, { name: label, children: overrides.componentItem });
|
5426
5367
|
},
|
5427
5368
|
[componentId, label, overrides]
|
5428
5369
|
);
|
5429
|
-
const defaultsProps = (0,
|
5370
|
+
const defaultsProps = (0, import_react35.useMemo)(
|
5430
5371
|
() => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
|
5431
5372
|
puck: puckProps,
|
5432
5373
|
editMode: true
|
@@ -5434,9 +5375,17 @@ var DropZoneChild = ({
|
|
5434
5375
|
}),
|
5435
5376
|
[componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
|
5436
5377
|
);
|
5378
|
+
const defaultedNode = (0, import_react35.useMemo)(
|
5379
|
+
() => {
|
5380
|
+
var _a2;
|
5381
|
+
return { type: (_a2 = item == null ? void 0 : item.type) != null ? _a2 : nodeType, props: defaultsProps };
|
5382
|
+
},
|
5383
|
+
[item == null ? void 0 : item.type, nodeType, defaultsProps]
|
5384
|
+
);
|
5385
|
+
const config = useAppStore((s) => s.config);
|
5437
5386
|
const defaultedPropsWithSlots = useSlots(
|
5438
|
-
|
5439
|
-
|
5387
|
+
config,
|
5388
|
+
defaultedNode,
|
5440
5389
|
DropZoneEditPure,
|
5441
5390
|
(slotProps) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ContextSlotRender, { componentId, zone: slotProps.zone }),
|
5442
5391
|
nodeReadOnly,
|
@@ -5448,8 +5397,8 @@ var DropZoneChild = ({
|
|
5448
5397
|
item.type
|
5449
5398
|
] });
|
5450
5399
|
let componentType = item.type;
|
5451
|
-
const
|
5452
|
-
if (
|
5400
|
+
const isInserting = "previewType" in item ? item.previewType === "insert" : false;
|
5401
|
+
if (isInserting) {
|
5453
5402
|
Render2 = renderPreview;
|
5454
5403
|
}
|
5455
5404
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
@@ -5463,11 +5412,10 @@ var DropZoneChild = ({
|
|
5463
5412
|
isLoading,
|
5464
5413
|
isSelected,
|
5465
5414
|
label,
|
5466
|
-
isEnabled,
|
5467
5415
|
autoDragAxis: dragAxis,
|
5468
5416
|
userDragAxis: collisionAxis,
|
5469
5417
|
inDroppableZone,
|
5470
|
-
children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !
|
5418
|
+
children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
5471
5419
|
Render2,
|
5472
5420
|
__spreadProps(__spreadValues({}, defaultedPropsWithSlots), {
|
5473
5421
|
puck: __spreadProps(__spreadValues({}, defaultedPropsWithSlots.puck), {
|
@@ -5478,8 +5426,8 @@ var DropZoneChild = ({
|
|
5478
5426
|
}
|
5479
5427
|
);
|
5480
5428
|
};
|
5481
|
-
var DropZoneChildMemo = (0,
|
5482
|
-
var DropZoneEdit = (0,
|
5429
|
+
var DropZoneChildMemo = (0, import_react35.memo)(DropZoneChild);
|
5430
|
+
var DropZoneEdit = (0, import_react35.forwardRef)(
|
5483
5431
|
function DropZoneEditInternal({
|
5484
5432
|
zone,
|
5485
5433
|
allow,
|
@@ -5489,7 +5437,7 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
|
|
5489
5437
|
minEmptyHeight: userMinEmptyHeight = 128,
|
5490
5438
|
collisionAxis
|
5491
5439
|
}, userRef) {
|
5492
|
-
const ctx = (0,
|
5440
|
+
const ctx = (0, import_react35.useContext)(dropZoneContext);
|
5493
5441
|
const {
|
5494
5442
|
// These all need setting via context
|
5495
5443
|
areaId,
|
@@ -5498,7 +5446,7 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
|
|
5498
5446
|
unregisterLocalZone
|
5499
5447
|
} = ctx != null ? ctx : {};
|
5500
5448
|
const path = useAppStore(
|
5501
|
-
(0,
|
5449
|
+
(0, import_shallow4.useShallow)((s) => {
|
5502
5450
|
var _a;
|
5503
5451
|
return areaId ? (_a = s.state.indexes.nodes[areaId]) == null ? void 0 : _a.path : null;
|
5504
5452
|
})
|
@@ -5510,39 +5458,24 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
|
|
5510
5458
|
}
|
5511
5459
|
}
|
5512
5460
|
const isRootZone = zoneCompound === rootDroppableId || zone === rootDroppableId || areaId === "root";
|
5513
|
-
const
|
5514
|
-
|
5515
|
-
|
5516
|
-
|
5517
|
-
userIsDragging
|
5518
|
-
} = useContextStore(ZoneStoreContext, (s) => {
|
5519
|
-
var _a, _b;
|
5520
|
-
return {
|
5521
|
-
isDeepestZone: (_a = s.zoneDepthIndex[zoneCompound]) != null ? _a : false,
|
5522
|
-
inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
|
5523
|
-
draggedComponentType: (_b = s.draggedItem) == null ? void 0 : _b.data.componentType,
|
5524
|
-
userIsDragging: !!s.draggedItem
|
5525
|
-
};
|
5526
|
-
});
|
5461
|
+
const inNextDeepestArea = useContextStore(
|
5462
|
+
ZoneStoreContext,
|
5463
|
+
(s) => s.nextAreaDepthIndex[areaId || ""]
|
5464
|
+
);
|
5527
5465
|
const zoneContentIds = useAppStore(
|
5528
|
-
(0,
|
5466
|
+
(0, import_shallow4.useShallow)((s) => {
|
5529
5467
|
var _a;
|
5530
5468
|
return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds;
|
5531
5469
|
})
|
5532
5470
|
);
|
5533
5471
|
const zoneType = useAppStore(
|
5534
|
-
(0,
|
5472
|
+
(0, import_shallow4.useShallow)((s) => {
|
5535
5473
|
var _a;
|
5536
5474
|
return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
|
5537
5475
|
})
|
5538
5476
|
);
|
5539
|
-
(0,
|
5477
|
+
(0, import_react35.useEffect)(() => {
|
5540
5478
|
if (!zoneType || zoneType === "dropzone") {
|
5541
|
-
if (zoneCompound !== rootDroppableId) {
|
5542
|
-
console.warn(
|
5543
|
-
"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"
|
5544
|
-
);
|
5545
|
-
}
|
5546
5479
|
if (ctx == null ? void 0 : ctx.registerZone) {
|
5547
5480
|
ctx == null ? void 0 : ctx.registerZone(zoneCompound);
|
5548
5481
|
}
|
@@ -5553,11 +5486,20 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
|
|
5553
5486
|
};
|
5554
5487
|
}
|
5555
5488
|
}, [zoneType]);
|
5556
|
-
|
5489
|
+
(0, import_react35.useEffect)(() => {
|
5490
|
+
if (zoneType === "dropzone") {
|
5491
|
+
if (zoneCompound !== rootDroppableId) {
|
5492
|
+
console.warn(
|
5493
|
+
"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"
|
5494
|
+
);
|
5495
|
+
}
|
5496
|
+
}
|
5497
|
+
}, [zoneType]);
|
5498
|
+
const contentIds = (0, import_react35.useMemo)(() => {
|
5557
5499
|
return zoneContentIds || [];
|
5558
5500
|
}, [zoneContentIds]);
|
5559
|
-
const ref = (0,
|
5560
|
-
const acceptsTarget = (0,
|
5501
|
+
const ref = (0, import_react35.useRef)(null);
|
5502
|
+
const acceptsTarget = (0, import_react35.useCallback)(
|
5561
5503
|
(componentType) => {
|
5562
5504
|
if (!componentType) {
|
5563
5505
|
return true;
|
@@ -5579,29 +5521,44 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
|
|
5579
5521
|
},
|
5580
5522
|
[allow, disallow]
|
5581
5523
|
);
|
5582
|
-
(
|
5524
|
+
const targetAccepted = useContextStore(ZoneStoreContext, (s) => {
|
5525
|
+
var _a;
|
5526
|
+
const draggedComponentType = (_a = s.draggedItem) == null ? void 0 : _a.data.componentType;
|
5527
|
+
return acceptsTarget(draggedComponentType);
|
5528
|
+
});
|
5529
|
+
const hoveringOverArea = inNextDeepestArea || isRootZone;
|
5530
|
+
const isEnabled = useContextStore(ZoneStoreContext, (s) => {
|
5531
|
+
var _a;
|
5532
|
+
let _isEnabled = true;
|
5533
|
+
const isDeepestZone = (_a = s.zoneDepthIndex[zoneCompound]) != null ? _a : false;
|
5534
|
+
_isEnabled = isDeepestZone;
|
5535
|
+
if (_isEnabled) {
|
5536
|
+
_isEnabled = targetAccepted;
|
5537
|
+
}
|
5538
|
+
return _isEnabled;
|
5539
|
+
});
|
5540
|
+
(0, import_react35.useEffect)(() => {
|
5583
5541
|
if (registerLocalZone) {
|
5584
|
-
registerLocalZone(zoneCompound,
|
5542
|
+
registerLocalZone(zoneCompound, targetAccepted || isEnabled);
|
5585
5543
|
}
|
5586
5544
|
return () => {
|
5587
5545
|
if (unregisterLocalZone) {
|
5588
5546
|
unregisterLocalZone(zoneCompound);
|
5589
5547
|
}
|
5590
5548
|
};
|
5591
|
-
}, [
|
5592
|
-
const hoveringOverArea = inNextDeepestArea || isRootZone;
|
5593
|
-
let isEnabled = true;
|
5594
|
-
if (userIsDragging) {
|
5595
|
-
isEnabled = isDeepestZone;
|
5596
|
-
}
|
5597
|
-
if (isEnabled) {
|
5598
|
-
isEnabled = acceptsTarget(draggedComponentType);
|
5599
|
-
}
|
5549
|
+
}, [targetAccepted, isEnabled, zoneCompound]);
|
5600
5550
|
const [contentIdsWithPreview, preview] = useContentIdsWithPreview(
|
5601
5551
|
contentIds,
|
5602
5552
|
zoneCompound
|
5603
5553
|
);
|
5604
5554
|
const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
|
5555
|
+
const zoneStore = (0, import_react35.useContext)(ZoneStoreContext);
|
5556
|
+
(0, import_react35.useEffect)(() => {
|
5557
|
+
const { enabledIndex } = zoneStore.getState();
|
5558
|
+
zoneStore.setState({
|
5559
|
+
enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
|
5560
|
+
});
|
5561
|
+
}, [isEnabled, zoneStore, zoneCompound]);
|
5605
5562
|
const droppableConfig = {
|
5606
5563
|
id: zoneCompound,
|
5607
5564
|
collisionPriority: isEnabled ? depth : 0,
|
@@ -5611,11 +5568,11 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
|
|
5611
5568
|
data: {
|
5612
5569
|
areaId,
|
5613
5570
|
depth,
|
5614
|
-
isDroppableTarget:
|
5571
|
+
isDroppableTarget: targetAccepted,
|
5615
5572
|
path: path || []
|
5616
5573
|
}
|
5617
5574
|
};
|
5618
|
-
const { ref: dropRef } =
|
5575
|
+
const { ref: dropRef } = (0, import_react36.useDroppable)(droppableConfig);
|
5619
5576
|
const isAreaSelected = useAppStore(
|
5620
5577
|
(s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
|
5621
5578
|
);
|
@@ -5630,7 +5587,6 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
|
|
5630
5587
|
{
|
5631
5588
|
className: `${getClassName17({
|
5632
5589
|
isRootZone,
|
5633
|
-
userIsDragging,
|
5634
5590
|
hoveringOverArea,
|
5635
5591
|
isEnabled,
|
5636
5592
|
isAreaSelected,
|
@@ -5652,12 +5608,10 @@ var DropZoneEdit = (0, import_react34.forwardRef)(
|
|
5652
5608
|
{
|
5653
5609
|
zoneCompound,
|
5654
5610
|
componentId,
|
5655
|
-
preview,
|
5656
5611
|
dragAxis,
|
5657
|
-
isEnabled,
|
5658
5612
|
index: i,
|
5659
5613
|
collisionAxis,
|
5660
|
-
inDroppableZone:
|
5614
|
+
inDroppableZone: targetAccepted
|
5661
5615
|
},
|
5662
5616
|
componentId
|
5663
5617
|
);
|
@@ -5672,8 +5626,8 @@ var DropZoneRenderItem = ({
|
|
5672
5626
|
metadata
|
5673
5627
|
}) => {
|
5674
5628
|
const Component = config.components[item.type];
|
5675
|
-
const props = useSlots(
|
5676
|
-
const nextContextValue = (0,
|
5629
|
+
const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
|
5630
|
+
const nextContextValue = (0, import_react35.useMemo)(
|
5677
5631
|
() => ({
|
5678
5632
|
areaId: props.id,
|
5679
5633
|
depth: 1
|
@@ -5691,14 +5645,14 @@ var DropZoneRenderItem = ({
|
|
5691
5645
|
) }, props.id);
|
5692
5646
|
};
|
5693
5647
|
var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneRender2, __spreadValues({}, props));
|
5694
|
-
var DropZoneRender2 = (0,
|
5648
|
+
var DropZoneRender2 = (0, import_react35.forwardRef)(
|
5695
5649
|
function DropZoneRenderInternal({ className, style, zone }, ref) {
|
5696
|
-
const ctx = (0,
|
5650
|
+
const ctx = (0, import_react35.useContext)(dropZoneContext);
|
5697
5651
|
const { areaId = "root" } = ctx || {};
|
5698
|
-
const { config, data, metadata } = (0,
|
5652
|
+
const { config, data, metadata } = (0, import_react35.useContext)(renderContext);
|
5699
5653
|
let zoneCompound = rootDroppableId;
|
5700
5654
|
let content = (data == null ? void 0 : data.content) || [];
|
5701
|
-
(0,
|
5655
|
+
(0, import_react35.useEffect)(() => {
|
5702
5656
|
if (!content) {
|
5703
5657
|
if (ctx == null ? void 0 : ctx.registerZone) {
|
5704
5658
|
ctx == null ? void 0 : ctx.registerZone(zoneCompound);
|
@@ -5735,9 +5689,9 @@ var DropZoneRender2 = (0, import_react34.forwardRef)(
|
|
5735
5689
|
}
|
5736
5690
|
);
|
5737
5691
|
var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZone, __spreadValues({}, props));
|
5738
|
-
var DropZone = (0,
|
5692
|
+
var DropZone = (0, import_react35.forwardRef)(
|
5739
5693
|
function DropZone2(props, ref) {
|
5740
|
-
const ctx = (0,
|
5694
|
+
const ctx = (0, import_react35.useContext)(dropZoneContext);
|
5741
5695
|
if ((ctx == null ? void 0 : ctx.mode) === "edit") {
|
5742
5696
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
|
5743
5697
|
}
|
@@ -5747,8 +5701,7 @@ var DropZone = (0, import_react34.forwardRef)(
|
|
5747
5701
|
|
5748
5702
|
// lib/dnd/NestedDroppablePlugin.ts
|
5749
5703
|
init_react_import();
|
5750
|
-
var
|
5751
|
-
var import_state2 = require("@dnd-kit/state");
|
5704
|
+
var import_abstract9 = require("@dnd-kit/abstract");
|
5752
5705
|
|
5753
5706
|
// lib/throttle.ts
|
5754
5707
|
init_react_import();
|
@@ -5797,7 +5750,7 @@ var GlobalPosition = class {
|
|
5797
5750
|
var _a;
|
5798
5751
|
this.target = target;
|
5799
5752
|
this.original = original;
|
5800
|
-
this.frameEl = document.querySelector("#preview-frame");
|
5753
|
+
this.frameEl = document.querySelector("iframe#preview-frame");
|
5801
5754
|
if (this.frameEl) {
|
5802
5755
|
this.frameRect = this.frameEl.getBoundingClientRect();
|
5803
5756
|
this.scaleFactor = this.frameRect.width / (((_a = this.frameEl.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
|
@@ -5877,6 +5830,7 @@ var getZoneId2 = (candidate) => {
|
|
5877
5830
|
}
|
5878
5831
|
return id;
|
5879
5832
|
};
|
5833
|
+
var BUFFER = 6;
|
5880
5834
|
var getPointerCollisions = (position, manager) => {
|
5881
5835
|
const candidates = [];
|
5882
5836
|
let elements = position.target.ownerDocument.elementsFromPoint(
|
@@ -5900,13 +5854,26 @@ var getPointerCollisions = (position, manager) => {
|
|
5900
5854
|
for (let i = 0; i < elements.length; i++) {
|
5901
5855
|
const element = elements[i];
|
5902
5856
|
const dropzoneId = element.getAttribute("data-puck-dropzone");
|
5857
|
+
const id = element.getAttribute("data-puck-dnd");
|
5858
|
+
const isVoid = element.hasAttribute("data-puck-dnd-void");
|
5859
|
+
if (BUFFER && (dropzoneId || id) && !isVoid) {
|
5860
|
+
const box = element.getBoundingClientRect();
|
5861
|
+
const contractedBox = {
|
5862
|
+
left: box.left + BUFFER,
|
5863
|
+
right: box.right - BUFFER,
|
5864
|
+
top: box.top + BUFFER,
|
5865
|
+
bottom: box.bottom - BUFFER
|
5866
|
+
};
|
5867
|
+
if (position.frame.x < contractedBox.left || position.frame.x > contractedBox.right || position.frame.y > contractedBox.bottom || position.frame.y < contractedBox.top) {
|
5868
|
+
continue;
|
5869
|
+
}
|
5870
|
+
}
|
5903
5871
|
if (dropzoneId) {
|
5904
5872
|
const droppable = manager.registry.droppables.get(dropzoneId);
|
5905
5873
|
if (droppable) {
|
5906
5874
|
candidates.push(droppable);
|
5907
5875
|
}
|
5908
5876
|
}
|
5909
|
-
const id = element.getAttribute("data-puck-dnd");
|
5910
5877
|
if (id) {
|
5911
5878
|
const droppable = manager.registry.droppables.get(id);
|
5912
5879
|
if (droppable) {
|
@@ -5955,22 +5922,25 @@ var findDeepestCandidate = (position, manager) => {
|
|
5955
5922
|
return true;
|
5956
5923
|
});
|
5957
5924
|
filteredCandidates.reverse();
|
5958
|
-
const
|
5959
|
-
const
|
5925
|
+
const primaryCandidate = filteredCandidates[0];
|
5926
|
+
const primaryCandidateData = primaryCandidate.data;
|
5927
|
+
const primaryCandidateIsComponent = "containsActiveZone" in primaryCandidateData;
|
5928
|
+
const zone = getZoneId2(primaryCandidate);
|
5929
|
+
const area = primaryCandidateIsComponent && primaryCandidateData.containsActiveZone ? filteredCandidates[0].id : (_a = filteredCandidates[0]) == null ? void 0 : _a.data.areaId;
|
5960
5930
|
return { zone, area };
|
5961
5931
|
}
|
5962
5932
|
return {
|
5963
|
-
zone:
|
5964
|
-
area:
|
5933
|
+
zone: rootDroppableId,
|
5934
|
+
area: rootAreaId
|
5965
5935
|
};
|
5966
5936
|
};
|
5967
|
-
var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlugin extends
|
5937
|
+
var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlugin extends import_abstract9.Plugin {
|
5968
5938
|
constructor(manager, options) {
|
5969
5939
|
super(manager);
|
5970
5940
|
if (typeof window === "undefined") {
|
5971
5941
|
return;
|
5972
5942
|
}
|
5973
|
-
|
5943
|
+
this.registerEffect(() => {
|
5974
5944
|
const handleMove = (event) => {
|
5975
5945
|
const target = event instanceof BubbledPointerEvent ? event.originalTarget || event.target : event.target;
|
5976
5946
|
const position = new GlobalPosition(target, {
|
@@ -5994,12 +5964,12 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
|
|
5994
5964
|
capture: true
|
5995
5965
|
// dndkit's PointerSensor prevents propagation during drag
|
5996
5966
|
});
|
5997
|
-
|
5967
|
+
const cleanup = () => {
|
5998
5968
|
document.body.removeEventListener("pointermove", handlePointerMove, {
|
5999
5969
|
capture: true
|
6000
5970
|
});
|
6001
|
-
cleanupEffect();
|
6002
5971
|
};
|
5972
|
+
return cleanup;
|
6003
5973
|
});
|
6004
5974
|
}
|
6005
5975
|
};
|
@@ -6059,14 +6029,15 @@ function getDeepDir(el) {
|
|
6059
6029
|
}
|
6060
6030
|
|
6061
6031
|
// components/DragDropContext/index.tsx
|
6032
|
+
var import_state = require("@dnd-kit/state");
|
6062
6033
|
var import_jsx_runtime26 = require("react/jsx-runtime");
|
6063
6034
|
var DEBUG3 = false;
|
6064
|
-
var dragListenerContext = (0,
|
6035
|
+
var dragListenerContext = (0, import_react38.createContext)({
|
6065
6036
|
dragListeners: {}
|
6066
6037
|
});
|
6067
6038
|
function useDragListener(type, fn, deps = []) {
|
6068
|
-
const { setDragListeners } = (0,
|
6069
|
-
(0,
|
6039
|
+
const { setDragListeners } = (0, import_react38.useContext)(dragListenerContext);
|
6040
|
+
(0, import_react38.useEffect)(() => {
|
6070
6041
|
if (setDragListeners) {
|
6071
6042
|
setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
|
6072
6043
|
[type]: [...old[type] || [], fn]
|
@@ -6076,8 +6047,8 @@ function useDragListener(type, fn, deps = []) {
|
|
6076
6047
|
}
|
6077
6048
|
var AREA_CHANGE_DEBOUNCE_MS = 100;
|
6078
6049
|
var useTempDisableFallback = (timeout3) => {
|
6079
|
-
const lastFallbackDisable = (0,
|
6080
|
-
return (0,
|
6050
|
+
const lastFallbackDisable = (0, import_react38.useRef)(null);
|
6051
|
+
return (0, import_react38.useCallback)((manager) => {
|
6081
6052
|
collisionStore.setState({ fallbackEnabled: false });
|
6082
6053
|
const fallbackId = generateId();
|
6083
6054
|
lastFallbackDisable.current = fallbackId;
|
@@ -6096,19 +6067,21 @@ var DragDropContextClient = ({
|
|
6096
6067
|
const dispatch = useAppStore((s) => s.dispatch);
|
6097
6068
|
const appStore = useAppStoreApi();
|
6098
6069
|
const id = useSafeId();
|
6099
|
-
const debouncedParamsRef = (0,
|
6070
|
+
const debouncedParamsRef = (0, import_react38.useRef)(null);
|
6100
6071
|
const tempDisableFallback = useTempDisableFallback(100);
|
6101
|
-
const [zoneStore] = (0,
|
6072
|
+
const [zoneStore] = (0, import_react38.useState)(
|
6102
6073
|
() => (0, import_zustand5.createStore)(() => ({
|
6103
6074
|
zoneDepthIndex: {},
|
6104
6075
|
nextZoneDepthIndex: {},
|
6105
6076
|
areaDepthIndex: {},
|
6106
6077
|
nextAreaDepthIndex: {},
|
6107
6078
|
draggedItem: null,
|
6108
|
-
previewIndex: {}
|
6079
|
+
previewIndex: {},
|
6080
|
+
enabledIndex: {},
|
6081
|
+
hoveringComponent: null
|
6109
6082
|
}))
|
6110
6083
|
);
|
6111
|
-
const getChanged2 = (0,
|
6084
|
+
const getChanged2 = (0, import_react38.useCallback)(
|
6112
6085
|
(params, id2) => {
|
6113
6086
|
const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
|
6114
6087
|
const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
|
@@ -6129,7 +6102,7 @@ var DragDropContextClient = ({
|
|
6129
6102
|
},
|
6130
6103
|
[zoneStore]
|
6131
6104
|
);
|
6132
|
-
const setDeepestAndCollide = (0,
|
6105
|
+
const setDeepestAndCollide = (0, import_react38.useCallback)(
|
6133
6106
|
(params, manager) => {
|
6134
6107
|
const { zoneChanged, areaChanged } = getChanged2(params, id);
|
6135
6108
|
if (!zoneChanged && !areaChanged) return;
|
@@ -6153,7 +6126,7 @@ var DragDropContextClient = ({
|
|
6153
6126
|
setDeepestDb.cancel();
|
6154
6127
|
debouncedParamsRef.current = null;
|
6155
6128
|
};
|
6156
|
-
(0,
|
6129
|
+
(0, import_react38.useEffect)(() => {
|
6157
6130
|
if (DEBUG3) {
|
6158
6131
|
zoneStore.subscribe(
|
6159
6132
|
(s) => {
|
@@ -6167,7 +6140,7 @@ var DragDropContextClient = ({
|
|
6167
6140
|
);
|
6168
6141
|
}
|
6169
6142
|
}, []);
|
6170
|
-
const [plugins] = (0,
|
6143
|
+
const [plugins] = (0, import_react38.useState)(() => [
|
6171
6144
|
...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
|
6172
6145
|
createNestedDroppablePlugin(
|
6173
6146
|
{
|
@@ -6215,10 +6188,10 @@ var DragDropContextClient = ({
|
|
6215
6188
|
)
|
6216
6189
|
]);
|
6217
6190
|
const sensors = useSensors();
|
6218
|
-
const [dragListeners, setDragListeners] = (0,
|
6219
|
-
const dragMode = (0,
|
6220
|
-
const initialSelector = (0,
|
6221
|
-
const nextContextValue = (0,
|
6191
|
+
const [dragListeners, setDragListeners] = (0, import_react38.useState)({});
|
6192
|
+
const dragMode = (0, import_react38.useRef)(null);
|
6193
|
+
const initialSelector = (0, import_react38.useRef)(void 0);
|
6194
|
+
const nextContextValue = (0, import_react38.useMemo)(
|
6222
6195
|
() => ({
|
6223
6196
|
mode: "edit",
|
6224
6197
|
areaId: "root",
|
@@ -6234,12 +6207,14 @@ var DragDropContextClient = ({
|
|
6234
6207
|
setDragListeners
|
6235
6208
|
},
|
6236
6209
|
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
6237
|
-
|
6210
|
+
import_react37.DragDropProvider,
|
6238
6211
|
{
|
6239
6212
|
plugins,
|
6240
6213
|
sensors,
|
6241
6214
|
onDragEnd: (event, manager) => {
|
6242
|
-
var _a;
|
6215
|
+
var _a, _b;
|
6216
|
+
const entryEl = (_a = getFrame()) == null ? void 0 : _a.querySelector("[data-puck-entry]");
|
6217
|
+
entryEl == null ? void 0 : entryEl.removeAttribute("data-puck-dragging");
|
6243
6218
|
const { source, target } = event.operation;
|
6244
6219
|
if (!source) {
|
6245
6220
|
zoneStore.setState({ draggedItem: null });
|
@@ -6247,9 +6222,9 @@ var DragDropContextClient = ({
|
|
6247
6222
|
}
|
6248
6223
|
const { zone, index } = source.data;
|
6249
6224
|
const { previewIndex = {} } = zoneStore.getState() || {};
|
6250
|
-
const thisPreview = ((
|
6251
|
-
|
6252
|
-
var _a2,
|
6225
|
+
const thisPreview = ((_b = previewIndex[zone]) == null ? void 0 : _b.props.id) === source.id ? previewIndex[zone] : null;
|
6226
|
+
const onAnimationEnd = () => {
|
6227
|
+
var _a2, _b2;
|
6253
6228
|
zoneStore.setState({ draggedItem: null });
|
6254
6229
|
if (event.canceled || (target == null ? void 0 : target.type) === "void") {
|
6255
6230
|
zoneStore.setState({ previewIndex: {} });
|
@@ -6285,23 +6260,28 @@ var DragDropContextClient = ({
|
|
6285
6260
|
});
|
6286
6261
|
}
|
6287
6262
|
}
|
6288
|
-
|
6289
|
-
|
6290
|
-
|
6291
|
-
|
6292
|
-
|
6293
|
-
|
6294
|
-
|
6295
|
-
|
6296
|
-
|
6297
|
-
}, 50);
|
6298
|
-
(_b = dragListeners.dragend) == null ? void 0 : _b.forEach((fn) => {
|
6263
|
+
dispatch({
|
6264
|
+
type: "setUi",
|
6265
|
+
ui: {
|
6266
|
+
itemSelector: { index, zone },
|
6267
|
+
isDragging: false
|
6268
|
+
},
|
6269
|
+
recordHistory: true
|
6270
|
+
});
|
6271
|
+
(_b2 = dragListeners.dragend) == null ? void 0 : _b2.forEach((fn) => {
|
6299
6272
|
fn(event, manager);
|
6300
6273
|
});
|
6301
|
-
}
|
6274
|
+
};
|
6275
|
+
let dispose;
|
6276
|
+
dispose = (0, import_state.effect)(() => {
|
6277
|
+
if (source.status === "idle") {
|
6278
|
+
onAnimationEnd();
|
6279
|
+
dispose == null ? void 0 : dispose();
|
6280
|
+
}
|
6281
|
+
});
|
6302
6282
|
},
|
6303
6283
|
onDragOver: (event, manager) => {
|
6304
|
-
var _a, _b, _c, _d
|
6284
|
+
var _a, _b, _c, _d;
|
6305
6285
|
event.preventDefault();
|
6306
6286
|
const draggedItem = (_a = zoneStore.getState()) == null ? void 0 : _a.draggedItem;
|
6307
6287
|
if (!draggedItem) return;
|
@@ -6319,7 +6299,7 @@ var DragDropContextClient = ({
|
|
6319
6299
|
const targetData = target.data;
|
6320
6300
|
targetZone = targetData.zone;
|
6321
6301
|
targetIndex = targetData.index;
|
6322
|
-
const collisionData = (
|
6302
|
+
const collisionData = (_b = manager.collisionObserver.collisions[0]) == null ? void 0 : _b.data;
|
6323
6303
|
const dir = getDeepDir(target.element);
|
6324
6304
|
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";
|
6325
6305
|
if (targetIndex >= sourceIndex && sourceZone === targetZone) {
|
@@ -6332,7 +6312,7 @@ var DragDropContextClient = ({
|
|
6332
6312
|
targetZone = target.id.toString();
|
6333
6313
|
targetIndex = 0;
|
6334
6314
|
}
|
6335
|
-
const path = ((
|
6315
|
+
const path = ((_c = appStore.getState().state.indexes.nodes[target.id]) == null ? void 0 : _c.path) || [];
|
6336
6316
|
if (targetId === sourceId || path.find((path2) => {
|
6337
6317
|
const [pathId] = path2.split(":");
|
6338
6318
|
return pathId === sourceId;
|
@@ -6378,16 +6358,12 @@ var DragDropContextClient = ({
|
|
6378
6358
|
});
|
6379
6359
|
}
|
6380
6360
|
}
|
6381
|
-
(
|
6361
|
+
(_d = dragListeners.dragover) == null ? void 0 : _d.forEach((fn) => {
|
6382
6362
|
fn(event, manager);
|
6383
6363
|
});
|
6384
6364
|
},
|
6385
6365
|
onDragStart: (event, manager) => {
|
6386
6366
|
var _a;
|
6387
|
-
dispatch({
|
6388
|
-
type: "setUi",
|
6389
|
-
ui: { itemSelector: null, isDragging: true }
|
6390
|
-
});
|
6391
6367
|
const { source } = event.operation;
|
6392
6368
|
if (source && source.type !== "void") {
|
6393
6369
|
const sourceData = source.data;
|
@@ -6417,11 +6393,31 @@ var DragDropContextClient = ({
|
|
6417
6393
|
});
|
6418
6394
|
},
|
6419
6395
|
onBeforeDragStart: (event) => {
|
6420
|
-
var _a;
|
6421
|
-
const isNewComponent = ((_a = event.operation.source) == null ? void 0 : _a.
|
6396
|
+
var _a, _b, _c, _d;
|
6397
|
+
const isNewComponent = ((_a = event.operation.source) == null ? void 0 : _a.type) === "drawer";
|
6422
6398
|
dragMode.current = isNewComponent ? "new" : "existing";
|
6423
6399
|
initialSelector.current = void 0;
|
6424
6400
|
zoneStore.setState({ draggedItem: event.operation.source });
|
6401
|
+
if (((_b = appStore.getState().selectedItem) == null ? void 0 : _b.props.id) !== ((_c = event.operation.source) == null ? void 0 : _c.id)) {
|
6402
|
+
dispatch({
|
6403
|
+
type: "setUi",
|
6404
|
+
ui: {
|
6405
|
+
itemSelector: null,
|
6406
|
+
isDragging: true
|
6407
|
+
},
|
6408
|
+
recordHistory: false
|
6409
|
+
});
|
6410
|
+
} else {
|
6411
|
+
dispatch({
|
6412
|
+
type: "setUi",
|
6413
|
+
ui: {
|
6414
|
+
isDragging: true
|
6415
|
+
},
|
6416
|
+
recordHistory: false
|
6417
|
+
});
|
6418
|
+
}
|
6419
|
+
const entryEl = (_d = getFrame()) == null ? void 0 : _d.querySelector("[data-puck-entry]");
|
6420
|
+
entryEl == null ? void 0 : entryEl.setAttribute("data-puck-dragging", "true");
|
6425
6421
|
},
|
6426
6422
|
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropZoneProvider, { value: nextContextValue, children }) })
|
6427
6423
|
}
|
@@ -6441,6 +6437,7 @@ var DragDropContext = ({
|
|
6441
6437
|
};
|
6442
6438
|
|
6443
6439
|
// components/Drawer/index.tsx
|
6440
|
+
var import_react40 = require("@dnd-kit/react");
|
6444
6441
|
var import_jsx_runtime27 = require("react/jsx-runtime");
|
6445
6442
|
var getClassName18 = get_class_name_factory_default("Drawer", styles_module_default10);
|
6446
6443
|
var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
|
@@ -6451,7 +6448,7 @@ var DrawerItemInner = ({
|
|
6451
6448
|
dragRef,
|
6452
6449
|
isDragDisabled
|
6453
6450
|
}) => {
|
6454
|
-
const CustomInner = (0,
|
6451
|
+
const CustomInner = (0, import_react39.useMemo)(
|
6455
6452
|
() => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
|
6456
6453
|
[children]
|
6457
6454
|
);
|
@@ -6477,10 +6474,11 @@ var DrawerItemDraggable = ({
|
|
6477
6474
|
id,
|
6478
6475
|
isDragDisabled
|
6479
6476
|
}) => {
|
6480
|
-
const { ref } =
|
6477
|
+
const { ref } = (0, import_react40.useDraggable)({
|
6481
6478
|
id,
|
6482
|
-
data: {
|
6483
|
-
disabled: isDragDisabled
|
6479
|
+
data: { componentType: name },
|
6480
|
+
disabled: isDragDisabled,
|
6481
|
+
type: "drawer"
|
6484
6482
|
});
|
6485
6483
|
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: getClassName18("draggable"), children: [
|
6486
6484
|
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName18("draggableBg"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DrawerItemInner, { name, label, children }) }),
|
@@ -6505,7 +6503,7 @@ var DrawerItem = ({
|
|
6505
6503
|
isDragDisabled
|
6506
6504
|
}) => {
|
6507
6505
|
const resolvedId = id || name;
|
6508
|
-
const [dynamicId, setDynamicId] = (0,
|
6506
|
+
const [dynamicId, setDynamicId] = (0, import_react39.useState)(generateId(resolvedId));
|
6509
6507
|
if (typeof index !== "undefined") {
|
6510
6508
|
console.error(
|
6511
6509
|
"Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
|
@@ -6545,7 +6543,7 @@ var Drawer = ({
|
|
6545
6543
|
);
|
6546
6544
|
}
|
6547
6545
|
const id = useSafeId();
|
6548
|
-
const { ref } =
|
6546
|
+
const { ref } = (0, import_react40.useDroppable)({
|
6549
6547
|
id,
|
6550
6548
|
type: "void",
|
6551
6549
|
collisionPriority: 0
|
@@ -6558,6 +6556,7 @@ var Drawer = ({
|
|
6558
6556
|
ref,
|
6559
6557
|
"data-puck-dnd": id,
|
6560
6558
|
"data-puck-drawer": true,
|
6559
|
+
"data-puck-dnd-void": true,
|
6561
6560
|
children
|
6562
6561
|
}
|
6563
6562
|
);
|
@@ -6566,7 +6565,7 @@ Drawer.Item = DrawerItem;
|
|
6566
6565
|
|
6567
6566
|
// components/Puck/index.tsx
|
6568
6567
|
init_react_import();
|
6569
|
-
var
|
6568
|
+
var import_react56 = require("react");
|
6570
6569
|
|
6571
6570
|
// components/SidebarSection/index.tsx
|
6572
6571
|
init_react_import();
|
@@ -6577,7 +6576,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_8boj8_1", "Si
|
|
6577
6576
|
|
6578
6577
|
// lib/use-breadcrumbs.ts
|
6579
6578
|
init_react_import();
|
6580
|
-
var
|
6579
|
+
var import_react41 = require("react");
|
6581
6580
|
var useBreadcrumbs = (renderCount) => {
|
6582
6581
|
const selectedId = useAppStore((s) => {
|
6583
6582
|
var _a;
|
@@ -6589,7 +6588,7 @@ var useBreadcrumbs = (renderCount) => {
|
|
6589
6588
|
return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
|
6590
6589
|
});
|
6591
6590
|
const appStore = useAppStoreApi();
|
6592
|
-
return (0,
|
6591
|
+
return (0, import_react41.useMemo)(() => {
|
6593
6592
|
const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
|
6594
6593
|
var _a, _b, _c;
|
6595
6594
|
const [componentId] = zoneCompound.split(":");
|
@@ -6661,70 +6660,26 @@ var SidebarSection = ({
|
|
6661
6660
|
);
|
6662
6661
|
};
|
6663
6662
|
|
6664
|
-
// components/
|
6663
|
+
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
|
6665
6664
|
init_react_import();
|
6665
|
+
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" };
|
6666
6666
|
|
6667
|
-
//
|
6667
|
+
// components/Puck/components/Fields/index.tsx
|
6668
6668
|
init_react_import();
|
6669
|
-
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" };
|
6670
6669
|
|
6671
|
-
// components/
|
6670
|
+
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
|
6671
|
+
init_react_import();
|
6672
|
+
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" };
|
6673
|
+
|
6674
|
+
// components/Puck/components/Fields/index.tsx
|
6675
|
+
var import_react42 = require("react");
|
6676
|
+
var import_shallow5 = require("zustand/react/shallow");
|
6672
6677
|
var import_jsx_runtime29 = require("react/jsx-runtime");
|
6673
|
-
var getClassName20 = get_class_name_factory_default("
|
6674
|
-
function MenuBar({
|
6675
|
-
menuOpen = false,
|
6676
|
-
renderHeaderActions,
|
6677
|
-
setMenuOpen
|
6678
|
-
}) {
|
6679
|
-
const back = useAppStore((s) => s.history.back);
|
6680
|
-
const forward = useAppStore((s) => s.history.forward);
|
6681
|
-
const hasFuture = useAppStore((s) => s.history.hasFuture());
|
6682
|
-
const hasPast = useAppStore((s) => s.history.hasPast());
|
6683
|
-
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
6684
|
-
"div",
|
6685
|
-
{
|
6686
|
-
className: getClassName20({ menuOpen }),
|
6687
|
-
onClick: (event) => {
|
6688
|
-
var _a;
|
6689
|
-
const element = event.target;
|
6690
|
-
if (window.matchMedia("(min-width: 638px)").matches) {
|
6691
|
-
return;
|
6692
|
-
}
|
6693
|
-
if (element.tagName === "A" && ((_a = element.getAttribute("href")) == null ? void 0 : _a.startsWith("#"))) {
|
6694
|
-
setMenuOpen(false);
|
6695
|
-
}
|
6696
|
-
},
|
6697
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: getClassName20("inner"), children: [
|
6698
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: getClassName20("history"), children: [
|
6699
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Undo2, { size: 21 }) }),
|
6700
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Redo2, { size: 21 }) })
|
6701
|
-
] }),
|
6702
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: renderHeaderActions && renderHeaderActions() })
|
6703
|
-
] })
|
6704
|
-
}
|
6705
|
-
);
|
6706
|
-
}
|
6707
|
-
|
6708
|
-
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
|
6709
|
-
init_react_import();
|
6710
|
-
var styles_module_default15 = { "Puck": "_Puck_11o75_19", "Puck-portal": "_Puck-portal_11o75_24", "PuckLayout-inner": "_PuckLayout-inner_11o75_31", "PuckLayout--mounted": "_PuckLayout--mounted_11o75_43", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_11o75_47", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_11o75_53", "PuckLayout-mounted": "_PuckLayout-mounted_11o75_67", "PuckLayout": "_PuckLayout_11o75_31", "PuckLayout-header": "_PuckLayout-header_11o75_108", "PuckLayout-headerInner": "_PuckLayout-headerInner_11o75_117", "PuckLayout-headerToggle": "_PuckLayout-headerToggle_11o75_127", "PuckLayout-rightSideBarToggle": "_PuckLayout-rightSideBarToggle_11o75_134", "PuckLayout-leftSideBarToggle": "_PuckLayout-leftSideBarToggle_11o75_135", "PuckLayout-headerTitle": "_PuckLayout-headerTitle_11o75_139", "PuckLayout-headerPath": "_PuckLayout-headerPath_11o75_143", "PuckLayout-headerTools": "_PuckLayout-headerTools_11o75_150", "PuckLayout-menuButton": "_PuckLayout-menuButton_11o75_156", "PuckLayout--menuOpen": "_PuckLayout--menuOpen_11o75_161", "PuckLayout-leftSideBar": "_PuckLayout-leftSideBar_11o75_135", "PuckLayout-rightSideBar": "_PuckLayout-rightSideBar_11o75_134" };
|
6711
|
-
|
6712
|
-
// components/Puck/components/Fields/index.tsx
|
6713
|
-
init_react_import();
|
6714
|
-
|
6715
|
-
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
|
6716
|
-
init_react_import();
|
6717
|
-
var styles_module_default16 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
|
6718
|
-
|
6719
|
-
// components/Puck/components/Fields/index.tsx
|
6720
|
-
var import_react39 = require("react");
|
6721
|
-
var import_shallow4 = require("zustand/react/shallow");
|
6722
|
-
var import_jsx_runtime30 = require("react/jsx-runtime");
|
6723
|
-
var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
|
6678
|
+
var getClassName20 = get_class_name_factory_default("PuckFields", styles_module_default15);
|
6724
6679
|
var DefaultFields = ({
|
6725
6680
|
children
|
6726
6681
|
}) => {
|
6727
|
-
return /* @__PURE__ */ (0,
|
6682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children });
|
6728
6683
|
};
|
6729
6684
|
var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void 0, null, function* () {
|
6730
6685
|
let currentProps;
|
@@ -6784,18 +6739,19 @@ var FieldsChild = ({ fieldName }) => {
|
|
6784
6739
|
return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
|
6785
6740
|
});
|
6786
6741
|
const permissions = useAppStore(
|
6787
|
-
(0,
|
6742
|
+
(0, import_shallow5.useShallow)((s) => {
|
6788
6743
|
const { selectedItem, permissions: permissions2 } = s;
|
6789
6744
|
return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
|
6790
6745
|
})
|
6791
6746
|
);
|
6792
6747
|
const appStore = useAppStoreApi();
|
6793
|
-
const onChange = (0,
|
6748
|
+
const onChange = (0, import_react42.useCallback)(createOnChange(fieldName, appStore), [
|
6794
6749
|
fieldName
|
6795
6750
|
]);
|
6796
|
-
|
6751
|
+
const { visible = true } = field != null ? field : {};
|
6752
|
+
if (!field || !id || !visible) return null;
|
6797
6753
|
if (field.type === "slot") return null;
|
6798
|
-
return /* @__PURE__ */ (0,
|
6754
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getClassName20("field"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
6799
6755
|
AutoFieldPrivate,
|
6800
6756
|
{
|
6801
6757
|
field,
|
@@ -6807,14 +6763,15 @@ var FieldsChild = ({ fieldName }) => {
|
|
6807
6763
|
}
|
6808
6764
|
) }, id);
|
6809
6765
|
};
|
6810
|
-
var
|
6766
|
+
var FieldsChildMemo = (0, import_react42.memo)(FieldsChild);
|
6767
|
+
var FieldsInternal = ({ wrapFields = true }) => {
|
6811
6768
|
const overrides = useAppStore((s) => s.overrides);
|
6812
6769
|
const componentResolving = useAppStore((s) => {
|
6813
6770
|
var _a, _b;
|
6814
6771
|
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;
|
6815
6772
|
return (loadingCount != null ? loadingCount : 0) > 0;
|
6816
6773
|
});
|
6817
|
-
const itemSelector = useAppStore((0,
|
6774
|
+
const itemSelector = useAppStore((0, import_shallow5.useShallow)((s) => s.state.ui.itemSelector));
|
6818
6775
|
const id = useAppStore((s) => {
|
6819
6776
|
var _a;
|
6820
6777
|
return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
|
@@ -6823,42 +6780,48 @@ var Fields = ({ wrapFields = true }) => {
|
|
6823
6780
|
useRegisterFieldsSlice(appStore, id);
|
6824
6781
|
const fieldsLoading = useAppStore((s) => s.fields.loading);
|
6825
6782
|
const fieldNames = useAppStore(
|
6826
|
-
(0,
|
6783
|
+
(0, import_shallow5.useShallow)((s) => {
|
6784
|
+
if (s.fields.id === id) {
|
6785
|
+
return Object.keys(s.fields.fields);
|
6786
|
+
}
|
6787
|
+
return [];
|
6788
|
+
})
|
6827
6789
|
);
|
6828
6790
|
const isLoading = fieldsLoading || componentResolving;
|
6829
|
-
const Wrapper = (0,
|
6830
|
-
return /* @__PURE__ */ (0,
|
6791
|
+
const Wrapper = (0, import_react42.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
|
6792
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
6831
6793
|
"form",
|
6832
6794
|
{
|
6833
|
-
className:
|
6795
|
+
className: getClassName20({ wrapFields }),
|
6834
6796
|
onSubmit: (e) => {
|
6835
6797
|
e.preventDefault();
|
6836
6798
|
},
|
6837
6799
|
children: [
|
6838
|
-
/* @__PURE__ */ (0,
|
6839
|
-
isLoading && /* @__PURE__ */ (0,
|
6800
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FieldsChildMemo, { fieldName }, fieldName)) }),
|
6801
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getClassName20("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getClassName20("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Loader, { size: 16 }) }) })
|
6840
6802
|
]
|
6841
6803
|
}
|
6842
6804
|
);
|
6843
6805
|
};
|
6806
|
+
var Fields = (0, import_react42.memo)(FieldsInternal);
|
6844
6807
|
|
6845
6808
|
// components/Puck/components/Components/index.tsx
|
6846
6809
|
init_react_import();
|
6847
6810
|
|
6848
6811
|
// lib/use-component-list.tsx
|
6849
6812
|
init_react_import();
|
6850
|
-
var
|
6813
|
+
var import_react43 = require("react");
|
6851
6814
|
|
6852
6815
|
// components/ComponentList/index.tsx
|
6853
6816
|
init_react_import();
|
6854
6817
|
|
6855
6818
|
// css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
|
6856
6819
|
init_react_import();
|
6857
|
-
var
|
6820
|
+
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" };
|
6858
6821
|
|
6859
6822
|
// components/ComponentList/index.tsx
|
6860
|
-
var
|
6861
|
-
var
|
6823
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
6824
|
+
var getClassName21 = get_class_name_factory_default("ComponentList", styles_module_default16);
|
6862
6825
|
var ComponentListItem = ({
|
6863
6826
|
name,
|
6864
6827
|
label
|
@@ -6869,7 +6832,7 @@ var ComponentListItem = ({
|
|
6869
6832
|
type: name
|
6870
6833
|
}).insert
|
6871
6834
|
);
|
6872
|
-
return /* @__PURE__ */ (0,
|
6835
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
|
6873
6836
|
};
|
6874
6837
|
var ComponentList = ({
|
6875
6838
|
children,
|
@@ -6880,12 +6843,12 @@ var ComponentList = ({
|
|
6880
6843
|
const setUi = useAppStore((s) => s.setUi);
|
6881
6844
|
const componentList = useAppStore((s) => s.state.ui.componentList);
|
6882
6845
|
const { expanded = true } = componentList[id] || {};
|
6883
|
-
return /* @__PURE__ */ (0,
|
6884
|
-
title && /* @__PURE__ */ (0,
|
6846
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: getClassName21({ isExpanded: expanded }), children: [
|
6847
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
6885
6848
|
"button",
|
6886
6849
|
{
|
6887
6850
|
type: "button",
|
6888
|
-
className:
|
6851
|
+
className: getClassName21("title"),
|
6889
6852
|
onClick: () => setUi({
|
6890
6853
|
componentList: __spreadProps(__spreadValues({}, componentList), {
|
6891
6854
|
[id]: __spreadProps(__spreadValues({}, componentList[id]), {
|
@@ -6895,14 +6858,14 @@ var ComponentList = ({
|
|
6895
6858
|
}),
|
6896
6859
|
title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
|
6897
6860
|
children: [
|
6898
|
-
/* @__PURE__ */ (0,
|
6899
|
-
/* @__PURE__ */ (0,
|
6861
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: title }),
|
6862
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName21("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronDown, { size: 12 }) })
|
6900
6863
|
]
|
6901
6864
|
}
|
6902
6865
|
),
|
6903
|
-
/* @__PURE__ */ (0,
|
6866
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName21("content"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
|
6904
6867
|
var _a;
|
6905
|
-
return /* @__PURE__ */ (0,
|
6868
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
6906
6869
|
ComponentListItem,
|
6907
6870
|
{
|
6908
6871
|
label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
|
@@ -6916,12 +6879,12 @@ var ComponentList = ({
|
|
6916
6879
|
ComponentList.Item = ComponentListItem;
|
6917
6880
|
|
6918
6881
|
// lib/use-component-list.tsx
|
6919
|
-
var
|
6882
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
6920
6883
|
var useComponentList = () => {
|
6921
|
-
const [componentList, setComponentList] = (0,
|
6884
|
+
const [componentList, setComponentList] = (0, import_react43.useState)();
|
6922
6885
|
const config = useAppStore((s) => s.config);
|
6923
6886
|
const uiComponentList = useAppStore((s) => s.state.ui.componentList);
|
6924
|
-
(0,
|
6887
|
+
(0, import_react43.useEffect)(() => {
|
6925
6888
|
var _a, _b, _c;
|
6926
6889
|
if (Object.keys(uiComponentList).length > 0) {
|
6927
6890
|
const matchedComponents = [];
|
@@ -6931,7 +6894,7 @@ var useComponentList = () => {
|
|
6931
6894
|
if (category.visible === false || !category.components) {
|
6932
6895
|
return null;
|
6933
6896
|
}
|
6934
|
-
return /* @__PURE__ */ (0,
|
6897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
6935
6898
|
ComponentList,
|
6936
6899
|
{
|
6937
6900
|
id: categoryKey,
|
@@ -6940,7 +6903,7 @@ var useComponentList = () => {
|
|
6940
6903
|
var _a2;
|
6941
6904
|
matchedComponents.push(componentName);
|
6942
6905
|
const componentConf = config.components[componentName] || {};
|
6943
|
-
return /* @__PURE__ */ (0,
|
6906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
6944
6907
|
ComponentList.Item,
|
6945
6908
|
{
|
6946
6909
|
label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
|
@@ -6960,7 +6923,7 @@ var useComponentList = () => {
|
|
6960
6923
|
);
|
6961
6924
|
if (remainingComponents.length > 0 && !((_a = uiComponentList.other) == null ? void 0 : _a.components) && ((_b = uiComponentList.other) == null ? void 0 : _b.visible) !== false) {
|
6962
6925
|
_componentList.push(
|
6963
|
-
/* @__PURE__ */ (0,
|
6926
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
6964
6927
|
ComponentList,
|
6965
6928
|
{
|
6966
6929
|
id: "other",
|
@@ -6968,7 +6931,7 @@ var useComponentList = () => {
|
|
6968
6931
|
children: remainingComponents.map((componentName, i) => {
|
6969
6932
|
var _a2;
|
6970
6933
|
const componentConf = config.components[componentName] || {};
|
6971
|
-
return /* @__PURE__ */ (0,
|
6934
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
6972
6935
|
ComponentList.Item,
|
6973
6936
|
{
|
6974
6937
|
name: componentName,
|
@@ -6990,25 +6953,25 @@ var useComponentList = () => {
|
|
6990
6953
|
};
|
6991
6954
|
|
6992
6955
|
// components/Puck/components/Components/index.tsx
|
6993
|
-
var
|
6994
|
-
var
|
6956
|
+
var import_react44 = require("react");
|
6957
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
6995
6958
|
var Components = () => {
|
6996
6959
|
const overrides = useAppStore((s) => s.overrides);
|
6997
6960
|
const componentList = useComponentList();
|
6998
|
-
const Wrapper = (0,
|
6999
|
-
return /* @__PURE__ */ (0,
|
6961
|
+
const Wrapper = (0, import_react44.useMemo)(() => overrides.components || "div", [overrides]);
|
6962
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ComponentList, { id: "all" }) });
|
7000
6963
|
};
|
7001
6964
|
|
7002
6965
|
// components/Puck/components/Preview/index.tsx
|
7003
6966
|
init_react_import();
|
7004
|
-
var
|
6967
|
+
var import_react46 = require("react");
|
7005
6968
|
|
7006
6969
|
// components/AutoFrame/index.tsx
|
7007
6970
|
init_react_import();
|
7008
|
-
var
|
6971
|
+
var import_react45 = require("react");
|
7009
6972
|
var import_object_hash = __toESM(require("object-hash"));
|
7010
6973
|
var import_react_dom3 = require("react-dom");
|
7011
|
-
var
|
6974
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
7012
6975
|
var styleSelector = 'style, link[rel="stylesheet"]';
|
7013
6976
|
var collectStyles = (doc) => {
|
7014
6977
|
const collected = [];
|
@@ -7051,7 +7014,7 @@ var CopyHostStyles = ({
|
|
7051
7014
|
onStylesLoaded = () => null
|
7052
7015
|
}) => {
|
7053
7016
|
const { document: doc, window: win } = useFrame();
|
7054
|
-
(0,
|
7017
|
+
(0, import_react45.useEffect)(() => {
|
7055
7018
|
if (!win || !doc) {
|
7056
7019
|
return () => {
|
7057
7020
|
};
|
@@ -7208,10 +7171,10 @@ var CopyHostStyles = ({
|
|
7208
7171
|
observer.disconnect();
|
7209
7172
|
};
|
7210
7173
|
}, []);
|
7211
|
-
return /* @__PURE__ */ (0,
|
7174
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
|
7212
7175
|
};
|
7213
|
-
var autoFrameContext = (0,
|
7214
|
-
var useFrame = () => (0,
|
7176
|
+
var autoFrameContext = (0, import_react45.createContext)({});
|
7177
|
+
var useFrame = () => (0, import_react45.useContext)(autoFrameContext);
|
7215
7178
|
function AutoFrame(_a) {
|
7216
7179
|
var _b = _a, {
|
7217
7180
|
children,
|
@@ -7232,11 +7195,11 @@ function AutoFrame(_a) {
|
|
7232
7195
|
"onNotReady",
|
7233
7196
|
"frameRef"
|
7234
7197
|
]);
|
7235
|
-
const [loaded, setLoaded] = (0,
|
7236
|
-
const [ctx, setCtx] = (0,
|
7237
|
-
const [mountTarget, setMountTarget] = (0,
|
7238
|
-
const [stylesLoaded, setStylesLoaded] = (0,
|
7239
|
-
(0,
|
7198
|
+
const [loaded, setLoaded] = (0, import_react45.useState)(false);
|
7199
|
+
const [ctx, setCtx] = (0, import_react45.useState)({});
|
7200
|
+
const [mountTarget, setMountTarget] = (0, import_react45.useState)();
|
7201
|
+
const [stylesLoaded, setStylesLoaded] = (0, import_react45.useState)(false);
|
7202
|
+
(0, import_react45.useEffect)(() => {
|
7240
7203
|
var _a2;
|
7241
7204
|
if (frameRef.current) {
|
7242
7205
|
const doc = frameRef.current.contentDocument;
|
@@ -7255,7 +7218,7 @@ function AutoFrame(_a) {
|
|
7255
7218
|
}
|
7256
7219
|
}
|
7257
7220
|
}, [frameRef, loaded, stylesLoaded]);
|
7258
|
-
return /* @__PURE__ */ (0,
|
7221
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
7259
7222
|
"iframe",
|
7260
7223
|
__spreadProps(__spreadValues({}, props), {
|
7261
7224
|
className,
|
@@ -7265,7 +7228,7 @@ function AutoFrame(_a) {
|
|
7265
7228
|
onLoad: () => {
|
7266
7229
|
setLoaded(true);
|
7267
7230
|
},
|
7268
|
-
children: /* @__PURE__ */ (0,
|
7231
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
7269
7232
|
CopyHostStyles,
|
7270
7233
|
{
|
7271
7234
|
debug,
|
@@ -7281,14 +7244,14 @@ var AutoFrame_default = AutoFrame;
|
|
7281
7244
|
|
7282
7245
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
|
7283
7246
|
init_react_import();
|
7284
|
-
var
|
7247
|
+
var styles_module_default17 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
|
7285
7248
|
|
7286
7249
|
// components/Puck/components/Preview/index.tsx
|
7287
|
-
var
|
7288
|
-
var
|
7250
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
7251
|
+
var getClassName22 = get_class_name_factory_default("PuckPreview", styles_module_default17);
|
7289
7252
|
var useBubbleIframeEvents = (ref) => {
|
7290
7253
|
const status = useAppStore((s) => s.status);
|
7291
|
-
(0,
|
7254
|
+
(0, import_react46.useEffect)(() => {
|
7292
7255
|
if (ref.current && status === "READY") {
|
7293
7256
|
const iframe = ref.current;
|
7294
7257
|
const handlePointerMove = (event) => {
|
@@ -7326,7 +7289,7 @@ var useBubbleIframeEvents = (ref) => {
|
|
7326
7289
|
}
|
7327
7290
|
}, [status]);
|
7328
7291
|
};
|
7329
|
-
var
|
7292
|
+
var Preview2 = ({ id = "puck-preview" }) => {
|
7330
7293
|
const dispatch = useAppStore((s) => s.dispatch);
|
7331
7294
|
const root = useAppStore((s) => s.state.data.root);
|
7332
7295
|
const config = useAppStore((s) => s.config);
|
@@ -7337,22 +7300,25 @@ var Preview3 = ({ id = "puck-preview" }) => {
|
|
7337
7300
|
const renderData = useAppStore(
|
7338
7301
|
(s) => s.state.ui.previewMode === "edit" ? null : s.state.data
|
7339
7302
|
);
|
7340
|
-
const Page = (0,
|
7303
|
+
const Page = (0, import_react46.useCallback)(
|
7341
7304
|
(pageProps) => {
|
7342
7305
|
var _a, _b;
|
7343
|
-
const
|
7344
|
-
|
7306
|
+
const propsWithSlots = useSlots(
|
7307
|
+
config,
|
7308
|
+
{ type: "root", props: pageProps },
|
7309
|
+
DropZoneEditPure
|
7310
|
+
);
|
7345
7311
|
return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
|
7346
7312
|
id: "puck-root"
|
7347
|
-
}, propsWithSlots)) : /* @__PURE__ */ (0,
|
7313
|
+
}, propsWithSlots)) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: propsWithSlots.children });
|
7348
7314
|
},
|
7349
|
-
[config
|
7315
|
+
[config]
|
7350
7316
|
);
|
7351
|
-
const Frame = (0,
|
7317
|
+
const Frame = (0, import_react46.useMemo)(() => overrides.iframe, [overrides]);
|
7352
7318
|
const rootProps = root.props || root;
|
7353
|
-
const ref = (0,
|
7319
|
+
const ref = (0, import_react46.useRef)(null);
|
7354
7320
|
useBubbleIframeEvents(ref);
|
7355
|
-
const inner = !renderData ? /* @__PURE__ */ (0,
|
7321
|
+
const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
7356
7322
|
Page,
|
7357
7323
|
__spreadProps(__spreadValues({}, rootProps), {
|
7358
7324
|
puck: {
|
@@ -7362,28 +7328,28 @@ var Preview3 = ({ id = "puck-preview" }) => {
|
|
7362
7328
|
metadata
|
7363
7329
|
},
|
7364
7330
|
editMode: true,
|
7365
|
-
children: /* @__PURE__ */ (0,
|
7331
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropZonePure, { zone: rootDroppableId })
|
7366
7332
|
})
|
7367
|
-
) : /* @__PURE__ */ (0,
|
7368
|
-
(0,
|
7333
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Render, { data: renderData, config });
|
7334
|
+
(0, import_react46.useEffect)(() => {
|
7369
7335
|
if (!iframe.enabled) {
|
7370
7336
|
setStatus("READY");
|
7371
7337
|
}
|
7372
7338
|
}, [iframe.enabled]);
|
7373
|
-
return /* @__PURE__ */ (0,
|
7339
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
7374
7340
|
"div",
|
7375
7341
|
{
|
7376
|
-
className:
|
7342
|
+
className: getClassName22(),
|
7377
7343
|
id,
|
7378
7344
|
"data-puck-preview": true,
|
7379
7345
|
onClick: () => {
|
7380
7346
|
dispatch({ type: "setUi", ui: { itemSelector: null } });
|
7381
7347
|
},
|
7382
|
-
children: iframe.enabled ? /* @__PURE__ */ (0,
|
7348
|
+
children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
7383
7349
|
AutoFrame_default,
|
7384
7350
|
{
|
7385
7351
|
id: "preview-frame",
|
7386
|
-
className:
|
7352
|
+
className: getClassName22("frame"),
|
7387
7353
|
"data-rfd-iframe": true,
|
7388
7354
|
onReady: () => {
|
7389
7355
|
setStatus("READY");
|
@@ -7392,18 +7358,18 @@ var Preview3 = ({ id = "puck-preview" }) => {
|
|
7392
7358
|
setStatus("MOUNTED");
|
7393
7359
|
},
|
7394
7360
|
frameRef: ref,
|
7395
|
-
children: /* @__PURE__ */ (0,
|
7361
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
|
7396
7362
|
if (Frame) {
|
7397
|
-
return /* @__PURE__ */ (0,
|
7363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Frame, { document: document2, children: inner });
|
7398
7364
|
}
|
7399
7365
|
return inner;
|
7400
7366
|
} })
|
7401
7367
|
}
|
7402
|
-
) : /* @__PURE__ */ (0,
|
7368
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
7403
7369
|
"div",
|
7404
7370
|
{
|
7405
7371
|
id: "preview-frame",
|
7406
|
-
className:
|
7372
|
+
className: getClassName22("frame"),
|
7407
7373
|
ref,
|
7408
7374
|
"data-puck-entry": true,
|
7409
7375
|
children: inner
|
@@ -7421,7 +7387,7 @@ init_react_import();
|
|
7421
7387
|
|
7422
7388
|
// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
|
7423
7389
|
init_react_import();
|
7424
|
-
var
|
7390
|
+
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" };
|
7425
7391
|
|
7426
7392
|
// lib/scroll-into-view.ts
|
7427
7393
|
init_react_import();
|
@@ -7435,7 +7401,7 @@ var scrollIntoView = (el) => {
|
|
7435
7401
|
};
|
7436
7402
|
|
7437
7403
|
// components/LayerTree/index.tsx
|
7438
|
-
var
|
7404
|
+
var import_react47 = require("react");
|
7439
7405
|
|
7440
7406
|
// lib/on-scroll-end.ts
|
7441
7407
|
init_react_import();
|
@@ -7457,21 +7423,21 @@ var onScrollEnd = (frame, cb) => {
|
|
7457
7423
|
};
|
7458
7424
|
|
7459
7425
|
// components/LayerTree/index.tsx
|
7460
|
-
var
|
7461
|
-
var
|
7462
|
-
var
|
7463
|
-
var getClassNameLayer = get_class_name_factory_default("Layer",
|
7426
|
+
var import_shallow6 = require("zustand/react/shallow");
|
7427
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
7428
|
+
var getClassName23 = get_class_name_factory_default("LayerTree", styles_module_default18);
|
7429
|
+
var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default18);
|
7464
7430
|
var Layer = ({
|
7465
7431
|
index,
|
7466
7432
|
itemId,
|
7467
7433
|
zoneCompound
|
7468
7434
|
}) => {
|
7469
7435
|
var _a;
|
7470
|
-
const ctx = (0,
|
7436
|
+
const ctx = (0, import_react47.useContext)(dropZoneContext);
|
7471
7437
|
const config = useAppStore((s) => s.config);
|
7472
7438
|
const itemSelector = useAppStore((s) => s.state.ui.itemSelector);
|
7473
7439
|
const dispatch = useAppStore((s) => s.dispatch);
|
7474
|
-
const setItemSelector = (0,
|
7440
|
+
const setItemSelector = (0, import_react47.useCallback)(
|
7475
7441
|
(itemSelector2) => {
|
7476
7442
|
dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
|
7477
7443
|
},
|
@@ -7484,16 +7450,18 @@ var Layer = ({
|
|
7484
7450
|
const isSelected = selecedItemId === itemId || itemSelector && itemSelector.zone === rootDroppableId && !zoneCompound;
|
7485
7451
|
const nodeData = useAppStore((s) => s.state.indexes.nodes[itemId]);
|
7486
7452
|
const zonesForItem = useAppStore(
|
7487
|
-
(0,
|
7453
|
+
(0, import_shallow6.useShallow)(
|
7488
7454
|
(s) => Object.keys(s.state.indexes.zones).filter(
|
7489
7455
|
(z) => z.split(":")[0] === itemId
|
7490
7456
|
)
|
7491
7457
|
)
|
7492
7458
|
);
|
7493
7459
|
const containsZone = zonesForItem.length > 0;
|
7494
|
-
const
|
7495
|
-
|
7496
|
-
|
7460
|
+
const zoneStore = (0, import_react47.useContext)(ZoneStoreContext);
|
7461
|
+
const isHovering = useContextStore(
|
7462
|
+
ZoneStoreContext,
|
7463
|
+
(s) => s.hoveringComponent === itemId
|
7464
|
+
);
|
7497
7465
|
const childIsSelected = useAppStore((s) => {
|
7498
7466
|
var _a2, _b;
|
7499
7467
|
const selectedData = s.state.indexes.nodes[(_a2 = s.selectedItem) == null ? void 0 : _a2.props.id];
|
@@ -7504,7 +7472,7 @@ var Layer = ({
|
|
7504
7472
|
});
|
7505
7473
|
const componentConfig = config.components[nodeData.data.type];
|
7506
7474
|
const label = (_a = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _a : nodeData.data.type.toString();
|
7507
|
-
return /* @__PURE__ */ (0,
|
7475
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
7508
7476
|
"li",
|
7509
7477
|
{
|
7510
7478
|
className: getClassNameLayer({
|
@@ -7514,7 +7482,7 @@ var Layer = ({
|
|
7514
7482
|
childIsSelected
|
7515
7483
|
}),
|
7516
7484
|
children: [
|
7517
|
-
/* @__PURE__ */ (0,
|
7485
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
7518
7486
|
"button",
|
7519
7487
|
{
|
7520
7488
|
type: "button",
|
@@ -7529,7 +7497,10 @@ var Layer = ({
|
|
7529
7497
|
`[data-puck-component="${itemId}"]`
|
7530
7498
|
);
|
7531
7499
|
if (!el) {
|
7532
|
-
|
7500
|
+
setItemSelector({
|
7501
|
+
index,
|
7502
|
+
zone: zoneCompound
|
7503
|
+
});
|
7533
7504
|
return;
|
7534
7505
|
}
|
7535
7506
|
scrollIntoView(el);
|
@@ -7540,31 +7511,31 @@ var Layer = ({
|
|
7540
7511
|
});
|
7541
7512
|
});
|
7542
7513
|
},
|
7543
|
-
|
7514
|
+
onMouseEnter: (e) => {
|
7544
7515
|
e.stopPropagation();
|
7545
|
-
|
7516
|
+
zoneStore.setState({ hoveringComponent: itemId });
|
7546
7517
|
},
|
7547
|
-
|
7518
|
+
onMouseLeave: (e) => {
|
7548
7519
|
e.stopPropagation();
|
7549
|
-
|
7520
|
+
zoneStore.setState({ hoveringComponent: null });
|
7550
7521
|
},
|
7551
7522
|
children: [
|
7552
|
-
containsZone && /* @__PURE__ */ (0,
|
7523
|
+
containsZone && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
7553
7524
|
"div",
|
7554
7525
|
{
|
7555
7526
|
className: getClassNameLayer("chevron"),
|
7556
7527
|
title: isSelected ? "Collapse" : "Expand",
|
7557
|
-
children: /* @__PURE__ */ (0,
|
7528
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronDown, { size: "12" })
|
7558
7529
|
}
|
7559
7530
|
),
|
7560
|
-
/* @__PURE__ */ (0,
|
7561
|
-
/* @__PURE__ */ (0,
|
7562
|
-
/* @__PURE__ */ (0,
|
7531
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassNameLayer("title"), children: [
|
7532
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LayoutGrid, { size: "16" }) }),
|
7533
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassNameLayer("name"), children: label })
|
7563
7534
|
] })
|
7564
7535
|
]
|
7565
7536
|
}
|
7566
7537
|
) }),
|
7567
|
-
containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ (0,
|
7538
|
+
containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LayerTree, { zoneCompound: subzone }) }, subzone))
|
7568
7539
|
]
|
7569
7540
|
}
|
7570
7541
|
);
|
@@ -7575,22 +7546,22 @@ var LayerTree = ({
|
|
7575
7546
|
}) => {
|
7576
7547
|
const label = _label != null ? _label : zoneCompound.split(":")[1];
|
7577
7548
|
const contentIds = useAppStore(
|
7578
|
-
(0,
|
7549
|
+
(0, import_shallow6.useShallow)(
|
7579
7550
|
(s) => {
|
7580
7551
|
var _a, _b;
|
7581
7552
|
return zoneCompound ? (_b = (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [] : [];
|
7582
7553
|
}
|
7583
7554
|
)
|
7584
7555
|
);
|
7585
|
-
return /* @__PURE__ */ (0,
|
7586
|
-
label && /* @__PURE__ */ (0,
|
7587
|
-
/* @__PURE__ */ (0,
|
7556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
7557
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName23("zoneTitle"), children: [
|
7558
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName23("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Layers, { size: "16" }) }),
|
7588
7559
|
label
|
7589
7560
|
] }),
|
7590
|
-
/* @__PURE__ */ (0,
|
7591
|
-
contentIds.length === 0 && /* @__PURE__ */ (0,
|
7561
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("ul", { className: getClassName23(), children: [
|
7562
|
+
contentIds.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName23("helper"), children: "No items" }),
|
7592
7563
|
contentIds.map((itemId, i) => {
|
7593
|
-
return /* @__PURE__ */ (0,
|
7564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
7594
7565
|
Layer,
|
7595
7566
|
{
|
7596
7567
|
index: i,
|
@@ -7605,7 +7576,7 @@ var LayerTree = ({
|
|
7605
7576
|
};
|
7606
7577
|
|
7607
7578
|
// components/Puck/components/Outline/index.tsx
|
7608
|
-
var
|
7579
|
+
var import_react48 = require("react");
|
7609
7580
|
|
7610
7581
|
// lib/data/find-zones-for-area.ts
|
7611
7582
|
init_react_import();
|
@@ -7616,15 +7587,15 @@ var findZonesForArea = (state, area) => {
|
|
7616
7587
|
};
|
7617
7588
|
|
7618
7589
|
// components/Puck/components/Outline/index.tsx
|
7619
|
-
var
|
7620
|
-
var
|
7590
|
+
var import_shallow7 = require("zustand/react/shallow");
|
7591
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
7621
7592
|
var Outline = () => {
|
7622
7593
|
const outlineOverride = useAppStore((s) => s.overrides.outline);
|
7623
7594
|
const rootZones = useAppStore(
|
7624
|
-
(0,
|
7595
|
+
(0, import_shallow7.useShallow)((s) => findZonesForArea(s.state, "root"))
|
7625
7596
|
);
|
7626
|
-
const Wrapper = (0,
|
7627
|
-
return /* @__PURE__ */ (0,
|
7597
|
+
const Wrapper = (0, import_react48.useMemo)(() => outlineOverride || "div", [outlineOverride]);
|
7598
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
7628
7599
|
LayerTree,
|
7629
7600
|
{
|
7630
7601
|
label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
|
@@ -7757,25 +7728,25 @@ var getBox = function getBox2(el) {
|
|
7757
7728
|
};
|
7758
7729
|
|
7759
7730
|
// components/Puck/components/Canvas/index.tsx
|
7760
|
-
var
|
7731
|
+
var import_react50 = require("react");
|
7761
7732
|
|
7762
7733
|
// components/ViewportControls/index.tsx
|
7763
7734
|
init_react_import();
|
7764
|
-
var
|
7735
|
+
var import_react49 = require("react");
|
7765
7736
|
|
7766
7737
|
// css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
|
7767
7738
|
init_react_import();
|
7768
|
-
var
|
7739
|
+
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" };
|
7769
7740
|
|
7770
7741
|
// components/ViewportControls/index.tsx
|
7771
|
-
var
|
7742
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
7772
7743
|
var icons = {
|
7773
|
-
Smartphone: /* @__PURE__ */ (0,
|
7774
|
-
Tablet: /* @__PURE__ */ (0,
|
7775
|
-
Monitor: /* @__PURE__ */ (0,
|
7744
|
+
Smartphone: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Smartphone, { size: 16 }),
|
7745
|
+
Tablet: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Tablet, { size: 16 }),
|
7746
|
+
Monitor: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Monitor, { size: 16 })
|
7776
7747
|
};
|
7777
|
-
var
|
7778
|
-
var getClassNameButton = get_class_name_factory_default("ViewportButton",
|
7748
|
+
var getClassName24 = get_class_name_factory_default("ViewportControls", styles_module_default19);
|
7749
|
+
var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default19);
|
7779
7750
|
var ViewportButton = ({
|
7780
7751
|
children,
|
7781
7752
|
height = "auto",
|
@@ -7784,11 +7755,11 @@ var ViewportButton = ({
|
|
7784
7755
|
onClick
|
7785
7756
|
}) => {
|
7786
7757
|
const viewports = useAppStore((s) => s.state.ui.viewports);
|
7787
|
-
const [isActive, setIsActive] = (0,
|
7788
|
-
(0,
|
7758
|
+
const [isActive, setIsActive] = (0, import_react49.useState)(false);
|
7759
|
+
(0, import_react49.useEffect)(() => {
|
7789
7760
|
setIsActive(width === viewports.current.width);
|
7790
7761
|
}, [width, viewports.current.width]);
|
7791
|
-
return /* @__PURE__ */ (0,
|
7762
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
7792
7763
|
IconButton,
|
7793
7764
|
{
|
7794
7765
|
title,
|
@@ -7797,7 +7768,7 @@ var ViewportButton = ({
|
|
7797
7768
|
e.stopPropagation();
|
7798
7769
|
onClick({ width, height });
|
7799
7770
|
},
|
7800
|
-
children: /* @__PURE__ */ (0,
|
7771
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: getClassNameButton("inner"), children })
|
7801
7772
|
}
|
7802
7773
|
) });
|
7803
7774
|
};
|
@@ -7821,7 +7792,7 @@ var ViewportControls = ({
|
|
7821
7792
|
const defaultsContainAutoZoom = defaultZoomOptions.find(
|
7822
7793
|
(option) => option.value === autoZoom
|
7823
7794
|
);
|
7824
|
-
const zoomOptions = (0,
|
7795
|
+
const zoomOptions = (0, import_react49.useMemo)(
|
7825
7796
|
() => [
|
7826
7797
|
...defaultZoomOptions,
|
7827
7798
|
...defaultsContainAutoZoom ? [] : [
|
@@ -7833,8 +7804,8 @@ var ViewportControls = ({
|
|
7833
7804
|
].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
|
7834
7805
|
[autoZoom]
|
7835
7806
|
);
|
7836
|
-
return /* @__PURE__ */ (0,
|
7837
|
-
viewports.map((viewport, i) => /* @__PURE__ */ (0,
|
7807
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getClassName24(), children: [
|
7808
|
+
viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
7838
7809
|
ViewportButton,
|
7839
7810
|
{
|
7840
7811
|
height: viewport.height,
|
@@ -7845,8 +7816,8 @@ var ViewportControls = ({
|
|
7845
7816
|
},
|
7846
7817
|
i
|
7847
7818
|
)),
|
7848
|
-
/* @__PURE__ */ (0,
|
7849
|
-
/* @__PURE__ */ (0,
|
7819
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName24("divider") }),
|
7820
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
7850
7821
|
IconButton,
|
7851
7822
|
{
|
7852
7823
|
title: "Zoom viewport out",
|
@@ -7860,10 +7831,10 @@ var ViewportControls = ({
|
|
7860
7831
|
)].value
|
7861
7832
|
);
|
7862
7833
|
},
|
7863
|
-
children: /* @__PURE__ */ (0,
|
7834
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ZoomOut, { size: 16 })
|
7864
7835
|
}
|
7865
7836
|
),
|
7866
|
-
/* @__PURE__ */ (0,
|
7837
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
7867
7838
|
IconButton,
|
7868
7839
|
{
|
7869
7840
|
title: "Zoom viewport in",
|
@@ -7877,19 +7848,19 @@ var ViewportControls = ({
|
|
7877
7848
|
)].value
|
7878
7849
|
);
|
7879
7850
|
},
|
7880
|
-
children: /* @__PURE__ */ (0,
|
7851
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ZoomIn, { size: 16 })
|
7881
7852
|
}
|
7882
7853
|
),
|
7883
|
-
/* @__PURE__ */ (0,
|
7884
|
-
/* @__PURE__ */ (0,
|
7854
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName24("divider") }),
|
7855
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
7885
7856
|
"select",
|
7886
7857
|
{
|
7887
|
-
className:
|
7858
|
+
className: getClassName24("zoomSelect"),
|
7888
7859
|
value: zoom.toString(),
|
7889
7860
|
onChange: (e) => {
|
7890
7861
|
onZoom(parseFloat(e.currentTarget.value));
|
7891
7862
|
},
|
7892
|
-
children: zoomOptions.map((option) => /* @__PURE__ */ (0,
|
7863
|
+
children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
7893
7864
|
"option",
|
7894
7865
|
{
|
7895
7866
|
value: option.value,
|
@@ -7904,7 +7875,7 @@ var ViewportControls = ({
|
|
7904
7875
|
|
7905
7876
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
|
7906
7877
|
init_react_import();
|
7907
|
-
var
|
7878
|
+
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" };
|
7908
7879
|
|
7909
7880
|
// lib/get-zoom-config.ts
|
7910
7881
|
init_react_import();
|
@@ -7937,9 +7908,9 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
|
|
7937
7908
|
};
|
7938
7909
|
|
7939
7910
|
// components/Puck/components/Canvas/index.tsx
|
7940
|
-
var
|
7941
|
-
var
|
7942
|
-
var
|
7911
|
+
var import_shallow8 = require("zustand/react/shallow");
|
7912
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
7913
|
+
var getClassName25 = get_class_name_factory_default("PuckCanvas", styles_module_default20);
|
7943
7914
|
var ZOOM_ON_CHANGE = true;
|
7944
7915
|
var Canvas = () => {
|
7945
7916
|
const {
|
@@ -7951,7 +7922,7 @@ var Canvas = () => {
|
|
7951
7922
|
status,
|
7952
7923
|
iframe
|
7953
7924
|
} = useAppStore(
|
7954
|
-
(0,
|
7925
|
+
(0, import_shallow8.useShallow)((s) => ({
|
7955
7926
|
dispatch: s.dispatch,
|
7956
7927
|
overrides: s.overrides,
|
7957
7928
|
setUi: s.setUi,
|
@@ -7962,23 +7933,23 @@ var Canvas = () => {
|
|
7962
7933
|
}))
|
7963
7934
|
);
|
7964
7935
|
const { leftSideBarVisible, rightSideBarVisible, viewports } = useAppStore(
|
7965
|
-
(0,
|
7936
|
+
(0, import_shallow8.useShallow)((s) => ({
|
7966
7937
|
leftSideBarVisible: s.state.ui.leftSideBarVisible,
|
7967
7938
|
rightSideBarVisible: s.state.ui.rightSideBarVisible,
|
7968
7939
|
viewports: s.state.ui.viewports
|
7969
7940
|
}))
|
7970
7941
|
);
|
7971
|
-
const frameRef = (0,
|
7972
|
-
const [showTransition, setShowTransition] = (0,
|
7973
|
-
const defaultRender = (0,
|
7974
|
-
const PuckDefault = ({ children }) => /* @__PURE__ */ (0,
|
7942
|
+
const frameRef = (0, import_react50.useRef)(null);
|
7943
|
+
const [showTransition, setShowTransition] = (0, import_react50.useState)(false);
|
7944
|
+
const defaultRender = (0, import_react50.useMemo)(() => {
|
7945
|
+
const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children });
|
7975
7946
|
return PuckDefault;
|
7976
7947
|
}, []);
|
7977
|
-
const CustomPreview = (0,
|
7948
|
+
const CustomPreview = (0, import_react50.useMemo)(
|
7978
7949
|
() => overrides.preview || defaultRender,
|
7979
7950
|
[overrides]
|
7980
7951
|
);
|
7981
|
-
const getFrameDimensions = (0,
|
7952
|
+
const getFrameDimensions = (0, import_react50.useCallback)(() => {
|
7982
7953
|
if (frameRef.current) {
|
7983
7954
|
const frame = frameRef.current;
|
7984
7955
|
const box = getBox(frame);
|
@@ -7986,7 +7957,7 @@ var Canvas = () => {
|
|
7986
7957
|
}
|
7987
7958
|
return { width: 0, height: 0 };
|
7988
7959
|
}, [frameRef]);
|
7989
|
-
const resetAutoZoom = (0,
|
7960
|
+
const resetAutoZoom = (0, import_react50.useCallback)(
|
7990
7961
|
(newViewports = viewports) => {
|
7991
7962
|
if (frameRef.current) {
|
7992
7963
|
setZoomConfig(
|
@@ -8000,11 +7971,11 @@ var Canvas = () => {
|
|
8000
7971
|
},
|
8001
7972
|
[frameRef, zoomConfig, viewports]
|
8002
7973
|
);
|
8003
|
-
(0,
|
7974
|
+
(0, import_react50.useEffect)(() => {
|
8004
7975
|
setShowTransition(false);
|
8005
7976
|
resetAutoZoom(viewports);
|
8006
7977
|
}, [frameRef, leftSideBarVisible, rightSideBarVisible]);
|
8007
|
-
(0,
|
7978
|
+
(0, import_react50.useEffect)(() => {
|
8008
7979
|
const { height: frameHeight } = getFrameDimensions();
|
8009
7980
|
if (viewports.current.height === "auto") {
|
8010
7981
|
setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
|
@@ -8012,13 +7983,13 @@ var Canvas = () => {
|
|
8012
7983
|
}));
|
8013
7984
|
}
|
8014
7985
|
}, [zoomConfig.zoom]);
|
8015
|
-
(0,
|
7986
|
+
(0, import_react50.useEffect)(() => {
|
8016
7987
|
if (ZOOM_ON_CHANGE) {
|
8017
7988
|
setShowTransition(true);
|
8018
7989
|
resetAutoZoom(viewports);
|
8019
7990
|
}
|
8020
7991
|
}, [viewports.current.width]);
|
8021
|
-
(0,
|
7992
|
+
(0, import_react50.useEffect)(() => {
|
8022
7993
|
const cb = () => {
|
8023
7994
|
setShowTransition(false);
|
8024
7995
|
resetAutoZoom();
|
@@ -8028,16 +7999,16 @@ var Canvas = () => {
|
|
8028
7999
|
window.removeEventListener("resize", cb);
|
8029
8000
|
};
|
8030
8001
|
}, []);
|
8031
|
-
const [showLoader, setShowLoader] = (0,
|
8032
|
-
(0,
|
8002
|
+
const [showLoader, setShowLoader] = (0, import_react50.useState)(false);
|
8003
|
+
(0, import_react50.useEffect)(() => {
|
8033
8004
|
setTimeout(() => {
|
8034
8005
|
setShowLoader(true);
|
8035
8006
|
}, 500);
|
8036
8007
|
}, []);
|
8037
|
-
return /* @__PURE__ */ (0,
|
8008
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
8038
8009
|
"div",
|
8039
8010
|
{
|
8040
|
-
className:
|
8011
|
+
className: getClassName25({
|
8041
8012
|
ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
|
8042
8013
|
showLoader
|
8043
8014
|
}),
|
@@ -8047,7 +8018,7 @@ var Canvas = () => {
|
|
8047
8018
|
recordHistory: true
|
8048
8019
|
}),
|
8049
8020
|
children: [
|
8050
|
-
viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0,
|
8021
|
+
viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getClassName25("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
8051
8022
|
ViewportControls,
|
8052
8023
|
{
|
8053
8024
|
autoZoom: zoomConfig.autoZoom,
|
@@ -8073,11 +8044,11 @@ var Canvas = () => {
|
|
8073
8044
|
}
|
8074
8045
|
}
|
8075
8046
|
) }),
|
8076
|
-
/* @__PURE__ */ (0,
|
8077
|
-
/* @__PURE__ */ (0,
|
8047
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getClassName25("inner"), ref: frameRef, children: [
|
8048
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
8078
8049
|
"div",
|
8079
8050
|
{
|
8080
|
-
className:
|
8051
|
+
className: getClassName25("root"),
|
8081
8052
|
style: {
|
8082
8053
|
width: iframe.enabled ? viewports.current.width : "100%",
|
8083
8054
|
height: zoomConfig.rootHeight,
|
@@ -8095,10 +8066,10 @@ var Canvas = () => {
|
|
8095
8066
|
})
|
8096
8067
|
);
|
8097
8068
|
},
|
8098
|
-
children: /* @__PURE__ */ (0,
|
8069
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Preview2, {}) })
|
8099
8070
|
}
|
8100
8071
|
),
|
8101
|
-
/* @__PURE__ */ (0,
|
8072
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getClassName25("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Loader, { size: 24 }) })
|
8102
8073
|
] })
|
8103
8074
|
]
|
8104
8075
|
}
|
@@ -8107,7 +8078,7 @@ var Canvas = () => {
|
|
8107
8078
|
|
8108
8079
|
// lib/use-loaded-overrides.ts
|
8109
8080
|
init_react_import();
|
8110
|
-
var
|
8081
|
+
var import_react51 = require("react");
|
8111
8082
|
|
8112
8083
|
// lib/load-overrides.ts
|
8113
8084
|
init_react_import();
|
@@ -8146,26 +8117,26 @@ var useLoadedOverrides = ({
|
|
8146
8117
|
overrides,
|
8147
8118
|
plugins
|
8148
8119
|
}) => {
|
8149
|
-
return (0,
|
8120
|
+
return (0, import_react51.useMemo)(() => {
|
8150
8121
|
return loadOverrides({ overrides, plugins });
|
8151
8122
|
}, [plugins, overrides]);
|
8152
8123
|
};
|
8153
8124
|
|
8154
8125
|
// components/DefaultOverride/index.tsx
|
8155
8126
|
init_react_import();
|
8156
|
-
var
|
8157
|
-
var DefaultOverride = ({ children }) => /* @__PURE__ */ (0,
|
8127
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
8128
|
+
var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children });
|
8158
8129
|
|
8159
8130
|
// lib/use-inject-css.ts
|
8160
8131
|
init_react_import();
|
8161
|
-
var
|
8132
|
+
var import_react52 = require("react");
|
8162
8133
|
var styles = ``;
|
8163
8134
|
var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
|
8164
|
-
const [el, setEl] = (0,
|
8165
|
-
(0,
|
8135
|
+
const [el, setEl] = (0, import_react52.useState)();
|
8136
|
+
(0, import_react52.useEffect)(() => {
|
8166
8137
|
setEl(document.createElement("style"));
|
8167
8138
|
}, []);
|
8168
|
-
(0,
|
8139
|
+
(0, import_react52.useEffect)(() => {
|
8169
8140
|
var _a;
|
8170
8141
|
if (!el || typeof window === "undefined") {
|
8171
8142
|
return;
|
@@ -8185,10 +8156,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
|
|
8185
8156
|
|
8186
8157
|
// lib/use-preview-mode-hotkeys.ts
|
8187
8158
|
init_react_import();
|
8188
|
-
var
|
8159
|
+
var import_react53 = require("react");
|
8189
8160
|
var usePreviewModeHotkeys = () => {
|
8190
8161
|
const appStore = useAppStoreApi();
|
8191
|
-
const toggleInteractive = (0,
|
8162
|
+
const toggleInteractive = (0, import_react53.useCallback)(() => {
|
8192
8163
|
const dispatch = appStore.getState().dispatch;
|
8193
8164
|
dispatch({
|
8194
8165
|
type: "setUi",
|
@@ -8203,7 +8174,7 @@ var usePreviewModeHotkeys = () => {
|
|
8203
8174
|
|
8204
8175
|
// lib/use-puck.ts
|
8205
8176
|
init_react_import();
|
8206
|
-
var
|
8177
|
+
var import_react54 = require("react");
|
8207
8178
|
var import_zustand6 = require("zustand");
|
8208
8179
|
var generateUsePuck = (store) => {
|
8209
8180
|
const history = {
|
@@ -8237,7 +8208,7 @@ var generateUsePuck = (store) => {
|
|
8237
8208
|
const get = () => storeData;
|
8238
8209
|
return __spreadProps(__spreadValues({}, storeData), { get });
|
8239
8210
|
};
|
8240
|
-
var UsePuckStoreContext = (0,
|
8211
|
+
var UsePuckStoreContext = (0, import_react54.createContext)(
|
8241
8212
|
null
|
8242
8213
|
);
|
8243
8214
|
var convertToPickedStore = (store) => {
|
@@ -8251,12 +8222,12 @@ var convertToPickedStore = (store) => {
|
|
8251
8222
|
};
|
8252
8223
|
};
|
8253
8224
|
var useRegisterUsePuckStore = (appStore) => {
|
8254
|
-
const [usePuckStore] = (0,
|
8225
|
+
const [usePuckStore] = (0, import_react54.useState)(
|
8255
8226
|
() => (0, import_zustand6.createStore)(
|
8256
8227
|
() => generateUsePuck(convertToPickedStore(appStore.getState()))
|
8257
8228
|
)
|
8258
8229
|
);
|
8259
|
-
(0,
|
8230
|
+
(0, import_react54.useEffect)(() => {
|
8260
8231
|
return appStore.subscribe(
|
8261
8232
|
(store) => convertToPickedStore(store),
|
8262
8233
|
(pickedStore) => {
|
@@ -8268,7 +8239,7 @@ var useRegisterUsePuckStore = (appStore) => {
|
|
8268
8239
|
};
|
8269
8240
|
function createUsePuck() {
|
8270
8241
|
return function usePuck2(selector) {
|
8271
|
-
const usePuckApi = (0,
|
8242
|
+
const usePuckApi = (0, import_react54.useContext)(UsePuckStoreContext);
|
8272
8243
|
if (!usePuckApi) {
|
8273
8244
|
throw new Error("usePuck must be used inside <Puck>.");
|
8274
8245
|
}
|
@@ -8280,18 +8251,241 @@ function createUsePuck() {
|
|
8280
8251
|
};
|
8281
8252
|
}
|
8282
8253
|
function usePuck() {
|
8283
|
-
(0,
|
8254
|
+
(0, import_react54.useEffect)(() => {
|
8284
8255
|
console.warn(
|
8285
8256
|
"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."
|
8286
8257
|
);
|
8287
8258
|
}, []);
|
8288
8259
|
return createUsePuck()((s) => s);
|
8289
8260
|
}
|
8261
|
+
function useGetPuck() {
|
8262
|
+
const usePuckApi = (0, import_react54.useContext)(UsePuckStoreContext);
|
8263
|
+
if (!usePuckApi) {
|
8264
|
+
throw new Error("usePuckGet must be used inside <Puck>.");
|
8265
|
+
}
|
8266
|
+
return usePuckApi.getState;
|
8267
|
+
}
|
8290
8268
|
|
8291
8269
|
// components/Puck/index.tsx
|
8270
|
+
var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"));
|
8271
|
+
|
8272
|
+
// components/Puck/components/Header/index.tsx
|
8273
|
+
init_react_import();
|
8274
|
+
var import_react55 = require("react");
|
8275
|
+
|
8276
|
+
// components/MenuBar/index.tsx
|
8277
|
+
init_react_import();
|
8278
|
+
|
8279
|
+
// css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
|
8280
|
+
init_react_import();
|
8281
|
+
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" };
|
8282
|
+
|
8283
|
+
// components/MenuBar/index.tsx
|
8284
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
8285
|
+
var getClassName26 = get_class_name_factory_default("MenuBar", styles_module_default21);
|
8286
|
+
function MenuBar({
|
8287
|
+
menuOpen = false,
|
8288
|
+
renderHeaderActions,
|
8289
|
+
setMenuOpen
|
8290
|
+
}) {
|
8291
|
+
const back = useAppStore((s) => s.history.back);
|
8292
|
+
const forward = useAppStore((s) => s.history.forward);
|
8293
|
+
const hasFuture = useAppStore((s) => s.history.hasFuture());
|
8294
|
+
const hasPast = useAppStore((s) => s.history.hasPast());
|
8295
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
8296
|
+
"div",
|
8297
|
+
{
|
8298
|
+
className: getClassName26({ menuOpen }),
|
8299
|
+
onClick: (event) => {
|
8300
|
+
var _a;
|
8301
|
+
const element = event.target;
|
8302
|
+
if (window.matchMedia("(min-width: 638px)").matches) {
|
8303
|
+
return;
|
8304
|
+
}
|
8305
|
+
if (element.tagName === "A" && ((_a = element.getAttribute("href")) == null ? void 0 : _a.startsWith("#"))) {
|
8306
|
+
setMenuOpen(false);
|
8307
|
+
}
|
8308
|
+
},
|
8309
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: getClassName26("inner"), children: [
|
8310
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: getClassName26("history"), children: [
|
8311
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Undo2, { size: 21 }) }),
|
8312
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Redo2, { size: 21 }) })
|
8313
|
+
] }),
|
8314
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: renderHeaderActions && renderHeaderActions() })
|
8315
|
+
] })
|
8316
|
+
}
|
8317
|
+
);
|
8318
|
+
}
|
8319
|
+
|
8320
|
+
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css#css-module
|
8321
|
+
init_react_import();
|
8322
|
+
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" };
|
8323
|
+
|
8324
|
+
// components/Puck/components/Header/index.tsx
|
8292
8325
|
var import_jsx_runtime41 = require("react/jsx-runtime");
|
8293
|
-
var getClassName27 = get_class_name_factory_default("
|
8294
|
-
var
|
8326
|
+
var getClassName27 = get_class_name_factory_default("PuckHeader", styles_module_default22);
|
8327
|
+
var HeaderInner = () => {
|
8328
|
+
const {
|
8329
|
+
onPublish,
|
8330
|
+
renderHeader,
|
8331
|
+
renderHeaderActions,
|
8332
|
+
headerTitle,
|
8333
|
+
headerPath,
|
8334
|
+
iframe: _iframe
|
8335
|
+
} = usePropsContext();
|
8336
|
+
const dispatch = useAppStore((s) => s.dispatch);
|
8337
|
+
const appStore = useAppStoreApi();
|
8338
|
+
const defaultHeaderRender = (0, import_react55.useMemo)(() => {
|
8339
|
+
if (renderHeader) {
|
8340
|
+
console.warn(
|
8341
|
+
"`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
|
8342
|
+
);
|
8343
|
+
const RenderHeader = (_a) => {
|
8344
|
+
var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
|
8345
|
+
const Comp = renderHeader;
|
8346
|
+
const appState = useAppStore((s) => s.state);
|
8347
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
|
8348
|
+
};
|
8349
|
+
return RenderHeader;
|
8350
|
+
}
|
8351
|
+
return DefaultOverride;
|
8352
|
+
}, [renderHeader]);
|
8353
|
+
const defaultHeaderActionsRender = (0, import_react55.useMemo)(() => {
|
8354
|
+
if (renderHeaderActions) {
|
8355
|
+
console.warn(
|
8356
|
+
"`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
|
8357
|
+
);
|
8358
|
+
const RenderHeader = (props) => {
|
8359
|
+
const Comp = renderHeaderActions;
|
8360
|
+
const appState = useAppStore((s) => s.state);
|
8361
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
|
8362
|
+
};
|
8363
|
+
return RenderHeader;
|
8364
|
+
}
|
8365
|
+
return DefaultOverride;
|
8366
|
+
}, [renderHeader]);
|
8367
|
+
const CustomHeader = useAppStore(
|
8368
|
+
(s) => s.overrides.header || defaultHeaderRender
|
8369
|
+
);
|
8370
|
+
const CustomHeaderActions = useAppStore(
|
8371
|
+
(s) => s.overrides.headerActions || defaultHeaderActionsRender
|
8372
|
+
);
|
8373
|
+
const [menuOpen, setMenuOpen] = (0, import_react55.useState)(false);
|
8374
|
+
const rootTitle = useAppStore((s) => {
|
8375
|
+
var _a, _b;
|
8376
|
+
const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
|
8377
|
+
return (_b = rootData.props.title) != null ? _b : "";
|
8378
|
+
});
|
8379
|
+
const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
|
8380
|
+
const rightSideBarVisible = useAppStore(
|
8381
|
+
(s) => s.state.ui.rightSideBarVisible
|
8382
|
+
);
|
8383
|
+
const toggleSidebars = (0, import_react55.useCallback)(
|
8384
|
+
(sidebar) => {
|
8385
|
+
const widerViewport = window.matchMedia("(min-width: 638px)").matches;
|
8386
|
+
const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
|
8387
|
+
const oppositeSideBar = sidebar === "left" ? "rightSideBarVisible" : "leftSideBarVisible";
|
8388
|
+
dispatch({
|
8389
|
+
type: "setUi",
|
8390
|
+
ui: __spreadValues({
|
8391
|
+
[`${sidebar}SideBarVisible`]: !sideBarVisible
|
8392
|
+
}, !widerViewport ? { [oppositeSideBar]: false } : {})
|
8393
|
+
});
|
8394
|
+
},
|
8395
|
+
[dispatch, leftSideBarVisible, rightSideBarVisible]
|
8396
|
+
);
|
8397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8398
|
+
CustomHeader,
|
8399
|
+
{
|
8400
|
+
actions: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8401
|
+
Button,
|
8402
|
+
{
|
8403
|
+
onClick: () => {
|
8404
|
+
const data = appStore.getState().state.data;
|
8405
|
+
onPublish && onPublish(data);
|
8406
|
+
},
|
8407
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Globe, { size: "14px" }),
|
8408
|
+
children: "Publish"
|
8409
|
+
}
|
8410
|
+
) }) }),
|
8411
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8412
|
+
"header",
|
8413
|
+
{
|
8414
|
+
className: getClassName27({ leftSideBarVisible, rightSideBarVisible }),
|
8415
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getClassName27("inner"), children: [
|
8416
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getClassName27("toggle"), children: [
|
8417
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName27("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8418
|
+
IconButton,
|
8419
|
+
{
|
8420
|
+
onClick: () => {
|
8421
|
+
toggleSidebars("left");
|
8422
|
+
},
|
8423
|
+
title: "Toggle left sidebar",
|
8424
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelLeft, { focusable: "false" })
|
8425
|
+
}
|
8426
|
+
) }),
|
8427
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName27("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8428
|
+
IconButton,
|
8429
|
+
{
|
8430
|
+
onClick: () => {
|
8431
|
+
toggleSidebars("right");
|
8432
|
+
},
|
8433
|
+
title: "Toggle right sidebar",
|
8434
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelRight, { focusable: "false" })
|
8435
|
+
}
|
8436
|
+
) })
|
8437
|
+
] }),
|
8438
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName27("title"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Heading, { rank: "2", size: "xs", children: [
|
8439
|
+
headerTitle || rootTitle || "Page",
|
8440
|
+
headerPath && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
|
8441
|
+
" ",
|
8442
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("code", { className: getClassName27("path"), children: headerPath })
|
8443
|
+
] })
|
8444
|
+
] }) }),
|
8445
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getClassName27("tools"), children: [
|
8446
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getClassName27("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8447
|
+
IconButton,
|
8448
|
+
{
|
8449
|
+
onClick: () => {
|
8450
|
+
return setMenuOpen(!menuOpen);
|
8451
|
+
},
|
8452
|
+
title: "Toggle menu bar",
|
8453
|
+
children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronDown, { focusable: "false" })
|
8454
|
+
}
|
8455
|
+
) }),
|
8456
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8457
|
+
MenuBar,
|
8458
|
+
{
|
8459
|
+
dispatch,
|
8460
|
+
onPublish,
|
8461
|
+
menuOpen,
|
8462
|
+
renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8463
|
+
Button,
|
8464
|
+
{
|
8465
|
+
onClick: () => {
|
8466
|
+
const data = appStore.getState().state.data;
|
8467
|
+
onPublish && onPublish(data);
|
8468
|
+
},
|
8469
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Globe, { size: "14px" }),
|
8470
|
+
children: "Publish"
|
8471
|
+
}
|
8472
|
+
) }),
|
8473
|
+
setMenuOpen
|
8474
|
+
}
|
8475
|
+
)
|
8476
|
+
] })
|
8477
|
+
] })
|
8478
|
+
}
|
8479
|
+
)
|
8480
|
+
}
|
8481
|
+
);
|
8482
|
+
};
|
8483
|
+
var Header = (0, import_react55.memo)(HeaderInner);
|
8484
|
+
|
8485
|
+
// components/Puck/index.tsx
|
8486
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
8487
|
+
var getClassName28 = get_class_name_factory_default("Puck", styles_module_default14);
|
8488
|
+
var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default14);
|
8295
8489
|
var FieldSideBar = () => {
|
8296
8490
|
const title = useAppStore(
|
8297
8491
|
(s) => {
|
@@ -8299,13 +8493,13 @@ var FieldSideBar = () => {
|
|
8299
8493
|
return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : "Page";
|
8300
8494
|
}
|
8301
8495
|
);
|
8302
|
-
return /* @__PURE__ */ (0,
|
8496
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Fields, {}) });
|
8303
8497
|
};
|
8304
|
-
var propsContext = (0,
|
8498
|
+
var propsContext = (0, import_react56.createContext)({});
|
8305
8499
|
function PropsProvider(props) {
|
8306
|
-
return /* @__PURE__ */ (0,
|
8500
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(propsContext.Provider, { value: props, children: props.children });
|
8307
8501
|
}
|
8308
|
-
var usePropsContext = () => (0,
|
8502
|
+
var usePropsContext = () => (0, import_react56.useContext)(propsContext);
|
8309
8503
|
function PuckProvider({ children }) {
|
8310
8504
|
const {
|
8311
8505
|
config,
|
@@ -8321,11 +8515,14 @@ function PuckProvider({ children }) {
|
|
8321
8515
|
metadata,
|
8322
8516
|
onAction
|
8323
8517
|
} = usePropsContext();
|
8324
|
-
const iframe =
|
8325
|
-
|
8326
|
-
|
8327
|
-
|
8328
|
-
|
8518
|
+
const iframe = (0, import_react56.useMemo)(
|
8519
|
+
() => __spreadValues({
|
8520
|
+
enabled: true,
|
8521
|
+
waitForStyles: true
|
8522
|
+
}, _iframe),
|
8523
|
+
[_iframe]
|
8524
|
+
);
|
8525
|
+
const [generatedAppState] = (0, import_react56.useState)(() => {
|
8329
8526
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
8330
8527
|
const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
|
8331
8528
|
let clientUiState = {};
|
@@ -8385,7 +8582,7 @@ function PuckProvider({ children }) {
|
|
8385
8582
|
return walkAppState(newAppState, config);
|
8386
8583
|
});
|
8387
8584
|
const { appendData = true } = _initialHistory || {};
|
8388
|
-
const [blendedHistories] = (0,
|
8585
|
+
const [blendedHistories] = (0, import_react56.useState)(
|
8389
8586
|
[
|
8390
8587
|
...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
|
8391
8588
|
...appendData ? [{ state: generatedAppState }] : []
|
@@ -8405,7 +8602,7 @@ function PuckProvider({ children }) {
|
|
8405
8602
|
overrides,
|
8406
8603
|
plugins
|
8407
8604
|
});
|
8408
|
-
const generateAppStore = (0,
|
8605
|
+
const generateAppStore = (0, import_react56.useCallback)(
|
8409
8606
|
(state) => {
|
8410
8607
|
return {
|
8411
8608
|
state,
|
@@ -8429,10 +8626,15 @@ function PuckProvider({ children }) {
|
|
8429
8626
|
metadata
|
8430
8627
|
]
|
8431
8628
|
);
|
8432
|
-
const [appStore] = (0,
|
8629
|
+
const [appStore] = (0, import_react56.useState)(
|
8433
8630
|
() => createAppStore(generateAppStore(initialAppState))
|
8434
8631
|
);
|
8435
|
-
(0,
|
8632
|
+
(0, import_react56.useEffect)(() => {
|
8633
|
+
if (process.env.NODE_ENV !== "production") {
|
8634
|
+
window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
|
8635
|
+
}
|
8636
|
+
}, [appStore]);
|
8637
|
+
(0, import_react56.useEffect)(() => {
|
8436
8638
|
const state = appStore.getState().state;
|
8437
8639
|
appStore.setState(__spreadValues({}, generateAppStore(state)));
|
8438
8640
|
}, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
|
@@ -8441,66 +8643,47 @@ function PuckProvider({ children }) {
|
|
8441
8643
|
index: initialHistoryIndex,
|
8442
8644
|
initialAppState
|
8443
8645
|
});
|
8444
|
-
(0,
|
8445
|
-
|
8446
|
-
|
8447
|
-
|
8646
|
+
const previousData = (0, import_react56.useRef)(null);
|
8647
|
+
(0, import_react56.useEffect)(() => {
|
8648
|
+
appStore.subscribe(
|
8649
|
+
(s) => s.state.data,
|
8650
|
+
(data) => {
|
8651
|
+
if (onChange) {
|
8652
|
+
if ((0, import_fast_deep_equal3.default)(data, previousData.current)) return;
|
8653
|
+
onChange(data);
|
8654
|
+
previousData.current = data;
|
8655
|
+
}
|
8656
|
+
}
|
8657
|
+
);
|
8448
8658
|
}, []);
|
8449
8659
|
useRegisterPermissionsSlice(appStore, permissions);
|
8450
8660
|
const uPuckStore = useRegisterUsePuckStore(appStore);
|
8451
|
-
(0,
|
8661
|
+
(0, import_react56.useEffect)(() => {
|
8452
8662
|
const { resolveAndCommitData } = appStore.getState();
|
8453
8663
|
resolveAndCommitData();
|
8454
8664
|
}, []);
|
8455
|
-
return /* @__PURE__ */ (0,
|
8665
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
|
8456
8666
|
}
|
8457
8667
|
function PuckLayout({ children }) {
|
8458
8668
|
const {
|
8459
|
-
onChange,
|
8460
|
-
onPublish,
|
8461
|
-
renderHeader,
|
8462
|
-
renderHeaderActions,
|
8463
|
-
headerTitle,
|
8464
|
-
headerPath,
|
8465
8669
|
iframe: _iframe,
|
8466
8670
|
dnd,
|
8467
8671
|
initialHistory: _initialHistory
|
8468
8672
|
} = usePropsContext();
|
8469
|
-
const iframe =
|
8470
|
-
|
8471
|
-
|
8472
|
-
|
8673
|
+
const iframe = (0, import_react56.useMemo)(
|
8674
|
+
() => __spreadValues({
|
8675
|
+
enabled: true,
|
8676
|
+
waitForStyles: true
|
8677
|
+
}, _iframe),
|
8678
|
+
[_iframe]
|
8679
|
+
);
|
8473
8680
|
useInjectGlobalCss(iframe.enabled);
|
8474
8681
|
const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
|
8475
8682
|
const rightSideBarVisible = useAppStore(
|
8476
8683
|
(s) => s.state.ui.rightSideBarVisible
|
8477
8684
|
);
|
8478
|
-
const [menuOpen, setMenuOpen] = (0, import_react52.useState)(false);
|
8479
|
-
const appStore = useAppStoreApi();
|
8480
|
-
(0, import_react52.useEffect)(() => {
|
8481
|
-
return appStore.subscribe((s) => {
|
8482
|
-
if (onChange) onChange(s.state.data);
|
8483
|
-
});
|
8484
|
-
}, [appStore]);
|
8485
|
-
const rootProps = useAppStore(
|
8486
|
-
(s) => s.state.data.root.props || s.state.data.root.props
|
8487
|
-
);
|
8488
8685
|
const dispatch = useAppStore((s) => s.dispatch);
|
8489
|
-
|
8490
|
-
(sidebar) => {
|
8491
|
-
const widerViewport = window.matchMedia("(min-width: 638px)").matches;
|
8492
|
-
const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
|
8493
|
-
const oppositeSideBar = sidebar === "left" ? "rightSideBarVisible" : "leftSideBarVisible";
|
8494
|
-
dispatch({
|
8495
|
-
type: "setUi",
|
8496
|
-
ui: __spreadValues({
|
8497
|
-
[`${sidebar}SideBarVisible`]: !sideBarVisible
|
8498
|
-
}, !widerViewport ? { [oppositeSideBar]: false } : {})
|
8499
|
-
});
|
8500
|
-
},
|
8501
|
-
[dispatch, leftSideBarVisible, rightSideBarVisible]
|
8502
|
-
);
|
8503
|
-
(0, import_react52.useEffect)(() => {
|
8686
|
+
(0, import_react56.useEffect)(() => {
|
8504
8687
|
if (!window.matchMedia("(min-width: 638px)").matches) {
|
8505
8688
|
dispatch({
|
8506
8689
|
type: "setUi",
|
@@ -8523,55 +8706,18 @@ function PuckLayout({ children }) {
|
|
8523
8706
|
window.removeEventListener("resize", handleResize);
|
8524
8707
|
};
|
8525
8708
|
}, []);
|
8526
|
-
const defaultHeaderRender = (0, import_react52.useMemo)(() => {
|
8527
|
-
if (renderHeader) {
|
8528
|
-
console.warn(
|
8529
|
-
"`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
|
8530
|
-
);
|
8531
|
-
const RenderHeader = (_a) => {
|
8532
|
-
var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
|
8533
|
-
const Comp = renderHeader;
|
8534
|
-
const appState = useAppStore((s) => s.state);
|
8535
|
-
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
|
8536
|
-
};
|
8537
|
-
return RenderHeader;
|
8538
|
-
}
|
8539
|
-
return DefaultOverride;
|
8540
|
-
}, [renderHeader]);
|
8541
|
-
const defaultHeaderActionsRender = (0, import_react52.useMemo)(() => {
|
8542
|
-
if (renderHeaderActions) {
|
8543
|
-
console.warn(
|
8544
|
-
"`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
|
8545
|
-
);
|
8546
|
-
const RenderHeader = (props) => {
|
8547
|
-
const Comp = renderHeaderActions;
|
8548
|
-
const appState = useAppStore((s) => s.state);
|
8549
|
-
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
|
8550
|
-
};
|
8551
|
-
return RenderHeader;
|
8552
|
-
}
|
8553
|
-
return DefaultOverride;
|
8554
|
-
}, [renderHeader]);
|
8555
8709
|
const overrides = useAppStore((s) => s.overrides);
|
8556
|
-
const CustomPuck = (0,
|
8710
|
+
const CustomPuck = (0, import_react56.useMemo)(
|
8557
8711
|
() => overrides.puck || DefaultOverride,
|
8558
8712
|
[overrides]
|
8559
8713
|
);
|
8560
|
-
const
|
8561
|
-
|
8562
|
-
[overrides]
|
8563
|
-
);
|
8564
|
-
const CustomHeaderActions = (0, import_react52.useMemo)(
|
8565
|
-
() => overrides.headerActions || defaultHeaderActionsRender,
|
8566
|
-
[overrides]
|
8567
|
-
);
|
8568
|
-
const [mounted, setMounted] = (0, import_react52.useState)(false);
|
8569
|
-
(0, import_react52.useEffect)(() => {
|
8714
|
+
const [mounted, setMounted] = (0, import_react56.useState)(false);
|
8715
|
+
(0, import_react56.useEffect)(() => {
|
8570
8716
|
setMounted(true);
|
8571
8717
|
}, []);
|
8572
8718
|
const ready = useAppStore((s) => s.status === "READY");
|
8573
8719
|
useMonitorHotkeys();
|
8574
|
-
(0,
|
8720
|
+
(0, import_react56.useEffect)(() => {
|
8575
8721
|
if (ready && iframe.enabled) {
|
8576
8722
|
const frameDoc = getFrame();
|
8577
8723
|
if (frameDoc) {
|
@@ -8580,133 +8726,36 @@ function PuckLayout({ children }) {
|
|
8580
8726
|
}
|
8581
8727
|
}, [ready, iframe.enabled]);
|
8582
8728
|
usePreviewModeHotkeys();
|
8583
|
-
return /* @__PURE__ */ (0,
|
8584
|
-
/* @__PURE__ */ (0,
|
8729
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: `Puck ${getClassName28()}`, children: [
|
8730
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
8585
8731
|
"div",
|
8586
8732
|
{
|
8587
8733
|
className: getLayoutClassName({
|
8588
8734
|
leftSideBarVisible,
|
8589
|
-
menuOpen,
|
8590
8735
|
mounted,
|
8591
8736
|
rightSideBarVisible
|
8592
8737
|
}),
|
8593
|
-
children: /* @__PURE__ */ (0,
|
8594
|
-
/* @__PURE__ */ (0,
|
8595
|
-
|
8596
|
-
{
|
8597
|
-
|
8598
|
-
Button,
|
8599
|
-
{
|
8600
|
-
onClick: () => {
|
8601
|
-
const data = appStore.getState().state.data;
|
8602
|
-
onPublish && onPublish(data);
|
8603
|
-
},
|
8604
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Globe, { size: "14px" }),
|
8605
|
-
children: "Publish"
|
8606
|
-
}
|
8607
|
-
) }) }),
|
8608
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getLayoutClassName("headerInner"), children: [
|
8609
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getLayoutClassName("headerToggle"), children: [
|
8610
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8611
|
-
"div",
|
8612
|
-
{
|
8613
|
-
className: getLayoutClassName("leftSideBarToggle"),
|
8614
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8615
|
-
IconButton,
|
8616
|
-
{
|
8617
|
-
onClick: () => {
|
8618
|
-
toggleSidebars("left");
|
8619
|
-
},
|
8620
|
-
title: "Toggle left sidebar",
|
8621
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelLeft, { focusable: "false" })
|
8622
|
-
}
|
8623
|
-
)
|
8624
|
-
}
|
8625
|
-
),
|
8626
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8627
|
-
"div",
|
8628
|
-
{
|
8629
|
-
className: getLayoutClassName("rightSideBarToggle"),
|
8630
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8631
|
-
IconButton,
|
8632
|
-
{
|
8633
|
-
onClick: () => {
|
8634
|
-
toggleSidebars("right");
|
8635
|
-
},
|
8636
|
-
title: "Toggle right sidebar",
|
8637
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelRight, { focusable: "false" })
|
8638
|
-
}
|
8639
|
-
)
|
8640
|
-
}
|
8641
|
-
)
|
8642
|
-
] }),
|
8643
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Heading, { rank: "2", size: "xs", children: [
|
8644
|
-
headerTitle || (rootProps == null ? void 0 : rootProps.title) || "Page",
|
8645
|
-
headerPath && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
|
8646
|
-
" ",
|
8647
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8648
|
-
"code",
|
8649
|
-
{
|
8650
|
-
className: getLayoutClassName("headerPath"),
|
8651
|
-
children: headerPath
|
8652
|
-
}
|
8653
|
-
)
|
8654
|
-
] })
|
8655
|
-
] }) }),
|
8656
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getLayoutClassName("headerTools"), children: [
|
8657
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8658
|
-
IconButton,
|
8659
|
-
{
|
8660
|
-
onClick: () => {
|
8661
|
-
return setMenuOpen(!menuOpen);
|
8662
|
-
},
|
8663
|
-
title: "Toggle menu bar",
|
8664
|
-
children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronDown, { focusable: "false" })
|
8665
|
-
}
|
8666
|
-
) }),
|
8667
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8668
|
-
MenuBar,
|
8669
|
-
{
|
8670
|
-
dispatch,
|
8671
|
-
onPublish,
|
8672
|
-
menuOpen,
|
8673
|
-
renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
8674
|
-
Button,
|
8675
|
-
{
|
8676
|
-
onClick: () => {
|
8677
|
-
const data = appStore.getState().state.data;
|
8678
|
-
onPublish && onPublish(data);
|
8679
|
-
},
|
8680
|
-
icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Globe, { size: "14px" }),
|
8681
|
-
children: "Publish"
|
8682
|
-
}
|
8683
|
-
) }),
|
8684
|
-
setMenuOpen
|
8685
|
-
}
|
8686
|
-
)
|
8687
|
-
] })
|
8688
|
-
] }) })
|
8689
|
-
}
|
8690
|
-
),
|
8691
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: getLayoutClassName("leftSideBar"), children: [
|
8692
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Components, {}) }),
|
8693
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Outline, {}) })
|
8738
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getLayoutClassName("inner"), children: [
|
8739
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Header, {}),
|
8740
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getLayoutClassName("leftSideBar"), children: [
|
8741
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Components, {}) }),
|
8742
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Outline, {}) })
|
8694
8743
|
] }),
|
8695
|
-
/* @__PURE__ */ (0,
|
8696
|
-
/* @__PURE__ */ (0,
|
8744
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Canvas, {}),
|
8745
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FieldSideBar, {}) })
|
8697
8746
|
] })
|
8698
8747
|
}
|
8699
8748
|
) }) }),
|
8700
|
-
/* @__PURE__ */ (0,
|
8749
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { id: "puck-portal-root", className: getClassName28("portal") })
|
8701
8750
|
] });
|
8702
8751
|
}
|
8703
8752
|
function Puck(props) {
|
8704
|
-
return /* @__PURE__ */ (0,
|
8753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PuckLayout, __spreadValues({}, props)) })) }));
|
8705
8754
|
}
|
8706
8755
|
Puck.Components = Components;
|
8707
8756
|
Puck.Fields = Fields;
|
8708
8757
|
Puck.Outline = Outline;
|
8709
|
-
Puck.Preview =
|
8758
|
+
Puck.Preview = Preview2;
|
8710
8759
|
|
8711
8760
|
// lib/migrate.ts
|
8712
8761
|
init_react_import();
|
@@ -8741,7 +8790,7 @@ var migrations = [
|
|
8741
8790
|
const [id, slotName] = zoneCompound.split(":");
|
8742
8791
|
const nodeData = indexes.nodes[id].data;
|
8743
8792
|
const componentType = nodeData.type;
|
8744
|
-
const configForComponent = config.components[componentType];
|
8793
|
+
const configForComponent = id === "root" ? config.root : config.components[componentType];
|
8745
8794
|
if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
|
8746
8795
|
updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
|
8747
8796
|
props: __spreadProps(__spreadValues({}, nodeData.props), {
|
@@ -8799,11 +8848,13 @@ var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
|
|
8799
8848
|
});
|
8800
8849
|
|
8801
8850
|
// lib/transform-props.ts
|
8802
|
-
function transformProps(data, propTransforms) {
|
8851
|
+
function transformProps(data, propTransforms, config = { components: {} }) {
|
8803
8852
|
const mapItem = (item) => {
|
8804
8853
|
if (propTransforms[item.type]) {
|
8805
8854
|
return __spreadProps(__spreadValues({}, item), {
|
8806
|
-
props:
|
8855
|
+
props: __spreadValues({
|
8856
|
+
id: item.props.id
|
8857
|
+
}, propTransforms[item.type](item.props))
|
8807
8858
|
});
|
8808
8859
|
}
|
8809
8860
|
return item;
|
@@ -8812,23 +8863,18 @@ function transformProps(data, propTransforms) {
|
|
8812
8863
|
const rootProps = defaultedData.root.props || defaultedData.root;
|
8813
8864
|
let newRoot = __spreadValues({}, defaultedData.root);
|
8814
8865
|
if (propTransforms["root"]) {
|
8815
|
-
|
8816
|
-
newRoot.props = propTransforms["root"](rootProps);
|
8817
|
-
} else {
|
8818
|
-
newRoot = propTransforms["root"](rootProps);
|
8819
|
-
}
|
8866
|
+
newRoot.props = propTransforms["root"](rootProps);
|
8820
8867
|
}
|
8821
|
-
const
|
8822
|
-
|
8823
|
-
|
8824
|
-
|
8825
|
-
|
8826
|
-
|
8827
|
-
|
8828
|
-
|
8829
|
-
|
8830
|
-
|
8831
|
-
return afterPropTransforms;
|
8868
|
+
const dataWithUpdatedRoot = __spreadProps(__spreadValues({}, defaultedData), { root: newRoot });
|
8869
|
+
const updatedData = walkTree(
|
8870
|
+
dataWithUpdatedRoot,
|
8871
|
+
config,
|
8872
|
+
(content) => content.map(mapItem)
|
8873
|
+
);
|
8874
|
+
if (!defaultedData.root.props) {
|
8875
|
+
updatedData.root = updatedData.root.props;
|
8876
|
+
}
|
8877
|
+
return updatedData;
|
8832
8878
|
}
|
8833
8879
|
|
8834
8880
|
// lib/resolve-all-data.ts
|
@@ -8859,13 +8905,12 @@ function resolveAllData(_0, _1) {
|
|
8859
8905
|
},
|
8860
8906
|
() => {
|
8861
8907
|
},
|
8862
|
-
"force"
|
8863
|
-
false
|
8908
|
+
"force"
|
8864
8909
|
)).node;
|
8865
|
-
const resolvedDeep = yield
|
8910
|
+
const resolvedDeep = yield mapSlots(
|
8866
8911
|
resolved,
|
8867
8912
|
processContent,
|
8868
|
-
|
8913
|
+
config
|
8869
8914
|
);
|
8870
8915
|
onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
|
8871
8916
|
return resolvedDeep;
|
@@ -8913,6 +8958,7 @@ function resolveAllData(_0, _1) {
|
|
8913
8958
|
renderContext,
|
8914
8959
|
resolveAllData,
|
8915
8960
|
transformProps,
|
8961
|
+
useGetPuck,
|
8916
8962
|
usePuck,
|
8917
8963
|
walkTree
|
8918
8964
|
});
|