@builder.io/react 8.2.0 → 8.2.2

package/dist/types/src/components/builder-content.component.d.ts

@@ -39,6 +39,10 @@ export type BuilderContentProps<ContentType> = {
      * Required if `inline` is set to `true`.
      */
     content?: Content;
+    /**
+     * CSP nonce to allow the loading and execution of a script or style tag when Content-Security-Policy is enabled.
+     */
+    nonce?: string;
 } & ({
     model: string;
 } | {

package/dist/types/src/components/variants-provider.component.d.ts

@@ -3,6 +3,7 @@ import { BuilderContent } from '@builder.io/sdk';
 interface VariantsProviderProps {
     initialContent: BuilderContent;
     children: (variants: BuilderContent[], renderScript?: () => JSX.Element) => JSX.Element;
+    nonce?: string;
 }
-export declare const VariantsProvider: ({ initialContent, children }: VariantsProviderProps) => React.JSX.Element;
+export declare const VariantsProvider: ({ initialContent, children, nonce }: VariantsProviderProps) => React.JSX.Element;
 export {};

package/dist/types/src/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "8.2.0";
+export declare const SDK_VERSION = "8.2.2";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/react",
-  "version": "8.2.0",
+  "version": "8.2.2",
   "description": "",
   "keywords": [],
   "main": "dist/builder-react.cjs.js",

package/src/blocks/PersonalizationContainer.tsx

@@ -106,6 +106,7 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
             </template>
           ))}
           <script
+            nonce={builderStore.context.nonce}
             id={`variants-script-${props.builderBlock?.id}`}
             dangerouslySetInnerHTML={{
               __html: getPersonalizationScript(
@@ -123,6 +124,7 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
           />
         </div>
         <script
+          nonce={builderStore.context.nonce}
           dangerouslySetInnerHTML={{
             __html: `
          window.__hydrated = window.__hydrated || {};
@@ -194,6 +196,7 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
         )}
       </div>
       <script
+        nonce={builderStore.context.nonce}
         dangerouslySetInnerHTML={{
           __html: `
          window.__hydrated = window.__hydrated || {};

package/src/blocks/Router.tsx

@@ -262,7 +262,7 @@ class RouterComponent extends React.Component<PropsWithChildren<RouterProps>> {
           return (
             <div className="builder-router" data-model={model}>
               {/* TODO: move to emotion */}
-              <style>{`
+              <style nonce={state.context.nonce}>{`
                 @keyframes builderLoadingSpinner {
                   0% {
                     transform: rotate(0deg);
@@ -297,6 +297,7 @@ class RouterComponent extends React.Component<PropsWithChildren<RouterProps>> {
                 options={{
                   key: Builder.isEditing ? undefined : this.model + ':' + url, // TODO: other custom targets specify if should refetch components on change
                 }}
+                nonce={state.context.nonce}
               >
                 {/* TODO: builder blocks option for loading stuff */}
                 {/* TODO: input for builder blocks for this */}

package/src/blocks/Symbol.tsx

@@ -172,6 +172,7 @@ class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
                   hydrate={state.state?._hydrate}
                   builderBlock={this.props.builderBlock}
                   dataOnly={this.props.dataOnly}
+                  nonce={state.context.nonce}
                 >
                   {/* TODO: builder blocks option for loading stuff */}
                   {this.props.children}

package/src/blocks/forms/Form.tsx

@@ -100,13 +100,19 @@ class FormComponent extends React.Component<FormProps> {
                     value: File | boolean | number | string | FileList;
                   }[] = Array.from(event.currentTarget.querySelectorAll('input,select,textarea'))
                     .filter(el => !!(el as HTMLInputElement).name)
+                    .filter(
+                      el =>
+                        !!(el as HTMLInputElement).name &&
+                        ((el as HTMLInputElement).type !== 'radio' ||
+                          (el as HTMLInputElement).checked)
+                    )
                     .map(el => {
                       let value: any;
                       const key = (el as HTMLImageElement).name;
                       if (el instanceof HTMLInputElement) {
                         if (el.type === 'radio') {
                           if (el.checked) {
-                            value = el.name;
+                            value = el.value;
                             return { key, value };
                           }
                         } else if (el.type === 'checkbox') {

package/src/components/builder-component.component.tsx

@@ -298,6 +298,11 @@ export interface BuilderComponentProps {
    * Pass a list of custom components to register with Builder.io.
    */
   customComponents?: Array<RegisteredComponent>;
+
+  /**
+   * CSP nonce to allow the loading and execution of a script or style tag when Content-Security-Policy is enabled.
+   */
+  nonce?: string;
 }
 
 export interface BuilderComponentState {
@@ -439,6 +444,7 @@ export class BuilderComponent extends React.Component<
       context: {
         ...props.context,
         apiKey: this.props.apiKey || builder.apiKey,
+        nonce: this.props.nonce,
       },
       state: Object.assign(this.rootState, {
         ...(this.inlinedContent && this.inlinedContent.data && this.inlinedContent.data.state),
@@ -1097,6 +1103,7 @@ export class BuilderComponent extends React.Component<
                       }
                       contentError={this.props.contentError}
                       modelName={this.name || 'page'}
+                      nonce={this.props.nonce}
                     >
                       {(data, loading, fullData) => {
                         if (this.props.dataOnly) {
@@ -1191,6 +1198,7 @@ export class BuilderComponent extends React.Component<
                           >
                             {!codegen && this.getCss(data) && (
                               <style
+                                nonce={this.props.nonce}
                                 ref={ref => (this.styleRef = ref)}
                                 className="builder-custom-styles"
                                 dangerouslySetInnerHTML={{

package/src/components/builder-content.component.tsx

@@ -50,6 +50,10 @@ export type BuilderContentProps<ContentType> = {
    * Required if `inline` is set to `true`.
    */
   content?: Content;
+  /**
+   * CSP nonce to allow the loading and execution of a script or style tag when Content-Security-Policy is enabled.
+   */
+  nonce?: string;
 } & ({ model: string } | { modelName: string }); // model and modelName are aliases of the same thing¸
 
 /**
@@ -314,7 +318,7 @@ export class BuilderContent<ContentType extends object = any> extends React.Comp
     const useData: any = this.data;
     const TagName = this.props.dataOnly ? NoWrap : 'div';
     return (
-      <VariantsProvider initialContent={useData}>
+      <VariantsProvider initialContent={useData} nonce={this.props.nonce}>
         {(variants, renderScript) => {
           return (
             <React.Fragment>

package/src/components/variants-provider.component.tsx

@@ -99,9 +99,10 @@ const variantsScript = (variantsString: string, contentId: string) =>
 interface VariantsProviderProps {
   initialContent: BuilderContent;
   children: (variants: BuilderContent[], renderScript?: () => JSX.Element) => JSX.Element;
+  nonce?: string;
 }
 
-export const VariantsProvider = ({ initialContent, children }: VariantsProviderProps) => {
+export const VariantsProvider = ({ initialContent, children, nonce }: VariantsProviderProps) => {
   if (Builder.isBrowser && !builder.canTrack) {
     return children([initialContent]);
   }
@@ -126,6 +127,7 @@ export const VariantsProvider = ({ initialContent, children }: VariantsProviderP
     );
     const renderScript = () => (
       <script
+        nonce={nonce}
         id={`variants-script-${initialContent.id}`}
         dangerouslySetInnerHTML={{
           __html: variantsScript(variantsJson, initialContent.id!),