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

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

@@ -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(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;
@@ -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,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) => {
@@ -358,8 +368,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 +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(() => {
@@ -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,

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

@@ -2,7 +2,7 @@ import { Instant, LocalDate, LocalDateTime, LocalTime, ZoneId } from '@js-joda/c
 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 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 }) => ({
@@ -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];
@@ -43,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;
@@ -147,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;
@@ -161,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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.1.0-testing.1",
+    "version": "1.1.0-testing.3",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -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",