envoc-form 5.0.5 → 5.0.7
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/README.md +7 -7
- package/es/ConfirmBaseForm/ConfirmBaseForm.js +2 -2
- package/es/DatePicker/DatePickerGroup.js +2 -2
- package/es/Field/Field.d.ts +2 -1
- package/es/Field/Field.js +14 -6
- package/es/FieldArray/FieldArray.js +4 -4
- package/es/File/FileGroup.js +3 -3
- package/es/Form/Form.js +2 -2
- package/es/Group.js +3 -3
- package/es/Input/CheckboxGroup.js +3 -3
- package/es/Input/CheckboxInputGroup.js +2 -2
- package/es/Input/IconInputGroup.js +2 -2
- package/es/Input/InputGroup.js +2 -2
- package/es/Input/MoneyInputGroup.js +2 -2
- package/es/Input/NumberInputGroup.js +2 -2
- package/es/Input/PhoneNumberInputGroup.js +2 -2
- package/es/Input/StringInputGroup.js +2 -2
- package/es/Select/SelectGroup.js +3 -3
- package/es/StandardFormActions.js +3 -3
- package/es/SubmitFormButton.js +2 -2
- package/es/TextArea/TextAreaGroup.js +2 -2
- package/lib/ConfirmBaseForm/ConfirmBaseForm.js +2 -5
- package/lib/DatePicker/DatePickerGroup.js +2 -2
- package/lib/Field/Field.d.ts +2 -1
- package/lib/Field/Field.js +14 -6
- package/lib/FieldArray/FieldArray.js +4 -4
- package/lib/File/FileGroup.js +3 -3
- package/lib/Form/Form.js +2 -2
- package/lib/Group.js +3 -3
- package/lib/Input/CheckboxGroup.js +3 -3
- package/lib/Input/CheckboxInputGroup.js +2 -2
- package/lib/Input/IconInputGroup.js +2 -2
- package/lib/Input/InputGroup.js +2 -2
- package/lib/Input/MoneyInputGroup.js +2 -2
- package/lib/Input/NumberInputGroup.js +2 -2
- package/lib/Input/PhoneNumberInputGroup.js +2 -2
- package/lib/Input/StringInputGroup.js +2 -2
- package/lib/Select/SelectGroup.js +3 -3
- package/lib/StandardFormActions.js +3 -3
- package/lib/SubmitFormButton.js +2 -2
- package/lib/TextArea/TextAreaGroup.js +2 -2
- package/package.json +4 -4
- package/src/ConfirmBaseForm/ConfirmBaseForm.tsx +3 -3
- package/src/DatePicker/DatePickerGroup.tsx +3 -9
- package/src/Field/Field.tsx +21 -7
- package/src/FieldArray/FieldArray.tsx +4 -4
- package/src/File/FileGroup.tsx +3 -6
- package/src/Form/Form.tsx +2 -5
- package/src/Group.tsx +3 -3
- package/src/Input/CheckboxGroup.tsx +3 -3
- package/src/Input/CheckboxInputGroup.tsx +3 -3
- package/src/Input/IconInputGroup.tsx +2 -2
- package/src/Input/InputGroup.tsx +3 -9
- package/src/Input/MoneyInputGroup.tsx +2 -5
- package/src/Input/NumberInputGroup.tsx +2 -5
- package/src/Input/PhoneNumberInputGroup.tsx +2 -2
- package/src/Input/StringInputGroup.tsx +2 -5
- package/src/Select/SelectGroup.tsx +3 -3
- package/src/StandardFormActions.tsx +3 -3
- package/src/SubmitFormButton.tsx +2 -2
- package/src/TextArea/TextAreaGroup.tsx +3 -3
@@ -24,7 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
24
24
|
};
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
26
26
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
27
|
-
var
|
27
|
+
var clsx_1 = require("clsx");
|
28
28
|
var Field_1 = __importDefault(require("../Field/Field"));
|
29
29
|
var FieldNameContext_1 = require("../Field/FieldNameContext");
|
30
30
|
var useStandardField_1 = __importDefault(require("../Field/useStandardField"));
|
@@ -47,15 +47,15 @@ function FieldArray(_a) {
|
|
47
47
|
: Array.isArray(input.value)
|
48
48
|
? input.value
|
49
49
|
: [];
|
50
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array', children: [(0, jsx_runtime_1.jsxs)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-header', children: [(0, jsx_runtime_1.jsx)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-title', children: label }), (0, jsx_runtime_1.jsx)("button", { className: (0,
|
50
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array', children: [(0, jsx_runtime_1.jsxs)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-header', children: [(0, jsx_runtime_1.jsx)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-title', children: label }), (0, jsx_runtime_1.jsx)("button", { className: (0, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'add-array-item-button', (_b = {}, _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), title: "Add Item", type: "button", onClick: addItem, children: "+" })] }), (0, jsx_runtime_1.jsx)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-body', children: values.map(function (value, index) {
|
51
51
|
var _a, _b;
|
52
52
|
var itemName = "".concat(input.name, "[").concat(index, "]");
|
53
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0,
|
53
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
|
54
54
|
_a[FormDefaults_1.FormDefaults.cssClassPrefix + 'removed'] = value.isDeleted,
|
55
55
|
_a)), role: "listitem", children: [(0, jsx_runtime_1.jsx)(FieldNameContext_1.FieldNameContext.Provider, { value: itemName, children: children({
|
56
56
|
Field: Field_1.default,
|
57
57
|
FieldArray: FieldArray,
|
58
|
-
}) }), (0, jsx_runtime_1.jsx)("button", { className: (0,
|
58
|
+
}) }), (0, jsx_runtime_1.jsx)("button", { className: (0, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'remove-array-item-button', (_b = {}, _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), type: "button", title: "Remove Item", onClick: function () { return removeItem(value); }, children: "-" })] }, (value && value['form-input-array-key']) ||
|
59
59
|
(value && value['id']) ||
|
60
60
|
itemName));
|
61
61
|
}) })] }));
|
package/lib/File/FileGroup.js
CHANGED
@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
29
|
var react_1 = __importDefault(require("react"));
|
30
|
-
var
|
30
|
+
var clsx_1 = require("clsx");
|
31
31
|
var FileList_1 = __importDefault(require("./FileList"));
|
32
32
|
var FormDefaults_1 = require("../FormDefaults");
|
33
33
|
var Group_1 = __importDefault(require("../Group"));
|
34
34
|
function FileGroup(_a, ref) {
|
35
35
|
var _b;
|
36
36
|
var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, multiple = _a.multiple, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "multiple"]);
|
37
|
-
return ((0, jsx_runtime_1.jsxs)(Group_1.default, { input: input, meta: meta, label: label, helpText: helpText, className: (0,
|
37
|
+
return ((0, jsx_runtime_1.jsxs)(Group_1.default, { input: input, meta: meta, label: label, helpText: helpText, className: (0, clsx_1.clsx)(className, (_b = {}, _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'multiple'] = multiple, _b), FormDefaults_1.FormDefaults.cssClassPrefix + 'file-group'), required: required, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("input", __assign({}, input, rest, { multiple: multiple, onChange: function (e) {
|
38
38
|
var _a, _b;
|
39
39
|
if (!((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length)) {
|
40
40
|
input.onChange(undefined);
|
@@ -51,7 +51,7 @@ function FileGroup(_a, ref) {
|
|
51
51
|
input.onChange(files);
|
52
52
|
}
|
53
53
|
}
|
54
|
-
}, value: undefined, ref: ref, type: "file", className: (0,
|
54
|
+
}, value: undefined, ref: ref, type: "file", className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'file-group') })), (0, jsx_runtime_1.jsx)(FileList_1.default, { files: input.value })] }));
|
55
55
|
}
|
56
56
|
/** File upload input group. */
|
57
57
|
var FileGroupWithRef = react_1.default.forwardRef(FileGroup);
|
package/lib/Form/Form.js
CHANGED
@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
29
|
var react_1 = require("react");
|
30
|
-
var
|
30
|
+
var clsx_1 = require("clsx");
|
31
31
|
var formik_1 = require("formik");
|
32
32
|
var FocusError_1 = __importDefault(require("./FocusError"));
|
33
33
|
var FormBasedPreventNavigation_1 = __importDefault(require("./FormBasedPreventNavigation"));
|
@@ -59,7 +59,7 @@ function Form(_a) {
|
|
59
59
|
_a)));
|
60
60
|
},
|
61
61
|
}); }, [serverErrors]);
|
62
|
-
return ((0, jsx_runtime_1.jsx)(formik_1.Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: (0, jsx_runtime_1.jsx)(ServerErrorContext_1.ServerErrorContext.Provider, { value: serverErrorContextValue, children: (0, jsx_runtime_1.jsxs)(formik_1.Form, { className: (0,
|
62
|
+
return ((0, jsx_runtime_1.jsx)(formik_1.Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: (0, jsx_runtime_1.jsx)(ServerErrorContext_1.ServerErrorContext.Provider, { value: serverErrorContextValue, children: (0, jsx_runtime_1.jsxs)(formik_1.Form, { className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'form'), style: style, children: [(0, jsx_runtime_1.jsx)(FocusError_1.default, { serverErrors: serverErrorContextValue }), (0, jsx_runtime_1.jsx)(FormBasedPreventNavigation_1.default, { ignoreLostChanges: ignoreLostChanges }), children({
|
63
63
|
// hack for ref forwarding
|
64
64
|
Field: Field_1.default,
|
65
65
|
FieldArray: FieldArray_1.default,
|
package/lib/Group.js
CHANGED
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
4
|
};
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
6
6
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
7
|
-
var
|
8
|
-
var FormDefaults_1 = require("./FormDefaults");
|
7
|
+
var clsx_1 = require("clsx");
|
9
8
|
var FieldErrorScrollTarget_1 = __importDefault(require("./Field/FieldErrorScrollTarget"));
|
9
|
+
var FormDefaults_1 = require("./FormDefaults");
|
10
10
|
/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
|
11
11
|
function Group(_a) {
|
12
12
|
var _b;
|
13
13
|
var className = _a.className, children = _a.children, label = _a.label, helpText = _a.helpText, meta = _a.meta, input = _a.input, disabled = _a.disabled, required = _a.required;
|
14
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0,
|
14
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'group', (_b = {},
|
15
15
|
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
|
16
16
|
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled,
|
17
17
|
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'required'] = required,
|
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
4
|
};
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
6
6
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
7
|
-
var
|
8
|
-
var FormDefaults_1 = require("../FormDefaults");
|
7
|
+
var clsx_1 = require("clsx");
|
9
8
|
var FieldErrorScrollTarget_1 = __importDefault(require("../Field/FieldErrorScrollTarget"));
|
9
|
+
var FormDefaults_1 = require("../FormDefaults");
|
10
10
|
/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
|
11
11
|
function CheckboxGroup(_a) {
|
12
12
|
var _b;
|
13
13
|
var className = _a.className, children = _a.children, label = _a.label, helpText = _a.helpText, meta = _a.meta, input = _a.input, disabled = _a.disabled, required = _a.required, labelOnLeft = _a.labelOnLeft;
|
14
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0,
|
14
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'group', (_b = {},
|
15
15
|
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
|
16
16
|
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled,
|
17
17
|
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'required'] = required,
|
@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
29
|
var react_1 = __importDefault(require("react"));
|
30
|
-
var
|
30
|
+
var clsx_1 = require("clsx");
|
31
31
|
var CheckboxGroup_1 = __importDefault(require("./CheckboxGroup"));
|
32
32
|
var FormDefaults_1 = require("../FormDefaults");
|
33
33
|
function CheckboxInputGroup(_a, ref) {
|
34
34
|
var input = _a.input, meta = _a.meta, disabled = _a.disabled, label = _a.label, required = _a.required, helpText = _a.helpText, className = _a.className, labelOnLeft = _a.labelOnLeft, rest = __rest(_a, ["input", "meta", "disabled", "label", "required", "helpText", "className", "labelOnLeft"]);
|
35
|
-
return ((0, jsx_runtime_1.jsx)(CheckboxGroup_1.default, { input: input, meta: meta, disabled: disabled, required: required, label: label, helpText: helpText, labelOnLeft: labelOnLeft, className: (0,
|
35
|
+
return ((0, jsx_runtime_1.jsx)(CheckboxGroup_1.default, { input: input, meta: meta, disabled: disabled, required: required, label: label, helpText: helpText, labelOnLeft: labelOnLeft, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'checkbox-group', { 'label-on-left': labelOnLeft }, { 'label-on-right': !labelOnLeft }), children: (0, jsx_runtime_1.jsx)("input", __assign({}, rest, { type: "checkbox", "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'checkbox-group'), checked: input.value === true, onChange: function (e) {
|
36
36
|
input.onChange(e.target.checked);
|
37
37
|
}, disabled: disabled, required: required, onBlur: input.onBlur, id: input.id, name: input.name, ref: ref })) }));
|
38
38
|
}
|
@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
29
|
var react_1 = __importDefault(require("react"));
|
30
|
-
var
|
30
|
+
var clsx_1 = require("clsx");
|
31
31
|
var InputGroup_1 = __importDefault(require("./InputGroup"));
|
32
32
|
var FormDefaults_1 = require("../FormDefaults");
|
33
33
|
function IconInputGroup(_a, ref) {
|
34
34
|
var _b;
|
35
35
|
var icon = _a.icon, className = _a.className, rest = __rest(_a, ["icon", "className"]);
|
36
36
|
var input = rest.input;
|
37
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ icon: icon, ref: ref, className: (0,
|
37
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ icon: icon, ref: ref, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'icon-input-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
|
38
38
|
if (!e.target.value) {
|
39
39
|
input.onChange(undefined);
|
40
40
|
}
|
package/lib/Input/InputGroup.js
CHANGED
@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
29
|
var react_1 = __importDefault(require("react"));
|
30
|
-
var
|
30
|
+
var clsx_1 = require("clsx");
|
31
31
|
var FormDefaults_1 = require("../FormDefaults");
|
32
32
|
var Group_1 = __importDefault(require("../Group"));
|
33
33
|
function InputGroup(_a, ref) {
|
34
34
|
var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "onChange", "value", "icon"]);
|
35
|
-
return ((0, jsx_runtime_1.jsxs)(Group_1.default, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: (0,
|
35
|
+
return ((0, jsx_runtime_1.jsxs)(Group_1.default, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'input-group'), children: [icon, (0, jsx_runtime_1.jsx)("input", __assign({}, input, rest, { "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, value: value !== null && value !== void 0 ? value : '', onChange: onChange, ref: ref, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'input-group') }))] }));
|
36
36
|
}
|
37
37
|
/** Generic controlled `<input/>` wrapped by a `<Group/>` */
|
38
38
|
var InputGroupWithRef = react_1.default.forwardRef(InputGroup);
|
@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
29
|
var react_1 = __importDefault(require("react"));
|
30
|
-
var
|
30
|
+
var clsx_1 = require("clsx");
|
31
31
|
var InputGroup_1 = __importDefault(require("./InputGroup"));
|
32
32
|
var FormDefaults_1 = require("../FormDefaults");
|
33
33
|
function MoneyInputGroup(_a, ref) {
|
34
34
|
var parseFunc = _a.parseFunc, className = _a.className, rest = __rest(_a, ["parseFunc", "className"]);
|
35
35
|
var effectiveParse = parseFunc !== null && parseFunc !== void 0 ? parseFunc : parseFloat;
|
36
36
|
var input = rest.input;
|
37
|
-
return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref, step: 0.01, min: 0 }, rest, { type: "number", className: (0,
|
37
|
+
return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref, step: 0.01, min: 0 }, rest, { type: "number", className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'money-group'), value: input.value || '', onChange: function (e) {
|
38
38
|
if (!e.target.value) {
|
39
39
|
input.onChange(undefined);
|
40
40
|
}
|
@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
29
|
var react_1 = __importDefault(require("react"));
|
30
|
-
var
|
30
|
+
var clsx_1 = require("clsx");
|
31
31
|
var InputGroup_1 = __importDefault(require("./InputGroup"));
|
32
32
|
var FormDefaults_1 = require("../FormDefaults");
|
33
33
|
function NumberInputGroup(_a, ref) {
|
34
34
|
var parseFunc = _a.parseFunc, className = _a.className, rest = __rest(_a, ["parseFunc", "className"]);
|
35
35
|
var effectiveParse = parseFunc !== null && parseFunc !== void 0 ? parseFunc : parseFloat;
|
36
36
|
var input = rest.input;
|
37
|
-
return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref }, rest, { type: "number", className: (0,
|
37
|
+
return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref }, rest, { type: "number", className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'number-group'), value: input.value || '', onChange: function (e) {
|
38
38
|
if (!e.target.value) {
|
39
39
|
input.onChange(undefined);
|
40
40
|
}
|
@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
29
|
var react_1 = __importDefault(require("react"));
|
30
|
-
var
|
30
|
+
var clsx_1 = require("clsx");
|
31
31
|
var InputGroup_1 = __importDefault(require("./InputGroup"));
|
32
32
|
var FormDefaults_1 = require("../FormDefaults");
|
33
33
|
var normalizers_1 = require("../Normalization/normalizers");
|
@@ -35,7 +35,7 @@ function PhoneNumberInputGroup(_a, ref) {
|
|
35
35
|
var _b;
|
36
36
|
var className = _a.className, rest = __rest(_a, ["className"]);
|
37
37
|
var input = rest.input;
|
38
|
-
return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref, autoComplete: "tel-national" }, rest, { type: "text", className: (0,
|
38
|
+
return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref, autoComplete: "tel-national" }, rest, { type: "text", className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'phone-number-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
|
39
39
|
if (!e.target.value) {
|
40
40
|
input.onChange(undefined);
|
41
41
|
}
|
@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
29
|
var react_1 = __importDefault(require("react"));
|
30
|
-
var
|
30
|
+
var clsx_1 = require("clsx");
|
31
31
|
var InputGroup_1 = __importDefault(require("./InputGroup"));
|
32
32
|
var FormDefaults_1 = require("../FormDefaults");
|
33
33
|
function StringInputGroup(_a, ref) {
|
34
34
|
var _b;
|
35
35
|
var className = _a.className, rest = __rest(_a, ["className"]);
|
36
36
|
var input = rest.input;
|
37
|
-
return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref }, rest, { className: (0,
|
37
|
+
return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref }, rest, { className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'string-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
|
38
38
|
if (!e.target.value) {
|
39
39
|
input.onChange(undefined);
|
40
40
|
}
|
@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
29
|
var react_select_1 = __importDefault(require("react-select"));
|
30
|
-
var
|
30
|
+
var clsx_1 = require("clsx");
|
31
31
|
var FormDefaults_1 = require("../FormDefaults");
|
32
32
|
var Group_1 = __importDefault(require("../Group"));
|
33
33
|
// TODO: we could also name this "ReactSelectGroup" or similar but the types are strongly defined now so kept the names consistent
|
@@ -48,7 +48,7 @@ function SelectGroup(_a) {
|
|
48
48
|
? options.resp
|
49
49
|
: [];
|
50
50
|
var isLoading = (options && 'loading' in options && options.loading) || false;
|
51
|
-
return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: (0,
|
51
|
+
return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: (0, clsx_1.clsx)(className, (_b = {},
|
52
52
|
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'multiple'] = multiple,
|
53
53
|
_b[FormDefaults_1.FormDefaults.cssClassPrefix + 'loading'] = isLoading,
|
54
54
|
_b), FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), children: (0, jsx_runtime_1.jsx)(react_select_1.default, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
|
@@ -58,7 +58,7 @@ function SelectGroup(_a) {
|
|
58
58
|
else {
|
59
59
|
input.onChange(e === null || e === void 0 ? void 0 : e.value);
|
60
60
|
}
|
61
|
-
}, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: (0,
|
61
|
+
}, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
|
62
62
|
function getValue() {
|
63
63
|
if (multiple) {
|
64
64
|
return effectiveOptions.filter(function (o) {
|
@@ -4,15 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
4
|
};
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
6
6
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
7
|
-
var
|
7
|
+
var clsx_1 = require("clsx");
|
8
8
|
var formik_1 = require("formik");
|
9
|
-
var SubmitFormButton_1 = __importDefault(require("./SubmitFormButton"));
|
10
9
|
var FormDefaults_1 = require("./FormDefaults");
|
10
|
+
var SubmitFormButton_1 = __importDefault(require("./SubmitFormButton"));
|
11
11
|
/** Standard submit and cancel buttons. */
|
12
12
|
function StandardFormActions(_a) {
|
13
13
|
var allowPristineSubmit = _a.allowPristineSubmit, handleCancel = _a.handleCancel;
|
14
14
|
var isSubmitting = (0, formik_1.useFormikContext)().isSubmitting;
|
15
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SubmitFormButton_1.default, { allowPristineSubmit: allowPristineSubmit }), "\u00A0", (0, jsx_runtime_1.jsx)("button", { className: (0,
|
15
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SubmitFormButton_1.default, { allowPristineSubmit: allowPristineSubmit }), "\u00A0", (0, jsx_runtime_1.jsx)("button", { className: (0, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'standard-form-actions-cancel-button'), type: "button", disabled: isSubmitting, onClick: handleCancel || goBack, children: "Cancel" })] }));
|
16
16
|
function goBack() {
|
17
17
|
window.history.back();
|
18
18
|
}
|
package/lib/SubmitFormButton.js
CHANGED
@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
29
|
var react_1 = __importDefault(require("react"));
|
30
|
-
var
|
30
|
+
var clsx_1 = require("clsx");
|
31
31
|
var formik_1 = require("formik");
|
32
32
|
var FormDefaults_1 = require("./FormDefaults");
|
33
33
|
function SubmitFormButton(_a, ref) {
|
@@ -39,7 +39,7 @@ function SubmitFormButton(_a, ref) {
|
|
39
39
|
? 'Loading, please wait...'
|
40
40
|
: preventSubmit
|
41
41
|
? "You haven't made any changes"
|
42
|
-
: '', className: (0,
|
42
|
+
: '', className: (0, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'submit-form-button', className), children: children || 'Submit' })));
|
43
43
|
}
|
44
44
|
/** Generic submit button for forms. */
|
45
45
|
exports.default = react_1.default.forwardRef(SubmitFormButton);
|
@@ -27,13 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
29
29
|
var react_1 = __importDefault(require("react"));
|
30
|
-
var
|
30
|
+
var clsx_1 = require("clsx");
|
31
31
|
var FormDefaults_1 = require("../FormDefaults");
|
32
32
|
var Group_1 = __importDefault(require("../Group"));
|
33
33
|
function TextAreaGroup(_a, ref) {
|
34
34
|
var _b;
|
35
35
|
var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "icon"]);
|
36
|
-
return ((0, jsx_runtime_1.jsxs)(Group_1.default, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: (0,
|
36
|
+
return ((0, jsx_runtime_1.jsxs)(Group_1.default, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'text-area-group'), children: [icon, (0, jsx_runtime_1.jsx)("textarea", __assign({}, input, rest, { value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (val) { return input.onChange(val.target.value); }, ref: ref, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'text-area-group') }))] }));
|
37
37
|
}
|
38
38
|
/** Generic controlled `<textarea/>` wrapped by a `<Group/>` */
|
39
39
|
var TextAreaGroupWithRef = react_1.default.forwardRef(TextAreaGroup);
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "envoc-form",
|
3
|
-
"version": "5.0.
|
3
|
+
"version": "5.0.7",
|
4
4
|
"description": "Envoc form components",
|
5
5
|
"keywords": [
|
6
6
|
"react-component",
|
@@ -36,9 +36,8 @@
|
|
36
36
|
},
|
37
37
|
"dependencies": {
|
38
38
|
"axios": "^0.21.1",
|
39
|
-
"classnames": "^2.3.1",
|
40
39
|
"date-fns": "^2.22.1",
|
41
|
-
"envoc-request": "^5.0.
|
40
|
+
"envoc-request": "^5.0.7",
|
42
41
|
"lru-cache": "^6.0.0",
|
43
42
|
"prop-types": "^15.7.2",
|
44
43
|
"react-date-picker": "^8.2.0",
|
@@ -53,7 +52,8 @@
|
|
53
52
|
"uuid": "^8.3.2",
|
54
53
|
"@fortawesome/react-fontawesome": "~0.1.16",
|
55
54
|
"@fortawesome/free-solid-svg-icons": "~5.15.4",
|
56
|
-
"@fortawesome/fontawesome-svg-core": "~1.2.36"
|
55
|
+
"@fortawesome/fontawesome-svg-core": "~1.2.36",
|
56
|
+
"clsx": "^2.1.0"
|
57
57
|
},
|
58
58
|
"devDependencies": {
|
59
59
|
"@babel/cli": "^7.14.5",
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { MouseEventHandler } from 'react';
|
2
|
-
import
|
2
|
+
import { clsx } from 'clsx';
|
3
3
|
import { useAxiosRequest, useAxiosRequestProps } from 'envoc-request';
|
4
4
|
import { FormDefaults } from '../FormDefaults';
|
5
5
|
|
@@ -50,7 +50,7 @@ export default function ConfirmBaseForm({
|
|
50
50
|
<h3>{title}</h3>
|
51
51
|
{children}
|
52
52
|
<button
|
53
|
-
className={
|
53
|
+
className={clsx(
|
54
54
|
confirmButtonClass ??
|
55
55
|
FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'
|
56
56
|
)}
|
@@ -59,7 +59,7 @@ export default function ConfirmBaseForm({
|
|
59
59
|
{confirmButtonText ?? 'Confirm'}
|
60
60
|
</button>
|
61
61
|
<button
|
62
|
-
className={
|
62
|
+
className={clsx(
|
63
63
|
FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'
|
64
64
|
)}
|
65
65
|
type="button"
|
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
|
|
2
2
|
import DatePicker, {
|
3
3
|
DatePickerProps,
|
4
4
|
} from 'react-date-picker/dist/entry.nostyle';
|
5
|
-
import
|
5
|
+
import { clsx } from 'clsx';
|
6
6
|
import parseISO from 'date-fns/parseISO';
|
7
7
|
import { InjectedFieldProps } from '../Field/InjectedFieldProps';
|
8
8
|
import { FormDefaults } from '../FormDefaults';
|
@@ -54,18 +54,12 @@ export default function DatePickerGroup<T>({
|
|
54
54
|
meta={meta}
|
55
55
|
label={label}
|
56
56
|
helpText={helpText}
|
57
|
-
className={
|
58
|
-
className,
|
59
|
-
FormDefaults.cssClassPrefix + 'date-picker'
|
60
|
-
)}
|
57
|
+
className={clsx(className, FormDefaults.cssClassPrefix + 'date-picker')}
|
61
58
|
required={required}
|
62
59
|
disabled={disabled}>
|
63
60
|
<DatePicker
|
64
61
|
{...rest}
|
65
|
-
className={
|
66
|
-
FormDefaults.cssClassPrefix + 'date-picker',
|
67
|
-
className
|
68
|
-
)}
|
62
|
+
className={clsx(FormDefaults.cssClassPrefix + 'date-picker', className)}
|
69
63
|
value={displayDate}
|
70
64
|
onChange={handleChange}
|
71
65
|
/>
|
package/src/Field/Field.tsx
CHANGED
@@ -48,6 +48,7 @@ export type FieldProps<
|
|
48
48
|
| ValidationFunction<TForm[TProp]>[];
|
49
49
|
/** Function to modify the field value without making the form dirty. (e.g. phone number) */
|
50
50
|
normalize?: NormalizationFunction<TForm[TProp]>;
|
51
|
+
required?: boolean;
|
51
52
|
} & Omit<
|
52
53
|
RenderComponentProps<TForm[TProp], TRenderComponent>,
|
53
54
|
keyof InjectedFieldProps<TForm[TProp]>
|
@@ -69,24 +70,37 @@ function Field<
|
|
69
70
|
disabled,
|
70
71
|
validate,
|
71
72
|
normalize,
|
73
|
+
required,
|
72
74
|
...rest
|
73
75
|
}: FieldProps<TForm, TProp, TRenderComponent>,
|
74
76
|
ref: LegacyRef<any>
|
75
77
|
) {
|
78
|
+
// enforces that validate is an array and adds the required validator if required prop is true
|
79
|
+
const validateArray: ValidationFunction<TForm[TProp]>[] = Array.isArray(
|
80
|
+
validate
|
81
|
+
)
|
82
|
+
? validate
|
83
|
+
: validate !== undefined
|
84
|
+
? [validate]
|
85
|
+
: [];
|
86
|
+
|
87
|
+
const validateWithRequired = required
|
88
|
+
? validateArray
|
89
|
+
.filter((x) => x !== requiredValidator)
|
90
|
+
.concat([requiredValidator])
|
91
|
+
: validateArray;
|
92
|
+
|
93
|
+
const isRequired =
|
94
|
+
required || validateWithRequired.includes(requiredValidator);
|
95
|
+
|
76
96
|
const [input, meta] = useStandardFormInput<TForm[TProp]>({
|
77
97
|
name: String(name),
|
78
98
|
id: id,
|
79
99
|
disabled: disabled,
|
80
|
-
validate:
|
100
|
+
validate: validateWithRequired,
|
81
101
|
normalize: normalize,
|
82
102
|
});
|
83
103
|
|
84
|
-
const isRequired =
|
85
|
-
rest?.required !== undefined
|
86
|
-
? rest.required
|
87
|
-
: validate === requiredValidator ||
|
88
|
-
(Array.isArray(validate) && validate.includes(requiredValidator));
|
89
|
-
|
90
104
|
// a bit of a hack so JSX is happy with us
|
91
105
|
const Wrapped = Component as React.ComponentType<
|
92
106
|
InjectedFieldProps<TForm[TProp]>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { ElementType } from 'react';
|
2
|
-
import
|
2
|
+
import { clsx } from 'clsx';
|
3
3
|
import Field, { FieldProps } from '../Field/Field';
|
4
4
|
import { FieldNameContext } from '../Field/FieldNameContext';
|
5
5
|
import useStandardFormInput from '../Field/useStandardField';
|
@@ -80,7 +80,7 @@ export default function FieldArray<
|
|
80
80
|
{label}
|
81
81
|
</div>
|
82
82
|
<button
|
83
|
-
className={
|
83
|
+
className={clsx(
|
84
84
|
FormDefaults.cssClassPrefix + 'add-array-item-button',
|
85
85
|
{ [FormDefaults.cssClassPrefix + 'disabled']: disabled }
|
86
86
|
)}
|
@@ -100,7 +100,7 @@ export default function FieldArray<
|
|
100
100
|
(value && value['id']) ||
|
101
101
|
itemName
|
102
102
|
}
|
103
|
-
className={
|
103
|
+
className={clsx(
|
104
104
|
FormDefaults.cssClassPrefix + 'field-array-item',
|
105
105
|
{
|
106
106
|
[FormDefaults.cssClassPrefix + 'removed']: value.isDeleted,
|
@@ -114,7 +114,7 @@ export default function FieldArray<
|
|
114
114
|
} as any)}
|
115
115
|
</FieldNameContext.Provider>
|
116
116
|
<button
|
117
|
-
className={
|
117
|
+
className={clsx(
|
118
118
|
FormDefaults.cssClassPrefix + 'remove-array-item-button',
|
119
119
|
{ [FormDefaults.cssClassPrefix + 'disabled']: disabled }
|
120
120
|
)}
|
package/src/File/FileGroup.tsx
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { ComponentType, LegacyRef } from 'react';
|
2
|
-
import
|
2
|
+
import { clsx } from 'clsx';
|
3
3
|
import FileList from './FileList';
|
4
4
|
import { InjectedFieldProps } from '../Field/InjectedFieldProps';
|
5
5
|
import { FormDefaults } from '../FormDefaults';
|
@@ -37,7 +37,7 @@ function FileGroup(
|
|
37
37
|
meta={meta}
|
38
38
|
label={label}
|
39
39
|
helpText={helpText}
|
40
|
-
className={
|
40
|
+
className={clsx(
|
41
41
|
className,
|
42
42
|
{ [FormDefaults.cssClassPrefix + 'multiple']: multiple },
|
43
43
|
FormDefaults.cssClassPrefix + 'file-group'
|
@@ -66,10 +66,7 @@ function FileGroup(
|
|
66
66
|
value={undefined}
|
67
67
|
ref={ref}
|
68
68
|
type="file"
|
69
|
-
className={
|
70
|
-
className,
|
71
|
-
FormDefaults.cssClassPrefix + 'file-group'
|
72
|
-
)}
|
69
|
+
className={clsx(className, FormDefaults.cssClassPrefix + 'file-group')}
|
73
70
|
/>
|
74
71
|
{/* Note: because input.value is any - due to how files are currently handled - type safeness isn't great here */}
|
75
72
|
<FileList files={input.value} />
|
package/src/Form/Form.tsx
CHANGED
@@ -5,7 +5,7 @@ import {
|
|
5
5
|
useMemo,
|
6
6
|
useState,
|
7
7
|
} from 'react';
|
8
|
-
import
|
8
|
+
import { clsx } from 'clsx';
|
9
9
|
import {
|
10
10
|
Form as FormikFormWrapper,
|
11
11
|
Formik,
|
@@ -119,10 +119,7 @@ export default function Form<TForm extends object>({
|
|
119
119
|
{...props}>
|
120
120
|
<ServerErrorContext.Provider value={serverErrorContextValue}>
|
121
121
|
<FormikFormWrapper
|
122
|
-
className={
|
123
|
-
className,
|
124
|
-
FormDefaults.cssClassPrefix + 'form'
|
125
|
-
)}
|
122
|
+
className={clsx(className, FormDefaults.cssClassPrefix + 'form')}
|
126
123
|
style={style}>
|
127
124
|
<FocusError serverErrors={serverErrorContextValue} />
|
128
125
|
<FormBasedPreventNavigation ignoreLostChanges={ignoreLostChanges} />
|
package/src/Group.tsx
CHANGED
@@ -1,7 +1,7 @@
|
|
1
|
-
import
|
2
|
-
import { FormDefaults } from './FormDefaults';
|
1
|
+
import { clsx } from 'clsx';
|
3
2
|
import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
|
4
3
|
import { InjectedFieldProps } from './Field/InjectedFieldProps';
|
4
|
+
import { FormDefaults } from './FormDefaults';
|
5
5
|
|
6
6
|
export interface GroupProps extends InjectedFieldProps<any> {
|
7
7
|
/** Extra class names to apply. */
|
@@ -34,7 +34,7 @@ export default function Group({
|
|
34
34
|
}: GroupProps) {
|
35
35
|
return (
|
36
36
|
<div
|
37
|
-
className={
|
37
|
+
className={clsx(className, FormDefaults.cssClassPrefix + 'group', {
|
38
38
|
[FormDefaults.cssClassPrefix + 'invalid']: meta.error,
|
39
39
|
[FormDefaults.cssClassPrefix + 'disabled']: disabled,
|
40
40
|
[FormDefaults.cssClassPrefix + 'required']: required,
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import
|
2
|
-
import { FormDefaults } from '../FormDefaults';
|
1
|
+
import { clsx } from 'clsx';
|
3
2
|
import FieldErrorScrollTarget from '../Field/FieldErrorScrollTarget';
|
3
|
+
import { FormDefaults } from '../FormDefaults';
|
4
4
|
import { GroupProps } from '../Group';
|
5
5
|
|
6
6
|
export interface CheckboxGroupProps extends GroupProps {
|
@@ -21,7 +21,7 @@ export default function CheckboxGroup({
|
|
21
21
|
}: CheckboxGroupProps) {
|
22
22
|
return (
|
23
23
|
<div
|
24
|
-
className={
|
24
|
+
className={clsx(className, FormDefaults.cssClassPrefix + 'group', {
|
25
25
|
[FormDefaults.cssClassPrefix + 'invalid']: meta.error,
|
26
26
|
[FormDefaults.cssClassPrefix + 'disabled']: disabled,
|
27
27
|
[FormDefaults.cssClassPrefix + 'required']: required,
|