@measured/puck 0.18.0-canary.4a04445 → 0.18.0-canary.51219fa

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.mjs CHANGED
@@ -205,7 +205,7 @@ init_react_import();
205
205
 
206
206
  // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
207
207
  init_react_import();
208
- var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
208
+ var styles_module_default2 = { "InputWrapper": "_InputWrapper_1h1p1_1", "Input-label": "_Input-label_1h1p1_5", "Input-labelIcon": "_Input-labelIcon_1h1p1_14", "Input-disabledIcon": "_Input-disabledIcon_1h1p1_21", "Input-input": "_Input-input_1h1p1_26", "Input": "_Input_1h1p1_1", "Input--readOnly": "_Input--readOnly_1h1p1_70", "Input-radioGroupItems": "_Input-radioGroupItems_1h1p1_81", "Input-radio": "_Input-radio_1h1p1_81", "Input-radioInner": "_Input-radioInner_1h1p1_98", "Input-radioInput": "_Input-radioInput_1h1p1_143" };
209
209
 
210
210
  // components/AutoField/index.tsx
211
211
  import {
@@ -1504,12 +1504,13 @@ var DefaultField = ({
1504
1504
  field,
1505
1505
  onChange,
1506
1506
  readOnly,
1507
- value,
1507
+ value: _value,
1508
1508
  name,
1509
1509
  label,
1510
1510
  Label: Label2,
1511
1511
  id
1512
1512
  }) => {
1513
+ const value = _value;
1513
1514
  return /* @__PURE__ */ jsx9(
1514
1515
  Label2,
1515
1516
  {
@@ -1527,7 +1528,7 @@ var DefaultField = ({
1527
1528
  type: field.type,
1528
1529
  title: label || name,
1529
1530
  name,
1530
- value: typeof value === "undefined" ? "" : value.toString(),
1531
+ value: (value == null ? void 0 : value.toString) ? value.toString() : "",
1531
1532
  onChange: (e) => {
1532
1533
  if (field.type === "number") {
1533
1534
  const numberValue = Number(e.currentTarget.value);
@@ -2436,7 +2437,7 @@ import {
2436
2437
  useContext as useContext7,
2437
2438
  useEffect as useEffect15,
2438
2439
  useId,
2439
- useRef as useRef4,
2440
+ useRef as useRef3,
2440
2441
  useState as useState17
2441
2442
  } from "react";
2442
2443
  import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
@@ -2449,7 +2450,7 @@ import {
2449
2450
  useContext as useContext6,
2450
2451
  useEffect as useEffect14,
2451
2452
  useMemo as useMemo8,
2452
- useRef as useRef3
2453
+ useRef as useRef2
2453
2454
  } from "react";
2454
2455
 
2455
2456
  // components/DraggableComponent/index.tsx
@@ -2459,7 +2460,7 @@ import {
2459
2460
  useContext as useContext5,
2460
2461
  useEffect as useEffect10,
2461
2462
  useMemo as useMemo7,
2462
- useRef as useRef2,
2463
+ useRef,
2463
2464
  useState as useState13
2464
2465
  } from "react";
2465
2466
 
@@ -3047,7 +3048,7 @@ var DraggableComponent = ({
3047
3048
  }
3048
3049
  });
3049
3050
  const thisIsDragging = status === "dragging";
3050
- const ref = useRef2(null);
3051
+ const ref = useRef(null);
3051
3052
  const refSetter = useCallback7(
3052
3053
  (el) => {
3053
3054
  sortableRef(el);
@@ -3098,13 +3099,19 @@ var DraggableComponent = ({
3098
3099
  }
3099
3100
  }, [ref.current]);
3100
3101
  useEffect10(() => {
3101
- if (isSelected) {
3102
- ctx == null ? void 0 : ctx.registerPath({
3102
+ ctx == null ? void 0 : ctx.registerPath(
3103
+ id,
3104
+ {
3103
3105
  index,
3104
3106
  zone: zoneCompound
3105
- });
3106
- }
3107
- }, [isSelected]);
3107
+ },
3108
+ componentType
3109
+ );
3110
+ return () => {
3111
+ var _a;
3112
+ (_a = ctx == null ? void 0 : ctx.unregisterPath) == null ? void 0 : _a.call(ctx, id);
3113
+ };
3114
+ }, [id, zoneCompound, index, componentType]);
3108
3115
  const CustomActionBar = useMemo7(
3109
3116
  () => overrides.actionBar || DefaultActionBar,
3110
3117
  [overrides.actionBar]
@@ -3424,9 +3431,20 @@ var useContentWithPreview = (content, zoneCompound) => {
3424
3431
  };
3425
3432
  }
3426
3433
  );
3434
+ const {
3435
+ state: {
3436
+ ui: { isDragging }
3437
+ }
3438
+ } = useAppContext();
3427
3439
  const [contentWithPreview, setContentWithPreview] = useState15(content);
3440
+ const [localPreview, setLocalPreview] = useState15(
3441
+ preview
3442
+ );
3428
3443
  const updateContent = useRenderedCallback(
3429
- (content2, preview2) => {
3444
+ (content2, preview2, isDragging2) => {
3445
+ if (isDragging2 && !previewExists) {
3446
+ return;
3447
+ }
3430
3448
  if (preview2) {
3431
3449
  if (preview2.type === "insert") {
3432
3450
  setContentWithPreview(
@@ -3456,13 +3474,14 @@ var useContentWithPreview = (content, zoneCompound) => {
3456
3474
  previewExists ? content2.filter((item) => item.props.id !== draggedItemId) : content2
3457
3475
  );
3458
3476
  }
3477
+ setLocalPreview(preview2);
3459
3478
  },
3460
3479
  [draggedItemId, previewExists]
3461
3480
  );
3462
3481
  useEffect12(() => {
3463
- updateContent(content, preview);
3464
- }, [content, preview]);
3465
- return contentWithPreview;
3482
+ updateContent(content, preview, isDragging);
3483
+ }, [content, preview, isDragging]);
3484
+ return [contentWithPreview, localPreview];
3466
3485
  };
3467
3486
 
3468
3487
  // components/DropZone/lib/use-drag-axis.ts
@@ -3506,6 +3525,7 @@ import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-r
3506
3525
  var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default12);
3507
3526
  var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
3508
3527
  var RENDER_DEBUG = false;
3528
+ var DropZoneEditPure = (props) => /* @__PURE__ */ jsx22(DropZoneEdit, __spreadValues({}, props));
3509
3529
  var DropZoneEdit = forwardRef3(
3510
3530
  function DropZoneEditInternal({
3511
3531
  zone,
@@ -3541,8 +3561,7 @@ var DropZoneEdit = forwardRef3(
3541
3561
  isDeepestZone,
3542
3562
  inNextDeepestArea,
3543
3563
  draggedComponentType,
3544
- userIsDragging,
3545
- preview
3564
+ userIsDragging
3546
3565
  } = useContextStore(ZoneStoreContext, (s) => {
3547
3566
  var _a, _b, _c;
3548
3567
  return {
@@ -3550,8 +3569,7 @@ var DropZoneEdit = forwardRef3(
3550
3569
  inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
3551
3570
  draggedItemId: (_b = s.draggedItem) == null ? void 0 : _b.id,
3552
3571
  draggedComponentType: (_c = s.draggedItem) == null ? void 0 : _c.data.componentType,
3553
- userIsDragging: !!s.draggedItem,
3554
- preview: s.previewIndex[zoneCompound]
3572
+ userIsDragging: !!s.draggedItem
3555
3573
  };
3556
3574
  });
3557
3575
  const { itemSelector } = appContext2.state.ui;
@@ -3576,7 +3594,7 @@ var DropZoneEdit = forwardRef3(
3576
3594
  }
3577
3595
  return data.content || [];
3578
3596
  }, [data, zoneCompound]);
3579
- const ref = useRef3(null);
3597
+ const ref = useRef2(null);
3580
3598
  const acceptsTarget = useCallback10(
3581
3599
  (componentType) => {
3582
3600
  if (!componentType) {
@@ -3617,7 +3635,10 @@ var DropZoneEdit = forwardRef3(
3617
3635
  if (isEnabled) {
3618
3636
  isEnabled = acceptsTarget(draggedComponentType);
3619
3637
  }
3620
- const contentWithPreview = useContentWithPreview(content, zoneCompound);
3638
+ const [contentWithPreview, preview] = useContentWithPreview(
3639
+ content,
3640
+ zoneCompound
3641
+ );
3621
3642
  const isDropEnabled = isEnabled && (preview ? contentWithPreview.length === 1 : contentWithPreview.length === 0);
3622
3643
  const droppableConfig = {
3623
3644
  id: zoneCompound,
@@ -3659,16 +3680,15 @@ var DropZoneEdit = forwardRef3(
3659
3680
  },
3660
3681
  "data-testid": `dropzone:${zoneCompound}`,
3661
3682
  "data-puck-dropzone": zoneCompound,
3662
- "data-puck-dnd": zoneCompound,
3663
3683
  style: __spreadProps(__spreadValues({}, style), {
3664
3684
  "--min-empty-height": `${minEmptyHeight}px`,
3665
- backgroundColor: RENDER_DEBUG ? getRandomColor() : void 0
3685
+ backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
3666
3686
  }),
3667
3687
  children: contentWithPreview.map((item, i) => {
3668
- var _a, _b, _c, _d, _e;
3688
+ var _a, _b, _c, _d, _e, _f, _g;
3669
3689
  const componentId = item.props.id;
3670
3690
  const puckProps = {
3671
- renderDropZone: (props) => /* @__PURE__ */ jsx22(DropZoneEdit, __spreadValues({}, props)),
3691
+ renderDropZone: DropZoneEditPure,
3672
3692
  isEditing: true,
3673
3693
  dragRef: null
3674
3694
  };
@@ -3685,13 +3705,13 @@ var DropZoneEdit = forwardRef3(
3685
3705
  const componentConfig = config.components[item.type];
3686
3706
  let componentType = item.type;
3687
3707
  let label = (_b = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _b : item.type.toString();
3688
- if (item.type === "preview" && preview) {
3708
+ if (item.type === "preview") {
3689
3709
  let Preview4 = function() {
3690
3710
  return /* @__PURE__ */ jsx22(DrawerItemInner, { name: label, children: appContext2.overrides.componentItem });
3691
3711
  };
3692
3712
  var Preview3 = Preview4;
3693
- componentType = preview.componentType;
3694
- label = (_d = (_c = config.components[componentType]) == null ? void 0 : _c.label) != null ? _d : preview.componentType;
3713
+ componentType = (_c = preview == null ? void 0 : preview.componentType) != null ? _c : "__preview";
3714
+ label = (_f = (_e = (_d = config.components[componentType]) == null ? void 0 : _d.label) != null ? _e : componentType) != null ? _f : "Preview";
3695
3715
  Render2 = Preview4;
3696
3716
  }
3697
3717
  return /* @__PURE__ */ jsx22(
@@ -3706,7 +3726,7 @@ var DropZoneEdit = forwardRef3(
3706
3726
  zoneCompound,
3707
3727
  depth: depth + 1,
3708
3728
  index: i,
3709
- isLoading: ((_e = appContext2.componentState[componentId]) == null ? void 0 : _e.loadingCount) > 0,
3729
+ isLoading: ((_g = appContext2.componentState[componentId]) == null ? void 0 : _g.loadingCount) > 0,
3710
3730
  isSelected,
3711
3731
  label,
3712
3732
  isEnabled,
@@ -3731,6 +3751,7 @@ var DropZoneEdit = forwardRef3(
3731
3751
  );
3732
3752
  }
3733
3753
  );
3754
+ var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx22(DropZoneRender, __spreadValues({}, props));
3734
3755
  var DropZoneRender = forwardRef3(
3735
3756
  function DropZoneRenderInternal({ className, style, zone }, ref) {
3736
3757
  const ctx = useContext6(dropZoneContext);
@@ -3770,7 +3791,9 @@ var DropZoneRender = forwardRef3(
3770
3791
  children: /* @__PURE__ */ jsx22(
3771
3792
  Component.render,
3772
3793
  __spreadProps(__spreadValues({}, item.props), {
3773
- puck: { renderDropZone: DropZoneRender }
3794
+ puck: {
3795
+ renderDropZone: DropZoneRenderPure
3796
+ }
3774
3797
  })
3775
3798
  )
3776
3799
  },
@@ -3938,6 +3961,13 @@ var getPointerCollisions = (position, manager) => {
3938
3961
  if (elements) {
3939
3962
  for (let i = 0; i < elements.length; i++) {
3940
3963
  const element = elements[i];
3964
+ const dropzoneId = element.getAttribute("data-puck-dropzone");
3965
+ if (dropzoneId) {
3966
+ const droppable = manager.registry.droppables.get(dropzoneId);
3967
+ if (droppable) {
3968
+ candidates.push(droppable);
3969
+ }
3970
+ }
3941
3971
  const id = element.getAttribute("data-puck-dnd");
3942
3972
  if (id) {
3943
3973
  const droppable = manager.registry.droppables.get(id);
@@ -4346,6 +4376,11 @@ var reduceUi = (ui, action) => {
4346
4376
  itemSelector: { index: action.sourceIndex + 1, zone: action.sourceZone }
4347
4377
  });
4348
4378
  }
4379
+ if (action.type === "remove") {
4380
+ return __spreadProps(__spreadValues({}, ui), {
4381
+ itemSelector: null
4382
+ });
4383
+ }
4349
4384
  return ui;
4350
4385
  };
4351
4386
 
@@ -4605,6 +4640,9 @@ var _PointerSensor = class _PointerSensor extends Sensor {
4605
4640
  }
4606
4641
  }
4607
4642
  handlePointerUp(event) {
4643
+ if (!this.source) {
4644
+ return;
4645
+ }
4608
4646
  event.preventDefault();
4609
4647
  event.stopPropagation();
4610
4648
  const { status } = this.manager.dragOperation;
@@ -4722,7 +4760,7 @@ function useDragListener(type, fn, deps = []) {
4722
4760
  }
4723
4761
  var AREA_CHANGE_DEBOUNCE_MS = 100;
4724
4762
  var useTempDisableFallback = (timeout3) => {
4725
- const lastFallbackDisable = useRef4(null);
4763
+ const lastFallbackDisable = useRef3(null);
4726
4764
  return useCallback11((manager) => {
4727
4765
  collisionStore.setState({ fallbackEnabled: false });
4728
4766
  const fallbackId = generateId();
@@ -4742,7 +4780,7 @@ var DragDropContextClient = ({
4742
4780
  const { state, config, dispatch, resolveData } = useAppContext();
4743
4781
  const id = useId();
4744
4782
  const { data } = state;
4745
- const debouncedParamsRef = useRef4(null);
4783
+ const debouncedParamsRef = useRef3(null);
4746
4784
  const tempDisableFallback = useTempDisableFallback(100);
4747
4785
  const [zoneStore] = useState17(
4748
4786
  () => createStore3(() => ({
@@ -4881,30 +4919,36 @@ var DragDropContextClient = ({
4881
4919
  ]);
4882
4920
  const [dragListeners, setDragListeners] = useState17({});
4883
4921
  const [pathData, setPathData] = useState17();
4884
- const dragMode = useRef4(null);
4922
+ const dragMode = useRef3(null);
4885
4923
  const registerPath = useCallback11(
4886
- (selector) => {
4887
- const item = getItem(selector, data);
4888
- if (!item) {
4889
- return;
4890
- }
4924
+ (id2, selector, label) => {
4891
4925
  const [area] = getZoneId(selector.zone);
4892
4926
  setPathData((latestPathData = {}) => {
4893
4927
  const parentPathData = latestPathData[area] || { path: [] };
4894
4928
  return __spreadProps(__spreadValues({}, latestPathData), {
4895
- [item.props.id]: {
4929
+ [id2]: {
4896
4930
  path: [
4897
4931
  ...parentPathData.path,
4898
4932
  ...selector.zone ? [selector.zone] : []
4899
4933
  ],
4900
- label: item.type
4934
+ label
4901
4935
  }
4902
4936
  });
4903
4937
  });
4904
4938
  },
4905
4939
  [data, setPathData]
4906
4940
  );
4907
- const initialSelector = useRef4(void 0);
4941
+ const unregisterPath = useCallback11(
4942
+ (id2) => {
4943
+ setPathData((latestPathData = {}) => {
4944
+ const newPathData = __spreadValues({}, latestPathData);
4945
+ delete newPathData[id2];
4946
+ return newPathData;
4947
+ });
4948
+ },
4949
+ [data, setPathData]
4950
+ );
4951
+ const initialSelector = useRef3(void 0);
4908
4952
  return /* @__PURE__ */ jsx23("div", { id, children: /* @__PURE__ */ jsx23(
4909
4953
  dragListenerContext.Provider,
4910
4954
  {
@@ -5100,6 +5144,7 @@ var DragDropContextClient = ({
5100
5144
  areaId: "root",
5101
5145
  depth: 0,
5102
5146
  registerPath,
5147
+ unregisterPath,
5103
5148
  pathData,
5104
5149
  path: []
5105
5150
  },
@@ -5249,9 +5294,9 @@ Drawer.Item = DrawerItem;
5249
5294
  // components/Puck/index.tsx
5250
5295
  init_react_import();
5251
5296
  import {
5252
- useCallback as useCallback17,
5253
- useEffect as useEffect23,
5254
- useMemo as useMemo18,
5297
+ useCallback as useCallback18,
5298
+ useEffect as useEffect24,
5299
+ useMemo as useMemo19,
5255
5300
  useReducer,
5256
5301
  useState as useState26
5257
5302
  } from "react";
@@ -5447,36 +5492,61 @@ init_react_import();
5447
5492
 
5448
5493
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
5449
5494
  init_react_import();
5450
- 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" };
5495
+ var styles_module_default16 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
5451
5496
 
5452
5497
  // components/Puck/components/Fields/index.tsx
5453
- import { useCallback as useCallback12, useEffect as useEffect16, useMemo as useMemo11, useState as useState19 } from "react";
5498
+ import { useMemo as useMemo12 } from "react";
5499
+
5500
+ // lib/use-resolved-fields.ts
5501
+ init_react_import();
5502
+ import { useCallback as useCallback13, useEffect as useEffect17, useMemo as useMemo11, useRef as useRef5, useState as useState19 } from "react";
5454
5503
 
5455
5504
  // lib/use-parent.ts
5456
5505
  init_react_import();
5457
- import { useContext as useContext9 } from "react";
5458
- var useParent = (itemSelector) => {
5506
+ import { useCallback as useCallback12, useContext as useContext9 } from "react";
5507
+ var getParent = (itemSelector, pathData, data) => {
5459
5508
  var _a;
5460
- const { selectedItem, state } = useAppContext();
5461
- const { pathData } = useContext9(dropZoneContext) || {};
5462
- const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
5463
- const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
5509
+ if (!itemSelector) return null;
5510
+ const item = getItem(itemSelector, data);
5511
+ const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, data);
5464
5512
  const lastItem = breadcrumbs[breadcrumbs.length - 1];
5465
- const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, state.data)) != null ? _a : null : null;
5513
+ const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, data)) != null ? _a : null : null;
5466
5514
  return parent || null;
5467
5515
  };
5516
+ var useGetParent = () => {
5517
+ const { state } = useAppContext();
5518
+ const { pathData } = useContext9(dropZoneContext) || {};
5519
+ return useCallback12(
5520
+ () => getParent(state.ui.itemSelector, pathData, state.data),
5521
+ [state.ui.itemSelector, pathData, state.data]
5522
+ );
5523
+ };
5524
+ var useParent = () => {
5525
+ return useGetParent()();
5526
+ };
5468
5527
 
5469
- // components/Puck/components/Fields/index.tsx
5470
- import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
5471
- var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
5528
+ // lib/use-on-value-change.ts
5529
+ init_react_import();
5530
+ import { useRef as useRef4, useEffect as useEffect16 } from "react";
5531
+ function useOnValueChange(value, onChange, compare = Object.is, deps = []) {
5532
+ const tracked = useRef4(value);
5533
+ useEffect16(() => {
5534
+ const oldValue = tracked.current;
5535
+ if (!compare(value, oldValue)) {
5536
+ tracked.current = value;
5537
+ onChange(value, oldValue);
5538
+ }
5539
+ }, [onChange, compare, value, ...deps]);
5540
+ }
5541
+
5542
+ // lib/selector-is.ts
5543
+ init_react_import();
5544
+ 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);
5545
+
5546
+ // lib/use-resolved-fields.ts
5472
5547
  var defaultPageFields = {
5473
5548
  title: { type: "text" }
5474
5549
  };
5475
- var DefaultFields = ({
5476
- children
5477
- }) => {
5478
- return /* @__PURE__ */ jsx27(Fragment8, { children });
5479
- };
5480
5550
  var useResolvedFields = () => {
5481
5551
  var _a, _b;
5482
5552
  const { selectedItem, state, config } = useAppContext();
@@ -5492,12 +5562,13 @@ var useResolvedFields = () => {
5492
5562
  const [lastSelectedData, setLastSelectedData] = useState19({});
5493
5563
  const [resolvedFields, setResolvedFields] = useState19(defaultFields);
5494
5564
  const [fieldsLoading, setFieldsLoading] = useState19(false);
5565
+ const lastFields = useRef5(defaultFields);
5495
5566
  const defaultResolveFields = (_componentData, _params) => defaultFields;
5496
5567
  const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
5497
5568
  const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
5498
5569
  const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
5499
5570
  const hasResolver = hasComponentResolver || hasRootResolver;
5500
- const resolveFields = useCallback12(
5571
+ const resolveFields = useCallback13(
5501
5572
  (..._0) => __async(void 0, [..._0], function* (fields = {}) {
5502
5573
  var _a2;
5503
5574
  const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
@@ -5509,7 +5580,7 @@ var useResolvedFields = () => {
5509
5580
  {
5510
5581
  changed,
5511
5582
  fields,
5512
- lastFields: resolvedFields,
5583
+ lastFields: lastFields.current,
5513
5584
  lastData,
5514
5585
  appState: state,
5515
5586
  parent
@@ -5520,7 +5591,7 @@ var useResolvedFields = () => {
5520
5591
  return yield config.root.resolveFields(componentData, {
5521
5592
  changed,
5522
5593
  fields,
5523
- lastFields: resolvedFields,
5594
+ lastFields: lastFields.current,
5524
5595
  lastData,
5525
5596
  appState: state,
5526
5597
  parent
@@ -5529,40 +5600,56 @@ var useResolvedFields = () => {
5529
5600
  return defaultResolveFields(componentData, {
5530
5601
  changed,
5531
5602
  fields,
5532
- lastFields: resolvedFields,
5603
+ lastFields: lastFields.current,
5533
5604
  lastData
5534
5605
  });
5535
5606
  }),
5536
- [data, config, componentData, selectedItem, resolvedFields, state, parent]
5607
+ [data, config, componentData, selectedItem, state, parent]
5537
5608
  );
5538
- const [hasParent, setHasParent] = useState19(false);
5539
- useEffect16(() => {
5540
- setHasParent(!!parent);
5541
- }, [parent]);
5542
- useEffect16(() => {
5543
- var _a2;
5544
- if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || hasParent) {
5609
+ const triggerResolver = useCallback13(() => {
5610
+ var _a2, _b2;
5611
+ if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" || parent) {
5545
5612
  if (hasResolver) {
5546
5613
  setFieldsLoading(true);
5547
5614
  resolveFields(defaultFields).then((fields) => {
5548
5615
  setResolvedFields(fields || {});
5616
+ lastFields.current = fields;
5549
5617
  setFieldsLoading(false);
5550
5618
  });
5551
- } else {
5552
- setResolvedFields(defaultFields);
5619
+ return;
5553
5620
  }
5554
5621
  }
5555
- }, [
5556
- data,
5557
- defaultFields,
5622
+ setResolvedFields(defaultFields);
5623
+ }, [defaultFields, state.ui.itemSelector, hasResolver, parent]);
5624
+ useOnValueChange(
5558
5625
  state.ui.itemSelector,
5559
- selectedItem,
5560
- hasResolver,
5561
- hasParent
5562
- ]);
5626
+ () => {
5627
+ lastFields.current = defaultFields;
5628
+ },
5629
+ selectorIs
5630
+ );
5631
+ useOnValueChange(
5632
+ { data, parent, itemSelector: state.ui.itemSelector },
5633
+ () => {
5634
+ triggerResolver();
5635
+ },
5636
+ (a, b) => JSON.stringify(a) === JSON.stringify(b)
5637
+ );
5638
+ useEffect17(() => {
5639
+ triggerResolver();
5640
+ }, []);
5563
5641
  return [resolvedFields, fieldsLoading];
5564
5642
  };
5565
- var Fields = () => {
5643
+
5644
+ // components/Puck/components/Fields/index.tsx
5645
+ import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
5646
+ var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
5647
+ var DefaultFields = ({
5648
+ children
5649
+ }) => {
5650
+ return /* @__PURE__ */ jsx27(Fragment8, { children });
5651
+ };
5652
+ var Fields = ({ wrapFields = true }) => {
5566
5653
  var _a, _b;
5567
5654
  const {
5568
5655
  selectedItem,
@@ -5580,11 +5667,11 @@ var Fields = () => {
5580
5667
  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;
5581
5668
  const isLoading = fieldsResolving || componentResolving;
5582
5669
  const rootProps = data.root.props || data.root;
5583
- const Wrapper = useMemo11(() => overrides.fields || DefaultFields, [overrides]);
5670
+ const Wrapper = useMemo12(() => overrides.fields || DefaultFields, [overrides]);
5584
5671
  return /* @__PURE__ */ jsxs14(
5585
5672
  "form",
5586
5673
  {
5587
- className: getClassName21(),
5674
+ className: getClassName21({ wrapFields }),
5588
5675
  onSubmit: (e) => {
5589
5676
  e.preventDefault();
5590
5677
  },
@@ -5660,7 +5747,7 @@ var Fields = () => {
5660
5747
  item: selectedItem
5661
5748
  });
5662
5749
  const id = `${selectedItem.props.id}_${field.type}_${fieldName}`;
5663
- return /* @__PURE__ */ jsx27(
5750
+ return /* @__PURE__ */ jsx27("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx27(
5664
5751
  AutoFieldPrivate,
5665
5752
  {
5666
5753
  field,
@@ -5669,16 +5756,15 @@ var Fields = () => {
5669
5756
  readOnly: !edit || readOnly[fieldName],
5670
5757
  value: selectedItem.props[fieldName],
5671
5758
  onChange
5672
- },
5673
- id
5674
- );
5759
+ }
5760
+ ) }, id);
5675
5761
  } else {
5676
5762
  const readOnly = data.root.readOnly || {};
5677
5763
  const { edit } = getPermissions({
5678
5764
  root: true
5679
5765
  });
5680
5766
  const id = `root_${field.type}_${fieldName}`;
5681
- return /* @__PURE__ */ jsx27(
5767
+ return /* @__PURE__ */ jsx27("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx27(
5682
5768
  AutoFieldPrivate,
5683
5769
  {
5684
5770
  field,
@@ -5687,9 +5773,8 @@ var Fields = () => {
5687
5773
  readOnly: !edit || readOnly[fieldName],
5688
5774
  value: rootProps[fieldName],
5689
5775
  onChange
5690
- },
5691
- id
5692
- );
5776
+ }
5777
+ ) }, id);
5693
5778
  }
5694
5779
  }) }),
5695
5780
  isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
@@ -5703,7 +5788,7 @@ init_react_import();
5703
5788
 
5704
5789
  // lib/use-component-list.tsx
5705
5790
  init_react_import();
5706
- import { useEffect as useEffect17, useState as useState20 } from "react";
5791
+ import { useEffect as useEffect18, useState as useState20 } from "react";
5707
5792
 
5708
5793
  // components/ComponentList/index.tsx
5709
5794
  init_react_import();
@@ -5771,7 +5856,7 @@ ComponentList.Item = ComponentListItem;
5771
5856
  import { jsx as jsx29 } from "react/jsx-runtime";
5772
5857
  var useComponentList = (config, ui) => {
5773
5858
  const [componentList, setComponentList] = useState20();
5774
- useEffect17(() => {
5859
+ useEffect18(() => {
5775
5860
  var _a, _b, _c;
5776
5861
  if (Object.keys(ui.componentList).length > 0) {
5777
5862
  const matchedComponents = [];
@@ -5840,25 +5925,25 @@ var useComponentList = (config, ui) => {
5840
5925
  };
5841
5926
 
5842
5927
  // components/Puck/components/Components/index.tsx
5843
- import { useMemo as useMemo12 } from "react";
5928
+ import { useMemo as useMemo13 } from "react";
5844
5929
  import { jsx as jsx30 } from "react/jsx-runtime";
5845
5930
  var Components = () => {
5846
5931
  const { config, state, overrides } = useAppContext();
5847
5932
  const componentList = useComponentList(config, state.ui);
5848
- const Wrapper = useMemo12(() => overrides.components || "div", [overrides]);
5933
+ const Wrapper = useMemo13(() => overrides.components || "div", [overrides]);
5849
5934
  return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
5850
5935
  };
5851
5936
 
5852
5937
  // components/Puck/components/Preview/index.tsx
5853
5938
  init_react_import();
5854
- import { useCallback as useCallback13, useEffect as useEffect19, useRef as useRef6, useMemo as useMemo13 } from "react";
5939
+ import { useCallback as useCallback14, useEffect as useEffect20, useRef as useRef7, useMemo as useMemo14 } from "react";
5855
5940
 
5856
5941
  // components/AutoFrame/index.tsx
5857
5942
  init_react_import();
5858
5943
  import {
5859
5944
  createContext as createContext5,
5860
5945
  useContext as useContext10,
5861
- useEffect as useEffect18,
5946
+ useEffect as useEffect19,
5862
5947
  useState as useState21
5863
5948
  } from "react";
5864
5949
  import hash from "object-hash";
@@ -5906,7 +5991,7 @@ var CopyHostStyles = ({
5906
5991
  onStylesLoaded = () => null
5907
5992
  }) => {
5908
5993
  const { document: doc, window: win } = useFrame();
5909
- useEffect18(() => {
5994
+ useEffect19(() => {
5910
5995
  if (!win || !doc) {
5911
5996
  return () => {
5912
5997
  };
@@ -6086,7 +6171,7 @@ function AutoFrame(_a) {
6086
6171
  const [loaded, setLoaded] = useState21(false);
6087
6172
  const [ctx, setCtx] = useState21({});
6088
6173
  const [mountTarget, setMountTarget] = useState21();
6089
- useEffect18(() => {
6174
+ useEffect19(() => {
6090
6175
  var _a2;
6091
6176
  if (frameRef.current) {
6092
6177
  setCtx({
@@ -6180,7 +6265,7 @@ import { Fragment as Fragment10, jsx as jsx33 } from "react/jsx-runtime";
6180
6265
  var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
6181
6266
  var useBubbleIframeEvents = (ref) => {
6182
6267
  const { status } = useAppContext();
6183
- useEffect19(() => {
6268
+ useEffect20(() => {
6184
6269
  var _a;
6185
6270
  if (ref.current && status === "READY") {
6186
6271
  const iframe = ref.current;
@@ -6219,7 +6304,7 @@ var useBubbleIframeEvents = (ref) => {
6219
6304
  };
6220
6305
  var Preview2 = ({ id = "puck-preview" }) => {
6221
6306
  const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
6222
- const Page = useCallback13(
6307
+ const Page = useCallback14(
6223
6308
  (pageProps) => {
6224
6309
  var _a, _b;
6225
6310
  return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
@@ -6228,9 +6313,9 @@ var Preview2 = ({ id = "puck-preview" }) => {
6228
6313
  },
6229
6314
  [config.root]
6230
6315
  );
6231
- const Frame = useMemo13(() => overrides.iframe, [overrides]);
6316
+ const Frame = useMemo14(() => overrides.iframe, [overrides]);
6232
6317
  const rootProps = state.data.root.props || state.data.root;
6233
- const ref = useRef6(null);
6318
+ const ref = useRef7(null);
6234
6319
  useBubbleIframeEvents(ref);
6235
6320
  const inner = state.ui.previewMode === "edit" ? /* @__PURE__ */ jsx33(
6236
6321
  Page,
@@ -6480,13 +6565,13 @@ var LayerTree = ({
6480
6565
  };
6481
6566
 
6482
6567
  // components/Puck/components/Outline/index.tsx
6483
- import { useCallback as useCallback14, useMemo as useMemo14 } from "react";
6568
+ import { useCallback as useCallback15, useMemo as useMemo15 } from "react";
6484
6569
  import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
6485
6570
  var Outline = () => {
6486
6571
  const { dispatch, state, overrides, config } = useAppContext();
6487
6572
  const { data, ui } = state;
6488
6573
  const { itemSelector } = ui;
6489
- const setItemSelector = useCallback14(
6574
+ const setItemSelector = useCallback15(
6490
6575
  (newItemSelector) => {
6491
6576
  dispatch({
6492
6577
  type: "setUi",
@@ -6495,7 +6580,7 @@ var Outline = () => {
6495
6580
  },
6496
6581
  []
6497
6582
  );
6498
- const Wrapper = useMemo14(() => overrides.outline || "div", [overrides]);
6583
+ const Wrapper = useMemo15(() => overrides.outline || "div", [overrides]);
6499
6584
  return /* @__PURE__ */ jsx35(Wrapper, { children: /* @__PURE__ */ jsx35(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs17(Fragment12, { children: [
6500
6585
  (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx35(
6501
6586
  LayerTree,
@@ -6782,16 +6867,16 @@ var getBox = function getBox2(el) {
6782
6867
 
6783
6868
  // components/Puck/components/Canvas/index.tsx
6784
6869
  import {
6785
- useCallback as useCallback15,
6786
- useEffect as useEffect21,
6787
- useMemo as useMemo16,
6788
- useRef as useRef7,
6870
+ useCallback as useCallback16,
6871
+ useEffect as useEffect22,
6872
+ useMemo as useMemo17,
6873
+ useRef as useRef8,
6789
6874
  useState as useState24
6790
6875
  } from "react";
6791
6876
 
6792
6877
  // components/ViewportControls/index.tsx
6793
6878
  init_react_import();
6794
- import { useEffect as useEffect20, useMemo as useMemo15, useState as useState23 } from "react";
6879
+ import { useEffect as useEffect21, useMemo as useMemo16, useState as useState23 } from "react";
6795
6880
 
6796
6881
  // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
6797
6882
  init_react_import();
@@ -6815,7 +6900,7 @@ var ViewportButton = ({
6815
6900
  }) => {
6816
6901
  const { state } = useAppContext();
6817
6902
  const [isActive, setIsActive] = useState23(false);
6818
- useEffect20(() => {
6903
+ useEffect21(() => {
6819
6904
  setIsActive(width === state.ui.viewports.current.width);
6820
6905
  }, [width, state.ui.viewports.current.width]);
6821
6906
  return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
@@ -6851,7 +6936,7 @@ var ViewportControls = ({
6851
6936
  const defaultsContainAutoZoom = defaultZoomOptions.find(
6852
6937
  (option) => option.value === autoZoom
6853
6938
  );
6854
- const zoomOptions = useMemo15(
6939
+ const zoomOptions = useMemo16(
6855
6940
  () => [
6856
6941
  ...defaultZoomOptions,
6857
6942
  ...defaultsContainAutoZoom ? [] : [
@@ -6974,17 +7059,17 @@ var Canvas = () => {
6974
7059
  const { status, iframe } = useAppContext();
6975
7060
  const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
6976
7061
  const { ui } = state;
6977
- const frameRef = useRef7(null);
7062
+ const frameRef = useRef8(null);
6978
7063
  const [showTransition, setShowTransition] = useState24(false);
6979
- const defaultRender = useMemo16(() => {
7064
+ const defaultRender = useMemo17(() => {
6980
7065
  const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment13, { children });
6981
7066
  return PuckDefault;
6982
7067
  }, []);
6983
- const CustomPreview = useMemo16(
7068
+ const CustomPreview = useMemo17(
6984
7069
  () => overrides.preview || defaultRender,
6985
7070
  [overrides]
6986
7071
  );
6987
- const getFrameDimensions = useCallback15(() => {
7072
+ const getFrameDimensions = useCallback16(() => {
6988
7073
  if (frameRef.current) {
6989
7074
  const frame = frameRef.current;
6990
7075
  const box = getBox(frame);
@@ -6992,7 +7077,7 @@ var Canvas = () => {
6992
7077
  }
6993
7078
  return { width: 0, height: 0 };
6994
7079
  }, [frameRef]);
6995
- const resetAutoZoom = useCallback15(
7080
+ const resetAutoZoom = useCallback16(
6996
7081
  (ui2 = state.ui) => {
6997
7082
  if (frameRef.current) {
6998
7083
  setZoomConfig(
@@ -7002,11 +7087,11 @@ var Canvas = () => {
7002
7087
  },
7003
7088
  [frameRef, zoomConfig, state.ui]
7004
7089
  );
7005
- useEffect21(() => {
7090
+ useEffect22(() => {
7006
7091
  setShowTransition(false);
7007
7092
  resetAutoZoom();
7008
7093
  }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
7009
- useEffect21(() => {
7094
+ useEffect22(() => {
7010
7095
  const { height: frameHeight } = getFrameDimensions();
7011
7096
  if (ui.viewports.current.height === "auto") {
7012
7097
  setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -7014,13 +7099,13 @@ var Canvas = () => {
7014
7099
  }));
7015
7100
  }
7016
7101
  }, [zoomConfig.zoom]);
7017
- useEffect21(() => {
7102
+ useEffect22(() => {
7018
7103
  if (ZOOM_ON_CHANGE) {
7019
7104
  setShowTransition(true);
7020
7105
  resetAutoZoom(ui);
7021
7106
  }
7022
7107
  }, [ui.viewports.current.width]);
7023
- useEffect21(() => {
7108
+ useEffect22(() => {
7024
7109
  const cb = () => {
7025
7110
  setShowTransition(false);
7026
7111
  resetAutoZoom();
@@ -7031,7 +7116,7 @@ var Canvas = () => {
7031
7116
  };
7032
7117
  }, []);
7033
7118
  const [showLoader, setShowLoader] = useState24(false);
7034
- useEffect21(() => {
7119
+ useEffect22(() => {
7035
7120
  setTimeout(() => {
7036
7121
  setShowLoader(true);
7037
7122
  }, 500);
@@ -7109,7 +7194,7 @@ var Canvas = () => {
7109
7194
 
7110
7195
  // lib/use-loaded-overrides.ts
7111
7196
  init_react_import();
7112
- import { useMemo as useMemo17 } from "react";
7197
+ import { useMemo as useMemo18 } from "react";
7113
7198
 
7114
7199
  // lib/load-overrides.ts
7115
7200
  init_react_import();
@@ -7148,7 +7233,7 @@ var useLoadedOverrides = ({
7148
7233
  overrides,
7149
7234
  plugins
7150
7235
  }) => {
7151
- return useMemo17(() => {
7236
+ return useMemo18(() => {
7152
7237
  return loadOverrides({ overrides, plugins });
7153
7238
  }, [plugins, overrides]);
7154
7239
  };
@@ -7160,14 +7245,14 @@ var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment14, { chil
7160
7245
 
7161
7246
  // lib/use-inject-css.ts
7162
7247
  init_react_import();
7163
- import { useEffect as useEffect22, useState as useState25 } from "react";
7248
+ import { useEffect as useEffect23, useState as useState25 } from "react";
7164
7249
  var styles = ``;
7165
7250
  var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
7166
7251
  const [el, setEl] = useState25();
7167
- useEffect22(() => {
7252
+ useEffect23(() => {
7168
7253
  setEl(document.createElement("style"));
7169
7254
  }, []);
7170
- useEffect22(() => {
7255
+ useEffect23(() => {
7171
7256
  var _a;
7172
7257
  if (!el || typeof window === "undefined") {
7173
7258
  return;
@@ -7187,10 +7272,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
7187
7272
 
7188
7273
  // lib/use-preview-mode-hotkeys.ts
7189
7274
  init_react_import();
7190
- import { useCallback as useCallback16 } from "react";
7275
+ import { useCallback as useCallback17 } from "react";
7191
7276
  import { useHotkeys as useHotkeys2 } from "react-hotkeys-hook";
7192
7277
  var usePreviewModeHotkeys = (dispatch, iframeEnabled) => {
7193
- const toggleInteractive = useCallback16(() => {
7278
+ const toggleInteractive = useCallback17(() => {
7194
7279
  dispatch({
7195
7280
  type: "setUi",
7196
7281
  ui: (ui) => ({
@@ -7335,11 +7420,11 @@ function Puck({
7335
7420
  const [menuOpen, setMenuOpen] = useState26(false);
7336
7421
  const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
7337
7422
  const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
7338
- useEffect23(() => {
7423
+ useEffect24(() => {
7339
7424
  if (onChange) onChange(data);
7340
7425
  }, [data]);
7341
7426
  const rootProps = data.root.props || data.root;
7342
- const toggleSidebars = useCallback17(
7427
+ const toggleSidebars = useCallback18(
7343
7428
  (sidebar) => {
7344
7429
  const widerViewport = window.matchMedia("(min-width: 638px)").matches;
7345
7430
  const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -7353,7 +7438,7 @@ function Puck({
7353
7438
  },
7354
7439
  [dispatch, leftSideBarVisible, rightSideBarVisible]
7355
7440
  );
7356
- useEffect23(() => {
7441
+ useEffect24(() => {
7357
7442
  if (!window.matchMedia("(min-width: 638px)").matches) {
7358
7443
  dispatch({
7359
7444
  type: "setUi",
@@ -7376,7 +7461,7 @@ function Puck({
7376
7461
  window.removeEventListener("resize", handleResize);
7377
7462
  };
7378
7463
  }, []);
7379
- const defaultHeaderRender = useMemo18(() => {
7464
+ const defaultHeaderRender = useMemo19(() => {
7380
7465
  if (renderHeader) {
7381
7466
  console.warn(
7382
7467
  "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -7390,7 +7475,7 @@ function Puck({
7390
7475
  }
7391
7476
  return DefaultOverride;
7392
7477
  }, [renderHeader]);
7393
- const defaultHeaderActionsRender = useMemo18(() => {
7478
+ const defaultHeaderActionsRender = useMemo19(() => {
7394
7479
  if (renderHeaderActions) {
7395
7480
  console.warn(
7396
7481
  "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -7407,20 +7492,20 @@ function Puck({
7407
7492
  overrides,
7408
7493
  plugins
7409
7494
  });
7410
- const CustomPuck = useMemo18(
7495
+ const CustomPuck = useMemo19(
7411
7496
  () => loadedOverrides.puck || DefaultOverride,
7412
7497
  [loadedOverrides]
7413
7498
  );
7414
- const CustomHeader = useMemo18(
7499
+ const CustomHeader = useMemo19(
7415
7500
  () => loadedOverrides.header || defaultHeaderRender,
7416
7501
  [loadedOverrides]
7417
7502
  );
7418
- const CustomHeaderActions = useMemo18(
7503
+ const CustomHeaderActions = useMemo19(
7419
7504
  () => loadedOverrides.headerActions || defaultHeaderActionsRender,
7420
7505
  [loadedOverrides]
7421
7506
  );
7422
7507
  const [mounted, setMounted] = useState26(false);
7423
- useEffect23(() => {
7508
+ useEffect24(() => {
7424
7509
  setMounted(true);
7425
7510
  }, []);
7426
7511
  const selectedComponentConfig = selectedItem && config.components[selectedItem.type];