@measured/puck 0.17.0-canary.2d82115 → 0.17.0-canary.361e5f9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -135,9 +135,6 @@
135
135
  }
136
136
 
137
137
  /* styles.css */
138
- #frame-root {
139
- height: 100vh;
140
- }
141
138
 
142
139
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
143
140
  ._ActionBar_151w5_1 {
@@ -1065,15 +1062,22 @@ textarea._Input-input_1l5m8_47 {
1065
1062
  }
1066
1063
 
1067
1064
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
1068
- ._Drawer_1ob9x_1 {
1069
- display: flex;
1070
- flex-direction: column;
1065
+ ._Drawer_1oa7v_1 {
1071
1066
  font-family: var(--puck-font-family);
1072
- gap: 12px;
1073
1067
  }
1074
- ._DrawerItem-draggable_1ob9x_8 {
1068
+ ._DrawerItem--disabled_1oa7v_5 ._DrawerItem-draggable_1oa7v_5 {
1069
+ background: var(--puck-color-grey-11);
1070
+ color: var(--puck-color-grey-05);
1071
+ cursor: not-allowed;
1072
+ }
1073
+ ._DrawerItem-default_1oa7v_11 ._DrawerItem-draggableWrapper_1oa7v_11 {
1074
+ padding-bottom: 12px;
1075
+ }
1076
+ ._DrawerItem_1oa7v_5:last-of-type ._DrawerItem-default_1oa7v_11 ._DrawerItem-draggableWrapper_1oa7v_11 {
1077
+ padding-bottom: 0;
1078
+ }
1079
+ ._DrawerItem-draggable_1oa7v_5 {
1075
1080
  background: var(--puck-color-white);
1076
- cursor: grab;
1077
1081
  padding: 12px;
1078
1082
  display: flex;
1079
1083
  border: 1px var(--puck-color-grey-09) solid;
@@ -1083,54 +1087,64 @@ textarea._Input-input_1l5m8_47 {
1083
1087
  align-items: center;
1084
1088
  transition: background-color 50ms ease-in, color 50ms ease-in;
1085
1089
  }
1086
- ._DrawerItem--disabled_1ob9x_21 ._DrawerItem-draggable_1ob9x_8 {
1087
- background: var(--puck-color-grey-11);
1088
- color: var(--puck-color-grey-05);
1089
- cursor: not-allowed;
1090
- }
1091
- ._DrawerItem_1ob9x_8:focus-visible {
1090
+ ._DrawerItem_1oa7v_5:focus-visible {
1092
1091
  outline: 0;
1093
1092
  }
1094
- ._Drawer_1ob9x_1:not(._Drawer--isDraggingFrom_1ob9x_31) ._DrawerItem_1ob9x_8:focus-visible ._DrawerItem-draggable_1ob9x_8 {
1093
+ ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:focus-visible ._DrawerItem-draggable_1oa7v_5 {
1095
1094
  border-radius: 4px;
1096
1095
  outline: 2px solid var(--puck-color-azure-05);
1097
1096
  outline-offset: 2px;
1098
1097
  }
1099
1098
  @media (hover: hover) and (pointer: fine) {
1100
- ._Drawer_1ob9x_1:not(._Drawer--isDraggingFrom_1ob9x_31) ._DrawerItem_1ob9x_8:not(._DrawerItem--disabled_1ob9x_21) ._DrawerItem-draggable_1ob9x_8:hover {
1099
+ ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:not(._DrawerItem--disabled_1oa7v_5) ._DrawerItem-draggable_1oa7v_5:hover {
1101
1100
  background-color: var(--puck-color-azure-12);
1102
1101
  color: var(--puck-color-azure-04);
1103
1102
  transition: none;
1104
1103
  }
1105
1104
  }
1106
- ._DrawerItem-name_1ob9x_49 {
1105
+ ._DrawerItem-name_1oa7v_54 {
1107
1106
  overflow-x: hidden;
1108
1107
  text-overflow: ellipsis;
1109
1108
  white-space: nowrap;
1110
1109
  }
1111
1110
 
1112
1111
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1113
- ._DraggableComponent_146qs_1 {
1114
- position: absolute;
1115
- pointer-events: none;
1112
+ ._DraggableComponent_1bhad_1 {
1113
+ pointer-events: auto;
1116
1114
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1117
1115
  }
1118
- ._DraggableComponent-overlay_146qs_12 {
1116
+ ._DraggableComponent--isDragging_1bhad_11 {
1117
+ background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
1118
+ overflow: hidden;
1119
+ }
1120
+ ._DraggableComponent-contents_1bhad_16 {
1121
+ position: relative;
1122
+ pointer-events: none;
1123
+ z-index: 0;
1124
+ }
1125
+ ._DraggableComponent-contents_1bhad_16::before,
1126
+ ._DraggableComponent-contents_1bhad_16::after {
1127
+ content: " ";
1128
+ display: table;
1129
+ }
1130
+ ._DraggableComponent-overlay_1bhad_29 {
1119
1131
  cursor: pointer;
1120
1132
  height: 100%;
1121
1133
  width: 100%;
1122
1134
  top: 0;
1123
- outline: 2px var(--puck-color-azure-09) solid;
1124
1135
  outline-offset: -2px;
1125
1136
  position: absolute;
1126
1137
  pointer-events: none;
1127
1138
  box-sizing: border-box;
1128
1139
  z-index: 1;
1129
1140
  }
1130
- ._DraggableComponent_146qs_1:focus-visible > ._DraggableComponent-overlay_146qs_12 {
1141
+ ._DraggableComponent_1bhad_1:focus-visible > ._DraggableComponent-overlay_1bhad_29 {
1131
1142
  outline: 1px solid var(--puck-color-azure-05);
1132
1143
  }
1133
- ._DraggableComponent-loadingOverlay_146qs_29 {
1144
+ ._DraggableComponent--isDragging_1bhad_11 > ._DraggableComponent-overlay_1bhad_29 {
1145
+ outline: 2px var(--puck-color-azure-09) solid !important;
1146
+ }
1147
+ ._DraggableComponent-loadingOverlay_1bhad_49 {
1134
1148
  background: var(--puck-color-white);
1135
1149
  color: var(--puck-color-grey-03);
1136
1150
  border-radius: 4px;
@@ -1145,82 +1159,89 @@ textarea._Input-input_1l5m8_47 {
1145
1159
  opacity: 0.8;
1146
1160
  z-index: 1;
1147
1161
  }
1148
- ._DraggableComponent--hover_146qs_45:not(._DraggableComponent--isLocked_146qs_45) > ._DraggableComponent-overlay_146qs_12 {
1162
+ ._DraggableComponent_1bhad_1:hover:not(._DraggableComponent--isLocked_1bhad_65) > ._DraggableComponent-overlay_1bhad_29 {
1163
+ background: var(--overlay-background);
1164
+ pointer-events: none;
1165
+ }
1166
+ ._DraggableComponent--forceHover_1bhad_71 > ._DraggableComponent-overlay_1bhad_29 {
1149
1167
  background: var(--overlay-background);
1168
+ pointer-events: none;
1150
1169
  }
1151
- ._DraggableComponent--hover_146qs_45 > ._DraggableComponent-overlay_146qs_12 {
1152
- outline: 2px var(--puck-color-azure-09) solid;
1170
+ ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):hover > ._DraggableComponent-overlay_1bhad_29 {
1171
+ outline: 2px var(--puck-color-azure-09) solid !important;
1153
1172
  }
1154
- ._DraggableComponent--isSelected_146qs_54 > ._DraggableComponent-overlay_146qs_12 {
1155
- outline-color: var(--puck-color-azure-07);
1173
+ ._DraggableComponent--indicativeHover_1bhad_81 > ._DraggableComponent-overlay_1bhad_29 {
1174
+ pointer-events: none;
1156
1175
  }
1157
- ._DraggableComponent_146qs_1:has(._DraggableComponent--hover_146qs_45 > ._DraggableComponent-overlay_146qs_12) > ._DraggableComponent-overlay_146qs_12 {
1176
+ ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):has(._DraggableComponent_1bhad_1:hover > ._DraggableComponent-overlay_1bhad_29) > ._DraggableComponent-overlay_1bhad_29 {
1158
1177
  display: none;
1159
1178
  }
1160
- ._DraggableComponent-actionsOverlay_146qs_66 {
1179
+ ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-overlay_1bhad_29 {
1180
+ outline: 2px var(--puck-color-azure-07) solid !important;
1181
+ }
1182
+ ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 {
1183
+ display: block;
1161
1184
  position: sticky;
1162
1185
  z-index: 2;
1163
1186
  }
1164
- ._DraggableComponent-actions_146qs_66 {
1187
+ ._DraggableComponent-actions_1bhad_97 {
1165
1188
  position: absolute;
1166
1189
  width: auto;
1167
1190
  cursor: grab;
1168
- display: flex;
1191
+ display: none;
1169
1192
  pointer-events: auto;
1170
1193
  box-sizing: border-box;
1171
1194
  transform-origin: right top;
1172
1195
  }
1196
+ ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 > ._DraggableComponent-actions_1bhad_97 {
1197
+ display: flex;
1198
+ }
1173
1199
 
1174
1200
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
1175
- ._DropZone_q2ip3_1 {
1176
- --drop-animation-ms: 250ms;
1177
- --resize-animation-ms: 150ms;
1201
+ ._DropZone_djoti_1 {
1202
+ margin-left: auto;
1203
+ margin-right: auto;
1178
1204
  position: relative;
1179
- height: 100%;
1180
- min-height: var(--min-empty-height);
1205
+ min-height: 100%;
1181
1206
  outline-offset: -2px;
1182
1207
  width: 100%;
1183
1208
  }
1184
- ._DropZone--hasChildren_q2ip3_12 {
1185
- min-height: 0;
1186
- }
1187
- ._DropZone_q2ip3_1:empty {
1188
- min-height: var(--min-empty-height);
1209
+ ._DropZone-content_djoti_10 {
1210
+ min-height: 128px;
1211
+ height: 100%;
1189
1212
  }
1190
- ._DropZone--hasChildren_q2ip3_12:not(._DropZone--userIsDragging_q2ip3_20) {
1191
- transition: min-height var(--resize-animation-ms) var(--drop-animation-ms) ease-in;
1213
+ ._DropZone--userIsDragging_djoti_15 ._DropZone-content_djoti_10 {
1214
+ pointer-events: all;
1192
1215
  }
1193
- ._DropZone_q2ip3_1:empty:not(._DropZone--userIsDragging_q2ip3_20) {
1194
- transition: min-height var(--resize-animation-ms) ease-in;
1216
+ ._DropZone--userIsDragging_djoti_15:not(._DropZone--draggingOverArea_djoti_19):not(._DropZone--draggingNewComponent_djoti_20) > ._DropZone-content_djoti_10 {
1217
+ pointer-events: none;
1195
1218
  }
1196
- ._DropZone--isAreaSelected_q2ip3_29,
1197
- ._DropZone--hoveringOverArea_q2ip3_30:not(._DropZone--isRootZone_q2ip3_30) {
1219
+ ._DropZone--isAreaSelected_djoti_26,
1220
+ ._DropZone--draggingOverArea_djoti_19:not(:has(._DropZone--hoveringOverArea_djoti_27)),
1221
+ ._DropZone--hoveringOverArea_djoti_27:not(._DropZone--isDisabled_djoti_28):not(._DropZone--isRootZone_djoti_29):not(._DropZone--hasChildren_djoti_30) {
1198
1222
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1199
1223
  outline: 2px dashed var(--puck-color-azure-08);
1200
1224
  }
1201
- ._DropZone_q2ip3_1:empty {
1225
+ ._DropZone_djoti_1:not(._DropZone--hasChildren_djoti_30) {
1202
1226
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1203
1227
  outline: 2px dashed var(--puck-color-azure-08);
1204
1228
  }
1205
- ._DropZone--isDestination_q2ip3_40 {
1229
+ ._DropZone--isDestination_djoti_40 {
1206
1230
  outline: 2px dashed var(--puck-color-azure-04) !important;
1207
1231
  }
1208
- ._DropZone--isDestination_q2ip3_40:not(._DropZone--isRootZone_q2ip3_30) {
1232
+ ._DropZone--isDestination_djoti_40:not(._DropZone--isRootZone_djoti_29) {
1209
1233
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1210
1234
  }
1211
- ._DropZone-item_q2ip3_52 {
1235
+ ._DropZone-item_djoti_52 {
1212
1236
  position: relative;
1213
1237
  }
1214
- ._DropZone-hitbox_q2ip3_56 {
1238
+ ._DropZone-hitbox_djoti_56 {
1215
1239
  position: absolute;
1216
1240
  bottom: -12px;
1217
1241
  height: 24px;
1218
1242
  width: 100%;
1219
1243
  z-index: 1;
1220
1244
  }
1221
- ._DropZone--isEnabled_q2ip3_64._DropZone--userIsDragging_q2ip3_20 {
1222
- outline: 2px dashed var(--puck-color-azure-06);
1223
- }
1224
1245
 
1225
1246
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1226
1247
  ._SidebarSection_125qe_1 {
@@ -1575,13 +1596,12 @@ textarea._Input-input_1l5m8_47 {
1575
1596
  }
1576
1597
 
1577
1598
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1578
- ._PuckPreview_z2rgu_1 {
1579
- position: relative;
1599
+ ._PuckPreview_rxwlr_1 {
1580
1600
  height: 100%;
1581
1601
  }
1582
- ._PuckPreview-frame_z2rgu_6 {
1602
+ ._PuckPreview-frame_rxwlr_5 {
1583
1603
  border: none;
1584
- height: 100%;
1604
+ min-height: 100%;
1585
1605
  width: 100%;
1586
1606
  }
1587
1607
 
@@ -1723,7 +1743,7 @@ textarea._Input-input_1l5m8_47 {
1723
1743
  }
1724
1744
 
1725
1745
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1726
- ._PuckCanvas_cf3je_1 {
1746
+ ._PuckCanvas_avf1c_1 {
1727
1747
  background: var(--puck-color-grey-11);
1728
1748
  display: flex;
1729
1749
  grid-area: editor;
@@ -1732,15 +1752,15 @@ textarea._Input-input_1l5m8_47 {
1732
1752
  overflow: auto;
1733
1753
  }
1734
1754
  @media (min-width: 1198px) {
1735
- ._PuckCanvas_cf3je_1 {
1755
+ ._PuckCanvas_avf1c_1 {
1736
1756
  padding: calc(var(--puck-space-px) * 1.5);
1737
1757
  padding-top: var(--puck-space-px);
1738
1758
  }
1739
- ._PuckCanvas_cf3je_1:not(._PuckCanvas_cf3je_1:has(._PuckCanvas-controls_cf3je_16)) {
1759
+ ._PuckCanvas_avf1c_1:not(._PuckCanvas_avf1c_1:has(._PuckCanvas-controls_avf1c_16)) {
1740
1760
  padding-top: calc(var(--puck-space-px) * 1.5);
1741
1761
  }
1742
1762
  }
1743
- ._PuckCanvas-inner_cf3je_21 {
1763
+ ._PuckCanvas-inner_avf1c_21 {
1744
1764
  box-sizing: border-box;
1745
1765
  display: flex;
1746
1766
  height: 100%;
@@ -1750,10 +1770,10 @@ textarea._Input-input_1l5m8_47 {
1750
1770
  position: relative;
1751
1771
  width: 100%;
1752
1772
  }
1753
- ._PuckCanvas-root_cf3je_32 {
1773
+ ._PuckCanvas-root_avf1c_32 {
1754
1774
  background: white;
1755
1775
  border: 1px solid var(--puck-color-grey-09);
1756
- box-sizing: content-box;
1776
+ box-sizing: border-box;
1757
1777
  min-width: 321px;
1758
1778
  position: absolute;
1759
1779
  pointer-events: none;
@@ -1763,20 +1783,20 @@ textarea._Input-input_1l5m8_47 {
1763
1783
  opacity: 0;
1764
1784
  }
1765
1785
  @media (min-width: 1198px) {
1766
- ._PuckCanvas-root_cf3je_32 {
1786
+ ._PuckCanvas-root_avf1c_32 {
1767
1787
  min-width: unset;
1768
1788
  }
1769
1789
  }
1770
1790
  @media (prefers-reduced-motion: reduce) {
1771
- ._PuckCanvas-root_cf3je_32 {
1791
+ ._PuckCanvas-root_avf1c_32 {
1772
1792
  transition: none !important;
1773
1793
  }
1774
1794
  }
1775
- ._PuckCanvas--ready_cf3je_57 ._PuckCanvas-root_cf3je_32 {
1795
+ ._PuckCanvas--ready_avf1c_57 ._PuckCanvas-root_avf1c_32 {
1776
1796
  pointer-events: unset;
1777
1797
  opacity: 1;
1778
1798
  }
1779
- ._PuckCanvas-loader_cf3je_62 {
1799
+ ._PuckCanvas-loader_avf1c_62 {
1780
1800
  align-items: center;
1781
1801
  color: var(--puck-color-grey-06);
1782
1802
  display: flex;
@@ -1785,10 +1805,10 @@ textarea._Input-input_1l5m8_47 {
1785
1805
  transition: opacity 250ms ease-out;
1786
1806
  opacity: 0;
1787
1807
  }
1788
- ._PuckCanvas--showLoader_cf3je_72 ._PuckCanvas-loader_cf3je_62 {
1808
+ ._PuckCanvas--showLoader_avf1c_72 ._PuckCanvas-loader_avf1c_62 {
1789
1809
  opacity: 1;
1790
1810
  }
1791
- ._PuckCanvas--showLoader_cf3je_72._PuckCanvas--ready_cf3je_57 ._PuckCanvas-loader_cf3je_62 {
1811
+ ._PuckCanvas--showLoader_avf1c_72._PuckCanvas--ready_avf1c_57 ._PuckCanvas-loader_avf1c_62 {
1792
1812
  opacity: 0;
1793
1813
  height: 0;
1794
1814
  transition: none;
package/dist/index.d.mts CHANGED
@@ -1,10 +1,9 @@
1
- import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-Fx9YY5bj.mjs';
2
- export { W as Adaptor, L as ArrayField, t as ArrayState, a4 as AsFieldProps, B as BaseData, G as BaseField, v as ComponentConfig, y as ComponentData, z as Content, Z as CustomField, a1 as DefaultRootProps, a0 as DefaultRootRenderProps, m as Direction, n as DragAxis, Y as ExternalField, X as ExternalFieldWithAdaptor, r as FieldRenderFunctions, _ as Fields, s as ItemWithId, M as MappedItem, N as NumberField, Q as ObjectField, q as OverrideKey, u as PuckComponent, $ as PuckContext, K as RadioField, x as RootData, R as RootDataWithProps, w as RootDataWithoutProps, S as SelectField, T as TextField, J as TextareaField, o as Viewport, a5 as WithChildren, a2 as WithId, a3 as WithPuckProps, p as overrideKeys, a6 as resolveAllData } from './resolve-all-data-Fx9YY5bj.mjs';
1
+ import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-zN5E6nBu.mjs';
2
+ export { L as Adaptor, J as ArrayField, r as ArrayState, a2 as AsFieldProps, B as BaseData, y as BaseField, t as ComponentConfig, w as ComponentData, x as Content, X as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, W as ExternalField, Q as ExternalFieldWithAdaptor, p as FieldRenderFunctions, Y as Fields, q as ItemWithId, M as MappedItem, N as NumberField, K as ObjectField, n as OverrideKey, s as PuckComponent, Z as PuckContext, G as RadioField, v as RootData, R as RootDataWithProps, u as RootDataWithoutProps, S as SelectField, T as TextField, z as TextareaField, m as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, o as overrideKeys, a4 as resolveAllData } from './resolve-all-data-zN5E6nBu.mjs';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
- import { ReactNode, SyntheticEvent, ReactElement } from 'react';
6
- import { UniqueIdentifier } from '@dnd-kit/abstract';
7
- import { Draggable } from '@dnd-kit/dom';
5
+ import { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';
6
+ import { DragStart, DragUpdate } from '@measured/dnd';
8
7
 
9
8
  declare const ActionBar: {
10
9
  ({ label, children, }: {
@@ -56,7 +55,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
56
55
  }) => react_jsx_runtime.JSX.Element;
57
56
 
58
57
  declare const Drawer: {
59
- ({ children, droppableId, direction, }: {
58
+ ({ children, droppableId: _droppableId, direction, }: {
60
59
  children: ReactNode;
61
60
  droppableId?: string;
62
61
  direction?: "vertical" | "horizontal";
@@ -69,7 +68,7 @@ declare const Drawer: {
69
68
  }) => ReactElement;
70
69
  id?: string;
71
70
  label?: string;
72
- index?: number;
71
+ index: number;
73
72
  isDragDisabled?: boolean;
74
73
  }) => react_jsx_runtime.JSX.Element;
75
74
  };
@@ -86,9 +85,12 @@ type DropZoneContext<UserConfig extends Config = Config> = {
86
85
  setItemSelector?: (newIndex: ItemSelector | null) => void;
87
86
  dispatch?: (action: PuckAction) => void;
88
87
  areaId?: string;
89
- zoneCompound?: string;
90
- index?: number;
91
- draggedItem?: Draggable | null;
88
+ draggedItem?: DragStart & Partial<DragUpdate>;
89
+ placeholderStyle?: CSSProperties;
90
+ hoveringArea?: string | null;
91
+ setHoveringArea?: (area: string | null) => void;
92
+ hoveringZone?: string | null;
93
+ setHoveringZone?: (zone: string | null) => void;
92
94
  hoveringComponent?: string | null;
93
95
  setHoveringComponent?: (id: string | null) => void;
94
96
  registerZoneArea?: (areaId: string) => void;
@@ -99,13 +101,8 @@ type DropZoneContext<UserConfig extends Config = Config> = {
99
101
  pathData?: PathData;
100
102
  registerPath?: (selector: ItemSelector) => void;
101
103
  mode?: "edit" | "render";
102
- depth: number;
103
- registerLocalZone?: (zone: string, active: boolean) => void;
104
- deepestZone?: string | null;
105
- deepestArea?: string | null;
106
- nextDeepestZone?: string | null;
107
- nextDeepestArea?: string | null;
108
- path: string[];
104
+ zoneWillDrag?: string;
105
+ setZoneWillDrag?: (zone: string) => void;
109
106
  } | null;
110
107
  declare const dropZoneContext: react.Context<DropZoneContext<Config>>;
111
108
  declare const DropZoneProvider: ({ children, value, }: {
@@ -113,12 +110,6 @@ declare const DropZoneProvider: ({ children, value, }: {
113
110
  value: DropZoneContext;
114
111
  }) => react_jsx_runtime.JSX.Element;
115
112
 
116
- type DropZoneDndData = {
117
- areaId?: string;
118
- depth: number;
119
- path: UniqueIdentifier[];
120
- isDroppableTarget: boolean;
121
- };
122
113
  declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
123
114
 
124
115
  declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
@@ -233,4 +224,4 @@ declare const usePuck: <UserConfig extends Config = Config>() => {
233
224
  selectedItem: ComponentDataMap<ExtractPropsFromConfig<UserConfig>> | null;
234
225
  };
235
226
 
236
- export { Action, ActionBar, AppState, AutoField, Button, ComponentDataMap, Config, Data, DefaultComponentProps, DefaultRootFieldProps, Drawer, DropZone, type DropZoneDndData, DropZoneProvider, ExtractPropsFromConfig, ExtractRootPropsFromConfig, Field, FieldLabel, FieldProps, Group, History, IconButton, IframeConfig, InitialHistory, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, dropZoneContext, migrate, transformProps, usePuck };
227
+ export { Action, ActionBar, AppState, AutoField, Button, ComponentDataMap, Config, Data, DefaultComponentProps, DefaultRootFieldProps, Drawer, DropZone, DropZoneProvider, ExtractPropsFromConfig, ExtractRootPropsFromConfig, Field, FieldLabel, FieldProps, Group, History, IconButton, IframeConfig, InitialHistory, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, dropZoneContext, migrate, transformProps, usePuck };
package/dist/index.d.ts CHANGED
@@ -1,10 +1,9 @@
1
- import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-Fx9YY5bj.js';
2
- export { W as Adaptor, L as ArrayField, t as ArrayState, a4 as AsFieldProps, B as BaseData, G as BaseField, v as ComponentConfig, y as ComponentData, z as Content, Z as CustomField, a1 as DefaultRootProps, a0 as DefaultRootRenderProps, m as Direction, n as DragAxis, Y as ExternalField, X as ExternalFieldWithAdaptor, r as FieldRenderFunctions, _ as Fields, s as ItemWithId, M as MappedItem, N as NumberField, Q as ObjectField, q as OverrideKey, u as PuckComponent, $ as PuckContext, K as RadioField, x as RootData, R as RootDataWithProps, w as RootDataWithoutProps, S as SelectField, T as TextField, J as TextareaField, o as Viewport, a5 as WithChildren, a2 as WithId, a3 as WithPuckProps, p as overrideKeys, a6 as resolveAllData } from './resolve-all-data-Fx9YY5bj.js';
1
+ import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-zN5E6nBu.js';
2
+ export { L as Adaptor, J as ArrayField, r as ArrayState, a2 as AsFieldProps, B as BaseData, y as BaseField, t as ComponentConfig, w as ComponentData, x as Content, X as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, W as ExternalField, Q as ExternalFieldWithAdaptor, p as FieldRenderFunctions, Y as Fields, q as ItemWithId, M as MappedItem, N as NumberField, K as ObjectField, n as OverrideKey, s as PuckComponent, Z as PuckContext, G as RadioField, v as RootData, R as RootDataWithProps, u as RootDataWithoutProps, S as SelectField, T as TextField, z as TextareaField, m as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, o as overrideKeys, a4 as resolveAllData } from './resolve-all-data-zN5E6nBu.js';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
- import { ReactNode, SyntheticEvent, ReactElement } from 'react';
6
- import { UniqueIdentifier } from '@dnd-kit/abstract';
7
- import { Draggable } from '@dnd-kit/dom';
5
+ import { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';
6
+ import { DragStart, DragUpdate } from '@measured/dnd';
8
7
 
9
8
  declare const ActionBar: {
10
9
  ({ label, children, }: {
@@ -56,7 +55,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
56
55
  }) => react_jsx_runtime.JSX.Element;
57
56
 
58
57
  declare const Drawer: {
59
- ({ children, droppableId, direction, }: {
58
+ ({ children, droppableId: _droppableId, direction, }: {
60
59
  children: ReactNode;
61
60
  droppableId?: string;
62
61
  direction?: "vertical" | "horizontal";
@@ -69,7 +68,7 @@ declare const Drawer: {
69
68
  }) => ReactElement;
70
69
  id?: string;
71
70
  label?: string;
72
- index?: number;
71
+ index: number;
73
72
  isDragDisabled?: boolean;
74
73
  }) => react_jsx_runtime.JSX.Element;
75
74
  };
@@ -86,9 +85,12 @@ type DropZoneContext<UserConfig extends Config = Config> = {
86
85
  setItemSelector?: (newIndex: ItemSelector | null) => void;
87
86
  dispatch?: (action: PuckAction) => void;
88
87
  areaId?: string;
89
- zoneCompound?: string;
90
- index?: number;
91
- draggedItem?: Draggable | null;
88
+ draggedItem?: DragStart & Partial<DragUpdate>;
89
+ placeholderStyle?: CSSProperties;
90
+ hoveringArea?: string | null;
91
+ setHoveringArea?: (area: string | null) => void;
92
+ hoveringZone?: string | null;
93
+ setHoveringZone?: (zone: string | null) => void;
92
94
  hoveringComponent?: string | null;
93
95
  setHoveringComponent?: (id: string | null) => void;
94
96
  registerZoneArea?: (areaId: string) => void;
@@ -99,13 +101,8 @@ type DropZoneContext<UserConfig extends Config = Config> = {
99
101
  pathData?: PathData;
100
102
  registerPath?: (selector: ItemSelector) => void;
101
103
  mode?: "edit" | "render";
102
- depth: number;
103
- registerLocalZone?: (zone: string, active: boolean) => void;
104
- deepestZone?: string | null;
105
- deepestArea?: string | null;
106
- nextDeepestZone?: string | null;
107
- nextDeepestArea?: string | null;
108
- path: string[];
104
+ zoneWillDrag?: string;
105
+ setZoneWillDrag?: (zone: string) => void;
109
106
  } | null;
110
107
  declare const dropZoneContext: react.Context<DropZoneContext<Config>>;
111
108
  declare const DropZoneProvider: ({ children, value, }: {
@@ -113,12 +110,6 @@ declare const DropZoneProvider: ({ children, value, }: {
113
110
  value: DropZoneContext;
114
111
  }) => react_jsx_runtime.JSX.Element;
115
112
 
116
- type DropZoneDndData = {
117
- areaId?: string;
118
- depth: number;
119
- path: UniqueIdentifier[];
120
- isDroppableTarget: boolean;
121
- };
122
113
  declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
123
114
 
124
115
  declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
@@ -233,4 +224,4 @@ declare const usePuck: <UserConfig extends Config = Config>() => {
233
224
  selectedItem: ComponentDataMap<ExtractPropsFromConfig<UserConfig>> | null;
234
225
  };
235
226
 
236
- export { Action, ActionBar, AppState, AutoField, Button, ComponentDataMap, Config, Data, DefaultComponentProps, DefaultRootFieldProps, Drawer, DropZone, type DropZoneDndData, DropZoneProvider, ExtractPropsFromConfig, ExtractRootPropsFromConfig, Field, FieldLabel, FieldProps, Group, History, IconButton, IframeConfig, InitialHistory, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, dropZoneContext, migrate, transformProps, usePuck };
227
+ export { Action, ActionBar, AppState, AutoField, Button, ComponentDataMap, Config, Data, DefaultComponentProps, DefaultRootFieldProps, Drawer, DropZone, DropZoneProvider, ExtractPropsFromConfig, ExtractRootPropsFromConfig, Field, FieldLabel, FieldProps, Group, History, IconButton, IframeConfig, InitialHistory, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, dropZoneContext, migrate, transformProps, usePuck };