@measured/puck 0.10.0-canary.a7d9a28 → 0.10.0-canary.ca4f4be
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +221 -167
- package/dist/index.d.ts +10 -1
- package/dist/index.js +783 -438
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -327,7 +327,7 @@ var require_react_is_development = __commonJS({
|
|
|
327
327
|
var ContextProvider = REACT_PROVIDER_TYPE;
|
|
328
328
|
var Element = REACT_ELEMENT_TYPE;
|
|
329
329
|
var ForwardRef = REACT_FORWARD_REF_TYPE;
|
|
330
|
-
var
|
|
330
|
+
var Fragment10 = REACT_FRAGMENT_TYPE;
|
|
331
331
|
var Lazy = REACT_LAZY_TYPE;
|
|
332
332
|
var Memo = REACT_MEMO_TYPE;
|
|
333
333
|
var Portal = REACT_PORTAL_TYPE;
|
|
@@ -386,7 +386,7 @@ var require_react_is_development = __commonJS({
|
|
|
386
386
|
exports.ContextProvider = ContextProvider;
|
|
387
387
|
exports.Element = Element;
|
|
388
388
|
exports.ForwardRef = ForwardRef;
|
|
389
|
-
exports.Fragment =
|
|
389
|
+
exports.Fragment = Fragment10;
|
|
390
390
|
exports.Lazy = Lazy;
|
|
391
391
|
exports.Memo = Memo;
|
|
392
392
|
exports.Portal = Portal;
|
|
@@ -760,7 +760,7 @@ var require_factoryWithTypeCheckers = __commonJS({
|
|
|
760
760
|
function validate(props, propName, componentName, location, propFullName) {
|
|
761
761
|
if (!(props[propName] instanceof expectedClass)) {
|
|
762
762
|
var expectedClassName = expectedClass.name || ANONYMOUS;
|
|
763
|
-
var actualClassName =
|
|
763
|
+
var actualClassName = getClassName18(props[propName]);
|
|
764
764
|
return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + actualClassName + "` supplied to `" + componentName + "`, expected ") + ("instance of `" + expectedClassName + "`."));
|
|
765
765
|
}
|
|
766
766
|
return null;
|
|
@@ -1012,7 +1012,7 @@ var require_factoryWithTypeCheckers = __commonJS({
|
|
|
1012
1012
|
return type;
|
|
1013
1013
|
}
|
|
1014
1014
|
}
|
|
1015
|
-
function
|
|
1015
|
+
function getClassName18(propValue) {
|
|
1016
1016
|
if (!propValue.constructor || !propValue.constructor.name) {
|
|
1017
1017
|
return ANONYMOUS;
|
|
1018
1018
|
}
|
|
@@ -1214,11 +1214,11 @@ var Button = ({
|
|
|
1214
1214
|
|
|
1215
1215
|
// components/DropZone/index.tsx
|
|
1216
1216
|
init_react_import();
|
|
1217
|
-
var
|
|
1217
|
+
var import_react22 = require("react");
|
|
1218
1218
|
|
|
1219
1219
|
// components/DraggableComponent/index.tsx
|
|
1220
1220
|
init_react_import();
|
|
1221
|
-
var
|
|
1221
|
+
var import_react19 = require("react");
|
|
1222
1222
|
var import_react_beautiful_dnd = require("react-beautiful-dnd");
|
|
1223
1223
|
|
|
1224
1224
|
// css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
|
|
@@ -2130,7 +2130,7 @@ List.propTypes = {
|
|
|
2130
2130
|
List.displayName = "List";
|
|
2131
2131
|
var list_default = List;
|
|
2132
2132
|
|
|
2133
|
-
// ../../node_modules/react-feather/dist/icons/
|
|
2133
|
+
// ../../node_modules/react-feather/dist/icons/plus.js
|
|
2134
2134
|
init_react_import();
|
|
2135
2135
|
var import_react14 = __toESM(require("react"));
|
|
2136
2136
|
var import_prop_types12 = __toESM(require_prop_types());
|
|
@@ -2180,7 +2180,7 @@ function _objectWithoutPropertiesLoose12(source, excluded) {
|
|
|
2180
2180
|
}
|
|
2181
2181
|
return target;
|
|
2182
2182
|
}
|
|
2183
|
-
var
|
|
2183
|
+
var Plus = (0, import_react14.forwardRef)(function(_ref, ref) {
|
|
2184
2184
|
var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties12(_ref, ["color", "size"]);
|
|
2185
2185
|
return /* @__PURE__ */ import_react14.default.createElement("svg", _extends12({
|
|
2186
2186
|
ref,
|
|
@@ -2193,28 +2193,26 @@ var Sidebar = (0, import_react14.forwardRef)(function(_ref, ref) {
|
|
|
2193
2193
|
strokeWidth: "2",
|
|
2194
2194
|
strokeLinecap: "round",
|
|
2195
2195
|
strokeLinejoin: "round"
|
|
2196
|
-
}, rest), /* @__PURE__ */ import_react14.default.createElement("
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
rx: "2",
|
|
2202
|
-
ry: "2"
|
|
2196
|
+
}, rest), /* @__PURE__ */ import_react14.default.createElement("line", {
|
|
2197
|
+
x1: "12",
|
|
2198
|
+
y1: "5",
|
|
2199
|
+
x2: "12",
|
|
2200
|
+
y2: "19"
|
|
2203
2201
|
}), /* @__PURE__ */ import_react14.default.createElement("line", {
|
|
2204
|
-
x1: "
|
|
2205
|
-
y1: "
|
|
2206
|
-
x2: "
|
|
2207
|
-
y2: "
|
|
2202
|
+
x1: "5",
|
|
2203
|
+
y1: "12",
|
|
2204
|
+
x2: "19",
|
|
2205
|
+
y2: "12"
|
|
2208
2206
|
}));
|
|
2209
2207
|
});
|
|
2210
|
-
|
|
2208
|
+
Plus.propTypes = {
|
|
2211
2209
|
color: import_prop_types12.default.string,
|
|
2212
2210
|
size: import_prop_types12.default.oneOfType([import_prop_types12.default.string, import_prop_types12.default.number])
|
|
2213
2211
|
};
|
|
2214
|
-
|
|
2215
|
-
var
|
|
2212
|
+
Plus.displayName = "Plus";
|
|
2213
|
+
var plus_default = Plus;
|
|
2216
2214
|
|
|
2217
|
-
// ../../node_modules/react-feather/dist/icons/
|
|
2215
|
+
// ../../node_modules/react-feather/dist/icons/sidebar.js
|
|
2218
2216
|
init_react_import();
|
|
2219
2217
|
var import_react15 = __toESM(require("react"));
|
|
2220
2218
|
var import_prop_types13 = __toESM(require_prop_types());
|
|
@@ -2264,7 +2262,7 @@ function _objectWithoutPropertiesLoose13(source, excluded) {
|
|
|
2264
2262
|
}
|
|
2265
2263
|
return target;
|
|
2266
2264
|
}
|
|
2267
|
-
var
|
|
2265
|
+
var Sidebar = (0, import_react15.forwardRef)(function(_ref, ref) {
|
|
2268
2266
|
var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties13(_ref, ["color", "size"]);
|
|
2269
2267
|
return /* @__PURE__ */ import_react15.default.createElement("svg", _extends13({
|
|
2270
2268
|
ref,
|
|
@@ -2277,20 +2275,28 @@ var Trash = (0, import_react15.forwardRef)(function(_ref, ref) {
|
|
|
2277
2275
|
strokeWidth: "2",
|
|
2278
2276
|
strokeLinecap: "round",
|
|
2279
2277
|
strokeLinejoin: "round"
|
|
2280
|
-
}, rest), /* @__PURE__ */ import_react15.default.createElement("
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2278
|
+
}, rest), /* @__PURE__ */ import_react15.default.createElement("rect", {
|
|
2279
|
+
x: "3",
|
|
2280
|
+
y: "3",
|
|
2281
|
+
width: "18",
|
|
2282
|
+
height: "18",
|
|
2283
|
+
rx: "2",
|
|
2284
|
+
ry: "2"
|
|
2285
|
+
}), /* @__PURE__ */ import_react15.default.createElement("line", {
|
|
2286
|
+
x1: "9",
|
|
2287
|
+
y1: "3",
|
|
2288
|
+
x2: "9",
|
|
2289
|
+
y2: "21"
|
|
2284
2290
|
}));
|
|
2285
2291
|
});
|
|
2286
|
-
|
|
2292
|
+
Sidebar.propTypes = {
|
|
2287
2293
|
color: import_prop_types13.default.string,
|
|
2288
2294
|
size: import_prop_types13.default.oneOfType([import_prop_types13.default.string, import_prop_types13.default.number])
|
|
2289
2295
|
};
|
|
2290
|
-
|
|
2291
|
-
var
|
|
2296
|
+
Sidebar.displayName = "Sidebar";
|
|
2297
|
+
var sidebar_default = Sidebar;
|
|
2292
2298
|
|
|
2293
|
-
// ../../node_modules/react-feather/dist/icons/
|
|
2299
|
+
// ../../node_modules/react-feather/dist/icons/trash.js
|
|
2294
2300
|
init_react_import();
|
|
2295
2301
|
var import_react16 = __toESM(require("react"));
|
|
2296
2302
|
var import_prop_types14 = __toESM(require_prop_types());
|
|
@@ -2340,7 +2346,7 @@ function _objectWithoutPropertiesLoose14(source, excluded) {
|
|
|
2340
2346
|
}
|
|
2341
2347
|
return target;
|
|
2342
2348
|
}
|
|
2343
|
-
var
|
|
2349
|
+
var Trash = (0, import_react16.forwardRef)(function(_ref, ref) {
|
|
2344
2350
|
var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties14(_ref, ["color", "size"]);
|
|
2345
2351
|
return /* @__PURE__ */ import_react16.default.createElement("svg", _extends14({
|
|
2346
2352
|
ref,
|
|
@@ -2354,13 +2360,89 @@ var Type = (0, import_react16.forwardRef)(function(_ref, ref) {
|
|
|
2354
2360
|
strokeLinecap: "round",
|
|
2355
2361
|
strokeLinejoin: "round"
|
|
2356
2362
|
}, rest), /* @__PURE__ */ import_react16.default.createElement("polyline", {
|
|
2363
|
+
points: "3 6 5 6 21 6"
|
|
2364
|
+
}), /* @__PURE__ */ import_react16.default.createElement("path", {
|
|
2365
|
+
d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
|
|
2366
|
+
}));
|
|
2367
|
+
});
|
|
2368
|
+
Trash.propTypes = {
|
|
2369
|
+
color: import_prop_types14.default.string,
|
|
2370
|
+
size: import_prop_types14.default.oneOfType([import_prop_types14.default.string, import_prop_types14.default.number])
|
|
2371
|
+
};
|
|
2372
|
+
Trash.displayName = "Trash";
|
|
2373
|
+
var trash_default = Trash;
|
|
2374
|
+
|
|
2375
|
+
// ../../node_modules/react-feather/dist/icons/type.js
|
|
2376
|
+
init_react_import();
|
|
2377
|
+
var import_react17 = __toESM(require("react"));
|
|
2378
|
+
var import_prop_types15 = __toESM(require_prop_types());
|
|
2379
|
+
function _extends15() {
|
|
2380
|
+
_extends15 = Object.assign || function(target) {
|
|
2381
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
2382
|
+
var source = arguments[i];
|
|
2383
|
+
for (var key in source) {
|
|
2384
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
2385
|
+
target[key] = source[key];
|
|
2386
|
+
}
|
|
2387
|
+
}
|
|
2388
|
+
}
|
|
2389
|
+
return target;
|
|
2390
|
+
};
|
|
2391
|
+
return _extends15.apply(this, arguments);
|
|
2392
|
+
}
|
|
2393
|
+
function _objectWithoutProperties15(source, excluded) {
|
|
2394
|
+
if (source == null)
|
|
2395
|
+
return {};
|
|
2396
|
+
var target = _objectWithoutPropertiesLoose15(source, excluded);
|
|
2397
|
+
var key, i;
|
|
2398
|
+
if (Object.getOwnPropertySymbols) {
|
|
2399
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
2400
|
+
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
2401
|
+
key = sourceSymbolKeys[i];
|
|
2402
|
+
if (excluded.indexOf(key) >= 0)
|
|
2403
|
+
continue;
|
|
2404
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key))
|
|
2405
|
+
continue;
|
|
2406
|
+
target[key] = source[key];
|
|
2407
|
+
}
|
|
2408
|
+
}
|
|
2409
|
+
return target;
|
|
2410
|
+
}
|
|
2411
|
+
function _objectWithoutPropertiesLoose15(source, excluded) {
|
|
2412
|
+
if (source == null)
|
|
2413
|
+
return {};
|
|
2414
|
+
var target = {};
|
|
2415
|
+
var sourceKeys = Object.keys(source);
|
|
2416
|
+
var key, i;
|
|
2417
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
2418
|
+
key = sourceKeys[i];
|
|
2419
|
+
if (excluded.indexOf(key) >= 0)
|
|
2420
|
+
continue;
|
|
2421
|
+
target[key] = source[key];
|
|
2422
|
+
}
|
|
2423
|
+
return target;
|
|
2424
|
+
}
|
|
2425
|
+
var Type = (0, import_react17.forwardRef)(function(_ref, ref) {
|
|
2426
|
+
var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties15(_ref, ["color", "size"]);
|
|
2427
|
+
return /* @__PURE__ */ import_react17.default.createElement("svg", _extends15({
|
|
2428
|
+
ref,
|
|
2429
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2430
|
+
width: size,
|
|
2431
|
+
height: size,
|
|
2432
|
+
viewBox: "0 0 24 24",
|
|
2433
|
+
fill: "none",
|
|
2434
|
+
stroke: color,
|
|
2435
|
+
strokeWidth: "2",
|
|
2436
|
+
strokeLinecap: "round",
|
|
2437
|
+
strokeLinejoin: "round"
|
|
2438
|
+
}, rest), /* @__PURE__ */ import_react17.default.createElement("polyline", {
|
|
2357
2439
|
points: "4 7 4 4 20 4 20 7"
|
|
2358
|
-
}), /* @__PURE__ */
|
|
2440
|
+
}), /* @__PURE__ */ import_react17.default.createElement("line", {
|
|
2359
2441
|
x1: "9",
|
|
2360
2442
|
y1: "20",
|
|
2361
2443
|
x2: "15",
|
|
2362
2444
|
y2: "20"
|
|
2363
|
-
}), /* @__PURE__ */
|
|
2445
|
+
}), /* @__PURE__ */ import_react17.default.createElement("line", {
|
|
2364
2446
|
x1: "12",
|
|
2365
2447
|
y1: "4",
|
|
2366
2448
|
x2: "12",
|
|
@@ -2368,18 +2450,18 @@ var Type = (0, import_react16.forwardRef)(function(_ref, ref) {
|
|
|
2368
2450
|
}));
|
|
2369
2451
|
});
|
|
2370
2452
|
Type.propTypes = {
|
|
2371
|
-
color:
|
|
2372
|
-
size:
|
|
2453
|
+
color: import_prop_types15.default.string,
|
|
2454
|
+
size: import_prop_types15.default.oneOfType([import_prop_types15.default.string, import_prop_types15.default.number])
|
|
2373
2455
|
};
|
|
2374
2456
|
Type.displayName = "Type";
|
|
2375
2457
|
var type_default = Type;
|
|
2376
2458
|
|
|
2377
2459
|
// lib/use-modifier-held.ts
|
|
2378
2460
|
init_react_import();
|
|
2379
|
-
var
|
|
2461
|
+
var import_react18 = require("react");
|
|
2380
2462
|
var useModifierHeld = (modifier) => {
|
|
2381
|
-
const [modifierHeld, setModifierHeld] = (0,
|
|
2382
|
-
(0,
|
|
2463
|
+
const [modifierHeld, setModifierHeld] = (0, import_react18.useState)(false);
|
|
2464
|
+
(0, import_react18.useEffect)(() => {
|
|
2383
2465
|
function downHandler({ key }) {
|
|
2384
2466
|
if (key === modifier) {
|
|
2385
2467
|
setModifierHeld(true);
|
|
@@ -2423,7 +2505,7 @@ var DraggableComponent = ({
|
|
|
2423
2505
|
style
|
|
2424
2506
|
}) => {
|
|
2425
2507
|
const isModifierHeld = useModifierHeld("Alt");
|
|
2426
|
-
(0,
|
|
2508
|
+
(0, import_react19.useEffect)(onMount, []);
|
|
2427
2509
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2428
2510
|
import_react_beautiful_dnd.Draggable,
|
|
2429
2511
|
{
|
|
@@ -2467,13 +2549,13 @@ var DraggableComponent = ({
|
|
|
2467
2549
|
|
|
2468
2550
|
// components/DroppableStrictMode/index.tsx
|
|
2469
2551
|
init_react_import();
|
|
2470
|
-
var
|
|
2552
|
+
var import_react20 = require("react");
|
|
2471
2553
|
var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
|
|
2472
2554
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
2473
2555
|
var DroppableStrictMode = (_a) => {
|
|
2474
2556
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
2475
|
-
const [enabled, setEnabled] = (0,
|
|
2476
|
-
(0,
|
|
2557
|
+
const [enabled, setEnabled] = (0, import_react20.useState)(false);
|
|
2558
|
+
(0, import_react20.useEffect)(() => {
|
|
2477
2559
|
const animation = requestAnimationFrame(() => setEnabled(true));
|
|
2478
2560
|
return () => {
|
|
2479
2561
|
cancelAnimationFrame(animation);
|
|
@@ -2552,7 +2634,7 @@ var styles_module_default2 = { "DropZone": "_DropZone_ou0z5_1", "DropZone-conten
|
|
|
2552
2634
|
|
|
2553
2635
|
// components/DropZone/context.tsx
|
|
2554
2636
|
init_react_import();
|
|
2555
|
-
var
|
|
2637
|
+
var import_react21 = require("react");
|
|
2556
2638
|
var import_use_debounce = require("use-debounce");
|
|
2557
2639
|
|
|
2558
2640
|
// lib/get-zone-id.ts
|
|
@@ -2569,29 +2651,29 @@ var getZoneId = (zoneCompound) => {
|
|
|
2569
2651
|
|
|
2570
2652
|
// components/DropZone/context.tsx
|
|
2571
2653
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
2572
|
-
var dropZoneContext = (0,
|
|
2654
|
+
var dropZoneContext = (0, import_react21.createContext)(null);
|
|
2573
2655
|
var DropZoneProvider = ({
|
|
2574
2656
|
children,
|
|
2575
2657
|
value
|
|
2576
2658
|
}) => {
|
|
2577
|
-
const [hoveringArea, setHoveringArea] = (0,
|
|
2578
|
-
const [hoveringZone, setHoveringZone] = (0,
|
|
2659
|
+
const [hoveringArea, setHoveringArea] = (0, import_react21.useState)(null);
|
|
2660
|
+
const [hoveringZone, setHoveringZone] = (0, import_react21.useState)(
|
|
2579
2661
|
rootDroppableId
|
|
2580
2662
|
);
|
|
2581
|
-
const [hoveringComponent, setHoveringComponent] = (0,
|
|
2663
|
+
const [hoveringComponent, setHoveringComponent] = (0, import_react21.useState)();
|
|
2582
2664
|
const [hoveringAreaDb] = (0, import_use_debounce.useDebounce)(hoveringArea, 75, { leading: false });
|
|
2583
|
-
const [areasWithZones, setAreasWithZones] = (0,
|
|
2665
|
+
const [areasWithZones, setAreasWithZones] = (0, import_react21.useState)(
|
|
2584
2666
|
{}
|
|
2585
2667
|
);
|
|
2586
|
-
const [activeZones, setActiveZones] = (0,
|
|
2668
|
+
const [activeZones, setActiveZones] = (0, import_react21.useState)({});
|
|
2587
2669
|
const { dispatch = null } = value ? value : {};
|
|
2588
|
-
const registerZoneArea = (0,
|
|
2670
|
+
const registerZoneArea = (0, import_react21.useCallback)(
|
|
2589
2671
|
(area) => {
|
|
2590
2672
|
setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
|
|
2591
2673
|
},
|
|
2592
2674
|
[setAreasWithZones]
|
|
2593
2675
|
);
|
|
2594
|
-
const registerZone = (0,
|
|
2676
|
+
const registerZone = (0, import_react21.useCallback)(
|
|
2595
2677
|
(zoneCompound) => {
|
|
2596
2678
|
if (!dispatch) {
|
|
2597
2679
|
return;
|
|
@@ -2604,7 +2686,7 @@ var DropZoneProvider = ({
|
|
|
2604
2686
|
},
|
|
2605
2687
|
[setActiveZones, dispatch]
|
|
2606
2688
|
);
|
|
2607
|
-
const unregisterZone = (0,
|
|
2689
|
+
const unregisterZone = (0, import_react21.useCallback)(
|
|
2608
2690
|
(zoneCompound) => {
|
|
2609
2691
|
if (!dispatch) {
|
|
2610
2692
|
return;
|
|
@@ -2619,8 +2701,8 @@ var DropZoneProvider = ({
|
|
|
2619
2701
|
},
|
|
2620
2702
|
[setActiveZones, dispatch]
|
|
2621
2703
|
);
|
|
2622
|
-
const [pathData, setPathData] = (0,
|
|
2623
|
-
const registerPath = (0,
|
|
2704
|
+
const [pathData, setPathData] = (0, import_react21.useState)();
|
|
2705
|
+
const registerPath = (0, import_react21.useCallback)(
|
|
2624
2706
|
(selector) => {
|
|
2625
2707
|
if (!(value == null ? void 0 : value.data)) {
|
|
2626
2708
|
return;
|
|
@@ -2673,7 +2755,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
|
2673
2755
|
var getClassName3 = get_class_name_factory_default("DropZone", styles_module_default2);
|
|
2674
2756
|
function DropZoneEdit({ zone, style }) {
|
|
2675
2757
|
var _a;
|
|
2676
|
-
const ctx = (0,
|
|
2758
|
+
const ctx = (0, import_react22.useContext)(dropZoneContext);
|
|
2677
2759
|
const {
|
|
2678
2760
|
// These all need setting via context
|
|
2679
2761
|
data,
|
|
@@ -2690,12 +2772,12 @@ function DropZoneEdit({ zone, style }) {
|
|
|
2690
2772
|
} = ctx || {};
|
|
2691
2773
|
let content = data.content || [];
|
|
2692
2774
|
let zoneCompound = rootDroppableId;
|
|
2693
|
-
(0,
|
|
2775
|
+
(0, import_react22.useEffect)(() => {
|
|
2694
2776
|
if (areaId && registerZoneArea) {
|
|
2695
2777
|
registerZoneArea(areaId);
|
|
2696
2778
|
}
|
|
2697
2779
|
}, [areaId]);
|
|
2698
|
-
(0,
|
|
2780
|
+
(0, import_react22.useEffect)(() => {
|
|
2699
2781
|
if (ctx == null ? void 0 : ctx.registerZone) {
|
|
2700
2782
|
ctx == null ? void 0 : ctx.registerZone(zoneCompound);
|
|
2701
2783
|
}
|
|
@@ -2907,7 +2989,7 @@ function DropZoneEdit({ zone, style }) {
|
|
|
2907
2989
|
);
|
|
2908
2990
|
}
|
|
2909
2991
|
function DropZoneRender({ zone }) {
|
|
2910
|
-
const ctx = (0,
|
|
2992
|
+
const ctx = (0, import_react22.useContext)(dropZoneContext);
|
|
2911
2993
|
const { data, areaId = "root", config } = ctx || {};
|
|
2912
2994
|
let zoneCompound = rootDroppableId;
|
|
2913
2995
|
let content = (data == null ? void 0 : data.content) || [];
|
|
@@ -2934,7 +3016,7 @@ function DropZoneRender({ zone }) {
|
|
|
2934
3016
|
}) });
|
|
2935
3017
|
}
|
|
2936
3018
|
function DropZone(props) {
|
|
2937
|
-
const ctx = (0,
|
|
3019
|
+
const ctx = (0, import_react22.useContext)(dropZoneContext);
|
|
2938
3020
|
if ((ctx == null ? void 0 : ctx.mode) === "edit") {
|
|
2939
3021
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropZoneEdit, __spreadValues({}, props));
|
|
2940
3022
|
}
|
|
@@ -2946,7 +3028,7 @@ init_react_import();
|
|
|
2946
3028
|
|
|
2947
3029
|
// components/IconButton/IconButton.tsx
|
|
2948
3030
|
init_react_import();
|
|
2949
|
-
var
|
|
3031
|
+
var import_react23 = require("react");
|
|
2950
3032
|
|
|
2951
3033
|
// css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
|
|
2952
3034
|
init_react_import();
|
|
@@ -2968,7 +3050,7 @@ var IconButton = ({
|
|
|
2968
3050
|
fullWidth,
|
|
2969
3051
|
title
|
|
2970
3052
|
}) => {
|
|
2971
|
-
const [loading, setLoading] = (0,
|
|
3053
|
+
const [loading, setLoading] = (0, import_react23.useState)(false);
|
|
2972
3054
|
const ElementType = href ? "a" : "button";
|
|
2973
3055
|
const el = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
2974
3056
|
ElementType,
|
|
@@ -3008,38 +3090,363 @@ var IconButton = ({
|
|
|
3008
3090
|
|
|
3009
3091
|
// components/Puck/index.tsx
|
|
3010
3092
|
init_react_import();
|
|
3011
|
-
var
|
|
3012
|
-
var
|
|
3093
|
+
var import_react31 = require("react");
|
|
3094
|
+
var import_react_beautiful_dnd5 = require("react-beautiful-dnd");
|
|
3013
3095
|
|
|
3014
3096
|
// components/InputOrGroup/index.tsx
|
|
3015
3097
|
init_react_import();
|
|
3016
3098
|
|
|
3099
|
+
// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
|
|
3100
|
+
init_react_import();
|
|
3101
|
+
var styles_module_default3 = { "Input": "_Input_nkpu6_1", "Input-label": "_Input-label_nkpu6_27", "Input-labelIcon": "_Input-labelIcon_nkpu6_34", "Input-input": "_Input-input_nkpu6_39", "Input--readOnly": "_Input--readOnly_nkpu6_60", "Input-radioGroupItems": "_Input-radioGroupItems_nkpu6_69", "Input-radio": "_Input-radio_nkpu6_69", "Input-radioInner": "_Input-radioInner_nkpu6_86", "Input-radioInput": "_Input-radioInput_nkpu6_98" };
|
|
3102
|
+
|
|
3103
|
+
// components/InputOrGroup/fields/index.tsx
|
|
3104
|
+
init_react_import();
|
|
3105
|
+
|
|
3106
|
+
// components/InputOrGroup/fields/ArrayField/index.tsx
|
|
3107
|
+
init_react_import();
|
|
3108
|
+
|
|
3109
|
+
// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css#css-module
|
|
3110
|
+
init_react_import();
|
|
3111
|
+
var styles_module_default4 = { "ArrayField": "_ArrayField_zp334_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_zp334_13", "ArrayField-addButton": "_ArrayField-addButton_zp334_17", "ArrayField--hasItems": "_ArrayField--hasItems_zp334_31", "ArrayFieldItem": "_ArrayFieldItem_zp334_45", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_zp334_53", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_zp334_58", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_zp334_72", "ArrayFieldItem-body": "_ArrayFieldItem-body_zp334_104", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_zp334_112", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_zp334_119", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_zp334_125", "ArrayFieldItem-action": "_ArrayFieldItem-action_zp334_125" };
|
|
3112
|
+
|
|
3113
|
+
// components/InputOrGroup/fields/ArrayField/index.tsx
|
|
3114
|
+
var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
|
|
3115
|
+
|
|
3116
|
+
// components/Draggable/index.tsx
|
|
3117
|
+
init_react_import();
|
|
3118
|
+
var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
|
|
3119
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
3120
|
+
var Draggable2 = ({
|
|
3121
|
+
className,
|
|
3122
|
+
children,
|
|
3123
|
+
id,
|
|
3124
|
+
index,
|
|
3125
|
+
showShadow,
|
|
3126
|
+
disableAnimations = false
|
|
3127
|
+
}) => {
|
|
3128
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_beautiful_dnd3.Draggable, { draggableId: id, index, children: (provided, snapshot) => {
|
|
3129
|
+
var _a;
|
|
3130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
|
|
3131
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3132
|
+
"div",
|
|
3133
|
+
__spreadProps(__spreadValues(__spreadValues({
|
|
3134
|
+
className: className && className(provided, snapshot),
|
|
3135
|
+
ref: provided.innerRef
|
|
3136
|
+
}, provided.draggableProps), provided.dragHandleProps), {
|
|
3137
|
+
style: __spreadProps(__spreadValues({}, provided.draggableProps.style), {
|
|
3138
|
+
transform: snapshot.isDragging || !disableAnimations ? (_a = provided.draggableProps.style) == null ? void 0 : _a.transform : "translate(0px, 0px)"
|
|
3139
|
+
}),
|
|
3140
|
+
children: children(provided, snapshot)
|
|
3141
|
+
})
|
|
3142
|
+
),
|
|
3143
|
+
showShadow && snapshot.isDragging && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { transform: "none !important" }, children: children(provided, snapshot) })
|
|
3144
|
+
] });
|
|
3145
|
+
} });
|
|
3146
|
+
};
|
|
3147
|
+
|
|
3148
|
+
// lib/generate-id.ts
|
|
3149
|
+
init_react_import();
|
|
3150
|
+
var import_crypto = require("crypto");
|
|
3151
|
+
var generateId = (type) => `${type}-${(0, import_crypto.randomBytes)(20).toString("hex")}`;
|
|
3152
|
+
|
|
3153
|
+
// components/InputOrGroup/fields/ArrayField/index.tsx
|
|
3154
|
+
var import_react25 = require("react");
|
|
3155
|
+
|
|
3156
|
+
// components/DragIcon/index.tsx
|
|
3157
|
+
init_react_import();
|
|
3158
|
+
|
|
3159
|
+
// css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css#css-module
|
|
3160
|
+
init_react_import();
|
|
3161
|
+
var styles_module_default5 = { "DragIcon": "_DragIcon_o29on_1" };
|
|
3162
|
+
|
|
3163
|
+
// components/DragIcon/index.tsx
|
|
3164
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
3165
|
+
var getClassName5 = get_class_name_factory_default("DragIcon", styles_module_default5);
|
|
3166
|
+
var DragIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName5(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { viewBox: "0 0 20 20", width: "12", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }) }) });
|
|
3167
|
+
|
|
3168
|
+
// components/Puck/context.tsx
|
|
3169
|
+
init_react_import();
|
|
3170
|
+
var import_react24 = require("react");
|
|
3171
|
+
var defaultAppData = {
|
|
3172
|
+
data: { content: [], root: { title: "" } },
|
|
3173
|
+
state: {
|
|
3174
|
+
leftSideBarVisible: true,
|
|
3175
|
+
arrayState: {}
|
|
3176
|
+
}
|
|
3177
|
+
};
|
|
3178
|
+
var appContext = (0, import_react24.createContext)({
|
|
3179
|
+
appData: defaultAppData,
|
|
3180
|
+
dispatch: () => null
|
|
3181
|
+
});
|
|
3182
|
+
var AppProvider = appContext.Provider;
|
|
3183
|
+
var useAppContext = () => {
|
|
3184
|
+
const mainContext = (0, import_react24.useContext)(appContext);
|
|
3185
|
+
return __spreadProps(__spreadValues({}, mainContext), {
|
|
3186
|
+
// Helper
|
|
3187
|
+
setState: (state, recordHistory) => {
|
|
3188
|
+
return mainContext.dispatch({
|
|
3189
|
+
type: "setState",
|
|
3190
|
+
state,
|
|
3191
|
+
recordHistory
|
|
3192
|
+
});
|
|
3193
|
+
}
|
|
3194
|
+
});
|
|
3195
|
+
};
|
|
3196
|
+
|
|
3197
|
+
// components/InputOrGroup/fields/ArrayField/index.tsx
|
|
3198
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
3199
|
+
var getClassNameInput = get_class_name_factory_default("Input", styles_module_default3);
|
|
3200
|
+
var getClassName6 = get_class_name_factory_default("ArrayField", styles_module_default4);
|
|
3201
|
+
var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default4);
|
|
3202
|
+
var ArrayField = ({
|
|
3203
|
+
field,
|
|
3204
|
+
onChange,
|
|
3205
|
+
value,
|
|
3206
|
+
name,
|
|
3207
|
+
label
|
|
3208
|
+
}) => {
|
|
3209
|
+
const [arrayFieldId] = (0, import_react25.useState)(generateId("ArrayField"));
|
|
3210
|
+
const { appData, setState } = useAppContext();
|
|
3211
|
+
const arrayState = appData.state.arrayState[arrayFieldId] || {
|
|
3212
|
+
items: Array.from(value).map((v) => ({
|
|
3213
|
+
_arrayId: generateId("ArrayItem"),
|
|
3214
|
+
data: v
|
|
3215
|
+
})),
|
|
3216
|
+
openId: ""
|
|
3217
|
+
};
|
|
3218
|
+
const setArrayState = (0, import_react25.useCallback)(
|
|
3219
|
+
(newArrayState, recordHistory = false) => {
|
|
3220
|
+
setState(
|
|
3221
|
+
{
|
|
3222
|
+
arrayState: __spreadProps(__spreadValues({}, appData.state.arrayState), {
|
|
3223
|
+
[arrayFieldId]: __spreadValues(__spreadValues({}, arrayState), newArrayState)
|
|
3224
|
+
})
|
|
3225
|
+
},
|
|
3226
|
+
recordHistory
|
|
3227
|
+
);
|
|
3228
|
+
},
|
|
3229
|
+
[arrayState]
|
|
3230
|
+
);
|
|
3231
|
+
(0, import_react25.useEffect)(() => {
|
|
3232
|
+
const newItems = Array.from(value).map((item, idx) => {
|
|
3233
|
+
var _a;
|
|
3234
|
+
return {
|
|
3235
|
+
_arrayId: ((_a = arrayState.items[idx]) == null ? void 0 : _a._arrayId) || generateId("ArrayItem"),
|
|
3236
|
+
data: item
|
|
3237
|
+
};
|
|
3238
|
+
});
|
|
3239
|
+
setArrayState({ items: newItems });
|
|
3240
|
+
}, [value]);
|
|
3241
|
+
if (!field.arrayFields) {
|
|
3242
|
+
return null;
|
|
3243
|
+
}
|
|
3244
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameInput(), children: [
|
|
3245
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("b", { className: getClassNameInput("label"), children: [
|
|
3246
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameInput("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(list_default, { size: 16 }) }),
|
|
3247
|
+
label || name
|
|
3248
|
+
] }),
|
|
3249
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3250
|
+
import_react_beautiful_dnd4.DragDropContext,
|
|
3251
|
+
{
|
|
3252
|
+
onDragEnd: (event) => {
|
|
3253
|
+
var _a;
|
|
3254
|
+
if (event.destination) {
|
|
3255
|
+
const newValue = reorder(
|
|
3256
|
+
arrayState.items,
|
|
3257
|
+
event.source.index,
|
|
3258
|
+
(_a = event.destination) == null ? void 0 : _a.index
|
|
3259
|
+
);
|
|
3260
|
+
setArrayState(__spreadProps(__spreadValues({}, arrayState), { items: newValue }), false);
|
|
3261
|
+
onChange(newValue.map(({ data }) => data));
|
|
3262
|
+
}
|
|
3263
|
+
},
|
|
3264
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DroppableStrictMode_default, { droppableId: "array", children: (provided, snapshot) => {
|
|
3265
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3266
|
+
"div",
|
|
3267
|
+
__spreadProps(__spreadValues({}, provided.droppableProps), {
|
|
3268
|
+
ref: provided.innerRef,
|
|
3269
|
+
className: getClassName6({
|
|
3270
|
+
isDraggingFrom: !!snapshot.draggingFromThisWith,
|
|
3271
|
+
hasItems: value.length > 0
|
|
3272
|
+
}),
|
|
3273
|
+
children: [
|
|
3274
|
+
Array.isArray(value) && value.length > 0 ? arrayState.items.map(({ _arrayId, data }, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3275
|
+
Draggable2,
|
|
3276
|
+
{
|
|
3277
|
+
id: _arrayId,
|
|
3278
|
+
index: i,
|
|
3279
|
+
className: (_, snapshot2) => getClassNameItem({
|
|
3280
|
+
isExpanded: arrayState.openId === _arrayId,
|
|
3281
|
+
isDragging: snapshot2.isDragging
|
|
3282
|
+
}),
|
|
3283
|
+
children: () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
3284
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3285
|
+
"div",
|
|
3286
|
+
{
|
|
3287
|
+
onClick: () => {
|
|
3288
|
+
if (arrayState.openId === _arrayId) {
|
|
3289
|
+
setArrayState({
|
|
3290
|
+
openId: ""
|
|
3291
|
+
});
|
|
3292
|
+
} else {
|
|
3293
|
+
setArrayState({
|
|
3294
|
+
openId: _arrayId
|
|
3295
|
+
});
|
|
3296
|
+
}
|
|
3297
|
+
},
|
|
3298
|
+
className: getClassNameItem("summary"),
|
|
3299
|
+
children: [
|
|
3300
|
+
field.getItemSummary ? field.getItemSummary(data, i) : `Item #${i}`,
|
|
3301
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameItem("rhs"), children: [
|
|
3302
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3303
|
+
IconButton,
|
|
3304
|
+
{
|
|
3305
|
+
onClick: () => {
|
|
3306
|
+
const existingValue = [
|
|
3307
|
+
...value || []
|
|
3308
|
+
];
|
|
3309
|
+
const existingItems = [
|
|
3310
|
+
...arrayState.items || []
|
|
3311
|
+
];
|
|
3312
|
+
existingValue.splice(i, 1);
|
|
3313
|
+
existingItems.splice(i, 1);
|
|
3314
|
+
setArrayState(
|
|
3315
|
+
{ items: existingItems },
|
|
3316
|
+
true
|
|
3317
|
+
);
|
|
3318
|
+
onChange(existingValue);
|
|
3319
|
+
},
|
|
3320
|
+
title: "Delete",
|
|
3321
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(trash_default, { size: 16 })
|
|
3322
|
+
}
|
|
3323
|
+
) }) }),
|
|
3324
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DragIcon, {}) })
|
|
3325
|
+
] })
|
|
3326
|
+
]
|
|
3327
|
+
}
|
|
3328
|
+
),
|
|
3329
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3330
|
+
"fieldset",
|
|
3331
|
+
{
|
|
3332
|
+
className: getClassNameItem("fieldset"),
|
|
3333
|
+
children: Object.keys(field.arrayFields).map(
|
|
3334
|
+
(fieldName) => {
|
|
3335
|
+
const subField = field.arrayFields[fieldName];
|
|
3336
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3337
|
+
InputOrGroup,
|
|
3338
|
+
{
|
|
3339
|
+
name: `${name}_${i}_${fieldName}`,
|
|
3340
|
+
label: subField.label || fieldName,
|
|
3341
|
+
field: subField,
|
|
3342
|
+
value: data[fieldName],
|
|
3343
|
+
onChange: (val) => onChange(
|
|
3344
|
+
replace(value, i, __spreadProps(__spreadValues({}, data), {
|
|
3345
|
+
[fieldName]: val
|
|
3346
|
+
}))
|
|
3347
|
+
)
|
|
3348
|
+
},
|
|
3349
|
+
`${name}_${i}_${fieldName}`
|
|
3350
|
+
);
|
|
3351
|
+
}
|
|
3352
|
+
)
|
|
3353
|
+
}
|
|
3354
|
+
) })
|
|
3355
|
+
] })
|
|
3356
|
+
},
|
|
3357
|
+
_arrayId
|
|
3358
|
+
)) : null,
|
|
3359
|
+
provided.placeholder,
|
|
3360
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3361
|
+
"button",
|
|
3362
|
+
{
|
|
3363
|
+
className: getClassName6("addButton"),
|
|
3364
|
+
onClick: () => {
|
|
3365
|
+
const existingValue = value || [];
|
|
3366
|
+
onChange([...existingValue, field.defaultItemProps || {}]);
|
|
3367
|
+
},
|
|
3368
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(plus_default, { size: "21" })
|
|
3369
|
+
}
|
|
3370
|
+
)
|
|
3371
|
+
]
|
|
3372
|
+
})
|
|
3373
|
+
);
|
|
3374
|
+
} })
|
|
3375
|
+
}
|
|
3376
|
+
)
|
|
3377
|
+
] });
|
|
3378
|
+
};
|
|
3379
|
+
|
|
3380
|
+
// components/InputOrGroup/fields/DefaultField/index.tsx
|
|
3381
|
+
init_react_import();
|
|
3382
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
3383
|
+
var getClassName7 = get_class_name_factory_default("Input", styles_module_default3);
|
|
3384
|
+
var DefaultField = ({
|
|
3385
|
+
field,
|
|
3386
|
+
onChange,
|
|
3387
|
+
readOnly,
|
|
3388
|
+
value,
|
|
3389
|
+
name,
|
|
3390
|
+
label
|
|
3391
|
+
}) => {
|
|
3392
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: getClassName7({ readOnly }), children: [
|
|
3393
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: getClassName7("label"), children: [
|
|
3394
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: getClassName7("labelIcon"), children: [
|
|
3395
|
+
field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(type_default, { size: 16 }),
|
|
3396
|
+
field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(hash_default, { size: 16 })
|
|
3397
|
+
] }),
|
|
3398
|
+
label || name
|
|
3399
|
+
] }),
|
|
3400
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
3401
|
+
"input",
|
|
3402
|
+
{
|
|
3403
|
+
className: getClassName7("input"),
|
|
3404
|
+
autoComplete: "off",
|
|
3405
|
+
type: field.type,
|
|
3406
|
+
name,
|
|
3407
|
+
value: typeof value === "undefined" ? "" : value,
|
|
3408
|
+
onChange: (e) => {
|
|
3409
|
+
if (field.type === "number") {
|
|
3410
|
+
onChange(Number(e.currentTarget.value));
|
|
3411
|
+
} else {
|
|
3412
|
+
onChange(e.currentTarget.value);
|
|
3413
|
+
}
|
|
3414
|
+
},
|
|
3415
|
+
readOnly
|
|
3416
|
+
}
|
|
3417
|
+
)
|
|
3418
|
+
] });
|
|
3419
|
+
};
|
|
3420
|
+
|
|
3421
|
+
// components/InputOrGroup/fields/ExternalField/index.tsx
|
|
3422
|
+
init_react_import();
|
|
3423
|
+
|
|
3017
3424
|
// components/ExternalInput/index.tsx
|
|
3018
3425
|
init_react_import();
|
|
3019
|
-
var
|
|
3426
|
+
var import_react26 = require("react");
|
|
3020
3427
|
|
|
3021
3428
|
// css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
|
|
3022
3429
|
init_react_import();
|
|
3023
|
-
var
|
|
3430
|
+
var styles_module_default6 = { "ExternalInput": "_ExternalInput_l4bks_1", "ExternalInput-actions": "_ExternalInput-actions_l4bks_5", "ExternalInput-button": "_ExternalInput-button_l4bks_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_l4bks_28", "ExternalInput--hasData": "_ExternalInput--hasData_l4bks_35", "ExternalInput-modal": "_ExternalInput-modal_l4bks_55", "ExternalInput--modalVisible": "_ExternalInput--modalVisible_l4bks_69", "ExternalInput-modalInner": "_ExternalInput-modalInner_l4bks_73", "ExternalInput-modalHeading": "_ExternalInput-modalHeading_l4bks_84", "ExternalInput-modalTableWrapper": "_ExternalInput-modalTableWrapper_l4bks_89" };
|
|
3024
3431
|
|
|
3025
3432
|
// components/ExternalInput/index.tsx
|
|
3026
|
-
var
|
|
3027
|
-
var
|
|
3433
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
3434
|
+
var getClassName8 = get_class_name_factory_default("ExternalInput", styles_module_default6);
|
|
3028
3435
|
var ExternalInput = ({
|
|
3029
3436
|
field,
|
|
3030
3437
|
onChange,
|
|
3031
3438
|
value = null
|
|
3032
3439
|
}) => {
|
|
3033
|
-
const [data, setData] = (0,
|
|
3034
|
-
const [isOpen, setOpen] = (0,
|
|
3035
|
-
const [selectedData, setSelectedData] = (0,
|
|
3036
|
-
const keys = (0,
|
|
3440
|
+
const [data, setData] = (0, import_react26.useState)([]);
|
|
3441
|
+
const [isOpen, setOpen] = (0, import_react26.useState)(false);
|
|
3442
|
+
const [selectedData, setSelectedData] = (0, import_react26.useState)(value);
|
|
3443
|
+
const keys = (0, import_react26.useMemo)(
|
|
3037
3444
|
() => Object.keys(data).filter(
|
|
3038
3445
|
(key) => typeof data[key] === "string" || typeof data[key] === "number"
|
|
3039
3446
|
),
|
|
3040
3447
|
[data]
|
|
3041
3448
|
);
|
|
3042
|
-
(0,
|
|
3449
|
+
(0, import_react26.useEffect)(() => {
|
|
3043
3450
|
(() => __async(void 0, null, function* () {
|
|
3044
3451
|
if (field.adaptor) {
|
|
3045
3452
|
const listData = yield field.adaptor.fetchList(field.adaptorParams);
|
|
@@ -3050,35 +3457,35 @@ var ExternalInput = ({
|
|
|
3050
3457
|
}))();
|
|
3051
3458
|
}, [field.adaptor, field.adaptorParams]);
|
|
3052
3459
|
if (!field.adaptor) {
|
|
3053
|
-
return /* @__PURE__ */ (0,
|
|
3460
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: "Incorrectly configured" });
|
|
3054
3461
|
}
|
|
3055
|
-
return /* @__PURE__ */ (0,
|
|
3462
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
3056
3463
|
"div",
|
|
3057
3464
|
{
|
|
3058
|
-
className:
|
|
3465
|
+
className: getClassName8({
|
|
3059
3466
|
hasData: !!selectedData,
|
|
3060
3467
|
modalVisible: isOpen
|
|
3061
3468
|
}),
|
|
3062
3469
|
children: [
|
|
3063
|
-
/* @__PURE__ */ (0,
|
|
3064
|
-
/* @__PURE__ */ (0,
|
|
3470
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName8("actions"), children: [
|
|
3471
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
3065
3472
|
"button",
|
|
3066
3473
|
{
|
|
3067
3474
|
onClick: () => setOpen(true),
|
|
3068
|
-
className:
|
|
3069
|
-
children: selectedData ? field.getItemSummary ? field.getItemSummary(selectedData) : `${field.adaptor.name} item` : /* @__PURE__ */ (0,
|
|
3070
|
-
/* @__PURE__ */ (0,
|
|
3071
|
-
/* @__PURE__ */ (0,
|
|
3475
|
+
className: getClassName8("button"),
|
|
3476
|
+
children: selectedData ? field.getItemSummary ? field.getItemSummary(selectedData) : `${field.adaptor.name} item` : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
3477
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(link_default, { size: "16" }),
|
|
3478
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
|
|
3072
3479
|
"Select from ",
|
|
3073
3480
|
field.adaptor.name
|
|
3074
3481
|
] })
|
|
3075
3482
|
] })
|
|
3076
3483
|
}
|
|
3077
3484
|
),
|
|
3078
|
-
selectedData && /* @__PURE__ */ (0,
|
|
3485
|
+
selectedData && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
3079
3486
|
"button",
|
|
3080
3487
|
{
|
|
3081
|
-
className:
|
|
3488
|
+
className: getClassName8("detachButton"),
|
|
3082
3489
|
onClick: () => {
|
|
3083
3490
|
setSelectedData(null);
|
|
3084
3491
|
onChange(null);
|
|
@@ -3087,17 +3494,17 @@ var ExternalInput = ({
|
|
|
3087
3494
|
}
|
|
3088
3495
|
)
|
|
3089
3496
|
] }),
|
|
3090
|
-
/* @__PURE__ */ (0,
|
|
3497
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName8("modal"), onClick: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
3091
3498
|
"div",
|
|
3092
3499
|
{
|
|
3093
|
-
className:
|
|
3500
|
+
className: getClassName8("modalInner"),
|
|
3094
3501
|
onClick: (e) => e.stopPropagation(),
|
|
3095
3502
|
children: [
|
|
3096
|
-
/* @__PURE__ */ (0,
|
|
3097
|
-
data.length ? /* @__PURE__ */ (0,
|
|
3098
|
-
/* @__PURE__ */ (0,
|
|
3099
|
-
/* @__PURE__ */ (0,
|
|
3100
|
-
return /* @__PURE__ */ (0,
|
|
3503
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: getClassName8("modalHeading"), children: "Select content" }),
|
|
3504
|
+
data.length ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName8("modalTableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { children: [
|
|
3505
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { style: { textAlign: "left" }, children: key }, key)) }) }),
|
|
3506
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: data.map((item, i) => {
|
|
3507
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
3101
3508
|
"tr",
|
|
3102
3509
|
{
|
|
3103
3510
|
style: { whiteSpace: "nowrap" },
|
|
@@ -3106,12 +3513,12 @@ var ExternalInput = ({
|
|
|
3106
3513
|
setOpen(false);
|
|
3107
3514
|
setSelectedData(item);
|
|
3108
3515
|
},
|
|
3109
|
-
children: keys.map((key) => /* @__PURE__ */ (0,
|
|
3516
|
+
children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { children: item[key] }, key))
|
|
3110
3517
|
},
|
|
3111
3518
|
i
|
|
3112
3519
|
);
|
|
3113
3520
|
}) })
|
|
3114
|
-
] }) }) : /* @__PURE__ */ (0,
|
|
3521
|
+
] }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { padding: 24 }, children: "No content" })
|
|
3115
3522
|
]
|
|
3116
3523
|
}
|
|
3117
3524
|
) })
|
|
@@ -3120,204 +3527,189 @@ var ExternalInput = ({
|
|
|
3120
3527
|
);
|
|
3121
3528
|
};
|
|
3122
3529
|
|
|
3123
|
-
//
|
|
3530
|
+
// components/InputOrGroup/fields/ExternalField/index.tsx
|
|
3531
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
3532
|
+
var getClassName9 = get_class_name_factory_default("Input", styles_module_default3);
|
|
3533
|
+
var ExternalField = ({
|
|
3534
|
+
field,
|
|
3535
|
+
onChange,
|
|
3536
|
+
readOnly,
|
|
3537
|
+
value,
|
|
3538
|
+
name,
|
|
3539
|
+
label
|
|
3540
|
+
}) => {
|
|
3541
|
+
if (!field.adaptor) {
|
|
3542
|
+
return null;
|
|
3543
|
+
}
|
|
3544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName9(""), children: [
|
|
3545
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName9("label"), children: name === "_data" ? "External content" : label || name }),
|
|
3546
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ExternalInput, { field, onChange, value })
|
|
3547
|
+
] });
|
|
3548
|
+
};
|
|
3549
|
+
|
|
3550
|
+
// components/InputOrGroup/fields/RadioField/index.tsx
|
|
3124
3551
|
init_react_import();
|
|
3125
|
-
var
|
|
3552
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
3553
|
+
var getClassName10 = get_class_name_factory_default("Input", styles_module_default3);
|
|
3554
|
+
var RadioField = ({
|
|
3555
|
+
field,
|
|
3556
|
+
onChange,
|
|
3557
|
+
readOnly,
|
|
3558
|
+
value,
|
|
3559
|
+
name
|
|
3560
|
+
}) => {
|
|
3561
|
+
if (!field.options) {
|
|
3562
|
+
return null;
|
|
3563
|
+
}
|
|
3564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10(), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: getClassName10("radioGroup"), children: [
|
|
3565
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: getClassName10("label"), children: [
|
|
3566
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(check_circle_default, { size: 16 }) }),
|
|
3567
|
+
field.label || name
|
|
3568
|
+
] }),
|
|
3569
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10("radioGroupItems"), children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
3570
|
+
"label",
|
|
3571
|
+
{
|
|
3572
|
+
className: getClassName10("radio"),
|
|
3573
|
+
children: [
|
|
3574
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3575
|
+
"input",
|
|
3576
|
+
{
|
|
3577
|
+
type: "radio",
|
|
3578
|
+
className: getClassName10("radioInput"),
|
|
3579
|
+
value: option.value,
|
|
3580
|
+
name,
|
|
3581
|
+
onChange: (e) => {
|
|
3582
|
+
if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
|
|
3583
|
+
onChange(JSON.parse(e.currentTarget.value));
|
|
3584
|
+
return;
|
|
3585
|
+
}
|
|
3586
|
+
onChange(e.currentTarget.value);
|
|
3587
|
+
},
|
|
3588
|
+
readOnly,
|
|
3589
|
+
defaultChecked: value === option.value
|
|
3590
|
+
}
|
|
3591
|
+
),
|
|
3592
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10("radioInner"), children: option.label || option.value })
|
|
3593
|
+
]
|
|
3594
|
+
},
|
|
3595
|
+
option.label + option.value
|
|
3596
|
+
)) })
|
|
3597
|
+
] }) });
|
|
3598
|
+
};
|
|
3599
|
+
|
|
3600
|
+
// components/InputOrGroup/fields/SelectField/index.tsx
|
|
3601
|
+
init_react_import();
|
|
3602
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
3603
|
+
var getClassName11 = get_class_name_factory_default("Input", styles_module_default3);
|
|
3604
|
+
var SelectField = ({
|
|
3605
|
+
field,
|
|
3606
|
+
onChange,
|
|
3607
|
+
label,
|
|
3608
|
+
value,
|
|
3609
|
+
name
|
|
3610
|
+
}) => {
|
|
3611
|
+
if (!field.options) {
|
|
3612
|
+
return null;
|
|
3613
|
+
}
|
|
3614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: getClassName11(), children: [
|
|
3615
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassName11("label"), children: [
|
|
3616
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName11("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(chevron_down_default, { size: 16 }) }),
|
|
3617
|
+
label || name
|
|
3618
|
+
] }),
|
|
3619
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3620
|
+
"select",
|
|
3621
|
+
{
|
|
3622
|
+
className: getClassName11("input"),
|
|
3623
|
+
onChange: (e) => {
|
|
3624
|
+
if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
|
|
3625
|
+
onChange(Boolean(e.currentTarget.value));
|
|
3626
|
+
return;
|
|
3627
|
+
}
|
|
3628
|
+
onChange(e.currentTarget.value);
|
|
3629
|
+
},
|
|
3630
|
+
value,
|
|
3631
|
+
children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3632
|
+
"option",
|
|
3633
|
+
{
|
|
3634
|
+
label: option.label,
|
|
3635
|
+
value: option.value
|
|
3636
|
+
},
|
|
3637
|
+
option.label + option.value
|
|
3638
|
+
))
|
|
3639
|
+
}
|
|
3640
|
+
)
|
|
3641
|
+
] });
|
|
3642
|
+
};
|
|
3643
|
+
|
|
3644
|
+
// components/InputOrGroup/fields/TextareaField/index.tsx
|
|
3645
|
+
init_react_import();
|
|
3646
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
3647
|
+
var getClassName12 = get_class_name_factory_default("Input", styles_module_default3);
|
|
3648
|
+
var TextareaField = ({
|
|
3649
|
+
onChange,
|
|
3650
|
+
readOnly,
|
|
3651
|
+
value,
|
|
3652
|
+
name,
|
|
3653
|
+
label
|
|
3654
|
+
}) => {
|
|
3655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: getClassName12({ readOnly }), children: [
|
|
3656
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassName12("label"), children: [
|
|
3657
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassName12("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(type_default, { size: 16 }) }),
|
|
3658
|
+
label || name
|
|
3659
|
+
] }),
|
|
3660
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3661
|
+
"textarea",
|
|
3662
|
+
{
|
|
3663
|
+
className: getClassName12("input"),
|
|
3664
|
+
autoComplete: "off",
|
|
3665
|
+
name,
|
|
3666
|
+
value: typeof value === "undefined" ? "" : value,
|
|
3667
|
+
onChange: (e) => onChange(e.currentTarget.value),
|
|
3668
|
+
readOnly,
|
|
3669
|
+
rows: 5
|
|
3670
|
+
}
|
|
3671
|
+
)
|
|
3672
|
+
] });
|
|
3673
|
+
};
|
|
3126
3674
|
|
|
3127
3675
|
// components/InputOrGroup/index.tsx
|
|
3128
|
-
var
|
|
3129
|
-
var
|
|
3676
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
3677
|
+
var getClassName13 = get_class_name_factory_default("Input", styles_module_default3);
|
|
3130
3678
|
var FieldLabel = ({
|
|
3131
3679
|
children,
|
|
3132
3680
|
icon,
|
|
3133
3681
|
label
|
|
3134
3682
|
}) => {
|
|
3135
|
-
return /* @__PURE__ */ (0,
|
|
3136
|
-
/* @__PURE__ */ (0,
|
|
3137
|
-
icon ? /* @__PURE__ */ (0,
|
|
3683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { children: [
|
|
3684
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: getClassName13("label"), children: [
|
|
3685
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: getClassName13("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
|
|
3138
3686
|
label
|
|
3139
3687
|
] }),
|
|
3140
3688
|
children
|
|
3141
3689
|
] });
|
|
3142
3690
|
};
|
|
3143
|
-
var InputOrGroup = ({
|
|
3144
|
-
name,
|
|
3145
|
-
field,
|
|
3146
|
-
value,
|
|
3147
|
-
label,
|
|
3148
|
-
onChange,
|
|
3149
|
-
readOnly
|
|
3150
|
-
}) => {
|
|
3691
|
+
var InputOrGroup = (props) => {
|
|
3692
|
+
const { name, field, value, onChange, readOnly } = props;
|
|
3151
3693
|
if (field.type === "array") {
|
|
3152
|
-
|
|
3153
|
-
return null;
|
|
3154
|
-
}
|
|
3155
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6(), children: [
|
|
3156
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("b", { className: getClassName6("label"), children: [
|
|
3157
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(list_default, { size: 16 }) }),
|
|
3158
|
-
label || name
|
|
3159
|
-
] }),
|
|
3160
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("array"), children: [
|
|
3161
|
-
Array.isArray(value) ? value.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
3162
|
-
"details",
|
|
3163
|
-
{
|
|
3164
|
-
className: getClassName6("arrayItem"),
|
|
3165
|
-
children: [
|
|
3166
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("summary", { children: [
|
|
3167
|
-
field.getItemSummary ? field.getItemSummary(item, i) : `Item #${i}`,
|
|
3168
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("arrayItemAction"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3169
|
-
IconButton,
|
|
3170
|
-
{
|
|
3171
|
-
onClick: () => {
|
|
3172
|
-
const existingValue = value || [];
|
|
3173
|
-
existingValue.splice(i, 1);
|
|
3174
|
-
onChange(existingValue);
|
|
3175
|
-
},
|
|
3176
|
-
title: "Delete",
|
|
3177
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(trash_default, { size: 21 })
|
|
3178
|
-
}
|
|
3179
|
-
) })
|
|
3180
|
-
] }),
|
|
3181
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("fieldset", { className: getClassName6("fieldset"), children: Object.keys(field.arrayFields).map((fieldName) => {
|
|
3182
|
-
const subField = field.arrayFields[fieldName];
|
|
3183
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3184
|
-
InputOrGroup,
|
|
3185
|
-
{
|
|
3186
|
-
name: `${name}_${i}_${fieldName}`,
|
|
3187
|
-
label: subField.label || fieldName,
|
|
3188
|
-
field: subField,
|
|
3189
|
-
value: item[fieldName],
|
|
3190
|
-
onChange: (val) => onChange(
|
|
3191
|
-
replace(value, i, __spreadProps(__spreadValues({}, item), { [fieldName]: val }))
|
|
3192
|
-
)
|
|
3193
|
-
},
|
|
3194
|
-
`${name}_${i}_${fieldName}`
|
|
3195
|
-
);
|
|
3196
|
-
}) })
|
|
3197
|
-
]
|
|
3198
|
-
},
|
|
3199
|
-
`${name}_${i}`
|
|
3200
|
-
)) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {}),
|
|
3201
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3202
|
-
"button",
|
|
3203
|
-
{
|
|
3204
|
-
className: getClassName6("addButton"),
|
|
3205
|
-
onClick: () => {
|
|
3206
|
-
const existingValue = value || [];
|
|
3207
|
-
onChange([...existingValue, field.defaultItemProps || {}]);
|
|
3208
|
-
},
|
|
3209
|
-
children: "+ Add item"
|
|
3210
|
-
}
|
|
3211
|
-
)
|
|
3212
|
-
] })
|
|
3213
|
-
] });
|
|
3694
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArrayField, __spreadValues({}, props));
|
|
3214
3695
|
}
|
|
3215
3696
|
if (field.type === "external") {
|
|
3216
|
-
|
|
3217
|
-
return null;
|
|
3218
|
-
}
|
|
3219
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6(""), children: [
|
|
3220
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("label"), children: name === "_data" ? "External content" : label || name }),
|
|
3221
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ExternalInput, { field, onChange, value })
|
|
3222
|
-
] });
|
|
3697
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ExternalField, __spreadValues({}, props));
|
|
3223
3698
|
}
|
|
3224
3699
|
if (field.type === "select") {
|
|
3225
|
-
|
|
3226
|
-
return null;
|
|
3227
|
-
}
|
|
3228
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: getClassName6(), children: [
|
|
3229
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
|
|
3230
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(chevron_down_default, { size: 16 }) }),
|
|
3231
|
-
label || name
|
|
3232
|
-
] }),
|
|
3233
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3234
|
-
"select",
|
|
3235
|
-
{
|
|
3236
|
-
className: getClassName6("input"),
|
|
3237
|
-
onChange: (e) => {
|
|
3238
|
-
if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
|
|
3239
|
-
onChange(Boolean(e.currentTarget.value));
|
|
3240
|
-
return;
|
|
3241
|
-
}
|
|
3242
|
-
onChange(e.currentTarget.value);
|
|
3243
|
-
},
|
|
3244
|
-
value,
|
|
3245
|
-
children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3246
|
-
"option",
|
|
3247
|
-
{
|
|
3248
|
-
label: option.label,
|
|
3249
|
-
value: option.value
|
|
3250
|
-
},
|
|
3251
|
-
option.label + option.value
|
|
3252
|
-
))
|
|
3253
|
-
}
|
|
3254
|
-
)
|
|
3255
|
-
] });
|
|
3700
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectField, __spreadValues({}, props));
|
|
3256
3701
|
}
|
|
3257
3702
|
if (field.type === "textarea") {
|
|
3258
|
-
return /* @__PURE__ */ (0,
|
|
3259
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
|
|
3260
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(type_default, { size: 16 }) }),
|
|
3261
|
-
label || name
|
|
3262
|
-
] }),
|
|
3263
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3264
|
-
"textarea",
|
|
3265
|
-
{
|
|
3266
|
-
className: getClassName6("input"),
|
|
3267
|
-
autoComplete: "off",
|
|
3268
|
-
name,
|
|
3269
|
-
value: typeof value === "undefined" ? "" : value,
|
|
3270
|
-
onChange: (e) => onChange(e.currentTarget.value),
|
|
3271
|
-
readOnly,
|
|
3272
|
-
rows: 5
|
|
3273
|
-
}
|
|
3274
|
-
)
|
|
3275
|
-
] });
|
|
3703
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TextareaField, __spreadValues({}, props));
|
|
3276
3704
|
}
|
|
3277
3705
|
if (field.type === "radio") {
|
|
3278
|
-
|
|
3279
|
-
return null;
|
|
3280
|
-
}
|
|
3281
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("radioGroup"), children: [
|
|
3282
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
|
|
3283
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(check_circle_default, { size: 16 }) }),
|
|
3284
|
-
field.label || name
|
|
3285
|
-
] }),
|
|
3286
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("radioGroupItems"), children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
3287
|
-
"label",
|
|
3288
|
-
{
|
|
3289
|
-
className: getClassName6("radio"),
|
|
3290
|
-
children: [
|
|
3291
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3292
|
-
"input",
|
|
3293
|
-
{
|
|
3294
|
-
type: "radio",
|
|
3295
|
-
className: getClassName6("radioInput"),
|
|
3296
|
-
value: option.value,
|
|
3297
|
-
name,
|
|
3298
|
-
onChange: (e) => {
|
|
3299
|
-
if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
|
|
3300
|
-
onChange(JSON.parse(e.currentTarget.value));
|
|
3301
|
-
return;
|
|
3302
|
-
}
|
|
3303
|
-
onChange(e.currentTarget.value);
|
|
3304
|
-
},
|
|
3305
|
-
readOnly,
|
|
3306
|
-
defaultChecked: value === option.value
|
|
3307
|
-
}
|
|
3308
|
-
),
|
|
3309
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("radioInner"), children: option.label || option.value })
|
|
3310
|
-
]
|
|
3311
|
-
},
|
|
3312
|
-
option.label + option.value
|
|
3313
|
-
)) })
|
|
3314
|
-
] }) });
|
|
3706
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadioField, __spreadValues({}, props));
|
|
3315
3707
|
}
|
|
3316
3708
|
if (field.type === "custom") {
|
|
3317
3709
|
if (!field.render) {
|
|
3318
3710
|
return null;
|
|
3319
3711
|
}
|
|
3320
|
-
return /* @__PURE__ */ (0,
|
|
3712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: getClassName13(), children: field.render({
|
|
3321
3713
|
field,
|
|
3322
3714
|
name,
|
|
3323
3715
|
value,
|
|
@@ -3325,96 +3717,45 @@ var InputOrGroup = ({
|
|
|
3325
3717
|
readOnly
|
|
3326
3718
|
}) });
|
|
3327
3719
|
}
|
|
3328
|
-
return /* @__PURE__ */ (0,
|
|
3329
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
|
|
3330
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("labelIcon"), children: [
|
|
3331
|
-
field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(type_default, { size: 16 }),
|
|
3332
|
-
field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(hash_default, { size: 16 })
|
|
3333
|
-
] }),
|
|
3334
|
-
label || name
|
|
3335
|
-
] }),
|
|
3336
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3337
|
-
"input",
|
|
3338
|
-
{
|
|
3339
|
-
className: getClassName6("input"),
|
|
3340
|
-
autoComplete: "off",
|
|
3341
|
-
type: field.type,
|
|
3342
|
-
name,
|
|
3343
|
-
value: typeof value === "undefined" ? "" : value,
|
|
3344
|
-
onChange: (e) => {
|
|
3345
|
-
if (field.type === "number") {
|
|
3346
|
-
onChange(Number(e.currentTarget.value));
|
|
3347
|
-
} else {
|
|
3348
|
-
onChange(e.currentTarget.value);
|
|
3349
|
-
}
|
|
3350
|
-
},
|
|
3351
|
-
readOnly
|
|
3352
|
-
}
|
|
3353
|
-
)
|
|
3354
|
-
] });
|
|
3720
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DefaultField, __spreadValues({}, props));
|
|
3355
3721
|
};
|
|
3356
3722
|
|
|
3357
3723
|
// components/ComponentList/index.tsx
|
|
3358
3724
|
init_react_import();
|
|
3359
|
-
var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
|
|
3360
3725
|
|
|
3361
3726
|
// css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
|
|
3362
3727
|
init_react_import();
|
|
3363
|
-
var
|
|
3728
|
+
var styles_module_default7 = { "ComponentList": "_ComponentList_1f52d_1", "ComponentList-item": "_ComponentList-item_1f52d_9", "ComponentList-itemIcon": "_ComponentList-itemIcon_1f52d_26", "ComponentList--isDraggingFrom": "_ComponentList--isDraggingFrom_1f52d_30" };
|
|
3364
3729
|
|
|
3365
3730
|
// components/ComponentList/index.tsx
|
|
3366
|
-
var
|
|
3367
|
-
var
|
|
3731
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
3732
|
+
var getClassName14 = get_class_name_factory_default("ComponentList", styles_module_default7);
|
|
3368
3733
|
var ComponentList = ({ config }) => {
|
|
3369
|
-
return /* @__PURE__ */ (0,
|
|
3734
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DroppableStrictMode_default, { droppableId: "component-list", isDropDisabled: true, children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
3370
3735
|
"div",
|
|
3371
3736
|
__spreadProps(__spreadValues({}, provided.droppableProps), {
|
|
3372
3737
|
ref: provided.innerRef,
|
|
3373
|
-
className:
|
|
3738
|
+
className: getClassName14({
|
|
3739
|
+
isDraggingFrom: !!snapshot.draggingFromThisWith
|
|
3740
|
+
}),
|
|
3374
3741
|
children: [
|
|
3375
3742
|
Object.keys(config.components).map((componentKey, i) => {
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
import_react_beautiful_dnd3.Draggable,
|
|
3743
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3744
|
+
Draggable2,
|
|
3379
3745
|
{
|
|
3380
|
-
|
|
3746
|
+
id: componentKey,
|
|
3381
3747
|
index: i,
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
ref: provided2.innerRef
|
|
3389
|
-
}, provided2.draggableProps), provided2.dragHandleProps), {
|
|
3390
|
-
className: getClassName7("item"),
|
|
3391
|
-
style: __spreadProps(__spreadValues({}, provided2.draggableProps.style), {
|
|
3392
|
-
transform: snapshot2.isDragging ? (_a = provided2.draggableProps.style) == null ? void 0 : _a.transform : "translate(0px, 0px)"
|
|
3393
|
-
}),
|
|
3394
|
-
children: [
|
|
3395
|
-
componentKey,
|
|
3396
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName7("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(grid_default, { size: 18 }) })
|
|
3397
|
-
]
|
|
3398
|
-
})
|
|
3399
|
-
),
|
|
3400
|
-
snapshot2.isDragging && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3401
|
-
"div",
|
|
3402
|
-
{
|
|
3403
|
-
className: getClassName7("itemShadow"),
|
|
3404
|
-
style: { transform: "none !important" },
|
|
3405
|
-
children: [
|
|
3406
|
-
componentKey,
|
|
3407
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName7("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(grid_default, { size: 18 }) })
|
|
3408
|
-
]
|
|
3409
|
-
}
|
|
3410
|
-
)
|
|
3411
|
-
] });
|
|
3412
|
-
}
|
|
3748
|
+
showShadow: true,
|
|
3749
|
+
disableAnimations: true,
|
|
3750
|
+
children: () => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: getClassName14("item"), children: [
|
|
3751
|
+
componentKey,
|
|
3752
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(grid_default, { size: 18 }) })
|
|
3753
|
+
] })
|
|
3413
3754
|
},
|
|
3414
3755
|
componentKey
|
|
3415
3756
|
);
|
|
3416
3757
|
}),
|
|
3417
|
-
/* @__PURE__ */ (0,
|
|
3758
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { display: "none" }, children: provided.placeholder })
|
|
3418
3759
|
]
|
|
3419
3760
|
})
|
|
3420
3761
|
) });
|
|
@@ -3422,10 +3763,10 @@ var ComponentList = ({ config }) => {
|
|
|
3422
3763
|
|
|
3423
3764
|
// lib/use-placeholder-style.ts
|
|
3424
3765
|
init_react_import();
|
|
3425
|
-
var
|
|
3766
|
+
var import_react27 = require("react");
|
|
3426
3767
|
var usePlaceholderStyle = () => {
|
|
3427
3768
|
const queryAttr = "data-rbd-drag-handle-draggable-id";
|
|
3428
|
-
const [placeholderStyle, setPlaceholderStyle] = (0,
|
|
3769
|
+
const [placeholderStyle, setPlaceholderStyle] = (0, import_react27.useState)();
|
|
3429
3770
|
const onDragStartOrUpdate = (draggedItem) => {
|
|
3430
3771
|
var _a;
|
|
3431
3772
|
const draggableId = draggedItem.draggableId;
|
|
@@ -3473,24 +3814,24 @@ init_react_import();
|
|
|
3473
3814
|
|
|
3474
3815
|
// css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
|
|
3475
3816
|
init_react_import();
|
|
3476
|
-
var
|
|
3817
|
+
var styles_module_default8 = { "SidebarSection": "_SidebarSection_f1p35_1", "SidebarSection-title": "_SidebarSection-title_f1p35_12", "SidebarSection-content": "_SidebarSection-content_f1p35_19", "SidebarSection--noPadding": "_SidebarSection--noPadding_f1p35_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_f1p35_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_f1p35_44", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_f1p35_33", "SidebarSection-heading": "_SidebarSection-heading_f1p35_56" };
|
|
3477
3818
|
|
|
3478
3819
|
// components/Heading/index.tsx
|
|
3479
3820
|
init_react_import();
|
|
3480
3821
|
|
|
3481
3822
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
|
|
3482
3823
|
init_react_import();
|
|
3483
|
-
var
|
|
3824
|
+
var styles_module_default9 = { "Heading": "_Heading_1bvy5_1", "Heading--xxxxl": "_Heading--xxxxl_1bvy5_13", "Heading--xxxl": "_Heading--xxxl_1bvy5_19", "Heading--xxl": "_Heading--xxl_1bvy5_23", "Heading--xl": "_Heading--xl_1bvy5_27", "Heading--l": "_Heading--l_1bvy5_31", "Heading--m": "_Heading--m_1bvy5_35", "Heading--s": "_Heading--s_1bvy5_39", "Heading--xs": "_Heading--xs_1bvy5_43" };
|
|
3484
3825
|
|
|
3485
3826
|
// components/Heading/index.tsx
|
|
3486
|
-
var
|
|
3487
|
-
var
|
|
3827
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
3828
|
+
var getClassName15 = get_class_name_factory_default("Heading", styles_module_default9);
|
|
3488
3829
|
var Heading = ({ children, rank, size = "m" }) => {
|
|
3489
3830
|
const Tag = rank ? `h${rank}` : "span";
|
|
3490
|
-
return /* @__PURE__ */ (0,
|
|
3831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3491
3832
|
Tag,
|
|
3492
3833
|
{
|
|
3493
|
-
className:
|
|
3834
|
+
className: getClassName15({
|
|
3494
3835
|
[size]: true
|
|
3495
3836
|
}),
|
|
3496
3837
|
children
|
|
@@ -3499,8 +3840,8 @@ var Heading = ({ children, rank, size = "m" }) => {
|
|
|
3499
3840
|
};
|
|
3500
3841
|
|
|
3501
3842
|
// components/SidebarSection/index.tsx
|
|
3502
|
-
var
|
|
3503
|
-
var
|
|
3843
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3844
|
+
var getClassName16 = get_class_name_factory_default("SidebarSection", styles_module_default8);
|
|
3504
3845
|
var SidebarSection = ({
|
|
3505
3846
|
children,
|
|
3506
3847
|
title,
|
|
@@ -3509,22 +3850,22 @@ var SidebarSection = ({
|
|
|
3509
3850
|
breadcrumbClick,
|
|
3510
3851
|
noPadding
|
|
3511
3852
|
}) => {
|
|
3512
|
-
return /* @__PURE__ */ (0,
|
|
3513
|
-
/* @__PURE__ */ (0,
|
|
3514
|
-
breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0,
|
|
3515
|
-
/* @__PURE__ */ (0,
|
|
3853
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16({ noPadding }), style: { background }, children: [
|
|
3854
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("title"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumbs"), children: [
|
|
3855
|
+
breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumb"), children: [
|
|
3856
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3516
3857
|
"div",
|
|
3517
3858
|
{
|
|
3518
|
-
className:
|
|
3859
|
+
className: getClassName16("breadcrumbLabel"),
|
|
3519
3860
|
onClick: () => breadcrumbClick && breadcrumbClick(breadcrumb),
|
|
3520
3861
|
children: breadcrumb.label
|
|
3521
3862
|
}
|
|
3522
3863
|
),
|
|
3523
|
-
/* @__PURE__ */ (0,
|
|
3864
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(chevron_right_default, { size: 16 })
|
|
3524
3865
|
] }, i)),
|
|
3525
|
-
/* @__PURE__ */ (0,
|
|
3866
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
|
|
3526
3867
|
] }) }),
|
|
3527
|
-
/* @__PURE__ */ (0,
|
|
3868
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("content"), children })
|
|
3528
3869
|
] });
|
|
3529
3870
|
};
|
|
3530
3871
|
|
|
@@ -3533,15 +3874,15 @@ init_react_import();
|
|
|
3533
3874
|
|
|
3534
3875
|
// lib/use-puck-history.ts
|
|
3535
3876
|
init_react_import();
|
|
3536
|
-
var
|
|
3877
|
+
var import_react29 = require("react");
|
|
3537
3878
|
|
|
3538
3879
|
// lib/use-action-history.ts
|
|
3539
3880
|
init_react_import();
|
|
3540
|
-
var
|
|
3881
|
+
var import_react28 = require("react");
|
|
3541
3882
|
var EMPTY_HISTORY_INDEX = -1;
|
|
3542
3883
|
function useActionHistory() {
|
|
3543
|
-
const [histories, setHistories] = (0,
|
|
3544
|
-
const [currentHistoryIndex, setCurrentHistoryIndex] = (0,
|
|
3884
|
+
const [histories, setHistories] = (0, import_react28.useState)([]);
|
|
3885
|
+
const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react28.useState)(EMPTY_HISTORY_INDEX);
|
|
3545
3886
|
const currentHistory = histories[currentHistoryIndex];
|
|
3546
3887
|
const canRewind = currentHistoryIndex > EMPTY_HISTORY_INDEX;
|
|
3547
3888
|
const canForward = currentHistoryIndex < histories.length - 1;
|
|
@@ -3613,7 +3954,7 @@ function usePuckHistory({
|
|
|
3613
3954
|
dispatch
|
|
3614
3955
|
});
|
|
3615
3956
|
}, DEBOUNCE_TIME);
|
|
3616
|
-
(0,
|
|
3957
|
+
(0, import_react29.useEffect)(() => {
|
|
3617
3958
|
historyEmitter.on(RECORD_DIFF, handleRecordDiff);
|
|
3618
3959
|
return () => {
|
|
3619
3960
|
historyEmitter.off(RECORD_DIFF, handleRecordDiff);
|
|
@@ -3648,13 +3989,6 @@ var remove = (list, index) => {
|
|
|
3648
3989
|
|
|
3649
3990
|
// lib/reduce-related-zones.ts
|
|
3650
3991
|
init_react_import();
|
|
3651
|
-
|
|
3652
|
-
// lib/generate-id.ts
|
|
3653
|
-
init_react_import();
|
|
3654
|
-
var import_crypto = require("crypto");
|
|
3655
|
-
var generateId = (type) => `${type}-${(0, import_crypto.randomBytes)(20).toString("hex")}`;
|
|
3656
|
-
|
|
3657
|
-
// lib/reduce-related-zones.ts
|
|
3658
3992
|
var reduceRelatedZones = (item, data, fn) => {
|
|
3659
3993
|
return __spreadProps(__spreadValues({}, data), {
|
|
3660
3994
|
zones: Object.keys(data.zones || {}).reduce(
|
|
@@ -3951,7 +4285,7 @@ init_react_import();
|
|
|
3951
4285
|
|
|
3952
4286
|
// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
|
|
3953
4287
|
init_react_import();
|
|
3954
|
-
var
|
|
4288
|
+
var styles_module_default10 = { "LayerTree": "_LayerTree_1dcmd_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_1dcmd_11", "LayerTree-helper": "_LayerTree-helper_1dcmd_17", "Layer": "_Layer_1dcmd_1", "Layer-inner": "_Layer-inner_1dcmd_29", "Layer--containsZone": "_Layer--containsZone_1dcmd_35", "Layer-clickable": "_Layer-clickable_1dcmd_39", "Layer--isSelected": "_Layer--isSelected_1dcmd_48", "Layer--isHovering": "_Layer--isHovering_1dcmd_49", "Layer-chevron": "_Layer-chevron_1dcmd_65", "Layer--childIsSelected": "_Layer--childIsSelected_1dcmd_66", "Layer-zones": "_Layer-zones_1dcmd_70", "Layer-title": "_Layer-title_1dcmd_84", "Layer-icon": "_Layer-icon_1dcmd_92", "Layer-zoneIcon": "_Layer-zoneIcon_1dcmd_97" };
|
|
3955
4289
|
|
|
3956
4290
|
// lib/scroll-into-view.ts
|
|
3957
4291
|
init_react_import();
|
|
@@ -3965,7 +4299,7 @@ var scrollIntoView = (el) => {
|
|
|
3965
4299
|
};
|
|
3966
4300
|
|
|
3967
4301
|
// components/LayerTree/index.tsx
|
|
3968
|
-
var
|
|
4302
|
+
var import_react30 = require("react");
|
|
3969
4303
|
|
|
3970
4304
|
// lib/find-zones-for-area.ts
|
|
3971
4305
|
init_react_import();
|
|
@@ -3994,9 +4328,9 @@ var isChildOfZone = (item, maybeChild, ctx) => {
|
|
|
3994
4328
|
};
|
|
3995
4329
|
|
|
3996
4330
|
// components/LayerTree/index.tsx
|
|
3997
|
-
var
|
|
3998
|
-
var
|
|
3999
|
-
var getClassNameLayer = get_class_name_factory_default("Layer",
|
|
4331
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
4332
|
+
var getClassName17 = get_class_name_factory_default("LayerTree", styles_module_default10);
|
|
4333
|
+
var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default10);
|
|
4000
4334
|
var LayerTree = ({
|
|
4001
4335
|
data,
|
|
4002
4336
|
zoneContent,
|
|
@@ -4006,15 +4340,15 @@ var LayerTree = ({
|
|
|
4006
4340
|
label
|
|
4007
4341
|
}) => {
|
|
4008
4342
|
const zones = data.zones || {};
|
|
4009
|
-
const ctx = (0,
|
|
4010
|
-
return /* @__PURE__ */ (0,
|
|
4011
|
-
label && /* @__PURE__ */ (0,
|
|
4012
|
-
/* @__PURE__ */ (0,
|
|
4343
|
+
const ctx = (0, import_react30.useContext)(dropZoneContext);
|
|
4344
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
|
|
4345
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassName17("zoneTitle"), children: [
|
|
4346
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(layers_default, { size: "16" }) }),
|
|
4013
4347
|
" ",
|
|
4014
4348
|
label
|
|
4015
4349
|
] }),
|
|
4016
|
-
/* @__PURE__ */ (0,
|
|
4017
|
-
zoneContent.length === 0 && /* @__PURE__ */ (0,
|
|
4350
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("ul", { className: getClassName17(), children: [
|
|
4351
|
+
zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("helper"), children: "No items" }),
|
|
4018
4352
|
zoneContent.map((item, i) => {
|
|
4019
4353
|
const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
|
|
4020
4354
|
const zonesForItem = findZonesForArea(data, item.props.id);
|
|
@@ -4029,7 +4363,7 @@ var LayerTree = ({
|
|
|
4029
4363
|
const selectedItem = itemSelector && data ? getItem(itemSelector, data) : null;
|
|
4030
4364
|
const isHovering = hoveringComponent === item.props.id;
|
|
4031
4365
|
const childIsSelected = isChildOfZone(item, selectedItem, ctx);
|
|
4032
|
-
return /* @__PURE__ */ (0,
|
|
4366
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
4033
4367
|
"li",
|
|
4034
4368
|
{
|
|
4035
4369
|
className: getClassNameLayer({
|
|
@@ -4039,7 +4373,7 @@ var LayerTree = ({
|
|
|
4039
4373
|
childIsSelected
|
|
4040
4374
|
}),
|
|
4041
4375
|
children: [
|
|
4042
|
-
/* @__PURE__ */ (0,
|
|
4376
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
4043
4377
|
"div",
|
|
4044
4378
|
{
|
|
4045
4379
|
className: getClassNameLayer("clickable"),
|
|
@@ -4070,22 +4404,22 @@ var LayerTree = ({
|
|
|
4070
4404
|
setHoveringComponent(null);
|
|
4071
4405
|
},
|
|
4072
4406
|
children: [
|
|
4073
|
-
containsZone && /* @__PURE__ */ (0,
|
|
4407
|
+
containsZone && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
4074
4408
|
"div",
|
|
4075
4409
|
{
|
|
4076
4410
|
className: getClassNameLayer("chevron"),
|
|
4077
4411
|
title: isSelected ? "Collapse" : "Expand",
|
|
4078
|
-
children: /* @__PURE__ */ (0,
|
|
4412
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(chevron_down_default, { size: "12" })
|
|
4079
4413
|
}
|
|
4080
4414
|
),
|
|
4081
|
-
/* @__PURE__ */ (0,
|
|
4082
|
-
/* @__PURE__ */ (0,
|
|
4415
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassNameLayer("title"), children: [
|
|
4416
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(type_default, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(grid_default, { size: "16" }) }),
|
|
4083
4417
|
item.type
|
|
4084
4418
|
] })
|
|
4085
4419
|
]
|
|
4086
4420
|
}
|
|
4087
4421
|
) }),
|
|
4088
|
-
containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0,
|
|
4422
|
+
containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
4089
4423
|
LayerTree,
|
|
4090
4424
|
{
|
|
4091
4425
|
data,
|
|
@@ -4130,7 +4464,7 @@ var flushZones = (appData) => {
|
|
|
4130
4464
|
};
|
|
4131
4465
|
|
|
4132
4466
|
// components/Puck/index.tsx
|
|
4133
|
-
var
|
|
4467
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
4134
4468
|
var defaultPageFields = {
|
|
4135
4469
|
title: { type: "text" }
|
|
4136
4470
|
};
|
|
@@ -4141,7 +4475,7 @@ var PluginRenderer = ({
|
|
|
4141
4475
|
renderMethod
|
|
4142
4476
|
}) => {
|
|
4143
4477
|
return plugins.filter((item) => item[renderMethod]).map((item) => item[renderMethod]).reduce(
|
|
4144
|
-
(accChildren, Item) => /* @__PURE__ */ (0,
|
|
4478
|
+
(accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Item, { data, children: accChildren }),
|
|
4145
4479
|
children
|
|
4146
4480
|
);
|
|
4147
4481
|
};
|
|
@@ -4157,12 +4491,15 @@ function Puck({
|
|
|
4157
4491
|
headerPath
|
|
4158
4492
|
}) {
|
|
4159
4493
|
var _a, _b;
|
|
4160
|
-
const [reducer] = (0,
|
|
4494
|
+
const [reducer] = (0, import_react31.useState)(() => createReducer({ config }));
|
|
4161
4495
|
const initialAppData = {
|
|
4162
4496
|
data: initialData,
|
|
4163
|
-
state: {
|
|
4497
|
+
state: {
|
|
4498
|
+
leftSideBarVisible: true,
|
|
4499
|
+
arrayState: {}
|
|
4500
|
+
}
|
|
4164
4501
|
};
|
|
4165
|
-
const [appData, dispatch] = (0,
|
|
4502
|
+
const [appData, dispatch] = (0, import_react31.useReducer)(
|
|
4166
4503
|
reducer,
|
|
4167
4504
|
flushZones(initialAppData)
|
|
4168
4505
|
);
|
|
@@ -4172,7 +4509,7 @@ function Puck({
|
|
|
4172
4509
|
dispatch
|
|
4173
4510
|
});
|
|
4174
4511
|
const { itemSelector, leftSideBarVisible } = state;
|
|
4175
|
-
const setItemSelector = (0,
|
|
4512
|
+
const setItemSelector = (0, import_react31.useCallback)(
|
|
4176
4513
|
(newItemSelector) => {
|
|
4177
4514
|
dispatch({
|
|
4178
4515
|
type: "setState",
|
|
@@ -4182,10 +4519,10 @@ function Puck({
|
|
|
4182
4519
|
[]
|
|
4183
4520
|
);
|
|
4184
4521
|
const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
|
|
4185
|
-
const Page = (0,
|
|
4522
|
+
const Page = (0, import_react31.useCallback)(
|
|
4186
4523
|
(pageProps) => {
|
|
4187
4524
|
var _a2, _b2;
|
|
4188
|
-
return /* @__PURE__ */ (0,
|
|
4525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4189
4526
|
PluginRenderer,
|
|
4190
4527
|
{
|
|
4191
4528
|
plugins,
|
|
@@ -4197,8 +4534,8 @@ function Puck({
|
|
|
4197
4534
|
},
|
|
4198
4535
|
[config.root]
|
|
4199
4536
|
);
|
|
4200
|
-
const PageFieldWrapper = (0,
|
|
4201
|
-
(props) => /* @__PURE__ */ (0,
|
|
4537
|
+
const PageFieldWrapper = (0, import_react31.useCallback)(
|
|
4538
|
+
(props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4202
4539
|
PluginRenderer,
|
|
4203
4540
|
{
|
|
4204
4541
|
plugins,
|
|
@@ -4209,8 +4546,8 @@ function Puck({
|
|
|
4209
4546
|
),
|
|
4210
4547
|
[]
|
|
4211
4548
|
);
|
|
4212
|
-
const ComponentFieldWrapper = (0,
|
|
4213
|
-
(props) => /* @__PURE__ */ (0,
|
|
4549
|
+
const ComponentFieldWrapper = (0, import_react31.useCallback)(
|
|
4550
|
+
(props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4214
4551
|
PluginRenderer,
|
|
4215
4552
|
{
|
|
4216
4553
|
plugins,
|
|
@@ -4224,14 +4561,14 @@ function Puck({
|
|
|
4224
4561
|
const FieldWrapper = itemSelector ? ComponentFieldWrapper : PageFieldWrapper;
|
|
4225
4562
|
const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
|
|
4226
4563
|
let fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
|
|
4227
|
-
(0,
|
|
4564
|
+
(0, import_react31.useEffect)(() => {
|
|
4228
4565
|
if (onChange)
|
|
4229
4566
|
onChange(data);
|
|
4230
4567
|
}, [data]);
|
|
4231
4568
|
const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
|
|
4232
|
-
const [draggedItem, setDraggedItem] = (0,
|
|
4233
|
-
return /* @__PURE__ */ (0,
|
|
4234
|
-
|
|
4569
|
+
const [draggedItem, setDraggedItem] = (0, import_react31.useState)();
|
|
4570
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppProvider, { value: { appData, dispatch }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4571
|
+
import_react_beautiful_dnd5.DragDropContext,
|
|
4235
4572
|
{
|
|
4236
4573
|
onDragUpdate: (update) => {
|
|
4237
4574
|
setDraggedItem(__spreadValues(__spreadValues({}, draggedItem), update));
|
|
@@ -4282,7 +4619,7 @@ function Puck({
|
|
|
4282
4619
|
});
|
|
4283
4620
|
}
|
|
4284
4621
|
},
|
|
4285
|
-
children: /* @__PURE__ */ (0,
|
|
4622
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4286
4623
|
DropZoneProvider,
|
|
4287
4624
|
{
|
|
4288
4625
|
value: {
|
|
@@ -4296,13 +4633,13 @@ function Puck({
|
|
|
4296
4633
|
mode: "edit",
|
|
4297
4634
|
areaId: "root"
|
|
4298
4635
|
},
|
|
4299
|
-
children: /* @__PURE__ */ (0,
|
|
4636
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
|
|
4300
4637
|
let path = (ctx == null ? void 0 : ctx.pathData) && selectedItem ? ctx == null ? void 0 : ctx.pathData[selectedItem == null ? void 0 : selectedItem.props.id] : void 0;
|
|
4301
4638
|
if (path) {
|
|
4302
4639
|
path = [{ label: "Page", selector: null }, ...path];
|
|
4303
4640
|
path = path.slice(path.length - 2, path.length - 1);
|
|
4304
4641
|
}
|
|
4305
|
-
return /* @__PURE__ */ (0,
|
|
4642
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
4306
4643
|
"div",
|
|
4307
4644
|
{
|
|
4308
4645
|
style: {
|
|
@@ -4318,7 +4655,7 @@ function Puck({
|
|
|
4318
4655
|
right: 0
|
|
4319
4656
|
},
|
|
4320
4657
|
children: [
|
|
4321
|
-
/* @__PURE__ */ (0,
|
|
4658
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4322
4659
|
"header",
|
|
4323
4660
|
{
|
|
4324
4661
|
style: {
|
|
@@ -4328,19 +4665,19 @@ function Puck({
|
|
|
4328
4665
|
borderBottom: "1px solid var(--puck-color-grey-8)"
|
|
4329
4666
|
},
|
|
4330
4667
|
children: renderHeader ? renderHeader({
|
|
4331
|
-
children: /* @__PURE__ */ (0,
|
|
4668
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4332
4669
|
Button,
|
|
4333
4670
|
{
|
|
4334
4671
|
onClick: () => {
|
|
4335
4672
|
onPublish(data);
|
|
4336
4673
|
},
|
|
4337
|
-
icon: /* @__PURE__ */ (0,
|
|
4674
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(globe_default, { size: "14px" }),
|
|
4338
4675
|
children: "Publish"
|
|
4339
4676
|
}
|
|
4340
4677
|
),
|
|
4341
4678
|
data,
|
|
4342
4679
|
dispatch
|
|
4343
|
-
}) : /* @__PURE__ */ (0,
|
|
4680
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
4344
4681
|
"div",
|
|
4345
4682
|
{
|
|
4346
4683
|
style: {
|
|
@@ -4351,14 +4688,14 @@ function Puck({
|
|
|
4351
4688
|
gridTemplateRows: "auto"
|
|
4352
4689
|
},
|
|
4353
4690
|
children: [
|
|
4354
|
-
/* @__PURE__ */ (0,
|
|
4691
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4355
4692
|
"div",
|
|
4356
4693
|
{
|
|
4357
4694
|
style: {
|
|
4358
4695
|
display: "flex",
|
|
4359
4696
|
gap: 16
|
|
4360
4697
|
},
|
|
4361
|
-
children: /* @__PURE__ */ (0,
|
|
4698
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4362
4699
|
IconButton,
|
|
4363
4700
|
{
|
|
4364
4701
|
onClick: () => dispatch({
|
|
@@ -4368,12 +4705,12 @@ function Puck({
|
|
|
4368
4705
|
}
|
|
4369
4706
|
}),
|
|
4370
4707
|
title: "Toggle left sidebar",
|
|
4371
|
-
children: /* @__PURE__ */ (0,
|
|
4708
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(sidebar_default, {})
|
|
4372
4709
|
}
|
|
4373
4710
|
)
|
|
4374
4711
|
}
|
|
4375
4712
|
),
|
|
4376
|
-
/* @__PURE__ */ (0,
|
|
4713
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4377
4714
|
"div",
|
|
4378
4715
|
{
|
|
4379
4716
|
style: {
|
|
@@ -4381,13 +4718,19 @@ function Puck({
|
|
|
4381
4718
|
justifyContent: "center",
|
|
4382
4719
|
alignItems: "center"
|
|
4383
4720
|
},
|
|
4384
|
-
children: /* @__PURE__ */ (0,
|
|
4721
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Heading, { rank: 2, size: "xs", children: [
|
|
4385
4722
|
headerTitle || data.root.title || "Page",
|
|
4386
|
-
headerPath && /* @__PURE__ */ (0,
|
|
4723
|
+
headerPath && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4724
|
+
"small",
|
|
4725
|
+
{
|
|
4726
|
+
style: { fontWeight: 400, marginLeft: 4 },
|
|
4727
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("code", { children: headerPath })
|
|
4728
|
+
}
|
|
4729
|
+
)
|
|
4387
4730
|
] })
|
|
4388
4731
|
}
|
|
4389
4732
|
),
|
|
4390
|
-
/* @__PURE__ */ (0,
|
|
4733
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
4391
4734
|
"div",
|
|
4392
4735
|
{
|
|
4393
4736
|
style: {
|
|
@@ -4396,14 +4739,14 @@ function Puck({
|
|
|
4396
4739
|
justifyContent: "flex-end"
|
|
4397
4740
|
},
|
|
4398
4741
|
children: [
|
|
4399
|
-
/* @__PURE__ */ (0,
|
|
4400
|
-
/* @__PURE__ */ (0,
|
|
4742
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex" }, children: [
|
|
4743
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4401
4744
|
IconButton,
|
|
4402
4745
|
{
|
|
4403
4746
|
title: "undo",
|
|
4404
4747
|
disabled: !canRewind,
|
|
4405
4748
|
onClick: rewind,
|
|
4406
|
-
children: /* @__PURE__ */ (0,
|
|
4749
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4407
4750
|
chevron_left_default,
|
|
4408
4751
|
{
|
|
4409
4752
|
size: 21,
|
|
@@ -4412,13 +4755,13 @@ function Puck({
|
|
|
4412
4755
|
)
|
|
4413
4756
|
}
|
|
4414
4757
|
),
|
|
4415
|
-
/* @__PURE__ */ (0,
|
|
4758
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4416
4759
|
IconButton,
|
|
4417
4760
|
{
|
|
4418
4761
|
title: "redo",
|
|
4419
4762
|
disabled: !canForward,
|
|
4420
4763
|
onClick: forward,
|
|
4421
|
-
children: /* @__PURE__ */ (0,
|
|
4764
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4422
4765
|
chevron_right_default,
|
|
4423
4766
|
{
|
|
4424
4767
|
size: 21,
|
|
@@ -4429,13 +4772,13 @@ function Puck({
|
|
|
4429
4772
|
)
|
|
4430
4773
|
] }),
|
|
4431
4774
|
renderHeaderActions && renderHeaderActions({ data, dispatch }),
|
|
4432
|
-
/* @__PURE__ */ (0,
|
|
4775
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4433
4776
|
Button,
|
|
4434
4777
|
{
|
|
4435
4778
|
onClick: () => {
|
|
4436
4779
|
onPublish(data);
|
|
4437
4780
|
},
|
|
4438
|
-
icon: /* @__PURE__ */ (0,
|
|
4781
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(globe_default, { size: "14px" }),
|
|
4439
4782
|
children: "Publish"
|
|
4440
4783
|
}
|
|
4441
4784
|
)
|
|
@@ -4447,7 +4790,7 @@ function Puck({
|
|
|
4447
4790
|
)
|
|
4448
4791
|
}
|
|
4449
4792
|
),
|
|
4450
|
-
/* @__PURE__ */ (0,
|
|
4793
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
4451
4794
|
"div",
|
|
4452
4795
|
{
|
|
4453
4796
|
style: {
|
|
@@ -4459,9 +4802,9 @@ function Puck({
|
|
|
4459
4802
|
flexDirection: "column"
|
|
4460
4803
|
},
|
|
4461
4804
|
children: [
|
|
4462
|
-
/* @__PURE__ */ (0,
|
|
4463
|
-
/* @__PURE__ */ (0,
|
|
4464
|
-
(ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0,
|
|
4805
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComponentList, { config }) }),
|
|
4806
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(SidebarSection, { title: "Outline", children: [
|
|
4807
|
+
(ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4465
4808
|
LayerTree,
|
|
4466
4809
|
{
|
|
4467
4810
|
data,
|
|
@@ -4473,7 +4816,7 @@ function Puck({
|
|
|
4473
4816
|
),
|
|
4474
4817
|
Object.entries(findZonesForArea(data, "root")).map(
|
|
4475
4818
|
([zoneKey, zone]) => {
|
|
4476
|
-
return /* @__PURE__ */ (0,
|
|
4819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4477
4820
|
LayerTree,
|
|
4478
4821
|
{
|
|
4479
4822
|
data,
|
|
@@ -4491,7 +4834,7 @@ function Puck({
|
|
|
4491
4834
|
]
|
|
4492
4835
|
}
|
|
4493
4836
|
),
|
|
4494
|
-
/* @__PURE__ */ (0,
|
|
4837
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
4495
4838
|
"div",
|
|
4496
4839
|
{
|
|
4497
4840
|
style: {
|
|
@@ -4504,7 +4847,7 @@ function Puck({
|
|
|
4504
4847
|
onClick: () => setItemSelector(null),
|
|
4505
4848
|
id: "puck-frame",
|
|
4506
4849
|
children: [
|
|
4507
|
-
/* @__PURE__ */ (0,
|
|
4850
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4508
4851
|
"div",
|
|
4509
4852
|
{
|
|
4510
4853
|
className: "puck-root",
|
|
@@ -4513,18 +4856,18 @@ function Puck({
|
|
|
4513
4856
|
margin: 32,
|
|
4514
4857
|
zoom: 0.75
|
|
4515
4858
|
},
|
|
4516
|
-
children: /* @__PURE__ */ (0,
|
|
4859
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4517
4860
|
"div",
|
|
4518
4861
|
{
|
|
4519
4862
|
style: {
|
|
4520
4863
|
border: "1px solid var(--puck-color-grey-8)"
|
|
4521
4864
|
},
|
|
4522
|
-
children: /* @__PURE__ */ (0,
|
|
4865
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: rootDroppableId }) }))
|
|
4523
4866
|
}
|
|
4524
4867
|
)
|
|
4525
4868
|
}
|
|
4526
4869
|
),
|
|
4527
|
-
/* @__PURE__ */ (0,
|
|
4870
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4528
4871
|
"div",
|
|
4529
4872
|
{
|
|
4530
4873
|
style: {
|
|
@@ -4537,7 +4880,7 @@ function Puck({
|
|
|
4537
4880
|
]
|
|
4538
4881
|
}
|
|
4539
4882
|
),
|
|
4540
|
-
/* @__PURE__ */ (0,
|
|
4883
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4541
4884
|
"div",
|
|
4542
4885
|
{
|
|
4543
4886
|
style: {
|
|
@@ -4549,7 +4892,7 @@ function Puck({
|
|
|
4549
4892
|
flexDirection: "column",
|
|
4550
4893
|
background: "var(--puck-color-white)"
|
|
4551
4894
|
},
|
|
4552
|
-
children: /* @__PURE__ */ (0,
|
|
4895
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldWrapper, { data, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4553
4896
|
SidebarSection,
|
|
4554
4897
|
{
|
|
4555
4898
|
noPadding: true,
|
|
@@ -4608,7 +4951,7 @@ function Puck({
|
|
|
4608
4951
|
}
|
|
4609
4952
|
};
|
|
4610
4953
|
if (selectedItem && itemSelector) {
|
|
4611
|
-
return /* @__PURE__ */ (0,
|
|
4954
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4612
4955
|
InputOrGroup,
|
|
4613
4956
|
{
|
|
4614
4957
|
field,
|
|
@@ -4624,13 +4967,15 @@ function Puck({
|
|
|
4624
4967
|
`${selectedItem.props.id}_${fieldName}`
|
|
4625
4968
|
);
|
|
4626
4969
|
} else {
|
|
4627
|
-
return /* @__PURE__ */ (0,
|
|
4970
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4628
4971
|
InputOrGroup,
|
|
4629
4972
|
{
|
|
4630
4973
|
field,
|
|
4631
4974
|
name: fieldName,
|
|
4632
4975
|
label: field.label,
|
|
4633
|
-
readOnly: ((_d = (_c = data.root._meta) == null ? void 0 : _c.locked) == null ? void 0 : _d.indexOf(
|
|
4976
|
+
readOnly: ((_d = (_c = data.root._meta) == null ? void 0 : _c.locked) == null ? void 0 : _d.indexOf(
|
|
4977
|
+
fieldName
|
|
4978
|
+
)) > -1,
|
|
4634
4979
|
value: data.root[fieldName],
|
|
4635
4980
|
onChange: onChange2
|
|
4636
4981
|
},
|
|
@@ -4649,17 +4994,17 @@ function Puck({
|
|
|
4649
4994
|
}
|
|
4650
4995
|
)
|
|
4651
4996
|
}
|
|
4652
|
-
) });
|
|
4997
|
+
) }) });
|
|
4653
4998
|
}
|
|
4654
4999
|
|
|
4655
5000
|
// components/Render/index.tsx
|
|
4656
5001
|
init_react_import();
|
|
4657
|
-
var
|
|
5002
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
4658
5003
|
function Render({ config, data }) {
|
|
4659
5004
|
if (config.root) {
|
|
4660
|
-
return /* @__PURE__ */ (0,
|
|
5005
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(config.root.render, __spreadProps(__spreadValues({}, data.root), { editMode: false, id: "puck-root", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: rootDroppableId }) })) });
|
|
4661
5006
|
}
|
|
4662
|
-
return /* @__PURE__ */ (0,
|
|
5007
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: rootDroppableId }) });
|
|
4663
5008
|
}
|
|
4664
5009
|
// Annotate the CommonJS export names for ESM import in node:
|
|
4665
5010
|
0 && (module.exports = {
|