optimized-react-component-library-xyz123 0.1.131 → 0.1.133

package/dist/index.d.mts

@@ -164,12 +164,12 @@ declare const AddFiles: FC<AddFilesProps>;
 /**
  * Kontrollerar om en fråga har ett valideringsfel baserat på dess egenskaper och valideringstyper.
  *
- * @param questionObject - Den fråga som ska kontrolleras.
- * @param arrayOfQuestionObjects - Alla frågor i formuläret (behövs för gruppvalideringar).
+ * @param question - Den fråga som ska kontrolleras.
+ * @param questions - Alla frågor i formuläret (behövs för gruppvalideringar).
  * @returns `true` om frågan har ett valideringsfel, annars `false`.
  *
  */
-declare const hasQuestionValidationError: (questionObject: any, arrayOfQuestionObjects: any[]) => boolean;
+declare const hasQuestionValidationError: (question: any, questions: any[]) => boolean;
 
 interface TranslatedAnswers {
     [questionId: string]: {
@@ -244,17 +244,22 @@ declare const isQuestionDependencySatisfied: (data: any[], question: any) => boo
 declare const updateQuestionsAndCategoriesVisibilityAndErrors: (questions: IQuestion[], validationErrorsList: number[]) => any[];
 
 /**
- * Går igenom alla synliga frågor och returnerar
+ * Går igenom alla synliga frågor i aktuella steget och returnerar
  * en lista med fråge-ID:n som har valideringsfel.
  *
- * Endast frågor som är markerade som `visible` och som returnerar `true`
- * från `QuestionHasValidationError()` inkluderas i resultatet.
+ * Endast frågor som är markerade som `visible` och som inte
+ * valideras korrekt enligt config inkluderas i resultatet.
+ *
+ * @param {Object} currentStepQuestions Aktuella steget (stepObjekt) med alla dess kategorier,
+ *                                      questionGroups och questions.
+ *
+ * @param {Array} questions             En lista med alla frågor i formuläret.
+ *                                      Används för att avgöra om en fråga validerar
+ *                                      korrekt utifrån hela frågedatat.
  *
- * @param data - Fyll på...
- * @param formQuestion - Fyll på...
  * @returns En array med ID:n (`number[]`) för frågor som har valideringsfel.
  */
-declare function findVisibleQuestionsWithValidationErrors(data: any, formQuestion: any): number[];
+declare function findVisibleQuestionsWithValidationErrors(currentStepQuestions: any, questions: any): number[];
 
 /**
  * Bygger upp en hierarkisk datastruktur för formuläret, grupperad per steg, kategori och frågegrupp.
@@ -266,8 +271,8 @@ declare function findVisibleQuestionsWithValidationErrors(data: any, formQuestio
  *
  * Dessutom uppdateras frågor med `visible` baserat på dess beroende till andra frågor och `hasValidationError` baserat på aktuell valideringsstatus.
  *
- * @param questions - Alla frågor i formuläret (`IQuestion[]`).
- * @param steps - Lista över alla steg i formuläret (`IStepObject[]`).
+ * @param questions - Alla frågor i formuläret.
+ * @param steps - Lista över alla steg i formuläret.
  * @param validationErrorsList - Lista med fråge-ID:n som har valideringsfel.
  * @returns En lista av stegobjekt med tillhörande kategorier och grupper.
  *
@@ -353,19 +358,55 @@ declare const makeglobalLanguageSelectors: <TState>(selectSlice: (state: TState)
     };
 };
 
+/**
+ * createFormSlice skapar ett Redux-slice som hanterar allt globalt state
+ * kopplat till formuläret såsom applicationContent, steps och questions
+ */
 declare const createFormSlice: (initialState: IFormState, options?: {
     name?: string;
     extraReducers?: (builder: ActionReducerMapBuilder<IFormState>) => void;
 }) => _reduxjs_toolkit.Slice<IFormState, {
+    /**
+     * Laddar in eller uppdaterar applikationens övergripande textdata och metadata i.
+     * global state. Sätter även formLoaded = true när innehållet är färdiginläst.
+     */
     setApplicationContent: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /**
+     * Laddar in eller uppdaterar step-data i global state.
+     */
     setStep: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /**
+     * Laddar in eller uppdaterar question-data i global state.
+     */
     setQuestion: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /**
+     * Uppdaterar svaret (answer) för en specifik fråga i global state.
+     */
     updateAnswer: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /** Uppdaterar filer (files) för en specifik fråga i global state */
     addFiles: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
-    hideQuestionsFromStep: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /**
+     * Sätter `isDisplayed = false` på alla frågor vars stegnummer är
+     * större än eller lika med det aktiva steget.
+     *
+     * Används för att nollställa vilka frågor som är markerade som visade
+     * innan en ny renderingsomgång. Endast frågor som faktiskt visas i UI:t
+     * kommer senare få `isDisplayed = true` igen.
+     */
+    clearDisplayedFromStep: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /**
+     * Sätter `isDisplayed = true` för en specifik fråga i global state.
+     */
     setQuestionDisplayed: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /** Tar bort svar på frågor framåt i formuläret som är beroende av en
+     * specifik fråga som har ändrats.
+     */
     resetDependentAnswersForward: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
 }, string, string, _reduxjs_toolkit.SliceSelectors<IFormState>>;
+/**
+ * Skapar ett set av selectors för formulärets globala state.
+
+ */
 declare const makeFormSelectors: <TState>(selectSlice: (state: TState) => IFormState) => {
     selectFormState: (state: TState) => IFormState;
     selectIsFormLoaded: (state: TState) => boolean;
@@ -609,40 +650,32 @@ interface Question {
     [key: string]: any;
 }
 interface QuestionGroupProps {
-    /**
-     * Alla frågor som ingår i den här gruppen.
-     * Första frågan används som "bärare" av felstatus och obligatorisk-status
-     * när wrappern är ett fieldset.
-     */
     questions: Question[];
-    /**
-     * Vilket HTML-element gruppen ska renderas i (t.ex. fieldset för flera inputs).
-     */
     wrapperElement?: WrapperElement;
-    /**
-     * Texten som visas i <legend> när wrapperElement är 'fieldset'.
-     */
     legendLabel?: string;
-    /**
-     * Aktivt språk, används för att rendera t.ex. texter i QuestionRenderer.
-     */
     activatedLanguage: string;
-    /**
-     * Om true visas komponenten i gransknings-/preview-läge.
-     */
     showPreview?: boolean;
-    /**
-     * Callback som anropas när en fråga ändras.
-     * Skickar med både frågeobjektet och själva eventet.
-     */
     handleQuestionInputChange: (question: Question, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
-    /**
-     * Anropas när en fråga visas för att markera den som "displayed"
-     * i global state.
-     */
     markQuestionAsDisplayed: (question: Question) => void;
 }
 
+/**
+ * Komponenten ansvarar för att rendera en grupp av frågor med valfri wrapper:
+ * ('fieldset', 'section', 'div', eller 'none')
+ *
+ * @param {Question[]} questions                    Alla frågor i den här gruppen.
+ *                                                  Första frågan används som "bärare" av valideringsattribut
+ *                                                  när wrappern är ett fieldset.
+ * @param {WrapperElement} wrapperElement           Vilket HTML-element gruppen ska renderas i
+ *                                                  ('fieldset' | 'section' | 'div' | 'none').
+ * @param {string} legendLabel                      Texten som visas i legend när wrapperElement är 'fieldset'.
+ * @param {string} activatedLanguage                Applikationens aktiva språk.
+ * @param {boolean} showPreview                     Om true visas frågorna i gransknings-/preview-läge.
+ * @param {Function} handleQuestionInputChange      Callback som anropas när en fråga ändras.
+ *                                                  Skickar med både frågeobjektet och eventet.
+ * @param {Function} props.markQuestionAsDisplayed  Anropas när en fråga visas för att markera den som "displayed"
+ *                                                  i globalt state.
+ */
 declare const QuestionGroup: React$1.FC<QuestionGroupProps>;
 
 interface CookieBannerProps {
@@ -723,14 +756,36 @@ interface StartApplicationButtonProps {
 declare const StartApplicationButton: React$1.FC<StartApplicationButtonProps>;
 
 interface StepperButtonsProps {
-    languageSupported?: any;
-    handleActiveStep: (activeStep: number) => void;
-    forwardButtonHandler?: (e: any) => void;
-    submitButtonHandler?: (e: any) => void;
-    arraySteps?: any[];
+    globalLanguageState?: any;
+    changeStepHandler: (activeStep: number) => void;
+    nextStepButtonHandler?: (e: any) => void;
+    onSubmitHandler?: (e: any) => void;
+    steps?: any[];
     activeStep: number;
 }
 
+/**
+ * Renderar navigationsknappar för steg-navigering i ett flerstegsformulär.
+ *
+ * Funktionalitet:
+ * Visar en "Tillbaka"-knapp när activeStep > 0.
+ * Visar "Nästa"-knappen fram tills sista steget.
+ * Byter "Nästa"-knappen till "Skicka" vid sista steget.
+ *
+ * @param {Object} globalLanguageState          Objekt med språksträngar för knapparna.
+ *                                              Förväntas innehålla: backButton, forwardButton, sendButton.
+ *
+ * @param {Function} changeStepHandler          Callback när användaren går bakåt i stegen.
+ *
+ * @param {Function} nextStepButtonHandler      Callback när användaren går till nästa steg.
+ *
+ * @param {Function} onSubmitHandler            Callback när sista steget nås och formuläret ska skickas in.
+ *
+ * @param {Array} steps                         Lista över alla steg i formuläret.
+ *                                              Används för att räkna ut sista stegnumret.
+ *
+ * @param {number} activeStep                   Det aktuella steget i flerstegsformuläret.
+ */
 declare const StepperButtons: FC<StepperButtonsProps>;
 
 interface StepperProps {
@@ -741,20 +796,29 @@ interface StepperProps {
 declare const Stepper: FC<StepperProps>;
 
 interface ValidationErrorSummaryListProps {
-    formQuestions: any[];
+    questions: any[];
     activatedLanguage: string;
-    validationErrorsList: any[];
-    summaryText?: string;
+    validationErrorsList: number[];
 }
 
+/**
+ * Renderar en summering av valideringsfel.
+ *
+ * @param validationErrorsList Lista av fråge-id:n som har valideringsfel.
+ * @param questions            Alla frågor i formuläret (används för att hitta labels m.m.).
+ * @param activatedLanguage    Aktivt språk.
+ */
 declare const ValidationErrorSummaryList: React$1.FC<ValidationErrorSummaryListProps>;
 
 interface FormStatusMessagesProps {
     formStatus: string;
 }
 /**
- * Visar statusmeddelanden för formulär på ett tillgängligt sätt.
- * Använder aria-live-regioner för att informera användare med skärmläsare.
+ * Visar ett error-meddelande om formuläret misslyckas att skicka in, dvs. status är
+ * failed. Läser upp att formuläret laddas för skärmläsare när status är loading.
+ *
+ * @param {string} formStatus Nuvarande status för formuläret.
+ *
  */
 declare const FormStatusMessagesScreenReader: React$1.FC<FormStatusMessagesProps>;
 

package/dist/index.d.ts

@@ -164,12 +164,12 @@ declare const AddFiles: FC<AddFilesProps>;
 /**
  * Kontrollerar om en fråga har ett valideringsfel baserat på dess egenskaper och valideringstyper.
  *
- * @param questionObject - Den fråga som ska kontrolleras.
- * @param arrayOfQuestionObjects - Alla frågor i formuläret (behövs för gruppvalideringar).
+ * @param question - Den fråga som ska kontrolleras.
+ * @param questions - Alla frågor i formuläret (behövs för gruppvalideringar).
  * @returns `true` om frågan har ett valideringsfel, annars `false`.
  *
  */
-declare const hasQuestionValidationError: (questionObject: any, arrayOfQuestionObjects: any[]) => boolean;
+declare const hasQuestionValidationError: (question: any, questions: any[]) => boolean;
 
 interface TranslatedAnswers {
     [questionId: string]: {
@@ -244,17 +244,22 @@ declare const isQuestionDependencySatisfied: (data: any[], question: any) => boo
 declare const updateQuestionsAndCategoriesVisibilityAndErrors: (questions: IQuestion[], validationErrorsList: number[]) => any[];
 
 /**
- * Går igenom alla synliga frågor och returnerar
+ * Går igenom alla synliga frågor i aktuella steget och returnerar
  * en lista med fråge-ID:n som har valideringsfel.
  *
- * Endast frågor som är markerade som `visible` och som returnerar `true`
- * från `QuestionHasValidationError()` inkluderas i resultatet.
+ * Endast frågor som är markerade som `visible` och som inte
+ * valideras korrekt enligt config inkluderas i resultatet.
+ *
+ * @param {Object} currentStepQuestions Aktuella steget (stepObjekt) med alla dess kategorier,
+ *                                      questionGroups och questions.
+ *
+ * @param {Array} questions             En lista med alla frågor i formuläret.
+ *                                      Används för att avgöra om en fråga validerar
+ *                                      korrekt utifrån hela frågedatat.
  *
- * @param data - Fyll på...
- * @param formQuestion - Fyll på...
  * @returns En array med ID:n (`number[]`) för frågor som har valideringsfel.
  */
-declare function findVisibleQuestionsWithValidationErrors(data: any, formQuestion: any): number[];
+declare function findVisibleQuestionsWithValidationErrors(currentStepQuestions: any, questions: any): number[];
 
 /**
  * Bygger upp en hierarkisk datastruktur för formuläret, grupperad per steg, kategori och frågegrupp.
@@ -266,8 +271,8 @@ declare function findVisibleQuestionsWithValidationErrors(data: any, formQuestio
  *
  * Dessutom uppdateras frågor med `visible` baserat på dess beroende till andra frågor och `hasValidationError` baserat på aktuell valideringsstatus.
  *
- * @param questions - Alla frågor i formuläret (`IQuestion[]`).
- * @param steps - Lista över alla steg i formuläret (`IStepObject[]`).
+ * @param questions - Alla frågor i formuläret.
+ * @param steps - Lista över alla steg i formuläret.
  * @param validationErrorsList - Lista med fråge-ID:n som har valideringsfel.
  * @returns En lista av stegobjekt med tillhörande kategorier och grupper.
  *
@@ -353,19 +358,55 @@ declare const makeglobalLanguageSelectors: <TState>(selectSlice: (state: TState)
     };
 };
 
+/**
+ * createFormSlice skapar ett Redux-slice som hanterar allt globalt state
+ * kopplat till formuläret såsom applicationContent, steps och questions
+ */
 declare const createFormSlice: (initialState: IFormState, options?: {
     name?: string;
     extraReducers?: (builder: ActionReducerMapBuilder<IFormState>) => void;
 }) => _reduxjs_toolkit.Slice<IFormState, {
+    /**
+     * Laddar in eller uppdaterar applikationens övergripande textdata och metadata i.
+     * global state. Sätter även formLoaded = true när innehållet är färdiginläst.
+     */
     setApplicationContent: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /**
+     * Laddar in eller uppdaterar step-data i global state.
+     */
     setStep: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /**
+     * Laddar in eller uppdaterar question-data i global state.
+     */
     setQuestion: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /**
+     * Uppdaterar svaret (answer) för en specifik fråga i global state.
+     */
     updateAnswer: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /** Uppdaterar filer (files) för en specifik fråga i global state */
     addFiles: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
-    hideQuestionsFromStep: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /**
+     * Sätter `isDisplayed = false` på alla frågor vars stegnummer är
+     * större än eller lika med det aktiva steget.
+     *
+     * Används för att nollställa vilka frågor som är markerade som visade
+     * innan en ny renderingsomgång. Endast frågor som faktiskt visas i UI:t
+     * kommer senare få `isDisplayed = true` igen.
+     */
+    clearDisplayedFromStep: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /**
+     * Sätter `isDisplayed = true` för en specifik fråga i global state.
+     */
     setQuestionDisplayed: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
+    /** Tar bort svar på frågor framåt i formuläret som är beroende av en
+     * specifik fråga som har ändrats.
+     */
     resetDependentAnswersForward: (state: immer.WritableDraft<IFormState>, action: PayloadAction<any>) => void;
 }, string, string, _reduxjs_toolkit.SliceSelectors<IFormState>>;
+/**
+ * Skapar ett set av selectors för formulärets globala state.
+
+ */
 declare const makeFormSelectors: <TState>(selectSlice: (state: TState) => IFormState) => {
     selectFormState: (state: TState) => IFormState;
     selectIsFormLoaded: (state: TState) => boolean;
@@ -609,40 +650,32 @@ interface Question {
     [key: string]: any;
 }
 interface QuestionGroupProps {
-    /**
-     * Alla frågor som ingår i den här gruppen.
-     * Första frågan används som "bärare" av felstatus och obligatorisk-status
-     * när wrappern är ett fieldset.
-     */
     questions: Question[];
-    /**
-     * Vilket HTML-element gruppen ska renderas i (t.ex. fieldset för flera inputs).
-     */
     wrapperElement?: WrapperElement;
-    /**
-     * Texten som visas i <legend> när wrapperElement är 'fieldset'.
-     */
     legendLabel?: string;
-    /**
-     * Aktivt språk, används för att rendera t.ex. texter i QuestionRenderer.
-     */
     activatedLanguage: string;
-    /**
-     * Om true visas komponenten i gransknings-/preview-läge.
-     */
     showPreview?: boolean;
-    /**
-     * Callback som anropas när en fråga ändras.
-     * Skickar med både frågeobjektet och själva eventet.
-     */
     handleQuestionInputChange: (question: Question, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
-    /**
-     * Anropas när en fråga visas för att markera den som "displayed"
-     * i global state.
-     */
     markQuestionAsDisplayed: (question: Question) => void;
 }
 
+/**
+ * Komponenten ansvarar för att rendera en grupp av frågor med valfri wrapper:
+ * ('fieldset', 'section', 'div', eller 'none')
+ *
+ * @param {Question[]} questions                    Alla frågor i den här gruppen.
+ *                                                  Första frågan används som "bärare" av valideringsattribut
+ *                                                  när wrappern är ett fieldset.
+ * @param {WrapperElement} wrapperElement           Vilket HTML-element gruppen ska renderas i
+ *                                                  ('fieldset' | 'section' | 'div' | 'none').
+ * @param {string} legendLabel                      Texten som visas i legend när wrapperElement är 'fieldset'.
+ * @param {string} activatedLanguage                Applikationens aktiva språk.
+ * @param {boolean} showPreview                     Om true visas frågorna i gransknings-/preview-läge.
+ * @param {Function} handleQuestionInputChange      Callback som anropas när en fråga ändras.
+ *                                                  Skickar med både frågeobjektet och eventet.
+ * @param {Function} props.markQuestionAsDisplayed  Anropas när en fråga visas för att markera den som "displayed"
+ *                                                  i globalt state.
+ */
 declare const QuestionGroup: React$1.FC<QuestionGroupProps>;
 
 interface CookieBannerProps {
@@ -723,14 +756,36 @@ interface StartApplicationButtonProps {
 declare const StartApplicationButton: React$1.FC<StartApplicationButtonProps>;
 
 interface StepperButtonsProps {
-    languageSupported?: any;
-    handleActiveStep: (activeStep: number) => void;
-    forwardButtonHandler?: (e: any) => void;
-    submitButtonHandler?: (e: any) => void;
-    arraySteps?: any[];
+    globalLanguageState?: any;
+    changeStepHandler: (activeStep: number) => void;
+    nextStepButtonHandler?: (e: any) => void;
+    onSubmitHandler?: (e: any) => void;
+    steps?: any[];
     activeStep: number;
 }
 
+/**
+ * Renderar navigationsknappar för steg-navigering i ett flerstegsformulär.
+ *
+ * Funktionalitet:
+ * Visar en "Tillbaka"-knapp när activeStep > 0.
+ * Visar "Nästa"-knappen fram tills sista steget.
+ * Byter "Nästa"-knappen till "Skicka" vid sista steget.
+ *
+ * @param {Object} globalLanguageState          Objekt med språksträngar för knapparna.
+ *                                              Förväntas innehålla: backButton, forwardButton, sendButton.
+ *
+ * @param {Function} changeStepHandler          Callback när användaren går bakåt i stegen.
+ *
+ * @param {Function} nextStepButtonHandler      Callback när användaren går till nästa steg.
+ *
+ * @param {Function} onSubmitHandler            Callback när sista steget nås och formuläret ska skickas in.
+ *
+ * @param {Array} steps                         Lista över alla steg i formuläret.
+ *                                              Används för att räkna ut sista stegnumret.
+ *
+ * @param {number} activeStep                   Det aktuella steget i flerstegsformuläret.
+ */
 declare const StepperButtons: FC<StepperButtonsProps>;
 
 interface StepperProps {
@@ -741,20 +796,29 @@ interface StepperProps {
 declare const Stepper: FC<StepperProps>;
 
 interface ValidationErrorSummaryListProps {
-    formQuestions: any[];
+    questions: any[];
     activatedLanguage: string;
-    validationErrorsList: any[];
-    summaryText?: string;
+    validationErrorsList: number[];
 }
 
+/**
+ * Renderar en summering av valideringsfel.
+ *
+ * @param validationErrorsList Lista av fråge-id:n som har valideringsfel.
+ * @param questions            Alla frågor i formuläret (används för att hitta labels m.m.).
+ * @param activatedLanguage    Aktivt språk.
+ */
 declare const ValidationErrorSummaryList: React$1.FC<ValidationErrorSummaryListProps>;
 
 interface FormStatusMessagesProps {
     formStatus: string;
 }
 /**
- * Visar statusmeddelanden för formulär på ett tillgängligt sätt.
- * Använder aria-live-regioner för att informera användare med skärmläsare.
+ * Visar ett error-meddelande om formuläret misslyckas att skicka in, dvs. status är
+ * failed. Läser upp att formuläret laddas för skärmläsare när status är loading.
+ *
+ * @param {string} formStatus Nuvarande status för formuläret.
+ *
  */
 declare const FormStatusMessagesScreenReader: React$1.FC<FormStatusMessagesProps>;