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.
Files changed (61) hide show
  1. package/README.md +7 -7
  2. package/es/ConfirmBaseForm/ConfirmBaseForm.js +2 -2
  3. package/es/DatePicker/DatePickerGroup.js +2 -2
  4. package/es/Field/Field.d.ts +2 -1
  5. package/es/Field/Field.js +14 -6
  6. package/es/FieldArray/FieldArray.js +4 -4
  7. package/es/File/FileGroup.js +3 -3
  8. package/es/Form/Form.js +2 -2
  9. package/es/Group.js +3 -3
  10. package/es/Input/CheckboxGroup.js +3 -3
  11. package/es/Input/CheckboxInputGroup.js +2 -2
  12. package/es/Input/IconInputGroup.js +2 -2
  13. package/es/Input/InputGroup.js +2 -2
  14. package/es/Input/MoneyInputGroup.js +2 -2
  15. package/es/Input/NumberInputGroup.js +2 -2
  16. package/es/Input/PhoneNumberInputGroup.js +2 -2
  17. package/es/Input/StringInputGroup.js +2 -2
  18. package/es/Select/SelectGroup.js +3 -3
  19. package/es/StandardFormActions.js +3 -3
  20. package/es/SubmitFormButton.js +2 -2
  21. package/es/TextArea/TextAreaGroup.js +2 -2
  22. package/lib/ConfirmBaseForm/ConfirmBaseForm.js +2 -5
  23. package/lib/DatePicker/DatePickerGroup.js +2 -2
  24. package/lib/Field/Field.d.ts +2 -1
  25. package/lib/Field/Field.js +14 -6
  26. package/lib/FieldArray/FieldArray.js +4 -4
  27. package/lib/File/FileGroup.js +3 -3
  28. package/lib/Form/Form.js +2 -2
  29. package/lib/Group.js +3 -3
  30. package/lib/Input/CheckboxGroup.js +3 -3
  31. package/lib/Input/CheckboxInputGroup.js +2 -2
  32. package/lib/Input/IconInputGroup.js +2 -2
  33. package/lib/Input/InputGroup.js +2 -2
  34. package/lib/Input/MoneyInputGroup.js +2 -2
  35. package/lib/Input/NumberInputGroup.js +2 -2
  36. package/lib/Input/PhoneNumberInputGroup.js +2 -2
  37. package/lib/Input/StringInputGroup.js +2 -2
  38. package/lib/Select/SelectGroup.js +3 -3
  39. package/lib/StandardFormActions.js +3 -3
  40. package/lib/SubmitFormButton.js +2 -2
  41. package/lib/TextArea/TextAreaGroup.js +2 -2
  42. package/package.json +4 -4
  43. package/src/ConfirmBaseForm/ConfirmBaseForm.tsx +3 -3
  44. package/src/DatePicker/DatePickerGroup.tsx +3 -9
  45. package/src/Field/Field.tsx +21 -7
  46. package/src/FieldArray/FieldArray.tsx +4 -4
  47. package/src/File/FileGroup.tsx +3 -6
  48. package/src/Form/Form.tsx +2 -5
  49. package/src/Group.tsx +3 -3
  50. package/src/Input/CheckboxGroup.tsx +3 -3
  51. package/src/Input/CheckboxInputGroup.tsx +3 -3
  52. package/src/Input/IconInputGroup.tsx +2 -2
  53. package/src/Input/InputGroup.tsx +3 -9
  54. package/src/Input/MoneyInputGroup.tsx +2 -5
  55. package/src/Input/NumberInputGroup.tsx +2 -5
  56. package/src/Input/PhoneNumberInputGroup.tsx +2 -2
  57. package/src/Input/StringInputGroup.tsx +2 -5
  58. package/src/Select/SelectGroup.tsx +3 -3
  59. package/src/StandardFormActions.tsx +3 -3
  60. package/src/SubmitFormButton.tsx +2 -2
  61. 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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(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) {
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, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
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, classnames_1.default)(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']) ||
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
  }) })] }));
@@ -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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(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) {
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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'file-group') })), (0, jsx_runtime_1.jsx)(FileList_1.default, { files: input.value })] }));
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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(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({
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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'group', (_b = {},
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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'group', (_b = {},
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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'checkbox-group'), checked: input.value === true, onChange: function (e) {
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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'icon-input-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
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
  }
@@ -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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'input-group') }))] }));
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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'money-group'), value: input.value || '', onChange: function (e) {
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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'number-group'), value: input.value || '', onChange: function (e) {
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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'phone-number-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'string-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(className, (_b = {},
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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'standard-form-actions-cancel-button'), type: "button", disabled: isSubmitting, onClick: handleCancel || goBack, children: "Cancel" })] }));
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
  }
@@ -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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'submit-form-button', className), children: children || 'Submit' })));
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 classnames_1 = __importDefault(require("classnames"));
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, classnames_1.default)(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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'text-area-group') }))] }));
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.5",
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.5",
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 classNames from 'classnames';
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={classNames(
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={classNames(
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 classnames from 'classnames';
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={classnames(
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={classnames(
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
  />
@@ -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: 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 classNames from 'classnames';
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={classNames(
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={classNames(
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={classNames(
117
+ className={clsx(
118
118
  FormDefaults.cssClassPrefix + 'remove-array-item-button',
119
119
  { [FormDefaults.cssClassPrefix + 'disabled']: disabled }
120
120
  )}
@@ -1,5 +1,5 @@
1
1
  import React, { ComponentType, LegacyRef } from 'react';
2
- import classNames from 'classnames';
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={classNames(
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={classNames(
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 classNames from 'classnames';
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={classNames(
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 classNames from 'classnames';
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={classNames(className, FormDefaults.cssClassPrefix + 'group', {
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 classNames from 'classnames';
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={classNames(className, FormDefaults.cssClassPrefix + 'group', {
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,