@evoke-platform/ui-components 1.0.0-dev.183 → 1.0.0-dev.185

package/dist/published/components/core/Autocomplete/Autocomplete.js

@@ -5,7 +5,7 @@ import UIThemeProvider from '../../../theme';
 import FieldError from '../FieldError';
 import Typography from '../Typography';
 const Autocomplete = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const sortedOptions = props.sortBy !== 'NONE'
         ? props.options.map((option) => {
             var _a, _b;
@@ -28,7 +28,7 @@ const Autocomplete = (props) => {
     }
     if (!!props.label && props.labelPlacement === 'outside-top') {
         return (React.createElement(UIThemeProvider, null,
-            React.createElement(InputLabel, { "data-testid": "label-outside", htmlFor: (_b = (_a = props.label) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '', sx: { paddingBottom: '0px', fontSize: '14px' } }, (_c = props.label) !== null && _c !== void 0 ? _c : '',
+            React.createElement(InputLabel, { htmlFor: (_a = props.id) !== null && _a !== void 0 ? _a : '', sx: { paddingBottom: '0px', fontSize: '14px' } }, (_b = props.label) !== null && _b !== void 0 ? _b : '',
                 ' ',
                 props.required ? (React.createElement(Typography, { sx: { color: 'red', fontSize: '14px' }, component: 'span' }, "*")) : null),
             props.instructionText && (React.createElement(Typography, { fontSize: '10px', lineHeight: '14px' }, props.instructionText)),
@@ -36,7 +36,7 @@ const Autocomplete = (props) => {
                         border: props.readOnly ? 'none' : 'auto',
                     }, '& .MuiInputBase-input.Mui-disabled': {
                         WebkitTextFillColor: props.readOnly ? 'black' : 'auto',
-                    }, backgroundColor: props.readOnly ? '#f4f6f8' : 'auto', marginTop: '3px', borderRadius: '8px' }, props.sx), options: sortedOptions, popupIcon: ((_d = props.popupIcon) !== null && _d !== void 0 ? _d : (props.readOnly || props.disabled)) ? null : React.createElement(ExpandMore, null) })),
+                    }, backgroundColor: props.readOnly ? '#f4f6f8' : 'auto', marginTop: '3px', borderRadius: '8px' }, props.sx), options: sortedOptions, popupIcon: ((_c = props.popupIcon) !== null && _c !== void 0 ? _c : (props.readOnly || props.disabled)) ? null : React.createElement(ExpandMore, null) })),
             props.error && React.createElement(FieldError, { required: props.required, label: props.errorMessage })));
     }
     else {
@@ -45,7 +45,7 @@ const Autocomplete = (props) => {
                         border: props.readOnly ? 'none' : 'auto',
                     }, '& .MuiInputBase-input.Mui-disabled': {
                         WebkitTextFillColor: props.readOnly ? 'black' : 'auto',
-                    }, backgroundColor: props.readOnly ? '#f4f6f8' : 'auto', borderRadius: '8px' }, props.sx), options: sortedOptions, popupIcon: ((_e = props.popupIcon) !== null && _e !== void 0 ? _e : (props.readOnly || props.disabled)) ? null : React.createElement(ExpandMore, null) })),
+                    }, backgroundColor: props.readOnly ? '#f4f6f8' : 'auto', borderRadius: '8px' }, props.sx), options: sortedOptions, popupIcon: ((_d = props.popupIcon) !== null && _d !== void 0 ? _d : (props.readOnly || props.disabled)) ? null : React.createElement(ExpandMore, null) })),
             props.error && React.createElement(FieldError, { required: props.required, label: props.errorMessage })));
     }
 };

package/dist/published/components/core/Autocomplete/Autocomplete.test.d.ts

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

package/dist/published/components/core/Autocomplete/Autocomplete.test.js

@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import Autocomplete from './Autocomplete';
+import TextField from '../TextField';
+const renderInput = (params) => React.createElement(TextField, Object.assign({}, params));
+const options = [];
+test('renders with label outside outline', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInput, options: options }));
+    screen.getByRole('combobox', { name: 'Title' });
+});

package/dist/published/components/core/TextField/TextField.js

@@ -4,8 +4,7 @@ import UIThemeProvider from '../../../theme';
 import FieldError from '../FieldError';
 import Typography from '../Typography';
 const TextField = (props) => {
-    var _a;
-    const { variant, label, labelPlacement, readOnly, required, error, instructionText, errorMessage } = props;
+    const { id, variant, label, labelPlacement, readOnly, required, error, instructionText, errorMessage } = props;
     const readOnlyStyles = {
         '.MuiOutlinedInput-root': {
             paddingRight: '5px',
@@ -20,14 +19,14 @@ const TextField = (props) => {
         '& fieldset': { borderColor: 'transparent', borderRadius: '8px' },
     };
     return (React.createElement(UIThemeProvider, null, variant === 'outlined' && !!label && labelPlacement === 'outside-top' ? (React.createElement(React.Fragment, null,
-        React.createElement(InputLabel, { "data-testid": "label-outside", htmlFor: (_a = label === null || label === void 0 ? void 0 : label.toString()) !== null && _a !== void 0 ? _a : '', sx: { paddingBottom: instructionText ? '0px' : '3px', fontSize: '14px' } }, label !== null && label !== void 0 ? label : '',
+        React.createElement(InputLabel, { htmlFor: id !== null && id !== void 0 ? id : '', sx: { paddingBottom: instructionText ? '0px' : '3px', fontSize: '14px' } }, label !== null && label !== void 0 ? label : '',
             ' ',
             props.required ? (React.createElement(Typography, { sx: { color: 'red', fontSize: '14px' }, component: 'span' }, "*")) : null),
         instructionText && React.createElement(Typography, { variant: 'caption' }, instructionText),
-        React.createElement(MUITextField, Object.assign({}, props, { label: null, inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly }, sx: readOnly
+        React.createElement(MUITextField, Object.assign({}, props, { label: null, inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly, 'data-testid': 'label-outside' }, sx: readOnly
                 ? Object.assign(Object.assign({}, readOnlyStyles), props.sx) : Object.assign({ '& fieldset': { borderRadius: '8px' } }, props.sx) })),
         error && React.createElement(FieldError, { required: required, label: errorMessage }))) : (React.createElement(React.Fragment, null,
-        React.createElement(MUITextField, Object.assign({ "data-testid": "label-inside", inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly } }, props, { sx: readOnly
+        React.createElement(MUITextField, Object.assign({ inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly, 'data-testid': 'label-inside' } }, props, { sx: readOnly
                 ? Object.assign(Object.assign({}, readOnlyStyles), props.sx) : Object.assign({ '& fieldset': { borderRadius: '8px' } }, props.sx) })),
         error && React.createElement(FieldError, { required: required, label: errorMessage })))));
 };

package/dist/published/components/core/TextField/TextField.test.js

@@ -3,18 +3,18 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import TextField from './index';
 test('render TextField and check for data-testid === label-outside when labelPlacement === outside-top && variant === outlined', () => {
-    render(React.createElement(TextField, { labelPlacement: "outside-top", variant: "outlined", label: "Title" }));
-    const label = screen.getByTestId('label-outside');
-    expect(label).toBeInTheDocument();
+    render(React.createElement(TextField, { id: "testinput", labelPlacement: "outside-top", variant: "outlined", label: "Title" }));
+    const textField = screen.getByRole('textbox', { name: 'Title' });
+    expect(textField).toHaveAttribute('data-testid', 'label-outside');
 });
 test('render TextField and check for data-testid === label-inside when labelPlacement === outside-top && variant !== outlined using data-testid', () => {
-    render(React.createElement(TextField, { labelPlacement: "outside-top", label: "Title2" }));
-    const label = screen.getByTestId('label-inside');
-    expect(label).toBeInTheDocument();
+    render(React.createElement(TextField, { id: "testinput", labelPlacement: "outside-top", label: "Title2" }));
+    const textField = screen.getByRole('textbox', { name: 'Title2' });
+    expect(textField).toHaveAttribute('data-testid', 'label-inside');
 });
 test('render TextField and check for data-testid === label-inside when labelPlacement === undefined', () => {
-    render(React.createElement(TextField, { label: "Title3" }));
-    const label = screen.getByTestId('label-inside');
-    expect(label).toBeInTheDocument();
+    render(React.createElement(TextField, { id: "testinput", label: "Title3" }));
+    const textField = screen.getByRole('textbox', { name: 'Title3' });
+    expect(textField).toHaveAttribute('data-testid', 'label-inside');
 });
 // TODO Add a test case to check if the label is not present outside the TextField when the labelPlacement is undefined or not equal to outside-top

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

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

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,6 @@
 /// <reference types="react" />
 import { FormFieldProps } from '../FormField';
-declare const AddressFieldComponent: (props: FormFieldProps) => JSX.Element;
+declare const AddressFieldComponent: (props: FormFieldProps & {
+    id: string;
+}) => JSX.Element;
 export default AddressFieldComponent;

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

@@ -2,14 +2,13 @@ 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(() => {
@@ -45,18 +44,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
@@ -87,12 +86,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,13 +31,13 @@ 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) => {
@@ -58,7 +57,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,5 +1,6 @@
 import { ObjectProperty } from '../../../types';
 export declare type FormFieldProps = {
+    id?: string;
     property: ObjectProperty;
     onChange: Function;
     onBlur?: Function;

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

@@ -27,10 +27,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 +38,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,21 +3,20 @@ 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;
     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);
         }
     };
     const handleInputValueChange = (event, selectValue) => {

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

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

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

@@ -0,0 +1,68 @@
+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 Select from './Select';
+describe('Single select', () => {
+    // Right now an object property is required for this to function, but eventually this should go
+    // away.
+    const choiceProperty = {
+        id: 'selectOptions',
+        name: 'Select Options',
+        type: 'choices',
+    };
+    test('returns selected option', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        const onChangeMock = jest.fn((name, value, property) => { });
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, 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('selectOptions', expect.objectContaining({ label: 'option 2', value: 'option 2' }), choiceProperty);
+    }));
+    test('displays matching options', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        const options = ['option 1', 'option 2', 'something different'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: () => { } }));
+        const input = screen.getByRole('combobox');
+        yield user.type(input, 'option');
+        yield screen.findByRole('option', { name: 'option 1' });
+        yield screen.findByRole('option', { name: 'option 2' });
+        expect(screen.queryByRole('option', { name: 'something different' })).not.toBeInTheDocument();
+    }));
+});
+describe('Multi select', () => {
+    // Right now an object property is required for this to function, but eventually this should go
+    // away.
+    const multiChoiceProperty = {
+        id: 'multiSelect',
+        name: 'Select Multiple',
+        type: 'array',
+    };
+    test('returns selected options', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        const onChangeMock = jest.fn((name, value, property) => { });
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock }));
+        const input = screen.getByRole('combobox');
+        yield user.click(input);
+        const option2 = yield screen.findByRole('option', { name: 'option 2' });
+        yield user.click(option2);
+        yield user.click(input); // selecting option closes the dropdown, re-open the options
+        const option3 = yield screen.findByRole('option', { name: 'option 3' });
+        yield user.click(option3);
+        expect(onChangeMock).toBeCalledTimes(2);
+        expect(onChangeMock).lastCalledWith('multiSelect', ['option 2', 'option 3'], multiChoiceProperty);
+    }));
+});

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

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

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

@@ -5,13 +5,12 @@ import { LocalDateTime } from '@js-joda/core';
 import { padStart } from 'lodash-es';
 import { InvalidDate } from '../../../../util';
 const TimePickerSelect = (props) => {
-    const { property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, placeholder } = props;
+    const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, placeholder } = props;
     const values = defaultValue ? defaultValue.split(':') : undefined;
     const hour = values ? parseInt(values[0]) : undefined;
     const minute = values ? parseInt(values[1]) : undefined;
     const second = values ? parseInt(values[2]) : undefined;
     const [value, setValue] = useState(defaultValue ? LocalDateTime.now().withHour(hour).withMinute(minute).withSecond(second) : null);
-    const id = property.id;
     useEffect(() => {
         if (defaultValue) {
             const values = defaultValue.split(':');
@@ -31,11 +30,11 @@ const TimePickerSelect = (props) => {
             const hour = padStart(date === null || date === void 0 ? void 0 : date.hour().toString(), 2, '0');
             const minute = padStart(date === null || date === void 0 ? void 0 : date.minute().toString(), 2, '0');
             const second = padStart(date === null || date === void 0 ? void 0 : date.second().toString(), 2, '0');
-            props.onChange(id, `${hour}:${minute}:${second}`, property);
+            props.onChange(property.id, `${hour}:${minute}:${second}`, property);
         }
         else {
             setValue(null);
-            props.onChange(id, date, property);
+            props.onChange(property.id, date, property);
         }
     };
     return (React.createElement(LocalizationProvider, null,

package/dist/published/stories/MenuBar.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MenuBar as CustomMenuBar } from '../index';
 import { Link } from '@mui/material';
-const logo = require('../SA_logo.jpeg');
+const logo = require('../assets/SA_logo.jpeg');
 export default {
     title: 'Data Display/MenuBar',
     component: CustomMenuBar,

package/dist/published/stories/TimePickerSelect.stories.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<(props: import("../components/custom/FormField/FormField").FormFieldProps) => JSX.Element>;
+declare const _default: ComponentMeta<(props: import("../components/custom/FormField/FormField").FormFieldProps & {
+    id: string;
+}) => JSX.Element>;
 export default _default;
-export declare const TimePicker: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => JSX.Element>;
+export declare const TimePicker: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps & {
+    id: string;
+}) => JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.183",
+    "version": "1.0.0-dev.185",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -44,6 +44,7 @@
         "@storybook/testing-library": "^0.0.11",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
+        "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^28.1.4",
         "@types/node": "^17.0.41",
         "@types/react": "^17.0.49",
@@ -52,7 +53,9 @@
         "babel-loader": "^8.2.5",
         "copyfiles": "^2.4.1",
         "eslint": "^8.22.0",
+        "eslint-plugin-jest-dom": "^5.2.0",
         "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-testing-library": "^6.2.0",
         "husky": "^4.3.8",
         "is-ci": "^3.0.1",
         "jest": "^28.1.2",
@@ -106,6 +109,10 @@
     },
     "jest": {
         "verbose": true,
-        "testEnvironment": "jsdom"
+        "testEnvironment": "jsdom",
+        "testPathIgnorePatterns": [
+            "/node_modules/",
+            "<rootDir>/dist/"
+        ]
     }
 }