@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 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: () => react_jsx_runtime.JSX.Element;
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: () => react_jsx_runtime.JSX.Element;
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: typeof value === "undefined" ? "" : value.toString(),
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 import_react37 = require("react");
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 import_react26 = require("react");
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 useParent = (itemSelector) => {
3969
+ var getParent = (itemSelector, pathData, data) => {
3965
3970
  var _a;
3966
- const { selectedItem, state } = useAppContext();
3967
- const { pathData } = (0, import_react25.useContext)(dropZoneContext) || {};
3968
- const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
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, state.data)) != null ? _a : null : null;
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
- // components/Puck/components/Fields/index.tsx
3976
- var import_jsx_runtime28 = require("react/jsx-runtime");
3977
- var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
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, import_react26.useMemo)(
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, import_react26.useState)({});
3999
- const [resolvedFields, setResolvedFields] = (0, import_react26.useState)(defaultFields);
4000
- const [fieldsLoading, setFieldsLoading] = (0, import_react26.useState)(false);
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, import_react26.useCallback)(
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: resolvedFields,
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: resolvedFields,
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: resolvedFields,
4065
+ lastFields: lastFields.current,
4039
4066
  lastData
4040
4067
  });
4041
4068
  }),
4042
- [data, config, componentData, selectedItem, resolvedFields, state, parent]
4069
+ [data, config, componentData, selectedItem, state, parent]
4043
4070
  );
4044
- const [hasParent, setHasParent] = (0, import_react26.useState)(false);
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" || hasParent) {
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
- } else {
4058
- setResolvedFields(defaultFields);
4081
+ return;
4059
4082
  }
4060
4083
  }
4061
- }, [
4062
- data,
4063
- defaultFields,
4084
+ setResolvedFields(defaultFields);
4085
+ }, [defaultFields, state.ui.itemSelector, hasResolver, parent]);
4086
+ useOnValueChange(
4064
4087
  state.ui.itemSelector,
4065
- selectedItem,
4066
- hasResolver,
4067
- hasParent
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
- var Fields = () => {
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, import_react26.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
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 import_react27 = require("react");
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, import_react27.useState)();
4291
- (0, import_react27.useEffect)(() => {
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 import_react28 = require("react");
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, import_react28.useMemo)(() => overrides.components || "div", [overrides]);
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 import_react30 = require("react");
4414
+ var import_react32 = require("react");
4372
4415
 
4373
4416
  // components/AutoFrame/index.tsx
4374
4417
  init_react_import();
4375
- var import_react29 = require("react");
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, import_react29.useEffect)(() => {
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, import_react29.createContext)({});
4581
- var useFrame = () => (0, import_react29.useContext)(autoFrameContext);
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, import_react29.useState)(false);
4597
- const [ctx, setCtx] = (0, import_react29.useState)({});
4598
- const ref = (0, import_react29.useRef)(null);
4599
- const [mountTarget, setMountTarget] = (0, import_react29.useState)();
4600
- (0, import_react29.useEffect)(() => {
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, import_react30.useCallback)(
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, import_react30.useMemo)(() => overrides.iframe, [overrides]);
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 import_react31 = require("react");
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, import_react31.useContext)(dropZoneContext);
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 import_react32 = require("react");
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, import_react32.useCallback)(
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, import_react32.useMemo)(() => overrides.outline || "div", [overrides]);
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 import_react33 = require("react");
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, import_react33.useState)(
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, import_react33.useState)(
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 import_react35 = require("react");
5211
+ var import_react37 = require("react");
5169
5212
 
5170
5213
  // components/ViewportControls/index.tsx
5171
5214
  init_react_import();
5172
- var import_react34 = require("react");
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, import_react34.useState)(false);
5196
- (0, import_react34.useEffect)(() => {
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, import_react34.useMemo)(
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, import_react35.useRef)(null);
5356
- const [showTransition, setShowTransition] = (0, import_react35.useState)(false);
5357
- const defaultRender = (0, import_react35.useMemo)(() => {
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, import_react35.useMemo)(
5404
+ const CustomPreview = (0, import_react37.useMemo)(
5362
5405
  () => overrides.preview || defaultRender,
5363
5406
  [overrides]
5364
5407
  );
5365
- const getFrameDimensions = (0, import_react35.useCallback)(() => {
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, import_react35.useCallback)(
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, import_react35.useEffect)(() => {
5426
+ (0, import_react37.useEffect)(() => {
5384
5427
  setShowTransition(false);
5385
5428
  resetAutoZoom();
5386
5429
  }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
5387
- (0, import_react35.useEffect)(() => {
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, import_react35.useEffect)(() => {
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, import_react35.useEffect)(() => {
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, import_react35.useState)(false);
5414
- (0, import_react35.useEffect)(() => {
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 import_react36 = require("react");
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, import_react36.useMemo)(() => {
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, import_react37.useState)(() => {
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, import_react37.useState)(
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, import_react37.useReducer)(
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, import_react37.useState)(false);
5728
+ const [menuOpen, setMenuOpen] = (0, import_react39.useState)(false);
5686
5729
  const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
5687
- const setItemSelector = (0, import_react37.useCallback)(
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, import_react37.useEffect)(() => {
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, import_react37.useState)();
5746
+ const [draggedItem, setDraggedItem] = (0, import_react39.useState)();
5704
5747
  const rootProps = data.root.props || data.root;
5705
- const toggleSidebars = (0, import_react37.useCallback)(
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, import_react37.useEffect)(() => {
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, import_react37.useMemo)(() => {
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, import_react37.useMemo)(() => {
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, import_react37.useMemo)(
5816
+ const CustomPuck = (0, import_react39.useMemo)(
5774
5817
  () => loadedOverrides.puck || DefaultOverride,
5775
5818
  [loadedOverrides]
5776
5819
  );
5777
- const CustomHeader = (0, import_react37.useMemo)(
5820
+ const CustomHeader = (0, import_react39.useMemo)(
5778
5821
  () => loadedOverrides.header || defaultHeaderRender,
5779
5822
  [loadedOverrides]
5780
5823
  );
5781
- const CustomHeaderActions = (0, import_react37.useMemo)(
5824
+ const CustomHeaderActions = (0, import_react39.useMemo)(
5782
5825
  () => loadedOverrides.headerActions || defaultHeaderActionsRender,
5783
5826
  [loadedOverrides]
5784
5827
  );
5785
- const [mounted, setMounted] = (0, import_react37.useState)(false);
5786
- (0, import_react37.useEffect)(() => {
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: typeof value === "undefined" ? "" : value.toString(),
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 useCallback11,
3183
- useEffect as useEffect18,
3184
- useMemo as useMemo16,
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 { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo9, useState as useState15 } from "react";
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 useParent = (itemSelector) => {
3807
+ import { useCallback as useCallback7, useContext as useContext7 } from "react";
3808
+ var getParent = (itemSelector, pathData, data) => {
3804
3809
  var _a;
3805
- const { selectedItem, state } = useAppContext();
3806
- const { pathData } = useContext7(dropZoneContext) || {};
3807
- const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
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, state.data)) != null ? _a : null : null;
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
- // components/Puck/components/Fields/index.tsx
3815
- import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
3816
- var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
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 = useCallback7(
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: resolvedFields,
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: resolvedFields,
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: resolvedFields,
3904
+ lastFields: lastFields.current,
3878
3905
  lastData
3879
3906
  });
3880
3907
  }),
3881
- [data, config, componentData, selectedItem, resolvedFields, state, parent]
3908
+ [data, config, componentData, selectedItem, state, parent]
3882
3909
  );
3883
- const [hasParent, setHasParent] = useState15(false);
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" || hasParent) {
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
- } else {
3897
- setResolvedFields(defaultFields);
3920
+ return;
3898
3921
  }
3899
3922
  }
3900
- }, [
3901
- data,
3902
- defaultFields,
3923
+ setResolvedFields(defaultFields);
3924
+ }, [defaultFields, state.ui.itemSelector, hasResolver, parent]);
3925
+ useOnValueChange(
3903
3926
  state.ui.itemSelector,
3904
- selectedItem,
3905
- hasResolver,
3906
- hasParent
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
- var Fields = () => {
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 = useMemo9(() => overrides.fields || DefaultFields, [overrides]);
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 useEffect14, useState as useState16 } from "react";
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
- useEffect14(() => {
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 useMemo10 } from "react";
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 = useMemo10(() => overrides.components || "div", [overrides]);
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 useCallback8, useMemo as useMemo11 } from "react";
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 useEffect15,
4218
- useRef as useRef2,
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
- useEffect15(() => {
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 = useRef2(null);
4486
+ const ref = useRef4(null);
4444
4487
  const [mountTarget, setMountTarget] = useState17();
4445
- useEffect15(() => {
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 = useCallback8(
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 = useMemo11(() => overrides.iframe, [overrides]);
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 useCallback9, useMemo as useMemo12 } from "react";
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 = useCallback9(
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 = useMemo12(() => overrides.outline || "div", [overrides]);
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 useCallback10,
5015
- useEffect as useEffect17,
5016
- useMemo as useMemo14,
5017
- useRef as useRef3,
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 useEffect16, useMemo as useMemo13, useState as useState19 } from "react";
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
- useEffect16(() => {
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 = useMemo13(
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 = useRef3(null);
5249
+ const frameRef = useRef5(null);
5207
5250
  const [showTransition, setShowTransition] = useState20(false);
5208
- const defaultRender = useMemo14(() => {
5251
+ const defaultRender = useMemo15(() => {
5209
5252
  const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment17, { children });
5210
5253
  return PuckDefault;
5211
5254
  }, []);
5212
- const CustomPreview = useMemo14(
5255
+ const CustomPreview = useMemo15(
5213
5256
  () => overrides.preview || defaultRender,
5214
5257
  [overrides]
5215
5258
  );
5216
- const getFrameDimensions = useCallback10(() => {
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 = useCallback10(
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
- useEffect17(() => {
5277
+ useEffect18(() => {
5235
5278
  setShowTransition(false);
5236
5279
  resetAutoZoom();
5237
5280
  }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
5238
- useEffect17(() => {
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
- useEffect17(() => {
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
- useEffect17(() => {
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
- useEffect17(() => {
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 useMemo15 } from "react";
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 useMemo15(() => {
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 = useCallback11(
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
- useEffect18(() => {
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 = useCallback11(
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
- useEffect18(() => {
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 = useMemo16(() => {
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 = useMemo16(() => {
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 = useMemo16(
5667
+ const CustomPuck = useMemo17(
5625
5668
  () => loadedOverrides.puck || DefaultOverride,
5626
5669
  [loadedOverrides]
5627
5670
  );
5628
- const CustomHeader = useMemo16(
5671
+ const CustomHeader = useMemo17(
5629
5672
  () => loadedOverrides.header || defaultHeaderRender,
5630
5673
  [loadedOverrides]
5631
5674
  );
5632
- const CustomHeaderActions = useMemo16(
5675
+ const CustomHeaderActions = useMemo17(
5633
5676
  () => loadedOverrides.headerActions || defaultHeaderActionsRender,
5634
5677
  [loadedOverrides]
5635
5678
  );
5636
5679
  const [mounted, setMounted] = useState21(false);
5637
- useEffect18(() => {
5680
+ useEffect19(() => {
5638
5681
  setMounted(true);
5639
5682
  }, []);
5640
5683
  const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@measured/puck",
3
- "version": "0.17.4-canary.62d9972",
3
+ "version": "0.17.4-canary.e778246",
4
4
  "author": "Measured Corporation Ltd <hello@measured.co>",
5
5
  "repository": "measuredco/puck",
6
6
  "bugs": "https://github.com/measuredco/puck/issues",