@evoke-platform/ui-components 1.0.0-dev.1.10.6

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

@@ -0,0 +1,232 @@
+import { QueryBuilderMaterial } from '@react-querybuilder/material';
+import React, { useEffect, useMemo, useState } from 'react';
+import { formatQuery, parseMongoDB, QueryBuilder, } from 'react-querybuilder';
+import 'react-querybuilder/dist/query-builder.css';
+import { RemoveCircleOutline } from '../../../icons';
+import { Autocomplete, Button, DatePicker, IconButton, LocalizationProvider, MenuItem, TextField, Typography, } from '../../core';
+import { Box } from '../../layout';
+const customSelector = (props) => {
+    var _a, _b;
+    const { options, value, handleOnChange, title } = props;
+    let width = '90px';
+    let val = value;
+    let opts = options;
+    switch (title) {
+        case 'Operators':
+            width = '20%';
+            if (((_a = props.fieldData) === null || _a === void 0 ? void 0 : _a.inputType) === 'array') {
+                opts = options
+                    .filter((option) => ['null', 'notNull', 'in', 'notIn'].includes(option.name))
+                    .map((option) => ({ name: option.name, label: option.label }));
+                val = val === '=' ? '' : options.find((option) => option.name === val).name;
+            }
+            break;
+        case 'Fields':
+            width = '33%';
+            val = (_b = options.find((option) => option.name === val)) === null || _b === void 0 ? void 0 : _b.name;
+            break;
+    }
+    return (React.createElement(Autocomplete, { options: opts, value: val, getOptionLabel: (option) => {
+            var _a;
+            if (typeof option === 'string') {
+                return ((_a = opts.find((o) => option === o.name)) === null || _a === void 0 ? void 0 : _a.label) || '';
+            }
+            return option.label;
+        }, isOptionEqualToValue: (option, value) => {
+            return option === value;
+        }, onChange: (event, newValue) => {
+            handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.value.name);
+        }, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small" })), style: { width: width }, disableClearable: true }));
+};
+const customCombinator = (props) => {
+    const { options, value, handleOnChange } = props;
+    return (React.createElement(Autocomplete, { options: options, value: value === null || value === void 0 ? void 0 : value.toUpperCase(), isOptionEqualToValue: (option, value) => {
+            return option === value;
+        }, onChange: (event, newValue) => {
+            handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.value.name);
+        }, size: 'small', renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small" })), sx: {
+            width: '90px',
+            backgroundColor: '#eee',
+            borderRadius: '8px',
+            '.MuiInputBase-input': {
+                fontWeight: 550,
+                fontSize: '14px',
+            },
+        }, disableClearable: true }));
+};
+const customButton = (props) => {
+    const { title, handleOnClick, label } = props;
+    let buttonLabel = label;
+    switch (title) {
+        case 'Add group':
+            buttonLabel = '+ Condition Group';
+            break;
+        case 'Add rule':
+            buttonLabel = '+ Condition';
+            break;
+    }
+    return (React.createElement(Button, { variant: "contained", onClick: handleOnClick, size: "small", style: { backgroundColor: '#ebf4f8', color: '#0678a9', boxShadow: 'none' } }, buttonLabel));
+};
+const customDelete = (props) => {
+    const { handleOnClick } = props;
+    return (React.createElement(IconButton, { onClick: handleOnClick, size: "small" },
+        React.createElement(RemoveCircleOutline, null)));
+};
+export const customValueEditorWithPresets = (props) => {
+    const { handleOnChange, value } = props;
+    const valueEditor = (React.createElement(Autocomplete, { freeSolo: true, value: ['null', 'notNull'].includes(props.operator) ? '' : value, onChange: (event, newValue) => {
+            var _a;
+            handleOnChange((_a = newValue === null || newValue === void 0 ? void 0 : newValue.value.name) !== null && _a !== void 0 ? _a : '');
+        }, options: [
+            {
+                label: 'User ID',
+                value: { name: '{{user.id}}', label: 'UserId', sublabel: 'Currently logged in user' },
+            },
+        ], isOptionEqualToValue: (option, value) => {
+            return option === value;
+        }, getOptionLabel: (option) => {
+            var _a;
+            if (option === '{{user.id}}')
+                return 'User ID';
+            return (_a = option.label) !== null && _a !== void 0 ? _a : option;
+        }, disabled: ['null', 'notNull'].includes(props.operator), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: "small", placeholder: 'Value', readOnly: value === '{{user.id}}', onChange: (event) => {
+                handleOnChange(event.target.value);
+            } }))), renderOption: (props, option) => {
+            return (React.createElement(MenuItem, Object.assign({}, props, { style: { padding: '0px 8px' } }),
+                React.createElement(Box, { padding: 0, margin: 0 },
+                    React.createElement(Typography, { fontSize: '14px', fontWeight: 500 }, option.label),
+                    React.createElement(Typography, { fontSize: '14px', fontWeight: 500, color: 'rgba(145, 158, 171, 1)' }, option.value.sublabel))));
+        }, componentsProps: { popper: { style: { width: 'fit-content' } } }, style: { width: '33%' } }));
+    return determineValueEditor(valueEditor, props);
+};
+export const customValueEditor = (props) => {
+    const { value, handleOnChange, operator } = props;
+    let valueEditor = (React.createElement(TextField, { value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
+            handleOnChange(e.target.value);
+        }, placeholder: "Value", size: "small", sx: { width: '33%' } }));
+    return determineValueEditor(valueEditor, props);
+};
+const determineValueEditor = (baseValueEditor, props) => {
+    const { handleOnChange, value, values, type, operator, inputType } = props;
+    const disabled = ['null', 'notNull'].includes(operator);
+    let valueEditor = baseValueEditor;
+    switch (inputType) {
+        case 'date':
+            valueEditor = (React.createElement(LocalizationProvider, null,
+                React.createElement(DatePicker, { disabled: disabled, value: disabled ? null : value, onChange: (value) => {
+                        handleOnChange(value);
+                    }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: "Value", size: "small", style: { width: '33%' } }))) })));
+            break;
+        case 'array':
+            valueEditor = (React.createElement(Autocomplete, { multiple: true, options: values || [], getOptionLabel: (option) => (option.label ? option.label : ''), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, onChange: (event, newValue) => {
+                    const uniqueSelections = Array.from(new Set(newValue.map((item) => item.label))).map((label) => {
+                        return newValue.find((item) => item.label === label);
+                    });
+                    handleOnChange(uniqueSelections.length ? uniqueSelections : '');
+                }, isOptionEqualToValue: (option, value) => {
+                    return option === value;
+                }, renderInput: (params) => React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" })), style: { width: '33%' } }));
+            break;
+        case 'string':
+            if ((operator === 'in' || operator === 'notIn') && type === 'select' && values) {
+                valueEditor = (React.createElement(Autocomplete, { multiple: true, options: values || [], getOptionLabel: (option) => (option.label ? option.label : ''), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, onChange: (event, newValue) => {
+                        const uniqueSelections = Array.from(new Set(newValue.map((item) => item.label))).map((label) => {
+                            return newValue.find((item) => item.label === label);
+                        });
+                        handleOnChange(uniqueSelections.length ? uniqueSelections : '');
+                    }, isOptionEqualToValue: (option, value) => {
+                        return option === value;
+                    }, renderInput: (params) => React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" })), style: { width: '33%' } }));
+            }
+            else if (type === 'select' && values) {
+                valueEditor = (React.createElement(Autocomplete, { options: values, multiple: ['in', 'notIn'].includes(operator), value: disabled ? '' : value, onChange: (event, newValue) => {
+                        handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.label);
+                    }, disabled: disabled, isOptionEqualToValue: (option, value) => {
+                        return option === value;
+                    }, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small" })), style: { width: '33%' }, disableClearable: true }));
+            }
+            break;
+    }
+    return valueEditor;
+};
+const CriteriaBuilder = (props) => {
+    const { properties, criteria, setCriteria, enablePresetValues } = props;
+    const [query, setQuery] = useState(undefined);
+    useEffect(() => {
+        if (criteria) {
+            const updatedQuery = parseMongoDB(criteria);
+            setQuery(Object.assign(Object.assign({}, updatedQuery), { rules: updatedQuery.rules.map((rule) => {
+                    var _a, _b;
+                    const propertyType = (_a = properties.find((property) => property.id === rule.field)) === null || _a === void 0 ? void 0 : _a.type;
+                    return Object.assign(Object.assign({}, rule), { value: propertyType === 'array' ||
+                            (propertyType === 'string' && rule.operator === 'in') ||
+                            rule.operator === 'notIn'
+                            ? (_b = rule.value) === null || _b === void 0 ? void 0 : _b.split(',').map((item) => {
+                                return {
+                                    label: item,
+                                    value: {
+                                        name: item,
+                                        label: item,
+                                    },
+                                };
+                            })
+                            : rule.value });
+                }) }));
+        }
+        else {
+            setQuery({ combinator: 'and', rules: [] });
+        }
+    }, []);
+    const handleQueryChange = (q) => {
+        const updatedQuery = Object.assign(Object.assign({}, q), { rules: q.rules.map((rule) => {
+                return Object.assign(Object.assign({}, rule), { value: Array.isArray(rule.value) && !!rule.value[0].label
+                        ? rule.value.map((item) => item.label)
+                        : rule.value });
+            }) });
+        setQuery(q);
+        setCriteria(JSON.parse(formatQuery(updatedQuery, 'mongodb')));
+    };
+    const fields = useMemo(() => {
+        return properties.map((property) => {
+            return Object.assign({ name: property.id, label: property.name, inputType: property.type }, (property.enum && {
+                valueEditorType: property.type === 'array' ? 'multiselect' : 'select',
+                values: property.enum.map((item) => ({ name: item, label: item })),
+            }));
+        });
+    }, [properties]);
+    if (query) {
+        return (React.createElement(Box, { sx: {
+                border: '2px solid #ddd',
+                borderRadius: '10px',
+                '.container': {
+                    background: '#fff',
+                    borderColor: '#ddd',
+                    borderRadius: '8px',
+                },
+                '.queryBuilder-branches': { color: '#ddd' },
+                '.queryBuilder-branches .betweenRules::before': { borderColor: '#ddd' },
+                '.ruleGroup': { borderColor: '#ddd' },
+                '.queryBuilder-branches .rule::before, .queryBuilder-branches .ruleGroup .ruleGroup::before, .queryBuilder-branches .rule::after, .queryBuilder-branches .ruleGroup .ruleGroup::after': {
+                    borderColor: '#ddd',
+                },
+            } },
+            React.createElement(QueryBuilderMaterial, null,
+                React.createElement(QueryBuilder, { query: query, fields: fields, onQueryChange: (q) => {
+                        handleQueryChange(q);
+                    }, showCombinatorsBetweenRules: true, listsAsArrays: true, controlElements: {
+                        combinatorSelector: customCombinator,
+                        fieldSelector: customSelector,
+                        operatorSelector: customSelector,
+                        addGroupAction: customButton,
+                        addRuleAction: customButton,
+                        removeGroupAction: customDelete,
+                        removeRuleAction: customDelete,
+                        valueEditor: enablePresetValues ? customValueEditorWithPresets : customValueEditor,
+                    }, controlClassnames: {
+                        queryBuilder: 'queryBuilder-branches',
+                        ruleGroup: 'container',
+                    } }))));
+    }
+    return React.createElement(React.Fragment, null);
+};
+export default CriteriaBuilder;

package/dist/published/components/custom/CriteriaBuilder/index.d.ts

@@ -0,0 +1,3 @@
+import CriteriaBuilder from './CriteriaBuilder';
+export { CriteriaBuilder };
+export default CriteriaBuilder;

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

@@ -0,0 +1,3 @@
+import CriteriaBuilder from './CriteriaBuilder';
+export { CriteriaBuilder };
+export default CriteriaBuilder;

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

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

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

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+import { Autocomplete, TextField } from '../../../core';
+import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
+const BooleanSelect = (props) => {
+    const { property, defaultValue, error, readOnly, size, placeholder } = props;
+    const [value, setValue] = useState(defaultValue);
+    const id = property.id;
+    useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    const handleChange = (event, selected) => {
+        setValue(selected.label);
+        props.onChange(id, selected.label, property);
+    };
+    const booleanOptions = [
+        {
+            label: 'Yes',
+            value: true,
+        },
+        {
+            label: 'No',
+            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, fullWidth: true, style: { background: 'white' }, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), value: value, onChange: handleChange, inputValue: value, options: booleanOptions, disableClearable: true, style: { background: 'white', borderRadius: '8px' } }));
+};
+export default BooleanSelect;

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

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

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

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

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

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

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

@@ -0,0 +1,42 @@
+import { DateTimeFormatter } from '@js-joda/core';
+import React, { useEffect, useState } from 'react';
+import { InvalidDate, LocalDate, nativeJs } from '../../../../util';
+import { DatePicker, LocalizationProvider, TextField } from '../../../core';
+import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
+function asCalendarDate(value) {
+    if (!value) {
+        return null;
+    }
+    if (value instanceof LocalDate || value instanceof InvalidDate) {
+        return value;
+    }
+    if (value instanceof Date) {
+        if (isNaN(value.getTime())) {
+            // LocalDate cannot represent an invalid date, use InvalidDate instead.
+            return new InvalidDate();
+        }
+        return LocalDate.from(nativeJs(value));
+    }
+    return value.toString();
+}
+const asMonthDayYearFormat = (date) => {
+    if (date) {
+        const formatter = DateTimeFormatter.ofPattern('MM/dd/yyyy');
+        return LocalDate.parse(date).format(formatter);
+    }
+};
+const DatePickerSelect = (props) => {
+    const { property, defaultValue, error, readOnly, required, size } = props;
+    const [value, setValue] = useState(asCalendarDate(defaultValue));
+    const id = property.id;
+    useEffect(() => {
+        setValue(asCalendarDate(defaultValue));
+    }, [defaultValue]);
+    const handleChange = (date) => {
+        setValue(date);
+        props.onChange(id, date, property);
+    };
+    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, fullWidth: true, required: required, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium' }))) })));
+};
+export default DatePickerSelect;

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

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

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

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

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

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

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

@@ -0,0 +1,65 @@
+import { Grid } from '@mui/material';
+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 { property, required, error } = props;
+    const id = property.id;
+    const styles = {
+        button: {
+            textTransform: 'initial',
+            fontSizeP: '14px',
+            fontWeight: 700,
+        },
+        selectFileBtn: {
+            height: '45px',
+            margin: '3px',
+            marginRight: '4px',
+            backgroundColor: '#DFE3E8',
+            color: '#212B36',
+            position: 'relative',
+            float: 'right',
+        },
+        fileName: {
+            paddingTop: '15px',
+            paddingLeft: '15px',
+            float: 'left',
+            fontSize: '16px',
+            color: '#C7C7CD',
+        },
+    };
+    useEffect(() => {
+        if (uploadedFile) {
+            props.onChange(id, uploadedFile, property);
+        }
+    }, [uploadedFile]);
+    const handleSelectFile = () => {
+        if (uploadedFile) {
+            setUploadedFile(undefined);
+            props.onChange(id, undefined, property);
+        }
+    };
+    const onDrop = useCallback((acceptedFile) => {
+        setUploadedFile(acceptedFile[0]);
+    }, [setUploadedFile]);
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+        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',
+        },
+    })),
+        React.createElement(Grid, { item: true, flexGrow: 1 },
+            React.createElement("input", Object.assign({ disabled: true }, getInputProps())),
+            React.createElement(TextField, { sx: { '& fieldset': { border: 'none' } }, fullWidth: true, value: (_a = uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.name) !== null && _a !== void 0 ? _a : (isDragActive ? 'Drop your file here' : 'File'), error: error, required: required })),
+        React.createElement(Grid, { item: true },
+            React.createElement(Button, { sx: Object.assign(Object.assign({}, styles.button), styles.selectFileBtn), onClick: () => handleSelectFile() }, uploadedFile ? 'Remove' : 'Select File'))));
+};
+export default FileUploadControl;

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

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

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

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

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

@@ -0,0 +1,24 @@
+export declare type FormFieldProps = {
+    property: ObjectProperty;
+    onChange: Function;
+    defaultValue?: unknown;
+    error?: boolean;
+    required?: boolean;
+    readOnly?: boolean;
+    selectOptions?: Array<string>;
+    locale?: string;
+    size?: 'small' | 'medium';
+    placeholder?: string;
+};
+export declare type ObjectProperty = {
+    id: string;
+    name: string;
+    type: string;
+    enum?: string[];
+    required?: boolean;
+    searchable?: boolean;
+    objectId?: string;
+    formula?: string;
+};
+declare const FormField: (props: FormFieldProps) => any;
+export default FormField;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import BooleanSelect from './BooleanSelect/BooleanSelect';
+import DatePickerSelect from './DatePickerSelect/DatePickerSelect';
+import FileUploadControl from './FileUpload/FileUpload';
+import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
+import Select from './Select/Select';
+const FormField = (props) => {
+    const { defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder } = props;
+    const id = property.id;
+    let control;
+    const commonProps = {
+        id,
+        property,
+        onChange,
+        error,
+        readOnly,
+        defaultValue,
+        selectOptions,
+        required,
+        size,
+        placeholder,
+    };
+    switch (property.type) {
+        case 'boolean':
+            control = (React.createElement(BooleanSelect, Object.assign({}, commonProps, { defaultValue: defaultValue ? 'Yes' : defaultValue === undefined ? '' : 'No' })));
+            break;
+        case 'date':
+            control = React.createElement(DatePickerSelect, Object.assign({}, commonProps));
+            break;
+        case 'fileUpload':
+            control = React.createElement(FileUploadControl, Object.assign({}, commonProps));
+            break;
+        case 'choices':
+            control = React.createElement(Select, Object.assign({}, commonProps));
+            break;
+        case 'array':
+            control = React.createElement(Select, Object.assign({}, commonProps));
+            break;
+        default:
+            control = React.createElement(InputFieldComponent, Object.assign({}, commonProps));
+            break;
+    }
+    return control;
+};
+export default FormField;

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

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

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

@@ -0,0 +1,76 @@
+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 NumberFormat from 'react-number-format';
+import { Autocomplete, TextField } from '../../../core';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const NumericFormat = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    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({
+                target: {
+                    value: values.floatValue,
+                },
+            });
+        }, thousandSeparator: true, isNumericString: true, fixedDecimalScale: true, allowNegative: true })));
+};
+const InputFieldComponent = (props) => {
+    var _a;
+    const { property, defaultValue, error, readOnly, required, size, placeholder } = props;
+    const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
+    const [inputValue, setInputValue] = useState('');
+    const id = property.id;
+    useEffect(() => {
+        setValue(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
+    }, [defaultValue]);
+    const handleChange = (e) => {
+        const inputValue = property.type === 'integer' ? parseInt(e.target.value) : e.target.value;
+        setValue(inputValue);
+        props.onChange(id, inputValue, property);
+    };
+    const handleSelectChange = (e, selected) => {
+        setValue(selected.label);
+        props.onChange(id, selected.label, property);
+    };
+    const handleInputValueChange = (event, selectValue) => {
+        setInputValue(selectValue);
+    };
+    const InputProps = property.type === 'number'
+        ? {
+            inputComponent: NumericFormat,
+        }
+        : property.type === 'integer'
+            ? { inputProps: { min: 0 } }
+            : null;
+    const selectOptions = (_a = property.enum) !== null && _a !== void 0 ? _a : [];
+    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, { id: id, options: selectOptions, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, fullWidth: true, 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 })) : (React.createElement(TextField, { id: id, sx: readOnly
+            ? {
+                '& .MuiOutlinedInput-notchedOutline': {
+                    border: 'none',
+                },
+                '.MuiOutlinedInput-root': {
+                    borderRadius: '8px',
+                    backgroundColor: '#f4f6f8',
+                },
+            }
+            : undefined, error: error, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, placeholder: placeholder, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text' }));
+};
+export default InputFieldComponent;

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react';
+import { Autocomplete, TextField } from '../../../core';
+import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
+const Select = (props) => {
+    const { property, defaultValue, error, readOnly, selectOptions, required, size } = props;
+    const [value, setValue] = useState(defaultValue);
+    const [inputValue, setInputValue] = useState('');
+    useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    const id = property.id;
+    const handleChange = (event, selected) => {
+        if (Array.isArray(selected)) {
+            setValue(selected.map((option) => { var _a; return (_a = option.value) !== null && _a !== void 0 ? _a : option; }));
+            props.onChange(id, selected.map((option) => { var _a; return (_a = option.value) !== null && _a !== void 0 ? _a : option; }), property);
+        }
+        else {
+            setValue(selected);
+            props.onChange(id, selected, property);
+        }
+    };
+    const handleInputValueChange = (event, selectValue) => {
+        if (Array.isArray(selectValue)) {
+            setValue(selectValue.map((item) => { var _a; return (_a = item.value) !== null && _a !== void 0 ? _a : item; }));
+        }
+        else {
+            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 })), value: value, onChange: handleChange, options: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? property === null || property === void 0 ? void 0 : property.enum : selectOptions, disableClearable: true, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', error: error, required: required, onInputChange: handleInputValueChange, filterOptions: (option) => { var _a; return (property === null || property === void 0 ? void 0 : property.type) === 'array' ? (_a = property === null || property === void 0 ? void 0 : property.enum) === null || _a === void 0 ? void 0 : _a.filter((item) => item !== option.value) : option; }, size: size }));
+};
+export default Select;

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

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

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

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

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

@@ -0,0 +1,3 @@
+import FormField from './FormField';
+export { FormField };
+export default FormField;

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

@@ -0,0 +1,3 @@
+import FormField from './FormField';
+export { FormField };
+export default FormField;