@uniformdev/canvas-react 19.40.0 → 19.41.0

package/dist/index.d.mts

@@ -324,6 +324,10 @@ type CustomSlotChildRenderFunc = (options: {
     component: ComponentInstance;
     key: Key;
 }) => JSX.Element;
+type UniformSlotWrapperComponentProps = {
+    items: ReactNode[];
+    slotName: string;
+};
 type UniformSlotProps<TSlotNames extends string> = {
     /** Name of the slot to render */
     name: TSlotNames;
@@ -332,8 +336,17 @@ type UniformSlotProps<TSlotNames extends string> = {
      * If not specified, the resolveRenderer function on the nearest Layout will be used, if any.
      */
     resolveRenderer?: RenderComponentResolver;
-    /** Optional render props enables wrapping all child components in the slot with some markup */
+    /**
+     *  Optional render props enables wrapping all child components in the slot with some markup
+     *
+     *  @deprecated Use `wrapperComponent` instead and define wrapping component for slot children inside.
+     */
     children?: CustomSlotChildRenderFunc;
+    /**
+     * Optional wrapper component around list of slot items that allows to control
+     * exactly how to render slot items, otherwise React.Fragment is being used
+     */
+    wrapperComponent?: React$1.ComponentType<UniformSlotWrapperComponentProps>;
     /**
      * Optional ReactNode to use as a placeholder in Canvas editor when the slot is empty.
      * The node is used to render a placeholder with realistic dimensions and it's never shown to users.
@@ -342,7 +355,7 @@ type UniformSlotProps<TSlotNames extends string> = {
     emptyPlaceholder?: React$1.ReactNode;
 };
 /** Renders a named Slot within a Composition. */
-declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, children, emptyPlaceholder, }: UniformSlotProps<TSlotNames>): JSX.Element | null;
+declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, children, emptyPlaceholder, wrapperComponent, }: UniformSlotProps<TSlotNames>): JSX.Element | null;
 
 /**
  * Returns the attributes needed to annotate a Uniform parameter for inline editing.
@@ -391,4 +404,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.d.ts

@@ -324,6 +324,10 @@ type CustomSlotChildRenderFunc = (options: {
     component: ComponentInstance;
     key: Key;
 }) => JSX.Element;
+type UniformSlotWrapperComponentProps = {
+    items: ReactNode[];
+    slotName: string;
+};
 type UniformSlotProps<TSlotNames extends string> = {
     /** Name of the slot to render */
     name: TSlotNames;
@@ -332,8 +336,17 @@ type UniformSlotProps<TSlotNames extends string> = {
      * If not specified, the resolveRenderer function on the nearest Layout will be used, if any.
      */
     resolveRenderer?: RenderComponentResolver;
-    /** Optional render props enables wrapping all child components in the slot with some markup */
+    /**
+     *  Optional render props enables wrapping all child components in the slot with some markup
+     *
+     *  @deprecated Use `wrapperComponent` instead and define wrapping component for slot children inside.
+     */
     children?: CustomSlotChildRenderFunc;
+    /**
+     * Optional wrapper component around list of slot items that allows to control
+     * exactly how to render slot items, otherwise React.Fragment is being used
+     */
+    wrapperComponent?: React$1.ComponentType<UniformSlotWrapperComponentProps>;
     /**
      * Optional ReactNode to use as a placeholder in Canvas editor when the slot is empty.
      * The node is used to render a placeholder with realistic dimensions and it's never shown to users.
@@ -342,7 +355,7 @@ type UniformSlotProps<TSlotNames extends string> = {
     emptyPlaceholder?: React$1.ReactNode;
 };
 /** Renders a named Slot within a Composition. */
-declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, children, emptyPlaceholder, }: UniformSlotProps<TSlotNames>): JSX.Element | null;
+declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, children, emptyPlaceholder, wrapperComponent, }: UniformSlotProps<TSlotNames>): JSX.Element | null;
 
 /**
  * Returns the attributes needed to annotate a Uniform parameter for inline editing.
@@ -391,4 +404,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -356,7 +356,8 @@ function UniformSlot({
   name,
   resolveRenderer,
   children,
-  emptyPlaceholder
+  emptyPlaceholder,
+  wrapperComponent
 }) {
   var _a;
   const { data: parentData, resolveRenderer: parentResolveRenderer } = useUniformCurrentComponent();
@@ -374,12 +375,10 @@ function UniformSlot({
     return null;
   }
   const resolver = resolveRenderer != null ? resolveRenderer : parentResolveRenderer;
-  const systemResolver = defaultSystemComponentResolver;
   const finalChildren = slot.map((component, index) => {
     const child = renderComponent({
       component,
       resolveRenderer: resolver,
-      resolveSystem: systemResolver,
       key: `inner-${index}`,
       indexInSlot: index,
       slotName: name,
@@ -390,12 +389,15 @@ function UniformSlot({
     const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
     return React5.createElement(React5.Fragment, { key: index }, elements);
   });
-  return React5.createElement(React5.Fragment, void 0, finalChildren);
+  if (!wrapperComponent) {
+    return React5.createElement(React5.Fragment, void 0, finalChildren);
+  }
+  const Wrapper = wrapperComponent;
+  return /* @__PURE__ */ React5.createElement(Wrapper, { items: finalChildren, slotName: name });
 }
 function renderComponent({
   component,
   resolveRenderer,
-  resolveSystem,
   key = 0,
   indexInSlot,
   slotName,
@@ -405,7 +407,7 @@ function renderComponent({
 }) {
   const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (component.type === CANVAS_TEST_TYPE) {
-    const testComponent = resolveSystem.test(
+    const testComponent = defaultSystemComponentResolver.test(
       component,
       key,
       (variantComponent, key2) => {
@@ -413,7 +415,6 @@ function renderComponent({
         return renderComponent({
           component: variantComponent,
           resolveRenderer,
-          resolveSystem,
           key: key2,
           parentComponent: component,
           slotName: CANVAS_TEST_SLOT,
@@ -437,7 +438,7 @@ function renderComponent({
       testComponent
     );
   } else if (component.type === CANVAS_PERSONALIZE_TYPE) {
-    const personalizationComponent = resolveSystem.personalization(
+    const personalizationComponent = defaultSystemComponentResolver.personalization(
       component,
       key,
       (variantComponent, key2) => {
@@ -445,7 +446,6 @@ function renderComponent({
         return renderComponent({
           component: variantComponent,
           resolveRenderer,
-          resolveSystem,
           key: key2,
           parentComponent: component,
           slotName: CANVAS_PERSONALIZE_SLOT,

package/dist/index.js

@@ -388,7 +388,8 @@ function UniformSlot({
   name,
   resolveRenderer,
   children,
-  emptyPlaceholder
+  emptyPlaceholder,
+  wrapperComponent
 }) {
   var _a;
   const { data: parentData, resolveRenderer: parentResolveRenderer } = useUniformCurrentComponent();
@@ -406,12 +407,10 @@ function UniformSlot({
     return null;
   }
   const resolver = resolveRenderer != null ? resolveRenderer : parentResolveRenderer;
-  const systemResolver = defaultSystemComponentResolver;
   const finalChildren = slot.map((component, index) => {
     const child = renderComponent({
       component,
       resolveRenderer: resolver,
-      resolveSystem: systemResolver,
       key: `inner-${index}`,
       indexInSlot: index,
       slotName: name,
@@ -422,12 +421,15 @@ function UniformSlot({
     const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
     return import_react5.default.createElement(import_react5.default.Fragment, { key: index }, elements);
   });
-  return import_react5.default.createElement(import_react5.default.Fragment, void 0, finalChildren);
+  if (!wrapperComponent) {
+    return import_react5.default.createElement(import_react5.default.Fragment, void 0, finalChildren);
+  }
+  const Wrapper = wrapperComponent;
+  return /* @__PURE__ */ import_react5.default.createElement(Wrapper, { items: finalChildren, slotName: name });
 }
 function renderComponent({
   component,
   resolveRenderer,
-  resolveSystem,
   key = 0,
   indexInSlot,
   slotName,
@@ -437,7 +439,7 @@ function renderComponent({
 }) {
   const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (component.type === import_canvas5.CANVAS_TEST_TYPE) {
-    const testComponent = resolveSystem.test(
+    const testComponent = defaultSystemComponentResolver.test(
       component,
       key,
       (variantComponent, key2) => {
@@ -445,7 +447,6 @@ function renderComponent({
         return renderComponent({
           component: variantComponent,
           resolveRenderer,
-          resolveSystem,
           key: key2,
           parentComponent: component,
           slotName: import_canvas5.CANVAS_TEST_SLOT,
@@ -469,7 +470,7 @@ function renderComponent({
       testComponent
     );
   } else if (component.type === import_canvas5.CANVAS_PERSONALIZE_TYPE) {
-    const personalizationComponent = resolveSystem.personalization(
+    const personalizationComponent = defaultSystemComponentResolver.personalization(
       component,
       key,
       (variantComponent, key2) => {
@@ -477,7 +478,6 @@ function renderComponent({
         return renderComponent({
           component: variantComponent,
           resolveRenderer,
-          resolveSystem,
           key: key2,
           parentComponent: component,
           slotName: import_canvas5.CANVAS_PERSONALIZE_SLOT,

package/dist/index.mjs

@@ -356,7 +356,8 @@ function UniformSlot({
   name,
   resolveRenderer,
   children,
-  emptyPlaceholder
+  emptyPlaceholder,
+  wrapperComponent
 }) {
   var _a;
   const { data: parentData, resolveRenderer: parentResolveRenderer } = useUniformCurrentComponent();
@@ -374,12 +375,10 @@ function UniformSlot({
     return null;
   }
   const resolver = resolveRenderer != null ? resolveRenderer : parentResolveRenderer;
-  const systemResolver = defaultSystemComponentResolver;
   const finalChildren = slot.map((component, index) => {
     const child = renderComponent({
       component,
       resolveRenderer: resolver,
-      resolveSystem: systemResolver,
       key: `inner-${index}`,
       indexInSlot: index,
       slotName: name,
@@ -390,12 +389,15 @@ function UniformSlot({
     const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
     return React5.createElement(React5.Fragment, { key: index }, elements);
   });
-  return React5.createElement(React5.Fragment, void 0, finalChildren);
+  if (!wrapperComponent) {
+    return React5.createElement(React5.Fragment, void 0, finalChildren);
+  }
+  const Wrapper = wrapperComponent;
+  return /* @__PURE__ */ React5.createElement(Wrapper, { items: finalChildren, slotName: name });
 }
 function renderComponent({
   component,
   resolveRenderer,
-  resolveSystem,
   key = 0,
   indexInSlot,
   slotName,
@@ -405,7 +407,7 @@ function renderComponent({
 }) {
   const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (component.type === CANVAS_TEST_TYPE) {
-    const testComponent = resolveSystem.test(
+    const testComponent = defaultSystemComponentResolver.test(
       component,
       key,
       (variantComponent, key2) => {
@@ -413,7 +415,6 @@ function renderComponent({
         return renderComponent({
           component: variantComponent,
           resolveRenderer,
-          resolveSystem,
           key: key2,
           parentComponent: component,
           slotName: CANVAS_TEST_SLOT,
@@ -437,7 +438,7 @@ function renderComponent({
       testComponent
     );
   } else if (component.type === CANVAS_PERSONALIZE_TYPE) {
-    const personalizationComponent = resolveSystem.personalization(
+    const personalizationComponent = defaultSystemComponentResolver.personalization(
       component,
       key,
       (variantComponent, key2) => {
@@ -445,7 +446,6 @@ function renderComponent({
         return renderComponent({
           component: variantComponent,
           resolveRenderer,
-          resolveSystem,
           key: key2,
           parentComponent: component,
           slotName: CANVAS_PERSONALIZE_SLOT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "19.40.0",
+  "version": "19.41.0",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,10 +24,10 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.40.0",
-    "@uniformdev/context": "19.40.0",
-    "@uniformdev/context-react": "19.40.0",
-    "@uniformdev/richtext": "19.40.0"
+    "@uniformdev/canvas": "19.41.0",
+    "@uniformdev/context": "19.41.0",
+    "@uniformdev/context-react": "19.41.0",
+    "@uniformdev/richtext": "19.41.0"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f21fe5bd9d42379336cc7cb30e5b2f1955e8c337"
+  "gitHead": "cd4f9fd5bbdcba2b7f7235dbf342418a6bbaacb9"
 }