@evoke-platform/ui-components 1.0.0-dev.190 → 1.0.0-dev.192

package/dist/published/components/core/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DateTimePickerProps as MUIDateTimePickerProps } from '@mui/x-date-pickers';
+import { CalendarDate } from '../../../util';
+export declare type DateTimePickerProps = Omit<MUIDateTimePickerProps<string | CalendarDate, CalendarDate>, 'renderInput'> & {
+    renderInput?: MUIDateTimePickerProps<string | CalendarDate, CalendarDate>['renderInput'];
+};
+declare const DateTimePicker: (props: DateTimePickerProps) => JSX.Element;
+export default DateTimePicker;

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

@@ -0,0 +1,41 @@
+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 from 'react';
+import UIThemeProvider from '../../../theme';
+import { DateTimePicker as MUIDateTimePicker, } from '@mui/x-date-pickers';
+import TextField from '../TextField';
+import { InvalidDate } from '../../../util';
+import { LocalDateTime } from '@js-joda/core';
+const DateTimePicker = (props) => {
+    var _a;
+    const { value: inputValue, onChange: handleChange } = props, rest = __rest(props, ["value", "onChange"]);
+    let value = null;
+    try {
+        value = typeof inputValue === 'string' ? LocalDateTime.parse(inputValue) : inputValue;
+    }
+    catch (err) {
+        // If we fail to parse the input string, log the error and continue as if no value was set.
+        console.error((_a = err.message) !== null && _a !== void 0 ? _a : err);
+    }
+    const onChange = (newValue, keyboardInputValue) => {
+        // Joda does not have a representation of an invalid date, so if the component fails to
+        // parse a date, the onChange receives an Error instead.  Replace the error with our own
+        // invalid date marker.
+        if (newValue instanceof Error) {
+            newValue = new InvalidDate(keyboardInputValue);
+        }
+        handleChange(newValue, keyboardInputValue);
+    };
+    return (React.createElement(UIThemeProvider, null,
+        React.createElement(MUIDateTimePicker, Object.assign({ value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, Object.assign({}, params)) }, rest))));
+};
+export default DateTimePicker;

package/dist/published/components/core/DateTimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DateTimePicker';
+export { default as DateTimePicker } from './DateTimePicker';

package/dist/published/components/core/DateTimePicker/index.js

@@ -0,0 +1,2 @@
+export * from './DateTimePicker';
+export { default as DateTimePicker } from './DateTimePicker';

package/dist/published/components/core/index.d.ts

@@ -10,6 +10,7 @@ export { Checkbox } from './Checkbox';
 export { Chip } from './Chip';
 export { CircularProgress } from './CircularProgress';
 export * from './DatePicker';
+export * from './DateTimePicker';
 export { Dialog, DialogTitle, DialogActions, DialogContent, DialogContentText } from './Dialog';
 export { Divider } from './Divider';
 export { Drawer } from './Drawer';

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

@@ -10,6 +10,7 @@ export { Checkbox } from './Checkbox';
 export { Chip } from './Chip';
 export { CircularProgress } from './CircularProgress';
 export * from './DatePicker';
+export * from './DateTimePicker';
 export { Dialog, DialogTitle, DialogActions, DialogContent, DialogContentText } from './Dialog';
 export { Divider } from './Divider';
 export { Drawer } from './Drawer';

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

@@ -1,14 +1,15 @@
 import { Popover } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import InputMask from 'react-input-mask';
-import { CancelOutlined } from '@mui/icons-material';
-import { Button, List, ListItem, MenuItem, TextField, Typography } from '../../../core';
+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 [selectOptions, setSelectOptions] = useState([]);
     const [anchorEl, setAnchorEl] = React.useState(null);
+    const textFieldRef = useRef(null);
     const open = Boolean(anchorEl);
     const popoverId = open ? `${id}-popover` : undefined;
     useEffect(() => {
@@ -25,23 +26,12 @@ const AddressFieldComponent = (props) => {
                 setSelectOptions(addresses
                     .filter((address) => address.address.line1)
                     .map((address) => {
-                    let label = '', sublabel = '';
-                    if (address.address.line1)
-                        label = label.concat(address.address.line1);
-                    if (address.address.city)
-                        sublabel = sublabel.concat(`${address.address.city}`);
-                    if (address.address.county)
-                        sublabel = sublabel
-                            ? sublabel.concat(`, ${address.address.county}`)
-                            : address.address.county;
-                    if (address.address.state)
-                        sublabel = sublabel
-                            ? sublabel.concat(`, ${address.address.state}`)
-                            : address.address.state;
-                    if (address.address.zipCode)
-                        sublabel = sublabel
-                            ? sublabel.concat(` ${address.address.zipCode}`)
-                            : address.address.zipCode;
+                    const { line1, city, county, state, zipCode } = address.address;
+                    const label = line1 !== null && line1 !== void 0 ? line1 : '';
+                    let sublabel = [city, county, state].filter(Boolean).join(', ');
+                    if (zipCode) {
+                        sublabel = sublabel ? `${sublabel} ${zipCode}` : zipCode;
+                    }
                     return { label, sublabel, value: address.address };
                 }));
             });
@@ -56,10 +46,10 @@ const AddressFieldComponent = (props) => {
         setAnchorEl(null);
     };
     return (React.createElement(Box, null,
-        !mask ? (React.createElement(TextField, Object.assign({ 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: {
+        !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: {
                 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, sx: readOnly
+            }, 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
                 ? {
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: 'none',
@@ -78,23 +68,23 @@ const AddressFieldComponent = (props) => {
                 horizontal: 'left',
             }, PaperProps: {
                 sx: {
-                    width: '100%',
-                    height: '400px',
-                    maxWidth: '300px',
-                    boxShadow: 'none',
+                    width: ((_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth)
+                        ? `${textFieldRef.current.offsetWidth}px`
+                        : '100%',
+                    height: 'fit-content',
+                    maxHeight: '400px',
+                    borderRadius: '8px',
+                    boxShadow: 'rgb(222, 218, 218) -2px 4px 5px -3px, rgb(150 150 150 / 14%) 0px 0px 10px 2px',
                     zIndex: 2000,
                 },
             } },
-            React.createElement(List, null,
-                selectOptions.map((option) => {
-                    return (React.createElement(MenuItem, { key: option.label + option.sublabel, onClick: () => handleClick(option) },
-                        React.createElement(Box, { sx: {
-                                flexGrow: 1,
-                            } },
-                            React.createElement(Typography, null, option.label),
-                            React.createElement(Typography, { sx: { color: '#586069' } }, option.sublabel))));
-                }),
-                React.createElement(ListItem, { sx: { justifyContent: 'center' } },
-                    React.createElement(Button, { fullWidth: true, size: "small", color: "primary", variant: "outlined", startIcon: React.createElement(CancelOutlined, null), onClick: () => handleClose() }, "Close")))))));
+            React.createElement(List, null, selectOptions.map((option, index) => {
+                return (React.createElement(MenuItem, { key: `${option.label}-${option.sublabel}-${index}`, onClick: () => handleClick(option) },
+                    React.createElement(Box, { sx: {
+                            flexGrow: 1,
+                        } },
+                        React.createElement(Typography, null, option.label),
+                        React.createElement(Typography, { sx: { color: '#586069' } }, option.sublabel))));
+            }))))));
 };
 export default AddressFieldComponent;

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

@@ -26,14 +26,14 @@ const asMonthDayYearFormat = (date) => {
     }
 };
 const DatePickerSelect = (props) => {
-    const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, additionalProps } = props;
+    const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, onChange, additionalProps, } = props;
     const [value, setValue] = useState(asCalendarDate(defaultValue));
     useEffect(() => {
         setValue(asCalendarDate(defaultValue));
     }, [defaultValue]);
     const handleChange = (date) => {
         setValue(date);
-        props.onChange(property.id, date, property);
+        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 : {})))) })));

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

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

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

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { DateTimePicker, LocalizationProvider, TextField } from '../../../core';
+import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
+import { LocalDate, LocalDateTime, LocalTime, nativeJs } from '@js-joda/core';
+import { InvalidDate } from '../../../../util';
+function asCalendarDate(value) {
+    if (!value) {
+        return null;
+    }
+    if (value instanceof LocalDateTime || value instanceof InvalidDate) {
+        return value;
+    }
+    if (value instanceof Date) {
+        if (isNaN(value.getTime())) {
+            // LocalDateTime cannot represent an invalid date, use InvalidDate instead.
+            return new InvalidDate();
+        }
+        return LocalDateTime.from(nativeJs(value));
+    }
+    return value.toString();
+}
+const DateTimePickerSelect = (props) => {
+    const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, additionalProps } = props;
+    const [value, setValue] = useState(asCalendarDate(defaultValue));
+    useEffect(() => {
+        setValue(asCalendarDate(defaultValue));
+    }, [defaultValue]);
+    const handleChange = (date) => {
+        // The date picker component initially returns a LocalDate
+        // before the time is picked, causing issues downstream.
+        // Convert it to a LocalDateTime to avoid issues.
+        if (date instanceof LocalDate) {
+            date = LocalDateTime.of(date, LocalTime.of(0));
+        }
+        setValue(date);
+        props.onChange(property.id, date, property);
+    };
+    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, Object.assign(Object.assign({}, props), { defaultValue: 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 : {})))) })));
+};
+export default DateTimePickerSelect;

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

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

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

@@ -0,0 +1,80 @@
+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, PointerEventsCheckLevel } from '@testing-library/user-event';
+import DateTimePickerSelect from './DateTimePickerSelect';
+import { LocalDateTime, 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 dateTimeProperty = {
+    id: 'testDateTime',
+    name: 'Date Time',
+    type: 'date-time',
+};
+beforeAll(() => {
+    // Set specific date for a repeatable test.
+    jest.useFakeTimers({
+        now: new Date('2024-02-11T05:25:25'),
+        // 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 time', () => __awaiter(void 0, void 0, void 0, function* () {
+    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);
+    // 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);
+}));
+test('returns manually entered date time', () => __awaiter(void 0, void 0, void 0, function* () {
+    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');
+    // 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* () {
+    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');
+    // Component automatically appends '/' as needed.
+    expect(onChangeMock).lastCalledWith('testDateTime', new InvalidDate('08/20/'), dateTimeProperty);
+}));

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

@@ -0,0 +1 @@
+export * from './DateTimePickerSelect';

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

@@ -0,0 +1 @@
+export * from './DateTimePickerSelect';

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

@@ -6,6 +6,7 @@ import FileUploadControl from './FileUpload/FileUpload';
 import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
 import Select from './Select/Select';
 import TimePickerSelect from './TimePickerSelect/TimePickerSelect';
+import DateTimePickerSelect from './DateTimePickerSelect/DateTimePickerSelect';
 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;
@@ -41,6 +42,9 @@ const FormField = (props) => {
         case 'date':
             control = React.createElement(DatePickerSelect, Object.assign({}, commonProps));
             break;
+        case 'date-time':
+            control = React.createElement(DateTimePickerSelect, Object.assign({}, commonProps));
+            break;
         case 'time':
             control = React.createElement(TimePickerSelect, Object.assign({}, commonProps));
             break;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.190",
+    "version": "1.0.0-dev.192",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",