optimized-react-component-library-xyz123 0.1.22 → 0.1.24

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.
Files changed (5) hide show
  1. package/dist/index.d.mts +1 -1
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +42 -71
  4. package/dist/index.mjs +42 -71
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -83,7 +83,7 @@ interface IQuestion {
83
83
  interface IQuestionExtraAttribute {
84
84
  answerMaxLength?: number;
85
85
  disabled?: boolean;
86
- autoComplete?: boolean;
86
+ autoComplete?: string;
87
87
  inputType?: string;
88
88
  showTextAreaCounter?: boolean;
89
89
  hideValidationMessage?: boolean;
package/dist/index.d.ts CHANGED
@@ -83,7 +83,7 @@ interface IQuestion {
83
83
  interface IQuestionExtraAttribute {
84
84
  answerMaxLength?: number;
85
85
  disabled?: boolean;
86
- autoComplete?: boolean;
86
+ autoComplete?: string;
87
87
  inputType?: string;
88
88
  showTextAreaCounter?: boolean;
89
89
  hideValidationMessage?: boolean;
package/dist/index.js CHANGED
@@ -135,9 +135,6 @@ var MultipleCheckboxes = ({
135
135
  }) => {
136
136
  var _a;
137
137
  const questionId = `question-${question.id}`;
138
- const groupId = `checkbox-group-${question.id}`;
139
- const helpTextId = `help-text-${question.id}`;
140
- const errorId = `error-text-${question.id}`;
141
138
  const [checkedValues, setCheckedValues] = (0, import_react.useState)([]);
142
139
  (0, import_react.useEffect)(() => {
143
140
  var _a2;
@@ -159,65 +156,32 @@ var MultipleCheckboxes = ({
159
156
  const e = { target: { value: updatedValues.toString() } };
160
157
  isTouched(e, question);
161
158
  };
162
- const describedByIds = [
163
- !((question.id === 100 || question.id === 101) && question.hasValidationError) && helpTextId,
164
- question.hasValidationError && errorId
165
- ].filter(Boolean).join(" ");
166
159
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
167
- !showPreview && question.visible && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id: questionId, className: "pts-root-question pts-multipleCheckboxes-container", children: [
168
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { id: helpTextId, className: "sr-only", children: [
169
- question.aboutText,
170
- ' "Felmeddelande" ',
171
- question.validationDefaultMessesege
160
+ !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: [
161
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h4", { id: `label-${questionId}`, children: [
162
+ question.questionLabel,
163
+ " ",
164
+ question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" }),
165
+ " "
172
166
  ] }),
173
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { id: errorId, className: "sr-only", children: question.validationDefaultMessesege }),
174
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
175
- "fieldset",
176
- {
177
- "aria-labelledby": `label-${groupId}`,
178
- "aria-required": question.isQuestionMandatory || void 0,
179
- "aria-invalid": question.hasValidationError,
180
- "aria-describedby": describedByIds || void 0,
181
- children: [
182
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("legend", { id: `label-${groupId}`, children: [
183
- (question.id === 200 || question.id === 205) && question.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "sr-only", children: [
184
- question.aboutText,
185
- " Felmeddelande. ",
186
- question.validationDefaultMessesege
187
- ] }),
188
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h4", { children: [
189
- question.questionLabel,
190
- " ",
191
- question.isQuestionMandatory && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" }),
192
- " "
193
- ] })
194
- ] }),
195
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { children: (_a = question.options) == null ? void 0 : _a.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
196
- " ",
197
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
198
- "input",
199
- {
200
- type: "checkbox",
201
- name: `${groupId}-option-${index}`,
202
- id: `${groupId}-option-${index}`,
203
- value: option.label,
204
- checked: checkedValues.includes(option.label),
205
- onChange: (e) => handleInputChange(e, option.label),
206
- className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
207
- "aria-describedby": index === 0 && question.hasValidationError ? `${helpTextId}` : void 0
208
- },
209
- index
210
- ),
211
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: `${groupId}-option-${index}`, children: option.label })
212
- ] }) })) }),
213
- question.hasValidationError && question.questionExtraAttribute && !question.questionExtraAttribute.hideValidationMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pts-root-error", id: errorId, children: [
214
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
215
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-label": "Felmeddelande.", className: "errorText", children: question.validationDefaultMessesege })
216
- ] })
217
- ]
218
- }
219
- )
220
- ] }),
167
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { children: (_a = question.options) == null ? void 0 : _a.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
168
+ " ",
169
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
170
+ "input",
171
+ {
172
+ type: "checkbox",
173
+ name: `${question.id}-option-${index}`,
174
+ id: `${question.id}-option-${index}`,
175
+ value: option.label,
176
+ checked: checkedValues.includes(option.label),
177
+ onChange: (e) => handleInputChange(e, option.label),
178
+ className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0
179
+ },
180
+ index
181
+ ),
182
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: `${question.id}-option-${index}`, children: option.label })
183
+ ] }) })) })
184
+ ] }) }),
221
185
  " ",
222
186
  showPreview && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevieMultipleCheckboxes, { activatedLanguage, question })
223
187
  ] });
@@ -229,13 +193,20 @@ var PrevieMultipleCheckboxes = ({
229
193
  }) => {
230
194
  var _a, _b;
231
195
  const previewId = `preview-${question.id}`;
232
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pts-question-preview pts-multipleCheckboxes-preview", id: `question-${previewId}`, children: [
233
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { id: previewId, children: (_a = question.previewLabel) != null ? _a : question.questionLabel }),
234
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pts-root-answer", children: question.answer ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { "aria-labelledby": previewId, children: (_b = question.options) == null ? void 0 : _b.filter((option) => {
235
- var _a2;
236
- return (_a2 = question.answer) == null ? void 0 : _a2.includes(option.label);
237
- }).map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: option.label }, index)) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "no-answer-preview-page", children: activatedLanguage === "en" ? "No Answer" : "Inget svar" }) })
238
- ] }) });
196
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
197
+ "div",
198
+ {
199
+ className: "pts-question-preview pts-multipleCheckboxes-preview",
200
+ id: `question-${previewId}`,
201
+ children: [
202
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { id: previewId, children: (_a = question.previewLabel) != null ? _a : question.questionLabel }),
203
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pts-root-answer", children: question.answer ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { "aria-labelledby": previewId, children: (_b = question.options) == null ? void 0 : _b.filter((option) => {
204
+ var _a2;
205
+ return (_a2 = question.answer) == null ? void 0 : _a2.includes(option.label);
206
+ }).map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: option.label }, index)) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "no-answer-preview-page", children: activatedLanguage === "en" ? "No Answer" : "Inget svar" }) })
207
+ ]
208
+ }
209
+ ) });
239
210
  };
240
211
 
241
212
  // src/NewInputComponentStandard/TextAreaStandard/TextAreaStandard.tsx
@@ -336,7 +307,7 @@ var TextFieldStandard = ({
336
307
  showPreview = false,
337
308
  activatedLanguage
338
309
  }) => {
339
- var _a, _b, _c, _d, _e, _f;
310
+ var _a, _b, _c, _d, _e, _f, _g;
340
311
  const questionId = `question-${question.id}`;
341
312
  const inputId = `textField-${question.id}`;
342
313
  const aboutId = `about-${question.id}`;
@@ -368,14 +339,14 @@ var TextFieldStandard = ({
368
339
  "input",
369
340
  {
370
341
  type: (_c = (_b = question.questionExtraAttribute) == null ? void 0 : _b.inputType) != null ? _c : "text",
371
- autoComplete: ((_d = question.questionExtraAttribute) == null ? void 0 : _d.autoComplete) ? "on" : "off",
342
+ autoComplete: (_e = (_d = question.questionExtraAttribute) == null ? void 0 : _d.autoComplete) != null ? _e : void 0,
372
343
  name: `question-name-${question.id}`,
373
344
  className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
374
345
  onChange: (e) => isTouched(e, question),
375
346
  value: question.answer,
376
- maxLength: ((_e = question.questionExtraAttribute) == null ? void 0 : _e.answerMaxLength) || defaultMaxLength,
347
+ maxLength: ((_f = question.questionExtraAttribute) == null ? void 0 : _f.answerMaxLength) || defaultMaxLength,
377
348
  id: inputId,
378
- disabled: (_f = question.questionExtraAttribute) == null ? void 0 : _f.disabled,
349
+ disabled: (_g = question.questionExtraAttribute) == null ? void 0 : _g.disabled,
379
350
  required: question.isQuestionMandatory,
380
351
  "aria-required": question.isQuestionMandatory,
381
352
  "aria-describedby": `${question.aboutText ? aboutId : ""} ${question.hasValidationError ? errorId : ""}`.trim(),
package/dist/index.mjs CHANGED
@@ -71,9 +71,6 @@ var MultipleCheckboxes = ({
71
71
  }) => {
72
72
  var _a;
73
73
  const questionId = `question-${question.id}`;
74
- const groupId = `checkbox-group-${question.id}`;
75
- const helpTextId = `help-text-${question.id}`;
76
- const errorId = `error-text-${question.id}`;
77
74
  const [checkedValues, setCheckedValues] = useState([]);
78
75
  useEffect(() => {
79
76
  var _a2;
@@ -95,65 +92,32 @@ var MultipleCheckboxes = ({
95
92
  const e = { target: { value: updatedValues.toString() } };
96
93
  isTouched(e, question);
97
94
  };
98
- const describedByIds = [
99
- !((question.id === 100 || question.id === 101) && question.hasValidationError) && helpTextId,
100
- question.hasValidationError && errorId
101
- ].filter(Boolean).join(" ");
102
95
  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
103
- !showPreview && question.visible && /* @__PURE__ */ jsxs2("div", { id: questionId, className: "pts-root-question pts-multipleCheckboxes-container", children: [
104
- /* @__PURE__ */ jsxs2("p", { id: helpTextId, className: "sr-only", children: [
105
- question.aboutText,
106
- ' "Felmeddelande" ',
107
- question.validationDefaultMessesege
96
+ !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: [
97
+ /* @__PURE__ */ jsxs2("h4", { id: `label-${questionId}`, children: [
98
+ question.questionLabel,
99
+ " ",
100
+ question.isQuestionMandatory && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" }),
101
+ " "
108
102
  ] }),
109
- /* @__PURE__ */ jsx2("p", { id: errorId, className: "sr-only", children: question.validationDefaultMessesege }),
110
- /* @__PURE__ */ jsxs2(
111
- "fieldset",
112
- {
113
- "aria-labelledby": `label-${groupId}`,
114
- "aria-required": question.isQuestionMandatory || void 0,
115
- "aria-invalid": question.hasValidationError,
116
- "aria-describedby": describedByIds || void 0,
117
- children: [
118
- /* @__PURE__ */ jsxs2("legend", { id: `label-${groupId}`, children: [
119
- (question.id === 200 || question.id === 205) && question.hasValidationError && /* @__PURE__ */ jsxs2("span", { className: "sr-only", children: [
120
- question.aboutText,
121
- " Felmeddelande. ",
122
- question.validationDefaultMessesege
123
- ] }),
124
- /* @__PURE__ */ jsxs2("h4", { children: [
125
- question.questionLabel,
126
- " ",
127
- question.isQuestionMandatory && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "pts-root-mandatoryAsterisk", children: "*" }),
128
- " "
129
- ] })
130
- ] }),
131
- /* @__PURE__ */ jsx2("ul", { children: (_a = question.options) == null ? void 0 : _a.map((option, index) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(Fragment2, { children: [
132
- " ",
133
- /* @__PURE__ */ jsx2(
134
- "input",
135
- {
136
- type: "checkbox",
137
- name: `${groupId}-option-${index}`,
138
- id: `${groupId}-option-${index}`,
139
- value: option.label,
140
- checked: checkedValues.includes(option.label),
141
- onChange: (e) => handleInputChange(e, option.label),
142
- className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
143
- "aria-describedby": index === 0 && question.hasValidationError ? `${helpTextId}` : void 0
144
- },
145
- index
146
- ),
147
- /* @__PURE__ */ jsx2("label", { htmlFor: `${groupId}-option-${index}`, children: option.label })
148
- ] }) })) }),
149
- question.hasValidationError && question.questionExtraAttribute && !question.questionExtraAttribute.hideValidationMessage && /* @__PURE__ */ jsxs2("div", { className: "pts-root-error", id: errorId, children: [
150
- /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
151
- /* @__PURE__ */ jsx2("span", { "aria-label": "Felmeddelande.", className: "errorText", children: question.validationDefaultMessesege })
152
- ] })
153
- ]
154
- }
155
- )
156
- ] }),
103
+ /* @__PURE__ */ jsx2("ul", { children: (_a = question.options) == null ? void 0 : _a.map((option, index) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(Fragment2, { children: [
104
+ " ",
105
+ /* @__PURE__ */ jsx2(
106
+ "input",
107
+ {
108
+ type: "checkbox",
109
+ name: `${question.id}-option-${index}`,
110
+ id: `${question.id}-option-${index}`,
111
+ value: option.label,
112
+ checked: checkedValues.includes(option.label),
113
+ onChange: (e) => handleInputChange(e, option.label),
114
+ className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0
115
+ },
116
+ index
117
+ ),
118
+ /* @__PURE__ */ jsx2("label", { htmlFor: `${question.id}-option-${index}`, children: option.label })
119
+ ] }) })) })
120
+ ] }) }),
157
121
  " ",
158
122
  showPreview && /* @__PURE__ */ jsx2(PrevieMultipleCheckboxes, { activatedLanguage, question })
159
123
  ] });
@@ -165,13 +129,20 @@ var PrevieMultipleCheckboxes = ({
165
129
  }) => {
166
130
  var _a, _b;
167
131
  const previewId = `preview-${question.id}`;
168
- return /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsxs2("div", { className: "pts-question-preview pts-multipleCheckboxes-preview", id: `question-${previewId}`, children: [
169
- /* @__PURE__ */ jsx2("h3", { id: previewId, children: (_a = question.previewLabel) != null ? _a : question.questionLabel }),
170
- /* @__PURE__ */ jsx2("div", { className: "pts-root-answer", children: question.answer ? /* @__PURE__ */ jsx2("ul", { "aria-labelledby": previewId, children: (_b = question.options) == null ? void 0 : _b.filter((option) => {
171
- var _a2;
172
- return (_a2 = question.answer) == null ? void 0 : _a2.includes(option.label);
173
- }).map((option, index) => /* @__PURE__ */ jsx2("li", { children: option.label }, index)) }) : /* @__PURE__ */ jsx2("span", { className: "no-answer-preview-page", children: activatedLanguage === "en" ? "No Answer" : "Inget svar" }) })
174
- ] }) });
132
+ return /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsxs2(
133
+ "div",
134
+ {
135
+ className: "pts-question-preview pts-multipleCheckboxes-preview",
136
+ id: `question-${previewId}`,
137
+ children: [
138
+ /* @__PURE__ */ jsx2("h3", { id: previewId, children: (_a = question.previewLabel) != null ? _a : question.questionLabel }),
139
+ /* @__PURE__ */ jsx2("div", { className: "pts-root-answer", children: question.answer ? /* @__PURE__ */ jsx2("ul", { "aria-labelledby": previewId, children: (_b = question.options) == null ? void 0 : _b.filter((option) => {
140
+ var _a2;
141
+ return (_a2 = question.answer) == null ? void 0 : _a2.includes(option.label);
142
+ }).map((option, index) => /* @__PURE__ */ jsx2("li", { children: option.label }, index)) }) : /* @__PURE__ */ jsx2("span", { className: "no-answer-preview-page", children: activatedLanguage === "en" ? "No Answer" : "Inget svar" }) })
143
+ ]
144
+ }
145
+ ) });
175
146
  };
176
147
 
177
148
  // src/NewInputComponentStandard/TextAreaStandard/TextAreaStandard.tsx
@@ -272,7 +243,7 @@ var TextFieldStandard = ({
272
243
  showPreview = false,
273
244
  activatedLanguage
274
245
  }) => {
275
- var _a, _b, _c, _d, _e, _f;
246
+ var _a, _b, _c, _d, _e, _f, _g;
276
247
  const questionId = `question-${question.id}`;
277
248
  const inputId = `textField-${question.id}`;
278
249
  const aboutId = `about-${question.id}`;
@@ -304,14 +275,14 @@ var TextFieldStandard = ({
304
275
  "input",
305
276
  {
306
277
  type: (_c = (_b = question.questionExtraAttribute) == null ? void 0 : _b.inputType) != null ? _c : "text",
307
- autoComplete: ((_d = question.questionExtraAttribute) == null ? void 0 : _d.autoComplete) ? "on" : "off",
278
+ autoComplete: (_e = (_d = question.questionExtraAttribute) == null ? void 0 : _d.autoComplete) != null ? _e : void 0,
308
279
  name: `question-name-${question.id}`,
309
280
  className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
310
281
  onChange: (e) => isTouched(e, question),
311
282
  value: question.answer,
312
- maxLength: ((_e = question.questionExtraAttribute) == null ? void 0 : _e.answerMaxLength) || defaultMaxLength,
283
+ maxLength: ((_f = question.questionExtraAttribute) == null ? void 0 : _f.answerMaxLength) || defaultMaxLength,
313
284
  id: inputId,
314
- disabled: (_f = question.questionExtraAttribute) == null ? void 0 : _f.disabled,
285
+ disabled: (_g = question.questionExtraAttribute) == null ? void 0 : _g.disabled,
315
286
  required: question.isQuestionMandatory,
316
287
  "aria-required": question.isQuestionMandatory,
317
288
  "aria-describedby": `${question.aboutText ? aboutId : ""} ${question.hasValidationError ? errorId : ""}`.trim(),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "optimized-react-component-library-xyz123",
3
- "version": "0.1.22",
3
+ "version": "0.1.24",
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",