optimized-react-component-library-xyz123 0.1.7 → 0.1.9

package/dist/index.d.mts

@@ -86,6 +86,7 @@ interface IQuestionExtraAttribute {
     inputType?: string;
     showTextAreaCounter?: boolean;
     hideValidationMessage?: boolean;
+    hideTextCounter?: boolean;
 }
 interface IStepQuestionData {
     step: number;
@@ -289,16 +290,11 @@ interface TextHeadlineAndBodyProps {
 
 declare const TextHeadlineAndBody: FC<TextHeadlineAndBodyProps>;
 
-interface ValidationError {
-    id: string;
-    fieldName: string;
-}
 interface ValidationErrorSummaryListProps {
     formQuestions: any[];
     activatedLanguage: string;
     validationErrorsList: any[];
     summaryText?: string;
-    onErrorClick?: (error: ValidationError) => void;
 }
 
 declare const ValidationErrorSummaryList: React.FC<ValidationErrorSummaryListProps>;

package/dist/index.d.ts

@@ -86,6 +86,7 @@ interface IQuestionExtraAttribute {
     inputType?: string;
     showTextAreaCounter?: boolean;
     hideValidationMessage?: boolean;
+    hideTextCounter?: boolean;
 }
 interface IStepQuestionData {
     step: number;
@@ -289,16 +290,11 @@ interface TextHeadlineAndBodyProps {
 
 declare const TextHeadlineAndBody: FC<TextHeadlineAndBodyProps>;
 
-interface ValidationError {
-    id: string;
-    fieldName: string;
-}
 interface ValidationErrorSummaryListProps {
     formQuestions: any[];
     activatedLanguage: string;
     validationErrorsList: any[];
     summaryText?: string;
-    onErrorClick?: (error: ValidationError) => void;
 }
 
 declare const ValidationErrorSummaryList: React.FC<ValidationErrorSummaryListProps>;

package/dist/index.js

@@ -240,8 +240,13 @@ var PrevieMultipleCheckboxes = ({
 // src/NewInputComponentStandard/TextAreaStandard/TextAreaStandard.tsx
 var import_dompurify = __toESM(require("dompurify"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var InputTextarea = ({ question, isTouched, showPreview = false, activatedLanguage }) => {
-  var _a, _b, _c, _d;
+var InputTextarea = ({
+  question,
+  isTouched,
+  showPreview = false,
+  activatedLanguage
+}) => {
+  var _a, _b, _c, _d, _e;
   const questionId = `question-${question.id}`;
   const inputId = `textarea-${question.id}`;
   const aboutId = `about-${question.id}`;
@@ -287,15 +292,15 @@ var InputTextarea = ({ question, isTouched, showPreview = false, activatedLangua
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-label": "Felmeddelande.", className: "errorDot", children: "!" }),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            !((_b = question.questionExtraAttribute) == null ? void 0 : _b.hideTextCounter) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "div",
               {
-                className: `pts-character-counter ${question.answer && (((_b = question.questionExtraAttribute) == null ? void 0 : _b.answerMaxLength) || defaultMaxLength) && question.answer.length > (((_c = question.questionExtraAttribute) == null ? void 0 : _c.answerMaxLength) || defaultMaxLength) ? "error" : ""}`,
+                className: `pts-character-counter ${question.answer && (((_c = question.questionExtraAttribute) == null ? void 0 : _c.answerMaxLength) || defaultMaxLength) && question.answer.length > (((_d = question.questionExtraAttribute) == null ? void 0 : _d.answerMaxLength) || defaultMaxLength) ? "error" : ""}`,
                 children: [
                   question.answer ? question.answer.length : 0,
                   " av",
                   " ",
-                  ((_d = question.questionExtraAttribute) == null ? void 0 : _d.answerMaxLength) || defaultMaxLength,
+                  ((_e = question.questionExtraAttribute) == null ? void 0 : _e.answerMaxLength) || defaultMaxLength,
                   " tecken"
                 ]
               }
@@ -1960,78 +1965,53 @@ var Stepper = ({ arraySteps = [], activeStep = 1 }) => {
 var StepperStandard_default = Stepper;
 
 // src/NewTextComponentStandard/ValidationErrorSummaryList/ValidationErrorSummaryList.tsx
-var import_react6 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var ValidationErrorSummaryList = ({
   validationErrorsList,
   formQuestions,
   activatedLanguage,
-  summaryText = "Du beh\xF6ver \xE5tg\xE4rda {count} {plural}",
-  onErrorClick
+  summaryText = "Du beh\xF6ver \xE5tg\xE4rda {count} {plural}"
 }) => {
-  const [validationErrors, setValidationErrors] = (0, import_react6.useState)([]);
-  const getFieldName = (errorId) => {
-    const questionId = errorId.replace("error-", "");
-    const selectors = [
-      `#label-${questionId}`,
-      `label[for*="${questionId}"]`,
-      `legend[id*="${questionId}"]`
-    ];
-    for (const selector of selectors) {
-      const element = document.querySelector(selector);
-      if (element == null ? void 0 : element.textContent) return element.textContent.trim().replace("*", "").trim();
-    }
-    return "Ok\xE4nt f\xE4lt";
-  };
-  const detectValidationErrors = () => {
-    const errors = [];
-    document.querySelectorAll("#pts-form-id .pts-root-error").forEach((container) => {
-      var _a, _b;
-      if (!container.offsetParent) return;
-      const errorText = (_b = (_a = container.querySelector(".errorText")) == null ? void 0 : _a.textContent) == null ? void 0 : _b.trim();
-      if (!errorText) return;
-      const errorId = container.id || `error-${Date.now()}`;
-      errors.push({ id: errorId, fieldName: getFieldName(errorId) });
-    });
-    setValidationErrors(errors);
-  };
-  (0, import_react6.useEffect)(detectValidationErrors, [validationErrorsList]);
-  const handleErrorClick = (error, e) => {
-    e.preventDefault();
-    if (onErrorClick) onErrorClick(error);
-    const questionId = error.id.replace("error-", "");
-    const selectors = [
-      `#radio-group-${questionId}`,
-      `input[name*="${questionId}"]`,
-      `#${questionId}`
-    ];
-    for (const selector of selectors) {
-      const element = document.querySelector(selector);
-      if (element) {
-        element.scrollIntoView();
-        try {
-          element.focus();
-        } catch {
+  console.log(formQuestions);
+  console.log(validationErrorsList);
+  function scrollToQuestion(questionId) {
+    const container = document.getElementById(`question-${questionId}`);
+    if (container) {
+      container.scrollIntoView({ behavior: "smooth", block: "center" });
+      setTimeout(() => {
+        const input = container.querySelector("input, textarea, select");
+        if (input) {
+          input.focus();
         }
-        break;
-      }
+      }, 300);
     }
-  };
-  if (!validationErrors.length) return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {});
-  const count = validationErrors.length;
+  }
+  if (!validationErrorsList.length) return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {});
+  const count = validationErrorsList.length;
   const title = summaryText.replace("{count}", count.toString()).replace("{plural}", count === 1 ? "sak" : "saker");
+  function getQuestionLabelById(id) {
+    const found = formQuestions.find((item) => item.id === id);
+    return found == null ? void 0 : found.questionLabel;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       id: "pts-form-id-error-summary",
-      role: "alert",
       className: "pts-errorSummary-container pts-root-error",
       tabIndex: -1,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { "aria-hidden": "true", className: "errorDot", children: "!" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "errorSummary-content", children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { children: validationErrors.map((error, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { href: "#", onClick: (e) => handleErrorClick(error, e), className: "errorSummary-text", children: error.fieldName }) }, error.id || i)) })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { children: validationErrorsList.map((questionId, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "a",
+            {
+              href: "#",
+              onClick: (e) => scrollToQuestion(questionId),
+              className: "errorSummary-text",
+              children: getQuestionLabelById(questionId)
+            }
+          ) }, questionId || i)) })
         ] })
       ]
     }

package/dist/index.mjs

@@ -177,8 +177,13 @@ var PrevieMultipleCheckboxes = ({
 // src/NewInputComponentStandard/TextAreaStandard/TextAreaStandard.tsx
 import DOMPurify from "dompurify";
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var InputTextarea = ({ question, isTouched, showPreview = false, activatedLanguage }) => {
-  var _a, _b, _c, _d;
+var InputTextarea = ({
+  question,
+  isTouched,
+  showPreview = false,
+  activatedLanguage
+}) => {
+  var _a, _b, _c, _d, _e;
   const questionId = `question-${question.id}`;
   const inputId = `textarea-${question.id}`;
   const aboutId = `about-${question.id}`;
@@ -224,15 +229,15 @@ var InputTextarea = ({ question, isTouched, showPreview = false, activatedLangua
               /* @__PURE__ */ jsx3("span", { "aria-label": "Felmeddelande.", className: "errorDot", children: "!" }),
               /* @__PURE__ */ jsx3("span", { className: "errorText", children: question.validationDefaultMessesege })
             ] }),
-            /* @__PURE__ */ jsxs3(
+            !((_b = question.questionExtraAttribute) == null ? void 0 : _b.hideTextCounter) && /* @__PURE__ */ jsxs3(
               "div",
               {
-                className: `pts-character-counter ${question.answer && (((_b = question.questionExtraAttribute) == null ? void 0 : _b.answerMaxLength) || defaultMaxLength) && question.answer.length > (((_c = question.questionExtraAttribute) == null ? void 0 : _c.answerMaxLength) || defaultMaxLength) ? "error" : ""}`,
+                className: `pts-character-counter ${question.answer && (((_c = question.questionExtraAttribute) == null ? void 0 : _c.answerMaxLength) || defaultMaxLength) && question.answer.length > (((_d = question.questionExtraAttribute) == null ? void 0 : _d.answerMaxLength) || defaultMaxLength) ? "error" : ""}`,
                 children: [
                   question.answer ? question.answer.length : 0,
                   " av",
                   " ",
-                  ((_d = question.questionExtraAttribute) == null ? void 0 : _d.answerMaxLength) || defaultMaxLength,
+                  ((_e = question.questionExtraAttribute) == null ? void 0 : _e.answerMaxLength) || defaultMaxLength,
                   " tecken"
                 ]
               }
@@ -1897,78 +1902,53 @@ var Stepper = ({ arraySteps = [], activeStep = 1 }) => {
 var StepperStandard_default = Stepper;
 
 // src/NewTextComponentStandard/ValidationErrorSummaryList/ValidationErrorSummaryList.tsx
-import { useState as useState4, useEffect as useEffect4 } from "react";
 import { Fragment as Fragment9, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 var ValidationErrorSummaryList = ({
   validationErrorsList,
   formQuestions,
   activatedLanguage,
-  summaryText = "Du beh\xF6ver \xE5tg\xE4rda {count} {plural}",
-  onErrorClick
+  summaryText = "Du beh\xF6ver \xE5tg\xE4rda {count} {plural}"
 }) => {
-  const [validationErrors, setValidationErrors] = useState4([]);
-  const getFieldName = (errorId) => {
-    const questionId = errorId.replace("error-", "");
-    const selectors = [
-      `#label-${questionId}`,
-      `label[for*="${questionId}"]`,
-      `legend[id*="${questionId}"]`
-    ];
-    for (const selector of selectors) {
-      const element = document.querySelector(selector);
-      if (element == null ? void 0 : element.textContent) return element.textContent.trim().replace("*", "").trim();
-    }
-    return "Ok\xE4nt f\xE4lt";
-  };
-  const detectValidationErrors = () => {
-    const errors = [];
-    document.querySelectorAll("#pts-form-id .pts-root-error").forEach((container) => {
-      var _a, _b;
-      if (!container.offsetParent) return;
-      const errorText = (_b = (_a = container.querySelector(".errorText")) == null ? void 0 : _a.textContent) == null ? void 0 : _b.trim();
-      if (!errorText) return;
-      const errorId = container.id || `error-${Date.now()}`;
-      errors.push({ id: errorId, fieldName: getFieldName(errorId) });
-    });
-    setValidationErrors(errors);
-  };
-  useEffect4(detectValidationErrors, [validationErrorsList]);
-  const handleErrorClick = (error, e) => {
-    e.preventDefault();
-    if (onErrorClick) onErrorClick(error);
-    const questionId = error.id.replace("error-", "");
-    const selectors = [
-      `#radio-group-${questionId}`,
-      `input[name*="${questionId}"]`,
-      `#${questionId}`
-    ];
-    for (const selector of selectors) {
-      const element = document.querySelector(selector);
-      if (element) {
-        element.scrollIntoView();
-        try {
-          element.focus();
-        } catch {
+  console.log(formQuestions);
+  console.log(validationErrorsList);
+  function scrollToQuestion(questionId) {
+    const container = document.getElementById(`question-${questionId}`);
+    if (container) {
+      container.scrollIntoView({ behavior: "smooth", block: "center" });
+      setTimeout(() => {
+        const input = container.querySelector("input, textarea, select");
+        if (input) {
+          input.focus();
         }
-        break;
-      }
+      }, 300);
     }
-  };
-  if (!validationErrors.length) return /* @__PURE__ */ jsx20(Fragment9, {});
-  const count = validationErrors.length;
+  }
+  if (!validationErrorsList.length) return /* @__PURE__ */ jsx20(Fragment9, {});
+  const count = validationErrorsList.length;
   const title = summaryText.replace("{count}", count.toString()).replace("{plural}", count === 1 ? "sak" : "saker");
+  function getQuestionLabelById(id) {
+    const found = formQuestions.find((item) => item.id === id);
+    return found == null ? void 0 : found.questionLabel;
+  }
   return /* @__PURE__ */ jsxs18(
     "div",
     {
       id: "pts-form-id-error-summary",
-      role: "alert",
       className: "pts-errorSummary-container pts-root-error",
       tabIndex: -1,
       children: [
         /* @__PURE__ */ jsx20("span", { "aria-hidden": "true", className: "errorDot", children: "!" }),
         /* @__PURE__ */ jsxs18("div", { className: "errorSummary-content", children: [
           /* @__PURE__ */ jsx20("h2", { children: title }),
-          /* @__PURE__ */ jsx20("ul", { children: validationErrors.map((error, i) => /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsx20("a", { href: "#", onClick: (e) => handleErrorClick(error, e), className: "errorSummary-text", children: error.fieldName }) }, error.id || i)) })
+          /* @__PURE__ */ jsx20("ul", { children: validationErrorsList.map((questionId, i) => /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsx20(
+            "a",
+            {
+              href: "#",
+              onClick: (e) => scrollToQuestion(questionId),
+              className: "errorSummary-text",
+              children: getQuestionLabelById(questionId)
+            }
+          ) }, questionId || i)) })
         ] })
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A modern React component library using TypeScript.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",