optimized-react-component-library-xyz123 0.1.50 → 0.1.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1,7 +1,6 @@
1
1
  /* src/NewInputComponentStandard/RadioMultipleStandard/RadioMultipleStandard.css */
2
2
  /* src/NewInputComponentStandard/MultipleCheckboxesStandard/MultipleCheckboxesStandard.css */
3
3
  /* src/NewInputComponentStandard/TextAreaStandard/TextAreaStandard.css */
4
- /* src/NewInputComponentStandard/TextFieldStandard/TextFieldStandard.css */
5
4
  /* src/NewInputComponentStandard/FilesUploadStandard/FilesUploadStandard.css */
6
5
  .files-upload {
7
6
  width: 100%;
package/dist/index.d.mts CHANGED
@@ -89,6 +89,9 @@ interface IQuestionExtraAttribute {
89
89
  showTextAreaCounter?: boolean;
90
90
  hideValidationMessage?: boolean;
91
91
  hideTextCounter?: boolean;
92
+ inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
93
+ spellCheck?: boolean;
94
+ autoCapitalize?: string;
92
95
  }
93
96
  interface IStepQuestionData {
94
97
  step: number;
package/dist/index.d.ts CHANGED
@@ -89,6 +89,9 @@ interface IQuestionExtraAttribute {
89
89
  showTextAreaCounter?: boolean;
90
90
  hideValidationMessage?: boolean;
91
91
  hideTextCounter?: boolean;
92
+ inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
93
+ spellCheck?: boolean;
94
+ autoCapitalize?: string;
92
95
  }
93
96
  interface IStepQuestionData {
94
97
  step: number;
package/dist/index.js CHANGED
@@ -78,11 +78,9 @@ var InputRadio = ({ question, isTouched, showPreview = false }) => {
78
78
  !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pts-root-question pts-radioMultiple-container", id: questionId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
79
79
  "fieldset",
80
80
  {
81
- role: "radiogroup",
82
- "aria-labelledby": `label-${groupId}`,
83
- "aria-invalid": question.hasValidationError,
81
+ "aria-invalid": question.hasValidationError ? true : void 0,
82
+ "aria-describedby": question.hasValidationError ? errorId : void 0,
84
83
  "aria-errormessage": question.hasValidationError ? errorId : void 0,
85
- "aria-required": question.isQuestionMandatory || void 0,
86
84
  children: [
87
85
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("legend", { id: `label-${groupId}`, children: [
88
86
  question.questionLabel,
@@ -98,7 +96,8 @@ var InputRadio = ({ question, isTouched, showPreview = false }) => {
98
96
  id: `${groupId}-option-${index}`,
99
97
  value: option.value,
100
98
  checked: question.answer === option.value,
101
- onChange: handleInputChange
99
+ onChange: handleInputChange,
100
+ required: question.isQuestionMandatory
102
101
  },
103
102
  index
104
103
  ),
@@ -106,8 +105,8 @@ var InputRadio = ({ question, isTouched, showPreview = false }) => {
106
105
  " "
107
106
  ] }, index)),
108
107
  question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
109
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
110
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-label": "Felmeddelande.", className: "errorText", children: question.validationDefaultMessesege })
108
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
109
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
111
110
  ] })
112
111
  ]
113
112
  }
@@ -165,8 +164,8 @@ var MultipleCheckboxes = ({
165
164
  isTouched(e, question);
166
165
  };
167
166
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
168
- !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { id: questionId, className: "pts-root-question pts-multipleCheckboxes-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { role: "group", "aria-labelledby": `label-${questionId}`, children: [
169
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h3", { id: `label-${questionId}`, children: [
167
+ !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { id: questionId, className: "pts-root-question pts-multipleCheckboxes-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("fieldset", { children: [
168
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("legend", { id: `label-${questionId}`, children: [
170
169
  question.questionLabel,
171
170
  " ",
172
171
  question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" }),
@@ -178,17 +177,16 @@ var MultipleCheckboxes = ({
178
177
  "input",
179
178
  {
180
179
  type: "checkbox",
181
- name: `${question.id}-option-${index}`,
180
+ name: `${question.id}-option`,
182
181
  id: `${question.id}-option-${index}`,
183
182
  value: option.label,
184
183
  checked: checkedValues.includes(option.label),
185
184
  onChange: (e) => handleInputChange(e, option.label),
186
185
  className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0
187
- },
188
- index
186
+ }
189
187
  ),
190
188
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: `${question.id}-option-${index}`, children: option.label })
191
- ] }) })) })
189
+ ] }) }, index)) })
192
190
  ] }) }),
193
191
  " ",
194
192
  showPreview && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevieMultipleCheckboxes, { activatedLanguage, question })
@@ -316,7 +314,7 @@ var TextFieldStandard = ({
316
314
  showPreview = false,
317
315
  activatedLanguage
318
316
  }) => {
319
- var _a, _b, _c, _d, _e, _f, _g;
317
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
320
318
  const questionId = `question-${question.id}`;
321
319
  const inputId = `textField-${question.id}`;
322
320
  const aboutId = `about-${question.id}`;
@@ -349,23 +347,26 @@ var TextFieldStandard = ({
349
347
  {
350
348
  type: (_c = (_b = question.questionExtraAttribute) == null ? void 0 : _b.inputType) != null ? _c : "text",
351
349
  autoComplete: (_e = (_d = question.questionExtraAttribute) == null ? void 0 : _d.autoComplete) != null ? _e : void 0,
350
+ inputMode: (_g = (_f = question.questionExtraAttribute) == null ? void 0 : _f.inputMode) != null ? _g : void 0,
352
351
  name: `question-name-${question.id}`,
353
352
  className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
354
353
  onChange: (e) => isTouched(e, question),
355
354
  value: question.answer,
356
- maxLength: ((_f = question.questionExtraAttribute) == null ? void 0 : _f.answerMaxLength) || defaultMaxLength,
355
+ maxLength: ((_h = question.questionExtraAttribute) == null ? void 0 : _h.answerMaxLength) || defaultMaxLength,
357
356
  id: inputId,
358
- disabled: (_g = question.questionExtraAttribute) == null ? void 0 : _g.disabled,
357
+ disabled: (_i = question.questionExtraAttribute) == null ? void 0 : _i.disabled,
359
358
  required: question.isQuestionMandatory,
360
359
  "aria-required": question.isQuestionMandatory,
361
360
  "aria-describedby": [question.aboutText ? aboutId : null, question.hasValidationError ? errorId : null].filter(Boolean).join(" ") || void 0,
362
361
  "aria-invalid": question.hasValidationError,
363
- "aria-errormessage": question.hasValidationError ? errorId : void 0
362
+ "aria-errormessage": question.hasValidationError ? errorId : void 0,
363
+ spellCheck: (_k = (_j = question.questionExtraAttribute) == null ? void 0 : _j.spellCheck) != null ? _k : void 0,
364
+ autoCapitalize: (_m = (_l = question.questionExtraAttribute) == null ? void 0 : _l.autoCapitalize) != null ? _m : void 0
364
365
  }
365
366
  ),
366
367
  question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
367
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
368
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-label": "Felmeddelande.", className: "errorText", children: question.validationDefaultMessesege })
368
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
369
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "errorText", children: question.validationDefaultMessesege })
369
370
  ] })
370
371
  ]
371
372
  }
@@ -1731,10 +1732,10 @@ var RenderQuestionGroup = ({
1731
1732
  "fieldset",
1732
1733
  {
1733
1734
  className: "pts-root-question-group-fieldset",
1734
- "aria-required": questionArray[0].isQuestionMandatory,
1735
- "aria-invalid": questionArray[0].hasValidationError,
1736
- "aria-errormessage": questionArray[0].questionId + "-error",
1737
- "aria-describedby": questionArray[0].questionId + "-error",
1735
+ "aria-required": questionArray[0].isQuestionMandatory || void 0,
1736
+ "aria-invalid": questionArray[0].hasValidationError || void 0,
1737
+ "aria-errormessage": questionArray[0].hasValidationError ? `${questionArray[0].id}-error` : void 0,
1738
+ "aria-describedby": questionArray[0].hasValidationError ? `${questionArray[0].id}-error` : void 0,
1738
1739
  children: [
1739
1740
  legend && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("legend", { children: [
1740
1741
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: legend }),
@@ -1743,10 +1744,10 @@ var RenderQuestionGroup = ({
1743
1744
  questionArray[0].validationDefaultMessesege
1744
1745
  ] })
1745
1746
  ] }),
1746
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pts-root-error", id: questionArray[0].questionId + "-error", children: questionArray[0].hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
1747
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
1748
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-label": "Felmeddelande.", className: "errorText", children: questionArray[0].validationDefaultMessesege })
1749
- ] }) }),
1747
+ questionArray[0].hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "pts-root-error", id: questionArray[0].id + "-error", children: [
1748
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
1749
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "errorText", children: questionArray[0].validationDefaultMessesege })
1750
+ ] }),
1750
1751
  questions
1751
1752
  ]
1752
1753
  }
package/dist/index.mjs CHANGED
@@ -13,11 +13,9 @@ var InputRadio = ({ question, isTouched, showPreview = false }) => {
13
13
  !showPreview && question.visible && /* @__PURE__ */ jsx("div", { className: "pts-root-question pts-radioMultiple-container", id: questionId, children: /* @__PURE__ */ jsxs(
14
14
  "fieldset",
15
15
  {
16
- role: "radiogroup",
17
- "aria-labelledby": `label-${groupId}`,
18
- "aria-invalid": question.hasValidationError,
16
+ "aria-invalid": question.hasValidationError ? true : void 0,
17
+ "aria-describedby": question.hasValidationError ? errorId : void 0,
19
18
  "aria-errormessage": question.hasValidationError ? errorId : void 0,
20
- "aria-required": question.isQuestionMandatory || void 0,
21
19
  children: [
22
20
  /* @__PURE__ */ jsxs("legend", { id: `label-${groupId}`, children: [
23
21
  question.questionLabel,
@@ -33,7 +31,8 @@ var InputRadio = ({ question, isTouched, showPreview = false }) => {
33
31
  id: `${groupId}-option-${index}`,
34
32
  value: option.value,
35
33
  checked: question.answer === option.value,
36
- onChange: handleInputChange
34
+ onChange: handleInputChange,
35
+ required: question.isQuestionMandatory
37
36
  },
38
37
  index
39
38
  ),
@@ -41,8 +40,8 @@ var InputRadio = ({ question, isTouched, showPreview = false }) => {
41
40
  " "
42
41
  ] }, index)),
43
42
  question.hasValidationError && /* @__PURE__ */ jsxs("div", { className: "pts-root-error", id: errorId, children: [
44
- /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
45
- /* @__PURE__ */ jsx("span", { "aria-label": "Felmeddelande.", className: "errorText", children: question.validationDefaultMessesege })
43
+ /* @__PURE__ */ jsx("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
44
+ /* @__PURE__ */ jsx("span", { className: "errorText", children: question.validationDefaultMessesege })
46
45
  ] })
47
46
  ]
48
47
  }
@@ -100,8 +99,8 @@ var MultipleCheckboxes = ({
100
99
  isTouched(e, question);
101
100
  };
102
101
  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
103
- !showPreview && question.visible && /* @__PURE__ */ jsx2("div", { id: questionId, className: "pts-root-question pts-multipleCheckboxes-container", children: /* @__PURE__ */ jsxs2("section", { role: "group", "aria-labelledby": `label-${questionId}`, children: [
104
- /* @__PURE__ */ jsxs2("h3", { id: `label-${questionId}`, children: [
102
+ !showPreview && question.visible && /* @__PURE__ */ jsx2("div", { id: questionId, className: "pts-root-question pts-multipleCheckboxes-container", children: /* @__PURE__ */ jsxs2("fieldset", { children: [
103
+ /* @__PURE__ */ jsxs2("legend", { id: `label-${questionId}`, children: [
105
104
  question.questionLabel,
106
105
  " ",
107
106
  question.isQuestionMandatory && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" }),
@@ -113,17 +112,16 @@ var MultipleCheckboxes = ({
113
112
  "input",
114
113
  {
115
114
  type: "checkbox",
116
- name: `${question.id}-option-${index}`,
115
+ name: `${question.id}-option`,
117
116
  id: `${question.id}-option-${index}`,
118
117
  value: option.label,
119
118
  checked: checkedValues.includes(option.label),
120
119
  onChange: (e) => handleInputChange(e, option.label),
121
120
  className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0
122
- },
123
- index
121
+ }
124
122
  ),
125
123
  /* @__PURE__ */ jsx2("label", { htmlFor: `${question.id}-option-${index}`, children: option.label })
126
- ] }) })) })
124
+ ] }) }, index)) })
127
125
  ] }) }),
128
126
  " ",
129
127
  showPreview && /* @__PURE__ */ jsx2(PrevieMultipleCheckboxes, { activatedLanguage, question })
@@ -251,7 +249,7 @@ var TextFieldStandard = ({
251
249
  showPreview = false,
252
250
  activatedLanguage
253
251
  }) => {
254
- var _a, _b, _c, _d, _e, _f, _g;
252
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
255
253
  const questionId = `question-${question.id}`;
256
254
  const inputId = `textField-${question.id}`;
257
255
  const aboutId = `about-${question.id}`;
@@ -284,23 +282,26 @@ var TextFieldStandard = ({
284
282
  {
285
283
  type: (_c = (_b = question.questionExtraAttribute) == null ? void 0 : _b.inputType) != null ? _c : "text",
286
284
  autoComplete: (_e = (_d = question.questionExtraAttribute) == null ? void 0 : _d.autoComplete) != null ? _e : void 0,
285
+ inputMode: (_g = (_f = question.questionExtraAttribute) == null ? void 0 : _f.inputMode) != null ? _g : void 0,
287
286
  name: `question-name-${question.id}`,
288
287
  className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
289
288
  onChange: (e) => isTouched(e, question),
290
289
  value: question.answer,
291
- maxLength: ((_f = question.questionExtraAttribute) == null ? void 0 : _f.answerMaxLength) || defaultMaxLength,
290
+ maxLength: ((_h = question.questionExtraAttribute) == null ? void 0 : _h.answerMaxLength) || defaultMaxLength,
292
291
  id: inputId,
293
- disabled: (_g = question.questionExtraAttribute) == null ? void 0 : _g.disabled,
292
+ disabled: (_i = question.questionExtraAttribute) == null ? void 0 : _i.disabled,
294
293
  required: question.isQuestionMandatory,
295
294
  "aria-required": question.isQuestionMandatory,
296
295
  "aria-describedby": [question.aboutText ? aboutId : null, question.hasValidationError ? errorId : null].filter(Boolean).join(" ") || void 0,
297
296
  "aria-invalid": question.hasValidationError,
298
- "aria-errormessage": question.hasValidationError ? errorId : void 0
297
+ "aria-errormessage": question.hasValidationError ? errorId : void 0,
298
+ spellCheck: (_k = (_j = question.questionExtraAttribute) == null ? void 0 : _j.spellCheck) != null ? _k : void 0,
299
+ autoCapitalize: (_m = (_l = question.questionExtraAttribute) == null ? void 0 : _l.autoCapitalize) != null ? _m : void 0
299
300
  }
300
301
  ),
301
302
  question.hasValidationError && /* @__PURE__ */ jsxs4("div", { className: "pts-root-error", id: errorId, children: [
302
- /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
303
- /* @__PURE__ */ jsx4("span", { "aria-label": "Felmeddelande.", className: "errorText", children: question.validationDefaultMessesege })
303
+ /* @__PURE__ */ jsx4("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
304
+ /* @__PURE__ */ jsx4("span", { className: "errorText", children: question.validationDefaultMessesege })
304
305
  ] })
305
306
  ]
306
307
  }
@@ -1666,10 +1667,10 @@ var RenderQuestionGroup = ({
1666
1667
  "fieldset",
1667
1668
  {
1668
1669
  className: "pts-root-question-group-fieldset",
1669
- "aria-required": questionArray[0].isQuestionMandatory,
1670
- "aria-invalid": questionArray[0].hasValidationError,
1671
- "aria-errormessage": questionArray[0].questionId + "-error",
1672
- "aria-describedby": questionArray[0].questionId + "-error",
1670
+ "aria-required": questionArray[0].isQuestionMandatory || void 0,
1671
+ "aria-invalid": questionArray[0].hasValidationError || void 0,
1672
+ "aria-errormessage": questionArray[0].hasValidationError ? `${questionArray[0].id}-error` : void 0,
1673
+ "aria-describedby": questionArray[0].hasValidationError ? `${questionArray[0].id}-error` : void 0,
1673
1674
  children: [
1674
1675
  legend && /* @__PURE__ */ jsxs12("legend", { children: [
1675
1676
  /* @__PURE__ */ jsx13("span", { children: legend }),
@@ -1678,10 +1679,10 @@ var RenderQuestionGroup = ({
1678
1679
  questionArray[0].validationDefaultMessesege
1679
1680
  ] })
1680
1681
  ] }),
1681
- /* @__PURE__ */ jsx13("div", { className: "pts-root-error", id: questionArray[0].questionId + "-error", children: questionArray[0].hasValidationError && /* @__PURE__ */ jsxs12(Fragment13, { children: [
1682
- /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
1683
- /* @__PURE__ */ jsx13("span", { "aria-label": "Felmeddelande.", className: "errorText", children: questionArray[0].validationDefaultMessesege })
1684
- ] }) }),
1682
+ questionArray[0].hasValidationError && /* @__PURE__ */ jsxs12("div", { className: "pts-root-error", id: questionArray[0].id + "-error", children: [
1683
+ /* @__PURE__ */ jsx13("span", { "aria-label": "Valideringsfel", className: "errorDot", children: "!" }),
1684
+ /* @__PURE__ */ jsx13("span", { className: "errorText", children: questionArray[0].validationDefaultMessesege })
1685
+ ] }),
1685
1686
  questions
1686
1687
  ]
1687
1688
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "optimized-react-component-library-xyz123",
3
- "version": "0.1.50",
3
+ "version": "0.1.52",
4
4
  "description": "A modern React component library using TypeScript with React 19 support.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",