@measured/puck 0.17.4-canary.62d9972 → 0.17.4-canary.e778246
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.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +147 -104
- package/dist/index.mjs +130 -87
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
@@ -156,7 +156,9 @@ declare function Puck<UserConfig extends Config = Config, G extends UserGenerics
|
|
156
156
|
}): react_jsx_runtime.JSX.Element;
|
157
157
|
declare namespace Puck {
|
158
158
|
var Components: () => react_jsx_runtime.JSX.Element;
|
159
|
-
var Fields: (
|
159
|
+
var Fields: ({ wrapFields }: {
|
160
|
+
wrapFields?: boolean;
|
161
|
+
}) => react_jsx_runtime.JSX.Element;
|
160
162
|
var Outline: () => react_jsx_runtime.JSX.Element;
|
161
163
|
var Preview: ({ id }: {
|
162
164
|
id?: string;
|
package/dist/index.d.ts
CHANGED
@@ -156,7 +156,9 @@ declare function Puck<UserConfig extends Config = Config, G extends UserGenerics
|
|
156
156
|
}): react_jsx_runtime.JSX.Element;
|
157
157
|
declare namespace Puck {
|
158
158
|
var Components: () => react_jsx_runtime.JSX.Element;
|
159
|
-
var Fields: (
|
159
|
+
var Fields: ({ wrapFields }: {
|
160
|
+
wrapFields?: boolean;
|
161
|
+
}) => react_jsx_runtime.JSX.Element;
|
160
162
|
var Outline: () => react_jsx_runtime.JSX.Element;
|
161
163
|
var Preview: ({ id }: {
|
162
164
|
id?: string;
|
package/dist/index.js
CHANGED
@@ -1736,12 +1736,13 @@ var DefaultField = ({
|
|
1736
1736
|
field,
|
1737
1737
|
onChange,
|
1738
1738
|
readOnly,
|
1739
|
-
value,
|
1739
|
+
value: _value,
|
1740
1740
|
name,
|
1741
1741
|
label,
|
1742
1742
|
Label,
|
1743
1743
|
id
|
1744
1744
|
}) => {
|
1745
|
+
const value = _value;
|
1745
1746
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
1746
1747
|
Label,
|
1747
1748
|
{
|
@@ -1759,7 +1760,7 @@ var DefaultField = ({
|
|
1759
1760
|
type: field.type,
|
1760
1761
|
title: label || name,
|
1761
1762
|
name,
|
1762
|
-
value:
|
1763
|
+
value: (value == null ? void 0 : value.toString) ? value.toString() : "",
|
1763
1764
|
onChange: (e) => {
|
1764
1765
|
if (field.type === "number") {
|
1765
1766
|
const numberValue = Number(e.currentTarget.value);
|
@@ -3345,7 +3346,7 @@ function DropZone(props) {
|
|
3345
3346
|
|
3346
3347
|
// components/Puck/index.tsx
|
3347
3348
|
init_react_import();
|
3348
|
-
var
|
3349
|
+
var import_react39 = require("react");
|
3349
3350
|
|
3350
3351
|
// lib/use-placeholder-style.ts
|
3351
3352
|
init_react_import();
|
@@ -3956,33 +3957,58 @@ init_react_import();
|
|
3956
3957
|
var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
|
3957
3958
|
|
3958
3959
|
// components/Puck/components/Fields/index.tsx
|
3959
|
-
var
|
3960
|
+
var import_react28 = require("react");
|
3961
|
+
|
3962
|
+
// lib/use-resolved-fields.ts
|
3963
|
+
init_react_import();
|
3964
|
+
var import_react27 = require("react");
|
3960
3965
|
|
3961
3966
|
// lib/use-parent.ts
|
3962
3967
|
init_react_import();
|
3963
3968
|
var import_react25 = require("react");
|
3964
|
-
var
|
3969
|
+
var getParent = (itemSelector, pathData, data) => {
|
3965
3970
|
var _a;
|
3966
|
-
|
3967
|
-
const
|
3968
|
-
const
|
3969
|
-
const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
|
3971
|
+
if (!itemSelector) return null;
|
3972
|
+
const item = getItem(itemSelector, data);
|
3973
|
+
const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, data);
|
3970
3974
|
const lastItem = breadcrumbs[breadcrumbs.length - 1];
|
3971
|
-
const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector,
|
3975
|
+
const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, data)) != null ? _a : null : null;
|
3972
3976
|
return parent || null;
|
3973
3977
|
};
|
3978
|
+
var useGetParent = () => {
|
3979
|
+
const { state } = useAppContext();
|
3980
|
+
const { pathData } = (0, import_react25.useContext)(dropZoneContext) || {};
|
3981
|
+
return (0, import_react25.useCallback)(
|
3982
|
+
() => getParent(state.ui.itemSelector, pathData, state.data),
|
3983
|
+
[state.ui.itemSelector, pathData, state.data]
|
3984
|
+
);
|
3985
|
+
};
|
3986
|
+
var useParent = () => {
|
3987
|
+
return useGetParent()();
|
3988
|
+
};
|
3974
3989
|
|
3975
|
-
//
|
3976
|
-
|
3977
|
-
var
|
3990
|
+
// lib/use-on-value-change.ts
|
3991
|
+
init_react_import();
|
3992
|
+
var import_react26 = require("react");
|
3993
|
+
function useOnValueChange(value, onChange, compare = Object.is, deps = []) {
|
3994
|
+
const tracked = (0, import_react26.useRef)(value);
|
3995
|
+
(0, import_react26.useEffect)(() => {
|
3996
|
+
const oldValue = tracked.current;
|
3997
|
+
if (!compare(value, oldValue)) {
|
3998
|
+
tracked.current = value;
|
3999
|
+
onChange(value, oldValue);
|
4000
|
+
}
|
4001
|
+
}, [onChange, compare, value, ...deps]);
|
4002
|
+
}
|
4003
|
+
|
4004
|
+
// lib/selector-is.ts
|
4005
|
+
init_react_import();
|
4006
|
+
var selectorIs = (a, b) => (a == null ? void 0 : a.zone) === (b == null ? void 0 : b.zone) && (a == null ? void 0 : a.index) === (b == null ? void 0 : b.index);
|
4007
|
+
|
4008
|
+
// lib/use-resolved-fields.ts
|
3978
4009
|
var defaultPageFields = {
|
3979
4010
|
title: { type: "text" }
|
3980
4011
|
};
|
3981
|
-
var DefaultFields = ({
|
3982
|
-
children
|
3983
|
-
}) => {
|
3984
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
|
3985
|
-
};
|
3986
4012
|
var useResolvedFields = () => {
|
3987
4013
|
var _a, _b;
|
3988
4014
|
const { selectedItem, state, config } = useAppContext();
|
@@ -3990,20 +4016,21 @@ var useResolvedFields = () => {
|
|
3990
4016
|
const { data } = state;
|
3991
4017
|
const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
|
3992
4018
|
const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
|
3993
|
-
const defaultFields = (0,
|
4019
|
+
const defaultFields = (0, import_react27.useMemo)(
|
3994
4020
|
() => (selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields) || {},
|
3995
4021
|
[selectedItem, rootFields, componentConfig == null ? void 0 : componentConfig.fields]
|
3996
4022
|
);
|
3997
4023
|
const rootProps = data.root.props || data.root;
|
3998
|
-
const [lastSelectedData, setLastSelectedData] = (0,
|
3999
|
-
const [resolvedFields, setResolvedFields] = (0,
|
4000
|
-
const [fieldsLoading, setFieldsLoading] = (0,
|
4024
|
+
const [lastSelectedData, setLastSelectedData] = (0, import_react27.useState)({});
|
4025
|
+
const [resolvedFields, setResolvedFields] = (0, import_react27.useState)(defaultFields);
|
4026
|
+
const [fieldsLoading, setFieldsLoading] = (0, import_react27.useState)(false);
|
4027
|
+
const lastFields = (0, import_react27.useRef)(defaultFields);
|
4001
4028
|
const defaultResolveFields = (_componentData, _params) => defaultFields;
|
4002
4029
|
const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
|
4003
4030
|
const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
|
4004
4031
|
const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
|
4005
4032
|
const hasResolver = hasComponentResolver || hasRootResolver;
|
4006
|
-
const resolveFields = (0,
|
4033
|
+
const resolveFields = (0, import_react27.useCallback)(
|
4007
4034
|
(..._0) => __async(void 0, [..._0], function* (fields = {}) {
|
4008
4035
|
var _a2;
|
4009
4036
|
const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
|
@@ -4015,7 +4042,7 @@ var useResolvedFields = () => {
|
|
4015
4042
|
{
|
4016
4043
|
changed,
|
4017
4044
|
fields,
|
4018
|
-
lastFields:
|
4045
|
+
lastFields: lastFields.current,
|
4019
4046
|
lastData,
|
4020
4047
|
appState: state,
|
4021
4048
|
parent
|
@@ -4026,7 +4053,7 @@ var useResolvedFields = () => {
|
|
4026
4053
|
return yield config.root.resolveFields(componentData, {
|
4027
4054
|
changed,
|
4028
4055
|
fields,
|
4029
|
-
lastFields:
|
4056
|
+
lastFields: lastFields.current,
|
4030
4057
|
lastData,
|
4031
4058
|
appState: state,
|
4032
4059
|
parent
|
@@ -4035,40 +4062,56 @@ var useResolvedFields = () => {
|
|
4035
4062
|
return defaultResolveFields(componentData, {
|
4036
4063
|
changed,
|
4037
4064
|
fields,
|
4038
|
-
lastFields:
|
4065
|
+
lastFields: lastFields.current,
|
4039
4066
|
lastData
|
4040
4067
|
});
|
4041
4068
|
}),
|
4042
|
-
[data, config, componentData, selectedItem,
|
4069
|
+
[data, config, componentData, selectedItem, state, parent]
|
4043
4070
|
);
|
4044
|
-
const
|
4045
|
-
(0, import_react26.useEffect)(() => {
|
4046
|
-
setHasParent(!!parent);
|
4047
|
-
}, [parent]);
|
4048
|
-
(0, import_react26.useEffect)(() => {
|
4071
|
+
const triggerResolver = (0, import_react27.useCallback)(() => {
|
4049
4072
|
var _a2, _b2;
|
4050
|
-
if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" ||
|
4073
|
+
if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" || parent) {
|
4051
4074
|
if (hasResolver) {
|
4052
4075
|
setFieldsLoading(true);
|
4053
4076
|
resolveFields(defaultFields).then((fields) => {
|
4054
4077
|
setResolvedFields(fields || {});
|
4078
|
+
lastFields.current = fields;
|
4055
4079
|
setFieldsLoading(false);
|
4056
4080
|
});
|
4057
|
-
|
4058
|
-
setResolvedFields(defaultFields);
|
4081
|
+
return;
|
4059
4082
|
}
|
4060
4083
|
}
|
4061
|
-
|
4062
|
-
|
4063
|
-
|
4084
|
+
setResolvedFields(defaultFields);
|
4085
|
+
}, [defaultFields, state.ui.itemSelector, hasResolver, parent]);
|
4086
|
+
useOnValueChange(
|
4064
4087
|
state.ui.itemSelector,
|
4065
|
-
|
4066
|
-
|
4067
|
-
|
4068
|
-
|
4088
|
+
() => {
|
4089
|
+
lastFields.current = defaultFields;
|
4090
|
+
},
|
4091
|
+
selectorIs
|
4092
|
+
);
|
4093
|
+
useOnValueChange(
|
4094
|
+
{ data, parent, itemSelector: state.ui.itemSelector },
|
4095
|
+
() => {
|
4096
|
+
triggerResolver();
|
4097
|
+
},
|
4098
|
+
(a, b) => JSON.stringify(a) === JSON.stringify(b)
|
4099
|
+
);
|
4100
|
+
(0, import_react27.useEffect)(() => {
|
4101
|
+
triggerResolver();
|
4102
|
+
}, []);
|
4069
4103
|
return [resolvedFields, fieldsLoading];
|
4070
4104
|
};
|
4071
|
-
|
4105
|
+
|
4106
|
+
// components/Puck/components/Fields/index.tsx
|
4107
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
4108
|
+
var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
|
4109
|
+
var DefaultFields = ({
|
4110
|
+
children
|
4111
|
+
}) => {
|
4112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
|
4113
|
+
};
|
4114
|
+
var Fields = ({ wrapFields = true }) => {
|
4072
4115
|
var _a, _b;
|
4073
4116
|
const {
|
4074
4117
|
selectedItem,
|
@@ -4086,7 +4129,7 @@ var Fields = () => {
|
|
4086
4129
|
const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
|
4087
4130
|
const isLoading = fieldsResolving || componentResolving;
|
4088
4131
|
const rootProps = data.root.props || data.root;
|
4089
|
-
const Wrapper = (0,
|
4132
|
+
const Wrapper = (0, import_react28.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
|
4090
4133
|
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
4091
4134
|
"form",
|
4092
4135
|
{
|
@@ -4209,7 +4252,7 @@ init_react_import();
|
|
4209
4252
|
|
4210
4253
|
// lib/use-component-list.tsx
|
4211
4254
|
init_react_import();
|
4212
|
-
var
|
4255
|
+
var import_react29 = require("react");
|
4213
4256
|
|
4214
4257
|
// components/ComponentList/index.tsx
|
4215
4258
|
init_react_import();
|
@@ -4287,8 +4330,8 @@ ComponentList.Item = ComponentListItem;
|
|
4287
4330
|
// lib/use-component-list.tsx
|
4288
4331
|
var import_jsx_runtime30 = require("react/jsx-runtime");
|
4289
4332
|
var useComponentList = (config, ui) => {
|
4290
|
-
const [componentList, setComponentList] = (0,
|
4291
|
-
(0,
|
4333
|
+
const [componentList, setComponentList] = (0, import_react29.useState)();
|
4334
|
+
(0, import_react29.useEffect)(() => {
|
4292
4335
|
var _a, _b, _c;
|
4293
4336
|
if (Object.keys(ui.componentList).length > 0) {
|
4294
4337
|
const matchedComponents = [];
|
@@ -4357,22 +4400,22 @@ var useComponentList = (config, ui) => {
|
|
4357
4400
|
};
|
4358
4401
|
|
4359
4402
|
// components/Puck/components/Components/index.tsx
|
4360
|
-
var
|
4403
|
+
var import_react30 = require("react");
|
4361
4404
|
var import_jsx_runtime31 = require("react/jsx-runtime");
|
4362
4405
|
var Components = () => {
|
4363
4406
|
const { config, state, overrides } = useAppContext();
|
4364
4407
|
const componentList = useComponentList(config, state.ui);
|
4365
|
-
const Wrapper = (0,
|
4408
|
+
const Wrapper = (0, import_react30.useMemo)(() => overrides.components || "div", [overrides]);
|
4366
4409
|
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ComponentList, { id: "all" }) });
|
4367
4410
|
};
|
4368
4411
|
|
4369
4412
|
// components/Puck/components/Preview/index.tsx
|
4370
4413
|
init_react_import();
|
4371
|
-
var
|
4414
|
+
var import_react32 = require("react");
|
4372
4415
|
|
4373
4416
|
// components/AutoFrame/index.tsx
|
4374
4417
|
init_react_import();
|
4375
|
-
var
|
4418
|
+
var import_react31 = require("react");
|
4376
4419
|
var import_object_hash = __toESM(require("object-hash"));
|
4377
4420
|
var import_react_dom2 = require("react-dom");
|
4378
4421
|
var import_jsx_runtime32 = require("react/jsx-runtime");
|
@@ -4418,7 +4461,7 @@ var CopyHostStyles = ({
|
|
4418
4461
|
onStylesLoaded = () => null
|
4419
4462
|
}) => {
|
4420
4463
|
const { document: doc, window: win } = useFrame();
|
4421
|
-
(0,
|
4464
|
+
(0, import_react31.useEffect)(() => {
|
4422
4465
|
if (!win || !doc) {
|
4423
4466
|
return () => {
|
4424
4467
|
};
|
@@ -4577,8 +4620,8 @@ var CopyHostStyles = ({
|
|
4577
4620
|
}, []);
|
4578
4621
|
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });
|
4579
4622
|
};
|
4580
|
-
var autoFrameContext = (0,
|
4581
|
-
var useFrame = () => (0,
|
4623
|
+
var autoFrameContext = (0, import_react31.createContext)({});
|
4624
|
+
var useFrame = () => (0, import_react31.useContext)(autoFrameContext);
|
4582
4625
|
function AutoFrame(_a) {
|
4583
4626
|
var _b = _a, {
|
4584
4627
|
children,
|
@@ -4593,11 +4636,11 @@ function AutoFrame(_a) {
|
|
4593
4636
|
"id",
|
4594
4637
|
"onStylesLoaded"
|
4595
4638
|
]);
|
4596
|
-
const [loaded, setLoaded] = (0,
|
4597
|
-
const [ctx, setCtx] = (0,
|
4598
|
-
const ref = (0,
|
4599
|
-
const [mountTarget, setMountTarget] = (0,
|
4600
|
-
(0,
|
4639
|
+
const [loaded, setLoaded] = (0, import_react31.useState)(false);
|
4640
|
+
const [ctx, setCtx] = (0, import_react31.useState)({});
|
4641
|
+
const ref = (0, import_react31.useRef)(null);
|
4642
|
+
const [mountTarget, setMountTarget] = (0, import_react31.useState)();
|
4643
|
+
(0, import_react31.useEffect)(() => {
|
4601
4644
|
var _a2;
|
4602
4645
|
if (ref.current) {
|
4603
4646
|
setCtx({
|
@@ -4633,7 +4676,7 @@ var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
4633
4676
|
var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
|
4634
4677
|
var Preview = ({ id = "puck-preview" }) => {
|
4635
4678
|
const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
|
4636
|
-
const Page = (0,
|
4679
|
+
const Page = (0, import_react32.useCallback)(
|
4637
4680
|
(pageProps) => {
|
4638
4681
|
var _a, _b;
|
4639
4682
|
return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
|
@@ -4642,7 +4685,7 @@ var Preview = ({ id = "puck-preview" }) => {
|
|
4642
4685
|
},
|
4643
4686
|
[config.root]
|
4644
4687
|
);
|
4645
|
-
const Frame = (0,
|
4688
|
+
const Frame = (0, import_react32.useMemo)(() => overrides.iframe, [overrides]);
|
4646
4689
|
const rootProps = state.data.root.props || state.data.root;
|
4647
4690
|
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
4648
4691
|
"div",
|
@@ -4731,7 +4774,7 @@ var scrollIntoView = (el) => {
|
|
4731
4774
|
};
|
4732
4775
|
|
4733
4776
|
// components/LayerTree/index.tsx
|
4734
|
-
var
|
4777
|
+
var import_react33 = require("react");
|
4735
4778
|
|
4736
4779
|
// lib/is-child-of-zone.ts
|
4737
4780
|
init_react_import();
|
@@ -4758,7 +4801,7 @@ var LayerTree = ({
|
|
4758
4801
|
label
|
4759
4802
|
}) => {
|
4760
4803
|
const zones = data.zones || {};
|
4761
|
-
const ctx = (0,
|
4804
|
+
const ctx = (0, import_react33.useContext)(dropZoneContext);
|
4762
4805
|
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
4763
4806
|
label && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
|
4764
4807
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Layers, { size: "16" }) }),
|
@@ -4864,13 +4907,13 @@ var LayerTree = ({
|
|
4864
4907
|
};
|
4865
4908
|
|
4866
4909
|
// components/Puck/components/Outline/index.tsx
|
4867
|
-
var
|
4910
|
+
var import_react34 = require("react");
|
4868
4911
|
var import_jsx_runtime35 = require("react/jsx-runtime");
|
4869
4912
|
var Outline = () => {
|
4870
4913
|
const { dispatch, state, overrides, config } = useAppContext();
|
4871
4914
|
const { data, ui } = state;
|
4872
4915
|
const { itemSelector } = ui;
|
4873
|
-
const setItemSelector = (0,
|
4916
|
+
const setItemSelector = (0, import_react34.useCallback)(
|
4874
4917
|
(newItemSelector) => {
|
4875
4918
|
dispatch({
|
4876
4919
|
type: "setUi",
|
@@ -4879,7 +4922,7 @@ var Outline = () => {
|
|
4879
4922
|
},
|
4880
4923
|
[]
|
4881
4924
|
);
|
4882
|
-
const Wrapper = (0,
|
4925
|
+
const Wrapper = (0, import_react34.useMemo)(() => overrides.outline || "div", [overrides]);
|
4883
4926
|
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
4884
4927
|
(ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
4885
4928
|
LayerTree,
|
@@ -4993,19 +5036,19 @@ function usePuckHistory({
|
|
4993
5036
|
|
4994
5037
|
// lib/use-history-store.ts
|
4995
5038
|
init_react_import();
|
4996
|
-
var
|
5039
|
+
var import_react35 = require("react");
|
4997
5040
|
var import_use_debounce3 = require("use-debounce");
|
4998
5041
|
var EMPTY_HISTORY_INDEX = 0;
|
4999
5042
|
function useHistoryStore(initialHistory) {
|
5000
5043
|
var _a, _b;
|
5001
|
-
const [histories, setHistories] = (0,
|
5044
|
+
const [histories, setHistories] = (0, import_react35.useState)(
|
5002
5045
|
(_a = initialHistory == null ? void 0 : initialHistory.histories) != null ? _a : []
|
5003
5046
|
);
|
5004
5047
|
const updateHistories = (histories2) => {
|
5005
5048
|
setHistories(histories2);
|
5006
5049
|
setIndex(histories2.length - 1);
|
5007
5050
|
};
|
5008
|
-
const [index, setIndex] = (0,
|
5051
|
+
const [index, setIndex] = (0, import_react35.useState)(
|
5009
5052
|
(_b = initialHistory == null ? void 0 : initialHistory.index) != null ? _b : EMPTY_HISTORY_INDEX
|
5010
5053
|
);
|
5011
5054
|
const hasPast = index > EMPTY_HISTORY_INDEX;
|
@@ -5165,11 +5208,11 @@ var getBox = function getBox2(el) {
|
|
5165
5208
|
};
|
5166
5209
|
|
5167
5210
|
// components/Puck/components/Canvas/index.tsx
|
5168
|
-
var
|
5211
|
+
var import_react37 = require("react");
|
5169
5212
|
|
5170
5213
|
// components/ViewportControls/index.tsx
|
5171
5214
|
init_react_import();
|
5172
|
-
var
|
5215
|
+
var import_react36 = require("react");
|
5173
5216
|
|
5174
5217
|
// css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
|
5175
5218
|
init_react_import();
|
@@ -5192,8 +5235,8 @@ var ViewportButton = ({
|
|
5192
5235
|
onClick
|
5193
5236
|
}) => {
|
5194
5237
|
const { state } = useAppContext();
|
5195
|
-
const [isActive, setIsActive] = (0,
|
5196
|
-
(0,
|
5238
|
+
const [isActive, setIsActive] = (0, import_react36.useState)(false);
|
5239
|
+
(0, import_react36.useEffect)(() => {
|
5197
5240
|
setIsActive(width === state.ui.viewports.current.width);
|
5198
5241
|
}, [width, state.ui.viewports.current.width]);
|
5199
5242
|
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
@@ -5229,7 +5272,7 @@ var ViewportControls = ({
|
|
5229
5272
|
const defaultsContainAutoZoom = defaultZoomOptions.find(
|
5230
5273
|
(option) => option.value === autoZoom
|
5231
5274
|
);
|
5232
|
-
const zoomOptions = (0,
|
5275
|
+
const zoomOptions = (0, import_react36.useMemo)(
|
5233
5276
|
() => [
|
5234
5277
|
...defaultZoomOptions,
|
5235
5278
|
...defaultsContainAutoZoom ? [] : [
|
@@ -5352,17 +5395,17 @@ var Canvas = () => {
|
|
5352
5395
|
const { status, iframe } = useAppContext();
|
5353
5396
|
const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
|
5354
5397
|
const { ui } = state;
|
5355
|
-
const frameRef = (0,
|
5356
|
-
const [showTransition, setShowTransition] = (0,
|
5357
|
-
const defaultRender = (0,
|
5398
|
+
const frameRef = (0, import_react37.useRef)(null);
|
5399
|
+
const [showTransition, setShowTransition] = (0, import_react37.useState)(false);
|
5400
|
+
const defaultRender = (0, import_react37.useMemo)(() => {
|
5358
5401
|
const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
|
5359
5402
|
return PuckDefault;
|
5360
5403
|
}, []);
|
5361
|
-
const CustomPreview = (0,
|
5404
|
+
const CustomPreview = (0, import_react37.useMemo)(
|
5362
5405
|
() => overrides.preview || defaultRender,
|
5363
5406
|
[overrides]
|
5364
5407
|
);
|
5365
|
-
const getFrameDimensions = (0,
|
5408
|
+
const getFrameDimensions = (0, import_react37.useCallback)(() => {
|
5366
5409
|
if (frameRef.current) {
|
5367
5410
|
const frame = frameRef.current;
|
5368
5411
|
const box = getBox(frame);
|
@@ -5370,7 +5413,7 @@ var Canvas = () => {
|
|
5370
5413
|
}
|
5371
5414
|
return { width: 0, height: 0 };
|
5372
5415
|
}, [frameRef]);
|
5373
|
-
const resetAutoZoom = (0,
|
5416
|
+
const resetAutoZoom = (0, import_react37.useCallback)(
|
5374
5417
|
(ui2 = state.ui) => {
|
5375
5418
|
if (frameRef.current) {
|
5376
5419
|
setZoomConfig(
|
@@ -5380,11 +5423,11 @@ var Canvas = () => {
|
|
5380
5423
|
},
|
5381
5424
|
[frameRef, zoomConfig, state.ui]
|
5382
5425
|
);
|
5383
|
-
(0,
|
5426
|
+
(0, import_react37.useEffect)(() => {
|
5384
5427
|
setShowTransition(false);
|
5385
5428
|
resetAutoZoom();
|
5386
5429
|
}, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
|
5387
|
-
(0,
|
5430
|
+
(0, import_react37.useEffect)(() => {
|
5388
5431
|
const { height: frameHeight } = getFrameDimensions();
|
5389
5432
|
if (ui.viewports.current.height === "auto") {
|
5390
5433
|
setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
|
@@ -5392,13 +5435,13 @@ var Canvas = () => {
|
|
5392
5435
|
}));
|
5393
5436
|
}
|
5394
5437
|
}, [zoomConfig.zoom]);
|
5395
|
-
(0,
|
5438
|
+
(0, import_react37.useEffect)(() => {
|
5396
5439
|
if (ZOOM_ON_CHANGE) {
|
5397
5440
|
setShowTransition(true);
|
5398
5441
|
resetAutoZoom(ui);
|
5399
5442
|
}
|
5400
5443
|
}, [ui.viewports.current.width]);
|
5401
|
-
(0,
|
5444
|
+
(0, import_react37.useEffect)(() => {
|
5402
5445
|
const observer = new ResizeObserver(() => {
|
5403
5446
|
setShowTransition(false);
|
5404
5447
|
resetAutoZoom();
|
@@ -5410,8 +5453,8 @@ var Canvas = () => {
|
|
5410
5453
|
observer.disconnect();
|
5411
5454
|
};
|
5412
5455
|
}, []);
|
5413
|
-
const [showLoader, setShowLoader] = (0,
|
5414
|
-
(0,
|
5456
|
+
const [showLoader, setShowLoader] = (0, import_react37.useState)(false);
|
5457
|
+
(0, import_react37.useEffect)(() => {
|
5415
5458
|
setTimeout(() => {
|
5416
5459
|
setShowLoader(true);
|
5417
5460
|
}, 500);
|
@@ -5514,7 +5557,7 @@ var insertComponent = (componentType, zone, index, {
|
|
5514
5557
|
|
5515
5558
|
// lib/use-loaded-overrides.ts
|
5516
5559
|
init_react_import();
|
5517
|
-
var
|
5560
|
+
var import_react38 = require("react");
|
5518
5561
|
|
5519
5562
|
// lib/load-overrides.ts
|
5520
5563
|
init_react_import();
|
@@ -5553,7 +5596,7 @@ var useLoadedOverrides = ({
|
|
5553
5596
|
overrides,
|
5554
5597
|
plugins
|
5555
5598
|
}) => {
|
5556
|
-
return (0,
|
5599
|
+
return (0, import_react38.useMemo)(() => {
|
5557
5600
|
return loadOverrides({ overrides, plugins });
|
5558
5601
|
}, [plugins, overrides]);
|
5559
5602
|
};
|
@@ -5592,7 +5635,7 @@ function Puck({
|
|
5592
5635
|
enabled: true,
|
5593
5636
|
waitForStyles: true
|
5594
5637
|
}, _iframe);
|
5595
|
-
const [generatedAppState] = (0,
|
5638
|
+
const [generatedAppState] = (0, import_react39.useState)(() => {
|
5596
5639
|
var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
|
5597
5640
|
const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
|
5598
5641
|
let clientUiState = {};
|
@@ -5664,14 +5707,14 @@ function Puck({
|
|
5664
5707
|
histories,
|
5665
5708
|
index: initialHistoryIndex
|
5666
5709
|
});
|
5667
|
-
const [reducer] = (0,
|
5710
|
+
const [reducer] = (0, import_react39.useState)(
|
5668
5711
|
() => createReducer({
|
5669
5712
|
config,
|
5670
5713
|
record: historyStore.record,
|
5671
5714
|
onAction
|
5672
5715
|
})
|
5673
5716
|
);
|
5674
|
-
const [appState, dispatch] = (0,
|
5717
|
+
const [appState, dispatch] = (0, import_react39.useReducer)(
|
5675
5718
|
reducer,
|
5676
5719
|
flushZones(initialAppState)
|
5677
5720
|
);
|
@@ -5682,9 +5725,9 @@ function Puck({
|
|
5682
5725
|
historyStore,
|
5683
5726
|
iframeEnabled: (_a = _iframe == null ? void 0 : _iframe.enabled) != null ? _a : true
|
5684
5727
|
});
|
5685
|
-
const [menuOpen, setMenuOpen] = (0,
|
5728
|
+
const [menuOpen, setMenuOpen] = (0, import_react39.useState)(false);
|
5686
5729
|
const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
|
5687
|
-
const setItemSelector = (0,
|
5730
|
+
const setItemSelector = (0, import_react39.useCallback)(
|
5688
5731
|
(newItemSelector) => {
|
5689
5732
|
if (newItemSelector === itemSelector) return;
|
5690
5733
|
dispatch({
|
@@ -5696,13 +5739,13 @@ function Puck({
|
|
5696
5739
|
[itemSelector]
|
5697
5740
|
);
|
5698
5741
|
const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
|
5699
|
-
(0,
|
5742
|
+
(0, import_react39.useEffect)(() => {
|
5700
5743
|
if (onChange) onChange(data);
|
5701
5744
|
}, [data]);
|
5702
5745
|
const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
|
5703
|
-
const [draggedItem, setDraggedItem] = (0,
|
5746
|
+
const [draggedItem, setDraggedItem] = (0, import_react39.useState)();
|
5704
5747
|
const rootProps = data.root.props || data.root;
|
5705
|
-
const toggleSidebars = (0,
|
5748
|
+
const toggleSidebars = (0, import_react39.useCallback)(
|
5706
5749
|
(sidebar) => {
|
5707
5750
|
const widerViewport = window.matchMedia("(min-width: 638px)").matches;
|
5708
5751
|
const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
|
@@ -5716,7 +5759,7 @@ function Puck({
|
|
5716
5759
|
},
|
5717
5760
|
[dispatch, leftSideBarVisible, rightSideBarVisible]
|
5718
5761
|
);
|
5719
|
-
(0,
|
5762
|
+
(0, import_react39.useEffect)(() => {
|
5720
5763
|
if (!window.matchMedia("(min-width: 638px)").matches) {
|
5721
5764
|
dispatch({
|
5722
5765
|
type: "setUi",
|
@@ -5739,7 +5782,7 @@ function Puck({
|
|
5739
5782
|
window.removeEventListener("resize", handleResize);
|
5740
5783
|
};
|
5741
5784
|
}, []);
|
5742
|
-
const defaultHeaderRender = (0,
|
5785
|
+
const defaultHeaderRender = (0, import_react39.useMemo)(() => {
|
5743
5786
|
if (renderHeader) {
|
5744
5787
|
console.warn(
|
5745
5788
|
"`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
|
@@ -5753,7 +5796,7 @@ function Puck({
|
|
5753
5796
|
}
|
5754
5797
|
return DefaultOverride;
|
5755
5798
|
}, [renderHeader]);
|
5756
|
-
const defaultHeaderActionsRender = (0,
|
5799
|
+
const defaultHeaderActionsRender = (0, import_react39.useMemo)(() => {
|
5757
5800
|
if (renderHeaderActions) {
|
5758
5801
|
console.warn(
|
5759
5802
|
"`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
|
@@ -5770,20 +5813,20 @@ function Puck({
|
|
5770
5813
|
overrides,
|
5771
5814
|
plugins
|
5772
5815
|
});
|
5773
|
-
const CustomPuck = (0,
|
5816
|
+
const CustomPuck = (0, import_react39.useMemo)(
|
5774
5817
|
() => loadedOverrides.puck || DefaultOverride,
|
5775
5818
|
[loadedOverrides]
|
5776
5819
|
);
|
5777
|
-
const CustomHeader = (0,
|
5820
|
+
const CustomHeader = (0, import_react39.useMemo)(
|
5778
5821
|
() => loadedOverrides.header || defaultHeaderRender,
|
5779
5822
|
[loadedOverrides]
|
5780
5823
|
);
|
5781
|
-
const CustomHeaderActions = (0,
|
5824
|
+
const CustomHeaderActions = (0, import_react39.useMemo)(
|
5782
5825
|
() => loadedOverrides.headerActions || defaultHeaderActionsRender,
|
5783
5826
|
[loadedOverrides]
|
5784
5827
|
);
|
5785
|
-
const [mounted, setMounted] = (0,
|
5786
|
-
(0,
|
5828
|
+
const [mounted, setMounted] = (0, import_react39.useState)(false);
|
5829
|
+
(0, import_react39.useEffect)(() => {
|
5787
5830
|
setMounted(true);
|
5788
5831
|
}, []);
|
5789
5832
|
const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
|
package/dist/index.mjs
CHANGED
@@ -1551,12 +1551,13 @@ var DefaultField = ({
|
|
1551
1551
|
field,
|
1552
1552
|
onChange,
|
1553
1553
|
readOnly,
|
1554
|
-
value,
|
1554
|
+
value: _value,
|
1555
1555
|
name,
|
1556
1556
|
label,
|
1557
1557
|
Label,
|
1558
1558
|
id
|
1559
1559
|
}) => {
|
1560
|
+
const value = _value;
|
1560
1561
|
return /* @__PURE__ */ jsx11(
|
1561
1562
|
Label,
|
1562
1563
|
{
|
@@ -1574,7 +1575,7 @@ var DefaultField = ({
|
|
1574
1575
|
type: field.type,
|
1575
1576
|
title: label || name,
|
1576
1577
|
name,
|
1577
|
-
value:
|
1578
|
+
value: (value == null ? void 0 : value.toString) ? value.toString() : "",
|
1578
1579
|
onChange: (e) => {
|
1579
1580
|
if (field.type === "number") {
|
1580
1581
|
const numberValue = Number(e.currentTarget.value);
|
@@ -3179,9 +3180,9 @@ function DropZone(props) {
|
|
3179
3180
|
// components/Puck/index.tsx
|
3180
3181
|
init_react_import();
|
3181
3182
|
import {
|
3182
|
-
useCallback as
|
3183
|
-
useEffect as
|
3184
|
-
useMemo as
|
3183
|
+
useCallback as useCallback12,
|
3184
|
+
useEffect as useEffect19,
|
3185
|
+
useMemo as useMemo17,
|
3185
3186
|
useReducer,
|
3186
3187
|
useState as useState21
|
3187
3188
|
} from "react";
|
@@ -3795,33 +3796,58 @@ init_react_import();
|
|
3795
3796
|
var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
|
3796
3797
|
|
3797
3798
|
// components/Puck/components/Fields/index.tsx
|
3798
|
-
import {
|
3799
|
+
import { useMemo as useMemo10 } from "react";
|
3800
|
+
|
3801
|
+
// lib/use-resolved-fields.ts
|
3802
|
+
init_react_import();
|
3803
|
+
import { useCallback as useCallback8, useEffect as useEffect14, useMemo as useMemo9, useRef as useRef3, useState as useState15 } from "react";
|
3799
3804
|
|
3800
3805
|
// lib/use-parent.ts
|
3801
3806
|
init_react_import();
|
3802
|
-
import { useContext as useContext7 } from "react";
|
3803
|
-
var
|
3807
|
+
import { useCallback as useCallback7, useContext as useContext7 } from "react";
|
3808
|
+
var getParent = (itemSelector, pathData, data) => {
|
3804
3809
|
var _a;
|
3805
|
-
|
3806
|
-
const
|
3807
|
-
const
|
3808
|
-
const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
|
3810
|
+
if (!itemSelector) return null;
|
3811
|
+
const item = getItem(itemSelector, data);
|
3812
|
+
const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, data);
|
3809
3813
|
const lastItem = breadcrumbs[breadcrumbs.length - 1];
|
3810
|
-
const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector,
|
3814
|
+
const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, data)) != null ? _a : null : null;
|
3811
3815
|
return parent || null;
|
3812
3816
|
};
|
3817
|
+
var useGetParent = () => {
|
3818
|
+
const { state } = useAppContext();
|
3819
|
+
const { pathData } = useContext7(dropZoneContext) || {};
|
3820
|
+
return useCallback7(
|
3821
|
+
() => getParent(state.ui.itemSelector, pathData, state.data),
|
3822
|
+
[state.ui.itemSelector, pathData, state.data]
|
3823
|
+
);
|
3824
|
+
};
|
3825
|
+
var useParent = () => {
|
3826
|
+
return useGetParent()();
|
3827
|
+
};
|
3813
3828
|
|
3814
|
-
//
|
3815
|
-
|
3816
|
-
|
3829
|
+
// lib/use-on-value-change.ts
|
3830
|
+
init_react_import();
|
3831
|
+
import { useRef as useRef2, useEffect as useEffect13 } from "react";
|
3832
|
+
function useOnValueChange(value, onChange, compare = Object.is, deps = []) {
|
3833
|
+
const tracked = useRef2(value);
|
3834
|
+
useEffect13(() => {
|
3835
|
+
const oldValue = tracked.current;
|
3836
|
+
if (!compare(value, oldValue)) {
|
3837
|
+
tracked.current = value;
|
3838
|
+
onChange(value, oldValue);
|
3839
|
+
}
|
3840
|
+
}, [onChange, compare, value, ...deps]);
|
3841
|
+
}
|
3842
|
+
|
3843
|
+
// lib/selector-is.ts
|
3844
|
+
init_react_import();
|
3845
|
+
var selectorIs = (a, b) => (a == null ? void 0 : a.zone) === (b == null ? void 0 : b.zone) && (a == null ? void 0 : a.index) === (b == null ? void 0 : b.index);
|
3846
|
+
|
3847
|
+
// lib/use-resolved-fields.ts
|
3817
3848
|
var defaultPageFields = {
|
3818
3849
|
title: { type: "text" }
|
3819
3850
|
};
|
3820
|
-
var DefaultFields = ({
|
3821
|
-
children
|
3822
|
-
}) => {
|
3823
|
-
return /* @__PURE__ */ jsx28(Fragment12, { children });
|
3824
|
-
};
|
3825
3851
|
var useResolvedFields = () => {
|
3826
3852
|
var _a, _b;
|
3827
3853
|
const { selectedItem, state, config } = useAppContext();
|
@@ -3837,12 +3863,13 @@ var useResolvedFields = () => {
|
|
3837
3863
|
const [lastSelectedData, setLastSelectedData] = useState15({});
|
3838
3864
|
const [resolvedFields, setResolvedFields] = useState15(defaultFields);
|
3839
3865
|
const [fieldsLoading, setFieldsLoading] = useState15(false);
|
3866
|
+
const lastFields = useRef3(defaultFields);
|
3840
3867
|
const defaultResolveFields = (_componentData, _params) => defaultFields;
|
3841
3868
|
const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
|
3842
3869
|
const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
|
3843
3870
|
const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
|
3844
3871
|
const hasResolver = hasComponentResolver || hasRootResolver;
|
3845
|
-
const resolveFields =
|
3872
|
+
const resolveFields = useCallback8(
|
3846
3873
|
(..._0) => __async(void 0, [..._0], function* (fields = {}) {
|
3847
3874
|
var _a2;
|
3848
3875
|
const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
|
@@ -3854,7 +3881,7 @@ var useResolvedFields = () => {
|
|
3854
3881
|
{
|
3855
3882
|
changed,
|
3856
3883
|
fields,
|
3857
|
-
lastFields:
|
3884
|
+
lastFields: lastFields.current,
|
3858
3885
|
lastData,
|
3859
3886
|
appState: state,
|
3860
3887
|
parent
|
@@ -3865,7 +3892,7 @@ var useResolvedFields = () => {
|
|
3865
3892
|
return yield config.root.resolveFields(componentData, {
|
3866
3893
|
changed,
|
3867
3894
|
fields,
|
3868
|
-
lastFields:
|
3895
|
+
lastFields: lastFields.current,
|
3869
3896
|
lastData,
|
3870
3897
|
appState: state,
|
3871
3898
|
parent
|
@@ -3874,40 +3901,56 @@ var useResolvedFields = () => {
|
|
3874
3901
|
return defaultResolveFields(componentData, {
|
3875
3902
|
changed,
|
3876
3903
|
fields,
|
3877
|
-
lastFields:
|
3904
|
+
lastFields: lastFields.current,
|
3878
3905
|
lastData
|
3879
3906
|
});
|
3880
3907
|
}),
|
3881
|
-
[data, config, componentData, selectedItem,
|
3908
|
+
[data, config, componentData, selectedItem, state, parent]
|
3882
3909
|
);
|
3883
|
-
const
|
3884
|
-
useEffect13(() => {
|
3885
|
-
setHasParent(!!parent);
|
3886
|
-
}, [parent]);
|
3887
|
-
useEffect13(() => {
|
3910
|
+
const triggerResolver = useCallback8(() => {
|
3888
3911
|
var _a2, _b2;
|
3889
|
-
if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" ||
|
3912
|
+
if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" || parent) {
|
3890
3913
|
if (hasResolver) {
|
3891
3914
|
setFieldsLoading(true);
|
3892
3915
|
resolveFields(defaultFields).then((fields) => {
|
3893
3916
|
setResolvedFields(fields || {});
|
3917
|
+
lastFields.current = fields;
|
3894
3918
|
setFieldsLoading(false);
|
3895
3919
|
});
|
3896
|
-
|
3897
|
-
setResolvedFields(defaultFields);
|
3920
|
+
return;
|
3898
3921
|
}
|
3899
3922
|
}
|
3900
|
-
|
3901
|
-
|
3902
|
-
|
3923
|
+
setResolvedFields(defaultFields);
|
3924
|
+
}, [defaultFields, state.ui.itemSelector, hasResolver, parent]);
|
3925
|
+
useOnValueChange(
|
3903
3926
|
state.ui.itemSelector,
|
3904
|
-
|
3905
|
-
|
3906
|
-
|
3907
|
-
|
3927
|
+
() => {
|
3928
|
+
lastFields.current = defaultFields;
|
3929
|
+
},
|
3930
|
+
selectorIs
|
3931
|
+
);
|
3932
|
+
useOnValueChange(
|
3933
|
+
{ data, parent, itemSelector: state.ui.itemSelector },
|
3934
|
+
() => {
|
3935
|
+
triggerResolver();
|
3936
|
+
},
|
3937
|
+
(a, b) => JSON.stringify(a) === JSON.stringify(b)
|
3938
|
+
);
|
3939
|
+
useEffect14(() => {
|
3940
|
+
triggerResolver();
|
3941
|
+
}, []);
|
3908
3942
|
return [resolvedFields, fieldsLoading];
|
3909
3943
|
};
|
3910
|
-
|
3944
|
+
|
3945
|
+
// components/Puck/components/Fields/index.tsx
|
3946
|
+
import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
|
3947
|
+
var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
|
3948
|
+
var DefaultFields = ({
|
3949
|
+
children
|
3950
|
+
}) => {
|
3951
|
+
return /* @__PURE__ */ jsx28(Fragment12, { children });
|
3952
|
+
};
|
3953
|
+
var Fields = ({ wrapFields = true }) => {
|
3911
3954
|
var _a, _b;
|
3912
3955
|
const {
|
3913
3956
|
selectedItem,
|
@@ -3925,7 +3968,7 @@ var Fields = () => {
|
|
3925
3968
|
const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
|
3926
3969
|
const isLoading = fieldsResolving || componentResolving;
|
3927
3970
|
const rootProps = data.root.props || data.root;
|
3928
|
-
const Wrapper =
|
3971
|
+
const Wrapper = useMemo10(() => overrides.fields || DefaultFields, [overrides]);
|
3929
3972
|
return /* @__PURE__ */ jsxs15(
|
3930
3973
|
"form",
|
3931
3974
|
{
|
@@ -4048,7 +4091,7 @@ init_react_import();
|
|
4048
4091
|
|
4049
4092
|
// lib/use-component-list.tsx
|
4050
4093
|
init_react_import();
|
4051
|
-
import { useEffect as
|
4094
|
+
import { useEffect as useEffect15, useState as useState16 } from "react";
|
4052
4095
|
|
4053
4096
|
// components/ComponentList/index.tsx
|
4054
4097
|
init_react_import();
|
@@ -4127,7 +4170,7 @@ ComponentList.Item = ComponentListItem;
|
|
4127
4170
|
import { jsx as jsx30 } from "react/jsx-runtime";
|
4128
4171
|
var useComponentList = (config, ui) => {
|
4129
4172
|
const [componentList, setComponentList] = useState16();
|
4130
|
-
|
4173
|
+
useEffect15(() => {
|
4131
4174
|
var _a, _b, _c;
|
4132
4175
|
if (Object.keys(ui.componentList).length > 0) {
|
4133
4176
|
const matchedComponents = [];
|
@@ -4196,26 +4239,26 @@ var useComponentList = (config, ui) => {
|
|
4196
4239
|
};
|
4197
4240
|
|
4198
4241
|
// components/Puck/components/Components/index.tsx
|
4199
|
-
import { useMemo as
|
4242
|
+
import { useMemo as useMemo11 } from "react";
|
4200
4243
|
import { jsx as jsx31 } from "react/jsx-runtime";
|
4201
4244
|
var Components = () => {
|
4202
4245
|
const { config, state, overrides } = useAppContext();
|
4203
4246
|
const componentList = useComponentList(config, state.ui);
|
4204
|
-
const Wrapper =
|
4247
|
+
const Wrapper = useMemo11(() => overrides.components || "div", [overrides]);
|
4205
4248
|
return /* @__PURE__ */ jsx31(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx31(ComponentList, { id: "all" }) });
|
4206
4249
|
};
|
4207
4250
|
|
4208
4251
|
// components/Puck/components/Preview/index.tsx
|
4209
4252
|
init_react_import();
|
4210
|
-
import { useCallback as
|
4253
|
+
import { useCallback as useCallback9, useMemo as useMemo12 } from "react";
|
4211
4254
|
|
4212
4255
|
// components/AutoFrame/index.tsx
|
4213
4256
|
init_react_import();
|
4214
4257
|
import {
|
4215
4258
|
createContext as createContext5,
|
4216
4259
|
useContext as useContext8,
|
4217
|
-
useEffect as
|
4218
|
-
useRef as
|
4260
|
+
useEffect as useEffect16,
|
4261
|
+
useRef as useRef4,
|
4219
4262
|
useState as useState17
|
4220
4263
|
} from "react";
|
4221
4264
|
import hash from "object-hash";
|
@@ -4263,7 +4306,7 @@ var CopyHostStyles = ({
|
|
4263
4306
|
onStylesLoaded = () => null
|
4264
4307
|
}) => {
|
4265
4308
|
const { document: doc, window: win } = useFrame();
|
4266
|
-
|
4309
|
+
useEffect16(() => {
|
4267
4310
|
if (!win || !doc) {
|
4268
4311
|
return () => {
|
4269
4312
|
};
|
@@ -4440,9 +4483,9 @@ function AutoFrame(_a) {
|
|
4440
4483
|
]);
|
4441
4484
|
const [loaded, setLoaded] = useState17(false);
|
4442
4485
|
const [ctx, setCtx] = useState17({});
|
4443
|
-
const ref =
|
4486
|
+
const ref = useRef4(null);
|
4444
4487
|
const [mountTarget, setMountTarget] = useState17();
|
4445
|
-
|
4488
|
+
useEffect16(() => {
|
4446
4489
|
var _a2;
|
4447
4490
|
if (ref.current) {
|
4448
4491
|
setCtx({
|
@@ -4478,7 +4521,7 @@ import { Fragment as Fragment14, jsx as jsx33 } from "react/jsx-runtime";
|
|
4478
4521
|
var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
|
4479
4522
|
var Preview = ({ id = "puck-preview" }) => {
|
4480
4523
|
const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
|
4481
|
-
const Page =
|
4524
|
+
const Page = useCallback9(
|
4482
4525
|
(pageProps) => {
|
4483
4526
|
var _a, _b;
|
4484
4527
|
return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
|
@@ -4487,7 +4530,7 @@ var Preview = ({ id = "puck-preview" }) => {
|
|
4487
4530
|
},
|
4488
4531
|
[config.root]
|
4489
4532
|
);
|
4490
|
-
const Frame =
|
4533
|
+
const Frame = useMemo12(() => overrides.iframe, [overrides]);
|
4491
4534
|
const rootProps = state.data.root.props || state.data.root;
|
4492
4535
|
return /* @__PURE__ */ jsx33(
|
4493
4536
|
"div",
|
@@ -4709,13 +4752,13 @@ var LayerTree = ({
|
|
4709
4752
|
};
|
4710
4753
|
|
4711
4754
|
// components/Puck/components/Outline/index.tsx
|
4712
|
-
import { useCallback as
|
4755
|
+
import { useCallback as useCallback10, useMemo as useMemo13 } from "react";
|
4713
4756
|
import { Fragment as Fragment16, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
|
4714
4757
|
var Outline = () => {
|
4715
4758
|
const { dispatch, state, overrides, config } = useAppContext();
|
4716
4759
|
const { data, ui } = state;
|
4717
4760
|
const { itemSelector } = ui;
|
4718
|
-
const setItemSelector =
|
4761
|
+
const setItemSelector = useCallback10(
|
4719
4762
|
(newItemSelector) => {
|
4720
4763
|
dispatch({
|
4721
4764
|
type: "setUi",
|
@@ -4724,7 +4767,7 @@ var Outline = () => {
|
|
4724
4767
|
},
|
4725
4768
|
[]
|
4726
4769
|
);
|
4727
|
-
const Wrapper =
|
4770
|
+
const Wrapper = useMemo13(() => overrides.outline || "div", [overrides]);
|
4728
4771
|
return /* @__PURE__ */ jsx35(Wrapper, { children: /* @__PURE__ */ jsx35(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs18(Fragment16, { children: [
|
4729
4772
|
(ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx35(
|
4730
4773
|
LayerTree,
|
@@ -5011,16 +5054,16 @@ var getBox = function getBox2(el) {
|
|
5011
5054
|
|
5012
5055
|
// components/Puck/components/Canvas/index.tsx
|
5013
5056
|
import {
|
5014
|
-
useCallback as
|
5015
|
-
useEffect as
|
5016
|
-
useMemo as
|
5017
|
-
useRef as
|
5057
|
+
useCallback as useCallback11,
|
5058
|
+
useEffect as useEffect18,
|
5059
|
+
useMemo as useMemo15,
|
5060
|
+
useRef as useRef5,
|
5018
5061
|
useState as useState20
|
5019
5062
|
} from "react";
|
5020
5063
|
|
5021
5064
|
// components/ViewportControls/index.tsx
|
5022
5065
|
init_react_import();
|
5023
|
-
import { useEffect as
|
5066
|
+
import { useEffect as useEffect17, useMemo as useMemo14, useState as useState19 } from "react";
|
5024
5067
|
|
5025
5068
|
// css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
|
5026
5069
|
init_react_import();
|
@@ -5044,7 +5087,7 @@ var ViewportButton = ({
|
|
5044
5087
|
}) => {
|
5045
5088
|
const { state } = useAppContext();
|
5046
5089
|
const [isActive, setIsActive] = useState19(false);
|
5047
|
-
|
5090
|
+
useEffect17(() => {
|
5048
5091
|
setIsActive(width === state.ui.viewports.current.width);
|
5049
5092
|
}, [width, state.ui.viewports.current.width]);
|
5050
5093
|
return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
|
@@ -5080,7 +5123,7 @@ var ViewportControls = ({
|
|
5080
5123
|
const defaultsContainAutoZoom = defaultZoomOptions.find(
|
5081
5124
|
(option) => option.value === autoZoom
|
5082
5125
|
);
|
5083
|
-
const zoomOptions =
|
5126
|
+
const zoomOptions = useMemo14(
|
5084
5127
|
() => [
|
5085
5128
|
...defaultZoomOptions,
|
5086
5129
|
...defaultsContainAutoZoom ? [] : [
|
@@ -5203,17 +5246,17 @@ var Canvas = () => {
|
|
5203
5246
|
const { status, iframe } = useAppContext();
|
5204
5247
|
const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
|
5205
5248
|
const { ui } = state;
|
5206
|
-
const frameRef =
|
5249
|
+
const frameRef = useRef5(null);
|
5207
5250
|
const [showTransition, setShowTransition] = useState20(false);
|
5208
|
-
const defaultRender =
|
5251
|
+
const defaultRender = useMemo15(() => {
|
5209
5252
|
const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment17, { children });
|
5210
5253
|
return PuckDefault;
|
5211
5254
|
}, []);
|
5212
|
-
const CustomPreview =
|
5255
|
+
const CustomPreview = useMemo15(
|
5213
5256
|
() => overrides.preview || defaultRender,
|
5214
5257
|
[overrides]
|
5215
5258
|
);
|
5216
|
-
const getFrameDimensions =
|
5259
|
+
const getFrameDimensions = useCallback11(() => {
|
5217
5260
|
if (frameRef.current) {
|
5218
5261
|
const frame = frameRef.current;
|
5219
5262
|
const box = getBox(frame);
|
@@ -5221,7 +5264,7 @@ var Canvas = () => {
|
|
5221
5264
|
}
|
5222
5265
|
return { width: 0, height: 0 };
|
5223
5266
|
}, [frameRef]);
|
5224
|
-
const resetAutoZoom =
|
5267
|
+
const resetAutoZoom = useCallback11(
|
5225
5268
|
(ui2 = state.ui) => {
|
5226
5269
|
if (frameRef.current) {
|
5227
5270
|
setZoomConfig(
|
@@ -5231,11 +5274,11 @@ var Canvas = () => {
|
|
5231
5274
|
},
|
5232
5275
|
[frameRef, zoomConfig, state.ui]
|
5233
5276
|
);
|
5234
|
-
|
5277
|
+
useEffect18(() => {
|
5235
5278
|
setShowTransition(false);
|
5236
5279
|
resetAutoZoom();
|
5237
5280
|
}, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
|
5238
|
-
|
5281
|
+
useEffect18(() => {
|
5239
5282
|
const { height: frameHeight } = getFrameDimensions();
|
5240
5283
|
if (ui.viewports.current.height === "auto") {
|
5241
5284
|
setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
|
@@ -5243,13 +5286,13 @@ var Canvas = () => {
|
|
5243
5286
|
}));
|
5244
5287
|
}
|
5245
5288
|
}, [zoomConfig.zoom]);
|
5246
|
-
|
5289
|
+
useEffect18(() => {
|
5247
5290
|
if (ZOOM_ON_CHANGE) {
|
5248
5291
|
setShowTransition(true);
|
5249
5292
|
resetAutoZoom(ui);
|
5250
5293
|
}
|
5251
5294
|
}, [ui.viewports.current.width]);
|
5252
|
-
|
5295
|
+
useEffect18(() => {
|
5253
5296
|
const observer = new ResizeObserver(() => {
|
5254
5297
|
setShowTransition(false);
|
5255
5298
|
resetAutoZoom();
|
@@ -5262,7 +5305,7 @@ var Canvas = () => {
|
|
5262
5305
|
};
|
5263
5306
|
}, []);
|
5264
5307
|
const [showLoader, setShowLoader] = useState20(false);
|
5265
|
-
|
5308
|
+
useEffect18(() => {
|
5266
5309
|
setTimeout(() => {
|
5267
5310
|
setShowLoader(true);
|
5268
5311
|
}, 500);
|
@@ -5365,7 +5408,7 @@ var insertComponent = (componentType, zone, index, {
|
|
5365
5408
|
|
5366
5409
|
// lib/use-loaded-overrides.ts
|
5367
5410
|
init_react_import();
|
5368
|
-
import { useMemo as
|
5411
|
+
import { useMemo as useMemo16 } from "react";
|
5369
5412
|
|
5370
5413
|
// lib/load-overrides.ts
|
5371
5414
|
init_react_import();
|
@@ -5404,7 +5447,7 @@ var useLoadedOverrides = ({
|
|
5404
5447
|
overrides,
|
5405
5448
|
plugins
|
5406
5449
|
}) => {
|
5407
|
-
return
|
5450
|
+
return useMemo16(() => {
|
5408
5451
|
return loadOverrides({ overrides, plugins });
|
5409
5452
|
}, [plugins, overrides]);
|
5410
5453
|
};
|
@@ -5535,7 +5578,7 @@ function Puck({
|
|
5535
5578
|
});
|
5536
5579
|
const [menuOpen, setMenuOpen] = useState21(false);
|
5537
5580
|
const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
|
5538
|
-
const setItemSelector =
|
5581
|
+
const setItemSelector = useCallback12(
|
5539
5582
|
(newItemSelector) => {
|
5540
5583
|
if (newItemSelector === itemSelector) return;
|
5541
5584
|
dispatch({
|
@@ -5547,13 +5590,13 @@ function Puck({
|
|
5547
5590
|
[itemSelector]
|
5548
5591
|
);
|
5549
5592
|
const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
|
5550
|
-
|
5593
|
+
useEffect19(() => {
|
5551
5594
|
if (onChange) onChange(data);
|
5552
5595
|
}, [data]);
|
5553
5596
|
const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
|
5554
5597
|
const [draggedItem, setDraggedItem] = useState21();
|
5555
5598
|
const rootProps = data.root.props || data.root;
|
5556
|
-
const toggleSidebars =
|
5599
|
+
const toggleSidebars = useCallback12(
|
5557
5600
|
(sidebar) => {
|
5558
5601
|
const widerViewport = window.matchMedia("(min-width: 638px)").matches;
|
5559
5602
|
const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
|
@@ -5567,7 +5610,7 @@ function Puck({
|
|
5567
5610
|
},
|
5568
5611
|
[dispatch, leftSideBarVisible, rightSideBarVisible]
|
5569
5612
|
);
|
5570
|
-
|
5613
|
+
useEffect19(() => {
|
5571
5614
|
if (!window.matchMedia("(min-width: 638px)").matches) {
|
5572
5615
|
dispatch({
|
5573
5616
|
type: "setUi",
|
@@ -5590,7 +5633,7 @@ function Puck({
|
|
5590
5633
|
window.removeEventListener("resize", handleResize);
|
5591
5634
|
};
|
5592
5635
|
}, []);
|
5593
|
-
const defaultHeaderRender =
|
5636
|
+
const defaultHeaderRender = useMemo17(() => {
|
5594
5637
|
if (renderHeader) {
|
5595
5638
|
console.warn(
|
5596
5639
|
"`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
|
@@ -5604,7 +5647,7 @@ function Puck({
|
|
5604
5647
|
}
|
5605
5648
|
return DefaultOverride;
|
5606
5649
|
}, [renderHeader]);
|
5607
|
-
const defaultHeaderActionsRender =
|
5650
|
+
const defaultHeaderActionsRender = useMemo17(() => {
|
5608
5651
|
if (renderHeaderActions) {
|
5609
5652
|
console.warn(
|
5610
5653
|
"`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
|
@@ -5621,20 +5664,20 @@ function Puck({
|
|
5621
5664
|
overrides,
|
5622
5665
|
plugins
|
5623
5666
|
});
|
5624
|
-
const CustomPuck =
|
5667
|
+
const CustomPuck = useMemo17(
|
5625
5668
|
() => loadedOverrides.puck || DefaultOverride,
|
5626
5669
|
[loadedOverrides]
|
5627
5670
|
);
|
5628
|
-
const CustomHeader =
|
5671
|
+
const CustomHeader = useMemo17(
|
5629
5672
|
() => loadedOverrides.header || defaultHeaderRender,
|
5630
5673
|
[loadedOverrides]
|
5631
5674
|
);
|
5632
|
-
const CustomHeaderActions =
|
5675
|
+
const CustomHeaderActions = useMemo17(
|
5633
5676
|
() => loadedOverrides.headerActions || defaultHeaderActionsRender,
|
5634
5677
|
[loadedOverrides]
|
5635
5678
|
);
|
5636
5679
|
const [mounted, setMounted] = useState21(false);
|
5637
|
-
|
5680
|
+
useEffect19(() => {
|
5638
5681
|
setMounted(true);
|
5639
5682
|
}, []);
|
5640
5683
|
const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
|
package/package.json
CHANGED