@evoke-platform/ui-components 1.6.0-dev.8 → 1.6.0-dev.9

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

@@ -45,7 +45,7 @@ const AddressFieldComponent = (props) => {
         setAnchorEl(null);
     };
     return (React.createElement(Box, null,
-        !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: {
+        !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: readOnly ? undefined : placeholder, InputProps: {
                 type: 'search',
                 autoComplete: 'off',
             }, 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

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

@@ -56,12 +56,12 @@ const BooleanSelect = (props) => {
         return readOnlyComponent();
     }
     return displayOption === 'dropdown' ? (React.createElement(Autocomplete, { renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, placeholder: placeholder, size: size ?? 'medium' })), value: booleanOptions.find((opt) => opt.value === value) ?? '', onChange: (e, selectedValue) => handleChange(selectedValue.value), isOptionEqualToValue: (option, val) => option?.value === val?.value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}), sortBy: "NONE", required: strictlyTrue })) : (React.createElement(FormControl, { required: strictlyTrue, error: error, fullWidth: true },
-        React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), sx: {
+        React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), sx: { marginLeft: '-8px' }, control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), sx: {
                     alignSelf: 'start',
-                } })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), sx: {
+                }, ...(additionalProps ?? {}) })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), sx: {
                     alignSelf: 'start',
                     padding: '4px 9px 9px 9px',
-                } })) }),
+                }, ...(additionalProps ?? {}) })) }),
         error && errorMessage?.length && React.createElement(FormHelperText, { sx: { marginX: 0 } }, errorMessage),
         descriptionComponent()));
 };

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

@@ -1,4 +1,5 @@
 import { DateTimeFormatter } from '@js-joda/core';
+import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { InvalidDate, LocalDate, nativeJs } from '../../../../util';
 import { DatePicker, LocalizationProvider, TextField } from '../../../core';
@@ -36,6 +37,11 @@ const DatePickerSelect = (props) => {
         onChange && onChange(property.id, date, property);
     };
     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 ?? {}) })) })));
+        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', 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })) })));
 };
 export default DatePickerSelect;

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

@@ -1,4 +1,5 @@
 import { LocalDate, LocalDateTime, LocalTime, nativeJs } from '@js-joda/core';
+import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { InvalidDate } from '../../../../util';
 import { DateTimePicker, LocalizationProvider, TextField } from '../../../core';
@@ -43,6 +44,11 @@ const DateTimePickerSelect = (props) => {
         props.onChange && props.onChange(property.id, date, property);
     };
     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 ?? {}) })) })));
+        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', 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })) })));
 };
 export default DateTimePickerSelect;

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

@@ -36,9 +36,12 @@ const InputFieldComponent = (props) => {
         setInputValue(selectValue);
     };
     const InputProps = property.type === 'number'
-        ? { inputComponent: NumericFormat, inputProps: { min, max, readOnly } }
+        ? {
+            inputComponent: NumericFormat,
+            inputProps: { min, max, readOnly, ...(additionalProps?.inputProps ?? {}) },
+        }
         : property.type === 'integer'
-            ? { inputProps: { min, max } }
+            ? { inputProps: { min, max, ...(additionalProps?.inputProps ?? {}) } }
             : null;
     return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, 
         // note: this is different between widgets and builder
@@ -62,7 +65,7 @@ const InputFieldComponent = (props) => {
                     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
+        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: readOnly ? undefined : 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',

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

@@ -1,9 +1,11 @@
 import { LocalDateTime } from '@js-joda/core';
 import { TimePicker } from '@mui/x-date-pickers';
-import { isUndefined, padStart } from 'lodash';
+import { isUndefined, omit, padStart } from 'lodash';
+import { DateTime } from 'luxon';
 import React, { useEffect, useState } from 'react';
 import { InvalidDate } from '../../../../util';
 import { LocalizationProvider, TextField } from '../../../core';
+import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const TimePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, placeholder, additionalProps, } = props;
     const values = defaultValue ? defaultValue.split(':') : undefined;
@@ -39,7 +41,15 @@ const TimePickerSelect = (props) => {
             props.onChange && props.onChange(property.id, date, property);
         }
     };
-    return (React.createElement(LocalizationProvider, null,
-        React.createElement(TimePicker, { 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', placeholder: placeholder, readOnly: readOnly, ...(additionalProps ?? {}) })), readOnly: readOnly })));
+    return readOnly ? (React.createElement(InputFieldComponent, { ...{
+            ...props,
+            defaultValue: value instanceof LocalDateTime ? DateTime.fromISO(value.toString()).toFormat('hh:mm a') : '',
+        } })) : (React.createElement(LocalizationProvider, null,
+        React.createElement(TimePicker, { 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', placeholder: placeholder, 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })), readOnly: readOnly })));
 };
 export default TimePickerSelect;

package/package.json

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