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

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React$1, { FC } from 'react';
 import * as reselect from 'reselect';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction, ActionReducerMapBuilder } from '@reduxjs/toolkit';
@@ -34,7 +34,7 @@ interface IFormState {
     steps: Array<IStepObject>;
     questions: Array<IQuestion>;
     formLoaded: boolean;
-    status: 'notloaded' | 'idle' | 'loading' | 'failed' | 'success';
+    formStatus: 'notloaded' | 'idle' | 'loading' | 'failed' | 'success';
 }
 interface IOption {
     label: string;
@@ -598,7 +598,52 @@ declare const useCookieConsent: ({ cookieName, choiceKey, expiryYears, onConsent
 
 declare const QuestionRenderer: ({ question, isTouched, activatedLanguage, showPreview, }: any) => react_jsx_runtime.JSX.Element;
 
-declare const QuestionGroup: ({ questionArray, wrapper, legend, isTouched, activatedLanguage, showPreview, AddQuestionDisplayed, }: any) => react_jsx_runtime.JSX.Element;
+type WrapperElement = 'fieldset' | 'section' | 'div' | 'none';
+interface Question {
+    id: number | string;
+    visible: boolean;
+    isDisplayed: boolean;
+    isQuestionMandatory?: boolean;
+    hasValidationError?: boolean;
+    validationDefaultMessesege?: string;
+    [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;
+}
+
+declare const QuestionGroup: React$1.FC<QuestionGroupProps>;
 
 interface CookieBannerProps {
     isTouched?: any;
@@ -609,7 +654,7 @@ interface CookieBannerProps {
     rejectCookies: () => void;
 }
 
-declare const CookieBanner: React.FC<CookieBannerProps>;
+declare const CookieBanner: React$1.FC<CookieBannerProps>;
 
 interface FooterProps {
     activatedLanguage?: string;
@@ -668,14 +713,14 @@ interface EditPreviewLinkProps {
 declare const EditPreviewLink: FC<EditPreviewLinkProps>;
 
 interface StartApplicationButtonProps {
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
     label?: string;
     className?: string;
 }
 /**
  * En standardiserad knapp för att starta e-tjänsten.
  */
-declare const StartApplicationButton: React.FC<StartApplicationButtonProps>;
+declare const StartApplicationButton: React$1.FC<StartApplicationButtonProps>;
 
 interface StepperButtonsProps {
     languageSupported?: any;
@@ -702,7 +747,7 @@ interface ValidationErrorSummaryListProps {
     summaryText?: string;
 }
 
-declare const ValidationErrorSummaryList: React.FC<ValidationErrorSummaryListProps>;
+declare const ValidationErrorSummaryList: React$1.FC<ValidationErrorSummaryListProps>;
 
 interface FormStatusMessagesProps {
     formStatus: string;
@@ -711,6 +756,6 @@ interface FormStatusMessagesProps {
  * 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.
  */
-declare const FormStatusMessagesScreenReader: React.FC<FormStatusMessagesProps>;
+declare const FormStatusMessagesScreenReader: React$1.FC<FormStatusMessagesProps>;
 
 export { AddFiles as AddFilesStandard, CookieBanner, type CookieConsentConfig, EditPreviewLink as EditPreviewLinkStandard, Footer as FooterStandard, FormStatusMessagesScreenReader, Header as HeaderStandard, type IApplicationContent, type IFormState, type IOption, type IPTSLink, type IQuestion, type IQuestionExtraAttribute, type IStepObject, type IStepQuestionData, type ITextBlock, InfoOnly as InfoOnlyStandard, type LanguageSupportConfig, Modal as ModalStandard, MultipleCheckboxes as MultipleCheckboxesStandard, PrincipleOfPublicity as PrincipleOfPublicityStandard, QuestionGroup, QuestionRenderer, InputRadio as RadioMultipleStandard, SkipLink as SkipLinkStandard, StartApplicationButton, StepperButtons as StepperButtonsStandard, Stepper as StepperStandard, InputTextarea as TextAreaStandard, TextBody, TextFieldStandard, ValidationErrorSummaryList, buildStepCategoryGroupQuestionStructure, createApiDataObject, createCookieConsent, createFormSlice, createGlobalLanguageSlice, createGlobalLanguageSlice as createLanguageSlice, createFormSlice as createQuestionsSlice, findVisibleQuestionsWithValidationErrors, focusElement, getGroupCheckIds, hasQuestionValidationError, isQuestionDependencySatisfied, isScriptLoaded, makeFormSelectors, makeglobalLanguageSelectors as makeLanguageSelectors, makeFormSelectors as makeQuestionsSelectors, makeglobalLanguageSelectors, preparePreviewData, removeScriptById, toggleScriptByConsent, updateQuestionsAndCategoriesVisibilityAndErrors, useCookieConsent, useFormStatusModal, useInputMethodDetection, usePTSPageTitle };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React$1, { FC } from 'react';
 import * as reselect from 'reselect';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction, ActionReducerMapBuilder } from '@reduxjs/toolkit';
@@ -34,7 +34,7 @@ interface IFormState {
     steps: Array<IStepObject>;
     questions: Array<IQuestion>;
     formLoaded: boolean;
-    status: 'notloaded' | 'idle' | 'loading' | 'failed' | 'success';
+    formStatus: 'notloaded' | 'idle' | 'loading' | 'failed' | 'success';
 }
 interface IOption {
     label: string;
@@ -598,7 +598,52 @@ declare const useCookieConsent: ({ cookieName, choiceKey, expiryYears, onConsent
 
 declare const QuestionRenderer: ({ question, isTouched, activatedLanguage, showPreview, }: any) => react_jsx_runtime.JSX.Element;
 
-declare const QuestionGroup: ({ questionArray, wrapper, legend, isTouched, activatedLanguage, showPreview, AddQuestionDisplayed, }: any) => react_jsx_runtime.JSX.Element;
+type WrapperElement = 'fieldset' | 'section' | 'div' | 'none';
+interface Question {
+    id: number | string;
+    visible: boolean;
+    isDisplayed: boolean;
+    isQuestionMandatory?: boolean;
+    hasValidationError?: boolean;
+    validationDefaultMessesege?: string;
+    [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;
+}
+
+declare const QuestionGroup: React$1.FC<QuestionGroupProps>;
 
 interface CookieBannerProps {
     isTouched?: any;
@@ -609,7 +654,7 @@ interface CookieBannerProps {
     rejectCookies: () => void;
 }
 
-declare const CookieBanner: React.FC<CookieBannerProps>;
+declare const CookieBanner: React$1.FC<CookieBannerProps>;
 
 interface FooterProps {
     activatedLanguage?: string;
@@ -668,14 +713,14 @@ interface EditPreviewLinkProps {
 declare const EditPreviewLink: FC<EditPreviewLinkProps>;
 
 interface StartApplicationButtonProps {
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
     label?: string;
     className?: string;
 }
 /**
  * En standardiserad knapp för att starta e-tjänsten.
  */
-declare const StartApplicationButton: React.FC<StartApplicationButtonProps>;
+declare const StartApplicationButton: React$1.FC<StartApplicationButtonProps>;
 
 interface StepperButtonsProps {
     languageSupported?: any;
@@ -702,7 +747,7 @@ interface ValidationErrorSummaryListProps {
     summaryText?: string;
 }
 
-declare const ValidationErrorSummaryList: React.FC<ValidationErrorSummaryListProps>;
+declare const ValidationErrorSummaryList: React$1.FC<ValidationErrorSummaryListProps>;
 
 interface FormStatusMessagesProps {
     formStatus: string;
@@ -711,6 +756,6 @@ interface FormStatusMessagesProps {
  * 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.
  */
-declare const FormStatusMessagesScreenReader: React.FC<FormStatusMessagesProps>;
+declare const FormStatusMessagesScreenReader: React$1.FC<FormStatusMessagesProps>;
 
 export { AddFiles as AddFilesStandard, CookieBanner, type CookieConsentConfig, EditPreviewLink as EditPreviewLinkStandard, Footer as FooterStandard, FormStatusMessagesScreenReader, Header as HeaderStandard, type IApplicationContent, type IFormState, type IOption, type IPTSLink, type IQuestion, type IQuestionExtraAttribute, type IStepObject, type IStepQuestionData, type ITextBlock, InfoOnly as InfoOnlyStandard, type LanguageSupportConfig, Modal as ModalStandard, MultipleCheckboxes as MultipleCheckboxesStandard, PrincipleOfPublicity as PrincipleOfPublicityStandard, QuestionGroup, QuestionRenderer, InputRadio as RadioMultipleStandard, SkipLink as SkipLinkStandard, StartApplicationButton, StepperButtons as StepperButtonsStandard, Stepper as StepperStandard, InputTextarea as TextAreaStandard, TextBody, TextFieldStandard, ValidationErrorSummaryList, buildStepCategoryGroupQuestionStructure, createApiDataObject, createCookieConsent, createFormSlice, createGlobalLanguageSlice, createGlobalLanguageSlice as createLanguageSlice, createFormSlice as createQuestionsSlice, findVisibleQuestionsWithValidationErrors, focusElement, getGroupCheckIds, hasQuestionValidationError, isQuestionDependencySatisfied, isScriptLoaded, makeFormSelectors, makeglobalLanguageSelectors as makeLanguageSelectors, makeFormSelectors as makeQuestionsSelectors, makeglobalLanguageSelectors, preparePreviewData, removeScriptById, toggleScriptByConsent, updateQuestionsAndCategoriesVisibilityAndErrors, useCookieConsent, useFormStatusModal, useInputMethodDetection, usePTSPageTitle };

package/dist/index.js

@@ -1718,69 +1718,73 @@ var QuestionRenderer = ({
 var QuestionRenderer_default = QuestionRenderer;
 
 // src/components/question-rendering/QuestionGroup/QuestionGroup.tsx
-var import_react10 = __toESM(require("react"));
+var import_react10 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var QuestionGroup = ({
-  questionArray,
-  wrapper,
-  legend,
-  isTouched,
+  questions,
+  wrapperElement = "none",
+  legendLabel,
+  handleQuestionInputChange,
   activatedLanguage,
-  showPreview,
-  AddQuestionDisplayed
+  showPreview = false,
+  markQuestionAsDisplayed
 }) => {
+  if (!questions || questions.length === 0) {
+    return null;
+  }
+  const firstQuestion = questions[0];
   (0, import_react10.useEffect)(() => {
-    questionArray.forEach((question) => {
+    questions.forEach((question) => {
       if (question.visible && !question.isDisplayed) {
-        AddQuestionDisplayed(question);
+        markQuestionAsDisplayed(question);
       }
     });
-  }, [questionArray]);
-  const questions = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: questionArray.map((question, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react10.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  }, [questions]);
+  const groupQuestions = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: questions.map((question, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       QuestionRenderer_default,
       {
         question,
-        isTouched,
+        isTouched: handleQuestionInputChange,
         activatedLanguage,
         showPreview,
         showConfigure: !showPreview
       }
     ) }, "question-" + index);
   }) });
-  switch (wrapper) {
+  switch (wrapperElement) {
     case "fieldset":
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "fieldset",
         {
           className: "pts-root-question-group-fieldset",
-          "aria-required": questionArray[0].isQuestionMandatory || void 0,
-          "aria-invalid": questionArray[0].hasValidationError || void 0,
-          "aria-errormessage": questionArray[0].hasValidationError ? `${questionArray[0].id}-error` : void 0,
-          "aria-describedby": questionArray[0].hasValidationError ? `${questionArray[0].id}-error` : void 0,
+          "aria-required": firstQuestion.isQuestionMandatory || void 0,
+          "aria-invalid": firstQuestion.hasValidationError || void 0,
+          "aria-errormessage": firstQuestion.hasValidationError ? `${firstQuestion.id}-error` : void 0,
+          "aria-describedby": firstQuestion.hasValidationError ? `${firstQuestion.id}-error` : void 0,
           children: [
-            legend && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("legend", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pts-legend", children: legend }),
-              questionArray[0].hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "sr-only", children: [
+            legendLabel && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("legend", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pts-legend", children: legendLabel }),
+              firstQuestion.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "sr-only", children: [
                 "Valideringsfel. ",
-                questionArray[0].validationDefaultMessesege
+                firstQuestion.validationDefaultMessesege
               ] })
             ] }),
-            questionArray[0].hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "pts-root-error", id: questionArray[0].id + "-error", children: [
+            firstQuestion.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "pts-root-error", id: firstQuestion.id + "-error", children: [
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "errorText", children: questionArray[0].validationDefaultMessesege })
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "errorText", children: firstQuestion.validationDefaultMessesege })
             ] }),
-            questions
+            groupQuestions
           ]
         }
       );
     case "section":
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("section", { className: "pts-root-question-group-section", children: questions });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("section", { className: "pts-root-question-group-section", children: groupQuestions });
     case "div":
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pts-root-question-group-div", children: questions });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pts-root-question-group-div", children: groupQuestions });
     case "none":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react10.default.Fragment, { children: questions });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react10.Fragment, { children: groupQuestions });
   }
 };
 var QuestionGroup_default = QuestionGroup;