@uniformdev/canvas-react 18.28.0 → 18.29.2-alpha.11

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.
Files changed (4) hide show
  1. package/dist/index.esm.js +69 -42
  2. package/dist/index.js +93 -68
  3. package/dist/index.mjs +69 -42
  4. package/package.json +6 -6
package/dist/index.esm.js CHANGED
@@ -36,7 +36,7 @@ import {
36
36
  CANVAS_ENRICHMENT_TAG_PARAM
37
37
  } from "@uniformdev/canvas";
38
38
  import { Track, TrackFragment, useUniformContext } from "@uniformdev/context-react";
39
- import React4, { createContext, useContext } from "react";
39
+ import React5, { createContext, useContext } from "react";
40
40
 
41
41
  // src/convertComponentToProps.ts
42
42
  function convertComponentToProps(component) {
@@ -94,15 +94,12 @@ var componentStoreResolver = createComponentStoreResolver({
94
94
 
95
95
  // src/components/UniformSlot.tsx
96
96
  import {
97
- CANVAS_LOCALE_TAG_PARAM,
98
97
  CANVAS_PERSONALIZE_SLOT,
99
98
  CANVAS_PERSONALIZE_TYPE,
100
99
  CANVAS_TEST_SLOT,
101
- CANVAS_TEST_TYPE,
102
- IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
103
- PLACEHOLDER_ID
100
+ CANVAS_TEST_TYPE
104
101
  } from "@uniformdev/canvas";
105
- import React3 from "react";
102
+ import React4 from "react";
106
103
 
107
104
  // src/defaultSystemComponentResolver.tsx
108
105
  import {
@@ -145,6 +142,44 @@ var defaultSystemComponentResolver = {
145
142
  }
146
143
  };
147
144
 
145
+ // src/components/ContextualEditingComponentWrapper.tsx
146
+ import {
147
+ CANVAS_LOCALE_TAG_PARAM,
148
+ IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
149
+ IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
150
+ PLACEHOLDER_ID
151
+ } from "@uniformdev/canvas";
152
+ import React3 from "react";
153
+ function ContextualEditingComponentWrapper({
154
+ component,
155
+ parentComponent,
156
+ slotName,
157
+ indexInSlot,
158
+ slotChildrenCount,
159
+ emptyPlaceholder,
160
+ children
161
+ }) {
162
+ var _a, _b, _c, _d;
163
+ const isPlaceholder = (component == null ? void 0 : component._id) === PLACEHOLDER_ID;
164
+ const shouldRenderContextualEditingTags = Boolean(component == null ? void 0 : component._id);
165
+ return !shouldRenderContextualEditingTags ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, children) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
166
+ "script",
167
+ {
168
+ "data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
169
+ "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
170
+ "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
171
+ "data-component-id": component == null ? void 0 : component._id,
172
+ "data-slot-name": slotName != null ? slotName : "",
173
+ "data-component-index": indexInSlot != null ? indexInSlot : "",
174
+ "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
175
+ "data-component-name": component == null ? void 0 : component.type,
176
+ "data-is-placeholder": isPlaceholder ? "true" : void 0,
177
+ "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
178
+ "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
179
+ }
180
+ ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children, /* @__PURE__ */ React3.createElement("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
181
+ }
182
+
148
183
  // src/components/UniformSlot.tsx
149
184
  function UniformSlot({
150
185
  name,
@@ -182,9 +217,9 @@ function UniformSlot({
182
217
  emptyPlaceholder
183
218
  });
184
219
  const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
185
- return React3.createElement(React3.Fragment, { key: index }, elements);
220
+ return React4.createElement(React4.Fragment, { key: index }, elements);
186
221
  });
187
- return React3.createElement(React3.Fragment, void 0, finalChildren);
222
+ return React4.createElement(React4.Fragment, void 0, finalChildren);
188
223
  }
189
224
  function renderComponent({
190
225
  component,
@@ -197,14 +232,13 @@ function renderComponent({
197
232
  slotChildrenCount,
198
233
  emptyPlaceholder
199
234
  }) {
200
- var _a, _b, _c, _d;
201
235
  const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
202
236
  if (component.type === CANVAS_TEST_TYPE) {
203
237
  return resolveSystem.test(
204
238
  component,
205
239
  key,
206
240
  (variantComponent, key2) => {
207
- var _a2, _b2;
241
+ var _a, _b;
208
242
  return renderComponent({
209
243
  component: variantComponent,
210
244
  resolveRenderer,
@@ -212,8 +246,8 @@ function renderComponent({
212
246
  key: key2,
213
247
  parentComponent: component,
214
248
  slotName: CANVAS_TEST_SLOT,
215
- slotChildrenCount: (_a2 = component == null ? void 0 : component.slots) == null ? void 0 : _a2[CANVAS_TEST_SLOT].length,
216
- indexInSlot: (_b2 = component == null ? void 0 : component.slots) == null ? void 0 : _b2[CANVAS_TEST_SLOT].findIndex(
249
+ slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[CANVAS_TEST_SLOT].length,
250
+ indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[CANVAS_TEST_SLOT].findIndex(
217
251
  ({ _id }) => variantComponent._id === _id
218
252
  )
219
253
  });
@@ -224,7 +258,7 @@ function renderComponent({
224
258
  component,
225
259
  key,
226
260
  (variantComponent, key2) => {
227
- var _a2, _b2;
261
+ var _a, _b;
228
262
  return renderComponent({
229
263
  component: variantComponent,
230
264
  resolveRenderer,
@@ -232,8 +266,8 @@ function renderComponent({
232
266
  key: key2,
233
267
  parentComponent: component,
234
268
  slotName: CANVAS_PERSONALIZE_SLOT,
235
- slotChildrenCount: (_a2 = component == null ? void 0 : component.slots) == null ? void 0 : _a2[CANVAS_PERSONALIZE_SLOT].length,
236
- indexInSlot: (_b2 = component == null ? void 0 : component.slots) == null ? void 0 : _b2[CANVAS_PERSONALIZE_SLOT].findIndex(
269
+ slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[CANVAS_PERSONALIZE_SLOT].length,
270
+ indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[CANVAS_PERSONALIZE_SLOT].findIndex(
237
271
  ({ _id }) => variantComponent._id === _id
238
272
  )
239
273
  });
@@ -241,25 +275,18 @@ function renderComponent({
241
275
  );
242
276
  } else if (RenderComponent) {
243
277
  const props = convertComponentToProps(component);
244
- const shouldRenderContextualEditingTags = Boolean(component._id);
245
- const isPlaceholder = component._id === PLACEHOLDER_ID;
246
- return /* @__PURE__ */ React3.createElement(UniformComponent, { key, data: component, resolveRenderer }, !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ React3.createElement(
247
- "script",
278
+ return /* @__PURE__ */ React4.createElement(UniformComponent, { key, data: component, resolveRenderer }, /* @__PURE__ */ React4.createElement(
279
+ ContextualEditingComponentWrapper,
248
280
  {
249
- key,
250
- "data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
251
- "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
252
- "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
253
- "data-component-id": component._id,
254
- "data-slot-name": slotName != null ? slotName : "",
255
- "data-component-index": indexInSlot != null ? indexInSlot : "",
256
- "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
257
- "data-component-name": component.type,
258
- "data-is-placeholder": isPlaceholder ? "true" : void 0,
259
- "data-is-localized": ((_a = component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
260
- "data-component-title": (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
261
- }
262
- ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : /* @__PURE__ */ React3.createElement(RenderComponent, { ...props }), !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ React3.createElement("script", { "data-role": "component-end" }));
281
+ component,
282
+ parentComponent,
283
+ slotName,
284
+ indexInSlot,
285
+ slotChildrenCount,
286
+ emptyPlaceholder
287
+ },
288
+ /* @__PURE__ */ React4.createElement(RenderComponent, { ...props })
289
+ ));
263
290
  } else if (process.env.NODE_ENV !== "production") {
264
291
  console.warn(
265
292
  `[canvas] found component of type '${component.type}'${component.variant ? ` with variant '${component.variant}'` : ""}. Nothing will be rendered. Check your resolveRenderer function or add registerUniformComponent to your component.
@@ -304,9 +331,9 @@ function UniformComponent({
304
331
  hasParentLayout: Boolean(parentData.data),
305
332
  resolveRenderer: contextValue.resolveRenderer
306
333
  });
307
- return /* @__PURE__ */ React4.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
334
+ return /* @__PURE__ */ React5.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
308
335
  /* auto-track behavior signals when in a Canvas context */
309
- /* @__PURE__ */ React4.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
336
+ /* @__PURE__ */ React5.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
310
337
  ) : resolvedChildren);
311
338
  }
312
339
  function resolveChildren({
@@ -319,14 +346,14 @@ function resolveChildren({
319
346
  if (!children && !hasParentLayout) {
320
347
  const topLevelComponent = resolveRenderer({ type: data.type });
321
348
  if (topLevelComponent) {
322
- children = React4.createElement(topLevelComponent, convertComponentToProps(data));
349
+ children = React5.createElement(topLevelComponent, convertComponentToProps(data));
323
350
  } else {
324
351
  if (Object.keys((_a = data.slots) != null ? _a : {}).length > 1 && process.env.NODE_ENV === "development") {
325
352
  console.warn(
326
353
  `[canvas-dev] All the slots in component '${data.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`
327
354
  );
328
355
  }
329
- children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ React4.createElement(UniformSlot, { key: slotName, name: slotName }));
356
+ children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ React5.createElement(UniformSlot, { key: slotName, name: slotName }));
330
357
  }
331
358
  }
332
359
  const renderChildren = typeof children === "function" ? children(convertComponentToProps(data)) : children;
@@ -334,7 +361,7 @@ function resolveChildren({
334
361
  }
335
362
 
336
363
  // src/components/UniformComposition.tsx
337
- import React5, { createContext as createContext2, useContext as useContext2 } from "react";
364
+ import React6, { createContext as createContext2, useContext as useContext2 } from "react";
338
365
 
339
366
  // src/hooks/useUniformContextualEditing.ts
340
367
  import {
@@ -367,7 +394,7 @@ var useUniformContextualEditing = ({
367
394
  if (!channel || registeredCompositionIds.has(initialCompositionValue == null ? void 0 : initialCompositionValue._id)) {
368
395
  return;
369
396
  }
370
- const unsubscribe = channel.on("update-composition", async (message) => {
397
+ const unsubscribeFromCompositionUpdates = channel.on("update-composition", async (message) => {
371
398
  if (!isUpdateCompositionMessage(message)) {
372
399
  return;
373
400
  }
@@ -376,7 +403,7 @@ var useUniformContextualEditing = ({
376
403
  });
377
404
  registeredCompositionIds.add(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
378
405
  return () => {
379
- unsubscribe();
406
+ unsubscribeFromCompositionUpdates();
380
407
  registeredCompositionIds.delete(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
381
408
  };
382
409
  }, [channel, enhance, initialCompositionValue == null ? void 0 : initialCompositionValue._id]);
@@ -435,7 +462,7 @@ function UniformComposition({
435
462
  initialCompositionValue: data,
436
463
  enhance: contextualEditingEnhancer
437
464
  });
438
- return /* @__PURE__ */ React5.createElement(UniformCompositionContext.Provider, { value: { data: composition, behaviorTracking, resolveRenderer } }, /* @__PURE__ */ React5.createElement(
465
+ return /* @__PURE__ */ React6.createElement(UniformCompositionContext.Provider, { value: { data: composition, behaviorTracking, resolveRenderer } }, /* @__PURE__ */ React6.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ React6.createElement(
439
466
  UniformComponent,
440
467
  {
441
468
  data: composition,
@@ -443,7 +470,7 @@ function UniformComposition({
443
470
  resolveRenderer
444
471
  },
445
472
  children
446
- ));
473
+ )));
447
474
  }
448
475
  var useComposition = useUniformCurrentComposition;
449
476
  var Composition = UniformComposition;
package/dist/index.js CHANGED
@@ -42,7 +42,7 @@ __export(src_exports, {
42
42
  createApiEnhancer: () => createApiEnhancer,
43
43
  createComponentStore: () => createComponentStore,
44
44
  createComponentStoreResolver: () => createComponentStoreResolver,
45
- createUniformApiEnhancer: () => import_canvas5.createUniformApiEnhancer,
45
+ createUniformApiEnhancer: () => import_canvas6.createUniformApiEnhancer,
46
46
  registerUniformComponent: () => registerUniformComponent,
47
47
  useComposition: () => useComposition,
48
48
  useCompositionEventEffect: () => useCompositionEventEffect,
@@ -87,9 +87,9 @@ function DefaultNotImplementedComponent(props) {
87
87
  }
88
88
 
89
89
  // src/components/UniformComponent.tsx
90
- var import_canvas4 = require("@uniformdev/canvas");
90
+ var import_canvas5 = require("@uniformdev/canvas");
91
91
  var import_context_react2 = require("@uniformdev/context-react");
92
- var import_react3 = __toESM(require("react"));
92
+ var import_react4 = __toESM(require("react"));
93
93
 
94
94
  // src/convertComponentToProps.ts
95
95
  function convertComponentToProps(component) {
@@ -146,8 +146,8 @@ var componentStoreResolver = createComponentStoreResolver({
146
146
  });
147
147
 
148
148
  // src/components/UniformSlot.tsx
149
- var import_canvas3 = require("@uniformdev/canvas");
150
- var import_react2 = __toESM(require("react"));
149
+ var import_canvas4 = require("@uniformdev/canvas");
150
+ var import_react3 = __toESM(require("react"));
151
151
 
152
152
  // src/defaultSystemComponentResolver.tsx
153
153
  var import_canvas2 = require("@uniformdev/canvas");
@@ -187,6 +187,39 @@ var defaultSystemComponentResolver = {
187
187
  }
188
188
  };
189
189
 
190
+ // src/components/ContextualEditingComponentWrapper.tsx
191
+ var import_canvas3 = require("@uniformdev/canvas");
192
+ var import_react2 = __toESM(require("react"));
193
+ function ContextualEditingComponentWrapper({
194
+ component,
195
+ parentComponent,
196
+ slotName,
197
+ indexInSlot,
198
+ slotChildrenCount,
199
+ emptyPlaceholder,
200
+ children
201
+ }) {
202
+ var _a, _b, _c, _d;
203
+ const isPlaceholder = (component == null ? void 0 : component._id) === import_canvas3.PLACEHOLDER_ID;
204
+ const shouldRenderContextualEditingTags = Boolean(component == null ? void 0 : component._id);
205
+ return !shouldRenderContextualEditingTags ? /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, children) : /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(
206
+ "script",
207
+ {
208
+ "data-role": import_canvas3.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
209
+ "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
210
+ "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
211
+ "data-component-id": component == null ? void 0 : component._id,
212
+ "data-slot-name": slotName != null ? slotName : "",
213
+ "data-component-index": indexInSlot != null ? indexInSlot : "",
214
+ "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
215
+ "data-component-name": component == null ? void 0 : component.type,
216
+ "data-is-placeholder": isPlaceholder ? "true" : void 0,
217
+ "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[import_canvas3.CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
218
+ "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
219
+ }
220
+ ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children, /* @__PURE__ */ import_react2.default.createElement("script", { "data-role": import_canvas3.IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
221
+ }
222
+
190
223
  // src/components/UniformSlot.tsx
191
224
  function UniformSlot({
192
225
  name,
@@ -224,9 +257,9 @@ function UniformSlot({
224
257
  emptyPlaceholder
225
258
  });
226
259
  const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
227
- return import_react2.default.createElement(import_react2.default.Fragment, { key: index }, elements);
260
+ return import_react3.default.createElement(import_react3.default.Fragment, { key: index }, elements);
228
261
  });
229
- return import_react2.default.createElement(import_react2.default.Fragment, void 0, finalChildren);
262
+ return import_react3.default.createElement(import_react3.default.Fragment, void 0, finalChildren);
230
263
  }
231
264
  function renderComponent({
232
265
  component,
@@ -239,43 +272,42 @@ function renderComponent({
239
272
  slotChildrenCount,
240
273
  emptyPlaceholder
241
274
  }) {
242
- var _a, _b, _c, _d;
243
275
  const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
244
- if (component.type === import_canvas3.CANVAS_TEST_TYPE) {
276
+ if (component.type === import_canvas4.CANVAS_TEST_TYPE) {
245
277
  return resolveSystem.test(
246
278
  component,
247
279
  key,
248
280
  (variantComponent, key2) => {
249
- var _a2, _b2;
281
+ var _a, _b;
250
282
  return renderComponent({
251
283
  component: variantComponent,
252
284
  resolveRenderer,
253
285
  resolveSystem,
254
286
  key: key2,
255
287
  parentComponent: component,
256
- slotName: import_canvas3.CANVAS_TEST_SLOT,
257
- slotChildrenCount: (_a2 = component == null ? void 0 : component.slots) == null ? void 0 : _a2[import_canvas3.CANVAS_TEST_SLOT].length,
258
- indexInSlot: (_b2 = component == null ? void 0 : component.slots) == null ? void 0 : _b2[import_canvas3.CANVAS_TEST_SLOT].findIndex(
288
+ slotName: import_canvas4.CANVAS_TEST_SLOT,
289
+ slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[import_canvas4.CANVAS_TEST_SLOT].length,
290
+ indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[import_canvas4.CANVAS_TEST_SLOT].findIndex(
259
291
  ({ _id }) => variantComponent._id === _id
260
292
  )
261
293
  });
262
294
  }
263
295
  );
264
- } else if (component.type === import_canvas3.CANVAS_PERSONALIZE_TYPE) {
296
+ } else if (component.type === import_canvas4.CANVAS_PERSONALIZE_TYPE) {
265
297
  return resolveSystem.personalization(
266
298
  component,
267
299
  key,
268
300
  (variantComponent, key2) => {
269
- var _a2, _b2;
301
+ var _a, _b;
270
302
  return renderComponent({
271
303
  component: variantComponent,
272
304
  resolveRenderer,
273
305
  resolveSystem,
274
306
  key: key2,
275
307
  parentComponent: component,
276
- slotName: import_canvas3.CANVAS_PERSONALIZE_SLOT,
277
- slotChildrenCount: (_a2 = component == null ? void 0 : component.slots) == null ? void 0 : _a2[import_canvas3.CANVAS_PERSONALIZE_SLOT].length,
278
- indexInSlot: (_b2 = component == null ? void 0 : component.slots) == null ? void 0 : _b2[import_canvas3.CANVAS_PERSONALIZE_SLOT].findIndex(
308
+ slotName: import_canvas4.CANVAS_PERSONALIZE_SLOT,
309
+ slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[import_canvas4.CANVAS_PERSONALIZE_SLOT].length,
310
+ indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[import_canvas4.CANVAS_PERSONALIZE_SLOT].findIndex(
279
311
  ({ _id }) => variantComponent._id === _id
280
312
  )
281
313
  });
@@ -283,25 +315,18 @@ function renderComponent({
283
315
  );
284
316
  } else if (RenderComponent) {
285
317
  const props = convertComponentToProps(component);
286
- const shouldRenderContextualEditingTags = Boolean(component._id);
287
- const isPlaceholder = component._id === import_canvas3.PLACEHOLDER_ID;
288
- return /* @__PURE__ */ import_react2.default.createElement(UniformComponent, { key, data: component, resolveRenderer }, !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ import_react2.default.createElement(
289
- "script",
318
+ return /* @__PURE__ */ import_react3.default.createElement(UniformComponent, { key, data: component, resolveRenderer }, /* @__PURE__ */ import_react3.default.createElement(
319
+ ContextualEditingComponentWrapper,
290
320
  {
291
- key,
292
- "data-role": import_canvas3.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
293
- "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
294
- "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
295
- "data-component-id": component._id,
296
- "data-slot-name": slotName != null ? slotName : "",
297
- "data-component-index": indexInSlot != null ? indexInSlot : "",
298
- "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
299
- "data-component-name": component.type,
300
- "data-is-placeholder": isPlaceholder ? "true" : void 0,
301
- "data-is-localized": ((_a = component.parameters) == null ? void 0 : _a[import_canvas3.CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
302
- "data-component-title": (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
303
- }
304
- ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : /* @__PURE__ */ import_react2.default.createElement(RenderComponent, { ...props }), !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ import_react2.default.createElement("script", { "data-role": "component-end" }));
321
+ component,
322
+ parentComponent,
323
+ slotName,
324
+ indexInSlot,
325
+ slotChildrenCount,
326
+ emptyPlaceholder
327
+ },
328
+ /* @__PURE__ */ import_react3.default.createElement(RenderComponent, { ...props })
329
+ ));
305
330
  } else if (process.env.NODE_ENV !== "production") {
306
331
  console.warn(
307
332
  `[canvas] found component of type '${component.type}'${component.variant ? ` with variant '${component.variant}'` : ""}. Nothing will be rendered. Check your resolveRenderer function or add registerUniformComponent to your component.
@@ -314,9 +339,9 @@ function renderComponent({
314
339
  var Slot = UniformSlot;
315
340
 
316
341
  // src/components/UniformComponent.tsx
317
- var UniformComponentContext = (0, import_react3.createContext)({});
342
+ var UniformComponentContext = (0, import_react4.createContext)({});
318
343
  function useUniformCurrentComponent() {
319
- return (0, import_react3.useContext)(UniformComponentContext);
344
+ return (0, import_react4.useContext)(UniformComponentContext);
320
345
  }
321
346
  function UniformComponent({
322
347
  data,
@@ -338,7 +363,7 @@ function UniformComponent({
338
363
  resolveRenderer: resolveRenderer || parentData.resolveRenderer || componentStoreResolver,
339
364
  behaviorTracking: (_a = behaviorTracking != null ? behaviorTracking : parentData == null ? void 0 : parentData.behaviorTracking) != null ? _a : "onView"
340
365
  };
341
- const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[import_canvas4.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
366
+ const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[import_canvas5.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
342
367
  const TrackComponent = contextValue.behaviorTracking === "onLoad" ? import_context_react2.TrackFragment : import_context_react2.Track;
343
368
  const resolvedChildren = resolveChildren({
344
369
  children,
@@ -346,9 +371,9 @@ function UniformComponent({
346
371
  hasParentLayout: Boolean(parentData.data),
347
372
  resolveRenderer: contextValue.resolveRenderer
348
373
  });
349
- return /* @__PURE__ */ import_react3.default.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
374
+ return /* @__PURE__ */ import_react4.default.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
350
375
  /* auto-track behavior signals when in a Canvas context */
351
- /* @__PURE__ */ import_react3.default.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
376
+ /* @__PURE__ */ import_react4.default.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
352
377
  ) : resolvedChildren);
353
378
  }
354
379
  function resolveChildren({
@@ -361,14 +386,14 @@ function resolveChildren({
361
386
  if (!children && !hasParentLayout) {
362
387
  const topLevelComponent = resolveRenderer({ type: data.type });
363
388
  if (topLevelComponent) {
364
- children = import_react3.default.createElement(topLevelComponent, convertComponentToProps(data));
389
+ children = import_react4.default.createElement(topLevelComponent, convertComponentToProps(data));
365
390
  } else {
366
391
  if (Object.keys((_a = data.slots) != null ? _a : {}).length > 1 && process.env.NODE_ENV === "development") {
367
392
  console.warn(
368
393
  `[canvas-dev] All the slots in component '${data.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`
369
394
  );
370
395
  }
371
- children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ import_react3.default.createElement(UniformSlot, { key: slotName, name: slotName }));
396
+ children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ import_react4.default.createElement(UniformSlot, { key: slotName, name: slotName }));
372
397
  }
373
398
  }
374
399
  const renderChildren = typeof children === "function" ? children(convertComponentToProps(data)) : children;
@@ -376,35 +401,35 @@ function resolveChildren({
376
401
  }
377
402
 
378
403
  // src/components/UniformComposition.tsx
379
- var import_react5 = __toESM(require("react"));
404
+ var import_react6 = __toESM(require("react"));
380
405
 
381
406
  // src/hooks/useUniformContextualEditing.ts
382
- var import_canvas5 = require("@uniformdev/canvas");
383
- var import_react4 = require("react");
384
- var createApiEnhancer = import_canvas5.createUniformApiEnhancer;
407
+ var import_canvas6 = require("@uniformdev/canvas");
408
+ var import_react5 = require("react");
409
+ var createApiEnhancer = import_canvas6.createUniformApiEnhancer;
385
410
  var registeredCompositionIds = /* @__PURE__ */ new Set();
386
411
  var useUniformContextualEditing = ({
387
412
  initialCompositionValue,
388
413
  enhance = (message) => message.composition
389
414
  }) => {
390
- const [contextualComposition, setContextualComposition] = (0, import_react4.useState)();
391
- const channel = (0, import_react4.useMemo)(() => {
415
+ const [contextualComposition, setContextualComposition] = (0, import_react5.useState)();
416
+ const channel = (0, import_react5.useMemo)(() => {
392
417
  var _a;
393
418
  if (!isInContextEditingMode()) {
394
419
  return;
395
420
  }
396
- const channel2 = (0, import_canvas5.createCanvasChannel)({
421
+ const channel2 = (0, import_canvas6.createCanvasChannel)({
397
422
  broadcastTo: [(_a = window.opener) != null ? _a : window.top],
398
423
  listenTo: [window]
399
424
  });
400
425
  return channel2;
401
426
  }, []);
402
- (0, import_react4.useEffect)(() => {
427
+ (0, import_react5.useEffect)(() => {
403
428
  if (!channel || registeredCompositionIds.has(initialCompositionValue == null ? void 0 : initialCompositionValue._id)) {
404
429
  return;
405
430
  }
406
- const unsubscribe = channel.on("update-composition", async (message) => {
407
- if (!(0, import_canvas5.isUpdateCompositionMessage)(message)) {
431
+ const unsubscribeFromCompositionUpdates = channel.on("update-composition", async (message) => {
432
+ if (!(0, import_canvas6.isUpdateCompositionMessage)(message)) {
408
433
  return;
409
434
  }
410
435
  const enhancedComposition = await enhance(message);
@@ -412,15 +437,15 @@ var useUniformContextualEditing = ({
412
437
  });
413
438
  registeredCompositionIds.add(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
414
439
  return () => {
415
- unsubscribe();
440
+ unsubscribeFromCompositionUpdates();
416
441
  registeredCompositionIds.delete(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
417
442
  };
418
443
  }, [channel, enhance, initialCompositionValue == null ? void 0 : initialCompositionValue._id]);
419
- (0, import_react4.useEffect)(() => {
444
+ (0, import_react5.useEffect)(() => {
420
445
  if (!isInContextEditingMode()) {
421
446
  return;
422
447
  }
423
- const existingScript = document.getElementById(import_canvas5.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
448
+ const existingScript = document.getElementById(import_canvas6.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
424
449
  if (existingScript) {
425
450
  return;
426
451
  }
@@ -428,7 +453,7 @@ var useUniformContextualEditing = ({
428
453
  framework: "React"
429
454
  };
430
455
  const script = document.createElement("script");
431
- script.id = import_canvas5.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
456
+ script.id = import_canvas6.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
432
457
  script.src = getCanvasInContextEmbedScriptUrl();
433
458
  script.async = true;
434
459
  document.head.appendChild(script);
@@ -446,7 +471,7 @@ function isInContextEditingMode() {
446
471
  return false;
447
472
  }
448
473
  const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
449
- import_canvas5.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
474
+ import_canvas6.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
450
475
  );
451
476
  const isAllowlistedReferrer = Boolean(
452
477
  window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//)
@@ -456,9 +481,9 @@ function isInContextEditingMode() {
456
481
  var useContextualEditing = useUniformContextualEditing;
457
482
 
458
483
  // src/components/UniformComposition.tsx
459
- var UniformCompositionContext = (0, import_react5.createContext)({ data: void 0 });
484
+ var UniformCompositionContext = (0, import_react6.createContext)({ data: void 0 });
460
485
  function useUniformCurrentComposition() {
461
- return (0, import_react5.useContext)(UniformCompositionContext);
486
+ return (0, import_react6.useContext)(UniformCompositionContext);
462
487
  }
463
488
  function UniformComposition({
464
489
  data,
@@ -471,7 +496,7 @@ function UniformComposition({
471
496
  initialCompositionValue: data,
472
497
  enhance: contextualEditingEnhancer
473
498
  });
474
- return /* @__PURE__ */ import_react5.default.createElement(UniformCompositionContext.Provider, { value: { data: composition, behaviorTracking, resolveRenderer } }, /* @__PURE__ */ import_react5.default.createElement(
499
+ return /* @__PURE__ */ import_react6.default.createElement(UniformCompositionContext.Provider, { value: { data: composition, behaviorTracking, resolveRenderer } }, /* @__PURE__ */ import_react6.default.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ import_react6.default.createElement(
475
500
  UniformComponent,
476
501
  {
477
502
  data: composition,
@@ -479,32 +504,32 @@ function UniformComposition({
479
504
  resolveRenderer
480
505
  },
481
506
  children
482
- ));
507
+ )));
483
508
  }
484
509
  var useComposition = useUniformCurrentComposition;
485
510
  var Composition = UniformComposition;
486
511
 
487
512
  // src/hooks/useCompositionEventEffect.ts
488
- var import_canvas6 = require("@uniformdev/canvas");
489
- var import_react6 = require("react");
513
+ var import_canvas7 = require("@uniformdev/canvas");
514
+ var import_react7 = require("react");
490
515
  function useCompositionEventEffect({
491
516
  enabled,
492
517
  projectId,
493
518
  compositionId,
494
519
  effect
495
520
  }) {
496
- (0, import_react6.useEffect)(() => {
521
+ (0, import_react7.useEffect)(() => {
497
522
  if (!enabled || !compositionId || !projectId) {
498
523
  return;
499
524
  }
500
525
  let goodbye = void 0;
501
526
  const loadEffect = async () => {
502
- const eventBus = await (0, import_canvas6.createEventBus)();
527
+ const eventBus = await (0, import_canvas7.createEventBus)();
503
528
  if (eventBus) {
504
- goodbye = (0, import_canvas6.subscribeToComposition)({
529
+ goodbye = (0, import_canvas7.subscribeToComposition)({
505
530
  eventBus,
506
531
  compositionId,
507
- compositionState: import_canvas6.CANVAS_DRAFT_STATE,
532
+ compositionState: import_canvas7.CANVAS_DRAFT_STATE,
508
533
  projectId,
509
534
  callback: effect,
510
535
  event: "updated"
package/dist/index.mjs CHANGED
@@ -36,7 +36,7 @@ import {
36
36
  CANVAS_ENRICHMENT_TAG_PARAM
37
37
  } from "@uniformdev/canvas";
38
38
  import { Track, TrackFragment, useUniformContext } from "@uniformdev/context-react";
39
- import React4, { createContext, useContext } from "react";
39
+ import React5, { createContext, useContext } from "react";
40
40
 
41
41
  // src/convertComponentToProps.ts
42
42
  function convertComponentToProps(component) {
@@ -94,15 +94,12 @@ var componentStoreResolver = createComponentStoreResolver({
94
94
 
95
95
  // src/components/UniformSlot.tsx
96
96
  import {
97
- CANVAS_LOCALE_TAG_PARAM,
98
97
  CANVAS_PERSONALIZE_SLOT,
99
98
  CANVAS_PERSONALIZE_TYPE,
100
99
  CANVAS_TEST_SLOT,
101
- CANVAS_TEST_TYPE,
102
- IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
103
- PLACEHOLDER_ID
100
+ CANVAS_TEST_TYPE
104
101
  } from "@uniformdev/canvas";
105
- import React3 from "react";
102
+ import React4 from "react";
106
103
 
107
104
  // src/defaultSystemComponentResolver.tsx
108
105
  import {
@@ -145,6 +142,44 @@ var defaultSystemComponentResolver = {
145
142
  }
146
143
  };
147
144
 
145
+ // src/components/ContextualEditingComponentWrapper.tsx
146
+ import {
147
+ CANVAS_LOCALE_TAG_PARAM,
148
+ IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
149
+ IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
150
+ PLACEHOLDER_ID
151
+ } from "@uniformdev/canvas";
152
+ import React3 from "react";
153
+ function ContextualEditingComponentWrapper({
154
+ component,
155
+ parentComponent,
156
+ slotName,
157
+ indexInSlot,
158
+ slotChildrenCount,
159
+ emptyPlaceholder,
160
+ children
161
+ }) {
162
+ var _a, _b, _c, _d;
163
+ const isPlaceholder = (component == null ? void 0 : component._id) === PLACEHOLDER_ID;
164
+ const shouldRenderContextualEditingTags = Boolean(component == null ? void 0 : component._id);
165
+ return !shouldRenderContextualEditingTags ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, children) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
166
+ "script",
167
+ {
168
+ "data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
169
+ "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
170
+ "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
171
+ "data-component-id": component == null ? void 0 : component._id,
172
+ "data-slot-name": slotName != null ? slotName : "",
173
+ "data-component-index": indexInSlot != null ? indexInSlot : "",
174
+ "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
175
+ "data-component-name": component == null ? void 0 : component.type,
176
+ "data-is-placeholder": isPlaceholder ? "true" : void 0,
177
+ "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
178
+ "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
179
+ }
180
+ ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children, /* @__PURE__ */ React3.createElement("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
181
+ }
182
+
148
183
  // src/components/UniformSlot.tsx
149
184
  function UniformSlot({
150
185
  name,
@@ -182,9 +217,9 @@ function UniformSlot({
182
217
  emptyPlaceholder
183
218
  });
184
219
  const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
185
- return React3.createElement(React3.Fragment, { key: index }, elements);
220
+ return React4.createElement(React4.Fragment, { key: index }, elements);
186
221
  });
187
- return React3.createElement(React3.Fragment, void 0, finalChildren);
222
+ return React4.createElement(React4.Fragment, void 0, finalChildren);
188
223
  }
189
224
  function renderComponent({
190
225
  component,
@@ -197,14 +232,13 @@ function renderComponent({
197
232
  slotChildrenCount,
198
233
  emptyPlaceholder
199
234
  }) {
200
- var _a, _b, _c, _d;
201
235
  const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
202
236
  if (component.type === CANVAS_TEST_TYPE) {
203
237
  return resolveSystem.test(
204
238
  component,
205
239
  key,
206
240
  (variantComponent, key2) => {
207
- var _a2, _b2;
241
+ var _a, _b;
208
242
  return renderComponent({
209
243
  component: variantComponent,
210
244
  resolveRenderer,
@@ -212,8 +246,8 @@ function renderComponent({
212
246
  key: key2,
213
247
  parentComponent: component,
214
248
  slotName: CANVAS_TEST_SLOT,
215
- slotChildrenCount: (_a2 = component == null ? void 0 : component.slots) == null ? void 0 : _a2[CANVAS_TEST_SLOT].length,
216
- indexInSlot: (_b2 = component == null ? void 0 : component.slots) == null ? void 0 : _b2[CANVAS_TEST_SLOT].findIndex(
249
+ slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[CANVAS_TEST_SLOT].length,
250
+ indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[CANVAS_TEST_SLOT].findIndex(
217
251
  ({ _id }) => variantComponent._id === _id
218
252
  )
219
253
  });
@@ -224,7 +258,7 @@ function renderComponent({
224
258
  component,
225
259
  key,
226
260
  (variantComponent, key2) => {
227
- var _a2, _b2;
261
+ var _a, _b;
228
262
  return renderComponent({
229
263
  component: variantComponent,
230
264
  resolveRenderer,
@@ -232,8 +266,8 @@ function renderComponent({
232
266
  key: key2,
233
267
  parentComponent: component,
234
268
  slotName: CANVAS_PERSONALIZE_SLOT,
235
- slotChildrenCount: (_a2 = component == null ? void 0 : component.slots) == null ? void 0 : _a2[CANVAS_PERSONALIZE_SLOT].length,
236
- indexInSlot: (_b2 = component == null ? void 0 : component.slots) == null ? void 0 : _b2[CANVAS_PERSONALIZE_SLOT].findIndex(
269
+ slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[CANVAS_PERSONALIZE_SLOT].length,
270
+ indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[CANVAS_PERSONALIZE_SLOT].findIndex(
237
271
  ({ _id }) => variantComponent._id === _id
238
272
  )
239
273
  });
@@ -241,25 +275,18 @@ function renderComponent({
241
275
  );
242
276
  } else if (RenderComponent) {
243
277
  const props = convertComponentToProps(component);
244
- const shouldRenderContextualEditingTags = Boolean(component._id);
245
- const isPlaceholder = component._id === PLACEHOLDER_ID;
246
- return /* @__PURE__ */ React3.createElement(UniformComponent, { key, data: component, resolveRenderer }, !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ React3.createElement(
247
- "script",
278
+ return /* @__PURE__ */ React4.createElement(UniformComponent, { key, data: component, resolveRenderer }, /* @__PURE__ */ React4.createElement(
279
+ ContextualEditingComponentWrapper,
248
280
  {
249
- key,
250
- "data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
251
- "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
252
- "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
253
- "data-component-id": component._id,
254
- "data-slot-name": slotName != null ? slotName : "",
255
- "data-component-index": indexInSlot != null ? indexInSlot : "",
256
- "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
257
- "data-component-name": component.type,
258
- "data-is-placeholder": isPlaceholder ? "true" : void 0,
259
- "data-is-localized": ((_a = component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
260
- "data-component-title": (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
261
- }
262
- ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : /* @__PURE__ */ React3.createElement(RenderComponent, { ...props }), !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ React3.createElement("script", { "data-role": "component-end" }));
281
+ component,
282
+ parentComponent,
283
+ slotName,
284
+ indexInSlot,
285
+ slotChildrenCount,
286
+ emptyPlaceholder
287
+ },
288
+ /* @__PURE__ */ React4.createElement(RenderComponent, { ...props })
289
+ ));
263
290
  } else if (process.env.NODE_ENV !== "production") {
264
291
  console.warn(
265
292
  `[canvas] found component of type '${component.type}'${component.variant ? ` with variant '${component.variant}'` : ""}. Nothing will be rendered. Check your resolveRenderer function or add registerUniformComponent to your component.
@@ -304,9 +331,9 @@ function UniformComponent({
304
331
  hasParentLayout: Boolean(parentData.data),
305
332
  resolveRenderer: contextValue.resolveRenderer
306
333
  });
307
- return /* @__PURE__ */ React4.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
334
+ return /* @__PURE__ */ React5.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
308
335
  /* auto-track behavior signals when in a Canvas context */
309
- /* @__PURE__ */ React4.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
336
+ /* @__PURE__ */ React5.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
310
337
  ) : resolvedChildren);
311
338
  }
312
339
  function resolveChildren({
@@ -319,14 +346,14 @@ function resolveChildren({
319
346
  if (!children && !hasParentLayout) {
320
347
  const topLevelComponent = resolveRenderer({ type: data.type });
321
348
  if (topLevelComponent) {
322
- children = React4.createElement(topLevelComponent, convertComponentToProps(data));
349
+ children = React5.createElement(topLevelComponent, convertComponentToProps(data));
323
350
  } else {
324
351
  if (Object.keys((_a = data.slots) != null ? _a : {}).length > 1 && process.env.NODE_ENV === "development") {
325
352
  console.warn(
326
353
  `[canvas-dev] All the slots in component '${data.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`
327
354
  );
328
355
  }
329
- children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ React4.createElement(UniformSlot, { key: slotName, name: slotName }));
356
+ children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ React5.createElement(UniformSlot, { key: slotName, name: slotName }));
330
357
  }
331
358
  }
332
359
  const renderChildren = typeof children === "function" ? children(convertComponentToProps(data)) : children;
@@ -334,7 +361,7 @@ function resolveChildren({
334
361
  }
335
362
 
336
363
  // src/components/UniformComposition.tsx
337
- import React5, { createContext as createContext2, useContext as useContext2 } from "react";
364
+ import React6, { createContext as createContext2, useContext as useContext2 } from "react";
338
365
 
339
366
  // src/hooks/useUniformContextualEditing.ts
340
367
  import {
@@ -367,7 +394,7 @@ var useUniformContextualEditing = ({
367
394
  if (!channel || registeredCompositionIds.has(initialCompositionValue == null ? void 0 : initialCompositionValue._id)) {
368
395
  return;
369
396
  }
370
- const unsubscribe = channel.on("update-composition", async (message) => {
397
+ const unsubscribeFromCompositionUpdates = channel.on("update-composition", async (message) => {
371
398
  if (!isUpdateCompositionMessage(message)) {
372
399
  return;
373
400
  }
@@ -376,7 +403,7 @@ var useUniformContextualEditing = ({
376
403
  });
377
404
  registeredCompositionIds.add(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
378
405
  return () => {
379
- unsubscribe();
406
+ unsubscribeFromCompositionUpdates();
380
407
  registeredCompositionIds.delete(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
381
408
  };
382
409
  }, [channel, enhance, initialCompositionValue == null ? void 0 : initialCompositionValue._id]);
@@ -435,7 +462,7 @@ function UniformComposition({
435
462
  initialCompositionValue: data,
436
463
  enhance: contextualEditingEnhancer
437
464
  });
438
- return /* @__PURE__ */ React5.createElement(UniformCompositionContext.Provider, { value: { data: composition, behaviorTracking, resolveRenderer } }, /* @__PURE__ */ React5.createElement(
465
+ return /* @__PURE__ */ React6.createElement(UniformCompositionContext.Provider, { value: { data: composition, behaviorTracking, resolveRenderer } }, /* @__PURE__ */ React6.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ React6.createElement(
439
466
  UniformComponent,
440
467
  {
441
468
  data: composition,
@@ -443,7 +470,7 @@ function UniformComposition({
443
470
  resolveRenderer
444
471
  },
445
472
  children
446
- ));
473
+ )));
447
474
  }
448
475
  var useComposition = useUniformCurrentComposition;
449
476
  var Composition = UniformComposition;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniformdev/canvas-react",
3
- "version": "18.28.0",
3
+ "version": "18.29.2-alpha.11+299df8405",
4
4
  "description": "React SDK for Uniform Canvas",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "./dist/index.js",
@@ -24,16 +24,16 @@
24
24
  "document": "api-extractor run --local"
25
25
  },
26
26
  "dependencies": {
27
- "@uniformdev/canvas": "18.28.0",
28
- "@uniformdev/context": "18.28.0",
29
- "@uniformdev/context-react": "18.28.0"
27
+ "@uniformdev/canvas": "18.29.2-alpha.11+299df8405",
28
+ "@uniformdev/context": "18.29.2-alpha.11+299df8405",
29
+ "@uniformdev/context-react": "18.29.2-alpha.11+299df8405"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "react": ">= 16 || 17 || 18",
33
33
  "react-dom": ">=16"
34
34
  },
35
35
  "devDependencies": {
36
- "@types/react": "18.0.28",
36
+ "@types/react": "18.0.31",
37
37
  "react": "18.2.0",
38
38
  "react-dom": "18.2.0"
39
39
  },
@@ -43,5 +43,5 @@
43
43
  "publishConfig": {
44
44
  "access": "public"
45
45
  },
46
- "gitHead": "97d916ca20965e8a86d2454847114068895ccddd"
46
+ "gitHead": "299df840521b9a41a3e683a9095b7b5f45a8cf12"
47
47
  }