@evoke-platform/ui-components 1.0.0-dev.166 → 1.0.0-dev.168

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) {
@@ -227,7 +227,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) => {
@@ -101,7 +101,7 @@ 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.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, 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.166",
+    "version": "1.0.0-dev.168",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",

package/dist/published/styles/custom.css

@@ -1,81 +0,0 @@
-.dxreControl {
-    font: 12px Tahoma, Geneva, sans-serif;
-    box-sizing: border-box;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 6px;
-    min-height: calc(100vh - 232px);
-}
-
-/* MUI-ish styles for devexpress modal */
-.dx-overlay-content.dx-popup-normal {
-    border-radius: 8px;
-    font-family: 'Roboto', sans-serif;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.87);
-    background-color: #ffffff;
-    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
-        0px 9px 46px 8px rgba(0, 0, 0, 0.12);
-    transition: none !important;
-}
-
-.dx-popup-title {
-    border: none;
-}
-
-/* Apply Material UI-like styles to buttons */
-.dx-overlay-content.dx-popup-normal .dx-toolbar-button .dx-button-content {
-    font-family: 'Roboto', sans-serif;
-    font-size: 14px;
-}
-
-.dx-overlay-content .dx-toolbar-after .dx-toolbar-button .dx-button-mode-contained {
-    border-radius: 0px;
-    border: none;
-}
-
-/* MUI-ish styles for the Ok button*/
-.dx-overlay-content .dx-toolbar-after .dx-toolbar-button:nth-child(1) .dx-button-content {
-    border-radius: 8px;
-    line-height: 1.75;
-    letter-spacing: 0.02857em;
-    color: #ffffff;
-    background-color: #0075a7;
-    box-shadow: none;
-}
-
-/*  MUI-ish styles for the Cancel button */
-.dx-overlay-content.dx-popup-normal .dx-toolbar-button:nth-child(2) .dx-button-content {
-    border-radius: 8px;
-    line-height: 1.75;
-    letter-spacing: 0.02857em;
-    margin-right: 10px;
-    color: #0075a7;
-    background-color: transparent;
-    border: 1px solid #0075a7;
-    box-shadow: none;
-}
-
-/* Cancel button before ok button */
-.dx-toolbar-after {
-    display: flex;
-    flex-direction: row-reverse;
-}
-
-/* MUI-ish styles for tabs */
-.dx-tabs-wrapper .dx-tab {
-    font-family: 'Roboto', sans-serif;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
-    border-bottom: 2px solid transparent;
-    transition: border-bottom-color 0.2s ease-in-out;
-    padding-bottom: 8px;
-}
-
-.dx-tabs-wrapper .dx-tab-selected {
-    border-bottom-color: #1976d2;
-}
-/*TODO: figure out why this level of specificity doesn't remove the border on a focused tab container */
-.dx-item.dx-tab.dx-tab-selected.dx-state-focused {
-    border: none !important;
-}