@evoke-platform/ui-components 1.0.0-dev.188 → 1.0.0-dev.189

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

@@ -152,7 +152,6 @@ export const valueEditor = (props) => {
     var _a, _b;
     // For backward compatibility, if enable preset values is true, but preset
     // values are not defined, add in the user id preset value
-    console.log(props);
     if (!((_a = props.context) === null || _a === void 0 ? void 0 : _a.presetValues) && ((_b = props.context) === null || _b === void 0 ? void 0 : _b.enablePresetValues)) {
         props.context.presetValues = [
             {

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

@@ -5,7 +5,7 @@ import { CancelOutlined } from '@mui/icons-material';
 import { Button, List, ListItem, MenuItem, TextField, Typography } from '../../../core';
 import { Box } from '../../../layout';
 const AddressFieldComponent = (props) => {
-    const { id, 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, additionalProps, } = props;
     const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const [selectOptions, setSelectOptions] = useState([]);
     const [anchorEl, setAnchorEl] = React.useState(null);
@@ -56,10 +56,10 @@ const AddressFieldComponent = (props) => {
         setAnchorEl(null);
     };
     return (React.createElement(Box, null,
-        !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: {
+        !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: {
                 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
+            }, 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
                 ? {
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: 'none',
@@ -69,7 +69,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 })))),
+                : 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 : {})))))),
         !readOnly && (React.createElement(Popover, { id: popoverId, open: open, anchorEl: anchorEl, onClose: handleClose, disableAutoFocus: true, marginThreshold: undefined, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'left',

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Autocomplete, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const BooleanSelect = (props) => {
-    const { id, property, defaultValue, error, errorMessage, readOnly, size, placeholder, onBlur } = props;
+    const { id, property, defaultValue, error, errorMessage, readOnly, size, placeholder, onBlur, additionalProps } = props;
     const [value, setValue] = useState(defaultValue);
     useEffect(() => {
         setValue(defaultValue);
@@ -21,6 +21,6 @@ const BooleanSelect = (props) => {
             value: false,
         },
     ];
-    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { 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' } }));
+    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 : {}))));
 };
 export default BooleanSelect;

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

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

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

@@ -5,7 +5,7 @@ import { Button, TextField } from '../../../core';
 const FileUploadControl = (props) => {
     var _a;
     const [uploadedFile, setUploadedFile] = useState(undefined);
-    const { id, property, required, error, errorMessage } = props;
+    const { id, property, required, error, errorMessage, additionalProps } = props;
     const styles = {
         button: {
             textTransform: 'initial',
@@ -59,7 +59,7 @@ const FileUploadControl = (props) => {
     })),
         React.createElement(Grid, { item: true, flexGrow: 1 },
             React.createElement("input", Object.assign({ disabled: true }, getInputProps())),
-            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(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(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

@@ -27,6 +27,7 @@ export declare type FormFieldProps = {
     renderOption?: (props: unknown, option: AutocompleteOption | string, state: unknown) => React.ReactNode;
     getOptionLabel?: (option: AutocompleteOption) => string;
     disableCloseOnSelect?: boolean;
+    additionalProps?: Record<string, unknown>;
 };
 declare const FormField: (props: FormFieldProps) => JSX.Element;
 export default FormField;

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

@@ -7,7 +7,7 @@ import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
 import Select from './Select/Select';
 import TimePickerSelect from './TimePickerSelect/TimePickerSelect';
 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, } = 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,
@@ -28,6 +28,7 @@ const FormField = (props) => {
         renderOption,
         getOptionLabel,
         disableCloseOnSelect,
+        additionalProps,
     };
     if (queryAddresses) {
         control = (React.createElement(AddressFieldComponent, Object.assign({}, commonProps, { mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows, queryAddresses: queryAddresses })));

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

@@ -26,7 +26,7 @@ export const NumericFormat = (props) => {
 };
 const InputFieldComponent = (props) => {
     var _a;
-    const { id, 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, additionalProps, } = props;
     const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const [inputValue, setInputValue] = useState('');
     useEffect(() => {
@@ -58,9 +58,9 @@ const InputFieldComponent = (props) => {
         //widgets had it like this, as strings w/isOptionEqualToValue
         selectOptions.push(value);
     }
-    return property.enum && !readOnly ? (React.createElement(Autocomplete, { 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, 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 option.value === value;
-        }, error: error, required: required, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', onInputChange: handleInputValueChange })) : !mask ? (React.createElement(TextField, { id: id, sx: Object.assign({ background: 'white', borderRadius: '8px' }, (readOnly && {
+        }, 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',
             },
@@ -68,7 +68,7 @@ const InputFieldComponent = (props) => {
                 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 })) : (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
+        })), 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
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: 'none',
@@ -78,6 +78,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 }))));
+            : 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 : {}))))));
 };
 export default InputFieldComponent;

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

@@ -3,7 +3,7 @@ import { Autocomplete, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const Select = (props) => {
     var _a, _b;
-    const { id, 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, additionalProps, } = props;
     const [value, setValue] = useState(defaultValue);
     const [inputValue, setInputValue] = useState('');
     useEffect(() => {
@@ -29,10 +29,10 @@ const Select = (props) => {
             setInputValue(selectValue);
         }
     };
-    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { multiple: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? true : false, id: id, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, fullWidth: true, onBlur: onBlur }))), value: value !== null && value !== void 0 ? value : ((property === null || property === void 0 ? void 0 : property.type) === 'array' ? [] : undefined), onChange: handleChange, options: (_b = (_a = selectOptions) !== null && _a !== void 0 ? _a : property === null || property === void 0 ? void 0 : property.enum) !== null && _b !== void 0 ? _b : [], disableClearable: true, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, isOptionEqualToValue: isOptionEqualToValue
+    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, Object.assign({ multiple: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? true : false, id: id, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, fullWidth: true, onBlur: onBlur }))), value: value !== null && value !== void 0 ? value : ((property === null || property === void 0 ? void 0 : property.type) === 'array' ? [] : undefined), onChange: handleChange, options: (_b = (_a = selectOptions) !== null && _a !== void 0 ? _a : property === null || property === void 0 ? void 0 : property.enum) !== null && _b !== void 0 ? _b : [], disableClearable: true, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, isOptionEqualToValue: isOptionEqualToValue
             ? (option, value) => isOptionEqualToValue(option, value)
             : undefined, getOptionLabel: getOptionLabel ? (option) => getOptionLabel(option) : undefined, renderOption: renderOption
             ? (props, option, state) => renderOption(props, option, state)
-            : undefined, disableCloseOnSelect: disableCloseOnSelect }));
+            : undefined, disableCloseOnSelect: disableCloseOnSelect }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {}))));
 };
 export default Select;

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

@@ -5,7 +5,7 @@ import { LocalDateTime } from '@js-joda/core';
 import { padStart, isUndefined } from 'lodash';
 import { InvalidDate } from '../../../../util';
 const TimePickerSelect = (props) => {
-    const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, placeholder } = props;
+    const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, placeholder, additionalProps, } = props;
     const values = defaultValue ? defaultValue.split(':') : undefined;
     const hour = values ? parseInt(values[0]) : undefined;
     const minute = values ? parseInt(values[1]) : undefined;
@@ -40,6 +40,6 @@ const TimePickerSelect = (props) => {
         }
     };
     return (React.createElement(LocalizationProvider, null,
-        React.createElement(TimePicker, { 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', placeholder: placeholder, readOnly: readOnly }))), readOnly: readOnly })));
+        React.createElement(TimePicker, { 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', placeholder: placeholder, readOnly: readOnly }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {})))), readOnly: readOnly })));
 };
 export default TimePickerSelect;

package/package.json

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