@builder.io/sdk-react 0.11.0 → 0.11.1

package/lib/edge/index.mjs

@@ -2945,7 +2945,7 @@ function Pi(e) {
     e.Wrapper,
     {
       ...e.wrapperProps,
-      attributes: {
+      attributes: e.includeBlockProps ? {
         ...mt({
           block: e.block,
           context: e.context
@@ -2957,7 +2957,7 @@ function Pi(e) {
           localState: e.context.localState,
           context: e.context.context
         })
-      },
+      } : {},
       children: e.children
     }
   );
@@ -2970,23 +2970,27 @@ const Ni = ({
   includeBlockProps: i,
   isInteractive: a,
   contextValue: s
-}) => a ? {
-  Wrapper: n,
-  block: t,
-  context: r,
-  wrapperProps: e
-} : {
-  ...e,
-  /**
-   * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
-   * component itself directly. Otherwise, they are provided to the wrapper element.
-   */
-  ...i ? {
-    attributes: mt({
-      block: t,
-      context: s
-    })
-  } : {}
+}) => {
+  const u = {
+    ...e,
+    /**
+     * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
+     * component itself directly. Otherwise, they are provided to the wrapper element.
+     */
+    ...i ? {
+      attributes: mt({
+        block: t,
+        context: s
+      })
+    } : {}
+  };
+  return a ? {
+    Wrapper: n,
+    block: t,
+    context: r,
+    wrapperProps: e,
+    includeBlockProps: i
+  } : u;
 };
 function nr(e) {
   var n, i;
@@ -4501,7 +4505,7 @@ const po = (e, t, r = !0) => {
       builderElementIndex: r && n ? [].slice.call(document.getElementsByClassName(n)).indexOf(r) : void 0
     }
   };
-}, vo = "0.11.0", yo = () => {
+}, vo = "0.11.1", yo = () => {
   Hr("insertMenu", {
     name: "_default",
     default: !0,

package/lib/node/index.cjs

@@ -47,7 +47,7 @@ output;
     ${convertStyleMapToCSS(n)}
   }`;return e?`${e} {
       ${i}
-    }`:i};function InlinedStyles(e){return jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:e.styles},id:e.id})}function BlockStyles(e){function t(){const i=getProcessedBlock({block:e.block,localState:e.context.localState,rootState:e.context.rootState,rootSetState:e.context.rootSetState,context:e.context.context,shouldEvaluateBindings:!0});return serverEntry.checkIsDefined(i.hide)?!i.hide:serverEntry.checkIsDefined(i.show)?i.show:!0}function n(){var f;const i=getProcessedBlock({block:e.block,localState:e.context.localState,rootState:e.context.rootState,rootSetState:e.context.rootSetState,context:e.context.context,shouldEvaluateBindings:!0}),r=i.responsiveStyles,o=e.context.content,a=getSizesForBreakpoints(((f=o==null?void 0:o.meta)==null?void 0:f.breakpoints)||{}),s=r==null?void 0:r.large,c=r==null?void 0:r.medium,l=r==null?void 0:r.small,u=i.id;if(!u)return"";const g=s?createCssClass({className:u,styles:s}):"",b=c?createCssClass({className:u,styles:c,mediaQuery:getMaxWidthQueryForSize("medium",a)}):"",y=l?createCssClass({className:u,styles:l,mediaQuery:getMaxWidthQueryForSize("small",a)}):"";return[g,b,y].join(" ")}return jsxRuntime.jsx(jsxRuntime.Fragment,{children:n()&&t()?jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(InlinedStyles,{styles:n()})}):null})}function capitalizeFirstLetter(e){return e.charAt(0).toUpperCase()+e.slice(1)}const getEventHandlerName=e=>`on${capitalizeFirstLetter(e)}`,createEventHandler=(e,t)=>n=>evaluate({code:e,context:t.context,localState:t.localState,rootState:t.rootState,rootSetState:t.rootSetState,event:n,isExpression:!1});function getBlockActions(e){var i;const t={},n=(i=e.block.actions)!=null?i:{};for(const r in n){if(!n.hasOwnProperty(r))continue;const o=n[r];let a=getEventHandlerName(r);if(e.stripPrefix)switch(serverEntry.TARGET){case"vue":a=a.replace("v-on:","");break;case"svelte":a=a.replace("on:","");break}t[a]=createEventHandler(o,e)}return t}function transformBlockProperties({properties:e}){return e.className=e.class,delete e.class,e}const extractRelevantRootBlockProperties=e=>({href:e.href});function getBlockProperties({block:e,context:t}){var i;const n={...extractRelevantRootBlockProperties(e),...e.properties,"builder-id":e.id,style:e.style?getStyleAttribute(e.style):void 0,class:[e.id,"builder-block",e.class,(i=e.properties)==null?void 0:i.class].filter(Boolean).join(" ")};return transformBlockProperties({properties:n,context:t,block:e})}function getStyleAttribute(e){switch(serverEntry.TARGET){case"svelte":case"vue":case"solid":return convertStyleMapToCSSArray(e).join(" ");case"qwik":case"reactNative":case"react":case"rsc":return e}}function BlockWrapper(e){return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[" ",e.hasChildren?jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(e.Wrapper,{...getBlockProperties({block:e.block,context:e.context}),...getBlockActions({block:e.block,rootState:e.context.rootState,rootSetState:e.context.rootSetState,localState:e.context.localState,context:e.context.context,stripPrefix:!0}),children:[" ",e.children," "]})}):jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(e.Wrapper,{...getBlockProperties({block:e.block,context:e.context}),...getBlockActions({block:e.block,rootState:e.context.rootState,rootSetState:e.context.rootSetState,localState:e.context.localState,context:e.context.context,stripPrefix:!0})})})," "]})}function InteractiveElement(e){return jsxRuntime.jsx(e.Wrapper,{...e.wrapperProps,attributes:{...getBlockProperties({block:e.block,context:e.context}),...getBlockActions({block:e.block,rootState:e.context.rootState,rootSetState:e.context.rootSetState,localState:e.context.localState,context:e.context.context})},children:e.children})}const getWrapperProps=({componentOptions:e,builderBlock:t,context:n,componentRef:i,includeBlockProps:r,isInteractive:o,contextValue:a})=>o?{Wrapper:i,block:t,context:n,wrapperProps:e}:{...e,...r?{attributes:getBlockProperties({block:t,context:a})}:{}};function ComponentRef(e){var i,r;const[t,n]=react.useState(()=>e.isInteractive?InteractiveElement:e.componentRef);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:e.componentRef?jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(t,{...getWrapperProps({componentOptions:e.componentOptions,builderBlock:e.builderBlock,context:e.context,componentRef:e.componentRef,includeBlockProps:e.includeBlockProps,isInteractive:e.isInteractive,contextValue:e.context}),children:[(i=e.blockChildren)==null?void 0:i.map(o=>jsxRuntime.jsx(Block,{block:o,context:e.context,registeredComponents:e.registeredComponents},"block-"+o.id)),(r=e.blockChildren)==null?void 0:r.map(o=>jsxRuntime.jsx(BlockStyles,{block:o,context:e.context},"block-style-"+o.id))]})}):null})}function RepeatedBlock(e){const[t,n]=react.useState(()=>e.repeatContext);return jsxRuntime.jsx(builderContext.Provider,{value:t,children:jsxRuntime.jsx(Block,{block:e.block,context:t,registeredComponents:e.registeredComponents})})}function Block(e){var u,g,b,y;function t(){return getComponent({block:e.block,context:e.context,registeredComponents:e.registeredComponents})}function n(){return getRepeatItemData({block:e.block,context:e.context})}function i(){var f;return(f=e.block.repeat)!=null&&f.collection?e.block:getProcessedBlock({block:e.block,localState:e.context.localState,rootState:e.context.rootState,rootSetState:e.context.rootSetState,context:e.context.context,shouldEvaluateBindings:!0})}function r(){return e.block.tagName||"div"}function o(){var k,j;if((k=e.block.repeat)!=null&&k.collection)return!!((j=n==null?void 0:n())!=null&&j.length);const f="hide"in i()?i().hide:!1;return("show"in i()?i().show:!0)&&!f}function a(){var S,k;return!((S=t==null?void 0:t())!=null&&S.component)&&!n()?(k=i().children)!=null?k:[]:[]}function s(){var f,S,k,j,C,p;return{blockChildren:(f=i().children)!=null?f:[],componentRef:(S=t==null?void 0:t())==null?void 0:S.component,componentOptions:{...getBlockComponentOptions(i()),builderContext:e.context,...((k=t==null?void 0:t())==null?void 0:k.name)==="Symbol"||((j=t==null?void 0:t())==null?void 0:j.name)==="Columns"?{builderComponents:e.registeredComponents}:{}},context:c,registeredComponents:e.registeredComponents,builderBlock:i(),includeBlockProps:((C=t==null?void 0:t())==null?void 0:C.noWrap)===!0,isInteractive:!((p=t==null?void 0:t())!=null&&p.isRSC)}}const[c,l]=react.useState(()=>e.context);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:o()?jsxRuntime.jsx(jsxRuntime.Fragment,{children:(u=t==null?void 0:t())!=null&&u.noWrap?jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(ComponentRef,{componentRef:s().componentRef,componentOptions:s().componentOptions,blockChildren:s().blockChildren,context:s().context,registeredComponents:s().registeredComponents,builderBlock:s().builderBlock,includeBlockProps:s().includeBlockProps,isInteractive:s().isInteractive})}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[isEmptyHtmlElement(r())?jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(BlockWrapper,{Wrapper:r(),block:i(),context:e.context,hasChildren:!1})}):null,!isEmptyHtmlElement(r())&&n()?jsxRuntime.jsx(jsxRuntime.Fragment,{children:(g=n())==null?void 0:g.map((f,S)=>jsxRuntime.jsx(RepeatedBlock,{repeatContext:f.context,block:f.block,registeredComponents:e.registeredComponents},S))}):null,!isEmptyHtmlElement(r())&&!n()?jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(BlockWrapper,{Wrapper:r(),block:i(),context:e.context,hasChildren:!0,children:[jsxRuntime.jsx(ComponentRef,{componentRef:s().componentRef,componentOptions:s().componentOptions,blockChildren:s().blockChildren,context:s().context,registeredComponents:s().registeredComponents,builderBlock:s().builderBlock,includeBlockProps:s().includeBlockProps,isInteractive:s().isInteractive}),(b=a())==null?void 0:b.map(f=>jsxRuntime.jsx(Block,{block:f,context:c,registeredComponents:e.registeredComponents},"block-"+f.id)),(y=a())==null?void 0:y.map(f=>jsxRuntime.jsx(BlockStyles,{block:f,context:c},"block-style-"+f.id))]})}):null]})}):null})}function BlocksWrapper(e){function t(){var r;return"builder-blocks"+((r=e.blocks)!=null&&r.length?"":" no-blocks")}function n(){var r,o;serverEntry.isEditing()&&!((r=e.blocks)!=null&&r.length)&&((o=window.parent)==null||o.postMessage({type:"builder.clickEmptyBlocks",data:{parentElementId:e.parent,dataPath:e.path}},"*"))}function i(){var r,o;serverEntry.isEditing()&&!((r=e.blocks)!=null&&r.length)&&((o=window.parent)==null||o.postMessage({type:"builder.hoverEmptyBlocks",data:{parentElementId:e.parent,dataPath:e.path}},"*"))}return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(e.BlocksWrapper,{className:t()+" props-blocks-wrapper-4f2c12d8","builder-path":e.path,"builder-parent-id":e.parent,style:e.styleProp,onClick:r=>n(),onMouseEnter:r=>i(),onKeyPress:r=>n(),...e.BlocksWrapperProps,children:e.children}),jsxRuntime.jsx("style",{children:`.props-blocks-wrapper-4f2c12d8 {
+    }`:i};function InlinedStyles(e){return jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:e.styles},id:e.id})}function BlockStyles(e){function t(){const i=getProcessedBlock({block:e.block,localState:e.context.localState,rootState:e.context.rootState,rootSetState:e.context.rootSetState,context:e.context.context,shouldEvaluateBindings:!0});return serverEntry.checkIsDefined(i.hide)?!i.hide:serverEntry.checkIsDefined(i.show)?i.show:!0}function n(){var f;const i=getProcessedBlock({block:e.block,localState:e.context.localState,rootState:e.context.rootState,rootSetState:e.context.rootSetState,context:e.context.context,shouldEvaluateBindings:!0}),r=i.responsiveStyles,o=e.context.content,a=getSizesForBreakpoints(((f=o==null?void 0:o.meta)==null?void 0:f.breakpoints)||{}),s=r==null?void 0:r.large,c=r==null?void 0:r.medium,l=r==null?void 0:r.small,u=i.id;if(!u)return"";const g=s?createCssClass({className:u,styles:s}):"",b=c?createCssClass({className:u,styles:c,mediaQuery:getMaxWidthQueryForSize("medium",a)}):"",y=l?createCssClass({className:u,styles:l,mediaQuery:getMaxWidthQueryForSize("small",a)}):"";return[g,b,y].join(" ")}return jsxRuntime.jsx(jsxRuntime.Fragment,{children:n()&&t()?jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(InlinedStyles,{styles:n()})}):null})}function capitalizeFirstLetter(e){return e.charAt(0).toUpperCase()+e.slice(1)}const getEventHandlerName=e=>`on${capitalizeFirstLetter(e)}`,createEventHandler=(e,t)=>n=>evaluate({code:e,context:t.context,localState:t.localState,rootState:t.rootState,rootSetState:t.rootSetState,event:n,isExpression:!1});function getBlockActions(e){var i;const t={},n=(i=e.block.actions)!=null?i:{};for(const r in n){if(!n.hasOwnProperty(r))continue;const o=n[r];let a=getEventHandlerName(r);if(e.stripPrefix)switch(serverEntry.TARGET){case"vue":a=a.replace("v-on:","");break;case"svelte":a=a.replace("on:","");break}t[a]=createEventHandler(o,e)}return t}function transformBlockProperties({properties:e}){return e.className=e.class,delete e.class,e}const extractRelevantRootBlockProperties=e=>({href:e.href});function getBlockProperties({block:e,context:t}){var i;const n={...extractRelevantRootBlockProperties(e),...e.properties,"builder-id":e.id,style:e.style?getStyleAttribute(e.style):void 0,class:[e.id,"builder-block",e.class,(i=e.properties)==null?void 0:i.class].filter(Boolean).join(" ")};return transformBlockProperties({properties:n,context:t,block:e})}function getStyleAttribute(e){switch(serverEntry.TARGET){case"svelte":case"vue":case"solid":return convertStyleMapToCSSArray(e).join(" ");case"qwik":case"reactNative":case"react":case"rsc":return e}}function BlockWrapper(e){return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[" ",e.hasChildren?jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(e.Wrapper,{...getBlockProperties({block:e.block,context:e.context}),...getBlockActions({block:e.block,rootState:e.context.rootState,rootSetState:e.context.rootSetState,localState:e.context.localState,context:e.context.context,stripPrefix:!0}),children:[" ",e.children," "]})}):jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(e.Wrapper,{...getBlockProperties({block:e.block,context:e.context}),...getBlockActions({block:e.block,rootState:e.context.rootState,rootSetState:e.context.rootSetState,localState:e.context.localState,context:e.context.context,stripPrefix:!0})})})," "]})}function InteractiveElement(e){return jsxRuntime.jsx(e.Wrapper,{...e.wrapperProps,attributes:e.includeBlockProps?{...getBlockProperties({block:e.block,context:e.context}),...getBlockActions({block:e.block,rootState:e.context.rootState,rootSetState:e.context.rootSetState,localState:e.context.localState,context:e.context.context})}:{},children:e.children})}const getWrapperProps=({componentOptions:e,builderBlock:t,context:n,componentRef:i,includeBlockProps:r,isInteractive:o,contextValue:a})=>{const s={...e,...r?{attributes:getBlockProperties({block:t,context:a})}:{}};return o?{Wrapper:i,block:t,context:n,wrapperProps:e,includeBlockProps:r}:s};function ComponentRef(e){var i,r;const[t,n]=react.useState(()=>e.isInteractive?InteractiveElement:e.componentRef);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:e.componentRef?jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(t,{...getWrapperProps({componentOptions:e.componentOptions,builderBlock:e.builderBlock,context:e.context,componentRef:e.componentRef,includeBlockProps:e.includeBlockProps,isInteractive:e.isInteractive,contextValue:e.context}),children:[(i=e.blockChildren)==null?void 0:i.map(o=>jsxRuntime.jsx(Block,{block:o,context:e.context,registeredComponents:e.registeredComponents},"block-"+o.id)),(r=e.blockChildren)==null?void 0:r.map(o=>jsxRuntime.jsx(BlockStyles,{block:o,context:e.context},"block-style-"+o.id))]})}):null})}function RepeatedBlock(e){const[t,n]=react.useState(()=>e.repeatContext);return jsxRuntime.jsx(builderContext.Provider,{value:t,children:jsxRuntime.jsx(Block,{block:e.block,context:t,registeredComponents:e.registeredComponents})})}function Block(e){var u,g,b,y;function t(){return getComponent({block:e.block,context:e.context,registeredComponents:e.registeredComponents})}function n(){return getRepeatItemData({block:e.block,context:e.context})}function i(){var f;return(f=e.block.repeat)!=null&&f.collection?e.block:getProcessedBlock({block:e.block,localState:e.context.localState,rootState:e.context.rootState,rootSetState:e.context.rootSetState,context:e.context.context,shouldEvaluateBindings:!0})}function r(){return e.block.tagName||"div"}function o(){var k,j;if((k=e.block.repeat)!=null&&k.collection)return!!((j=n==null?void 0:n())!=null&&j.length);const f="hide"in i()?i().hide:!1;return("show"in i()?i().show:!0)&&!f}function a(){var S,k;return!((S=t==null?void 0:t())!=null&&S.component)&&!n()?(k=i().children)!=null?k:[]:[]}function s(){var f,S,k,j,C,p;return{blockChildren:(f=i().children)!=null?f:[],componentRef:(S=t==null?void 0:t())==null?void 0:S.component,componentOptions:{...getBlockComponentOptions(i()),builderContext:e.context,...((k=t==null?void 0:t())==null?void 0:k.name)==="Symbol"||((j=t==null?void 0:t())==null?void 0:j.name)==="Columns"?{builderComponents:e.registeredComponents}:{}},context:c,registeredComponents:e.registeredComponents,builderBlock:i(),includeBlockProps:((C=t==null?void 0:t())==null?void 0:C.noWrap)===!0,isInteractive:!((p=t==null?void 0:t())!=null&&p.isRSC)}}const[c,l]=react.useState(()=>e.context);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:o()?jsxRuntime.jsx(jsxRuntime.Fragment,{children:(u=t==null?void 0:t())!=null&&u.noWrap?jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(ComponentRef,{componentRef:s().componentRef,componentOptions:s().componentOptions,blockChildren:s().blockChildren,context:s().context,registeredComponents:s().registeredComponents,builderBlock:s().builderBlock,includeBlockProps:s().includeBlockProps,isInteractive:s().isInteractive})}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[isEmptyHtmlElement(r())?jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(BlockWrapper,{Wrapper:r(),block:i(),context:e.context,hasChildren:!1})}):null,!isEmptyHtmlElement(r())&&n()?jsxRuntime.jsx(jsxRuntime.Fragment,{children:(g=n())==null?void 0:g.map((f,S)=>jsxRuntime.jsx(RepeatedBlock,{repeatContext:f.context,block:f.block,registeredComponents:e.registeredComponents},S))}):null,!isEmptyHtmlElement(r())&&!n()?jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(BlockWrapper,{Wrapper:r(),block:i(),context:e.context,hasChildren:!0,children:[jsxRuntime.jsx(ComponentRef,{componentRef:s().componentRef,componentOptions:s().componentOptions,blockChildren:s().blockChildren,context:s().context,registeredComponents:s().registeredComponents,builderBlock:s().builderBlock,includeBlockProps:s().includeBlockProps,isInteractive:s().isInteractive}),(b=a())==null?void 0:b.map(f=>jsxRuntime.jsx(Block,{block:f,context:c,registeredComponents:e.registeredComponents},"block-"+f.id)),(y=a())==null?void 0:y.map(f=>jsxRuntime.jsx(BlockStyles,{block:f,context:c},"block-style-"+f.id))]})}):null]})}):null})}function BlocksWrapper(e){function t(){var r;return"builder-blocks"+((r=e.blocks)!=null&&r.length?"":" no-blocks")}function n(){var r,o;serverEntry.isEditing()&&!((r=e.blocks)!=null&&r.length)&&((o=window.parent)==null||o.postMessage({type:"builder.clickEmptyBlocks",data:{parentElementId:e.parent,dataPath:e.path}},"*"))}function i(){var r,o;serverEntry.isEditing()&&!((r=e.blocks)!=null&&r.length)&&((o=window.parent)==null||o.postMessage({type:"builder.hoverEmptyBlocks",data:{parentElementId:e.parent,dataPath:e.path}},"*"))}return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(e.BlocksWrapper,{className:t()+" props-blocks-wrapper-4f2c12d8","builder-path":e.path,"builder-parent-id":e.parent,style:e.styleProp,onClick:r=>n(),onMouseEnter:r=>i(),onKeyPress:r=>n(),...e.BlocksWrapperProps,children:e.children}),jsxRuntime.jsx("style",{children:`.props-blocks-wrapper-4f2c12d8 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -196,7 +196,7 @@ output;
     "${t}",${JSON.stringify(e)}, ${isHydrationTarget}
   )`,getUpdateVariantVisibilityScript=({contentId:e,variationId:t})=>`window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${t}", "${e}", ${isHydrationTarget}
-  )`;function InlinedScript(e){return jsxRuntime.jsx("script",{dangerouslySetInnerHTML:{__html:e.scriptStr},id:e.id||""})}function round(e){return Math.round(e*1e3)/1e3}const findParentElement=(e,t,n=!0)=>{if(!(e instanceof HTMLElement))return null;let i=n?e:e.parentElement;do{if(!i)return null;if(t(i))return i}while(i=i.parentElement);return null},findBuilderParent=e=>findParentElement(e,t=>{const n=t.getAttribute("builder-id")||t.id;return(n==null?void 0:n.indexOf("builder-"))===0}),computeOffset=({event:e,target:t})=>{const n=t.getBoundingClientRect(),i=e.clientX-n.left,r=e.clientY-n.top,o=round(i/n.width),a=round(r/n.height);return{x:o,y:a}},getInteractionPropertiesForEvent=e=>{const t=e.target,n=t&&findBuilderParent(t),i=(n==null?void 0:n.getAttribute("builder-id"))||(n==null?void 0:n.id);return{targetBuilderElement:i||void 0,metadata:{targetOffset:t?computeOffset({event:e,target:t}):void 0,builderTargetOffset:n?computeOffset({event:e,target:n}):void 0,builderElementIndex:n&&i?[].slice.call(document.getElementsByClassName(i)).indexOf(n):void 0}}},SDK_VERSION="0.11.0",registerInsertMenu=()=>{serverEntry.register("insertMenu",{name:"_default",default:!0,items:[{name:"Box"},{name:"Text"},{name:"Image"},{name:"Columns"},{name:"Core:Section"},{name:"Core:Button"},{name:"Embed"},{name:"Custom Code"}]})};let isSetupForEditing=!1;const setupBrowserForEditing=(e={})=>{var t,n;isSetupForEditing||(isSetupForEditing=!0,serverEntry.isBrowser()&&((t=window.parent)==null||t.postMessage({type:"builder.sdkInfo",data:{target:serverEntry.TARGET,version:SDK_VERSION,supportsPatchUpdates:!1,supportsAddBlockScoping:!0,supportsCustomBreakpoints:!0}},"*"),(n=window.parent)==null||n.postMessage({type:"builder.updateContent",data:{options:e}},"*"),window.addEventListener("message",({data:i})=>{var r,o;if(i!=null&&i.type)switch(i.type){case"builder.evaluate":{const a=i.data.text,s=i.data.arguments||[],c=i.data.id,l=new Function(a);let u,g=null;try{u=l.apply(null,s)}catch(b){g=b}g?(r=window.parent)==null||r.postMessage({type:"builder.evaluateError",data:{id:c,error:g.message}},"*"):u&&typeof u.then=="function"?u.then(b=>{var y;(y=window.parent)==null||y.postMessage({type:"builder.evaluateResult",data:{id:c,result:b}},"*")}).catch(console.error):(o=window.parent)==null||o.postMessage({type:"builder.evaluateResult",data:{result:u,id:c}},"*");break}}})))};function EnableEditor(e){var T,w,P,A,F,_,V;const t=react.useRef(null),[n,i]=react.useState(()=>0);function r(d){var x,h,v,R,B;const m={...e.builderContextSignal.content,...d,data:{...(x=e.builderContextSignal.content)==null?void 0:x.data,...d==null?void 0:d.data},meta:{...(h=e.builderContextSignal.content)==null?void 0:h.meta,...d==null?void 0:d.meta,breakpoints:((v=d==null?void 0:d.meta)==null?void 0:v.breakpoints)||((B=(R=e.builderContextSignal.content)==null?void 0:R.meta)==null?void 0:B.breakpoints)}};e.setBuilderContextSignal(W=>({...W,content:m}))}react.useState(()=>0);const[o,a]=react.useState(()=>!1),[s,c]=react.useState(()=>e.contentWrapper||"div");function l(d){var x;const{data:m}=d;if(m)switch(m.type){case"builder.configureSdk":{const h=m.data,{breakpoints:v,contentId:R}=h;if(!R||R!==((x=e.builderContextSignal.content)==null?void 0:x.id))return;v&&r({meta:{breakpoints:v}}),i(n+1);break}case"builder.contentUpdate":{const h=m.data,v=h.key||h.alias||h.entry||h.modelName,R=h.data;v===e.model&&(r(R),i(n+1));break}}}function u(){var m,x;const d=(x=(m=e.builderContextSignal.content)==null?void 0:m.data)==null?void 0:x.jsCode;d&&evaluate({code:d,context:e.context||{},localState:void 0,rootState:e.builderContextSignal.rootState,rootSetState:e.builderContextSignal.rootSetState})}const[g,b]=react.useState(()=>({})),[y,f]=react.useState(()=>!1);function S(d){var m,x;if(e.builderContextSignal.content){const h=(m=e.builderContextSignal.content)==null?void 0:m.testVariationId,v=(x=e.builderContextSignal.content)==null?void 0:x.id;serverEntry._track({type:"click",canTrack:serverEntry.getDefaultCanTrack(e.canTrack),contentId:v,apiKey:e.apiKey,variationId:h!==v?h:void 0,...getInteractionPropertiesForEvent(d),unique:!y})}y||f(!0)}function k(d){return d.replace(/{{([^}]+)}}/g,(m,x)=>evaluate({code:x,context:e.context||{},localState:void 0,rootState:e.builderContextSignal.rootState,rootSetState:e.builderContextSignal.rootSetState}))}function j({url:d,key:m}){serverEntry.fetch(d).then(x=>x.json()).then(x=>{var v,R;const h={...e.builderContextSignal.rootState,[m]:x};(R=(v=e.builderContextSignal).rootSetState)==null||R.call(v,h),g[m]=!0}).catch(x=>{console.error("error fetching dynamic data",d,x)})}function C(){var m,x,h;const d=(h=(x=(m=e.builderContextSignal.content)==null?void 0:m.data)==null?void 0:x.httpRequests)!=null?h:{};Object.entries(d).forEach(([v,R])=>{if(R&&(!g[v]||serverEntry.isEditing())){const B=k(R);j({url:B,key:v})}})}function p(){serverEntry.isEditing()&&window.dispatchEvent(new CustomEvent("builder:component:stateChange",{detail:{state:serverEntry.fastClone(e.builderContextSignal.rootState),ref:{name:e.model}}}))}function E(d){i(n+1),window.addEventListener("message",l),registerInsertMenu(),setupBrowserForEditing({...e.locale?{locale:e.locale}:{},...e.includeRefs?{includeRefs:e.includeRefs}:{},...e.enrich?{enrich:e.enrich}:{}}),Object.values(e.builderContextSignal.componentInfos).forEach(m=>{var h;const x=serverEntry.createRegisterComponentMessage(m);(h=window.parent)==null||h.postMessage(x,"*")}),window.addEventListener("builder:component:stateChangeListenerActivated",p)}function I(d){const m=new URL(location.href).searchParams,x=m.get("builder.preview"),h=m.get(`builder.preview.${x}`),v=m.get("apiKey")||m.get("builder.space");x===e.model&&v===e.apiKey&&(!e.content||h===e.content.id)&&serverEntry.fetchOneEntry({model:e.model,apiKey:e.apiKey,apiVersion:e.builderContextSignal.apiVersion}).then(R=>{R&&r(R)})}return react.useEffect(()=>{var d;return(d=t.current)==null||d.addEventListener("initeditingbldr",E),()=>{var m;return(m=t.current)==null?void 0:m.removeEventListener("initeditingbldr",E)}},[]),react.useEffect(()=>{var d;return(d=t.current)==null||d.addEventListener("initpreviewingbldr",I),()=>{var m;return(m=t.current)==null?void 0:m.removeEventListener("initpreviewingbldr",I)}},[]),react.useEffect(()=>{var d,m;if(serverEntry.isBrowser()){if(serverEntry.isEditing()&&t.current&&t.current.dispatchEvent(new CustomEvent("initeditingbldr")),e.builderContextSignal.content&&serverEntry.getDefaultCanTrack(e.canTrack)){const h=(d=e.builderContextSignal.content)==null?void 0:d.testVariationId,v=(m=e.builderContextSignal.content)==null?void 0:m.id,R=e.apiKey;serverEntry._track({type:"impression",canTrack:!0,contentId:v,apiKey:R,variationId:h!==v?h:void 0})}serverEntry.isPreviewing()&&t.current&&t.current.dispatchEvent(new CustomEvent("initpreviewingbldr"))}},[]),react.useEffect(()=>{e.apiKey||serverEntry.logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."),u(),C(),p()},[]),react.useEffect(()=>{e.content&&r(e.content)},[e.content]),react.useEffect(()=>{},[o]),react.useEffect(()=>{u()},[(w=(T=e.builderContextSignal.content)==null?void 0:T.data)==null?void 0:w.jsCode,e.builderContextSignal.rootState]),react.useEffect(()=>{C()},[(A=(P=e.builderContextSignal.content)==null?void 0:P.data)==null?void 0:A.httpRequests]),react.useEffect(()=>{p()},[e.builderContextSignal.rootState]),react.useEffect(()=>()=>{serverEntry.isBrowser()&&(window.removeEventListener("message",l),window.removeEventListener("builder:component:stateChangeListenerActivated",p))},[]),jsxRuntime.jsx(builderContext.Provider,{value:e.builderContextSignal,children:e.builderContextSignal.content?jsxRuntime.jsx(jsxRuntime.Fragment,{children:react.createElement(s,{key:n,ref:t,onClick:d=>S(d),"builder-content-id":(F=e.builderContextSignal.content)==null?void 0:F.id,"builder-model":e.model,...e.showContent?{}:{hidden:!0,"aria-hidden":!0},...e.contentWrapperProps,className:`variant-${((_=e.content)==null?void 0:_.testVariationId)||((V=e.content)==null?void 0:V.id)}`},e.children)}):null})}const getCssFromFont=e=>{var o,a;const t=e.family+(e.kind&&!e.kind.includes("#")?", "+e.kind:""),n=t.split(",")[0],i=(a=e.fileUrl)!=null?a:(o=e==null?void 0:e.files)==null?void 0:o.regular;let r="";if(i&&t&&n&&(r+=`
+  )`;function InlinedScript(e){return jsxRuntime.jsx("script",{dangerouslySetInnerHTML:{__html:e.scriptStr},id:e.id||""})}function round(e){return Math.round(e*1e3)/1e3}const findParentElement=(e,t,n=!0)=>{if(!(e instanceof HTMLElement))return null;let i=n?e:e.parentElement;do{if(!i)return null;if(t(i))return i}while(i=i.parentElement);return null},findBuilderParent=e=>findParentElement(e,t=>{const n=t.getAttribute("builder-id")||t.id;return(n==null?void 0:n.indexOf("builder-"))===0}),computeOffset=({event:e,target:t})=>{const n=t.getBoundingClientRect(),i=e.clientX-n.left,r=e.clientY-n.top,o=round(i/n.width),a=round(r/n.height);return{x:o,y:a}},getInteractionPropertiesForEvent=e=>{const t=e.target,n=t&&findBuilderParent(t),i=(n==null?void 0:n.getAttribute("builder-id"))||(n==null?void 0:n.id);return{targetBuilderElement:i||void 0,metadata:{targetOffset:t?computeOffset({event:e,target:t}):void 0,builderTargetOffset:n?computeOffset({event:e,target:n}):void 0,builderElementIndex:n&&i?[].slice.call(document.getElementsByClassName(i)).indexOf(n):void 0}}},SDK_VERSION="0.11.1",registerInsertMenu=()=>{serverEntry.register("insertMenu",{name:"_default",default:!0,items:[{name:"Box"},{name:"Text"},{name:"Image"},{name:"Columns"},{name:"Core:Section"},{name:"Core:Button"},{name:"Embed"},{name:"Custom Code"}]})};let isSetupForEditing=!1;const setupBrowserForEditing=(e={})=>{var t,n;isSetupForEditing||(isSetupForEditing=!0,serverEntry.isBrowser()&&((t=window.parent)==null||t.postMessage({type:"builder.sdkInfo",data:{target:serverEntry.TARGET,version:SDK_VERSION,supportsPatchUpdates:!1,supportsAddBlockScoping:!0,supportsCustomBreakpoints:!0}},"*"),(n=window.parent)==null||n.postMessage({type:"builder.updateContent",data:{options:e}},"*"),window.addEventListener("message",({data:i})=>{var r,o;if(i!=null&&i.type)switch(i.type){case"builder.evaluate":{const a=i.data.text,s=i.data.arguments||[],c=i.data.id,l=new Function(a);let u,g=null;try{u=l.apply(null,s)}catch(b){g=b}g?(r=window.parent)==null||r.postMessage({type:"builder.evaluateError",data:{id:c,error:g.message}},"*"):u&&typeof u.then=="function"?u.then(b=>{var y;(y=window.parent)==null||y.postMessage({type:"builder.evaluateResult",data:{id:c,result:b}},"*")}).catch(console.error):(o=window.parent)==null||o.postMessage({type:"builder.evaluateResult",data:{result:u,id:c}},"*");break}}})))};function EnableEditor(e){var T,w,P,A,F,_,V;const t=react.useRef(null),[n,i]=react.useState(()=>0);function r(d){var x,h,v,R,B;const m={...e.builderContextSignal.content,...d,data:{...(x=e.builderContextSignal.content)==null?void 0:x.data,...d==null?void 0:d.data},meta:{...(h=e.builderContextSignal.content)==null?void 0:h.meta,...d==null?void 0:d.meta,breakpoints:((v=d==null?void 0:d.meta)==null?void 0:v.breakpoints)||((B=(R=e.builderContextSignal.content)==null?void 0:R.meta)==null?void 0:B.breakpoints)}};e.setBuilderContextSignal(W=>({...W,content:m}))}react.useState(()=>0);const[o,a]=react.useState(()=>!1),[s,c]=react.useState(()=>e.contentWrapper||"div");function l(d){var x;const{data:m}=d;if(m)switch(m.type){case"builder.configureSdk":{const h=m.data,{breakpoints:v,contentId:R}=h;if(!R||R!==((x=e.builderContextSignal.content)==null?void 0:x.id))return;v&&r({meta:{breakpoints:v}}),i(n+1);break}case"builder.contentUpdate":{const h=m.data,v=h.key||h.alias||h.entry||h.modelName,R=h.data;v===e.model&&(r(R),i(n+1));break}}}function u(){var m,x;const d=(x=(m=e.builderContextSignal.content)==null?void 0:m.data)==null?void 0:x.jsCode;d&&evaluate({code:d,context:e.context||{},localState:void 0,rootState:e.builderContextSignal.rootState,rootSetState:e.builderContextSignal.rootSetState})}const[g,b]=react.useState(()=>({})),[y,f]=react.useState(()=>!1);function S(d){var m,x;if(e.builderContextSignal.content){const h=(m=e.builderContextSignal.content)==null?void 0:m.testVariationId,v=(x=e.builderContextSignal.content)==null?void 0:x.id;serverEntry._track({type:"click",canTrack:serverEntry.getDefaultCanTrack(e.canTrack),contentId:v,apiKey:e.apiKey,variationId:h!==v?h:void 0,...getInteractionPropertiesForEvent(d),unique:!y})}y||f(!0)}function k(d){return d.replace(/{{([^}]+)}}/g,(m,x)=>evaluate({code:x,context:e.context||{},localState:void 0,rootState:e.builderContextSignal.rootState,rootSetState:e.builderContextSignal.rootSetState}))}function j({url:d,key:m}){serverEntry.fetch(d).then(x=>x.json()).then(x=>{var v,R;const h={...e.builderContextSignal.rootState,[m]:x};(R=(v=e.builderContextSignal).rootSetState)==null||R.call(v,h),g[m]=!0}).catch(x=>{console.error("error fetching dynamic data",d,x)})}function C(){var m,x,h;const d=(h=(x=(m=e.builderContextSignal.content)==null?void 0:m.data)==null?void 0:x.httpRequests)!=null?h:{};Object.entries(d).forEach(([v,R])=>{if(R&&(!g[v]||serverEntry.isEditing())){const B=k(R);j({url:B,key:v})}})}function p(){serverEntry.isEditing()&&window.dispatchEvent(new CustomEvent("builder:component:stateChange",{detail:{state:serverEntry.fastClone(e.builderContextSignal.rootState),ref:{name:e.model}}}))}function E(d){i(n+1),window.addEventListener("message",l),registerInsertMenu(),setupBrowserForEditing({...e.locale?{locale:e.locale}:{},...e.includeRefs?{includeRefs:e.includeRefs}:{},...e.enrich?{enrich:e.enrich}:{}}),Object.values(e.builderContextSignal.componentInfos).forEach(m=>{var h;const x=serverEntry.createRegisterComponentMessage(m);(h=window.parent)==null||h.postMessage(x,"*")}),window.addEventListener("builder:component:stateChangeListenerActivated",p)}function I(d){const m=new URL(location.href).searchParams,x=m.get("builder.preview"),h=m.get(`builder.preview.${x}`),v=m.get("apiKey")||m.get("builder.space");x===e.model&&v===e.apiKey&&(!e.content||h===e.content.id)&&serverEntry.fetchOneEntry({model:e.model,apiKey:e.apiKey,apiVersion:e.builderContextSignal.apiVersion}).then(R=>{R&&r(R)})}return react.useEffect(()=>{var d;return(d=t.current)==null||d.addEventListener("initeditingbldr",E),()=>{var m;return(m=t.current)==null?void 0:m.removeEventListener("initeditingbldr",E)}},[]),react.useEffect(()=>{var d;return(d=t.current)==null||d.addEventListener("initpreviewingbldr",I),()=>{var m;return(m=t.current)==null?void 0:m.removeEventListener("initpreviewingbldr",I)}},[]),react.useEffect(()=>{var d,m;if(serverEntry.isBrowser()){if(serverEntry.isEditing()&&t.current&&t.current.dispatchEvent(new CustomEvent("initeditingbldr")),e.builderContextSignal.content&&serverEntry.getDefaultCanTrack(e.canTrack)){const h=(d=e.builderContextSignal.content)==null?void 0:d.testVariationId,v=(m=e.builderContextSignal.content)==null?void 0:m.id,R=e.apiKey;serverEntry._track({type:"impression",canTrack:!0,contentId:v,apiKey:R,variationId:h!==v?h:void 0})}serverEntry.isPreviewing()&&t.current&&t.current.dispatchEvent(new CustomEvent("initpreviewingbldr"))}},[]),react.useEffect(()=>{e.apiKey||serverEntry.logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."),u(),C(),p()},[]),react.useEffect(()=>{e.content&&r(e.content)},[e.content]),react.useEffect(()=>{},[o]),react.useEffect(()=>{u()},[(w=(T=e.builderContextSignal.content)==null?void 0:T.data)==null?void 0:w.jsCode,e.builderContextSignal.rootState]),react.useEffect(()=>{C()},[(A=(P=e.builderContextSignal.content)==null?void 0:P.data)==null?void 0:A.httpRequests]),react.useEffect(()=>{p()},[e.builderContextSignal.rootState]),react.useEffect(()=>()=>{serverEntry.isBrowser()&&(window.removeEventListener("message",l),window.removeEventListener("builder:component:stateChangeListenerActivated",p))},[]),jsxRuntime.jsx(builderContext.Provider,{value:e.builderContextSignal,children:e.builderContextSignal.content?jsxRuntime.jsx(jsxRuntime.Fragment,{children:react.createElement(s,{key:n,ref:t,onClick:d=>S(d),"builder-content-id":(F=e.builderContextSignal.content)==null?void 0:F.id,"builder-model":e.model,...e.showContent?{}:{hidden:!0,"aria-hidden":!0},...e.contentWrapperProps,className:`variant-${((_=e.content)==null?void 0:_.testVariationId)||((V=e.content)==null?void 0:V.id)}`},e.children)}):null})}const getCssFromFont=e=>{var o,a;const t=e.family+(e.kind&&!e.kind.includes("#")?", "+e.kind:""),n=t.split(",")[0],i=(a=e.fileUrl)!=null?a:(o=e==null?void 0:e.files)==null?void 0:o.regular;let r="";if(i&&t&&n&&(r+=`
 @font-face {
 font-family: "${t}";
 src: local("${n}"), url('${i}') format('woff2');

package/lib/node/index.mjs

@@ -576,7 +576,7 @@ function InteractiveElement(e) {
     e.Wrapper,
     {
       ...e.wrapperProps,
-      attributes: {
+      attributes: e.includeBlockProps ? {
         ...getBlockProperties({
           block: e.block,
           context: e.context
@@ -588,7 +588,7 @@ function InteractiveElement(e) {
           localState: e.context.localState,
           context: e.context.context
         })
-      },
+      } : {},
       children: e.children
     }
   );
@@ -601,23 +601,27 @@ const getWrapperProps = ({
   includeBlockProps: o,
   isInteractive: a,
   contextValue: r
-}) => a ? {
-  Wrapper: i,
-  block: t,
-  context: n,
-  wrapperProps: e
-} : {
-  ...e,
-  /**
-   * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
-   * component itself directly. Otherwise, they are provided to the wrapper element.
-   */
-  ...o ? {
-    attributes: getBlockProperties({
-      block: t,
-      context: r
-    })
-  } : {}
+}) => {
+  const c = {
+    ...e,
+    /**
+     * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
+     * component itself directly. Otherwise, they are provided to the wrapper element.
+     */
+    ...o ? {
+      attributes: getBlockProperties({
+        block: t,
+        context: r
+      })
+    } : {}
+  };
+  return a ? {
+    Wrapper: i,
+    block: t,
+    context: n,
+    wrapperProps: e,
+    includeBlockProps: o
+  } : c;
 };
 function ComponentRef(e) {
   var i, o;
@@ -2132,7 +2136,7 @@ const findParentElement = (e, t, n = !0) => {
       builderElementIndex: n && i ? [].slice.call(document.getElementsByClassName(i)).indexOf(n) : void 0
     }
   };
-}, SDK_VERSION = "0.11.0", registerInsertMenu = () => {
+}, SDK_VERSION = "0.11.1", registerInsertMenu = () => {
   register("insertMenu", {
     name: "_default",
     default: !0,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/react",
   "type": "module",
   "repository": {

package/types/components/block/components/interactive-element.d.ts

@@ -3,10 +3,11 @@ export type InteractiveElementProps = {
     Wrapper: any;
     block: BuilderBlock;
     context: BuilderContextInterface;
-    wrapperProps: object;
+    wrapperProps: Dictionary<any>;
+    includeBlockProps: boolean;
 };
 import type { BuilderContextInterface } from "../../../context/types.js";
 import type { BuilderBlock } from "../../../types/builder-block.js";
-import type { PropsWithChildren } from "../../../types/typescript.js";
+import type { Dictionary, PropsWithChildren } from "../../../types/typescript.js";
 declare function InteractiveElement(props: PropsWithChildren<InteractiveElementProps>): React.JSX.Element;
 export default InteractiveElement;

package/types/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.11.0";
+export declare const SDK_VERSION = "0.11.1";