@evoke-platform/ui-components 1.0.0-dev.220 → 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/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.220",
+    "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/"