@evoke-platform/ui-components 1.0.0-dev.184 → 1.0.0-dev.187

package/dist/published/components/custom/FormField/AddressFieldComponent/AddressFieldComponent.test.js

@@ -0,0 +1,89 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import AddressFieldComponent from './addressFieldComponent';
+// Right now an object property is required for this to function, but eventually this should go
+// away.
+const addressProperty = {
+    id: 'addressLine1',
+    name: 'Line 1',
+    type: 'text',
+};
+test('displays matching addresses', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = userEvent.setup();
+    const queryAddresses = (search) => __awaiter(void 0, void 0, void 0, function* () {
+        return [
+            {
+                address: {
+                    line1: '1234 Main Street',
+                    city: 'Columbia',
+                    county: 'Howard',
+                    state: 'Maryland',
+                    zipCode: '21046',
+                },
+            },
+            {
+                address: {
+                    line1: '12345 Main Avenue',
+                    city: 'Columbia',
+                    county: 'Howard',
+                    state: 'Maryland',
+                    zipCode: '21046',
+                },
+            },
+        ];
+    });
+    render(React.createElement(AddressFieldComponent, { id: "addressSearch", property: addressProperty, onChange: () => { }, queryAddresses: queryAddresses }));
+    const addressField = screen.getByRole('searchbox');
+    yield user.type(addressField, '1234 Main');
+    yield screen.findByRole('menuitem', { name: /1234 Main Street/ });
+    yield screen.findByRole('menuitem', { name: /12345 Main Avenue/ });
+}));
+test('returns manually typed address', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = userEvent.setup();
+    const onChangeMock = jest.fn((name, value, property, unused) => { });
+    render(React.createElement(AddressFieldComponent, { id: "addressSearch", property: addressProperty, onChange: onChangeMock }));
+    const addressField = screen.getByRole('searchbox');
+    yield user.type(addressField, '1234 Main St');
+    expect(onChangeMock).toBeCalledTimes(12);
+    expect(onChangeMock).lastCalledWith('addressLine1', '1234 Main St', addressProperty, undefined);
+}));
+test('returns selected search result', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = userEvent.setup();
+    const onChangeMock = jest.fn((name, value, property, unused) => { });
+    const queryAddresses = (search) => __awaiter(void 0, void 0, void 0, function* () {
+        return [
+            {
+                address: {
+                    line1: '1234 Main Street',
+                    city: 'Columbia',
+                    county: 'Howard',
+                    state: 'Maryland',
+                    zipCode: '21046',
+                },
+            },
+        ];
+    });
+    render(React.createElement(AddressFieldComponent, { id: "addressSearch", property: addressProperty, onChange: onChangeMock, queryAddresses: queryAddresses }));
+    const addressField = screen.getByRole('searchbox');
+    yield user.type(addressField, '1234 Main');
+    const searchResult = yield screen.findByRole('menuitem', { name: /1234 Main Street/ });
+    yield user.click(searchResult);
+    expect(onChangeMock).lastCalledWith('addressLine1', {
+        line1: '1234 Main Street',
+        city: 'Columbia',
+        county: 'Howard',
+        state: 'Maryland',
+        zipCode: '21046',
+    }, addressProperty, undefined);
+}));

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.d.ts

@@ -1,4 +1,16 @@
 /// <reference types="react" />
 import { FormFieldProps } from '../FormField';
-declare const AddressFieldComponent: (props: FormFieldProps) => JSX.Element;
+export declare type Address = {
+    address: {
+        line1?: string;
+        line2?: string;
+        city?: string;
+        county?: string;
+        state?: string;
+        zipCode?: string;
+    };
+};
+declare const AddressFieldComponent: (props: FormFieldProps & {
+    id: string;
+}) => JSX.Element;
 export default AddressFieldComponent;

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -2,19 +2,19 @@ import { Popover } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import InputMask from 'react-input-mask';
 import { CancelOutlined } from '@mui/icons-material';
-import { Button, List, ListItem, TextField, Typography } from '../../../core';
+import { Button, List, ListItem, MenuItem, TextField, Typography } from '../../../core';
 import { Box } from '../../../layout';
 const AddressFieldComponent = (props) => {
-    const { property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, } = props;
+    const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, } = props;
     const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const [selectOptions, setSelectOptions] = useState([]);
     const [anchorEl, setAnchorEl] = React.useState(null);
-    const id = property.id;
     const open = Boolean(anchorEl);
     const popoverId = open ? `${id}-popover` : undefined;
     useEffect(() => {
         setValue(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     }, [defaultValue]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleChange = (e) => {
         setAnchorEl(e.currentTarget);
         const inputValue = e.target.value || '';
@@ -45,18 +45,18 @@ const AddressFieldComponent = (props) => {
                     return { label, sublabel, value: address.address };
                 }));
             });
-        props.onChange(id, inputValue, property, undefined);
+        props.onChange(property.id, inputValue, property, undefined);
     };
     const handleClick = (option) => {
         setAnchorEl(null);
         setValue(option.value.line1);
-        props.onChange(id, option.value, property, undefined);
+        props.onChange(property.id, option.value, property, undefined);
     };
     const handleClose = () => {
         setAnchorEl(null);
     };
     return (React.createElement(Box, null,
-        !mask ? (React.createElement(TextField, { id: id, "aria-describedby": popoverId, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder, InputProps: {
+        !mask ? (React.createElement(TextField, { id: id, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder, InputProps: {
                 type: 'search',
                 autoComplete: 'off',
             }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar !== null && inputMaskPlaceholderChar !== void 0 ? inputMaskPlaceholderChar : '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, { id: id, sx: readOnly
@@ -70,7 +70,7 @@ const AddressFieldComponent = (props) => {
                     },
                 }
                 : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { readOnly: readOnly }, fullWidth: true, size: size !== null && size !== void 0 ? size : 'medium', type: 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, value: value })))),
-        !readOnly && (React.createElement(Popover, { id: popoverId, open: open, anchorEl: anchorEl, onClose: handleClose, disableAutoFocus: true, marginThreshold: null, anchorOrigin: {
+        !readOnly && (React.createElement(Popover, { id: popoverId, open: open, anchorEl: anchorEl, onClose: handleClose, disableAutoFocus: true, marginThreshold: undefined, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'left',
             }, transformOrigin: {
@@ -87,12 +87,7 @@ const AddressFieldComponent = (props) => {
             } },
             React.createElement(List, null,
                 selectOptions.map((option) => {
-                    return (React.createElement(ListItem, { onClick: () => handleClick(option), sx: {
-                            '&:hover': {
-                                cursor: 'pointer',
-                                backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                            },
-                        } },
+                    return (React.createElement(MenuItem, { key: option.label + option.sublabel, onClick: () => handleClick(option) },
                         React.createElement(Box, { sx: {
                                 flexGrow: 1,
                             } },

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import { FormFieldProps } from '../FormField';
-declare const BooleanSelect: (props: FormFieldProps) => JSX.Element;
+declare const BooleanSelect: (props: FormFieldProps & {
+    id: string;
+}) => JSX.Element;
 export default BooleanSelect;

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.js

@@ -2,15 +2,14 @@ import React, { useEffect, useState } from 'react';
 import { Autocomplete, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const BooleanSelect = (props) => {
-    const { property, defaultValue, error, errorMessage, readOnly, size, placeholder, onBlur } = props;
+    const { id, property, defaultValue, error, errorMessage, readOnly, size, placeholder, onBlur } = props;
     const [value, setValue] = useState(defaultValue);
-    const id = property.id;
     useEffect(() => {
         setValue(defaultValue);
     }, [defaultValue]);
     const handleChange = (event, selected) => {
         setValue(selected.label);
-        props.onChange(id, selected.label, property);
+        props.onChange(property.id, selected.label, property);
     };
     const booleanOptions = [
         {

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.test.js

@@ -0,0 +1,32 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import BooleanSelect from './BooleanSelect';
+// Right now an object property is required for this to function, but eventually this should go
+// away.
+const booleanProperty = {
+    id: 'theQuestion',
+    name: 'Question',
+    type: 'boolean',
+};
+test('returns selected option', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = userEvent.setup();
+    const onChangeMock = jest.fn((name, value, property) => { });
+    render(React.createElement(BooleanSelect, { id: "chooseYesOrNo", property: booleanProperty, onChange: onChangeMock }));
+    const inputField = screen.getByRole('combobox');
+    yield user.click(inputField);
+    const yesOption = yield screen.findByRole('option', { name: 'Yes' });
+    yield user.click(yesOption);
+    expect(onChangeMock).toBeCalledWith('theQuestion', 'Yes', // ?? why not true/false?
+    booleanProperty);
+}));

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import { FormFieldProps } from '../FormField';
-declare const DatePickerSelect: (props: FormFieldProps) => JSX.Element;
+declare const DatePickerSelect: (props: FormFieldProps & {
+    id: string;
+}) => JSX.Element;
 export default DatePickerSelect;

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.js

@@ -26,15 +26,14 @@ const asMonthDayYearFormat = (date) => {
     }
 };
 const DatePickerSelect = (props) => {
-    const { property, defaultValue, error, errorMessage, readOnly, required, size, onBlur } = props;
+    const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur } = props;
     const [value, setValue] = useState(asCalendarDate(defaultValue));
-    const id = property.id;
     useEffect(() => {
         setValue(asCalendarDate(defaultValue));
     }, [defaultValue]);
     const handleChange = (date) => {
         setValue(date);
-        props.onChange(id, date, property);
+        props.onChange(property.id, date, property);
     };
     return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, Object.assign(Object.assign({}, props), { defaultValue: asMonthDayYearFormat(value) })))) : (React.createElement(LocalizationProvider, null,
         React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium' }))) })));

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.test.js

@@ -0,0 +1,73 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import DatePickerSelect from './DatePickerSelect';
+import { LocalDate, Month } from '@js-joda/core';
+import { InvalidDate } from '../../../../util';
+// Right now an object property is required for this to function, but eventually this should go
+// away.
+const dateProperty = {
+    id: 'testDate',
+    name: 'Date',
+    type: 'date',
+};
+beforeAll(() => {
+    // Set specific date for a repeatable test.
+    jest.useFakeTimers({
+        now: new Date('2024-02-11'),
+        // Only want to set current time, don't override timer functions as that will
+        // confuse @testing-library.
+        doNotFake: [
+            'setImmediate',
+            'clearImmediate',
+            'setTimeout',
+            'clearTimeout',
+            'setInterval',
+            'clearInterval',
+            'nextTick',
+            'queueMicrotask',
+        ],
+    });
+});
+afterAll(() => {
+    jest.useRealTimers();
+});
+test('returns selected date', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = userEvent.setup();
+    const onChangeMock = jest.fn((name, value, property) => { });
+    render(React.createElement(DatePickerSelect, { id: "pickDate", property: dateProperty, onChange: onChangeMock }));
+    const calendarIcon = screen.getByRole('button', { name: /Choose date/i });
+    yield user.click(calendarIcon);
+    const calendar = yield screen.findByRole('dialog');
+    const feb29 = yield within(calendar).findByRole('gridcell', { name: '29' });
+    yield user.click(feb29);
+    expect(onChangeMock).toBeCalledWith('testDate', LocalDate.of(2024, Month.FEBRUARY, 29), dateProperty);
+}));
+test('returns manually entered date', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = userEvent.setup();
+    const onChangeMock = jest.fn((name, value, property) => { });
+    render(React.createElement(DatePickerSelect, { id: "pickDate", property: dateProperty, onChange: onChangeMock }));
+    const input = screen.getByRole('textbox');
+    yield user.type(input, '03/27/2024');
+    expect(onChangeMock).toBeCalledTimes(8); // component ignores '/', i.e. input could also have been '03272024'
+    expect(onChangeMock).lastCalledWith('testDate', LocalDate.of(2024, Month.MARCH, 27), dateProperty);
+}));
+test('returns incomplete dates', () => __awaiter(void 0, void 0, void 0, function* () {
+    const user = userEvent.setup();
+    const onChangeMock = jest.fn((name, value, property) => { });
+    render(React.createElement(DatePickerSelect, { id: "pickDate", property: dateProperty, onChange: onChangeMock }));
+    const input = screen.getByRole('textbox');
+    yield user.type(input, '08/20');
+    // Component automatically appends '/' as needed.
+    expect(onChangeMock).lastCalledWith('testDate', new InvalidDate('08/20/'), dateProperty);
+}));

package/dist/published/components/custom/FormField/FileUpload/FileUpload.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import { FormFieldProps } from '../FormField';
-declare const FileUploadControl: (props: FormFieldProps) => JSX.Element;
+declare const FileUploadControl: (props: FormFieldProps & {
+    id: string;
+}) => JSX.Element;
 export default FileUploadControl;

package/dist/published/components/custom/FormField/FileUpload/FileUpload.js

@@ -5,8 +5,7 @@ import { Button, TextField } from '../../../core';
 const FileUploadControl = (props) => {
     var _a;
     const [uploadedFile, setUploadedFile] = useState(undefined);
-    const { property, required, error, errorMessage } = props;
-    const id = property.id;
+    const { id, property, required, error, errorMessage } = props;
     const styles = {
         button: {
             textTransform: 'initial',
@@ -32,16 +31,18 @@ const FileUploadControl = (props) => {
     };
     useEffect(() => {
         if (uploadedFile) {
-            props.onChange(id, uploadedFile, property);
+            props.onChange(property.id, uploadedFile, property);
         }
     }, [uploadedFile]);
     const handleSelectFile = () => {
         if (uploadedFile) {
             setUploadedFile(undefined);
-            props.onChange(id, undefined, property);
+            props.onChange(property.id, undefined, property);
         }
     };
-    const onDrop = useCallback((acceptedFile) => {
+    const onDrop = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (acceptedFile) => {
         setUploadedFile(acceptedFile[0]);
     }, [setUploadedFile]);
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
@@ -58,7 +59,7 @@ const FileUploadControl = (props) => {
     })),
         React.createElement(Grid, { item: true, flexGrow: 1 },
             React.createElement("input", Object.assign({ disabled: true }, getInputProps())),
-            React.createElement(TextField, { sx: { '& fieldset': { border: 'none' } }, fullWidth: true, value: (_a = uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.name) !== null && _a !== void 0 ? _a : (isDragActive ? 'Drop your file here' : 'File'), error: error, errorMessage: errorMessage, required: required })),
+            React.createElement(TextField, { id: id, sx: { '& fieldset': { border: 'none' } }, fullWidth: true, value: (_a = uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.name) !== null && _a !== void 0 ? _a : (isDragActive ? 'Drop your file here' : 'File'), error: error, errorMessage: errorMessage, required: required })),
         React.createElement(Grid, { item: true },
             React.createElement(Button, { sx: Object.assign(Object.assign({}, styles.button), styles.selectFileBtn), onClick: () => handleSelectFile() }, uploadedFile ? 'Remove' : 'Select File'))));
 };

package/dist/published/components/custom/FormField/FormField.d.ts

@@ -1,8 +1,12 @@
+import React from 'react';
+import { Address } from './AddressFieldComponent/addressFieldComponent';
 import { ObjectProperty } from '../../../types';
+import { AutocompleteOption } from '../../core';
 export declare type FormFieldProps = {
+    id?: string;
     property: ObjectProperty;
     onChange: Function;
-    onBlur?: Function;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     defaultValue?: unknown;
     error?: boolean;
     errorMessage?: string;
@@ -18,11 +22,11 @@ export declare type FormFieldProps = {
     isMultiLineText?: boolean;
     rows?: number;
     inputMaskPlaceholderChar?: string;
-    queryAddresses?: Function;
-    isOptionEqualToValue?: Function;
-    renderOption?: Function;
-    getOptionLabel?: Function;
+    queryAddresses?: (input: string) => Promise<Address[]>;
+    isOptionEqualToValue?: (option: AutocompleteOption | string, value: unknown) => boolean;
+    renderOption?: (props: unknown, option: AutocompleteOption | string, state: unknown) => React.ReactNode;
+    getOptionLabel?: (option: AutocompleteOption) => string;
     disableCloseOnSelect?: boolean;
 };
-declare const FormField: (props: FormFieldProps) => any;
+declare const FormField: (props: FormFieldProps) => JSX.Element;
 export default FormField;

package/dist/published/components/custom/FormField/FormField.js

@@ -7,11 +7,10 @@ import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
 import Select from './Select/Select';
 import TimePickerSelect from './TimePickerSelect/TimePickerSelect';
 const FormField = (props) => {
-    const { defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel } = props;
-    const id = property.id;
+    const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, } = props;
     let control;
     const commonProps = {
-        id,
+        id: id !== null && id !== void 0 ? id : property.id,
         property,
         onChange,
         onBlur,

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.d.ts

@@ -1,5 +1,7 @@
 import { FunctionComponent } from 'react';
 import { FormFieldProps } from '../FormField';
 export declare const NumericFormat: FunctionComponent<any>;
-declare const InputFieldComponent: (props: FormFieldProps) => JSX.Element;
+declare const InputFieldComponent: (props: FormFieldProps & {
+    id: string;
+}) => JSX.Element;
 export default InputFieldComponent;

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -15,7 +15,6 @@ import { Autocomplete, TextField } from '../../../core';
 import InputMask from 'react-input-mask';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const NumericFormat = (props) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { inputRef, onChange, defaultValue } = props, other = __rest(props, ["inputRef", "onChange", "defaultValue"]);
     return (React.createElement(NumberFormat, Object.assign({}, other, { getInputRef: inputRef, onValueChange: (values) => {
             onChange === null || onChange === void 0 ? void 0 : onChange({
@@ -27,10 +26,9 @@ export const NumericFormat = (props) => {
 };
 const InputFieldComponent = (props) => {
     var _a;
-    const { property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, min, max, isMultiLineText, rows, inputMaskPlaceholderChar, } = props;
+    const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, min, max, isMultiLineText, rows, inputMaskPlaceholderChar, } = props;
     const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const [inputValue, setInputValue] = useState('');
-    const id = property.id;
     useEffect(() => {
         setValue(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     }, [defaultValue]);
@@ -39,11 +37,11 @@ const InputFieldComponent = (props) => {
             ? parseInt(e.target.value, 10)
             : e.target.value;
         setValue(inputValue);
-        props.onChange(id, inputValue, property);
+        props.onChange(property.id, inputValue, property);
     };
     const handleSelectChange = (e, selected) => {
         setValue(selected.label);
-        props.onChange(id, selected.label, property);
+        props.onChange(property.id, selected.label, property);
     };
     const handleInputValueChange = (event, selectValue) => {
         setInputValue(selectValue);

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.test.js

@@ -0,0 +1,52 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import InputField from './InputFieldComponent';
+describe('Free-text input', () => {
+    // Right now an object property is required for this to function, but eventually this should go
+    // away.
+    const textProperty = {
+        id: 'inputField',
+        name: 'Input Field',
+        type: 'string',
+    };
+    test('returns entered value', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        const onChangeMock = jest.fn((name, value, property) => { });
+        render(React.createElement(InputField, { id: "testInput", property: textProperty, onChange: onChangeMock }));
+        const input = screen.getByRole('textbox');
+        yield user.type(input, 'test value');
+        expect(onChangeMock).toBeCalledTimes(10);
+        expect(onChangeMock).lastCalledWith('inputField', 'test value', textProperty);
+    }));
+});
+describe('Autocomplete', () => {
+    // Right now an object property is required for this to function, but eventually this should go
+    // away.
+    const enumProperty = {
+        id: 'enumField',
+        name: 'Enum Field',
+        type: 'string',
+        enum: ['option 1', 'option 2'],
+    };
+    test('returns selected value', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        const onChangeMock = jest.fn((name, value, property) => { });
+        render(React.createElement(InputField, { id: "testInput", property: enumProperty, onChange: onChangeMock }));
+        const input = screen.getByRole('combobox');
+        yield user.click(input);
+        const option2 = yield screen.findByRole('option', { name: 'option 2' });
+        yield user.click(option2);
+        expect(onChangeMock).toBeCalledWith('enumField', 'option 2', enumProperty);
+    }));
+});

package/dist/published/components/custom/FormField/Select/Select.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import { FormFieldProps } from '../FormField';
-declare const Select: (props: FormFieldProps) => JSX.Element;
+declare const Select: (props: FormFieldProps & {
+    id: string;
+}) => JSX.Element;
 export default Select;

package/dist/published/components/custom/FormField/Select/Select.js

@@ -3,23 +3,24 @@ import { Autocomplete, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const Select = (props) => {
     var _a, _b;
-    const { property, defaultValue, error, errorMessage, onBlur, readOnly, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, } = props;
+    const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, } = props;
     const [value, setValue] = useState(defaultValue);
     const [inputValue, setInputValue] = useState('');
     useEffect(() => {
         setValue(defaultValue);
     }, [defaultValue]);
-    const id = property.id;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleChange = (event, selected) => {
         if (Array.isArray(selected)) {
             setValue(selected.map((option) => { var _a; return (_a = option.value) !== null && _a !== void 0 ? _a : option; }));
-            props.onChange(id, selected.map((option) => { var _a; return (_a = option.value) !== null && _a !== void 0 ? _a : option; }), property);
+            props.onChange(property.id, selected.map((option) => { var _a; return (_a = option.value) !== null && _a !== void 0 ? _a : option; }), property);
         }
         else {
             setValue(selected);
-            props.onChange(id, selected, property);
+            props.onChange(property.id, selected, property);
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleInputValueChange = (event, selectValue) => {
         if (Array.isArray(selectValue)) {
             setValue(selectValue.map((item) => { var _a; return (_a = item.value) !== null && _a !== void 0 ? _a : item; }));
@@ -28,7 +29,7 @@ const Select = (props) => {
             setInputValue(selectValue);
         }
     };
-    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { multiple: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? true : false, id: id, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { value: value, fullWidth: true, onBlur: onBlur })), value: value !== null && value !== void 0 ? value : ((property === null || property === void 0 ? void 0 : property.type) === 'array' ? [] : undefined), onChange: handleChange, options: (_b = (_a = selectOptions) !== null && _a !== void 0 ? _a : property === null || property === void 0 ? void 0 : property.enum) !== null && _b !== void 0 ? _b : [], disableClearable: true, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, isOptionEqualToValue: isOptionEqualToValue
+    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { multiple: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? true : false, id: id, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, fullWidth: true, onBlur: onBlur }))), value: value !== null && value !== void 0 ? value : ((property === null || property === void 0 ? void 0 : property.type) === 'array' ? [] : undefined), onChange: handleChange, options: (_b = (_a = selectOptions) !== null && _a !== void 0 ? _a : property === null || property === void 0 ? void 0 : property.enum) !== null && _b !== void 0 ? _b : [], disableClearable: true, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, isOptionEqualToValue: isOptionEqualToValue
             ? (option, value) => isOptionEqualToValue(option, value)
             : undefined, getOptionLabel: getOptionLabel ? (option) => getOptionLabel(option) : undefined, renderOption: renderOption
             ? (props, option, state) => renderOption(props, option, state)

package/dist/published/components/custom/FormField/Select/Select.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';