fix: added a few use client and if provider is not used asContainer, the consumer needs to create a container themself

Author: pksorensen

packages/core/src/components/error-popup/ErrorPopup.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState, useEffect } from 'react';
 import { useQuickForm } from "../../state/QuickFormContext";
 import { quickformtokens } from '../../style/quickFormTokensDefinition';

packages/core/src/components/paragraph/Paragraph.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { ReactNode } from "react";
 import React from "react";
 import { quickformtokens } from "../../style/quickFormTokensDefinition";

packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useEffect, useRef, useState } from 'react';
 import { useQuickForm } from '../../../state/QuickFormContext';
 import { Button } from '../../button/Button';

packages/core/src/state/QuickFormContext.tsx

@@ -16,6 +16,7 @@ interface IQuickFormContext {
     isFirstQuestionInCurrentSlide: (questionLogicalName: string) => boolean;
     getCurrentSlide: () => SlideModel;
     onSubmitAsync: (formdata: any) => Promise<string>;
+    cssVariables: { [key: string]: string };
 }
 
 export const QuickFormContext = React.createContext<IQuickFormContext>(
@@ -33,6 +34,7 @@ export const QuickFormContext = React.createContext<IQuickFormContext>(
             { questions: [], rows: [], isAnswered: false, addQuestion: () => ({ type: "question", ref: "" }) }
         ),
         onSubmitAsync: async (formdata) => { return "" },
+        cssVariables: {}
     }
 );
 

packages/core/src/state/QuickformProvider.tsx

@@ -10,6 +10,7 @@ import { kbaQuickFormTokens } from "../style/kbaQuickFormTokens";
 import { isFirstQInCurrentSlide } from "../utils/isFirstQuestionInSlide";
 
 type QuickFormProviderProps = {
+    className?:string,
     children: React.ReactNode;
     definition: QuickFormDefinition;
     tokens?: Partial<QuickFormTokens>;
@@ -20,6 +21,7 @@ type QuickFormProviderProps = {
 
 export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
     {
+        className,
         children,
         definition,
         payload,
@@ -50,7 +52,7 @@ export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
     const setErrorMsg = (msg: string) => { dispatch({ type: "SET_ERROR_MSG", msg: msg }) };
     const isFirstQuestionInCurrentSlide = (questionLogicalName: string) => { return isFirstQInCurrentSlide(questionLogicalName, state); }
     const getCurrentSlide = () => (state.slides[state.currIdx]);
-
+    console.log("children", children);
     return (
         <QuickFormContext.Provider value={{
             state,
@@ -64,6 +66,7 @@ export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
             isFirstQuestionInCurrentSlide,
             getCurrentSlide,
             onSubmitAsync,
+            cssVariables
         }}>
 
             {asContainer ? (
@@ -72,10 +75,8 @@ export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
                     {children}
                 </QuickFormContainer>
             ) : (
-                <div style={cssVariables}>
-                    <ErrorPopup message={state.errorMsg} />
-                    {children}
-                </div>
+                     children 
+                    
             )
             }
         </QuickFormContext.Provider>