@evoke-platform/ui-components 1.0.2-testing.2 → 1.1.0-dev.0

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

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import { isArray, isEmpty, startCase } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
-import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, defaultRuleProcessorMongoDB, formatQuery, useRuleGroup, } from 'react-querybuilder';
+import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, add, defaultRuleProcessorMongoDB, formatQuery, useRuleGroup, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 import escape from 'string-escape-regex';
 import { TrashCan } from '../../../icons/custom';
@@ -28,6 +28,14 @@ const ALL_OPERATORS = [
     { name: 'in', label: 'In' },
     { name: 'notIn', label: 'Not in' },
 ];
+const styles = {
+    buttons: {
+        padding: '6px 16px',
+        fontSize: '0.875rem',
+        marginRight: '0px',
+        boxShadow: 'none',
+    },
+};
 const CustomRuleGroup = (props) => {
     const rg = { ...props, ...useRuleGroup(props) };
     const [addRule, addGroup, cloneGroup, toggleLockGroup, removeGroup] = [
@@ -73,11 +81,8 @@ const customButton = (props) => {
         case 'Add rule':
             buttonLabel = 'Add Condition';
             break;
-        case 'Remove group':
-            buttonLabel = 'Clear All';
-            break;
     }
-    return (React.createElement(React.Fragment, null, (path.length < nestedConditionLimit || title === 'Add rule') && (React.createElement(Button, { onClick: handleOnClick, startIcon: React.createElement(AddRounded, null), sx: {
+    return (React.createElement(React.Fragment, null, !!path.length && (path.length < nestedConditionLimit || title === 'Add rule') && (React.createElement(Button, { onClick: handleOnClick, startIcon: React.createElement(AddRounded, null), sx: {
             padding: '6px 16px',
             fontSize: '0.875rem',
             marginRight: path.length === 0 ? '.5rem' : '0px',
@@ -207,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(TextField, { ...params, placeholder: placeholder, size: "small", inputProps: {
+                ...params.inputProps,
+                'aria-label': placeholder,
+            } })), sx: { width: width, background: '#fff' }, disableClearable: true, readOnly: readOnly }))));
 };
 const customCombinator = (props) => {
     const { value, handleOnChange, context, level, path } = props;
@@ -272,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(() => {
@@ -282,33 +290,40 @@ 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' && (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) => {
@@ -334,9 +349,31 @@ const CriteriaBuilder = (props) => {
             setPropertyTreeMap(tempPropertyMap);
         });
     };
+    const handleClearAll = () => {
+        handleQueryChange({ combinator: 'and', rules: [] });
+    };
+    const handleAddRule = () => {
+        if (query) {
+            const newQuery = add(query, { field: '', operator: '', value: '' }, []);
+            setQuery(newQuery);
+        }
+    };
+    const handleAddGroup = () => {
+        if (query) {
+            const newQuery = add(query, {
+                combinator: 'and',
+                rules: [{ field: '', operator: '', value: '' }],
+            }, []);
+            setQuery(newQuery);
+        }
+    };
     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;
@@ -352,16 +389,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(() => {
@@ -405,6 +438,7 @@ const CriteriaBuilder = (props) => {
                     borderStyle: 'hidden',
                     background: '#fff',
                     maxWidth: '70vw',
+                    margin: 'auto',
                 },
                 '.ruleGroup-header': {
                     display: 'block',
@@ -424,7 +458,9 @@ const CriteriaBuilder = (props) => {
                 '.ruleGroup .ruleGroup': { borderStyle: 'solid' },
             } },
             React.createElement(QueryBuilderMaterial, null,
-                React.createElement(QueryBuilder, { query: !criteria && !originalCriteria ? { combinator: 'and', rules: [] } : query, fields: fields, onQueryChange: (q) => {
+                React.createElement(QueryBuilder, { query: !criteria && !originalCriteria && query.rules.length === 0
+                        ? { combinator: 'and', rules: [] }
+                        : query, fields: fields, onQueryChange: (q) => {
                         handleQueryChange(q);
                     }, onAddRule: (rule) => {
                         // overrides new rule and sets up an empty rule with all three fields empty
@@ -461,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,
@@ -483,7 +519,45 @@ const CriteriaBuilder = (props) => {
                         ruleGroup: 'container',
                     }, operators: operators
                         ? ALL_OPERATORS.filter((o) => operators.includes(o.name))
-                        : ALL_OPERATORS }))));
+                        : ALL_OPERATORS })),
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '10px',
+                    maxWidth: '71vw',
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
+                } },
+                React.createElement(Box, null,
+                    React.createElement(Button, { sx: {
+                            backgroundColor: 'rgba(0, 117, 167, 0.08)',
+                            color: '#0075A7',
+                            marginLeft: '10px',
+                            '&:hover': {
+                                backgroundColor: 'rgba(0, 117, 167, 0.08)',
+                            },
+                            ...styles.buttons,
+                        }, startIcon: React.createElement(AddRounded, null), onClick: handleAddRule }, "Add Condition"),
+                    React.createElement(Button, { sx: {
+                            backgroundColor: '#f6f7f8',
+                            color: '#000',
+                            marginLeft: '8px',
+                            '&:hover': {
+                                backgroundColor: '#f6f7f8',
+                            },
+                            ...styles.buttons,
+                        }, startIcon: React.createElement(AddRounded, null), onClick: handleAddGroup, title: "Add a rule at the bottom of the group" }, "Add Condition Group")),
+                React.createElement(Button, { variant: 'text', sx: {
+                        justifyContent: 'flex-end',
+                        color: '#000',
+                        fontWeight: 500,
+                        paddingLeft: '0px',
+                        '&:hover': {
+                            backgroundColor: 'transparent',
+                        },
+                        ...styles.buttons,
+                    }, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear All"))));
     }
     return React.createElement(React.Fragment, null);
 };

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

@@ -1,7 +1,8 @@
+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 { TimePicker } from '@mui/x-date-pickers';
-import React, { useRef, useState } from 'react';
+import { DateTimePicker, TimePicker } from '@mui/x-date-pickers';
+import React, { useEffect, useRef, useState } from 'react';
 import { Autocomplete, Chip, DatePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
 import { NumericFormat } from '../FormField/InputFieldComponent';
 const GroupHeader = styled('div')(({ theme }) => ({
@@ -17,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];
@@ -31,6 +32,7 @@ const ValueEditor = (props) => {
             }));
         }
     }
+    const [anchorEl, setAnchorEl] = useState(null);
     const inputRef = useRef(null);
     const [openPresetValues, setOpenPresetValues] = useState(false);
     // Manages input value for Autocomplete when using 'in/not in' operators, ensuring correct handling on blur.
@@ -41,6 +43,15 @@ const ValueEditor = (props) => {
     const isPresetValueSelected = presetValues && typeof value === 'string' && isPresetValue(value);
     const presetDisplayValue = presetValues?.find((option) => option.value.name === value)?.label ?? '';
     let readOnly = false;
+    useEffect(() => {
+        if (!['in', 'notIn'].includes(operator) && Array.isArray(value)) {
+            handleOnChange('');
+        }
+        else if (['in', 'notIn'].includes(operator) && !Array.isArray(value)) {
+            handleOnChange([]);
+            setInputValue('');
+        }
+    }, [operator]);
     if (context.disabledCriteria) {
         readOnly =
             Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
@@ -48,7 +59,7 @@ const ValueEditor = (props) => {
     // 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
-        if (inputType && ['date', 'time'].includes(inputType) && e.target?.tagName !== 'INPUT') {
+        if (inputType && ['date', 'time', 'date-time'].includes(inputType) && e.target?.tagName !== 'INPUT') {
             return;
         }
         setOpenPresetValues(true);
@@ -66,6 +77,13 @@ const ValueEditor = (props) => {
     const groupRenderGroup = (params) => (React.createElement("li", { key: params.key },
         React.createElement(GroupHeader, null, params.group),
         React.createElement(GroupItems, null, params.children)));
+    function parseISOStringToLocalDateTime(value) {
+        if (!value) {
+            return null;
+        }
+        const d = new Date(value);
+        return LocalDateTime.ofInstant(Instant.ofEpochMilli(d.getTime()), ZoneId.systemDefault());
+    }
     const getEditor = () => {
         if (isPresetValueSelected) {
             return;
@@ -82,6 +100,28 @@ const ValueEditor = (props) => {
             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 })));
         }
+        else if (inputType === 'date-time') {
+            const dateTimeValue = parseISOStringToLocalDateTime(value);
+            return (React.createElement(LocalizationProvider, null,
+                React.createElement(DateTimePicker, { inputRef: inputRef, value: dateTimeValue, onChange: (date) => {
+                        if (!date) {
+                            handleOnChange('');
+                            return;
+                        }
+                        let localDateTime;
+                        if (date instanceof LocalDate && !(date instanceof LocalDateTime)) {
+                            // onChange initially returns a LocalDate after date is selected
+                            localDateTime = LocalDateTime.of(date, LocalTime.of(0));
+                        }
+                        else {
+                            localDateTime = date;
+                        }
+                        handleOnChange(new Date(localDateTime.toString()).toISOString());
+                    }, onClose: onClose, PopperProps: {
+                        anchorEl,
+                    }, renderInput: (params) => (React.createElement(Box, { sx: { width: '33%', background: '#fff' }, ref: setAnchorEl },
+                        React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef }))), readOnly: readOnly })));
+        }
         else if (inputType === 'number' || inputType === 'integer') {
             const isMultiple = ['in', 'notIn'].includes(operator);
             const options = presetValues;
@@ -116,7 +156,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;
@@ -130,7 +170,19 @@ 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')) {
+                            event.preventDefault();
                             const newValues = Array.isArray(value) ? [...value, inputValue] : [inputValue];
                             handleOnChange(Array.from(new Set(newValues)));
                             setInputValue('');

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

@@ -1,7 +1,7 @@
 import { useApp, useAuthenticationContext, } from '@evoke-platform/context';
 import { Components, Form as FormIO, Utils } from '@formio/react';
 import { flatten } from 'flat';
-import { isEqual, toPairs } from 'lodash';
+import { isEmpty, isEqual, toPairs } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import '../../../../styles/form-component.css';
 import { Skeleton, Snackbar } from '../../../core';
@@ -320,7 +320,9 @@ export function Form(props) {
         const submittedFields = {};
         for (const field in submission.data) {
             const value = submission.data[field];
-            if (value === '' || (Array.isArray(value) && !value.length)) {
+            if (value === '' ||
+                (Array.isArray(value) && !value.length) ||
+                (typeof value === 'object' && isEmpty(value))) {
                 submittedFields[field] = null;
             }
             else {

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/utils.js

@@ -384,7 +384,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/index.d.ts

@@ -1,11 +1,13 @@
-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';
-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/CriteriaBuilder.stories.js

@@ -4,6 +4,98 @@ export default {
     title: 'Input/CriteriaBuilder',
     component: BuildCriteria,
 };
+const defaultProperties = [
+    {
+        id: 'name',
+        name: 'name',
+        type: 'string',
+        required: true,
+    },
+    {
+        id: 'licenseNumber',
+        name: 'license number',
+        type: 'string',
+        required: true,
+    },
+    {
+        id: 'issueDate',
+        name: 'issue date',
+        type: 'date',
+        required: false,
+    },
+    {
+        id: 'applicationDate',
+        name: 'Application Date',
+        type: 'date-time',
+        required: false,
+    },
+    {
+        id: 'status',
+        name: 'status',
+        type: 'string',
+        enum: ['active', 'expired', 'pending approval'],
+        required: false,
+    },
+    {
+        id: 'licenseeName',
+        name: 'Licensee Name',
+        type: 'string',
+        required: false,
+        formula: '{{person.firstName}} {{person.middleName}} {{person.lastName}}',
+    },
+    {
+        id: 'calculated',
+        name: 'calculated',
+        type: 'string',
+        required: false,
+        formula: '{{status}} - {{licensee.firstName}}',
+    },
+    {
+        id: 'application',
+        name: 'applicant',
+        type: 'object',
+        required: false,
+        objectId: 'application',
+    },
+    {
+        id: 'applicantName',
+        name: 'Application Info',
+        type: 'string',
+        required: false,
+        formula: '{{application.name}} - {{status}}',
+    },
+    {
+        id: 'licensedFor',
+        name: 'licensed for',
+        type: 'array',
+        enum: [
+            'amusements',
+            'food and beverage',
+            'entertainment',
+            'transportation',
+            'hot dogs',
+            'swimming pools',
+            'ferris wheels',
+            'bungee jumping',
+        ],
+        required: true,
+        searchable: false,
+    },
+    {
+        id: 'inState',
+        name: 'In State',
+        type: 'string',
+        enum: ['Yes', 'No'],
+        required: false,
+        searchable: false,
+    },
+    {
+        id: 'amountOfInspections',
+        name: 'Inspection Count',
+        type: 'integer',
+        required: false,
+    },
+];
 const CriteriaBuilderTemplate = (args) => {
     const [criteria, setCriteria] = React.useState(args.criteria);
     args.setCriteria = setCriteria;
@@ -13,182 +105,12 @@ const CriteriaBuilderTemplate = (args) => {
 };
 export const CriteriaBuilderEmpty = CriteriaBuilderTemplate.bind({});
 CriteriaBuilderEmpty.args = {
-    properties: [
-        {
-            id: 'name',
-            name: 'name',
-            type: 'string',
-            required: true,
-        },
-        {
-            id: 'licenseNumber',
-            name: 'license number',
-            type: 'string',
-            required: true,
-        },
-        {
-            id: 'issueDate',
-            name: 'issue date',
-            type: 'date',
-            required: false,
-            objectId: '',
-        },
-        {
-            id: 'status',
-            name: 'status',
-            type: 'string',
-            enum: ['active', 'expired', 'pending approval'],
-            required: false,
-            objectId: '',
-        },
-        {
-            id: 'licenseeName',
-            name: 'Licensee Name',
-            type: 'string',
-            required: false,
-            formula: '{{person.firstName}} {{person.middleName}} {{person.lastName}}',
-        },
-        {
-            id: 'calculated',
-            name: 'calculated',
-            type: 'string',
-            required: false,
-            objectId: '',
-            formula: '{{status}} - {{licensee.firstName}}',
-        },
-        {
-            id: 'application',
-            name: 'applicant',
-            type: 'object',
-            required: false,
-            objectId: 'application',
-        },
-        {
-            id: 'applicantName',
-            name: 'Application Info',
-            type: 'string',
-            required: false,
-            formula: '{{application.name}} - {{status}}',
-        },
-        {
-            id: 'licensedFor',
-            name: 'licensed for',
-            type: 'array',
-            enum: [
-                'amusements',
-                'food and beverage',
-                'entertainment',
-                'transportation',
-                'hot dogs',
-                'swimming pools',
-                'ferris wheels',
-                'bungee jumping',
-            ],
-            required: true,
-            searchable: false,
-        },
-        {
-            id: 'inState',
-            name: 'In State',
-            type: 'string',
-            enum: ['Yes', 'No'],
-            required: false,
-            searchable: false,
-        },
-    ],
+    properties: [...defaultProperties],
     criteria: {},
 };
 export const CriteriaBuilder = CriteriaBuilderTemplate.bind({});
 CriteriaBuilder.args = {
-    properties: [
-        {
-            id: 'name',
-            name: 'name',
-            type: 'string',
-            required: true,
-        },
-        {
-            id: 'licenseNumber',
-            name: 'license number',
-            type: 'string',
-            required: true,
-        },
-        {
-            id: 'issueDate',
-            name: 'issue date',
-            type: 'date',
-            required: false,
-            objectId: '',
-        },
-        {
-            id: 'status',
-            name: 'status',
-            type: 'string',
-            enum: ['active', 'expired', 'pending approval'],
-            required: false,
-            objectId: '',
-        },
-        {
-            id: 'licenseeName',
-            name: 'Licensee Name',
-            type: 'string',
-            required: false,
-            formula: '{{person.firstName}} {{person.middleName}} {{person.lastName}}',
-        },
-        {
-            id: 'calculated',
-            name: 'calculated',
-            type: 'string',
-            required: false,
-            objectId: '',
-            formula: '{{status}} - {{licensee.firstName}}',
-        },
-        {
-            id: 'application',
-            name: 'applicant',
-            type: 'object',
-            required: false,
-            objectId: 'application',
-        },
-        {
-            id: 'applicantName',
-            name: 'Application Info',
-            type: 'string',
-            required: false,
-            formula: '{{application.name}} - {{status}}',
-        },
-        {
-            id: 'licensedFor',
-            name: 'licensed for',
-            type: 'array',
-            enum: [
-                'amusements',
-                'food and beverage',
-                'entertainment',
-                'transportation',
-                'hot dogs',
-                'swimming pools',
-                'ferris wheels',
-                'bungee jumping',
-            ],
-            required: true,
-            searchable: false,
-        },
-        {
-            id: 'inState',
-            name: 'In State',
-            type: 'string',
-            enum: ['Yes', 'No'],
-            required: false,
-            searchable: false,
-        },
-        {
-            id: 'amountOfInspections',
-            name: 'Inspection Count',
-            type: 'integer',
-            required: false,
-        },
-    ],
+    properties: [...defaultProperties],
     criteria: {
         $or: [
             {
@@ -202,6 +124,9 @@ CriteriaBuilder.args = {
                     $lt: 3,
                 },
             },
+            {
+                applicationDate: '2025-02-18T20:15:00.000Z',
+            },
             {
                 licensedFor: { $in: ['hot dogs', 'amusements', 'entertainment'] },
             },
@@ -222,95 +147,7 @@ CriteriaBuilder.args = {
 };
 export const CriteriaBuilderPresetUserID = CriteriaBuilderTemplate.bind({});
 CriteriaBuilderPresetUserID.args = {
-    properties: [
-        {
-            id: 'name',
-            name: 'name',
-            type: 'string',
-            required: true,
-        },
-        {
-            id: 'licenseNumber',
-            name: 'license number',
-            type: 'string',
-            required: true,
-        },
-        {
-            id: 'issueDate',
-            name: 'issue date',
-            type: 'date',
-            required: false,
-            objectId: '',
-        },
-        {
-            id: 'status',
-            name: 'status',
-            type: 'string',
-            enum: ['active', 'expired', 'pending approval'],
-            required: false,
-            objectId: '',
-        },
-        {
-            id: 'licenseeName',
-            name: 'Licensee Name',
-            type: 'string',
-            required: false,
-            formula: '{{person.firstName}} {{person.middleName}} {{person.lastName}}',
-        },
-        {
-            id: 'calculated',
-            name: 'calculated',
-            type: 'string',
-            required: false,
-            objectId: '',
-            formula: '{{status}} - {{licensee.firstName}}',
-        },
-        {
-            id: 'application',
-            name: 'applicant',
-            type: 'object',
-            required: false,
-            objectId: 'application',
-        },
-        {
-            id: 'applicantName',
-            name: 'Application Info',
-            type: 'string',
-            required: false,
-            formula: '{{application.name}} - {{status}}',
-        },
-        {
-            id: 'licensedFor',
-            name: 'licensed for',
-            type: 'array',
-            enum: [
-                'amusements',
-                'food and beverage',
-                'entertainment',
-                'transportation',
-                'hot dogs',
-                'swimming pools',
-                'ferris wheels',
-                'bungee jumping',
-            ],
-            required: true,
-            searchable: false,
-        },
-        {
-            id: 'inState',
-            name: 'In State',
-            type: 'string',
-            enum: ['Yes', 'No'],
-            required: false,
-            searchable: false,
-        },
-        {
-            id: 'amountOfInspections',
-            name: 'Inspection Count',
-            type: 'integer',
-            required: false,
-        },
-    ],
+    properties: [...defaultProperties],
     criteria: {
         $or: [
             {
@@ -325,60 +162,7 @@ CriteriaBuilderPresetUserID.args = {
 };
 export const CriteriaBuilderGroupedPresetValues = CriteriaBuilderTemplate.bind({});
 CriteriaBuilderGroupedPresetValues.args = {
-    properties: [
-        {
-            id: 'name',
-            name: 'name',
-            type: 'string',
-            required: true,
-        },
-        {
-            id: 'issueDate',
-            name: 'issue date',
-            type: 'date',
-            required: false,
-            objectId: '',
-        },
-        {
-            id: 'status',
-            name: 'status',
-            type: 'string',
-            enum: ['active', 'expired', 'pending approval'],
-            required: false,
-            objectId: '',
-        },
-        {
-            id: 'amountOfInspections',
-            name: 'Inspection Count',
-            type: 'integer',
-            required: false,
-        },
-        {
-            id: 'licensedFor',
-            name: 'licensed for',
-            type: 'array',
-            enum: [
-                'amusements',
-                'food and beverage',
-                'entertainment',
-                'transportation',
-                'hot dogs',
-                'swimming pools',
-                'ferris wheels',
-                'bungee jumping',
-            ],
-            required: true,
-            searchable: false,
-        },
-        {
-            id: 'inState',
-            name: 'In State',
-            type: 'string',
-            enum: ['Yes', 'No'],
-            required: false,
-            searchable: false,
-        },
-    ],
+    properties: [...defaultProperties],
     criteria: {
         $or: [
             {

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

@@ -8,6 +8,7 @@ export declare const NumberField: ComponentStory<(props: FormFieldProps) => JSX.
 export declare const MaskedInput: ComponentStory<(props: FormFieldProps) => JSX.Element>;
 export declare const ChoicesSelectField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
 export declare const DatePickerField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
+export declare const DateTimePickerField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
 export declare const BooleanField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
 export declare const FileUploadField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
 export declare const ArraySelectField: ComponentStory<(props: FormFieldProps) => JSX.Element>;

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

@@ -101,6 +101,21 @@ DatePickerField.args = {
     readOnly: false,
     size: 'small',
 };
+export const DateTimePickerField = FormFieldTemplate.bind({});
+DateTimePickerField.args = {
+    property: {
+        id: 'date-time',
+        name: 'Date Time',
+        type: 'date-time',
+        required: true,
+    },
+    onChange: (id, value) => console.log('id= ', id, 'Value= ', value),
+    defaultValue: '2025-02-19T18:05:00.000Z',
+    error: false,
+    required: true,
+    readOnly: false,
+    size: 'small',
+};
 export const BooleanField = FormFieldTemplate.bind({});
 BooleanField.args = {
     property: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.2-testing.2",
+    "version": "1.1.0-dev.0",
     "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",