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

package/dist/index.d.mts

@@ -289,16 +289,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

@@ -289,16 +289,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

@@ -1960,78 +1960,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

@@ -1897,78 +1897,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.8",
   "description": "A modern React component library using TypeScript.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",