@shipengine/formik-giger 0.2.0 → 0.4.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 (67) hide show
  1. package/dist/esm/Checkbox.d.ts +13 -0
  2. package/dist/esm/Checkbox.js +57 -0
  3. package/dist/esm/Checkbox.js.map +1 -0
  4. package/dist/esm/DatePicker.d.ts +11 -0
  5. package/dist/esm/DatePicker.js +51 -0
  6. package/dist/esm/DatePicker.js.map +1 -0
  7. package/dist/esm/FocusOnError.d.ts +21 -0
  8. package/dist/esm/FocusOnError.js +70 -0
  9. package/dist/esm/FocusOnError.js.map +1 -0
  10. package/dist/esm/FormField.d.ts +17 -0
  11. package/dist/esm/FormField.js +43 -0
  12. package/dist/esm/FormField.js.map +1 -0
  13. package/dist/esm/Input.d.ts +11 -0
  14. package/dist/esm/Input.js +48 -0
  15. package/dist/esm/Input.js.map +1 -0
  16. package/dist/esm/Radio.d.ts +11 -0
  17. package/dist/esm/Radio.js +49 -0
  18. package/dist/esm/Radio.js.map +1 -0
  19. package/dist/esm/RadioGroup.d.ts +11 -0
  20. package/dist/esm/RadioGroup.js +47 -0
  21. package/dist/esm/RadioGroup.js.map +1 -0
  22. package/dist/esm/Select.d.ts +13 -0
  23. package/dist/esm/Select.js +68 -0
  24. package/dist/esm/Select.js.map +1 -0
  25. package/dist/esm/SelectAutocomplete.d.ts +11 -0
  26. package/dist/esm/SelectAutocomplete.js +57 -0
  27. package/dist/esm/SelectAutocomplete.js.map +1 -0
  28. package/dist/esm/Textarea.d.ts +11 -0
  29. package/dist/esm/Textarea.js +48 -0
  30. package/dist/esm/Textarea.js.map +1 -0
  31. package/dist/esm/index.d.ts +10 -0
  32. package/dist/esm/index.js +11 -0
  33. package/dist/esm/index.js.map +1 -0
  34. package/dist/lib/Checkbox.d.ts +13 -0
  35. package/dist/lib/Checkbox.js +62 -0
  36. package/dist/lib/Checkbox.js.map +1 -0
  37. package/dist/lib/DatePicker.d.ts +11 -0
  38. package/dist/lib/DatePicker.js +56 -0
  39. package/dist/lib/DatePicker.js.map +1 -0
  40. package/dist/lib/FocusOnError.d.ts +21 -0
  41. package/dist/lib/FocusOnError.js +79 -0
  42. package/dist/lib/FocusOnError.js.map +1 -0
  43. package/dist/lib/FormField.d.ts +17 -0
  44. package/dist/lib/FormField.js +47 -0
  45. package/dist/lib/FormField.js.map +1 -0
  46. package/dist/lib/Input.d.ts +11 -0
  47. package/dist/lib/Input.js +53 -0
  48. package/dist/lib/Input.js.map +1 -0
  49. package/dist/lib/Radio.d.ts +11 -0
  50. package/dist/lib/Radio.js +54 -0
  51. package/dist/lib/Radio.js.map +1 -0
  52. package/dist/lib/RadioGroup.d.ts +11 -0
  53. package/dist/lib/RadioGroup.js +52 -0
  54. package/dist/lib/RadioGroup.js.map +1 -0
  55. package/dist/lib/Select.d.ts +13 -0
  56. package/dist/lib/Select.js +73 -0
  57. package/dist/lib/Select.js.map +1 -0
  58. package/dist/lib/SelectAutocomplete.d.ts +11 -0
  59. package/dist/lib/SelectAutocomplete.js +62 -0
  60. package/dist/lib/SelectAutocomplete.js.map +1 -0
  61. package/dist/lib/Textarea.d.ts +11 -0
  62. package/dist/lib/Textarea.js +53 -0
  63. package/dist/lib/Textarea.js.map +1 -0
  64. package/dist/lib/index.d.ts +10 -0
  65. package/dist/lib/index.js +37 -0
  66. package/dist/lib/index.js.map +1 -0
  67. package/package.json +4 -4
@@ -0,0 +1,11 @@
1
+ import { ISelectAutocompleteOption, ISelectAutocomplete } from '@shipengine/giger';
2
+ import { FieldProps } from 'formik';
3
+
4
+ type SelectAutocompleteProps<FormValues = unknown> = FieldProps<ISelectAutocompleteOption | null, FormValues> & Omit<ISelectAutocomplete, 'name' | 'value'>;
5
+ declare function fieldToSelectAutocomplete<FormValues = unknown>({ disabled, field: { onBlur: fieldOnBlur, onChange: onFormikChange, ...field }, form: { isSubmitting, touched, errors }, onBlur, onChange, ...props }: SelectAutocompleteProps<FormValues>): ISelectAutocomplete;
6
+ declare function SelectAutocomplete<FormValues = unknown>({ ...props }: SelectAutocompleteProps<FormValues>): JSX.Element;
7
+ declare namespace SelectAutocomplete {
8
+ var displayName: string;
9
+ }
10
+
11
+ export { SelectAutocomplete, SelectAutocompleteProps, fieldToSelectAutocomplete };
@@ -0,0 +1,57 @@
1
+ import { SelectAutocomplete as SelectAutocomplete$1 } from '@shipengine/giger';
2
+ import { getIn } from 'formik';
3
+ import { jsx } from '@emotion/react/jsx-runtime';
4
+
5
+ function fieldToSelectAutocomplete(_ref) {
6
+ let {
7
+ disabled,
8
+ field: {
9
+ onBlur: fieldOnBlur,
10
+ onChange: onFormikChange,
11
+ ...field
12
+ },
13
+ form: {
14
+ isSubmitting,
15
+ touched,
16
+ errors
17
+ },
18
+ onBlur,
19
+ onChange,
20
+ ...props
21
+ } = _ref;
22
+ const handleChange = (fieldName, value) => {
23
+ onChange === null || onChange === void 0 ? void 0 : onChange(fieldName, value);
24
+ onFormikChange({
25
+ target: {
26
+ name: field.name,
27
+ value
28
+ }
29
+ });
30
+ };
31
+ return {
32
+ isInvalid: getIn(touched, field.name) && !!getIn(errors, field.name),
33
+ disabled: disabled || isSubmitting,
34
+ onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : function () {
35
+ fieldOnBlur({
36
+ target: {
37
+ name: field.name
38
+ }
39
+ });
40
+ },
41
+ onChange: handleChange,
42
+ ...field,
43
+ ...props
44
+ };
45
+ }
46
+ function SelectAutocomplete(_ref2) {
47
+ let {
48
+ ...props
49
+ } = _ref2;
50
+ return jsx(SelectAutocomplete$1, {
51
+ ...fieldToSelectAutocomplete(props)
52
+ });
53
+ }
54
+ SelectAutocomplete.displayName = 'FormikSelectAutocomplete';
55
+
56
+ export { SelectAutocomplete, fieldToSelectAutocomplete };
57
+ //# sourceMappingURL=SelectAutocomplete.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SelectAutocomplete.js","sources":["../../src/SelectAutocomplete.tsx"],"sourcesContent":["import {\n ISelectAutocompleteOption,\n SelectAutocomplete as GigerSelectAutocomplete,\n ISelectAutocomplete as IGigerSelectAutocomplete,\n} from '@shipengine/giger';\n\nimport { FieldProps, getIn } from 'formik';\n\nexport type SelectAutocompleteProps<FormValues = unknown> = FieldProps<ISelectAutocompleteOption | null, FormValues> &\n Omit<IGigerSelectAutocomplete, 'name' | 'value'>;\n\nexport function fieldToSelectAutocomplete<FormValues = unknown>({\n disabled,\n field: { onBlur: fieldOnBlur, onChange: onFormikChange, ...field },\n form: { isSubmitting, touched, errors },\n onBlur,\n onChange,\n ...props\n}: SelectAutocompleteProps<FormValues>): IGigerSelectAutocomplete {\n const handleChange = (fieldName: string, value: ISelectAutocompleteOption | null) => {\n onChange?.(fieldName, value);\n onFormikChange({ target: { name: field.name, value } });\n };\n\n return {\n isInvalid: getIn(touched, field.name) && !!getIn(errors, field.name),\n disabled: disabled || isSubmitting,\n onBlur:\n onBlur ??\n function () {\n fieldOnBlur({ target: { name: field.name } });\n },\n onChange: handleChange,\n ...field,\n ...props,\n };\n}\n\nexport function SelectAutocomplete<FormValues = unknown>({\n ...props\n}: SelectAutocompleteProps<FormValues>): JSX.Element {\n return <GigerSelectAutocomplete {...fieldToSelectAutocomplete(props)} />;\n}\n\nSelectAutocomplete.displayName = 'FormikSelectAutocomplete';\n"],"names":["fieldToSelectAutocomplete","_ref","disabled","field","onBlur","fieldOnBlur","onChange","onFormikChange","form","isSubmitting","touched","errors","props","handleChange","fieldName","value","target","name","isInvalid","getIn","SelectAutocomplete","_ref2","_jsx","GigerSelectAutocomplete","displayName"],"mappings":";;;;AAWO,SAASA,yBAAyBA,CAAAC,IAAA,EAOyB;EAAA,IAPF;IAC5DC,QAAQ;AACRC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAEC,WAAW;AAAEC,MAAAA,QAAQ,EAAEC,cAAc;MAAE,GAAGJ,KAAAA;KAAO;AAClEK,IAAAA,IAAI,EAAE;MAAEC,YAAY;MAAEC,OAAO;AAAEC,MAAAA,MAAAA;KAAQ;IACvCP,MAAM;IACNE,QAAQ;IACR,GAAGM,KAAAA;AAC8B,GAAC,GAAAX,IAAA,CAAA;AAClC,EAAA,MAAMY,YAAY,GAAGA,CAACC,SAAiB,EAAEC,KAAuC,KAAK;IACjFT,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,QAAQ,CAAGQ,SAAS,EAAEC,KAAK,CAAC,CAAA;AAC5BR,IAAAA,cAAc,CAAC;AAAES,MAAAA,MAAM,EAAE;QAAEC,IAAI,EAAEd,KAAK,CAACc,IAAI;AAAEF,QAAAA,KAAAA;AAAM,OAAA;AAAE,KAAC,CAAC,CAAA;GAC1D,CAAA;EAED,OAAO;AACHG,IAAAA,SAAS,EAAEC,KAAK,CAACT,OAAO,EAAEP,KAAK,CAACc,IAAI,CAAC,IAAI,CAAC,CAACE,KAAK,CAACR,MAAM,EAAER,KAAK,CAACc,IAAI,CAAC;IACpEf,QAAQ,EAAEA,QAAQ,IAAIO,YAAY;AAClCL,IAAAA,MAAM,EACFA,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,MAAM,GACN,YAAY;AACRC,MAAAA,WAAW,CAAC;AAAEW,QAAAA,MAAM,EAAE;UAAEC,IAAI,EAAEd,KAAK,CAACc,IAAAA;AAAK,SAAA;AAAE,OAAC,CAAC,CAAA;KAChD;AACLX,IAAAA,QAAQ,EAAEO,YAAY;AACtB,IAAA,GAAGV,KAAK;IACR,GAAGS,KAAAA;GACN,CAAA;AACL,CAAA;AAEO,SAASQ,kBAAkBA,CAAAC,KAAA,EAEmB;EAAA,IAFI;IACrD,GAAGT,KAAAA;AAC8B,GAAC,GAAAS,KAAA,CAAA;EAClC,OAAOC,GAAA,CAACC,oBAAuB,EAAA;IAAA,GAAKvB,yBAAyB,CAACY,KAAK,CAAA;AAAC,GAAG,CAAC,CAAA;AAC5E,CAAA;AAEAQ,kBAAkB,CAACI,WAAW,GAAG,0BAA0B;;;;"}
@@ -0,0 +1,11 @@
1
+ import { FieldProps } from 'formik';
2
+ import { ITextareaProps } from '@shipengine/giger';
3
+
4
+ type TextareaProps<FormValues = unknown> = FieldProps<string | number | undefined, FormValues> & Omit<ITextareaProps, 'name' | 'value'>;
5
+ declare function fieldToTextarea<FormValues = unknown>({ disabled, field: { onBlur: fieldOnBlur, onChange: onFormikChange, ...field }, form: { isSubmitting, touched, errors }, onBlur, onChange, ...props }: TextareaProps<FormValues>): ITextareaProps;
6
+ declare function Textarea<FormValues = unknown>({ ...props }: TextareaProps<FormValues>): JSX.Element;
7
+ declare namespace Textarea {
8
+ var displayName: string;
9
+ }
10
+
11
+ export { Textarea, TextareaProps, fieldToTextarea };
@@ -0,0 +1,48 @@
1
+ import { getIn } from 'formik';
2
+ import { Textarea as Textarea$1 } from '@shipengine/giger';
3
+ import { jsx } from '@emotion/react/jsx-runtime';
4
+
5
+ function fieldToTextarea(_ref) {
6
+ let {
7
+ disabled,
8
+ field: {
9
+ onBlur: fieldOnBlur,
10
+ onChange: onFormikChange,
11
+ ...field
12
+ },
13
+ form: {
14
+ isSubmitting,
15
+ touched,
16
+ errors
17
+ },
18
+ onBlur,
19
+ onChange,
20
+ ...props
21
+ } = _ref;
22
+ const handleChange = e => {
23
+ onChange === null || onChange === void 0 ? void 0 : onChange(e);
24
+ onFormikChange(e);
25
+ };
26
+ return {
27
+ isInvalid: getIn(touched, field.name) && !!getIn(errors, field.name),
28
+ disabled: disabled || isSubmitting,
29
+ onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : function (e) {
30
+ fieldOnBlur(e !== null && e !== void 0 ? e : field.name);
31
+ },
32
+ onChange: handleChange,
33
+ ...field,
34
+ ...props
35
+ };
36
+ }
37
+ function Textarea(_ref2) {
38
+ let {
39
+ ...props
40
+ } = _ref2;
41
+ return jsx(Textarea$1, {
42
+ ...fieldToTextarea(props)
43
+ });
44
+ }
45
+ Textarea.displayName = 'FormikTextarea';
46
+
47
+ export { Textarea, fieldToTextarea };
48
+ //# sourceMappingURL=Textarea.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Textarea.js","sources":["../../src/Textarea.tsx"],"sourcesContent":["import { FieldProps, getIn } from 'formik';\nimport { ChangeEvent, FocusEvent } from 'react';\n\nimport { Textarea as GigerTextarea, ITextareaProps as IGigerTextareaProps } from '@shipengine/giger';\n\nexport type TextareaProps<FormValues = unknown> = FieldProps<string | number | undefined, FormValues> &\n Omit<IGigerTextareaProps, 'name' | 'value'>;\n\nexport function fieldToTextarea<FormValues = unknown>({\n disabled,\n field: { onBlur: fieldOnBlur, onChange: onFormikChange, ...field },\n form: { isSubmitting, touched, errors },\n onBlur,\n onChange,\n ...props\n}: TextareaProps<FormValues>): IGigerTextareaProps {\n const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(e);\n onFormikChange(e);\n };\n\n return {\n isInvalid: getIn(touched, field.name) && !!getIn(errors, field.name),\n disabled: disabled || isSubmitting,\n onBlur:\n onBlur ??\n function (e: FocusEvent) {\n fieldOnBlur(e ?? field.name);\n },\n onChange: handleChange,\n ...field,\n ...props,\n };\n}\n\nexport function Textarea<FormValues = unknown>({ ...props }: TextareaProps<FormValues>): JSX.Element {\n return <GigerTextarea {...fieldToTextarea(props)} />;\n}\n\nTextarea.displayName = 'FormikTextarea';\n"],"names":["fieldToTextarea","_ref","disabled","field","onBlur","fieldOnBlur","onChange","onFormikChange","form","isSubmitting","touched","errors","props","handleChange","e","isInvalid","getIn","name","Textarea","_ref2","_jsx","GigerTextarea","displayName"],"mappings":";;;;AAQO,SAASA,eAAeA,CAAAC,IAAA,EAOoB;EAAA,IAPG;IAClDC,QAAQ;AACRC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAEC,WAAW;AAAEC,MAAAA,QAAQ,EAAEC,cAAc;MAAE,GAAGJ,KAAAA;KAAO;AAClEK,IAAAA,IAAI,EAAE;MAAEC,YAAY;MAAEC,OAAO;AAAEC,MAAAA,MAAAA;KAAQ;IACvCP,MAAM;IACNE,QAAQ;IACR,GAAGM,KAAAA;AACoB,GAAC,GAAAX,IAAA,CAAA;EACxB,MAAMY,YAAY,GAAIC,CAAmC,IAAK;AAC1DR,IAAAA,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,QAAQ,CAAGQ,CAAC,CAAC,CAAA;IACbP,cAAc,CAACO,CAAC,CAAC,CAAA;GACpB,CAAA;EAED,OAAO;AACHC,IAAAA,SAAS,EAAEC,KAAK,CAACN,OAAO,EAAEP,KAAK,CAACc,IAAI,CAAC,IAAI,CAAC,CAACD,KAAK,CAACL,MAAM,EAAER,KAAK,CAACc,IAAI,CAAC;IACpEf,QAAQ,EAAEA,QAAQ,IAAIO,YAAY;IAClCL,MAAM,EACFA,MAAM,KAANA,IAAAA,IAAAA,MAAM,cAANA,MAAM,GACN,UAAUU,CAAa,EAAE;MACrBT,WAAW,CAACS,CAAC,KAAA,IAAA,IAADA,CAAC,KAAA,KAAA,CAAA,GAADA,CAAC,GAAIX,KAAK,CAACc,IAAI,CAAC,CAAA;KAC/B;AACLX,IAAAA,QAAQ,EAAEO,YAAY;AACtB,IAAA,GAAGV,KAAK;IACR,GAAGS,KAAAA;GACN,CAAA;AACL,CAAA;AAEO,SAASM,QAAQA,CAAAC,KAAA,EAA6E;EAAA,IAAtD;IAAE,GAAGP,KAAAA;AAAiC,GAAC,GAAAO,KAAA,CAAA;EAClF,OAAOC,GAAA,CAACC,UAAa,EAAA;IAAA,GAAKrB,eAAe,CAACY,KAAK,CAAA;AAAC,GAAG,CAAC,CAAA;AACxD,CAAA;AAEAM,QAAQ,CAACI,WAAW,GAAG,gBAAgB;;;;"}
@@ -0,0 +1,10 @@
1
+ export { Input, InputProps, fieldToInput } from './Input.js';
2
+ export { Checkbox, CheckboxProps, fieldToCheckbox } from './Checkbox.js';
3
+ export { DatePicker, IDatePickerProps, fieldToDateField } from './DatePicker.js';
4
+ export { FocusOnError, IFocusOnErrorProps, useFocusOnError } from './FocusOnError.js';
5
+ export { FormField } from './FormField.js';
6
+ export { Textarea, TextareaProps, fieldToTextarea } from './Textarea.js';
7
+ export { SelectAutocomplete, SelectAutocompleteProps, fieldToSelectAutocomplete } from './SelectAutocomplete.js';
8
+ export { Select, SelectProps, fieldToSelect } from './Select.js';
9
+ export { RadioGroup, RadioGroupProps, fieldToRadioGroup } from './RadioGroup.js';
10
+ export { Radio, RadioProps, fieldToRadio } from './Radio.js';
@@ -0,0 +1,11 @@
1
+ export { Input, fieldToInput } from './Input.js';
2
+ export { Checkbox, fieldToCheckbox } from './Checkbox.js';
3
+ export { DatePicker, fieldToDateField } from './DatePicker.js';
4
+ export { FocusOnError, useFocusOnError } from './FocusOnError.js';
5
+ export { FormField } from './FormField.js';
6
+ export { Textarea, fieldToTextarea } from './Textarea.js';
7
+ export { SelectAutocomplete, fieldToSelectAutocomplete } from './SelectAutocomplete.js';
8
+ export { Select, fieldToSelect } from './Select.js';
9
+ export { RadioGroup, fieldToRadioGroup } from './RadioGroup.js';
10
+ export { Radio, fieldToRadio } from './Radio.js';
11
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
@@ -0,0 +1,13 @@
1
+ import { FieldProps } from 'formik';
2
+ import { ICheckboxProps } from '@shipengine/giger';
3
+
4
+ interface CheckboxProps extends FieldProps, Omit<ICheckboxProps, 'name' | 'form' | 'touched' | 'checked' | 'defaultChecked' | 'type'> {
5
+ type?: string;
6
+ }
7
+ declare function fieldToCheckbox({ disabled, field: { onBlur: fieldOnBlur, value, onChange: onFormikChange, ...field }, form: { isSubmitting, errors, touched }, onBlur, onChange, ...props }: CheckboxProps): ICheckboxProps;
8
+ declare function Checkbox(props: CheckboxProps): JSX.Element;
9
+ declare namespace Checkbox {
10
+ var displayName: string;
11
+ }
12
+
13
+ export { Checkbox, CheckboxProps, fieldToCheckbox };
@@ -0,0 +1,62 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var formik = require('formik');
6
+ var giger = require('@shipengine/giger');
7
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
8
+
9
+ function fieldToCheckbox(_ref) {
10
+ let {
11
+ disabled,
12
+ field: {
13
+ onBlur: fieldOnBlur,
14
+ value,
15
+ onChange: onFormikChange,
16
+ ...field
17
+ },
18
+ form: {
19
+ isSubmitting,
20
+ errors,
21
+ touched
22
+ },
23
+ onBlur,
24
+ onChange,
25
+ ...props
26
+ } = _ref;
27
+ /**
28
+ * Checkbox can be used as a single item and as a part of multiple choices
29
+ * (sharing the "name" attribute) In that case the field value will be an array
30
+ * as multiple inputs have the same name.
31
+ * For all other scenarios "value" will be the input value (string, boolean, number ...)
32
+ */
33
+ const checkboxIsPartOfMultiple = Array.isArray(value);
34
+ const indeterminate = !checkboxIsPartOfMultiple && value == null;
35
+ const handleChange = e => {
36
+ onChange === null || onChange === void 0 ? void 0 : onChange(e);
37
+ onFormikChange(e);
38
+ };
39
+ return {
40
+ isInvalid: formik.getIn(touched, field.name) && !!formik.getIn(errors, field.name),
41
+ disabled: disabled || isSubmitting,
42
+ checked: checkboxIsPartOfMultiple ? value.includes(props.value) : Boolean(value),
43
+ value,
44
+ indeterminate,
45
+ onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : function (e) {
46
+ fieldOnBlur(e !== null && e !== void 0 ? e : field.name);
47
+ },
48
+ onChange: handleChange,
49
+ ...field,
50
+ ...props
51
+ };
52
+ }
53
+ function Checkbox(props) {
54
+ return jsxRuntime.jsx(giger.Checkbox, {
55
+ ...fieldToCheckbox(props)
56
+ });
57
+ }
58
+ Checkbox.displayName = 'FormikCheckbox';
59
+
60
+ exports.Checkbox = Checkbox;
61
+ exports.fieldToCheckbox = fieldToCheckbox;
62
+ //# sourceMappingURL=Checkbox.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.js","sources":["../../src/Checkbox.tsx"],"sourcesContent":["import { FieldProps, getIn } from 'formik';\nimport { ChangeEvent, FocusEvent } from 'react';\n\nimport { Checkbox as GigerCheckbox, ICheckboxProps as GigerCheckboxProps } from '@shipengine/giger';\n\nexport interface CheckboxProps\n extends FieldProps,\n Omit<\n GigerCheckboxProps,\n | 'name'\n | 'form'\n | 'touched'\n | 'checked'\n | 'defaultChecked'\n // Excluded for conflict with Field type\n | 'type'\n > {\n type?: string;\n}\n\nexport function fieldToCheckbox({\n disabled,\n field: { onBlur: fieldOnBlur, value, onChange: onFormikChange, ...field },\n form: { isSubmitting, errors, touched },\n onBlur,\n onChange,\n ...props\n}: CheckboxProps): GigerCheckboxProps {\n /**\n * Checkbox can be used as a single item and as a part of multiple choices\n * (sharing the \"name\" attribute) In that case the field value will be an array\n * as multiple inputs have the same name.\n * For all other scenarios \"value\" will be the input value (string, boolean, number ...)\n */\n const checkboxIsPartOfMultiple = Array.isArray(value);\n\n const indeterminate = !checkboxIsPartOfMultiple && value == null;\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n onFormikChange(e);\n };\n\n return {\n isInvalid: getIn(touched, field.name) && !!getIn(errors, field.name),\n disabled: disabled || isSubmitting,\n checked: checkboxIsPartOfMultiple ? value.includes(props.value) : Boolean(value),\n value,\n indeterminate,\n onBlur:\n onBlur ??\n function (e: FocusEvent) {\n fieldOnBlur(e ?? field.name);\n },\n onChange: handleChange,\n ...field,\n ...props,\n };\n}\n\nexport function Checkbox(props: CheckboxProps): JSX.Element {\n return <GigerCheckbox {...fieldToCheckbox(props)} />;\n}\n\nCheckbox.displayName = 'FormikCheckbox';\n"],"names":["fieldToCheckbox","_ref","disabled","field","onBlur","fieldOnBlur","value","onChange","onFormikChange","form","isSubmitting","errors","touched","props","checkboxIsPartOfMultiple","Array","isArray","indeterminate","handleChange","e","isInvalid","getIn","name","checked","includes","Boolean","Checkbox","_jsx","GigerCheckbox","displayName"],"mappings":";;;;;;;;AAoBO,SAASA,eAAeA,CAAAC,IAAA,EAOO;EAAA,IAPN;IAC5BC,QAAQ;AACRC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAEC,WAAW;MAAEC,KAAK;AAAEC,MAAAA,QAAQ,EAAEC,cAAc;MAAE,GAAGL,KAAAA;KAAO;AACzEM,IAAAA,IAAI,EAAE;MAAEC,YAAY;MAAEC,MAAM;AAAEC,MAAAA,OAAAA;KAAS;IACvCR,MAAM;IACNG,QAAQ;IACR,GAAGM,KAAAA;AACQ,GAAC,GAAAZ,IAAA,CAAA;AACZ;AACJ;AACA;AACA;AACA;AACA;AACI,EAAA,MAAMa,wBAAwB,GAAGC,KAAK,CAACC,OAAO,CAACV,KAAK,CAAC,CAAA;AAErD,EAAA,MAAMW,aAAa,GAAG,CAACH,wBAAwB,IAAIR,KAAK,IAAI,IAAI,CAAA;EAEhE,MAAMY,YAAY,GAAIC,CAAgC,IAAK;AACvDZ,IAAAA,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,QAAQ,CAAGY,CAAC,CAAC,CAAA;IACbX,cAAc,CAACW,CAAC,CAAC,CAAA;GACpB,CAAA;EAED,OAAO;AACHC,IAAAA,SAAS,EAAEC,YAAK,CAACT,OAAO,EAAET,KAAK,CAACmB,IAAI,CAAC,IAAI,CAAC,CAACD,YAAK,CAACV,MAAM,EAAER,KAAK,CAACmB,IAAI,CAAC;IACpEpB,QAAQ,EAAEA,QAAQ,IAAIQ,YAAY;AAClCa,IAAAA,OAAO,EAAET,wBAAwB,GAAGR,KAAK,CAACkB,QAAQ,CAACX,KAAK,CAACP,KAAK,CAAC,GAAGmB,OAAO,CAACnB,KAAK,CAAC;IAChFA,KAAK;IACLW,aAAa;IACbb,MAAM,EACFA,MAAM,KAANA,IAAAA,IAAAA,MAAM,cAANA,MAAM,GACN,UAAUe,CAAa,EAAE;MACrBd,WAAW,CAACc,CAAC,KAAA,IAAA,IAADA,CAAC,KAAA,KAAA,CAAA,GAADA,CAAC,GAAIhB,KAAK,CAACmB,IAAI,CAAC,CAAA;KAC/B;AACLf,IAAAA,QAAQ,EAAEW,YAAY;AACtB,IAAA,GAAGf,KAAK;IACR,GAAGU,KAAAA;GACN,CAAA;AACL,CAAA;AAEO,SAASa,QAAQA,CAACb,KAAoB,EAAe;EACxD,OAAOc,cAAA,CAACC,cAAa,EAAA;IAAA,GAAK5B,eAAe,CAACa,KAAK,CAAA;AAAC,GAAG,CAAC,CAAA;AACxD,CAAA;AAEAa,QAAQ,CAACG,WAAW,GAAG,gBAAgB;;;;;"}
@@ -0,0 +1,11 @@
1
+ import { FieldProps } from 'formik';
2
+ import { IDatePickerProps as IDatePickerProps$1, WithCommonProps } from '@shipengine/giger';
3
+
4
+ type IDatePickerProps<FormValues = unknown> = FieldProps<Date | null, FormValues> & Omit<IDatePickerProps$1, 'name'> & WithCommonProps<unknown>;
5
+ declare function fieldToDateField<FormValues = unknown>({ disabled, field: { name, onChange: onFormikChange, ...field }, form: { isSubmitting, errors, touched, setFieldTouched }, onClickConfirm, ...props }: IDatePickerProps<FormValues>): IDatePickerProps$1;
6
+ declare function DatePicker<FormValues = unknown>({ ...props }: IDatePickerProps<FormValues>): JSX.Element;
7
+ declare namespace DatePicker {
8
+ var displayName: string;
9
+ }
10
+
11
+ export { DatePicker, IDatePickerProps, fieldToDateField };
@@ -0,0 +1,56 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var formik = require('formik');
6
+ var giger = require('@shipengine/giger');
7
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
8
+
9
+ function fieldToDateField(_ref) {
10
+ let {
11
+ disabled,
12
+ field: {
13
+ name,
14
+ onChange: onFormikChange,
15
+ ...field
16
+ },
17
+ form: {
18
+ isSubmitting,
19
+ errors,
20
+ touched,
21
+ setFieldTouched
22
+ },
23
+ onClickConfirm,
24
+ ...props
25
+ } = _ref;
26
+ const handleClickConfirm = date => {
27
+ setFieldTouched(name);
28
+ onFormikChange({
29
+ target: {
30
+ name,
31
+ value: date
32
+ }
33
+ });
34
+ onClickConfirm === null || onClickConfirm === void 0 ? void 0 : onClickConfirm(date);
35
+ };
36
+ return {
37
+ disabled: disabled || isSubmitting,
38
+ isInvalid: formik.getIn(touched, name) && formik.getIn(errors, name),
39
+ onClickConfirm: handleClickConfirm,
40
+ ...field,
41
+ ...props
42
+ };
43
+ }
44
+ function DatePicker(_ref2) {
45
+ let {
46
+ ...props
47
+ } = _ref2;
48
+ return jsxRuntime.jsx(giger.DatePicker, {
49
+ ...fieldToDateField(props)
50
+ });
51
+ }
52
+ DatePicker.displayName = 'FormikDatePicker';
53
+
54
+ exports.DatePicker = DatePicker;
55
+ exports.fieldToDateField = fieldToDateField;
56
+ //# sourceMappingURL=DatePicker.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DatePicker.js","sources":["../../src/DatePicker.tsx"],"sourcesContent":["import { FieldProps, getIn } from 'formik';\n\nimport {\n WithCommonProps,\n DatePicker as GigerDatePicker,\n IDatePickerProps as GigerDatePickerProps,\n} from '@shipengine/giger';\n\nexport type IDatePickerProps<FormValues = unknown> = FieldProps<Date | null, FormValues> &\n Omit<GigerDatePickerProps, 'name'> &\n WithCommonProps<unknown>;\n\nexport function fieldToDateField<FormValues = unknown>({\n disabled,\n field: { name, onChange: onFormikChange, ...field },\n form: { isSubmitting, errors, touched, setFieldTouched },\n onClickConfirm,\n ...props\n}: IDatePickerProps<FormValues>): GigerDatePickerProps {\n const handleClickConfirm = (date: Date | [Date, Date]) => {\n setFieldTouched(name);\n onFormikChange({ target: { name, value: date } });\n onClickConfirm?.(date);\n };\n\n return {\n disabled: disabled || isSubmitting,\n isInvalid: getIn(touched, name) && getIn(errors, name),\n onClickConfirm: handleClickConfirm,\n ...field,\n ...props,\n };\n}\n\nexport function DatePicker<FormValues = unknown>({ ...props }: IDatePickerProps<FormValues>): JSX.Element {\n return <GigerDatePicker {...fieldToDateField(props)} />;\n}\n\nDatePicker.displayName = 'FormikDatePicker';\n"],"names":["fieldToDateField","_ref","disabled","field","name","onChange","onFormikChange","form","isSubmitting","errors","touched","setFieldTouched","onClickConfirm","props","handleClickConfirm","date","target","value","isInvalid","getIn","DatePicker","_ref2","_jsx","GigerDatePicker","displayName"],"mappings":";;;;;;;;AAYO,SAASA,gBAAgBA,CAAAC,IAAA,EAMuB;EAAA,IANA;IACnDC,QAAQ;AACRC,IAAAA,KAAK,EAAE;MAAEC,IAAI;AAAEC,MAAAA,QAAQ,EAAEC,cAAc;MAAE,GAAGH,KAAAA;KAAO;AACnDI,IAAAA,IAAI,EAAE;MAAEC,YAAY;MAAEC,MAAM;MAAEC,OAAO;AAAEC,MAAAA,eAAAA;KAAiB;IACxDC,cAAc;IACd,GAAGC,KAAAA;AACuB,GAAC,GAAAZ,IAAA,CAAA;EAC3B,MAAMa,kBAAkB,GAAIC,IAAyB,IAAK;IACtDJ,eAAe,CAACP,IAAI,CAAC,CAAA;AACrBE,IAAAA,cAAc,CAAC;AAAEU,MAAAA,MAAM,EAAE;QAAEZ,IAAI;AAAEa,QAAAA,KAAK,EAAEF,IAAAA;AAAK,OAAA;AAAE,KAAC,CAAC,CAAA;AACjDH,IAAAA,cAAc,aAAdA,cAAc,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAdA,cAAc,CAAGG,IAAI,CAAC,CAAA;GACzB,CAAA;EAED,OAAO;IACHb,QAAQ,EAAEA,QAAQ,IAAIM,YAAY;AAClCU,IAAAA,SAAS,EAAEC,YAAK,CAACT,OAAO,EAAEN,IAAI,CAAC,IAAIe,YAAK,CAACV,MAAM,EAAEL,IAAI,CAAC;AACtDQ,IAAAA,cAAc,EAAEE,kBAAkB;AAClC,IAAA,GAAGX,KAAK;IACR,GAAGU,KAAAA;GACN,CAAA;AACL,CAAA;AAEO,SAASO,UAAUA,CAAAC,KAAA,EAAgF;EAAA,IAAzD;IAAE,GAAGR,KAAAA;AAAoC,GAAC,GAAAQ,KAAA,CAAA;EACvF,OAAOC,cAAA,CAACC,gBAAe,EAAA;IAAA,GAAKvB,gBAAgB,CAACa,KAAK,CAAA;AAAC,GAAG,CAAC,CAAA;AAC3D,CAAA;AAEAO,UAAU,CAACI,WAAW,GAAG,kBAAkB;;;;;"}
@@ -0,0 +1,21 @@
1
+ interface IFocusOnErrorProps {
2
+ initialValidation?: boolean;
3
+ focusDelay?: number;
4
+ }
5
+ /**
6
+ * Use FocusOnError when Formik is in the same component and you don't have
7
+ * access to useFormikContext, otherwise useFocusOnError can be used.
8
+ */
9
+ declare function FocusOnError({ initialValidation, focusDelay }: IFocusOnErrorProps): JSX.Element;
10
+ /**
11
+ * Focus the first element with error in the form after triggering Formik onSubmit.
12
+ * If used with initialValidation `true`, it will focus after form initialization.
13
+ * * Important * The order is based on the errors object, and the errors key order is based on
14
+ * the order used in the validation schema.
15
+ *
16
+ * @param initialValidation boolean true if the focus is desired on form initialization
17
+ * @param focusDelay number milliseconds to delay the focus on the input
18
+ */
19
+ declare function useFocusOnError(initialValidation?: boolean, focusDelay?: number): void;
20
+
21
+ export { FocusOnError, IFocusOnErrorProps, useFocusOnError };
@@ -0,0 +1,79 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var flatten = require('flat');
6
+ var react = require('react');
7
+ var formik = require('formik');
8
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
9
+
10
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
11
+
12
+ var flatten__default = /*#__PURE__*/_interopDefault(flatten);
13
+
14
+ /**
15
+ * Use FocusOnError when Formik is in the same component and you don't have
16
+ * access to useFormikContext, otherwise useFocusOnError can be used.
17
+ */
18
+ function FocusOnError(_ref) {
19
+ let {
20
+ initialValidation = false,
21
+ focusDelay = 0
22
+ } = _ref;
23
+ useFocusOnError(initialValidation, focusDelay);
24
+ return jsxRuntime.jsx(react.Fragment, {});
25
+ }
26
+
27
+ /**
28
+ * Focus the first element with error in the form after triggering Formik onSubmit.
29
+ * If used with initialValidation `true`, it will focus after form initialization.
30
+ * * Important * The order is based on the errors object, and the errors key order is based on
31
+ * the order used in the validation schema.
32
+ *
33
+ * @param initialValidation boolean true if the focus is desired on form initialization
34
+ * @param focusDelay number milliseconds to delay the focus on the input
35
+ */
36
+ function useFocusOnError() {
37
+ let initialValidation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
38
+ let focusDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
39
+ const {
40
+ errors,
41
+ isSubmitting,
42
+ isValidating,
43
+ validateForm
44
+ } = formik.useFormikContext();
45
+ const validateOnInit = react.useRef(initialValidation);
46
+ react.useEffect(() => {
47
+ if (validateOnInit.current) {
48
+ runImperativeValidation();
49
+ validateOnInit.current = false;
50
+ return;
51
+ }
52
+ if (isSubmitting && !isValidating) {
53
+ focusFirstElementWithError(errors);
54
+ }
55
+ function focusFirstElementWithError(errorsObject) {
56
+ if (!Object.keys(errorsObject).length) return;
57
+ const flattenedErrorsObj = flatten__default.default(errorsObject);
58
+ const names = Object.keys(flattenedErrorsObj);
59
+ const firstErrorElementName = names === null || names === void 0 ? void 0 : names[0];
60
+ if (firstErrorElementName) {
61
+ const element = window.document.querySelector(`form [name="${firstErrorElementName}"]`);
62
+ element === null || element === void 0 ? void 0 : element.scrollIntoView({
63
+ behavior: 'smooth'
64
+ });
65
+ setTimeout(() => {
66
+ element === null || element === void 0 ? void 0 : element.focus();
67
+ }, focusDelay);
68
+ }
69
+ }
70
+ async function runImperativeValidation() {
71
+ const validationErrors = await validateForm();
72
+ focusFirstElementWithError(validationErrors);
73
+ }
74
+ }, [errors, focusDelay, isSubmitting, isValidating, validateForm]);
75
+ }
76
+
77
+ exports.FocusOnError = FocusOnError;
78
+ exports.useFocusOnError = useFocusOnError;
79
+ //# sourceMappingURL=FocusOnError.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FocusOnError.js","sources":["../../src/FocusOnError.tsx"],"sourcesContent":["import flatten from 'flat';\nimport { Fragment, useEffect, useRef } from 'react';\nimport { FormikErrors, useFormikContext } from 'formik';\n\nexport interface IFocusOnErrorProps {\n initialValidation?: boolean;\n focusDelay?: number;\n}\n\n/**\n * Use FocusOnError when Formik is in the same component and you don't have\n * access to useFormikContext, otherwise useFocusOnError can be used.\n */\nexport function FocusOnError({ initialValidation = false, focusDelay = 0 }: IFocusOnErrorProps): JSX.Element {\n useFocusOnError(initialValidation, focusDelay);\n\n return <Fragment />;\n}\n\n/**\n * Focus the first element with error in the form after triggering Formik onSubmit.\n * If used with initialValidation `true`, it will focus after form initialization.\n * * Important * The order is based on the errors object, and the errors key order is based on\n * the order used in the validation schema.\n *\n * @param initialValidation boolean true if the focus is desired on form initialization\n * @param focusDelay number milliseconds to delay the focus on the input\n */\nexport function useFocusOnError(initialValidation = false, focusDelay = 0): void {\n const { errors, isSubmitting, isValidating, validateForm } = useFormikContext();\n const validateOnInit = useRef(initialValidation);\n\n useEffect(() => {\n if (validateOnInit.current) {\n runImperativeValidation();\n validateOnInit.current = false;\n return;\n }\n\n if (isSubmitting && !isValidating) {\n focusFirstElementWithError(errors);\n }\n\n function focusFirstElementWithError(errorsObject: FormikErrors<unknown>) {\n if (!Object.keys(errorsObject).length) return;\n\n const flattenedErrorsObj: Record<string, unknown> = flatten(errorsObject);\n const names = Object.keys(flattenedErrorsObj);\n const firstErrorElementName = names?.[0];\n\n if (firstErrorElementName) {\n const element = window.document.querySelector<HTMLElement>(`form [name=\"${firstErrorElementName}\"]`);\n element?.scrollIntoView({ behavior: 'smooth' });\n\n setTimeout(() => {\n element?.focus();\n }, focusDelay);\n }\n }\n\n async function runImperativeValidation() {\n const validationErrors = await validateForm();\n focusFirstElementWithError(validationErrors);\n }\n }, [errors, focusDelay, isSubmitting, isValidating, validateForm]);\n}\n"],"names":["FocusOnError","_ref","initialValidation","focusDelay","useFocusOnError","_jsx","Fragment","arguments","length","undefined","errors","isSubmitting","isValidating","validateForm","useFormikContext","validateOnInit","useRef","useEffect","current","runImperativeValidation","focusFirstElementWithError","errorsObject","Object","keys","flattenedErrorsObj","flatten","names","firstErrorElementName","element","window","document","querySelector","scrollIntoView","behavior","setTimeout","focus","validationErrors"],"mappings":"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"}
@@ -0,0 +1,17 @@
1
+ import { ReactNode } from 'react';
2
+ import { WithChildrenCommonProps, FieldMessageType } from '@shipengine/giger';
3
+
4
+ interface IFormFieldMessage {
5
+ type: FieldMessageType;
6
+ content: ReactNode;
7
+ }
8
+ type FormFieldProps = WithChildrenCommonProps<{
9
+ name: string;
10
+ message?: IFormFieldMessage;
11
+ }>;
12
+ declare function FormField({ name, children, message, ...rest }: FormFieldProps): JSX.Element;
13
+ declare namespace FormField {
14
+ var displayName: string;
15
+ }
16
+
17
+ export { FormField };
@@ -0,0 +1,47 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var formik = require('formik');
6
+ var react = require('react');
7
+ var giger = require('@shipengine/giger');
8
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
9
+
10
+ const useFieldMessage = (fieldName, defaultMessage) => {
11
+ const [, meta] = formik.useField(fieldName);
12
+ const formFieldMessage = react.useMemo(() => {
13
+ if (meta.error && meta.touched) {
14
+ return {
15
+ type: giger.FieldMessageType.ERROR,
16
+ content: meta.error
17
+ };
18
+ } else if ((defaultMessage === null || defaultMessage === void 0 ? void 0 : defaultMessage.type) === giger.FieldMessageType.HINT || (defaultMessage === null || defaultMessage === void 0 ? void 0 : defaultMessage.type) === giger.FieldMessageType.INFO || (defaultMessage === null || defaultMessage === void 0 ? void 0 : defaultMessage.type) === giger.FieldMessageType.SUCCESS) {
19
+ return {
20
+ type: defaultMessage.type,
21
+ content: defaultMessage.content
22
+ };
23
+ }
24
+ return undefined;
25
+ }, [defaultMessage === null || defaultMessage === void 0 ? void 0 : defaultMessage.content, defaultMessage === null || defaultMessage === void 0 ? void 0 : defaultMessage.type, meta.error, meta.touched]);
26
+ return formFieldMessage;
27
+ };
28
+ function FormField(_ref) {
29
+ let {
30
+ name,
31
+ children,
32
+ message,
33
+ ...rest
34
+ } = _ref;
35
+ const formFieldMessage = useFieldMessage(name, message);
36
+ return jsxRuntime.jsx(giger.FormField, {
37
+ message: formFieldMessage,
38
+ ...rest,
39
+ children: /*#__PURE__*/react.cloneElement(children, {
40
+ name
41
+ })
42
+ });
43
+ }
44
+ FormField.displayName = 'FormikFormField';
45
+
46
+ exports.FormField = FormField;
47
+ //# sourceMappingURL=FormField.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FormField.js","sources":["../../src/FormField.tsx"],"sourcesContent":["import { useField } from 'formik';\nimport { useMemo, cloneElement, ReactNode, ReactElement } from 'react';\n\nimport { FieldMessageType, FormField as GigerFormField, WithChildrenCommonProps } from '@shipengine/giger';\n\ninterface IFormFieldMessage {\n type: FieldMessageType;\n content: ReactNode;\n}\n\ntype UseFieldMessageReturn =\n | {\n type: FieldMessageType;\n content: string;\n }\n | undefined;\n\nconst useFieldMessage = (fieldName: string, defaultMessage?: IFormFieldMessage): UseFieldMessageReturn => {\n const [, meta] = useField(fieldName);\n\n const formFieldMessage = useMemo(() => {\n if (meta.error && meta.touched) {\n return {\n type: FieldMessageType.ERROR,\n content: meta.error,\n };\n } else if (\n defaultMessage?.type === FieldMessageType.HINT ||\n defaultMessage?.type === FieldMessageType.INFO ||\n defaultMessage?.type === FieldMessageType.SUCCESS\n ) {\n return {\n type: defaultMessage.type,\n content: defaultMessage.content,\n };\n }\n\n return undefined;\n }, [defaultMessage?.content, defaultMessage?.type, meta.error, meta.touched]) as UseFieldMessageReturn;\n\n return formFieldMessage;\n};\n\ntype FormFieldProps = WithChildrenCommonProps<{\n name: string;\n message?: IFormFieldMessage;\n}>;\n\nexport function FormField({ name, children, message, ...rest }: FormFieldProps): JSX.Element {\n const formFieldMessage = useFieldMessage(name, message);\n\n return (\n <GigerFormField message={formFieldMessage} {...rest}>\n {cloneElement(children as ReactElement, { name })}\n </GigerFormField>\n );\n}\n\nFormField.displayName = 'FormikFormField';\n"],"names":["useFieldMessage","fieldName","defaultMessage","meta","useField","formFieldMessage","useMemo","error","touched","type","FieldMessageType","ERROR","content","HINT","INFO","SUCCESS","undefined","FormField","_ref","name","children","message","rest","_jsx","GigerFormField","cloneElement","displayName"],"mappings":";;;;;;;;;AAiBA,MAAMA,eAAe,GAAGA,CAACC,SAAiB,EAAEC,cAAkC,KAA4B;AACtG,EAAA,MAAM,GAAGC,IAAI,CAAC,GAAGC,eAAQ,CAACH,SAAS,CAAC,CAAA;AAEpC,EAAA,MAAMI,gBAAgB,GAAGC,aAAO,CAAC,MAAM;AACnC,IAAA,IAAIH,IAAI,CAACI,KAAK,IAAIJ,IAAI,CAACK,OAAO,EAAE;MAC5B,OAAO;QACHC,IAAI,EAAEC,sBAAgB,CAACC,KAAK;QAC5BC,OAAO,EAAET,IAAI,CAACI,KAAAA;OACjB,CAAA;AACL,KAAC,MAAM,IACH,CAAAL,cAAc,KAAdA,IAAAA,IAAAA,cAAc,uBAAdA,cAAc,CAAEO,IAAI,MAAKC,sBAAgB,CAACG,IAAI,IAC9C,CAAAX,cAAc,aAAdA,cAAc,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAdA,cAAc,CAAEO,IAAI,MAAKC,sBAAgB,CAACI,IAAI,IAC9C,CAAAZ,cAAc,KAAA,IAAA,IAAdA,cAAc,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAdA,cAAc,CAAEO,IAAI,MAAKC,sBAAgB,CAACK,OAAO,EACnD;MACE,OAAO;QACHN,IAAI,EAAEP,cAAc,CAACO,IAAI;QACzBG,OAAO,EAAEV,cAAc,CAACU,OAAAA;OAC3B,CAAA;AACL,KAAA;AAEA,IAAA,OAAOI,SAAS,CAAA;GACnB,EAAE,CAACd,cAAc,KAAdA,IAAAA,IAAAA,cAAc,KAAdA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,cAAc,CAAEU,OAAO,EAAEV,cAAc,KAAdA,IAAAA,IAAAA,cAAc,uBAAdA,cAAc,CAAEO,IAAI,EAAEN,IAAI,CAACI,KAAK,EAAEJ,IAAI,CAACK,OAAO,CAAC,CAA0B,CAAA;AAEtG,EAAA,OAAOH,gBAAgB,CAAA;AAC3B,CAAC,CAAA;AAOM,SAASY,SAASA,CAAAC,IAAA,EAAoE;EAAA,IAAnE;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC,IAAAA;AAAqB,GAAC,GAAAJ,IAAA,CAAA;AAC1E,EAAA,MAAMb,gBAAgB,GAAGL,eAAe,CAACmB,IAAI,EAAEE,OAAO,CAAC,CAAA;EAEvD,OACIE,cAAA,CAACC,eAAc,EAAA;AAACH,IAAAA,OAAO,EAAEhB,gBAAiB;AAAA,IAAA,GAAKiB,IAAI;AAAAF,IAAAA,QAAA,eAC9CK,kBAAY,CAACL,QAAQ,EAAkB;AAAED,MAAAA,IAAAA;KAAM,CAAA;AAAC,GACrC,CAAC,CAAA;AAEzB,CAAA;AAEAF,SAAS,CAACS,WAAW,GAAG,iBAAiB;;;;"}
@@ -0,0 +1,11 @@
1
+ import { FieldProps } from 'formik';
2
+ import { IInputProps } from '@shipengine/giger';
3
+
4
+ type InputProps<FormValues = unknown> = FieldProps<string | number | undefined, FormValues> & Omit<IInputProps, 'name' | 'value'>;
5
+ declare function fieldToInput<FormValues = unknown>({ disabled, field: { onBlur: fieldOnBlur, onChange: onFormikChange, ...field }, form: { isSubmitting, touched, errors }, onBlur, onChange, ...props }: InputProps<FormValues>): IInputProps;
6
+ declare function Input<FormValues = unknown>({ ...props }: InputProps<FormValues>): JSX.Element;
7
+ declare namespace Input {
8
+ var displayName: string;
9
+ }
10
+
11
+ export { Input, InputProps, fieldToInput };
@@ -0,0 +1,53 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var formik = require('formik');
6
+ var giger = require('@shipengine/giger');
7
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
8
+
9
+ function fieldToInput(_ref) {
10
+ let {
11
+ disabled,
12
+ field: {
13
+ onBlur: fieldOnBlur,
14
+ onChange: onFormikChange,
15
+ ...field
16
+ },
17
+ form: {
18
+ isSubmitting,
19
+ touched,
20
+ errors
21
+ },
22
+ onBlur,
23
+ onChange,
24
+ ...props
25
+ } = _ref;
26
+ const handleChange = e => {
27
+ onChange === null || onChange === void 0 ? void 0 : onChange(e);
28
+ onFormikChange(e);
29
+ };
30
+ return {
31
+ isInvalid: formik.getIn(touched, field.name) && !!formik.getIn(errors, field.name),
32
+ disabled: disabled || isSubmitting,
33
+ onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : function (e) {
34
+ fieldOnBlur(e !== null && e !== void 0 ? e : field.name);
35
+ },
36
+ onChange: handleChange,
37
+ ...field,
38
+ ...props
39
+ };
40
+ }
41
+ function Input(_ref2) {
42
+ let {
43
+ ...props
44
+ } = _ref2;
45
+ return jsxRuntime.jsx(giger.Input, {
46
+ ...fieldToInput(props)
47
+ });
48
+ }
49
+ Input.displayName = 'FormikInput';
50
+
51
+ exports.Input = Input;
52
+ exports.fieldToInput = fieldToInput;
53
+ //# sourceMappingURL=Input.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Input.js","sources":["../../src/Input.tsx"],"sourcesContent":["import { FieldProps, getIn } from 'formik';\nimport { ChangeEvent, FocusEvent } from 'react';\n\nimport { Input as GigerInput, IInputProps as IGigerInputProps } from '@shipengine/giger';\n\nexport type InputProps<FormValues = unknown> = FieldProps<string | number | undefined, FormValues> &\n Omit<IGigerInputProps, 'name' | 'value'>;\n\nexport function fieldToInput<FormValues = unknown>({\n disabled,\n field: { onBlur: fieldOnBlur, onChange: onFormikChange, ...field },\n form: { isSubmitting, touched, errors },\n onBlur,\n onChange,\n ...props\n}: InputProps<FormValues>): IGigerInputProps {\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n onFormikChange(e);\n };\n\n return {\n isInvalid: getIn(touched, field.name) && !!getIn(errors, field.name),\n disabled: disabled || isSubmitting,\n onBlur:\n onBlur ??\n function (e: FocusEvent) {\n fieldOnBlur(e ?? field.name);\n },\n onChange: handleChange,\n ...field,\n ...props,\n };\n}\n\nexport function Input<FormValues = unknown>({ ...props }: InputProps<FormValues>): JSX.Element {\n return <GigerInput {...fieldToInput(props)} />;\n}\n\nInput.displayName = 'FormikInput';\n"],"names":["fieldToInput","_ref","disabled","field","onBlur","fieldOnBlur","onChange","onFormikChange","form","isSubmitting","touched","errors","props","handleChange","e","isInvalid","getIn","name","Input","_ref2","_jsx","GigerInput","displayName"],"mappings":";;;;;;;;AAQO,SAASA,YAAYA,CAAAC,IAAA,EAOiB;EAAA,IAPM;IAC/CC,QAAQ;AACRC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAEC,WAAW;AAAEC,MAAAA,QAAQ,EAAEC,cAAc;MAAE,GAAGJ,KAAAA;KAAO;AAClEK,IAAAA,IAAI,EAAE;MAAEC,YAAY;MAAEC,OAAO;AAAEC,MAAAA,MAAAA;KAAQ;IACvCP,MAAM;IACNE,QAAQ;IACR,GAAGM,KAAAA;AACiB,GAAC,GAAAX,IAAA,CAAA;EACrB,MAAMY,YAAY,GAAIC,CAAgC,IAAK;AACvDR,IAAAA,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,QAAQ,CAAGQ,CAAC,CAAC,CAAA;IACbP,cAAc,CAACO,CAAC,CAAC,CAAA;GACpB,CAAA;EAED,OAAO;AACHC,IAAAA,SAAS,EAAEC,YAAK,CAACN,OAAO,EAAEP,KAAK,CAACc,IAAI,CAAC,IAAI,CAAC,CAACD,YAAK,CAACL,MAAM,EAAER,KAAK,CAACc,IAAI,CAAC;IACpEf,QAAQ,EAAEA,QAAQ,IAAIO,YAAY;IAClCL,MAAM,EACFA,MAAM,KAANA,IAAAA,IAAAA,MAAM,cAANA,MAAM,GACN,UAAUU,CAAa,EAAE;MACrBT,WAAW,CAACS,CAAC,KAAA,IAAA,IAADA,CAAC,KAAA,KAAA,CAAA,GAADA,CAAC,GAAIX,KAAK,CAACc,IAAI,CAAC,CAAA;KAC/B;AACLX,IAAAA,QAAQ,EAAEO,YAAY;AACtB,IAAA,GAAGV,KAAK;IACR,GAAGS,KAAAA;GACN,CAAA;AACL,CAAA;AAEO,SAASM,KAAKA,CAAAC,KAAA,EAA0E;EAAA,IAAnD;IAAE,GAAGP,KAAAA;AAA8B,GAAC,GAAAO,KAAA,CAAA;EAC5E,OAAOC,cAAA,CAACC,WAAU,EAAA;IAAA,GAAKrB,YAAY,CAACY,KAAK,CAAA;AAAC,GAAG,CAAC,CAAA;AAClD,CAAA;AAEAM,KAAK,CAACI,WAAW,GAAG,aAAa;;;;;"}
@@ -0,0 +1,11 @@
1
+ import { FieldProps } from 'formik';
2
+ import { RadioProps as RadioProps$1 } from '@shipengine/giger';
3
+
4
+ type RadioProps = FieldProps & Omit<RadioProps$1, 'name' | 'checked'>;
5
+ declare function fieldToRadio({ disabled, field: { onBlur: fieldOnBlur, value: selectedValue, onChange: onFormikChange, ...field }, form: { isSubmitting, errors, touched }, onBlur, onChange, value, ...props }: RadioProps): RadioProps$1;
6
+ declare function Radio(props: RadioProps): JSX.Element;
7
+ declare namespace Radio {
8
+ var displayName: string;
9
+ }
10
+
11
+ export { Radio, RadioProps, fieldToRadio };