@evoke-platform/ui-components 1.0.0-dev.167 → 1.0.0-dev.169

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

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

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

@@ -103,7 +103,7 @@ const customSelector = (props) => {
             return option === value;
         }, 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 }, disableClearable: true }));
+        }, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small" })), sx: { width: width, maxWidth: title === 'Operators' ? '200px' : 'none' }, disableClearable: true }));
 };
 const customCombinator = (props) => {
     const { options, value, handleOnChange } = props;
@@ -136,7 +136,7 @@ export const valueEditor = (props) => {
     return ValueEditor(props);
 };
 const CriteriaBuilder = (props) => {
-    const { properties, criteria, setCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, hideBorder, } = props;
+    const { properties, criteria, setCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, hideBorder, presetGroupLabel, } = props;
     const [query, setQuery] = useState(undefined);
     useEffect(() => {
         if (criteria) {
@@ -165,7 +165,8 @@ const CriteriaBuilder = (props) => {
     }, []);
     const handleQueryChange = (q) => {
         const updatedQuery = Object.assign(Object.assign({}, q), { rules: q.rules.map((rule) => {
-                return Object.assign(Object.assign({}, rule), { value: Array.isArray(rule.value) && !!rule.value[0].label
+                var _a;
+                return Object.assign(Object.assign({}, rule), { value: Array.isArray(rule.value) && !!((_a = rule.value[0]) === null || _a === void 0 ? void 0 : _a.label)
                         ? rule.value.map((item) => item.label)
                         : rule.value });
             }) });
@@ -227,7 +228,7 @@ const CriteriaBuilder = (props) => {
                         removeGroupAction: customDelete,
                         removeRuleAction: customDelete,
                         valueEditor: valueEditor
-                    }, context: { dynamicContentInput, presetValues, enablePresetValues }, controlClassnames: {
+                    }, context: { dynamicContentInput, presetValues, enablePresetValues, presetGroupLabel }, controlClassnames: {
                         queryBuilder: 'queryBuilder-branches',
                         ruleGroup: 'container',
                     }, operators: operators

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

@@ -68,7 +68,7 @@ const ValueEditor = (props) => {
                 return (React.createElement(Autocomplete, { freeSolo: true, multiple: true, options: options, getOptionLabel: (option) => (option.label ? option.label : option), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, onChange: (event, newValue) => {
                         const uniqueSelections = newValue.map((item) => { var _a; return (_a = item.value) !== null && _a !== void 0 ? _a : Number(item); });
                         handleOnChange(uniqueSelections.length ? uniqueSelections : '');
-                    }, isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" })), groupBy: (option) => { var _a; return (isPresetValue((_a = option.value) === null || _a === void 0 ? void 0 : _a.name) ? 'Preset Values' : 'Options'); }, renderGroup: groupRenderGroup, sx: { width: '33%' } }));
+                    }, isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" })), groupBy: (option) => { var _a; return isPresetValue((_a = option.value) === null || _a === void 0 ? void 0 : _a.name) ? context.presetGroupLabel || 'Preset Values' : 'Options'; }, renderGroup: groupRenderGroup, sx: { width: '33%' } }));
             }
             else {
                 return (React.createElement(TextField, Object.assign({ inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -90,8 +90,16 @@ const ValueEditor = (props) => {
                 ...((_a = values === null || values === void 0 ? void 0 : values.sort((a, b) => a.label.localeCompare(b.name))) !== null && _a !== void 0 ? _a : []),
                 ...((_b = presetValues === null || presetValues === void 0 ? void 0 : presetValues.sort((a, b) => a.label.localeCompare(b.label))) !== null && _b !== void 0 ? _b : [])
             ];
+            const getValue = () => {
+                if (isMultiple) {
+                    return Array.isArray(value) && !disabled ? value : [];
+                }
+                else {
+                    return disabled ? value : '';
+                }
+            };
             if (isMultiple || (values === null || values === void 0 ? void 0 : values.length)) {
-                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && inputType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (disabled ? [] : value) : value, disabled: disabled, onChange: (event, newValue) => {
+                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && inputType !== 'select', multiple: isMultiple, options: options, value: getValue(), disabled: disabled, onChange: (event, newValue) => {
                         var _a, _b, _c;
                         let value;
                         if (isMultiple) {
@@ -101,7 +109,9 @@ const ValueEditor = (props) => {
                             value = (_c = (_b = newValue === null || newValue === void 0 ? void 0 : newValue.value) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : '';
                         }
                         handleOnChange(value);
-                    }, renderInput: (params) => (React.createElement(TextField, Object.assign({ inputRef: inputRef, label: params.label }, params, { size: "small" }))), groupBy: (option) => { var _a; return (isPresetValue((_a = option.value) === null || _a === void 0 ? void 0 : _a.name) ? 'Preset Values' : 'Options'); }, renderGroup: groupRenderGroup, sortBy: 'NONE', sx: { width: '33%' } }));
+                    }, renderInput: (params) => (React.createElement(TextField, Object.assign({ inputRef: inputRef, label: params === null || params === void 0 ? void 0 : params.label }, params, { size: "small" }))), isOptionEqualToValue: (option, value) => {
+                        return (option === null || option === void 0 ? void 0 : option.label) === (value === null || value === void 0 ? void 0 : value.label);
+                    }, groupBy: (option) => { var _a; return isPresetValue((_a = option.value) === null || _a === void 0 ? void 0 : _a.name) ? context.presetGroupLabel || 'Preset Values' : 'Options'; }, renderGroup: groupRenderGroup, sortBy: 'NONE', sx: { width: '33%' } }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%' } }));

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Box, FormControlLabel, Grid, InputAdornment, Switch, TextField, Typography, IconButton, Tooltip, } from '@mui/material';
+import { Box, Grid, InputAdornment, Switch, TextField, Typography, IconButton, Button } from '@mui/material';
 import { Search, DragHandleOutlined } from '@mui/icons-material';
 import UIThemeProvider from '../../../theme';
 import { sortBy } from 'lodash';
@@ -7,6 +7,7 @@ import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, us
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';
 import { SortableItem } from './SortableItem';
+import { Tooltip } from '../../core';
 const styles = {
     textField: {
         borderRadius: '8px',
@@ -39,6 +40,11 @@ const styles = {
             pointerEvents: 'auto',
         },
     },
+    button: {
+        fontWeight: '400',
+        textTransform: 'uppercase',
+        '&:hover': { backgroundColor: 'transparent' },
+    },
 };
 export default function MultiSelect(props) {
     const { options, onChange, maxHeight, isSortable } = props;
@@ -72,15 +78,22 @@ export default function MultiSelect(props) {
         onChange(allOptions);
         setOptions(newOptions);
     };
-    const handleSelectAllChange = (event) => {
-        setSelectAll(event.target.checked);
+    const updateOptions = (value) => {
         const newOptions = optionsArray.map((option) => {
-            option.value = event.target.checked;
+            option.value = value;
             return option;
         });
         onChange(newOptions);
         setOptions(newOptions);
     };
+    const handleSelectAllChange = (event) => {
+        updateOptions(true);
+        setSelectAll(true);
+    };
+    const handleClearAll = (event) => {
+        updateOptions(false);
+        setSelectAll(false);
+    };
     const filterItems = (event) => {
         setSearchText(event.target.value);
         const keyword = event.target.value.toLowerCase();
@@ -122,8 +135,12 @@ export default function MultiSelect(props) {
                         startAdornment: (React.createElement(InputAdornment, { position: "start" },
                             React.createElement(Search, null))),
                     }, fullWidth: true, sx: styles.textField, value: searchText, onChange: filterItems }))),
-            (optionsArray === null || optionsArray === void 0 ? void 0 : optionsArray.length) > 1 && (React.createElement(Grid, { item: true, sx: styles.switch },
-                React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: selectAll, onChange: handleSelectAllChange }), label: "Select all fields", disabled: optionsArray.every((option) => option.disabled === true) }))),
+            (optionsArray === null || optionsArray === void 0 ? void 0 : optionsArray.length) > 1 && (React.createElement(Grid, { container: true },
+                React.createElement(Grid, null,
+                    React.createElement(Button, { sx: styles.button, variant: "text", onClick: (e) => handleSelectAllChange(e), disabled: optionsArray.every((option) => option.disabled === true || selectAll) }, "Select All")),
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(Button, { sx: Object.assign({}, styles.button), variant: "text", onClick: (e) => handleClearAll(e), disabled: optionsArray.every((option) => option.disabled === true) ||
+                            optionsArray.every((option) => option.value === false) }, "Clear All")))),
             React.createElement(Box, { sx: Object.assign(Object.assign({}, styles.list), { maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : 'auto' }) }, !!isSortable ? (React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: [restrictToVerticalAxis, restrictToWindowEdges] },
                 React.createElement(SortableContext, { items: optionsArray, strategy: verticalListSortingStrategy }, optionsArray.map((option) => {
                     var _a, _b;

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

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

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

@@ -109,8 +109,8 @@ CriteriaBuilder.args = {
     },
     enablePresetValues: false,
 };
-export const CriteriaBuilderPresetValues = CriteriaBuilderTemplate.bind({});
-CriteriaBuilderPresetValues.args = {
+export const CriteriaBuilderPresetUserID = CriteriaBuilderTemplate.bind({});
+CriteriaBuilderPresetUserID.args = {
     properties: [
         {
             id: 'name',
@@ -204,3 +204,78 @@ CriteriaBuilderPresetValues.args = {
     },
     enablePresetValues: true,
 };
+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: '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,
+        },
+    ],
+    setCriteria: (criteria) => console.log('criteria= ', criteria),
+    criteria: {
+        $or: [
+            {
+                name: '',
+            },
+        ],
+    },
+    presetValues: [
+        {
+            label: 'Preset 1',
+            value: { name: '{{{1}}}', label: 'thing1', sublabel: 'thing1' },
+        },
+        {
+            label: 'Preset 2',
+            value: { name: '{{{2}}}', label: 'thing2', sublabel: 'thing2' },
+        },
+        {
+            label: 'Preset 3',
+            value: { name: '{{{3}}}', label: 'thing3', sublabel: 'thing3' },
+        },
+    ],
+    presetGroupLabel: 'Parameter Values',
+    enablePresetValues: true,
+};

package/package.json

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