@evoke-platform/ui-components 1.1.0-testing.1 → 1.1.0-testing.10

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

@@ -24,6 +24,12 @@ const DateTimePicker = (props) => {
         handleChange(newValue, keyboardInputValue);
     };
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIDateTimePicker, { value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, { ...params }), ...rest })));
+        React.createElement(MUIDateTimePicker, { value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, { ...params }), PaperProps: {
+                sx: {
+                    '&.MuiPickersPopper-paper': {
+                        borderRadius: '12px',
+                    },
+                },
+            }, ...rest })));
 };
 export default DateTimePicker;

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

@@ -1,4 +1,4 @@
-import { ElementType } from 'react';
+/// <reference types="react" />
 import 'react-querybuilder/dist/query-builder.css';
 import { EvokeObject } from '../../../types';
 import { ObjectProperty, Operator, PresetValue, TreeViewObject } from './types';
@@ -10,10 +10,9 @@ export type CriteriaInputProps = {
     originalCriteria?: Record<string, unknown>;
     enablePresetValues?: boolean;
     presetValues?: PresetValue[];
-    dynamicContentInput?: {
-        component: ElementType;
-        previousSteps: unknown[];
-        trigger?: Record<string, unknown>;
+    customValueEditor?: {
+        component: (props: ValueEditorProps) => JSX.Element;
+        props?: Record<string, unknown>;
     };
     operators?: Operator[];
     disabledCriteria?: {

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

@@ -7,8 +7,9 @@ import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestI
 import 'react-querybuilder/dist/query-builder.css';
 import escape from 'string-escape-regex';
 import { TrashCan } from '../../../icons/custom';
-import { Autocomplete, Button, IconButton, TextField } from '../../core';
+import { Autocomplete, Button, IconButton } from '../../core';
 import { Box } from '../../layout';
+import { OverflowTextField } from '../OverflowTextField';
 import { difference } from '../util';
 import PropertyTree from './PropertyTree';
 import { parseMongoDB, traversePropertyPath } from './utils';
@@ -32,7 +33,6 @@ const styles = {
     buttons: {
         padding: '6px 16px',
         fontSize: '0.875rem',
-        marginRight: '0px',
         boxShadow: 'none',
     },
 };
@@ -198,7 +198,7 @@ const customSelector = (props) => {
     };
     return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, handleTreePropertySelect: handleTreePropertySelect })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
             if (typeof option === 'string') {
-                return opts.find((o) => option === o.name)?.label || '';
+                return opts.find((o) => option === o.name)?.label || option;
             }
             return option.label;
         }, isOptionEqualToValue: (option, value) => {
@@ -212,7 +212,10 @@ const customSelector = (props) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onChange: (event, newValue) => {
             handleOnChange(newValue?.value.name);
-        }, renderInput: (params) => React.createElement(TextField, { ...params, placeholder: placeholder, size: "small" }), sx: { width: width, background: '#fff' }, disableClearable: true, readOnly: readOnly }))));
+        }, renderInput: (params) => (React.createElement(OverflowTextField, { value: opts.find((o) => value === o.name)?.label || '', ...params, placeholder: placeholder, size: "small", inputProps: {
+                ...params.inputProps,
+                'aria-label': placeholder,
+            } })), sx: { width: width, background: readOnly ? '#f4f6f8' : '#fff' }, disableClearable: true, readOnly: readOnly }))));
 };
 const customCombinator = (props) => {
     const { value, handleOnChange, context, level, path } = props;
@@ -277,7 +280,7 @@ export const valueEditor = (props) => {
     return ValueEditor(props);
 };
 const CriteriaBuilder = (props) => {
-    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, disabledCriteria, hideBorder, presetGroupLabel, treeViewOpts, disableRegexEscapeChars, } = props;
+    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, } = props;
     const [query, setQuery] = useState(undefined);
     const [propertyTreeMap, setPropertyTreeMap] = useState();
     useEffect(() => {
@@ -287,33 +290,41 @@ const CriteriaBuilder = (props) => {
             !isEmpty(treeViewOpts) && updatePropertyTreeMap(updatedQuery);
             setQuery({
                 ...updatedQuery,
-                rules: processRules(updatedQuery.rules),
+                rules: processRules(updatedQuery.rules, true),
             });
         }
         else {
             setQuery({ combinator: 'and', rules: [] });
         }
     }, [originalCriteria]);
-    function processRules(rules) {
+    const processRules = (rules, isSavedValue) => {
         return rules.map((rule) => {
             if ('rules' in rule) {
                 return {
                     ...rule,
-                    rules: processRules(rule.rules),
+                    rules: processRules(rule.rules, isSavedValue),
                 };
             }
             else {
                 const propertyType = properties.find((property) => property.id === rule.field)?.type;
+                let adjustedValue = rule.value;
+                if ((propertyType === 'array' ||
+                    ((propertyType === 'string' || propertyType === 'richText') &&
+                        (rule.operator === 'in' || rule.operator === 'notIn'))) &&
+                    isSavedValue) {
+                    adjustedValue = rule.value?.split(',');
+                }
+                else if ((rule.operator === 'null' || rule.operator === 'notNull') && rule.value) {
+                    adjustedValue = null;
+                }
                 return {
                     ...rule,
-                    value: propertyType === 'array' ||
-                        (propertyType === 'string' && (rule.operator === 'in' || rule.operator === 'notIn'))
-                        ? rule.value?.split(',')
-                        : rule.value,
+                    operator: propertyType === 'array' && rule.operator === '=' ? 'in' : rule.operator,
+                    value: adjustedValue,
                 };
             }
         });
-    }
+    };
     // this retrieves the properties from a treeview for each property in the query
     // they are then used in the custom query builder components to determine the input type etc
     const updatePropertyTreeMap = (q) => {
@@ -358,8 +369,12 @@ const CriteriaBuilder = (props) => {
         }
     };
     const handleQueryChange = (q) => {
-        setQuery(q);
-        const newCriteria = JSON.parse(formatQuery(q, {
+        const processedQuery = {
+            ...q,
+            rules: processRules(q.rules, false),
+        };
+        setQuery(processedQuery);
+        const newCriteria = JSON.parse(formatQuery(processedQuery, {
             format: 'mongodb',
             ruleProcessor: (rule, options) => {
                 let newRule = rule;
@@ -375,16 +390,12 @@ const CriteriaBuilder = (props) => {
                 return defaultRuleProcessorMongoDB(newRule, options);
             },
         }));
-        //when q has no rules, it formats and parses to { $and: [{ $expr: true }] }
-        const allRulesDeleted = isEmpty(difference(newCriteria, { $and: [{ $expr: true }] }));
-        // since the Add Condition / Add Group buttons add rules with all the fields empty,
-        // we need to check if the first rule was added because q will still parse to { $and: [{ $expr: true }] }
-        const firstRuleAdded = isEmpty(criteria) && q.rules.length > 0;
-        if (allRulesDeleted && !firstRuleAdded) {
-            setCriteria(undefined);
+        if (!isEmpty(difference(newCriteria, { $and: [{ $expr: true }] }))) {
+            setCriteria(newCriteria);
         }
         else {
-            setCriteria(newCriteria);
+            if (q.rules.length === 0)
+                setCriteria(undefined);
         }
     };
     const fields = useMemo(() => {
@@ -428,7 +439,6 @@ const CriteriaBuilder = (props) => {
                     borderStyle: 'hidden',
                     background: '#fff',
                     maxWidth: '70vw',
-                    margin: 'auto',
                 },
                 '.ruleGroup-header': {
                     display: 'block',
@@ -487,9 +497,9 @@ const CriteriaBuilder = (props) => {
                         ruleGroup: CustomRuleGroup,
                         removeGroupAction: customDelete,
                         removeRuleAction: customDelete,
-                        valueEditor: valueEditor,
+                        valueEditor: customValueEditor ? customValueEditor.component : valueEditor,
                     }, context: {
-                        dynamicContentInput,
+                        ...(customValueEditor?.props ?? {}),
                         presetValues,
                         enablePresetValues,
                         presetGroupLabel,
@@ -516,8 +526,6 @@ const CriteriaBuilder = (props) => {
                     alignItems: 'center',
                     marginBottom: '10px',
                     maxWidth: '71vw',
-                    marginLeft: 'auto',
-                    marginRight: 'auto',
                 } },
                 React.createElement(Box, null,
                     React.createElement(Button, { sx: {
@@ -547,7 +555,7 @@ const CriteriaBuilder = (props) => {
                             backgroundColor: 'transparent',
                         },
                         ...styles.buttons,
-                    }, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear All"))));
+                    }, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear all"))));
     }
     return React.createElement(React.Fragment, null);
 };

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

@@ -1,6 +1,7 @@
 import { ChevronRight, ExpandMore } from '@mui/icons-material';
 import React, { useEffect, useState } from 'react';
-import { Autocomplete, MenuItem, TextField, Tooltip, TreeView } from '../../core';
+import { Autocomplete, MenuItem, TreeView } from '../../core';
+import { OverflowTextField } from '../OverflowTextField';
 import PropertyTreeItem from './PropertyTreeItem';
 import { fetchDisplayNamePath, findPropertyById, setIdPaths, truncateNamePath, updateTreeNode } from './utils';
 const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value }) => {
@@ -126,15 +127,8 @@ const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value
                 : objectPropertyNamePathMap[option.value] ?? '';
             return truncateNamePath(namePath, NAME_PATH_LIMIT);
         }, renderInput: (params) => {
-            let isTruncated = false;
-            const fullDisplayValue = value && objectPropertyNamePathMap[value];
-            let displayValue = fullDisplayValue;
-            if (!!displayValue && displayValue.length > NAME_PATH_LIMIT) {
-                isTruncated = true;
-                displayValue = truncateNamePath(displayValue, NAME_PATH_LIMIT);
-            }
-            return (React.createElement(Tooltip, { title: isTruncated ? fullDisplayValue : '', arrow: true },
-                React.createElement(TextField, { ...params, "aria-label": fullDisplayValue, value: displayValue, size: "small", placeholder: "Select a property", variant: "outlined" })));
+            const fullDisplayName = value && objectPropertyNamePathMap[value];
+            return (React.createElement(OverflowTextField, { ...params, "aria-label": fullDisplayName, value: fullDisplayName, size: "small", placeholder: "Select a property", variant: "outlined" }));
         }, isOptionEqualToValue: (option, val) => {
             if (typeof val === 'string') {
                 return option.value === val;

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

@@ -1,9 +1,9 @@
 import { Instant, LocalDate, LocalDateTime, LocalTime, ZoneId } from '@js-joda/core';
 import { ClearRounded } from '@mui/icons-material';
 import { Box, darken, lighten, styled } from '@mui/material';
-import { DateTimePicker, TimePicker } from '@mui/x-date-pickers';
-import React, { useRef, useState } from 'react';
-import { Autocomplete, Chip, DatePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
+import { TimePicker } from '@mui/x-date-pickers';
+import React, { useEffect, useRef, useState } from 'react';
+import { Autocomplete, Chip, DatePicker, DateTimePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
 import { NumericFormat } from '../FormField/InputFieldComponent';
 const GroupHeader = styled('div')(({ theme }) => ({
     position: 'sticky',
@@ -18,7 +18,7 @@ const GroupHeader = styled('div')(({ theme }) => ({
 }));
 const GroupItems = styled('ul')({ padding: 0 });
 const ValueEditor = (props) => {
-    const { handleOnChange, value, operator, context, level, rule } = props;
+    const { handleOnChange, value, operator, context, level, rule, fieldData } = props;
     let inputType = props.inputType;
     let values = props.values;
     const property = context.propertyTreeMap?.[rule.field];
@@ -47,6 +47,20 @@ const ValueEditor = (props) => {
         readOnly =
             Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
     }
+    const styles = {
+        input: {
+            width: '33%',
+            background: readOnly ? '#f4f6f8' : '#fff',
+        },
+    };
+    useEffect(() => {
+        if (!['in', 'notIn'].includes(operator) && Array.isArray(value)) {
+            handleOnChange('');
+        }
+        else if (['in', 'notIn'].includes(operator) && !Array.isArray(value)) {
+            handleOnChange([]);
+        }
+    }, [operator]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onClick = (e) => {
         // if property is date and date picker is open, don't open preset values
@@ -85,11 +99,11 @@ const ValueEditor = (props) => {
         if (inputType === 'date') {
             // date editor
             return (React.createElement(LocalizationProvider, null,
-                React.createElement(DatePicker, { inputRef: inputRef, disabled: disabled, value: disabled ? null : value, onChange: handleOnChange, onClose: onClose, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' } })), readOnly: readOnly })));
+                React.createElement(DatePicker, { inputRef: inputRef, disabled: disabled, value: disabled ? null : value, onChange: handleOnChange, onClose: onClose, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: styles.input })), readOnly: readOnly })));
         }
         else if (inputType === 'time') {
             return (React.createElement(LocalizationProvider, null,
-                React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' } })), readOnly: readOnly })));
+                React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: styles.input })), readOnly: readOnly })));
         }
         else if (inputType === 'date-time') {
             const dateTimeValue = parseISOStringToLocalDateTime(value);
@@ -110,7 +124,7 @@ const ValueEditor = (props) => {
                         handleOnChange(new Date(localDateTime.toString()).toISOString());
                     }, onClose: onClose, PopperProps: {
                         anchorEl,
-                    }, renderInput: (params) => (React.createElement(Box, { sx: { width: '33%', background: '#fff' }, ref: setAnchorEl },
+                    }, renderInput: (params) => (React.createElement(Box, { sx: styles.input, ref: setAnchorEl },
                         React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef }))), readOnly: readOnly })));
         }
         else if (inputType === 'number' || inputType === 'integer') {
@@ -125,7 +139,7 @@ const ValueEditor = (props) => {
                         handleOnChange(uniqueSelections.length ? uniqueSelections : '');
                     }, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small", sx: { backgroundColor: '#fff' } })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
+                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: styles.input, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -137,7 +151,7 @@ const ValueEditor = (props) => {
                         }
                     }, ...(inputType === 'number'
                         ? { InputProps: { inputComponent: NumericFormat } }
-                        : { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
+                        : { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: styles.input, readOnly: readOnly }));
             }
         }
         else {
@@ -147,7 +161,7 @@ const ValueEditor = (props) => {
                 ...(presetValues?.sort((a, b) => a.label.localeCompare(b.label)) ?? []),
             ];
             if (isMultiple || values?.length) {
-                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && inputType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (Array.isArray(value) ? value : []) : value, 
+                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && fieldData.valueEditorType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (Array.isArray(value) ? value : []) : Array.isArray(value) ? '' : value, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     onChange: (event, newValue) => {
                         let value;
@@ -161,14 +175,25 @@ const ValueEditor = (props) => {
                         }
                         handleOnChange(value);
                     }, onBlur: () => {
-                        if (inputValue && (operator === 'in' || operator === 'notIn')) {
+                        if (inputValue &&
+                            (options.some((option) => option.name === inputValue) || !options.length) &&
+                            (operator === 'in' || operator === 'notIn')) {
+                            const newValues = Array.isArray(value) ? [...value, inputValue] : [inputValue];
+                            handleOnChange(Array.from(new Set(newValues)));
+                            setInputValue('');
+                        }
+                    }, onKeyDown: (event) => {
+                        if (event.key === 'Enter' &&
+                            inputValue &&
+                            (options.some((option) => option.name === inputValue) || !options.length) &&
+                            (operator === 'in' || operator === 'notIn')) {
                             const newValues = Array.isArray(value) ? [...value, inputValue] : [inputValue];
                             handleOnChange(Array.from(new Set(newValues)));
                             setInputValue('');
                         }
                     }, onInputChange: (event, newInputValue) => {
                         setInputValue(newInputValue);
-                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small", sx: { backgroundColor: '#fff' } })), 
+                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small" })), 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     getOptionLabel: (option) => {
                         if (typeof option === 'string') {
@@ -185,10 +210,10 @@ const ValueEditor = (props) => {
                         else {
                             return option?.label === value?.label;
                         }
-                    }, groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: { width: '33%' }, readOnly: readOnly }));
+                    }, groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
             }
             else {
-                return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
+                return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: styles.input, readOnly: readOnly }));
             }
         }
     };

package/dist/published/components/custom/Form/Common/Form.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { ApiServices, Obj, ObjectInstance, UserAccount } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
+import React from 'react';
 import '../../../../styles/form-component.css';
 import { Document, ObjectPropertyInputProps } from '../types';
 type OnSaveResponse = {
@@ -34,6 +34,12 @@ export type FormProps = {
     queryAddresses?: unknown;
     fieldHeight?: 'small' | 'medium';
     richTextEditor?: typeof ReactComponent;
+    hideButtons?: boolean;
+    formRef?: React.MutableRefObject<FormRef | undefined>;
+};
+export type FormRef = {
+    submit: (submission: Record<string, unknown>, type: 'submit' | 'draft', setError: (error?: Record<string, unknown>) => void, setSubmitting?: (value: boolean) => void) => void;
+    data?: Record<string, unknown>;
 };
 export declare function Form(props: FormProps): JSX.Element;
 export default Form;

package/dist/published/components/custom/Form/Common/Form.js

@@ -17,8 +17,9 @@ const usePrevious = (value) => {
 };
 Utils.Evaluator.noeval = true;
 export function Form(props) {
-    const { clearable, closeModal, onSave, submitButtonLabel, instance, object, objectInputCommonProps, actionId, actionType, associatedObject, onAutoSave, apiServices, navigateTo, document, queryAddresses, user, isReadOnly, fieldHeight, richTextEditor, } = props;
+    const { clearable, closeModal, onSave, submitButtonLabel, instance, object, objectInputCommonProps, actionId, actionType, associatedObject, onAutoSave, apiServices, navigateTo, document, queryAddresses, user, isReadOnly, fieldHeight, richTextEditor, hideButtons, formRef, } = props;
     const [formKey, setFormKey] = useState();
+    const [formData, setFormData] = useState();
     const [componentProps, setComponentProps] = useState([]);
     const [snackbarError, setSnackbarError] = useState();
     const prevFormKey = usePrevious(formKey);
@@ -70,6 +71,14 @@ export function Form(props) {
         });
         buildComponents();
     };
+    useEffect(() => {
+        if (formRef) {
+            formRef.current = {
+                submit: saveHandler,
+                data: formData,
+            };
+        }
+    }, [formRef, formData]);
     useEffect(() => {
         // TODO: Check why formKey is not being set for create actions
         if (((actionType === 'update' || actionType === 'delete') && !!instance) || !!document) {
@@ -130,112 +139,117 @@ export function Form(props) {
                     apiServices,
                     user: userAccount,
                 }, undefined, isReadOnly, allDefaultPages, navigateTo, queryAddresses, apiServices, !!closeModal, fieldHeight, richTextEditor);
-                const components = isReadOnly ? newComponentProps : [...newComponentProps, BottomButtons];
-                setComponentProps(components);
+                if (!hideButtons && !isReadOnly) {
+                    newComponentProps.push(BottomButtons);
+                }
+                setComponentProps(newComponentProps);
             }
             else {
-                // this condition is used for the delete action's modal form
-                setComponentProps([
-                    ...(await addObjectPropertiesToComponentProps(visibleObjectProperties, [
-                        {
-                            html: `<p>${action?.type === 'delete' ? 'This action cannot be undone.' : 'Are you sure?'}</p>`,
-                            label: 'Content',
-                            customClass: '',
-                            refreshOnChange: false,
-                            hidden: false,
-                            modalEdit: false,
-                            conditional: {
-                                show: null,
-                                when: null,
-                                eq: '',
-                            },
-                            type: 'Content',
-                            key: 'content',
-                            input: false,
-                            placeholder: '',
-                            prefix: '',
-                            suffix: '',
+                const components = await addObjectPropertiesToComponentProps(visibleObjectProperties, [
+                    {
+                        html: `<p>${action?.type === 'delete' ? 'This action cannot be undone.' : 'Are you sure?'}</p>`,
+                        label: 'Content',
+                        customClass: '',
+                        refreshOnChange: false,
+                        hidden: false,
+                        modalEdit: false,
+                        conditional: {
+                            show: null,
+                            when: null,
+                            eq: '',
+                        },
+                        type: 'Content',
+                        key: 'content',
+                        input: false,
+                        placeholder: '',
+                        prefix: '',
+                        suffix: '',
+                        multiple: false,
+                        defaultValue: null,
+                        protected: false,
+                        unique: false,
+                        persistent: true,
+                        clearOnHide: true,
+                        refreshOn: '',
+                        redrawOn: '',
+                        tableView: false,
+                        dataGridLabel: false,
+                        labelPosition: 'top',
+                        description: '',
+                        errorLabel: '',
+                        tooltip: '',
+                        hideLabel: false,
+                        tabindex: '',
+                        disabled: false,
+                        autofocus: false,
+                        dbIndex: false,
+                        customDefaultValue: '',
+                        calculateValue: '',
+                        calculateServer: false,
+                        widget: null,
+                        attributes: {},
+                        validateOn: 'change',
+                        validate: {
+                            required: false,
+                            custom: '',
+                            customPrivate: false,
+                            strictDateValidation: false,
                             multiple: false,
-                            defaultValue: null,
-                            protected: false,
                             unique: false,
-                            persistent: true,
-                            clearOnHide: true,
-                            refreshOn: '',
-                            redrawOn: '',
-                            tableView: false,
-                            dataGridLabel: false,
-                            labelPosition: 'top',
-                            description: '',
-                            errorLabel: '',
-                            tooltip: '',
-                            hideLabel: false,
-                            tabindex: '',
-                            disabled: false,
-                            autofocus: false,
-                            dbIndex: false,
-                            customDefaultValue: '',
-                            calculateValue: '',
-                            calculateServer: false,
-                            widget: null,
-                            attributes: {},
-                            validateOn: 'change',
-                            validate: {
-                                required: false,
-                                custom: '',
-                                customPrivate: false,
-                                strictDateValidation: false,
-                                multiple: false,
-                                unique: false,
-                            },
-                            overlay: {
-                                style: '',
-                                left: '',
-                                top: '',
-                                width: '',
-                                height: '',
-                            },
-                            allowCalculateOverride: false,
-                            encrypted: false,
-                            showCharCount: false,
-                            showWordCount: false,
-                            properties: {},
-                            allowMultipleMasks: false,
-                            addons: [],
-                            id: 'eahbwo',
                         },
-                    ], instance, {
-                        ...objectInputCommonProps,
-                        defaultPages: allDefaultPages,
-                        navigateTo,
-                        apiServices,
-                        user: userAccount,
-                    }, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight, richTextEditor)),
-                    BottomButtons,
-                ]);
+                        overlay: {
+                            style: '',
+                            left: '',
+                            top: '',
+                            width: '',
+                            height: '',
+                        },
+                        allowCalculateOverride: false,
+                        encrypted: false,
+                        showCharCount: false,
+                        showWordCount: false,
+                        properties: {},
+                        allowMultipleMasks: false,
+                        addons: [],
+                        id: 'eahbwo',
+                    },
+                ], instance, {
+                    ...objectInputCommonProps,
+                    defaultPages: allDefaultPages,
+                    navigateTo,
+                    apiServices,
+                    user: userAccount,
+                }, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight, richTextEditor);
+                if (!hideButtons) {
+                    components.push(BottomButtons);
+                }
+                // this condition is used for the delete action's modal form
+                setComponentProps(components);
             }
         }
         else if (object?.properties) {
             // If form.io form is not configured and no inputProperties are
             // set, use object properties to build form.
             const propertiesInForm = object.properties.filter((prop) => prop.id !== associatedObject?.propertyId && (action?.type !== 'create' || prop.type !== 'document'));
-            setComponentProps([
-                ...buildComponentPropsFromObjectProperties(propertiesInForm, object.id, instance, {
-                    ...objectInputCommonProps,
-                    defaultPages: allDefaultPages,
-                    navigateTo,
-                    apiServices,
-                    user,
-                }, !!action, undefined, isReadOnly, queryAddresses, !!closeModal, fieldHeight, richTextEditor),
-                !isReadOnly && BottomButtons,
-            ]);
+            const components = buildComponentPropsFromObjectProperties(propertiesInForm, object.id, instance, {
+                ...objectInputCommonProps,
+                defaultPages: allDefaultPages,
+                navigateTo,
+                apiServices,
+                user,
+            }, !!action, undefined, isReadOnly, queryAddresses, !!closeModal, fieldHeight, richTextEditor);
+            if (!isReadOnly && !hideButtons) {
+                components.push(BottomButtons);
+            }
+            setComponentProps(components);
         }
         else if (document) {
             const documentProperties = toPairs(flatten(document ?? {}));
-            setComponentProps([
-                ...buildComponentPropsFromDocumentProperties(documentProperties, isReadOnly, undefined, fieldHeight),
-                !isReadOnly && BottomButtons,
-            ]);
+            const components = buildComponentPropsFromDocumentProperties(documentProperties, isReadOnly, undefined, fieldHeight);
+            if (!isReadOnly && !hideButtons) {
+                components.push(BottomButtons);
+            }
+            setComponentProps(components);
         }
     };
     const uploadDocuments = async (files, metadata) => {
@@ -427,7 +441,11 @@ export function Form(props) {
         ],
     };
     return (React.createElement(Box, null,
-        componentProps.length ? (React.createElement(FormIO, { key: closeModal ? undefined : formKey, form: {
+        componentProps.length ? (React.createElement(FormIO
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        , { 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onChange: (e) => setFormData(e.data), key: closeModal ? undefined : formKey, form: {
                 display: 'form',
                 components: componentProps,
             }, formReady: handleFormReady })) : (React.createElement(Box, null,

package/dist/published/components/custom/Form/Common/FormComponentWrapper.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ObjectProperty } from '../../../../types';
 type FormComponentWrapperProps = {
     inputId: string;
     label: string;
@@ -17,6 +18,10 @@ type FormComponentWrapperProps = {
     viewOnly: boolean;
     children: React.ReactNode;
     key: string;
+    displayOption?: 'radioButton' | 'dropdown' | 'dialogBox';
+    onChange?: (key: string, value: unknown) => void;
+    property?: ObjectProperty;
+    readOnly?: boolean;
 };
 /**
  * A component that wraps a FormField and adds a label,

package/dist/published/components/custom/Form/Common/FormComponentWrapper.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { ErrorRounded, Help } from '../../../../icons';
+import { ErrorRounded, Help, HighlightOffOutlined } from '../../../../icons';
 import { IconButton, Tooltip, Typography } from '../../../core';
 import { Box } from '../../../layout';
 const underFieldStyles = {
@@ -13,6 +13,11 @@ const descriptionStyles = {
     whiteSpace: 'normal',
     paddingBottom: '4px',
 };
+const clearBtnStyles = {
+    color: '#637381',
+    fontSize: '1.2rem',
+    marginBottom: '2px',
+};
 const PrefixSuffix = (props) => {
     const { prefix, suffix, height } = props;
     const text = prefix || suffix;
@@ -46,7 +51,7 @@ const PrefixSuffix = (props) => {
  * description, tooltip, prefix, suffix and word/char counts
  */
 export const FormComponentWrapper = (props) => {
-    const { inputId, label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, viewOnly, children, } = props;
+    const { inputId, label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, viewOnly, children, displayOption, onChange, property, readOnly, } = props;
     const [fieldHeight, setFieldHeight] = useState(40);
     const { maxLength } = validate;
     const fieldRef = useRef(null);
@@ -62,7 +67,7 @@ export const FormComponentWrapper = (props) => {
         charCount = maxLength - charCount;
     return (React.createElement(Box, null,
         React.createElement(Box, { sx: { padding: '10px 0' } },
-            React.createElement(Typography, { variant: "body2", color: viewOnly ? 'textSecondary' : 'textPrimary', component: "label", htmlFor: inputId },
+            React.createElement(Typography, { variant: "body2", color: viewOnly ? 'textSecondary' : 'textPrimary', component: "label", htmlFor: inputId, sx: { ...(displayOption === 'radioButton' && value && { marginRight: '8px' }) } },
                 label,
                 validate.required ? (React.createElement(Typography, { component: 'span', sx: { color: 'red', fontSize: '12px' } },
                     ` *`,
@@ -70,7 +75,13 @@ export const FormComponentWrapper = (props) => {
                 tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
                     React.createElement(IconButton, null,
                         React.createElement(Help, { sx: { fontSize: '14px' } }))))),
-            React.createElement(Typography, { variant: "caption", sx: descriptionStyles }, description),
+            displayOption === 'radioButton' && onChange && !viewOnly && !readOnly && value && (React.createElement(Tooltip, { title: `Clear` },
+                React.createElement("span", null,
+                    React.createElement(IconButton, { "aria-label": `Clear`, sx: { padding: '0px' }, onClick: () => {
+                            property && onChange(property.id, '');
+                        } },
+                        React.createElement(HighlightOffOutlined, { sx: clearBtnStyles }))))),
+            React.createElement(Typography, { variant: "caption", sx: { ...descriptionStyles, ...(displayOption === 'radioButton' && { display: 'flex' }) } }, description),
             React.createElement(Box, { sx: { display: 'flex', flexDirection: 'row' } },
                 React.createElement(PrefixSuffix, { prefix: prefix, height: fieldHeight }),
                 React.createElement(Box, { sx: { width: '100%', paddingTop: '6px' } }, children),

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.d.ts

@@ -10,6 +10,7 @@ type FormFieldComponentProps = Omit<BaseFormComponentProps, 'property'> & {
     addressPropertyId?: string;
     isAddressLine1?: boolean;
     initialValue?: string;
+    displayOption?: 'radioButton' | 'dropdown';
 };
 export declare class FormFieldComponent extends ReactComponent {
     [x: string]: any;

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.js

@@ -448,7 +448,7 @@ export class FormFieldComponent extends ReactComponent {
          * It'll cause issues with: field-level errors not showing up, conditional visibility not working, focus moving out of the form on keypress
          * Will need to be revisited later. Possibly look into using this.ref */
         return ReactDOM.render(React.createElement("div", null,
-            React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, errorMessage: this.errorMessages(), value: this.dataValue },
+            React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, errorMessage: this.errorMessages(), value: this.dataValue, onChange: this.handleChange },
                 React.createElement(FormField, { onChange: this.handleChange, onBlur: (e) => {
                         // no mask errors when field is empty and not required
                         const componentError = this.root.errors.find((error) => error.component.key === this.component.key);

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -78,7 +78,11 @@ export const ObjectPropertyInput = (props) => {
             updatedFilter = {};
         }
         updatedFilter.limit = 100;
-        updatedFilter.order = 'name ASC';
+        const { propertyId, direction } = layout?.sort ?? {
+            propertyId: 'name',
+            direction: 'asc',
+        };
+        updatedFilter.order = `${propertyId} ${direction}`;
         const where = name
             ? transformToWhere({
                 name: {
@@ -103,7 +107,7 @@ export const ObjectPropertyInput = (props) => {
                 setLoadingOptions(false);
             }
         });
-    }, [relatedObject, setLoadingOptions, setOptions, property, filter]);
+    }, [relatedObject, setLoadingOptions, setOptions, property, filter, layout]);
     useEffect(() => {
         if (displayOption === 'dropdown') {
             getDropdownOptions();
@@ -281,7 +285,7 @@ export const ObjectPropertyInput = (props) => {
                                 caretColor: 'white',
                             }
                             : {}),
-                    } })), readOnly: !loadingOptions && !canUpdateProperty, error: error }))) : (React.createElement(Box, { sx: {
+                    } })), readOnly: !loadingOptions && !canUpdateProperty, error: error, sortBy: "NONE" }))) : (React.createElement(Box, { sx: {
                 padding: (instance?.[property.id]?.name ?? selectedInstance?.name)
                     ? '16.5px 14px'
                     : '10.5px 0',

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableField.js

@@ -78,9 +78,13 @@ export const DropdownRepeatableField = (props) => {
             setLoading(true);
             const endObjectProperty = middleObject.properties?.find((currProperty) => property.manyToManyPropertyId === currProperty.id);
             if (endObjectProperty?.objectId) {
+                const { propertyId, direction } = layout?.sort ?? {
+                    propertyId: 'name',
+                    direction: 'asc',
+                };
                 const filter = {
                     limit: 100,
-                    order: 'name ASC',
+                    order: `${propertyId} ${direction}`,
                 };
                 let searchCriteria = criteria && !isEmpty(criteria) ? transformToWhere(criteria) : {};
                 if (searchedName?.length) {
@@ -106,7 +110,7 @@ export const DropdownRepeatableField = (props) => {
                 });
             }
         }
-    }, [property.objectId, property.manyToManyPropertyId, apiServices, middleObject]);
+    }, [property.objectId, property.manyToManyPropertyId, apiServices, middleObject, layout]);
     const debouncedEndObjectSearch = useCallback(debounce(fetchEndObjectInstances, 500), [fetchEndObjectInstances]);
     useEffect(() => {
         debouncedEndObjectSearch(searchValue);

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableFieldInput.js

@@ -86,6 +86,7 @@ export const DropdownRepeatableFieldInput = (props) => {
                         setSearchValue(event.target.value);
                     } })),
                 loading: loading,
+                sortBy: 'NONE',
             } }),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
 };

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

@@ -1,3 +1,4 @@
-import { Form } from './Common';
+import { Form, FormRef } from './Common';
 export { Form };
+export type { FormRef };
 export default Form;

package/dist/published/components/custom/Form/utils.js

@@ -195,7 +195,7 @@ export function convertFormToComponents(entries, parameters, object) {
                     displayOptions?.defaultValue &&
                     typeof displayOptions.defaultValue !== 'string'
                     ? displayOptions.defaultValue?.sortBy
-                    : undefined,
+                    : displayOptions?.choicesDisplay?.sortBy,
                 orderBy: parameter.type === 'object' &&
                     displayOptions?.defaultValue &&
                     typeof displayOptions.defaultValue !== 'string'
@@ -205,7 +205,11 @@ export function convertFormToComponents(entries, parameters, object) {
                 inputMaskPlacholderChar: displayOptions?.placeholderChar,
                 placeholder: displayOptions?.placeholder,
                 tableView: false,
-                displayOption: parameter.type === 'object' ? displayOptions?.relatedObjectDisplay : undefined,
+                displayOption: parameter.type === 'object'
+                    ? displayOptions?.relatedObjectDisplay
+                    : parameter.type === 'string' && parameter.enum
+                        ? displayOptions?.choicesDisplay?.type
+                        : undefined,
                 labelPosition: 'top',
                 dataSrc: property.enum?.length ? 'values' : undefined,
                 showCharCount: displayOptions?.charCount,
@@ -367,7 +371,20 @@ export function convertComponentsToForm(components) {
                     ...(component.readOnly ? { readOnly: component.readOnly } : {}),
                     ...(component.mode ? { mode: component.mode } : {}),
                     ...(component.validate?.required ? { required: component.validate?.required } : {}),
-                    ...(component.displayOption ? { relatedObjectDisplay: component.displayOption } : {}),
+                    ...((component.displayOption || component.sortBy) &&
+                        component.property?.enum &&
+                        component.property?.type !== 'array' &&
+                        component.property?.type !== 'object'
+                        ? {
+                            choicesDisplay: {
+                                ...(component.displayOption ? { type: component.displayOption } : {}),
+                                ...(component.sortBy ? { sortBy: component.sortBy } : {}),
+                            },
+                        }
+                        : {}),
+                    ...(component.displayOption && component?.property?.type === 'object'
+                        ? { relatedObjectDisplay: component.displayOption }
+                        : {}),
                     ...(component.defaultToCurrentDate ||
                         component.defaultToCurrentTime ||
                         component.initialValue ||
@@ -384,7 +401,7 @@ export function convertComponentsToForm(components) {
                                             ...(component.orderBy ? { sortBy: component.orderBy } : {}),
                                         }
                                         : isArray(component.initialValue)
-                                            ? component.initialValue.map((c) => c.value)
+                                            ? component.initialValue.map((c) => typeof c === 'string' ? c : c.value)
                                             : component.initialValue?.value
                                                 ? component.initialValue?.value
                                                 : component.initialValue,

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

@@ -28,6 +28,8 @@ export type FormFieldProps = {
     getOptionLabel?: (option: AutocompleteOption) => string;
     disableCloseOnSelect?: boolean;
     additionalProps?: Record<string, unknown>;
+    displayOption?: 'dropdown' | 'radioButton';
+    sortBy?: 'ASC' | 'DESC' | 'NONE';
 };
 declare const FormField: (props: FormFieldProps) => JSX.Element;
 export default FormField;

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

@@ -8,7 +8,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, additionalProps, } = 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, displayOption, sortBy, } = props;
     let control;
     const commonProps = {
         id: id ?? property.id,
@@ -30,6 +30,8 @@ const FormField = (props) => {
         getOptionLabel,
         disableCloseOnSelect,
         additionalProps,
+        displayOption,
+        sortBy,
     };
     if (queryAddresses) {
         control = (React.createElement(AddressFieldComponent, { ...commonProps, mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows, queryAddresses: queryAddresses }));

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

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Autocomplete, TextField } from '../../../core';
+import { Autocomplete, FormControl, FormControlLabel, Radio, RadioGroup, TextField, } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const Select = (props) => {
-    const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, additionalProps, } = props;
+    const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, additionalProps, displayOption, sortBy, } = props;
     const [value, setValue] = useState(defaultValue);
     const [inputValue, setInputValue] = useState('');
     useEffect(() => {
@@ -28,10 +28,34 @@ const Select = (props) => {
             setInputValue(selectValue);
         }
     };
-    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : (React.createElement(Autocomplete, { multiple: property?.type === 'array' ? true : false, id: id, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], disableClearable: true, inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, isOptionEqualToValue: isOptionEqualToValue
+    const sortedOptions = (() => {
+        if (!selectOptions)
+            return [];
+        const options = [...selectOptions];
+        switch (sortBy) {
+            case 'NONE':
+                return options;
+            case 'DESC':
+                return options.sort((a, b) => typeof a === 'string' ? b.localeCompare(a) : b.label.localeCompare(a.label));
+            default:
+                return options.sort((a, b) => typeof a === 'string' ? a.localeCompare(b) : a.label.localeCompare(b.label));
+        }
+    })();
+    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : displayOption === 'radioButton' ? (React.createElement(FormControl, { error: error, required: required },
+        React.createElement(RadioGroup, { name: `radioGroup-${id}`, value: value, onChange: handleChange, sx: { paddingLeft: '12px' } }, sortedOptions.map((option, index) => (React.createElement(FormControlLabel, { key: index, value: typeof option === 'string' ? option : option.value, control: React.createElement(Radio, { size: "small", sx: {
+                    ...(size === 'small' && { paddingTop: '2px', paddingBottom: '2px' }),
+                    ...(error && {
+                        color: '#FF4842',
+                        '&.Mui-checked': { color: '#FF4842' },
+                    }),
+                } }), label: typeof option === 'string' ? option : option.label })))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array' ? true : false, id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: 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, ...(additionalProps ?? {}) }));
+            : undefined, disableCloseOnSelect: disableCloseOnSelect, sx: {
+            '& button.MuiButtonBase-root': {
+                visibility: 'visible',
+            },
+        }, ...(additionalProps ?? {}) }));
 };
 export default Select;

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

@@ -32,6 +32,20 @@ describe('Single select', () => {
         await screen.findByRole('option', { name: 'option 2' });
         expect(screen.queryByRole('option', { name: 'something different' })).not.toBeInTheDocument();
     });
+    test.each([
+        { sortBy: 'ASC', expectedValues: ['option 1', 'option 2', 'option 3'] },
+        { sortBy: 'NONE', expectedValues: ['option 2', 'option 1', 'option 3'] },
+        { sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
+    ])('shows options in $sortBy order as dropdown display', async ({ sortBy, expectedValues }) => {
+        const options = ['option 2', 'option 1', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'dropdown', sortBy: sortBy, onChange: jest.fn() }));
+        const user = userEvent.setup();
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        const allOptions = screen.getAllByRole('option');
+        const optionLabels = allOptions.map((option) => option.textContent);
+        expect(optionLabels).toEqual(expectedValues);
+    });
 });
 describe('Multi select', () => {
     // Right now an object property is required for this to function, but eventually this should go
@@ -57,3 +71,30 @@ describe('Multi select', () => {
         expect(onChangeMock).lastCalledWith('multiSelect', ['option 2', 'option 3'], multiChoiceProperty);
     });
 });
+describe('Radio Single select', () => {
+    const choiceProperty = {
+        id: 'selectOptions',
+        name: 'Select Options',
+        type: 'choices',
+    };
+    test('returns selected radio option', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = jest.fn((name, value, property) => { });
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock }));
+        const option2 = await screen.findByRole('radio', { name: 'option 2' });
+        await user.click(option2);
+        expect(onChangeMock).toBeCalledWith('selectOptions', expect.stringContaining('option 2'), choiceProperty);
+    });
+    test.each([
+        { sortBy: 'ASC', expectedValues: ['option 1', 'option 2', 'option 3'] },
+        { sortBy: 'NONE', expectedValues: ['option 2', 'option 1', 'option 3'] },
+        { sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
+    ])('shows options in $sortBy order as radio display', async ({ sortBy, expectedValues }) => {
+        const options = ['option 2', 'option 1', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: sortBy, onChange: jest.fn() }));
+        const radioButtons = screen.getAllByRole('radio');
+        const radioValues = radioButtons.map((radioButton) => radioButton.value);
+        expect(radioValues).toEqual(expectedValues);
+    });
+});

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

@@ -0,0 +1,4 @@
+import { TextFieldProps } from '@mui/material';
+import { FC } from 'react';
+declare const OverflowTextField: FC<TextFieldProps>;
+export default OverflowTextField;

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

@@ -0,0 +1,13 @@
+import { TextField, Tooltip } from '@mui/material';
+import React, { useRef, useState } from 'react';
+const OverflowTextField = (props) => {
+    const { value, ...rest } = props;
+    const inputRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const textField = (React.createElement(TextField, { ...rest, value: value, InputProps: {
+            ...rest.InputProps,
+            inputRef: inputRef,
+        } }));
+    return (React.createElement(Tooltip, { open: isOpen, onOpen: () => inputRef.current && inputRef.current.scrollWidth > inputRef.current.clientWidth && setIsOpen(true), onClose: () => setIsOpen(false), title: value }, textField));
+};
+export default OverflowTextField;

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

@@ -0,0 +1,2 @@
+import OverflowTextField from './OverflowTextField';
+export { OverflowTextField };

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

@@ -0,0 +1,2 @@
+import OverflowTextField from './OverflowTextField';
+export { OverflowTextField };

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

@@ -3,10 +3,11 @@ export { CriteriaBuilder } from './CriteriaBuilder';
 export { DataGrid } from './DataGrid';
 export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';
+export type { FormRef } from './Form';
 export { FormField } from './FormField';
+export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';
 export { RepeatableField } from './RepeatableField';
-export { UserAvatar } from './UserAvatar';
-export { HistoryLog } from './HistoryLog';
 export { RichTextViewer } from './RichTextViewer';
+export { UserAvatar } from './UserAvatar';

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

@@ -4,9 +4,9 @@ export { DataGrid } from './DataGrid';
 export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';
 export { FormField } from './FormField';
+export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';
 export { RepeatableField } from './RepeatableField';
-export { UserAvatar } from './UserAvatar';
-export { HistoryLog } from './HistoryLog';
 export { RichTextViewer } from './RichTextViewer';
+export { UserAvatar } from './UserAvatar';

package/dist/published/index.d.ts

@@ -1,11 +1,14 @@
-export { ClickAwayListener, Toolbar, createTheme, styled } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
+export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, HistoryLog, RichTextViewer, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
+export type { FormRef } from './components/custom';
+export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * as EVOKE_TYPES from './types';
 export * from './util';
-export type { ButtonBaseActions, ButtonBaseClasses, FormControlProps, FormHelperTextProps, GridSize, MenuItemClasses, Theme, } from '@mui/material';
+export type { AutocompleteRenderGroupParams, ButtonBaseActions, ButtonBaseClasses, FormControlProps, FormHelperTextProps, GridSize, MenuItemClasses, TextFieldProps, Theme, } from '@mui/material';
 export type { TouchRippleActions, TouchRippleProps } from '@mui/material/ButtonBase/TouchRipple';
 export type { CommonProps } from '@mui/material/OverridableComponent';
 export type { SxProps } from '@mui/system';

package/dist/published/index.js

@@ -1,7 +1,9 @@
-export { ClickAwayListener, Toolbar, createTheme, styled } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
+export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, HistoryLog, RichTextViewer, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
+export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * as EVOKE_TYPES from './types';
 export * from './util';

package/dist/published/stories/FormField.stories.js

@@ -85,6 +85,8 @@ ChoicesSelectField.args = {
     locale: 'string',
     size: 'small',
     placeholder: 'string',
+    displayOption: 'dropdown',
+    sortBy: 'ASC',
 };
 export const DatePickerField = FormFieldTemplate.bind({});
 DatePickerField.args = {

package/dist/published/stories/OverflowTextField.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+declare const _default: ComponentMeta<React.FC<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps>>;
+export default _default;
+export declare const OverflowTextField: ComponentStory<React.FC<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps>>;

package/dist/published/stories/OverflowTextField.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { OverflowTextField as CustomOverflowTextField } from '../components/custom/OverflowTextField';
+export default {
+    title: 'Input/OverflowTextField',
+    component: CustomOverflowTextField,
+    argTypes: {
+        value: {
+            control: 'text',
+            defaultValue: 'This is a sample text that is too long to be fully visible within the input field, triggering an ellipsis.',
+            description: 'The text to display in the field',
+        },
+        placeholder: {
+            control: 'text',
+            defaultValue: 'Enter text...',
+        },
+        size: {
+            control: 'text',
+            defaultValue: 'small',
+        },
+    },
+};
+const Template = (args) => React.createElement(CustomOverflowTextField, { ...args });
+export const OverflowTextField = Template.bind({});
+OverflowTextField.args = {
+    value: 'This is a sample text that is too long to be fully visible within the input field, triggering an ellipsis.',
+    placeholder: 'Enter text here...',
+    size: 'small',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.1.0-testing.1",
+    "version": "1.1.0-testing.10",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -94,7 +94,7 @@
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/react": "^11.13.5",
         "@emotion/styled": "^11.8.1",
-        "@evoke-platform/context": "^1.0.0-dev.118",
+        "@evoke-platform/context": "^1.0.0-dev.126",
         "@formio/react": "^5.2.4-rc.1",
         "@js-joda/core": "^3.2.0",
         "@js-joda/locale_en-us": "^3.2.2",
@@ -135,12 +135,6 @@
             "npm run lint:fix"
         ]
     },
-    "husky": {
-        "hooks": {
-            "pre-commit": "npx lint-staged",
-            "commit-msg": "npx commitlint --edit $1"
-        }
-    },
     "jest": {
         "verbose": true,
         "testEnvironment": "jsdom",