envoc-form 4.0.1-9 → 4.1.0

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 (204) hide show
  1. package/README.md +5117 -12
  2. package/es/AddressInput/AddressInput.d.ts +15 -5
  3. package/es/AddressInput/AddressInput.js +10 -0
  4. package/es/ConfirmBaseForm/ConfirmBaseForm.d.ts +14 -0
  5. package/es/ConfirmBaseForm/ConfirmBaseForm.js +6 -0
  6. package/es/ConfirmDeleteForm/ConfirmDeleteForm.d.ts +13 -0
  7. package/es/ConfirmDeleteForm/ConfirmDeleteForm.js +5 -0
  8. package/es/DatePicker/DatePickerGroup.d.ts +7 -2
  9. package/es/DatePicker/DatePickerGroup.js +16 -6
  10. package/es/DatePicker/StringDateOnlyPickerGroup.d.ts +6 -1
  11. package/es/DatePicker/StringDateOnlyPickerGroup.js +5 -0
  12. package/es/DatePicker/StringDatePickerGroup.d.ts +6 -1
  13. package/es/DatePicker/StringDatePickerGroup.js +5 -0
  14. package/es/Field/Field.d.ts +9 -3
  15. package/es/Field/Field.js +9 -4
  16. package/es/Field/FieldErrorScrollTarget.d.ts +1 -0
  17. package/es/Field/FieldErrorScrollTarget.js +1 -0
  18. package/es/Field/StandAloneInput.d.ts +4 -0
  19. package/es/Field/StandAloneInput.js +1 -0
  20. package/es/Field/useStandardField.d.ts +6 -0
  21. package/es/Field/useStandardField.js +8 -9
  22. package/es/FieldArray/FieldArray.d.ts +11 -2
  23. package/es/FieldArray/FieldArray.js +7 -2
  24. package/es/File/FileGroup.d.ts +3 -1
  25. package/es/File/FileGroup.js +4 -3
  26. package/es/File/FileList.d.ts +2 -2
  27. package/es/Form/FocusError.d.ts +2 -0
  28. package/es/Form/FocusError.js +1 -0
  29. package/es/Form/Form.d.ts +6 -0
  30. package/es/Form/Form.js +1 -0
  31. package/es/Form/FormBasedPreventNavigation.d.ts +3 -1
  32. package/es/Form/FormBasedPreventNavigation.js +12 -45
  33. package/es/Form/LegacyFormBasedPreventNavigation.d.ts +17 -0
  34. package/es/Form/LegacyFormBasedPreventNavigation.js +69 -0
  35. package/es/Form/NewFormBasedPreventNavigation.d.ts +14 -0
  36. package/es/Form/NewFormBasedPreventNavigation.js +39 -0
  37. package/es/Form/ServerErrorContext.d.ts +1 -0
  38. package/es/Form/ServerErrorContext.js +1 -0
  39. package/es/FormActions.d.ts +6 -0
  40. package/es/FormActions.js +1 -0
  41. package/es/FormDefaults.d.ts +1 -0
  42. package/es/FormDefaults.js +1 -0
  43. package/es/Group.d.ts +7 -4
  44. package/es/Group.js +4 -3
  45. package/es/Input/IconInputGroup.d.ts +4 -1
  46. package/es/Input/IconInputGroup.js +3 -1
  47. package/es/Input/InputGroup.d.ts +4 -4
  48. package/es/Input/InputGroup.js +4 -4
  49. package/es/Input/MoneyInputGroup.d.ts +3 -1
  50. package/es/Input/MoneyInputGroup.js +1 -0
  51. package/es/Input/NumberInputGroup.d.ts +3 -1
  52. package/es/Input/NumberInputGroup.js +1 -0
  53. package/es/Input/StringInputGroup.d.ts +2 -1
  54. package/es/Input/StringInputGroup.js +3 -1
  55. package/es/Normalization/normalizers.d.ts +4 -2
  56. package/es/Normalization/normalizers.js +2 -0
  57. package/es/Select/BooleanSelectGroup.d.ts +2 -1
  58. package/es/Select/BooleanSelectGroup.js +1 -0
  59. package/es/Select/NumberSelectGroup.d.ts +4 -2
  60. package/es/Select/NumberSelectGroup.js +2 -0
  61. package/es/Select/SelectGroup.d.ts +8 -2
  62. package/es/Select/SelectGroup.js +5 -4
  63. package/es/Select/StringSelectGroup.d.ts +2 -0
  64. package/es/Select/StringSelectGroup.js +2 -0
  65. package/es/StandardFormActions.d.ts +5 -0
  66. package/es/StandardFormActions.js +1 -0
  67. package/es/SubmitFormButton.d.ts +4 -1
  68. package/es/SubmitFormButton.js +1 -0
  69. package/es/TextArea/TextAreaGroup.d.ts +2 -1
  70. package/es/TextArea/TextAreaGroup.js +5 -4
  71. package/es/Validation/validators.d.ts +11 -8
  72. package/es/Validation/validators.js +6 -2
  73. package/es/index.d.ts +4 -4
  74. package/es/setupTests.d.ts +1 -0
  75. package/es/setupTests.js +1 -0
  76. package/lib/AddressInput/AddressInput.d.ts +15 -5
  77. package/lib/AddressInput/AddressInput.js +10 -0
  78. package/lib/ConfirmBaseForm/ConfirmBaseForm.d.ts +14 -0
  79. package/lib/ConfirmBaseForm/ConfirmBaseForm.js +6 -0
  80. package/lib/ConfirmDeleteForm/ConfirmDeleteForm.d.ts +13 -0
  81. package/lib/ConfirmDeleteForm/ConfirmDeleteForm.js +5 -0
  82. package/lib/DatePicker/DatePickerGroup.d.ts +7 -2
  83. package/lib/DatePicker/DatePickerGroup.js +16 -6
  84. package/lib/DatePicker/StringDateOnlyPickerGroup.d.ts +6 -1
  85. package/lib/DatePicker/StringDateOnlyPickerGroup.js +5 -0
  86. package/lib/DatePicker/StringDatePickerGroup.d.ts +6 -1
  87. package/lib/DatePicker/StringDatePickerGroup.js +5 -0
  88. package/lib/Field/Field.d.ts +9 -3
  89. package/lib/Field/Field.js +9 -4
  90. package/lib/Field/FieldErrorScrollTarget.d.ts +1 -0
  91. package/lib/Field/FieldErrorScrollTarget.js +1 -0
  92. package/lib/Field/StandAloneInput.d.ts +4 -0
  93. package/lib/Field/StandAloneInput.js +1 -0
  94. package/lib/Field/useStandardField.d.ts +6 -0
  95. package/lib/Field/useStandardField.js +8 -9
  96. package/lib/FieldArray/FieldArray.d.ts +11 -2
  97. package/lib/FieldArray/FieldArray.js +7 -2
  98. package/lib/File/FileGroup.d.ts +3 -1
  99. package/lib/File/FileGroup.js +4 -3
  100. package/lib/File/FileList.d.ts +2 -2
  101. package/lib/Form/FocusError.d.ts +2 -0
  102. package/lib/Form/FocusError.js +1 -0
  103. package/lib/Form/Form.d.ts +6 -0
  104. package/lib/Form/Form.js +1 -0
  105. package/lib/Form/FormBasedPreventNavigation.d.ts +3 -1
  106. package/lib/Form/FormBasedPreventNavigation.js +13 -43
  107. package/lib/Form/LegacyFormBasedPreventNavigation.d.ts +17 -0
  108. package/lib/Form/LegacyFormBasedPreventNavigation.js +72 -0
  109. package/lib/Form/NewFormBasedPreventNavigation.d.ts +14 -0
  110. package/lib/Form/NewFormBasedPreventNavigation.js +42 -0
  111. package/lib/Form/ServerErrorContext.d.ts +1 -0
  112. package/lib/Form/ServerErrorContext.js +1 -0
  113. package/lib/FormActions.d.ts +6 -0
  114. package/lib/FormActions.js +1 -0
  115. package/lib/FormDefaults.d.ts +1 -0
  116. package/lib/FormDefaults.js +1 -0
  117. package/lib/Group.d.ts +7 -4
  118. package/lib/Group.js +4 -3
  119. package/lib/Input/IconInputGroup.d.ts +4 -1
  120. package/lib/Input/IconInputGroup.js +3 -1
  121. package/lib/Input/InputGroup.d.ts +4 -4
  122. package/lib/Input/InputGroup.js +4 -4
  123. package/lib/Input/MoneyInputGroup.d.ts +3 -1
  124. package/lib/Input/MoneyInputGroup.js +1 -0
  125. package/lib/Input/NumberInputGroup.d.ts +3 -1
  126. package/lib/Input/NumberInputGroup.js +1 -0
  127. package/lib/Input/StringInputGroup.d.ts +2 -1
  128. package/lib/Input/StringInputGroup.js +3 -1
  129. package/lib/Normalization/normalizers.d.ts +4 -2
  130. package/lib/Normalization/normalizers.js +2 -0
  131. package/lib/Select/BooleanSelectGroup.d.ts +2 -1
  132. package/lib/Select/BooleanSelectGroup.js +1 -0
  133. package/lib/Select/NumberSelectGroup.d.ts +4 -2
  134. package/lib/Select/NumberSelectGroup.js +2 -0
  135. package/lib/Select/SelectGroup.d.ts +8 -2
  136. package/lib/Select/SelectGroup.js +5 -4
  137. package/lib/Select/StringSelectGroup.d.ts +2 -0
  138. package/lib/Select/StringSelectGroup.js +2 -0
  139. package/lib/StandardFormActions.d.ts +5 -0
  140. package/lib/StandardFormActions.js +1 -0
  141. package/lib/SubmitFormButton.d.ts +4 -1
  142. package/lib/SubmitFormButton.js +1 -0
  143. package/lib/TextArea/TextAreaGroup.d.ts +2 -1
  144. package/lib/TextArea/TextAreaGroup.js +5 -4
  145. package/lib/Validation/validators.d.ts +11 -8
  146. package/lib/Validation/validators.js +6 -2
  147. package/lib/index.d.ts +4 -4
  148. package/lib/setupTests.d.ts +1 -0
  149. package/lib/setupTests.js +3 -0
  150. package/package.json +9 -6
  151. package/src/AddressInput/AddressInput.tsx +15 -5
  152. package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap +8 -4
  153. package/src/ConfirmBaseForm/ConfirmBaseForm.tsx +14 -0
  154. package/src/ConfirmDeleteForm/ConfirmDeleteForm.tsx +13 -0
  155. package/src/DatePicker/DatePicker.test.tsx +1 -1
  156. package/src/DatePicker/DatePickerGroup.tsx +18 -7
  157. package/src/DatePicker/StringDateOnlyPickerGroup.tsx +7 -2
  158. package/src/DatePicker/StringDatePickerGroup.tsx +7 -1
  159. package/src/Field/Field.tsx +20 -7
  160. package/src/Field/FieldErrorScrollTarget.tsx +1 -0
  161. package/src/Field/StandAloneInput.tsx +4 -0
  162. package/src/Field/useStandardField.ts +13 -9
  163. package/src/FieldArray/FieldArray.tsx +14 -5
  164. package/src/File/FileGroup.tsx +9 -3
  165. package/src/File/FileList.tsx +2 -2
  166. package/src/Form/FocusError.tsx +3 -0
  167. package/src/Form/Form.tsx +6 -0
  168. package/src/Form/FormBasedPreventNavigation.tsx +28 -46
  169. package/src/Form/LegacyFormBasedPreventNavigation.tsx +77 -0
  170. package/src/Form/NewFormBasedPreventNavigation.tsx +59 -0
  171. package/src/Form/ServerErrorContext.ts +1 -0
  172. package/src/FormActions.tsx +7 -0
  173. package/src/FormDefaults.ts +1 -0
  174. package/src/Group.tsx +12 -4
  175. package/src/Input/IconInputGroup.tsx +5 -2
  176. package/src/Input/InputGroup.tsx +13 -5
  177. package/src/Input/MoneyInputGroup.tsx +3 -1
  178. package/src/Input/NumberInputGroup.tsx +3 -1
  179. package/src/Input/StringInputGroup.tsx +3 -2
  180. package/src/Input/__Tests__/__snapshots__/IconInputGroup.test.tsx.snap +1 -0
  181. package/src/Input/__Tests__/__snapshots__/MoneyInputGroup.test.tsx.snap +1 -0
  182. package/src/Input/__Tests__/__snapshots__/NumberInputGroup.test.tsx.snap +1 -0
  183. package/src/Input/__Tests__/__snapshots__/StringInputGroup.test.tsx.snap +1 -0
  184. package/src/Normalization/normalizers.ts +4 -2
  185. package/src/Select/BooleanSelectGroup.tsx +2 -1
  186. package/src/Select/NumberSelectGroup.tsx +4 -2
  187. package/src/Select/SelectGroup.tsx +13 -2
  188. package/src/Select/StringSelectGroup.tsx +2 -0
  189. package/src/StandardFormActions.tsx +5 -0
  190. package/src/SubmitFormButton.tsx +5 -1
  191. package/src/TextArea/TextAreaGroup.tsx +6 -4
  192. package/src/Validation/validators.ts +19 -14
  193. package/src/__Tests__/FormTestBase.tsx +9 -8
  194. package/src/__Tests__/RealisticForm.test.tsx +82 -0
  195. package/src/index.ts +4 -4
  196. package/src/setupTests.ts +1 -0
  197. package/es/__Tests__/FormTestBase.d.ts +0 -27
  198. package/es/__Tests__/FormTestBase.js +0 -83
  199. package/es/__Tests__/index.d.ts +0 -2
  200. package/es/__Tests__/index.js +0 -2
  201. package/lib/__Tests__/FormTestBase.d.ts +0 -27
  202. package/lib/__Tests__/FormTestBase.js +0 -86
  203. package/lib/__Tests__/index.d.ts +0 -2
  204. package/lib/__Tests__/index.js +0 -8
@@ -29,12 +29,12 @@ var jsx_runtime_1 = require("react/jsx-runtime");
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var classnames_1 = __importDefault(require("classnames"));
31
31
  var FileList_1 = __importDefault(require("./FileList"));
32
- var Group_1 = __importDefault(require("../Group"));
33
32
  var FormDefaults_1 = require("../FormDefaults");
33
+ var Group_1 = __importDefault(require("../Group"));
34
34
  function FileGroup(_a, ref) {
35
35
  var _b;
36
- var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, multiple = _a.multiple, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "multiple"]);
37
- return ((0, jsx_runtime_1.jsxs)(Group_1.default, __assign({ 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') }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, input, rest, { multiple: multiple, onChange: function (e) {
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, __assign({ 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) {
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);
@@ -53,5 +53,6 @@ function FileGroup(_a, ref) {
53
53
  }
54
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 })] })));
55
55
  }
56
+ /** File upload input group. */
56
57
  var FileGroupWithRef = react_1.default.forwardRef(FileGroup);
57
58
  exports.default = FileGroupWithRef;
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  export interface FileListProps {
3
- files?: File | File[] | undefined;
4
- rejectedFiles?: File | File[] | undefined;
3
+ files?: File | File[] | undefined | null;
4
+ rejectedFiles?: File | File[] | undefined | null;
5
5
  }
6
6
  export default function FileList({ files, rejectedFiles }: FileListProps): JSX.Element;
@@ -1,5 +1,7 @@
1
1
  import { ServerErrorContextProps } from './ServerErrorContext';
2
2
  export interface FocusErrorProps {
3
+ /** Validation errors that have been received from the server. */
3
4
  serverErrors: ServerErrorContextProps;
4
5
  }
6
+ /** Function to scroll to the field that has an error. */
5
7
  export default function FocusError(props: FocusErrorProps): null;
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = require("react");
7
7
  var formik_1 = require("formik");
8
8
  var smoothscroll_polyfill_1 = __importDefault(require("smoothscroll-polyfill"));
9
+ /** Function to scroll to the field that has an error. */
9
10
  function FocusError(props) {
10
11
  var _a = (0, formik_1.useFormikContext)(), errors = _a.errors, isSubmitting = _a.isSubmitting, isValidating = _a.isValidating;
11
12
  smoothscroll_polyfill_1.default.polyfill();
@@ -8,18 +8,24 @@ export declare type FormBuilderProp<TForm extends object> = {
8
8
  FieldArray: <TProp extends keyof TForm>(props: FieldArrayProps<TForm, TProp>) => JSX.Element;
9
9
  };
10
10
  export interface FullFormProps<TForm extends object> {
11
+ /** The `<Field/>` and `<FieldArray/>` components. */
11
12
  children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
13
+ /** Submission handler */
12
14
  onSubmit: (formValues: TForm, formikBag: FormikHelpers<TForm>) => Promise<ValidatedApiResult>;
15
+ /** Submission handler for forms that use [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData).*/
13
16
  onFormDataSubmit: (formValues: FormData, formikBag: FormikHelpers<TForm>) => Promise<ValidatedApiResult>;
14
17
  className?: string;
15
18
  style?: CSSProperties;
19
+ /** Prevent the user from leaving the form if they have edited any field. This is presented as a JS `alert()`. */
16
20
  ignoreLostChanges?: boolean;
21
+ /** The intitial values of the form. */
17
22
  initialValues?: TForm;
18
23
  }
19
24
  declare type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
20
25
  [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
21
26
  }[Keys];
22
27
  export declare type FormProps<TForm extends object> = RequireAtLeastOne<FullFormProps<TForm>, 'onSubmit' | 'onFormDataSubmit'>;
28
+ /** Define a form. Uses [formik](https://formik.org/docs/overview). Usually contains many `<Field/>` components. */
23
29
  declare function Form<TForm extends object>({ children, className, style, ignoreLostChanges, onSubmit, onFormDataSubmit, initialValues, ...props }: FormProps<TForm>): JSX.Element;
24
30
  declare namespace Form {
25
31
  var DisplayFormState: () => JSX.Element;
package/lib/Form/Form.js CHANGED
@@ -37,6 +37,7 @@ var FieldArray_1 = __importDefault(require("../FieldArray/FieldArray"));
37
37
  var FormDefaults_1 = require("../FormDefaults");
38
38
  var objectContainsNonSerializableProperty_1 = __importDefault(require("../utils/objectContainsNonSerializableProperty"));
39
39
  var objectToFormData_1 = __importDefault(require("../utils/objectToFormData"));
40
+ /** Define a form. Uses [formik](https://formik.org/docs/overview). Usually contains many `<Field/>` components. */
40
41
  function Form(_a) {
41
42
  var children = _a.children, className = _a.className, style = _a.style, ignoreLostChanges = _a.ignoreLostChanges, onSubmit = _a.onSubmit, onFormDataSubmit = _a.onFormDataSubmit, initialValues = _a.initialValues, props = __rest(_a, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "onFormDataSubmit", "initialValues"]);
42
43
  // formik resets all error on each blur (with our settings)
@@ -1,5 +1,7 @@
1
+ /// <reference types="react" />
1
2
  export interface FormBasedPreventNavigationProps {
2
3
  ignoreLostChanges?: boolean;
3
4
  promptMessage?: string;
4
5
  }
5
- export default function FormBasedPreventNavigation({ ignoreLostChanges, promptMessage, }: FormBasedPreventNavigationProps): null;
6
+ /** Prevent the user from navigating away from a form if there are any changes. */
7
+ export default function FormBasedPreventNavigation({ ignoreLostChanges, promptMessage, }: FormBasedPreventNavigationProps): JSX.Element;
@@ -1,56 +1,26 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
12
4
  };
13
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
+ var jsx_runtime_1 = require("react/jsx-runtime");
14
7
  var react_1 = require("react");
15
- // see: https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743
16
8
  var react_router_dom_1 = require("react-router-dom");
17
9
  var formik_1 = require("formik");
10
+ var LegacyFormBasedPreventNavigation_1 = __importDefault(require("./LegacyFormBasedPreventNavigation"));
11
+ var NewFormBasedPreventNavigation_1 = __importDefault(require("./NewFormBasedPreventNavigation"));
12
+ /** Prevent the user from navigating away from a form if there are any changes. */
18
13
  function FormBasedPreventNavigation(_a) {
19
14
  var ignoreLostChanges = _a.ignoreLostChanges, _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b;
20
15
  var _c = (0, formik_1.useFormikContext)(), dirty = _c.dirty, isSubmitting = _c.isSubmitting;
21
16
  var preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
22
17
  var navigator = (0, react_1.useContext)(react_router_dom_1.UNSAFE_NavigationContext).navigator;
23
- (0, react_1.useEffect)(function () {
24
- if (!preventNavigate) {
25
- return;
26
- }
27
- // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
28
- // this is a workaround until we get native support for prompt on navigate
29
- var blocker = function (tx) {
30
- if (window.confirm(promptMessage)) {
31
- tx.retry();
32
- }
33
- };
34
- var unblock = navigator.block(function (tx) {
35
- var autoUnblockingTx = __assign(__assign({}, tx), { retry: function () {
36
- // Automatically unblock the transition so it can play all the way
37
- // through before retrying it. TODO: Figure out how to re-enable
38
- // this block if the transition is cancelled for some reason.
39
- unblock();
40
- tx.retry();
41
- } });
42
- blocker(autoUnblockingTx);
43
- });
44
- window.addEventListener('beforeunload', beforeUnload);
45
- return function () {
46
- unblock();
47
- window.removeEventListener('beforeunload', beforeUnload);
48
- };
49
- function beforeUnload(e) {
50
- e.preventDefault();
51
- e.returnValue = promptMessage;
52
- }
53
- }, [preventNavigate, promptMessage, navigator]);
54
- return null;
18
+ var isUsingDataRouter = navigator.location === undefined;
19
+ if (isUsingDataRouter) {
20
+ return ((0, jsx_runtime_1.jsx)(NewFormBasedPreventNavigation_1.default, { promptMessage: promptMessage, preventNavigate: preventNavigate, navigator: navigator }));
21
+ }
22
+ else {
23
+ return ((0, jsx_runtime_1.jsx)(LegacyFormBasedPreventNavigation_1.default, { promptMessage: promptMessage, preventNavigate: preventNavigate, navigator: navigator }));
24
+ }
55
25
  }
56
26
  exports.default = FormBasedPreventNavigation;
@@ -0,0 +1,17 @@
1
+ import type { History } from 'history';
2
+ import { Navigator as BaseNavigator } from 'react-router-dom';
3
+ interface Navigator extends BaseNavigator {
4
+ block?: History['block'];
5
+ }
6
+ export interface FormBasedPreventNavigationProps {
7
+ promptMessage?: string;
8
+ preventNavigate: boolean;
9
+ navigator: Navigator;
10
+ }
11
+ /** Only use this if the project uses `<BrowserRouter/>` or any router that does not support the new
12
+ * [react-router Data API](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis)
13
+ *
14
+ * Legacy function to prevent the user from navigating away from a form if there are any changes.
15
+ */
16
+ export default function LegacyFormBasedPreventNavigation({ promptMessage, preventNavigate, navigator, }: FormBasedPreventNavigationProps): null;
17
+ export {};
@@ -0,0 +1,72 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ Object.defineProperty(exports, "__esModule", { value: true });
14
+ var react_1 = require("react");
15
+ /** Only use this if the project uses `<BrowserRouter/>` or any router that does not support the new
16
+ * [react-router Data API](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis)
17
+ *
18
+ * Legacy function to prevent the user from navigating away from a form if there are any changes.
19
+ */
20
+ function LegacyFormBasedPreventNavigation(_a) {
21
+ var _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b, preventNavigate = _a.preventNavigate, navigator = _a.navigator;
22
+ (0, react_1.useEffect)(function () {
23
+ if (!preventNavigate) {
24
+ return;
25
+ }
26
+ var unblock = function () { };
27
+ var push = navigator.push;
28
+ // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
29
+ // this is a workaround until we get native support for prompt on navigate
30
+ if (navigator.block) {
31
+ var blocker_1 = function (tx) {
32
+ if (window.confirm(promptMessage)) {
33
+ tx.retry();
34
+ }
35
+ };
36
+ unblock = navigator.block(function (tx) {
37
+ var autoUnblockingTx = __assign(__assign({}, tx), { retry: function () {
38
+ // Automatically unblock the transition so it can play all the way
39
+ // through before retrying it. TODO: Figure out how to re-enable
40
+ // this block if the transition is cancelled for some reason.
41
+ unblock();
42
+ tx.retry();
43
+ } });
44
+ blocker_1(autoUnblockingTx);
45
+ });
46
+ }
47
+ else {
48
+ //https://gist.github.com/MarksCode/64e438c82b0b2a1161e01c88ca0d0355
49
+ navigator.push = function () {
50
+ var args = [];
51
+ for (var _i = 0; _i < arguments.length; _i++) {
52
+ args[_i] = arguments[_i];
53
+ }
54
+ if (window.confirm(promptMessage)) {
55
+ push.apply(void 0, args);
56
+ }
57
+ };
58
+ }
59
+ window.addEventListener('beforeunload', beforeUnload);
60
+ return function () {
61
+ unblock();
62
+ navigator.push = push;
63
+ window.removeEventListener('beforeunload', beforeUnload);
64
+ };
65
+ function beforeUnload(e) {
66
+ e.preventDefault();
67
+ e.returnValue = promptMessage;
68
+ }
69
+ }, [preventNavigate, promptMessage, navigator]);
70
+ return null;
71
+ }
72
+ exports.default = LegacyFormBasedPreventNavigation;
@@ -0,0 +1,14 @@
1
+ import type { History } from 'history';
2
+ import { Navigator as BaseNavigator } from 'react-router-dom';
3
+ interface Navigator extends BaseNavigator {
4
+ block?: History['block'];
5
+ location: Location;
6
+ }
7
+ interface FormBasedPreventNavigationProps {
8
+ promptMessage?: string;
9
+ preventNavigate: boolean;
10
+ navigator: Navigator;
11
+ }
12
+ /** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
13
+ export default function NewFormBasedPreventNavigation({ promptMessage, preventNavigate, navigator, }: FormBasedPreventNavigationProps): null;
14
+ export {};
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var react_1 = require("react");
4
+ var react_router_dom_1 = require("react-router-dom");
5
+ /** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
6
+ function NewFormBasedPreventNavigation(_a) {
7
+ var _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b, preventNavigate = _a.preventNavigate, navigator = _a.navigator;
8
+ (0, react_router_dom_1.unstable_usePrompt)({
9
+ when: preventNavigate,
10
+ message: promptMessage,
11
+ });
12
+ // TODO: Once react-router fully supports usePrompt and when we do not want to support routers
13
+ // that do not support the react-router Data API we can remove this.
14
+ (0, react_1.useEffect)(function () {
15
+ if (!preventNavigate) {
16
+ return;
17
+ }
18
+ var unblock = function () { };
19
+ var push = navigator.push;
20
+ navigator.push = function () {
21
+ var args = [];
22
+ for (var _i = 0; _i < arguments.length; _i++) {
23
+ args[_i] = arguments[_i];
24
+ }
25
+ if (window.confirm(promptMessage)) {
26
+ push.apply(void 0, args);
27
+ }
28
+ };
29
+ window.addEventListener('beforeunload', beforeUnload);
30
+ return function () {
31
+ unblock();
32
+ navigator.push = push;
33
+ window.removeEventListener('beforeunload', beforeUnload);
34
+ };
35
+ function beforeUnload(e) {
36
+ e.preventDefault();
37
+ e.returnValue = promptMessage;
38
+ }
39
+ }, [preventNavigate, promptMessage, navigator]);
40
+ return null;
41
+ }
42
+ exports.default = NewFormBasedPreventNavigation;
@@ -7,4 +7,5 @@ export interface ServerErrorContextProps {
7
7
  getError: (path: string) => string | undefined;
8
8
  setError: (path: string, errorMessage: string | undefined) => void;
9
9
  }
10
+ /** Context to store the API errors from the server for the form. */
10
11
  export declare const ServerErrorContext: React.Context<ServerErrorContextProps>;
@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ServerErrorContext = void 0;
7
7
  var react_1 = __importDefault(require("react"));
8
+ /** Context to store the API errors from the server for the form. */
8
9
  exports.ServerErrorContext = react_1.default.createContext({
9
10
  errors: {},
10
11
  getError: function (path) {
@@ -1,7 +1,13 @@
1
1
  /// <reference types="react" />
2
2
  export interface FormActionsProps {
3
+ /** Allow the form to be submitted without any changes. By default this is not allowed. */
3
4
  allowPristineSubmit?: boolean;
5
+ /** The cancel button's `onClick`.
6
+ * @defaultValue `window.history.back()`
7
+ */
4
8
  handleCancel?: () => void;
9
+ /** Whether both buttons should be disabled. */
5
10
  disabled?: boolean;
6
11
  }
12
+ /** Standard cancel and submit buttons. */
7
13
  export default function FormActions({ allowPristineSubmit, handleCancel, disabled, }: FormActionsProps): JSX.Element;
@@ -18,6 +18,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
18
18
  var FormDefaults_1 = require("./FormDefaults");
19
19
  var formik_1 = require("formik");
20
20
  var SubmitFormButton_1 = __importDefault(require("./SubmitFormButton"));
21
+ /** Standard cancel and submit buttons. */
21
22
  function FormActions(_a) {
22
23
  var allowPristineSubmit = _a.allowPristineSubmit, handleCancel = _a.handleCancel, disabled = _a.disabled;
23
24
  var isSubmitting = (0, formik_1.useFormikContext)().isSubmitting;
@@ -1,3 +1,4 @@
1
+ /** `envoc-form-` CSS class prefix */
1
2
  export declare const FormDefaults: {
2
3
  cssClassPrefix: string;
3
4
  };
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.FormDefaults = void 0;
4
+ /** `envoc-form-` CSS class prefix */
4
5
  exports.FormDefaults = { cssClassPrefix: 'envoc-form-' };
package/lib/Group.d.ts CHANGED
@@ -1,13 +1,16 @@
1
1
  /// <reference types="react" />
2
2
  import { InjectedFieldProps } from './Field/InjectedFieldProps';
3
3
  export interface GroupProps extends InjectedFieldProps<any> {
4
+ /** Extra class names to apply. */
4
5
  className?: string;
5
6
  children: React.ReactNode;
6
- /** simple text label before the input */
7
+ /** Simple text label before the input. */
7
8
  label?: string;
8
- /** simple helper text after the input*/
9
+ /** Simple helper text after the input. */
9
10
  helpText?: string | React.ReactNode;
11
+ /** Whether the field should be disabled. */
10
12
  disabled?: boolean;
13
+ required?: boolean;
11
14
  }
12
- /** contains standard field bits like a label, helper text, error scroll target, validation message container, etc */
13
- export default function Group({ className, children, label, helpText, meta, input, disabled, }: GroupProps): JSX.Element;
15
+ /** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
16
+ export default function Group({ className, children, label, helpText, meta, input, disabled, required, }: GroupProps): JSX.Element;
package/lib/Group.js CHANGED
@@ -18,13 +18,14 @@ var jsx_runtime_1 = require("react/jsx-runtime");
18
18
  var classnames_1 = __importDefault(require("classnames"));
19
19
  var FormDefaults_1 = require("./FormDefaults");
20
20
  var FieldErrorScrollTarget_1 = __importDefault(require("./Field/FieldErrorScrollTarget"));
21
- /** contains standard field bits like a label, helper text, error scroll target, validation message container, etc */
21
+ /** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
22
22
  function Group(_a) {
23
23
  var _b;
24
- var className = _a.className, children = _a.children, label = _a.label, helpText = _a.helpText, meta = _a.meta, input = _a.input, disabled = _a.disabled;
24
+ 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;
25
25
  return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'group', (_b = {},
26
26
  _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
27
27
  _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled,
28
- _b)) }, { children: [(0, jsx_runtime_1.jsx)(FieldErrorScrollTarget_1.default, {}), meta.warning && ((0, jsx_runtime_1.jsx)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'warning' }, { children: meta.warning }))), (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: input.id }, { children: label })), children, meta.error && ((0, jsx_runtime_1.jsx)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'error' }, { children: meta.error }))), helpText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'help' }, { children: helpText })))] })));
28
+ _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'required'] = required,
29
+ _b)) }, { children: [(0, jsx_runtime_1.jsx)(FieldErrorScrollTarget_1.default, {}), meta.warning && ((0, jsx_runtime_1.jsx)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'warning' }, { children: meta.warning }))), (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: input.id }, { children: label })), children, meta.error && ((0, jsx_runtime_1.jsx)("div", __assign({ id: "".concat(input.id, "-error"), className: FormDefaults_1.FormDefaults.cssClassPrefix + 'error' }, { children: meta.error }))), helpText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'help' }, { children: helpText })))] })));
29
30
  }
30
31
  exports.default = Group;
@@ -1,9 +1,12 @@
1
1
  import React from 'react';
2
2
  import { InputGroupProps } from './InputGroup';
3
- export interface IconInputGroupProps extends Omit<InputGroupProps<string | undefined>, 'onChange' | 'type' | 'value'> {
3
+ export interface IconInputGroupProps extends Omit<InputGroupProps<string | undefined | null>, 'onChange' | 'type' | 'value'> {
4
4
  type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
5
+ /** Icon to display on the input group. */
5
6
  icon: React.ReactNode;
7
+ /** Text to display after the input group to give more information to the user. */
6
8
  helpText?: string;
7
9
  }
10
+ /** Input group with an icon. */
8
11
  declare const IconInputGroupWithRef: React.ComponentType<IconInputGroupProps>;
9
12
  export default IconInputGroupWithRef;
@@ -31,9 +31,10 @@ var classnames_1 = __importDefault(require("classnames"));
31
31
  var InputGroup_1 = __importDefault(require("./InputGroup"));
32
32
  var FormDefaults_1 = require("../FormDefaults");
33
33
  function IconInputGroup(_a, ref) {
34
+ var _b;
34
35
  var icon = _a.icon, className = _a.className, rest = __rest(_a, ["icon", "className"]);
35
36
  var input = rest.input;
36
- 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: input.value || '', 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, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'icon-input-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
37
38
  if (!e.target.value) {
38
39
  input.onChange(undefined);
39
40
  }
@@ -42,5 +43,6 @@ function IconInputGroup(_a, ref) {
42
43
  }
43
44
  } }, rest)) }));
44
45
  }
46
+ /** Input group with an icon. */
45
47
  var IconInputGroupWithRef = react_1.default.forwardRef(IconInputGroup);
46
48
  exports.default = IconInputGroupWithRef;
@@ -1,12 +1,12 @@
1
1
  import React, { ChangeEventHandler, LegacyRef } from 'react';
2
2
  import { InjectedFieldProps } from '../Field/InjectedFieldProps';
3
3
  import { GroupProps } from '../Group';
4
- export interface InputGroupProps<TValue> extends InjectedFieldProps<TValue>, Omit<React.HTMLProps<HTMLInputElement>, keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'>, Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
4
+ export interface InputGroupProps<TValue> extends InjectedFieldProps<TValue>, Omit<React.HTMLProps<HTMLInputElement>, keyof InjectedFieldProps<any> | 'children' | 'className' | 'label' | 'value'>, Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
5
5
  onChange: ChangeEventHandler<HTMLInputElement>;
6
- value: string | number;
6
+ value: string | number | null | undefined;
7
7
  icon?: React.ReactNode;
8
8
  }
9
- /** generic controlled <input/> wrapped by a Group */
10
- declare function InputGroup<TValue>({ input, meta, label, helpText, className, disabled, onChange, value, icon, ...rest }: InputGroupProps<TValue>, ref: LegacyRef<HTMLInputElement>): JSX.Element;
9
+ declare function InputGroup<TValue>({ input, meta, label, helpText, className, required, disabled, onChange, value, icon, ...rest }: InputGroupProps<TValue>, ref: LegacyRef<HTMLInputElement>): JSX.Element;
10
+ /** Generic controlled `<input/>` wrapped by a `<Group/>` */
11
11
  declare const InputGroupWithRef: typeof InputGroup;
12
12
  export default InputGroupWithRef;
@@ -28,12 +28,12 @@ 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
30
  var classnames_1 = __importDefault(require("classnames"));
31
- var Group_1 = __importDefault(require("../Group"));
32
31
  var FormDefaults_1 = require("../FormDefaults");
33
- /** generic controlled <input/> wrapped by a Group */
32
+ var Group_1 = __importDefault(require("../Group"));
34
33
  function InputGroup(_a, ref) {
35
- var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "disabled", "onChange", "value", "icon"]);
36
- return ((0, jsx_runtime_1.jsxs)(Group_1.default, __assign({ input: input, meta: meta, 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, { value: value, onChange: onChange, ref: ref, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'input-group') }))] })));
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, __assign({ 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') }))] })));
37
36
  }
37
+ /** Generic controlled `<input/>` wrapped by a `<Group/>` */
38
38
  var InputGroupWithRef = react_1.default.forwardRef(InputGroup);
39
39
  exports.default = InputGroupWithRef;
@@ -1,7 +1,9 @@
1
1
  import React from 'react';
2
2
  import { InputGroupProps } from './InputGroup';
3
- export interface MoneyInputGroupProps extends Omit<InputGroupProps<number | undefined>, 'onChange' | 'type' | 'value'> {
3
+ export interface MoneyInputGroupProps extends Omit<InputGroupProps<number | undefined | null>, 'onChange' | 'type' | 'value'> {
4
+ /** Custom parsing function when the value changes. */
4
5
  parseFunc?: typeof parseInt | typeof parseFloat;
5
6
  }
7
+ /** Input group for inputting money. */
6
8
  declare const MoneyInputGroupWithRef: React.FunctionComponent<MoneyInputGroupProps>;
7
9
  export default MoneyInputGroupWithRef;
@@ -43,5 +43,6 @@ function MoneyInputGroup(_a, ref) {
43
43
  }
44
44
  } })));
45
45
  }
46
+ /** Input group for inputting money. */
46
47
  var MoneyInputGroupWithRef = react_1.default.forwardRef(MoneyInputGroup);
47
48
  exports.default = MoneyInputGroupWithRef;
@@ -1,7 +1,9 @@
1
1
  import React from 'react';
2
2
  import { InputGroupProps } from './InputGroup';
3
- export interface NumberInputGroupProps extends Omit<InputGroupProps<number | undefined>, 'onChange' | 'type' | 'value'> {
3
+ export interface NumberInputGroupProps extends Omit<InputGroupProps<number | undefined | null>, 'onChange' | 'type' | 'value'> {
4
+ /** Custom parsing function when the value changes. */
4
5
  parseFunc?: typeof parseInt | typeof parseFloat;
5
6
  }
7
+ /** Standard number input group. By default allows for float values. */
6
8
  declare const NumberInputGroupWithRef: React.ComponentType<NumberInputGroupProps>;
7
9
  export default NumberInputGroupWithRef;
@@ -43,5 +43,6 @@ function NumberInputGroup(_a, ref) {
43
43
  }
44
44
  } })));
45
45
  }
46
+ /** Standard number input group. By default allows for float values. */
46
47
  var NumberInputGroupWithRef = react_1.default.forwardRef(NumberInputGroup);
47
48
  exports.default = NumberInputGroupWithRef;
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  import { InputGroupProps } from './InputGroup';
3
- export interface StringInputGroupProps extends Omit<InputGroupProps<string | undefined>, 'onChange' | 'type' | 'value'> {
3
+ export interface StringInputGroupProps extends Omit<InputGroupProps<string | undefined | null>, 'onChange' | 'type' | 'value'> {
4
4
  type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url' | 'password' | 'textarea';
5
5
  }
6
+ /** Standard string input group. */
6
7
  declare const StringInputGroupWithRef: React.ComponentType<StringInputGroupProps>;
7
8
  export default StringInputGroupWithRef;
@@ -31,9 +31,10 @@ var classnames_1 = __importDefault(require("classnames"));
31
31
  var InputGroup_1 = __importDefault(require("./InputGroup"));
32
32
  var FormDefaults_1 = require("../FormDefaults");
33
33
  function StringInputGroup(_a, ref) {
34
+ var _b;
34
35
  var className = _a.className, rest = __rest(_a, ["className"]);
35
36
  var input = rest.input;
36
- 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: input.value || '', onChange: function (e) {
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
38
  if (!e.target.value) {
38
39
  input.onChange(undefined);
39
40
  }
@@ -42,5 +43,6 @@ function StringInputGroup(_a, ref) {
42
43
  }
43
44
  } })));
44
45
  }
46
+ /** Standard string input group. */
45
47
  var StringInputGroupWithRef = react_1.default.forwardRef(StringInputGroup);
46
48
  exports.default = StringInputGroupWithRef;
@@ -1,2 +1,4 @@
1
- export declare const phoneNumber: (value: string | undefined) => string | undefined;
2
- export declare const zipCode: (value: string | undefined) => string | undefined;
1
+ /** Normalizer for converting a string into a valid phone number. */
2
+ export declare const phoneNumber: (value: string | undefined | null) => string | undefined;
3
+ /** Normalizer for converting a string into a valid zip code. Allows for XXXXX and XXXXX-XXXX format. */
4
+ export declare const zipCode: (value: string | undefined | null) => string | undefined;
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.zipCode = exports.phoneNumber = void 0;
4
+ /** Normalizer for converting a string into a valid phone number. */
4
5
  var phoneNumber = function (value) {
5
6
  if (!value) {
6
7
  return undefined;
@@ -22,6 +23,7 @@ var phoneNumber = function (value) {
22
23
  return onlyNums;
23
24
  };
24
25
  exports.phoneNumber = phoneNumber;
26
+ /** Normalizer for converting a string into a valid zip code. Allows for XXXXX and XXXXX-XXXX format. */
25
27
  var zipCode = function (value) {
26
28
  if (!value) {
27
29
  return undefined;
@@ -1,7 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  import { SelectOption } from './SelectGroup';
3
3
  import { SelectGroupPropsHelper } from './SelectGroupPropsHelper';
4
- export interface BooleanSelectGroupProps extends Omit<SelectGroupPropsHelper<boolean>, 'options'> {
4
+ export interface BooleanSelectGroupProps extends Omit<SelectGroupPropsHelper<boolean | undefined | null>, 'options'> {
5
5
  options?: SelectOption<boolean>[];
6
6
  }
7
+ /** A `<SelectGroup/>` dropdown with two options. Default options are 'Yes' and 'No' with values of `true` and `false`. */
7
8
  export declare function BooleanSelectGroup(props: BooleanSelectGroupProps): JSX.Element;
@@ -27,6 +27,7 @@ var booleanOptions = [
27
27
  value: false,
28
28
  },
29
29
  ];
30
+ /** A `<SelectGroup/>` dropdown with two options. Default options are 'Yes' and 'No' with values of `true` and `false`. */
30
31
  function BooleanSelectGroup(props) {
31
32
  var _a;
32
33
  return ((0, jsx_runtime_1.jsx)(SelectGroup_1.default, __assign({ multiple: false }, props, { options: (_a = props.options) !== null && _a !== void 0 ? _a : booleanOptions })));