@evoke-platform/ui-components 1.0.0-dev.219 → 1.0.0-dev.221

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

@@ -22,6 +22,7 @@ export declare type CriteriaInputProps = {
     disabled?: boolean;
     hideBorder?: boolean;
     presetGroupLabel?: string;
+    freeSolo?: boolean;
 };
 export declare const valueEditor: (props: ValueEditorProps) => JSX.Element;
 declare const CriteriaBuilder: (props: CriteriaInputProps) => JSX.Element;

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

@@ -77,8 +77,9 @@ const customSelector = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const rule = props.rule;
     let width = '90px';
-    let val = value;
+    let displayedValue = value;
     let opts = options;
+    const isFreeSoloEnabled = context.freeSolo && title === 'Fields';
     let readOnly = false;
     if (context.disabledCriteria) {
         readOnly =
@@ -95,24 +96,32 @@ const customSelector = (props) => {
                 opts = options
                     .filter((option) => ['null', 'notNull', 'in', 'notIn'].includes(option.name))
                     .map((option) => ({ name: option.name, label: option.label }));
-                val = val === '=' ? '' : options.find((option) => option.name === val).name;
+                displayedValue =
+                    value === '='
+                        ? ''
+                        : options.find((option) => option.name === displayedValue).name;
             }
             else if (((_b = props.fieldData) === null || _b === void 0 ? void 0 : _b.inputType) === 'document') {
                 opts = options
                     .filter((option) => ['null', 'notNull'].includes(option.name))
                     .map((option) => ({ name: option.name, label: option.label }));
-                val = val === '=' ? '' : options.find((option) => option.name === val).name;
+                displayedValue =
+                    value === '='
+                        ? ''
+                        : options.find((option) => option.name === displayedValue).name;
             }
             break;
         case 'Fields':
             width = '33%';
-            val = (_c = options.find((option) => option.name === val)) === null || _c === void 0 ? void 0 : _c.name;
+            displayedValue = (_c = options.find((option) => option.name === displayedValue)) === null || _c === void 0 ? void 0 : _c.label;
+            if (isFreeSoloEnabled && !displayedValue) {
+                displayedValue = value;
+            }
             break;
     }
-    return (React.createElement(Autocomplete, { options: opts, value: val !== null && val !== void 0 ? val : null, getOptionLabel: (option) => {
-            var _a;
+    return (React.createElement(Autocomplete, { options: opts, value: displayedValue !== null && displayedValue !== void 0 ? displayedValue : null, getOptionLabel: (option) => {
             if (typeof option === 'string') {
-                return ((_a = opts.find((o) => option === o.name)) === null || _a === void 0 ? void 0 : _a.label) || '';
+                return option;
             }
             return option.label;
         }, isOptionEqualToValue: (option, value) => {
@@ -121,7 +130,11 @@ const customSelector = (props) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onChange: (event, newValue) => {
             handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.value.name);
-        }, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small" })), sx: { width: width, maxWidth: title === 'Operators' ? '200px' : 'none' }, disableClearable: true, readOnly: readOnly }));
+        }, onInputChange: (event, value) => {
+            if (isFreeSoloEnabled) {
+                handleOnChange(value);
+            }
+        }, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small", name: title })), sx: { width: width, maxWidth: title === 'Operators' ? '200px' : 'none' }, disableClearable: true, readOnly: readOnly }));
 };
 const customCombinator = (props) => {
     const { options, value, handleOnChange, context, level } = props;
@@ -169,7 +182,7 @@ export const valueEditor = (props) => {
     return ValueEditor(props);
 };
 const CriteriaBuilder = (props) => {
-    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, disabledCriteria, hideBorder, presetGroupLabel, } = props;
+    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, disabledCriteria, hideBorder, presetGroupLabel, freeSolo, } = props;
     const [query, setQuery] = useState(undefined);
     useEffect(() => {
         if (criteria || originalCriteria) {
@@ -261,6 +274,7 @@ const CriteriaBuilder = (props) => {
                         enablePresetValues,
                         presetGroupLabel,
                         disabledCriteria,
+                        freeSolo,
                     }, controlClassnames: {
                         queryBuilder: 'queryBuilder-branches',
                         ruleGroup: 'container',

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

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

@@ -0,0 +1,53 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import CriteriaBuilder from './CriteriaBuilder';
+const mockProperties = [
+    { 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 },
+];
+describe('CriteriaBuilder', () => {
+    test('allows selection of a property and clears value input when selected', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                $or: [
+                    {
+                        name: 'test value',
+                    },
+                ],
+            }, setCriteria: jest.fn(), freeSolo: true }));
+        const field = yield screen.findByDisplayValue(/name/);
+        const value = yield screen.findByDisplayValue(/test value/);
+        yield user.click(field);
+        const option = yield screen.findByRole('option', { name: /license number/ });
+        yield user.click(option);
+        expect(field).toHaveValue('license number');
+        expect(value).toHaveValue('');
+    }));
+    test('allows free solo input when freeSolo is true, clears value input when entered', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                $or: [
+                    {
+                        name: 'test value',
+                    },
+                ],
+            }, setCriteria: jest.fn(), freeSolo: true }));
+        const field = yield screen.findByDisplayValue(/name/);
+        const value = yield screen.findByDisplayValue(/test value/);
+        yield user.type(field, 'person.license.name');
+        expect(field).toHaveValue('person.license.name');
+        expect(value).toHaveValue('');
+    }));
+});

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

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import { ApiServices, Obj, ObjectInstance, UserAccount } from '@evoke-platform/context';
-import { ReactNode } from 'react';
-import { Document, ObjectPropertyInputProps } from '../types';
+import { ReactComponent } from '@formio/react';
 import '../../../../styles/form-component.css';
+import { Document, ObjectPropertyInputProps } from '../types';
 declare type OnSaveResponse = {
     isSuccessful: boolean;
     error?: Record<string, unknown>;
@@ -32,7 +33,7 @@ export declare type FormProps = {
     };
     queryAddresses?: unknown;
     fieldHeight?: 'small' | 'medium';
-    richTextEditor?: ReactNode;
+    richTextEditor?: typeof ReactComponent;
 };
 export declare function Form(props: FormProps): JSX.Element;
 export default Form;

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

@@ -12,11 +12,11 @@ import { Components, Form as FormIO } from '@formio/react';
 import { flatten } from 'flat';
 import { isEqual, toPairs } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
+import '../../../../styles/form-component.css';
 import { Skeleton, Snackbar } from '../../../core';
 import { Box } from '../../../layout';
 import { ButtonComponent, DocumentComponent, FormFieldComponent, ImageComponent, ObjectComponent, RepeatableFieldComponent, UserComponent, ViewOnlyComponent, } from '../FormComponents';
 import { addObjectPropertiesToComponentProps, buildComponentPropsFromDocumentProperties, buildComponentPropsFromObjectProperties, convertFormToComponents, getFlattenEntries, getPrefixedUrl, } from '../utils';
-import '../../../../styles/form-component.css';
 const usePrevious = (value) => {
     const ref = useRef();
     useEffect(() => {

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

@@ -320,10 +320,10 @@ export class FormFieldComponent extends ReactComponent {
                 delete this.errorDetails['time'];
             }
         }
-        if (validate.min || validate.max) {
+        if (!isNil(validate.min) || !isNil(validate.max)) {
             if (!isNil(value) &&
                 value !== '' &&
-                ((validate.min && value < validate.min) || (validate.max && value > validate.max))) {
+                ((!isNil(validate.min) && value < validate.min) || (!isNil(validate.max) && value > validate.max))) {
                 this.errorDetails['min-max'] = validate.customMessage;
             }
             else {

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

@@ -4,5 +4,6 @@ import { CriteriaInputProps } from '../components/custom/CriteriaBuilder/Criteri
 declare const _default: ComponentMeta<(props: CriteriaInputProps) => JSX.Element>;
 export default _default;
 export declare const CriteriaBuilder: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;
+export declare const FreeSolo: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;
 export declare const CriteriaBuilderPresetUserID: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;
 export declare const CriteriaBuilderGroupedPresetValues: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;

package/dist/published/stories/CriteriaBuilder.stories.js

@@ -109,6 +109,23 @@ CriteriaBuilder.args = {
     },
     enablePresetValues: false,
 };
+export const FreeSolo = CriteriaBuilderTemplate.bind({});
+FreeSolo.args = Object.assign(Object.assign({}, CriteriaBuilder.args), { criteria: {
+        $or: [
+            {
+                'person.license.name': 'bert',
+            },
+            {
+                licensedFor: { $in: ['hot dogs', 'amusements', 'entertainment'] },
+            },
+            {
+                licenseNumber: '123456',
+            },
+            {
+                issueDate: '2023-03-16',
+            },
+        ],
+    }, freeSolo: true });
 export const CriteriaBuilderPresetUserID = CriteriaBuilderTemplate.bind({});
 CriteriaBuilderPresetUserID.args = {
     properties: [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.219",
+    "version": "1.0.0-dev.221",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -72,6 +72,7 @@
         "eslint-plugin-prettier": "^5.1.2",
         "eslint-plugin-testing-library": "^6.2.0",
         "husky": "^8.0.3",
+        "identity-obj-proxy": "^3.0.0",
         "is-ci": "^3.0.1",
         "jest": "^28.1.2",
         "jest-environment-jsdom": "^28.1.2",
@@ -143,6 +144,9 @@
     "jest": {
         "verbose": true,
         "testEnvironment": "jsdom",
+        "moduleNameMapper": {
+            "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+        },
         "testPathIgnorePatterns": [
             "/node_modules/",
             "<rootDir>/dist/"