@evoke-platform/ui-components 1.0.0-dev.1.10.9 → 1.0.0-dev.101

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ValueEditorProps } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 import { AutocompleteOption } from '../../core';
@@ -21,6 +21,10 @@ declare type CriteriaInputProps = {
     setCriteria: Function;
     criteria?: Record<string, any>;
     enablePresetValues?: boolean;
+    dynamicContentInput?: {
+        component: React.ElementType;
+        previousSteps: unknown[];
+    };
     operators?: Operator[];
 };
 export declare const customValueEditorWithPresets: (props: CustomValueEditorProps) => JSX.Element;

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

@@ -126,6 +126,16 @@ export const customValueEditor = (props) => {
         }, placeholder: "Value", size: "small", sx: { width: '33%' } }));
     return determineValueEditor(valueEditor, props);
 };
+const dynamicContentInputEditor = (props) => {
+    var _a, _b, _c;
+    const { operator, value, handleOnChange } = props;
+    const DynamicContentInput = (_a = props.context) === null || _a === void 0 ? void 0 : _a.dynamicContentInput.component;
+    let valueEditor;
+    if (DynamicContentInput) {
+        valueEditor = (React.createElement(DynamicContentInput, { values: ['null', 'notNull'].includes(operator) ? '' : value, setValues: handleOnChange, disabled: ['null', 'notNull'].includes(operator), isSingleValue: true, size: 'small', previousSteps: (_c = (_b = props.context) === null || _b === void 0 ? void 0 : _b.previousSteps) !== null && _c !== void 0 ? _c : [] }));
+    }
+    return determineValueEditor(valueEditor, props);
+};
 const determineValueEditor = (baseValueEditor, props) => {
     const { handleOnChange, value, values, type, operator, inputType } = props;
     const disabled = ['null', 'notNull'].includes(operator);
@@ -170,7 +180,7 @@ const determineValueEditor = (baseValueEditor, props) => {
     return valueEditor;
 };
 const CriteriaBuilder = (props) => {
-    const { properties, criteria, setCriteria, enablePresetValues, operators } = props;
+    const { properties, criteria, setCriteria, enablePresetValues, operators, dynamicContentInput } = props;
     const [query, setQuery] = useState(undefined);
     useEffect(() => {
         if (criteria) {
@@ -231,7 +241,7 @@ const CriteriaBuilder = (props) => {
                 },
             } },
             React.createElement(QueryBuilderMaterial, null,
-                React.createElement(QueryBuilder, { query: query, fields: fields, onQueryChange: (q) => {
+                React.createElement(QueryBuilder, { query: !criteria ? { combinator: 'and', rules: [] } : query, fields: fields, onQueryChange: (q) => {
                         handleQueryChange(q);
                     }, showCombinatorsBetweenRules: true, listsAsArrays: true, controlElements: {
                         combinatorSelector: customCombinator,
@@ -241,8 +251,8 @@ const CriteriaBuilder = (props) => {
                         addRuleAction: customButton,
                         removeGroupAction: customDelete,
                         removeRuleAction: customDelete,
-                        valueEditor: enablePresetValues ? customValueEditorWithPresets : customValueEditor,
-                    }, controlClassnames: {
+                        valueEditor: enablePresetValues ? customValueEditorWithPresets : dynamicContentInput ? dynamicContentInputEditor : customValueEditor,
+                    }, context: { dynamicContentInput: dynamicContentInput }, controlClassnames: {
                         queryBuilder: 'queryBuilder-branches',
                         ruleGroup: 'container',
                     }, operators: operators ? ALL_OPERATORS.filter((o) => operators.includes(o.name)) : ALL_OPERATORS }))));

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Autocomplete, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const BooleanSelect = (props) => {
-    const { property, defaultValue, error, errorMessage, readOnly, size, placeholder } = props;
+    const { property, defaultValue, error, errorMessage, readOnly, size, placeholder, onBlur } = props;
     const [value, setValue] = useState(defaultValue);
     const id = property.id;
     useEffect(() => {
@@ -22,6 +22,6 @@ const BooleanSelect = (props) => {
             value: false,
         },
     ];
-    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { id: id, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, errorMessage: errorMessage, fullWidth: true, style: { background: 'white' }, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), value: value, onChange: handleChange, inputValue: value, options: booleanOptions, disableClearable: true, style: { background: 'white', borderRadius: '8px' } }));
+    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { id: id, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, style: { background: 'white' }, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), value: value, onChange: handleChange, inputValue: value, options: booleanOptions, disableClearable: true, style: { background: 'white', borderRadius: '8px' } }));
 };
 export default BooleanSelect;

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

@@ -26,7 +26,7 @@ const asMonthDayYearFormat = (date) => {
     }
 };
 const DatePickerSelect = (props) => {
-    const { property, defaultValue, error, errorMessage, readOnly, required, size } = props;
+    const { property, defaultValue, error, errorMessage, readOnly, required, size, onBlur } = props;
     const [value, setValue] = useState(asCalendarDate(defaultValue));
     const id = property.id;
     useEffect(() => {
@@ -37,6 +37,6 @@ const DatePickerSelect = (props) => {
         props.onChange(id, date, property);
     };
     return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, Object.assign(Object.assign({}, props), { defaultValue: asMonthDayYearFormat(value) })))) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { id: id, error: error, errorMessage: errorMessage, fullWidth: true, required: required, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium' }))) })));
+        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium' }))) })));
 };
 export default DatePickerSelect;

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

@@ -1,11 +1,14 @@
 export declare type FormFieldProps = {
     property: ObjectProperty;
     onChange: Function;
+    onBlur?: Function;
     defaultValue?: unknown;
     error?: boolean;
     errorMessage?: string;
     required?: boolean;
     readOnly?: boolean;
+    min?: number;
+    max?: number;
     selectOptions?: Array<string>;
     locale?: string;
     size?: 'small' | 'medium';

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

@@ -5,13 +5,14 @@ import FileUploadControl from './FileUpload/FileUpload';
 import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
 import Select from './Select/Select';
 const FormField = (props) => {
-    const { defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, mask } = props;
+    const { defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min } = props;
     const id = property.id;
     let control;
     const commonProps = {
         id,
         property,
         onChange,
+        onBlur,
         error,
         errorMessage,
         readOnly,
@@ -20,6 +21,8 @@ const FormField = (props) => {
         required,
         size,
         placeholder,
+        min,
+        max
     };
     switch (property.type) {
         case 'boolean':

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

@@ -23,11 +23,11 @@ const NumericFormat = (props) => {
                     value: values.floatValue,
                 },
             });
-        }, thousandSeparator: true, isNumericString: true, fixedDecimalScale: true, allowNegative: false })));
+        }, isNumericString: true, fixedDecimalScale: true, allowNegative: false })));
 };
 const InputFieldComponent = (props) => {
     var _a;
-    const { property, defaultValue, error, errorMessage, readOnly, required, size, placeholder, mask } = props;
+    const { property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, min, max } = props;
     const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const [inputValue, setInputValue] = useState('');
     const id = property.id;
@@ -47,11 +47,9 @@ const InputFieldComponent = (props) => {
         setInputValue(selectValue);
     };
     const InputProps = property.type === 'number'
-        ? {
-            inputComponent: NumericFormat,
-        }
+        ? { inputComponent: NumericFormat, min, max }
         : property.type === 'integer'
-            ? { inputProps: { min: 0 } }
+            ? { inputProps: { min, max } }
             : null;
     const selectOptions = (_a = property.enum) !== null && _a !== void 0 ? _a : [];
     if (property.enum && !property.enum.includes(value)) {
@@ -60,7 +58,7 @@ const InputFieldComponent = (props) => {
         //widgets had it like this, as strings w/isOptionEqualToValue
         selectOptions.push(value);
     }
-    return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, options: selectOptions, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, errorMessage: errorMessage, fullWidth: true, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
+    return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, options: selectOptions, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, errorMessage: errorMessage, fullWidth: true, onBlur: onBlur, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
             return option.value === value;
         }, error: error, required: required, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', onInputChange: handleInputValueChange })) : !mask ? (React.createElement(TextField, { id: id, sx: readOnly
             ? {
@@ -72,7 +70,7 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }
-            : undefined, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, placeholder: placeholder, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !!readOnly })) : (React.createElement(InputMask, { mask: mask, value: value, onChange: !readOnly ? handleChange : undefined, alwaysShowMask: true },
+            : undefined, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !!readOnly })) : (React.createElement(InputMask, { mask: mask, value: value, onChange: !readOnly ? handleChange : undefined, alwaysShowMask: true },
         React.createElement(TextField, { id: id, sx: readOnly
                 ? {
                     '& .MuiOutlinedInput-notchedOutline': {
@@ -83,6 +81,6 @@ const InputFieldComponent = (props) => {
                         backgroundColor: '#f4f6f8',
                     },
                 }
-                : undefined, error: error, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), fullWidth: true, type: property.type === 'integer' ? 'number' : 'text' })));
+                : undefined, error: error, errorMessage: errorMessage, onBlur: onBlur, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), fullWidth: true, type: property.type === 'integer' ? 'number' : 'text' })));
 };
 export default InputFieldComponent;

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Autocomplete, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const Select = (props) => {
-    const { property, defaultValue, error, errorMessage, readOnly, selectOptions, required, size } = props;
+    const { property, defaultValue, error, errorMessage, onBlur, readOnly, selectOptions, required, size } = props;
     const [value, setValue] = useState(defaultValue);
     const [inputValue, setInputValue] = useState('');
     useEffect(() => {
@@ -27,6 +27,6 @@ const Select = (props) => {
             setInputValue(selectValue);
         }
     };
-    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { multiple: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? true : false, id: id, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { value: value, fullWidth: true })), value: value, onChange: handleChange, options: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? property === null || property === void 0 ? void 0 : property.enum : selectOptions, disableClearable: true, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, filterOptions: (option) => { var _a; return (property === null || property === void 0 ? void 0 : property.type) === 'array' ? (_a = property === null || property === void 0 ? void 0 : property.enum) === null || _a === void 0 ? void 0 : _a.filter((item) => item !== option.value) : option; }, size: size }));
+    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { multiple: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? true : false, id: id, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { value: value, fullWidth: true, onBlur: onBlur })), value: value, onChange: handleChange, options: (property === null || property === void 0 ? void 0 : property.type) === 'array' ? property === null || property === void 0 ? void 0 : property.enum : selectOptions, disableClearable: true, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, filterOptions: (option) => { var _a; return (property === null || property === void 0 ? void 0 : property.type) === 'array' ? (_a = property === null || property === void 0 ? void 0 : property.enum) === null || _a === void 0 ? void 0 : _a.filter((item) => item !== option.value) : option; }, size: size }));
 };
 export default Select;

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

@@ -1,10 +1,14 @@
-/// <reference types="react" />
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
 declare const _default: ComponentMeta<(props: {
     properties: import("../components/custom/CriteriaBuilder/CriteriaBuilder").ObjectProperty[];
     setCriteria: Function;
     criteria?: Record<string, any> | undefined;
     enablePresetValues?: boolean | undefined;
+    dynamicContentInput?: {
+        component: React.ElementType<any>;
+        previousSteps: unknown[];
+    } | undefined;
     operators?: ("endsWith" | "in" | "=" | "=!" | "<" | ">" | "<=" | ">=" | "contains" | "beginsWith" | "doesNotContain" | "doesNotBeginWith" | "doesNotEndWith" | "null" | "notNull" | "notIn" | "between" | "notBetween")[] | undefined;
 }) => JSX.Element>;
 export default _default;
@@ -13,6 +17,10 @@ export declare const CriteriaBuilder: ComponentStory<(props: {
     setCriteria: Function;
     criteria?: Record<string, any> | undefined;
     enablePresetValues?: boolean | undefined;
+    dynamicContentInput?: {
+        component: React.ElementType<any>;
+        previousSteps: unknown[];
+    } | undefined;
     operators?: ("endsWith" | "in" | "=" | "=!" | "<" | ">" | "<=" | ">=" | "contains" | "beginsWith" | "doesNotContain" | "doesNotBeginWith" | "doesNotEndWith" | "null" | "notNull" | "notIn" | "between" | "notBetween")[] | undefined;
 }) => JSX.Element>;
 export declare const CriteriaBuilderPresetValues: ComponentStory<(props: {
@@ -20,5 +28,9 @@ export declare const CriteriaBuilderPresetValues: ComponentStory<(props: {
     setCriteria: Function;
     criteria?: Record<string, any> | undefined;
     enablePresetValues?: boolean | undefined;
+    dynamicContentInput?: {
+        component: React.ElementType<any>;
+        previousSteps: unknown[];
+    } | undefined;
     operators?: ("endsWith" | "in" | "=" | "=!" | "<" | ">" | "<=" | ">=" | "contains" | "beginsWith" | "doesNotContain" | "doesNotBeginWith" | "doesNotEndWith" | "null" | "notNull" | "notIn" | "between" | "notBetween")[] | undefined;
 }) => JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.1.10.9",
+    "version": "1.0.0-dev.101",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",