@measured/puck 0.17.0-canary.159d819 → 0.17.0-canary.2d82115

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,6 +135,9 @@
135
135
  }
136
136
 
137
137
  /* styles.css */
138
+ #frame-root {
139
+ height: 100vh;
140
+ }
138
141
 
139
142
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
140
143
  ._ActionBar_151w5_1 {
@@ -1062,22 +1065,15 @@ textarea._Input-input_1l5m8_47 {
1062
1065
  }
1063
1066
 
1064
1067
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
1065
- ._Drawer_1oa7v_1 {
1068
+ ._Drawer_1ob9x_1 {
1069
+ display: flex;
1070
+ flex-direction: column;
1066
1071
  font-family: var(--puck-font-family);
1072
+ gap: 12px;
1067
1073
  }
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 {
1074
+ ._DrawerItem-draggable_1ob9x_8 {
1080
1075
  background: var(--puck-color-white);
1076
+ cursor: grab;
1081
1077
  padding: 12px;
1082
1078
  display: flex;
1083
1079
  border: 1px var(--puck-color-grey-09) solid;
@@ -1087,64 +1083,54 @@ textarea._Input-input_1l5m8_47 {
1087
1083
  align-items: center;
1088
1084
  transition: background-color 50ms ease-in, color 50ms ease-in;
1089
1085
  }
1090
- ._DrawerItem_1oa7v_5:focus-visible {
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 {
1091
1092
  outline: 0;
1092
1093
  }
1093
- ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:focus-visible ._DrawerItem-draggable_1oa7v_5 {
1094
+ ._Drawer_1ob9x_1:not(._Drawer--isDraggingFrom_1ob9x_31) ._DrawerItem_1ob9x_8:focus-visible ._DrawerItem-draggable_1ob9x_8 {
1094
1095
  border-radius: 4px;
1095
1096
  outline: 2px solid var(--puck-color-azure-05);
1096
1097
  outline-offset: 2px;
1097
1098
  }
1098
1099
  @media (hover: hover) and (pointer: fine) {
1099
- ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:not(._DrawerItem--disabled_1oa7v_5) ._DrawerItem-draggable_1oa7v_5:hover {
1100
+ ._Drawer_1ob9x_1:not(._Drawer--isDraggingFrom_1ob9x_31) ._DrawerItem_1ob9x_8:not(._DrawerItem--disabled_1ob9x_21) ._DrawerItem-draggable_1ob9x_8:hover {
1100
1101
  background-color: var(--puck-color-azure-12);
1101
1102
  color: var(--puck-color-azure-04);
1102
1103
  transition: none;
1103
1104
  }
1104
1105
  }
1105
- ._DrawerItem-name_1oa7v_54 {
1106
+ ._DrawerItem-name_1ob9x_49 {
1106
1107
  overflow-x: hidden;
1107
1108
  text-overflow: ellipsis;
1108
1109
  white-space: nowrap;
1109
1110
  }
1110
1111
 
1111
1112
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1112
- ._DraggableComponent_1bhad_1 {
1113
- pointer-events: auto;
1114
- --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1115
- }
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;
1113
+ ._DraggableComponent_146qs_1 {
1114
+ position: absolute;
1122
1115
  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;
1116
+ --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1129
1117
  }
1130
- ._DraggableComponent-overlay_1bhad_29 {
1118
+ ._DraggableComponent-overlay_146qs_12 {
1131
1119
  cursor: pointer;
1132
1120
  height: 100%;
1133
1121
  width: 100%;
1134
1122
  top: 0;
1123
+ outline: 2px var(--puck-color-azure-09) solid;
1135
1124
  outline-offset: -2px;
1136
1125
  position: absolute;
1137
1126
  pointer-events: none;
1138
1127
  box-sizing: border-box;
1139
1128
  z-index: 1;
1140
1129
  }
1141
- ._DraggableComponent_1bhad_1:focus-visible > ._DraggableComponent-overlay_1bhad_29 {
1130
+ ._DraggableComponent_146qs_1:focus-visible > ._DraggableComponent-overlay_146qs_12 {
1142
1131
  outline: 1px solid var(--puck-color-azure-05);
1143
1132
  }
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 {
1133
+ ._DraggableComponent-loadingOverlay_146qs_29 {
1148
1134
  background: var(--puck-color-white);
1149
1135
  color: var(--puck-color-grey-03);
1150
1136
  border-radius: 4px;
@@ -1159,89 +1145,82 @@ textarea._Input-input_1l5m8_47 {
1159
1145
  opacity: 0.8;
1160
1146
  z-index: 1;
1161
1147
  }
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 {
1148
+ ._DraggableComponent--hover_146qs_45:not(._DraggableComponent--isLocked_146qs_45) > ._DraggableComponent-overlay_146qs_12 {
1167
1149
  background: var(--overlay-background);
1168
- pointer-events: none;
1169
1150
  }
1170
- ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):hover > ._DraggableComponent-overlay_1bhad_29 {
1171
- outline: 2px var(--puck-color-azure-09) solid !important;
1151
+ ._DraggableComponent--hover_146qs_45 > ._DraggableComponent-overlay_146qs_12 {
1152
+ outline: 2px var(--puck-color-azure-09) solid;
1172
1153
  }
1173
- ._DraggableComponent--indicativeHover_1bhad_81 > ._DraggableComponent-overlay_1bhad_29 {
1174
- pointer-events: none;
1154
+ ._DraggableComponent--isSelected_146qs_54 > ._DraggableComponent-overlay_146qs_12 {
1155
+ outline-color: var(--puck-color-azure-07);
1175
1156
  }
1176
- ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):has(._DraggableComponent_1bhad_1:hover > ._DraggableComponent-overlay_1bhad_29) > ._DraggableComponent-overlay_1bhad_29 {
1157
+ ._DraggableComponent_146qs_1:has(._DraggableComponent--hover_146qs_45 > ._DraggableComponent-overlay_146qs_12) > ._DraggableComponent-overlay_146qs_12 {
1177
1158
  display: none;
1178
1159
  }
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;
1160
+ ._DraggableComponent-actionsOverlay_146qs_66 {
1184
1161
  position: sticky;
1185
1162
  z-index: 2;
1186
1163
  }
1187
- ._DraggableComponent-actions_1bhad_97 {
1164
+ ._DraggableComponent-actions_146qs_66 {
1188
1165
  position: absolute;
1189
1166
  width: auto;
1190
1167
  cursor: grab;
1191
- display: none;
1168
+ display: flex;
1192
1169
  pointer-events: auto;
1193
1170
  box-sizing: border-box;
1194
1171
  transform-origin: right top;
1195
1172
  }
1196
- ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 > ._DraggableComponent-actions_1bhad_97 {
1197
- display: flex;
1198
- }
1199
1173
 
1200
1174
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
1201
- ._DropZone_djoti_1 {
1202
- margin-left: auto;
1203
- margin-right: auto;
1175
+ ._DropZone_q2ip3_1 {
1176
+ --drop-animation-ms: 250ms;
1177
+ --resize-animation-ms: 150ms;
1204
1178
  position: relative;
1205
- min-height: 100%;
1179
+ height: 100%;
1180
+ min-height: var(--min-empty-height);
1206
1181
  outline-offset: -2px;
1207
1182
  width: 100%;
1208
1183
  }
1209
- ._DropZone-content_djoti_10 {
1210
- min-height: 128px;
1211
- height: 100%;
1184
+ ._DropZone--hasChildren_q2ip3_12 {
1185
+ min-height: 0;
1212
1186
  }
1213
- ._DropZone--userIsDragging_djoti_15 ._DropZone-content_djoti_10 {
1214
- pointer-events: all;
1187
+ ._DropZone_q2ip3_1:empty {
1188
+ min-height: var(--min-empty-height);
1215
1189
  }
1216
- ._DropZone--userIsDragging_djoti_15:not(._DropZone--draggingOverArea_djoti_19):not(._DropZone--draggingNewComponent_djoti_20) > ._DropZone-content_djoti_10 {
1217
- pointer-events: none;
1190
+ ._DropZone--hasChildren_q2ip3_12:not(._DropZone--userIsDragging_q2ip3_20) {
1191
+ transition: min-height var(--resize-animation-ms) var(--drop-animation-ms) ease-in;
1192
+ }
1193
+ ._DropZone_q2ip3_1:empty:not(._DropZone--userIsDragging_q2ip3_20) {
1194
+ transition: min-height var(--resize-animation-ms) ease-in;
1218
1195
  }
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) {
1196
+ ._DropZone--isAreaSelected_q2ip3_29,
1197
+ ._DropZone--hoveringOverArea_q2ip3_30:not(._DropZone--isRootZone_q2ip3_30) {
1222
1198
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1223
1199
  outline: 2px dashed var(--puck-color-azure-08);
1224
1200
  }
1225
- ._DropZone_djoti_1:not(._DropZone--hasChildren_djoti_30) {
1201
+ ._DropZone_q2ip3_1:empty {
1226
1202
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1227
1203
  outline: 2px dashed var(--puck-color-azure-08);
1228
1204
  }
1229
- ._DropZone--isDestination_djoti_40 {
1205
+ ._DropZone--isDestination_q2ip3_40 {
1230
1206
  outline: 2px dashed var(--puck-color-azure-04) !important;
1231
1207
  }
1232
- ._DropZone--isDestination_djoti_40:not(._DropZone--isRootZone_djoti_29) {
1208
+ ._DropZone--isDestination_q2ip3_40:not(._DropZone--isRootZone_q2ip3_30) {
1233
1209
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1234
1210
  }
1235
- ._DropZone-item_djoti_52 {
1211
+ ._DropZone-item_q2ip3_52 {
1236
1212
  position: relative;
1237
1213
  }
1238
- ._DropZone-hitbox_djoti_56 {
1214
+ ._DropZone-hitbox_q2ip3_56 {
1239
1215
  position: absolute;
1240
1216
  bottom: -12px;
1241
1217
  height: 24px;
1242
1218
  width: 100%;
1243
1219
  z-index: 1;
1244
1220
  }
1221
+ ._DropZone--isEnabled_q2ip3_64._DropZone--userIsDragging_q2ip3_20 {
1222
+ outline: 2px dashed var(--puck-color-azure-06);
1223
+ }
1245
1224
 
1246
1225
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1247
1226
  ._SidebarSection_125qe_1 {
@@ -1596,12 +1575,13 @@ textarea._Input-input_1l5m8_47 {
1596
1575
  }
1597
1576
 
1598
1577
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1599
- ._PuckPreview_rxwlr_1 {
1578
+ ._PuckPreview_z2rgu_1 {
1579
+ position: relative;
1600
1580
  height: 100%;
1601
1581
  }
1602
- ._PuckPreview-frame_rxwlr_5 {
1582
+ ._PuckPreview-frame_z2rgu_6 {
1603
1583
  border: none;
1604
- min-height: 100%;
1584
+ height: 100%;
1605
1585
  width: 100%;
1606
1586
  }
1607
1587
 
@@ -1743,7 +1723,7 @@ textarea._Input-input_1l5m8_47 {
1743
1723
  }
1744
1724
 
1745
1725
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1746
- ._PuckCanvas_avf1c_1 {
1726
+ ._PuckCanvas_cf3je_1 {
1747
1727
  background: var(--puck-color-grey-11);
1748
1728
  display: flex;
1749
1729
  grid-area: editor;
@@ -1752,15 +1732,15 @@ textarea._Input-input_1l5m8_47 {
1752
1732
  overflow: auto;
1753
1733
  }
1754
1734
  @media (min-width: 1198px) {
1755
- ._PuckCanvas_avf1c_1 {
1735
+ ._PuckCanvas_cf3je_1 {
1756
1736
  padding: calc(var(--puck-space-px) * 1.5);
1757
1737
  padding-top: var(--puck-space-px);
1758
1738
  }
1759
- ._PuckCanvas_avf1c_1:not(._PuckCanvas_avf1c_1:has(._PuckCanvas-controls_avf1c_16)) {
1739
+ ._PuckCanvas_cf3je_1:not(._PuckCanvas_cf3je_1:has(._PuckCanvas-controls_cf3je_16)) {
1760
1740
  padding-top: calc(var(--puck-space-px) * 1.5);
1761
1741
  }
1762
1742
  }
1763
- ._PuckCanvas-inner_avf1c_21 {
1743
+ ._PuckCanvas-inner_cf3je_21 {
1764
1744
  box-sizing: border-box;
1765
1745
  display: flex;
1766
1746
  height: 100%;
@@ -1770,10 +1750,10 @@ textarea._Input-input_1l5m8_47 {
1770
1750
  position: relative;
1771
1751
  width: 100%;
1772
1752
  }
1773
- ._PuckCanvas-root_avf1c_32 {
1753
+ ._PuckCanvas-root_cf3je_32 {
1774
1754
  background: white;
1775
1755
  border: 1px solid var(--puck-color-grey-09);
1776
- box-sizing: border-box;
1756
+ box-sizing: content-box;
1777
1757
  min-width: 321px;
1778
1758
  position: absolute;
1779
1759
  pointer-events: none;
@@ -1783,20 +1763,20 @@ textarea._Input-input_1l5m8_47 {
1783
1763
  opacity: 0;
1784
1764
  }
1785
1765
  @media (min-width: 1198px) {
1786
- ._PuckCanvas-root_avf1c_32 {
1766
+ ._PuckCanvas-root_cf3je_32 {
1787
1767
  min-width: unset;
1788
1768
  }
1789
1769
  }
1790
1770
  @media (prefers-reduced-motion: reduce) {
1791
- ._PuckCanvas-root_avf1c_32 {
1771
+ ._PuckCanvas-root_cf3je_32 {
1792
1772
  transition: none !important;
1793
1773
  }
1794
1774
  }
1795
- ._PuckCanvas--ready_avf1c_57 ._PuckCanvas-root_avf1c_32 {
1775
+ ._PuckCanvas--ready_cf3je_57 ._PuckCanvas-root_cf3je_32 {
1796
1776
  pointer-events: unset;
1797
1777
  opacity: 1;
1798
1778
  }
1799
- ._PuckCanvas-loader_avf1c_62 {
1779
+ ._PuckCanvas-loader_cf3je_62 {
1800
1780
  align-items: center;
1801
1781
  color: var(--puck-color-grey-06);
1802
1782
  display: flex;
@@ -1805,10 +1785,10 @@ textarea._Input-input_1l5m8_47 {
1805
1785
  transition: opacity 250ms ease-out;
1806
1786
  opacity: 0;
1807
1787
  }
1808
- ._PuckCanvas--showLoader_avf1c_72 ._PuckCanvas-loader_avf1c_62 {
1788
+ ._PuckCanvas--showLoader_cf3je_72 ._PuckCanvas-loader_cf3je_62 {
1809
1789
  opacity: 1;
1810
1790
  }
1811
- ._PuckCanvas--showLoader_avf1c_72._PuckCanvas--ready_avf1c_57 ._PuckCanvas-loader_avf1c_62 {
1791
+ ._PuckCanvas--showLoader_cf3je_72._PuckCanvas--ready_cf3je_57 ._PuckCanvas-loader_cf3je_62 {
1812
1792
  opacity: 0;
1813
1793
  height: 0;
1814
1794
  transition: none;
package/dist/index.d.mts CHANGED
@@ -1,9 +1,10 @@
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-C7aAQCY3.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-C7aAQCY3.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-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';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
- import { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';
6
- import { DragStart, DragUpdate } from '@measured/dnd';
5
+ import { ReactNode, SyntheticEvent, ReactElement } from 'react';
6
+ import { UniqueIdentifier } from '@dnd-kit/abstract';
7
+ import { Draggable } from '@dnd-kit/dom';
7
8
 
8
9
  declare const ActionBar: {
9
10
  ({ label, children, }: {
@@ -55,7 +56,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
55
56
  }) => react_jsx_runtime.JSX.Element;
56
57
 
57
58
  declare const Drawer: {
58
- ({ children, droppableId: _droppableId, direction, }: {
59
+ ({ children, droppableId, direction, }: {
59
60
  children: ReactNode;
60
61
  droppableId?: string;
61
62
  direction?: "vertical" | "horizontal";
@@ -68,7 +69,7 @@ declare const Drawer: {
68
69
  }) => ReactElement;
69
70
  id?: string;
70
71
  label?: string;
71
- index: number;
72
+ index?: number;
72
73
  isDragDisabled?: boolean;
73
74
  }) => react_jsx_runtime.JSX.Element;
74
75
  };
@@ -85,12 +86,9 @@ type DropZoneContext<UserConfig extends Config = Config> = {
85
86
  setItemSelector?: (newIndex: ItemSelector | null) => void;
86
87
  dispatch?: (action: PuckAction) => void;
87
88
  areaId?: string;
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;
89
+ zoneCompound?: string;
90
+ index?: number;
91
+ draggedItem?: Draggable | null;
94
92
  hoveringComponent?: string | null;
95
93
  setHoveringComponent?: (id: string | null) => void;
96
94
  registerZoneArea?: (areaId: string) => void;
@@ -101,8 +99,13 @@ type DropZoneContext<UserConfig extends Config = Config> = {
101
99
  pathData?: PathData;
102
100
  registerPath?: (selector: ItemSelector) => void;
103
101
  mode?: "edit" | "render";
104
- zoneWillDrag?: string;
105
- setZoneWillDrag?: (zone: string) => void;
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[];
106
109
  } | null;
107
110
  declare const dropZoneContext: react.Context<DropZoneContext<Config>>;
108
111
  declare const DropZoneProvider: ({ children, value, }: {
@@ -110,6 +113,12 @@ declare const DropZoneProvider: ({ children, value, }: {
110
113
  value: DropZoneContext;
111
114
  }) => react_jsx_runtime.JSX.Element;
112
115
 
116
+ type DropZoneDndData = {
117
+ areaId?: string;
118
+ depth: number;
119
+ path: UniqueIdentifier[];
120
+ isDroppableTarget: boolean;
121
+ };
113
122
  declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
114
123
 
115
124
  declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
@@ -224,4 +233,4 @@ declare const usePuck: <UserConfig extends Config = Config>() => {
224
233
  selectedItem: ComponentDataMap<ExtractPropsFromConfig<UserConfig>> | null;
225
234
  };
226
235
 
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 };
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 };
package/dist/index.d.ts CHANGED
@@ -1,9 +1,10 @@
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-C7aAQCY3.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-C7aAQCY3.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-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';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
- import { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';
6
- import { DragStart, DragUpdate } from '@measured/dnd';
5
+ import { ReactNode, SyntheticEvent, ReactElement } from 'react';
6
+ import { UniqueIdentifier } from '@dnd-kit/abstract';
7
+ import { Draggable } from '@dnd-kit/dom';
7
8
 
8
9
  declare const ActionBar: {
9
10
  ({ label, children, }: {
@@ -55,7 +56,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
55
56
  }) => react_jsx_runtime.JSX.Element;
56
57
 
57
58
  declare const Drawer: {
58
- ({ children, droppableId: _droppableId, direction, }: {
59
+ ({ children, droppableId, direction, }: {
59
60
  children: ReactNode;
60
61
  droppableId?: string;
61
62
  direction?: "vertical" | "horizontal";
@@ -68,7 +69,7 @@ declare const Drawer: {
68
69
  }) => ReactElement;
69
70
  id?: string;
70
71
  label?: string;
71
- index: number;
72
+ index?: number;
72
73
  isDragDisabled?: boolean;
73
74
  }) => react_jsx_runtime.JSX.Element;
74
75
  };
@@ -85,12 +86,9 @@ type DropZoneContext<UserConfig extends Config = Config> = {
85
86
  setItemSelector?: (newIndex: ItemSelector | null) => void;
86
87
  dispatch?: (action: PuckAction) => void;
87
88
  areaId?: string;
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;
89
+ zoneCompound?: string;
90
+ index?: number;
91
+ draggedItem?: Draggable | null;
94
92
  hoveringComponent?: string | null;
95
93
  setHoveringComponent?: (id: string | null) => void;
96
94
  registerZoneArea?: (areaId: string) => void;
@@ -101,8 +99,13 @@ type DropZoneContext<UserConfig extends Config = Config> = {
101
99
  pathData?: PathData;
102
100
  registerPath?: (selector: ItemSelector) => void;
103
101
  mode?: "edit" | "render";
104
- zoneWillDrag?: string;
105
- setZoneWillDrag?: (zone: string) => void;
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[];
106
109
  } | null;
107
110
  declare const dropZoneContext: react.Context<DropZoneContext<Config>>;
108
111
  declare const DropZoneProvider: ({ children, value, }: {
@@ -110,6 +113,12 @@ declare const DropZoneProvider: ({ children, value, }: {
110
113
  value: DropZoneContext;
111
114
  }) => react_jsx_runtime.JSX.Element;
112
115
 
116
+ type DropZoneDndData = {
117
+ areaId?: string;
118
+ depth: number;
119
+ path: UniqueIdentifier[];
120
+ isDroppableTarget: boolean;
121
+ };
113
122
  declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
114
123
 
115
124
  declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
@@ -224,4 +233,4 @@ declare const usePuck: <UserConfig extends Config = Config>() => {
224
233
  selectedItem: ComponentDataMap<ExtractPropsFromConfig<UserConfig>> | null;
225
234
  };
226
235
 
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 };
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 };