@uniformdev/canvas-react 19.135.0 → 19.135.1-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 (6) hide show
  1. package/dist/index.d.mts +245 -90
  2. package/dist/index.d.ts +245 -90
  3. package/dist/index.esm.js +125 -60
  4. package/dist/index.js +210 -146
  5. package/dist/index.mjs +125 -60
  6. package/package.json +11 -9
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React$1, { Key, ReactNode, PropsWithChildren } from 'react';
2
- import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, SubscribeToCompositionOptions } from '@uniformdev/canvas';
2
+ import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, SubscribeToCompositionOptions, UpdateContextualEditingStateInternalMessage } from '@uniformdev/canvas';
3
3
  export { GetParameterAttributesProps, createUniformApiEnhancer } from '@uniformdev/canvas';
4
4
  import { P as PureUniformTextProps } from './PureUniformText-B3GAm6Dc.mjs';
5
5
  import { RichTextNode } from '@uniformdev/richtext';
@@ -10,7 +10,7 @@ import { RichTextNode } from '@uniformdev/richtext';
10
10
  * all enhancers have been applied.
11
11
  */
12
12
  type ComponentProps<TProps = unknown> = TProps & {
13
- component: ComponentInstance;
13
+ component: ComponentInstance | RootComponentInstance;
14
14
  };
15
15
  /**
16
16
  * Function that maps a Canvas component instance to its React component to render it.
@@ -110,33 +110,64 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
110
110
  connectedData?: {
111
111
  pointer: string;
112
112
  syntax: "jptr";
113
- } | undefined;
113
+ failureAction?: "t" | "p" | "c" | "a";
114
+ failureLogLevel?: "e" | "w" | "i";
115
+ failureDefault?: string;
116
+ };
114
117
  locales?: {
115
118
  [key: string]: unknown;
116
- } | undefined;
119
+ };
120
+ conditions?: {
121
+ when: {
122
+ op?: "&" | "|";
123
+ clauses: ({
124
+ rule: string;
125
+ source?: string;
126
+ op: string;
127
+ value: string | string[];
128
+ } | any)[];
129
+ };
130
+ value: unknown;
131
+ id: number;
132
+ }[];
133
+ localesConditions?: {
134
+ [key: string]: {
135
+ when: {
136
+ op?: "&" | "|";
137
+ clauses: ({
138
+ rule: string;
139
+ source?: string;
140
+ op: string;
141
+ value: string | string[];
142
+ } | any)[];
143
+ };
144
+ value: unknown;
145
+ id: number;
146
+ }[];
147
+ };
117
148
  };
118
- } | undefined;
119
- variant?: string | undefined;
149
+ };
150
+ variant?: string;
120
151
  projectMapNodes?: {
121
152
  id: string;
122
153
  path: string;
123
154
  projectMapId: string;
124
155
  data?: {
125
- isSearchHit?: boolean | undefined;
156
+ isSearchHit?: boolean;
126
157
  queryStrings?: {
127
158
  name: string;
128
- value: string;
129
- helpText?: string | undefined;
130
- }[] | undefined;
131
- previewValue?: string | undefined;
132
- } | undefined;
159
+ value?: string;
160
+ helpText?: string;
161
+ }[];
162
+ previewValue?: string;
163
+ };
133
164
  locales?: {
134
165
  [key: string]: {
135
166
  path: string;
136
167
  inherited: boolean;
137
168
  };
138
- } | undefined;
139
- }[] | undefined;
169
+ };
170
+ }[];
140
171
  slots?: {
141
172
  [key: string]: {
142
173
  type: string;
@@ -147,39 +178,72 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
147
178
  connectedData?: {
148
179
  pointer: string;
149
180
  syntax: "jptr";
150
- } | undefined;
181
+ failureAction?: "t" | "p" | "c" | "a";
182
+ failureLogLevel?: "e" | "w" | "i";
183
+ failureDefault?: string;
184
+ };
151
185
  locales?: {
152
186
  [key: string]: unknown;
153
- } | undefined;
187
+ };
188
+ conditions?: {
189
+ when: {
190
+ op?: "&" | "|";
191
+ clauses: ({
192
+ rule: string;
193
+ source?: string;
194
+ op: string;
195
+ value: string | string[];
196
+ } | any)[];
197
+ };
198
+ value: unknown;
199
+ id: number;
200
+ }[];
201
+ localesConditions?: {
202
+ [key: string]: {
203
+ when: {
204
+ op?: "&" | "|";
205
+ clauses: ({
206
+ rule: string;
207
+ source?: string;
208
+ op: string;
209
+ value: string | string[];
210
+ } | any)[];
211
+ };
212
+ value: unknown;
213
+ id: number;
214
+ }[];
215
+ };
154
216
  };
155
- } | undefined;
156
- variant?: string | undefined;
217
+ };
218
+ variant?: string;
157
219
  slots?: {
158
220
  [key: string]: any[];
159
- } | undefined;
160
- _id?: string | undefined;
161
- _pattern?: string | undefined;
221
+ };
222
+ _id?: string;
223
+ _pattern?: string;
162
224
  _dataResources?: {
163
225
  [key: string]: {
164
226
  type: string;
165
- isPatternParameter?: boolean | undefined;
166
- ignorePatternParameterDefault?: boolean | undefined;
227
+ isPatternParameter?: boolean;
228
+ ignorePatternParameterDefault?: boolean;
229
+ optionalPatternParameter?: boolean;
167
230
  variables?: {
168
231
  [key: string]: string;
169
- } | undefined;
232
+ };
170
233
  };
171
- } | undefined;
234
+ };
172
235
  _patternDataResources?: {
173
236
  [key: string]: {
174
237
  type: string;
175
- isPatternParameter?: boolean | undefined;
176
- ignorePatternParameterDefault?: boolean | undefined;
238
+ isPatternParameter?: boolean;
239
+ ignorePatternParameterDefault?: boolean;
240
+ optionalPatternParameter?: boolean;
177
241
  variables?: {
178
242
  [key: string]: string;
179
- } | undefined;
243
+ };
180
244
  };
181
- } | undefined;
182
- _patternError?: "NOTFOUND" | "CYCLIC" | undefined;
245
+ };
246
+ _patternError?: "NOTFOUND" | "CYCLIC";
183
247
  _overrides?: {
184
248
  [key: string]: {
185
249
  parameters?: {
@@ -189,53 +253,90 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
189
253
  connectedData?: {
190
254
  pointer: string;
191
255
  syntax: "jptr";
192
- } | undefined;
256
+ failureAction?: "t" | "p" | "c" | "a";
257
+ failureLogLevel?: "e" | "w" | "i";
258
+ failureDefault?: string;
259
+ };
193
260
  locales?: {
194
261
  [key: string]: unknown;
195
- } | undefined;
262
+ };
263
+ conditions?: {
264
+ when: {
265
+ op?: "&" | "|";
266
+ clauses: ({
267
+ rule: string;
268
+ source?: string;
269
+ op: string;
270
+ value: string | string[];
271
+ } | any)[];
272
+ };
273
+ value: unknown;
274
+ id: number;
275
+ }[];
276
+ localesConditions?: {
277
+ [key: string]: {
278
+ when: {
279
+ op?: "&" | "|";
280
+ clauses: ({
281
+ rule: string;
282
+ source?: string;
283
+ op: string;
284
+ value: string | string[];
285
+ } | any)[];
286
+ };
287
+ value: unknown;
288
+ id: number;
289
+ }[];
290
+ };
196
291
  };
197
- } | undefined;
292
+ };
198
293
  slots?: {
199
294
  [key: string]: any[];
200
- } | undefined;
201
- variant?: string | undefined;
295
+ };
296
+ variant?: string;
202
297
  };
203
- } | undefined;
298
+ };
204
299
  _overridability?: {
205
300
  parameters?: {
206
301
  [key: string]: "yes" | "no";
207
- } | undefined;
208
- variants?: boolean | undefined;
209
- hideLockedParameters?: boolean | undefined;
210
- } | undefined;
211
- _locales?: string[] | undefined;
302
+ };
303
+ variants?: boolean;
304
+ hideLockedParameters?: boolean;
305
+ };
306
+ _locales?: string[];
212
307
  }[];
213
- } | undefined;
308
+ };
214
309
  _id: string;
215
- _slug?: string | null | undefined;
310
+ _slug?: string | null;
216
311
  _name: string;
217
- _pattern?: string | undefined;
312
+ _author?: string;
313
+ _authorSubject?: string;
314
+ _creator?: string;
315
+ _creatorSubject?: string;
316
+ _pattern?: string;
218
317
  _patternDataResources?: {
219
318
  [key: string]: {
220
319
  type: string;
221
- isPatternParameter?: boolean | undefined;
222
- ignorePatternParameterDefault?: boolean | undefined;
320
+ isPatternParameter?: boolean;
321
+ ignorePatternParameterDefault?: boolean;
322
+ optionalPatternParameter?: boolean;
223
323
  variables?: {
224
324
  [key: string]: string;
225
- } | undefined;
325
+ };
226
326
  };
227
- } | undefined;
327
+ };
228
328
  _dataResources?: {
229
329
  [key: string]: {
230
330
  type: string;
231
- isPatternParameter?: boolean | undefined;
232
- ignorePatternParameterDefault?: boolean | undefined;
331
+ isPatternParameter?: boolean;
332
+ ignorePatternParameterDefault?: boolean;
333
+ optionalPatternParameter?: boolean;
233
334
  variables?: {
234
335
  [key: string]: string;
235
- } | undefined;
336
+ };
236
337
  };
237
- } | undefined;
238
- _patternError?: "NOTFOUND" | "CYCLIC" | undefined;
338
+ };
339
+ _patternError?: "NOTFOUND" | "CYCLIC";
239
340
  _overrides?: {
240
341
  [key: string]: {
241
342
  parameters?: {
@@ -245,26 +346,57 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
245
346
  connectedData?: {
246
347
  pointer: string;
247
348
  syntax: "jptr";
248
- } | undefined;
349
+ failureAction?: "t" | "p" | "c" | "a";
350
+ failureLogLevel?: "e" | "w" | "i";
351
+ failureDefault?: string;
352
+ };
249
353
  locales?: {
250
354
  [key: string]: unknown;
251
- } | undefined;
355
+ };
356
+ conditions?: {
357
+ when: {
358
+ op?: "&" | "|";
359
+ clauses: ({
360
+ rule: string;
361
+ source?: string;
362
+ op: string;
363
+ value: string | string[];
364
+ } | any)[];
365
+ };
366
+ value: unknown;
367
+ id: number;
368
+ }[];
369
+ localesConditions?: {
370
+ [key: string]: {
371
+ when: {
372
+ op?: "&" | "|";
373
+ clauses: ({
374
+ rule: string;
375
+ source?: string;
376
+ op: string;
377
+ value: string | string[];
378
+ } | any)[];
379
+ };
380
+ value: unknown;
381
+ id: number;
382
+ }[];
383
+ };
252
384
  };
253
- } | undefined;
385
+ };
254
386
  slots?: {
255
387
  [key: string]: any[];
256
- } | undefined;
257
- variant?: string | undefined;
388
+ };
389
+ variant?: string;
258
390
  };
259
- } | undefined;
391
+ };
260
392
  _overridability?: {
261
393
  parameters?: {
262
394
  [key: string]: "yes" | "no";
263
- } | undefined;
264
- variants?: boolean | undefined;
265
- hideLockedParameters?: boolean | undefined;
266
- } | undefined;
267
- _locales?: string[] | undefined;
395
+ };
396
+ variants?: boolean;
397
+ hideLockedParameters?: boolean;
398
+ };
399
+ _locales?: string[];
268
400
  } | undefined;
269
401
  isContextualEditing: boolean;
270
402
  };
@@ -293,24 +425,26 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
293
425
  declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
294
426
 
295
427
  type UniformPlaygroundDecorator = (props: {
296
- /** The rendered component instance, needs to wrapped and rendered by the decorator */
428
+ /** The rendered component instance, needs to be wrapped and rendered by the decorator */
297
429
  children: React$1.ReactNode;
298
430
  /** The component instance data */
299
431
  data: ComponentInstance | RootComponentInstance;
300
432
  }) => React$1.ReactElement;
301
433
  type UniformPlaygroundProps = {
302
434
  /**
303
- * Allows wrapping the playground in custom components.
304
- * Useful to customize the playground to allow previewing the components in realistic scenarios
305
- * (e.g. different background color, different parent size)
435
+ * Allows wrapping the playground in custom layouts.
436
+ * Useful to customize the playground to allow previewing the patterns in realistic scenarios
437
+ * (e.g. wrap the pattern in a specific layout, show a background color selector, parent size selector, etc.)
306
438
  * @deprecated This feature is not stable yet and might be changed or removed in a minor release. Do not use it in production environments.
307
439
  */
308
440
  decorators?: UniformPlaygroundDecorator[];
309
- } & Omit<UniformCompositionProps, 'data'>;
441
+ /** @deprecated This prop is not supported anymore. */
442
+ children?: ReactNode;
443
+ } & Omit<UniformCompositionProps, 'data' | 'children'>;
310
444
  /**
311
- * Playground where you can freely live preview your components and pattern.
445
+ * Playground where you can freely live preview your components and patterns.
312
446
  */
313
- declare const UniformPlayground: ({ resolveRenderer, decorators, contextualEditingEnhancer, behaviorTracking, contextualEditingDefaultPlaceholder, children, }: UniformPlaygroundProps) => React$1.JSX.Element;
447
+ declare const UniformPlayground: ({ resolveRenderer, decorators, contextualEditingEnhancer, behaviorTracking, contextualEditingDefaultPlaceholder, }: UniformPlaygroundProps) => React$1.JSX.Element;
314
448
 
315
449
  type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
316
450
  node: TNode;
@@ -335,6 +469,14 @@ type UniformRichTextProps = {
335
469
  * for rendering a rich text node
336
470
  */
337
471
  resolveRichTextRenderer?: RenderRichTextComponentResolver;
472
+ /**
473
+ * Sets the value to show in Canvas editor when the parameter value is empty.
474
+ * Can be a static string, or a function to generate the placeholder out of parameter info.
475
+ * @default undefined
476
+ */
477
+ placeholder?: string | ((parameter: {
478
+ id: string;
479
+ }) => string | undefined);
338
480
  } & Omit<React$1.HTMLAttributes<HTMLDivElement>, 'children'>;
339
481
  /**
340
482
  * Adds rendering support for Uniform Rich Text parameters
@@ -344,14 +486,22 @@ declare const UniformRichText: React$1.ForwardRefExoticComponent<{
344
486
  * The name of the HTML tag to render.
345
487
  * @default "div"
346
488
  */
347
- as?: React$1.ElementType<any> | undefined;
489
+ as?: React$1.ElementType;
348
490
  /** The ID of the parameter. */
349
491
  parameterId: string;
350
492
  /**
351
493
  * A function which can provide a custom react component
352
494
  * for rendering a rich text node
353
495
  */
354
- resolveRichTextRenderer?: RenderRichTextComponentResolver | undefined;
496
+ resolveRichTextRenderer?: RenderRichTextComponentResolver;
497
+ /**
498
+ * Sets the value to show in Canvas editor when the parameter value is empty.
499
+ * Can be a static string, or a function to generate the placeholder out of parameter info.
500
+ * @default undefined
501
+ */
502
+ placeholder?: string | ((parameter: {
503
+ id: string;
504
+ }) => string | undefined);
355
505
  } & Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & React$1.RefAttributes<unknown>>;
356
506
 
357
507
  type UniformRichTextNodeProps = {
@@ -430,31 +580,36 @@ type UseUniformContextualEditingStateProps = {
430
580
  **/
431
581
  global?: boolean;
432
582
  };
583
+ type UseUniformContextualEditingStateReturnType = {
584
+ /**
585
+ * Returns `true` when the app is rendered inside Canvas editor. Regardless of which preview mode is currently selected ("editor" or "preview").
586
+ */
587
+ isContextualEditing: boolean;
588
+ /**
589
+ * A reference to the currently selected component in Canvas editor.
590
+ * Returns `undefined` if the selected component is not part of the current React component.
591
+ * Set the `global` option to `true` to get a reference of the selected component anywhere in the composition tree.
592
+ */
593
+ selectedComponentReference: UpdateContextualEditingStateInternalMessage['state']['selectedComponentReference'];
594
+ /**
595
+ * Returns the current preview mode in Canvas editor ("editor" or "preview").
596
+ * Returns `undefined` when the app is not rendered inside Canvas editor.
597
+ * Learn more about the preview modes: https://docs.uniform.app/docs/guides/composition/visual-editing#editing-and-preview-mode
598
+ * @deprecated this is an experimental property, it might receive breaking changes in minor releases ⚠️
599
+ */
600
+ previewMode: UpdateContextualEditingStateInternalMessage['state']['previewMode'] | undefined;
601
+ };
433
602
  /**
434
603
  * Returns the state of contextual editing, when the app is open inside Canvas Editor.
435
604
  * This hook can be used to improve the editing experience of your team.
436
605
  * For example: You can use `selectedComponentReference` to control which element to show inside a carousel or an accordion.
437
606
  */
438
- declare const useUniformContextualEditingState: ({ global, }?: UseUniformContextualEditingStateProps) => {
439
- isContextualEditing: boolean;
440
- selectedComponentReference: {
441
- id: string;
442
- slotName?: string | undefined;
443
- componentIndex?: number | undefined;
444
- totalComponents?: number | undefined;
445
- componentName?: string | undefined;
446
- componentTitle?: string | undefined;
447
- parentId?: string | undefined;
448
- parentType?: string | undefined;
449
- isLocalized?: boolean | undefined;
450
- isReadOnly?: boolean | undefined;
451
- } | undefined;
452
- };
607
+ declare const useUniformContextualEditingState: ({ global, }?: UseUniformContextualEditingStateProps) => UseUniformContextualEditingStateReturnType;
453
608
 
454
609
  declare const componentStore: ComponentStore;
455
610
  declare const registerUniformComponent: ({ type, variantId, component, }: {
456
611
  type: string;
457
- variantId?: string | undefined;
612
+ variantId?: string;
458
613
  component: React.ComponentType<ComponentProps<any>>;
459
614
  }) => void;
460
615
  declare const componentStoreResolver: RenderComponentResolver;
@@ -467,4 +622,4 @@ declare const createComponentStoreResolver: (options: {
467
622
  defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
468
623
  }) => RenderComponentResolver;
469
624
 
470
- export { type ComponentProps, type ComponentStore, type CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, type RenderComponentResolver, type RenderRichTextComponentResolver, type RichTextComponentProps, type RichTextRendererComponent, type SystemRenderConfig, type SystemRenderFunction, UniformComponent, type UniformComponentContextValue, type UniformComponentProps, UniformComposition, UniformCompositionContext, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundDecorator, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, type UniformSlotWrapperComponentProps, UniformText, type UniformTextProps, type UseCompositionEventEffectOptions, type UseUniformContextualEditingProps, type UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, convertComponentToProps, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };
625
+ export { type ComponentProps, type ComponentStore, type CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, type RenderComponentResolver, type RenderRichTextComponentResolver, type RichTextComponentProps, type RichTextRendererComponent, type SystemRenderConfig, type SystemRenderFunction, UniformComponent, type UniformComponentContextValue, type UniformComponentProps, UniformComposition, UniformCompositionContext, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundDecorator, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, type UniformSlotWrapperComponentProps, UniformText, type UniformTextProps, type UseCompositionEventEffectOptions, type UseUniformContextualEditingProps, type UseUniformContextualEditingStateProps, type UseUniformContextualEditingStateReturnType, componentStore, componentStoreResolver, convertComponentToProps, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };