@evoke-platform/ui-components 1.0.0-dev.226 → 1.0.0-dev.227

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

@@ -1,12 +1,3 @@
-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 { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
@@ -19,66 +10,62 @@ const addressProperty = {
     name: 'Line 1',
     type: 'text',
 };
-test('displays matching addresses', () => __awaiter(void 0, void 0, void 0, function* () {
+test('displays matching addresses', async () => {
     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',
-                },
+    const queryAddresses = async (search) => [
+        {
+            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',
-                },
+        },
+        {
+            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* () {
+    await user.type(addressField, '1234 Main');
+    await screen.findByRole('menuitem', { name: /1234 Main Street/ });
+    await screen.findByRole('menuitem', { name: /12345 Main Avenue/ });
+});
+test('returns manually typed address', async () => {
     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');
+    await 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* () {
+});
+test('returns selected search result', async () => {
     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',
-                },
+    const queryAddresses = async (search) => [
+        {
+            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);
+    await user.type(addressField, '1234 Main');
+    const searchResult = await screen.findByRole('menuitem', { name: /1234 Main Street/ });
+    await user.click(searchResult);
     expect(onChangeMock).lastCalledWith('addressLine1', {
         line1: '1234 Main Street',
         city: 'Columbia',
@@ -86,4 +73,4 @@ test('returns selected search result', () => __awaiter(void 0, void 0, void 0, f
         state: 'Maryland',
         zipCode: '21046',
     }, addressProperty, undefined);
-}));
+});

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

@@ -4,16 +4,15 @@ import InputMask from 'react-input-mask';
 import { List, MenuItem, TextField, Typography } from '../../../core';
 import { Box } from '../../../layout';
 const AddressFieldComponent = (props) => {
-    var _a;
     const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, additionalProps, } = props;
-    const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
+    const [value, setValue] = useState(defaultValue ?? '');
     const [selectOptions, setSelectOptions] = useState([]);
     const [anchorEl, setAnchorEl] = useState(null);
     const textFieldRef = useRef(null);
     const open = Boolean(anchorEl);
     const popoverId = open ? `${id}-popover` : undefined;
     useEffect(() => {
-        setValue(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
+        setValue(defaultValue ?? '');
     }, [defaultValue]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleChange = (e) => {
@@ -27,7 +26,7 @@ const AddressFieldComponent = (props) => {
                     .filter((address) => address.address.line1)
                     .map((address) => {
                     const { line1, city, county, state, zipCode } = address.address;
-                    const label = line1 !== null && line1 !== void 0 ? line1 : '';
+                    const label = line1 ?? '';
                     let sublabel = [city, county, state].filter(Boolean).join(', ');
                     if (zipCode) {
                         sublabel = sublabel ? `${sublabel} ${zipCode}` : zipCode;
@@ -46,10 +45,10 @@ const AddressFieldComponent = (props) => {
         setAnchorEl(null);
     };
     return (React.createElement(Box, null,
-        !mask ? (React.createElement(TextField, Object.assign({ id: id, inputRef: textFieldRef, 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, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: 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 }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {})))) : (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, Object.assign({ id: id, inputRef: textFieldRef, sx: readOnly
+            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
                 ? {
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: 'none',
@@ -59,7 +58,7 @@ const AddressFieldComponent = (props) => {
                         backgroundColor: '#f4f6f8',
                     },
                 }
-                : 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 }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {})))))),
+                : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, value: value, ...(additionalProps ?? {}) })))),
         !readOnly && (React.createElement(Popover, { id: popoverId, open: open, anchorEl: anchorEl, onClose: handleClose, disableAutoFocus: true, marginThreshold: undefined, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'left',
@@ -68,7 +67,7 @@ const AddressFieldComponent = (props) => {
                 horizontal: 'left',
             }, PaperProps: {
                 sx: {
-                    width: ((_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth)
+                    width: textFieldRef?.current?.offsetWidth
                         ? `${textFieldRef.current.offsetWidth}px`
                         : '100%',
                     height: 'fit-content',

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

@@ -21,6 +21,6 @@ const BooleanSelect = (props) => {
             value: false,
         },
     ];
-    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, Object.assign({ id: id, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), value: value, onChange: handleChange, inputValue: value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' } }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {}))));
+    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : (React.createElement(Autocomplete, { id: id, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, size: size ?? 'medium', placeholder: placeholder })), value: value, onChange: handleChange, inputValue: value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}) }));
 };
 export default BooleanSelect;

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

@@ -1,12 +1,3 @@
-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 { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
@@ -19,14 +10,14 @@ const booleanProperty = {
     name: 'Question',
     type: 'boolean',
 };
-test('returns selected option', () => __awaiter(void 0, void 0, void 0, function* () {
+test('returns selected option', async () => {
     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);
+    await user.click(inputField);
+    const yesOption = await screen.findByRole('option', { name: 'Yes' });
+    await user.click(yesOption);
     expect(onChangeMock).toBeCalledWith('theQuestion', 'Yes', // ?? why not true/false?
     booleanProperty);
-}));
+});

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

@@ -35,7 +35,7 @@ const DatePickerSelect = (props) => {
         setValue(date);
         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' }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {})))) })));
+    return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: asMonthDayYearFormat(value) } })) : (React.createElement(LocalizationProvider, null,
+        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', ...(additionalProps ?? {}) })) })));
 };
 export default DatePickerSelect;

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

@@ -1,12 +1,3 @@
-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 { LocalDate, Month } from '@js-joda/core';
 import '@testing-library/jest-dom/extend-expect';
 import { render, screen, within } from '@testing-library/react';
@@ -42,32 +33,32 @@ beforeAll(() => {
 afterAll(() => {
     jest.useRealTimers();
 });
-test('returns selected date', () => __awaiter(void 0, void 0, void 0, function* () {
+test('returns selected date', async () => {
     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);
+    await user.click(calendarIcon);
+    const calendar = await screen.findByRole('dialog');
+    const feb29 = await within(calendar).findByRole('gridcell', { name: '29' });
+    await user.click(feb29);
     expect(onChangeMock).toBeCalledWith('testDate', LocalDate.of(2024, Month.FEBRUARY, 29), dateProperty);
-}), 10000);
-test('returns manually entered date', () => __awaiter(void 0, void 0, void 0, function* () {
+}, 10000);
+test('returns manually entered date', async () => {
     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');
+    await 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* () {
+});
+test('returns incomplete dates', async () => {
     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');
+    await 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/DateTimePickerSelect/DateTimePickerSelect.js

@@ -42,7 +42,7 @@ const DateTimePickerSelect = (props) => {
         setValue(date);
         props.onChange(property.id, date, property);
     };
-    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, Object.assign(Object.assign({}, props), { defaultValue: formatDateTime(value) })))) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DateTimePicker, { value: value, onChange: handleChange, 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' }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {})))) })));
+    return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: formatDateTime(value) } })) : (React.createElement(LocalizationProvider, null,
+        React.createElement(DateTimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', ...(additionalProps ?? {}) })) })));
 };
 export default DateTimePickerSelect;

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

@@ -1,12 +1,3 @@
-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 { LocalDateTime, Month } from '@js-joda/core';
 import '@testing-library/jest-dom/extend-expect';
 import { render, screen, within } from '@testing-library/react';
@@ -42,39 +33,39 @@ beforeAll(() => {
 afterAll(() => {
     jest.useRealTimers();
 });
-test('returns selected date time', () => __awaiter(void 0, void 0, void 0, function* () {
+test('returns selected date time', async () => {
     const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never });
     const onChangeMock = jest.fn((name, value, property) => { });
     render(React.createElement(DateTimePickerSelect, { id: "pickDateTime", property: dateTimeProperty, 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);
+    await user.click(calendarIcon);
+    const calendar = await screen.findByRole('dialog');
+    const feb29 = await within(calendar).findByRole('gridcell', { name: '29' });
+    await user.click(feb29);
     // The test can't actually check that the correct time was picked due to issues
     // testing the time picker,
     // https://stackoverflow.com/questions/74812963/how-do-i-pick-the-time-in-an-mui-datetimepicker-using-testing-library-react-and.
     // All it can do is check the date picker part works.
     expect(onChangeMock).toBeCalledWith('testDateTime', LocalDateTime.of(2024, Month.FEBRUARY, 29, 0, 0, 0), dateTimeProperty);
-}), 10000);
-test('returns manually entered date time', () => __awaiter(void 0, void 0, void 0, function* () {
+}, 10000);
+test('returns manually entered date time', async () => {
     const user = userEvent.setup();
     const onChangeMock = jest.fn((name, value, property) => { });
     render(React.createElement(DateTimePickerSelect, { id: "pickDateTime", property: dateTimeProperty, onChange: onChangeMock }));
     const input = screen.getByRole('textbox');
-    yield user.type(input, '03/27/2024 09:25 AM');
+    await user.type(input, '03/27/2024 09:25 AM');
     // component ignores '/', i.e. input could also have been '03272024'.
     // It also treats the AM as one event since one a user types 'A' or 'P'
     // the picker fills in the 'M'.
     expect(onChangeMock).toBeCalledTimes(13);
     expect(onChangeMock).lastCalledWith('testDateTime', LocalDateTime.of(2024, Month.MARCH, 27, 9, 25), dateTimeProperty);
-}));
-test('returns incomplete date times', () => __awaiter(void 0, void 0, void 0, function* () {
+});
+test('returns incomplete date times', async () => {
     const user = userEvent.setup();
     const onChangeMock = jest.fn((name, value, property) => { });
     render(React.createElement(DateTimePickerSelect, { id: "pickDateTime", property: dateTimeProperty, onChange: onChangeMock }));
     const input = screen.getByRole('textbox');
-    yield user.type(input, '08/20');
+    await user.type(input, '08/20');
     // Component automatically appends '/' as needed.
     expect(onChangeMock).lastCalledWith('testDateTime', new InvalidDate('08/20/'), dateTimeProperty);
-}));
+});

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

@@ -3,7 +3,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { Button, TextField } from '../../../core';
 const FileUploadControl = (props) => {
-    var _a;
     const [uploadedFile, setUploadedFile] = useState(undefined);
     const { id, property, required, error, errorMessage, additionalProps } = props;
     const styles = {
@@ -50,17 +49,17 @@ const FileUploadControl = (props) => {
         multiple: false,
         disabled: !!uploadedFile,
     });
-    return (React.createElement(Grid, Object.assign({ container: true }, getRootProps({
-        style: {
-            border: error ? '1px solid red' : '1px solid #c4c4c4',
-            borderRadius: '8px',
-            height: '56px',
-        },
-    })),
+    return (React.createElement(Grid, { container: true, ...getRootProps({
+            style: {
+                border: error ? '1px solid red' : '1px solid #c4c4c4',
+                borderRadius: '8px',
+                height: '56px',
+            },
+        }) },
         React.createElement(Grid, { item: true, flexGrow: 1 },
-            React.createElement("input", Object.assign({ disabled: true }, getInputProps())),
-            React.createElement(TextField, Object.assign({ 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 }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {})))),
+            React.createElement("input", { disabled: true, ...getInputProps() }),
+            React.createElement(TextField, { id: id, sx: { '& fieldset': { border: 'none' } }, fullWidth: true, value: uploadedFile?.name ?? (isDragActive ? 'Drop your file here' : 'File'), error: error, errorMessage: errorMessage, required: required, ...(additionalProps ?? {}) })),
         React.createElement(Grid, { item: true },
-            React.createElement(Button, { sx: Object.assign(Object.assign({}, styles.button), styles.selectFileBtn), onClick: () => handleSelectFile() }, uploadedFile ? 'Remove' : 'Select File'))));
+            React.createElement(Button, { sx: { ...styles.button, ...styles.selectFileBtn }, onClick: () => handleSelectFile() }, uploadedFile ? 'Remove' : 'Select File'))));
 };
 export default FileUploadControl;

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

@@ -11,7 +11,7 @@ const FormField = (props) => {
     const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, } = props;
     let control;
     const commonProps = {
-        id: id !== null && id !== void 0 ? id : property.id,
+        id: id ?? property.id,
         property,
         onChange,
         onBlur,
@@ -32,33 +32,33 @@ const FormField = (props) => {
         additionalProps,
     };
     if (queryAddresses) {
-        control = (React.createElement(AddressFieldComponent, Object.assign({}, commonProps, { mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows, queryAddresses: queryAddresses })));
+        control = (React.createElement(AddressFieldComponent, { ...commonProps, mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows, queryAddresses: queryAddresses }));
         return control;
     }
     switch (property.type) {
         case 'boolean':
-            control = (React.createElement(BooleanSelect, Object.assign({}, commonProps, { defaultValue: defaultValue ? 'Yes' : defaultValue === undefined ? '' : 'No' })));
+            control = (React.createElement(BooleanSelect, { ...commonProps, defaultValue: defaultValue ? 'Yes' : defaultValue === undefined ? '' : 'No' }));
             break;
         case 'date':
-            control = React.createElement(DatePickerSelect, Object.assign({}, commonProps));
+            control = React.createElement(DatePickerSelect, { ...commonProps });
             break;
         case 'date-time':
-            control = React.createElement(DateTimePickerSelect, Object.assign({}, commonProps));
+            control = React.createElement(DateTimePickerSelect, { ...commonProps });
             break;
         case 'time':
-            control = React.createElement(TimePickerSelect, Object.assign({}, commonProps));
+            control = React.createElement(TimePickerSelect, { ...commonProps });
             break;
         case 'fileUpload':
-            control = React.createElement(FileUploadControl, Object.assign({}, commonProps));
+            control = React.createElement(FileUploadControl, { ...commonProps });
             break;
         case 'choices':
-            control = React.createElement(Select, Object.assign({}, commonProps));
+            control = React.createElement(Select, { ...commonProps });
             break;
         case 'array':
-            control = React.createElement(Select, Object.assign({}, commonProps));
+            control = React.createElement(Select, { ...commonProps });
             break;
         default:
-            control = (React.createElement(InputFieldComponent, Object.assign({}, commonProps, { mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows })));
+            control = (React.createElement(InputFieldComponent, { ...commonProps, mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows }));
             break;
     }
     return control;

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

@@ -1,36 +1,24 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useEffect, useState } from 'react';
 import InputMask from 'react-input-mask';
 import NumberFormat from 'react-number-format';
 import { Autocomplete, TextField } from '../../../core';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const NumericFormat = (props) => {
-    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({
+    const { inputRef, onChange, defaultValue, ...other } = props;
+    return (React.createElement(NumberFormat, { ...other, getInputRef: inputRef, onValueChange: (values) => {
+            onChange?.({
                 target: {
                     value: values.floatValue,
                 },
             });
-        }, isNumericString: true, fixedDecimalScale: true, allowNegative: true })));
+        }, isNumericString: true, fixedDecimalScale: true, allowNegative: true }));
 };
 const InputFieldComponent = (props) => {
-    var _a;
     const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, min, max, isMultiLineText, rows, inputMaskPlaceholderChar, additionalProps, } = props;
-    const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
+    const [value, setValue] = useState(defaultValue ?? '');
     const [inputValue, setInputValue] = useState('');
     useEffect(() => {
-        setValue(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
+        setValue(defaultValue ?? '');
     }, [defaultValue]);
     const handleChange = (e) => {
         const inputValue = property.type === 'integer' && /^-?\d+$/.test(e.target.value)
@@ -51,24 +39,28 @@ const InputFieldComponent = (props) => {
         : property.type === 'integer'
             ? { inputProps: { min, max } }
             : null;
-    const selectOptions = (_a = property.enum) !== null && _a !== void 0 ? _a : [];
+    const selectOptions = property.enum ?? [];
     if (property.enum && !property.enum.includes(value)) {
         //note: this is different between widgets and builder
         //builder had select options being {label, value}
         //widgets had it like this, as strings w/isOptionEqualToValue
         selectOptions.push(value);
     }
-    return property.enum && !readOnly ? (React.createElement(Autocomplete, Object.assign({ id: id, options: selectOptions, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, errorMessage: errorMessage, fullWidth: true, onBlur: onBlur, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
+    return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, options: selectOptions, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, error: error, errorMessage: errorMessage, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder })), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
             return option.value === value;
-        }, error: error, required: required, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', onInputChange: handleInputValueChange }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {})))) : !mask ? (React.createElement(TextField, Object.assign({ id: id, sx: Object.assign({ background: 'white', borderRadius: '8px' }, (readOnly && {
-            '& .MuiOutlinedInput-notchedOutline': {
-                border: 'none',
-            },
-            '.MuiOutlinedInput-root': {
-                borderRadius: '8px',
-                backgroundColor: '#f4f6f8',
-            },
-        })), error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {})))) : (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, Object.assign({ id: id, sx: readOnly
+        }, error: error, required: required, inputValue: inputValue ?? '', onInputChange: handleInputValueChange, ...(additionalProps ?? {}) })) : !mask ? (React.createElement(TextField, { id: id, sx: {
+            background: 'white',
+            borderRadius: '8px',
+            ...(readOnly && {
+                '& .MuiOutlinedInput-notchedOutline': {
+                    border: 'none',
+                },
+                '.MuiOutlinedInput-root': {
+                    borderRadius: '8px',
+                    backgroundColor: '#f4f6f8',
+                },
+            }),
+        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, { id: id, sx: readOnly
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: 'none',
@@ -78,6 +70,6 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }
-            : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), fullWidth: true, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {}))))));
+            : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { ...InputProps, readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) }))));
 };
 export default InputFieldComponent;

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

@@ -1,12 +1,3 @@
-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 { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
@@ -20,15 +11,15 @@ describe('Free-text input', () => {
         name: 'Input Field',
         type: 'string',
     };
-    test('returns entered value', () => __awaiter(void 0, void 0, void 0, function* () {
+    test('returns entered value', async () => {
         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');
+        await 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
@@ -39,14 +30,14 @@ describe('Autocomplete', () => {
         type: 'string',
         enum: ['option 1', 'option 2'],
     };
-    test('returns selected value', () => __awaiter(void 0, void 0, void 0, function* () {
+    test('returns selected value', async () => {
         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);
+        await user.click(input);
+        const option2 = await screen.findByRole('option', { name: 'option 2' });
+        await user.click(option2);
         expect(onChangeMock).toBeCalledWith('enumField', 'option 2', enumProperty);
-    }));
+    });
 });