@evoke-platform/ui-components 1.0.0-dev.194 → 1.0.0-dev.196

package/dist/published/components/core/index.d.ts

@@ -47,3 +47,4 @@ export { SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePaginati
 export { LoadingButton, TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
 export type { GridSize } from '@mui/material';
 export type { AutocompleteOption } from './Autocomplete/Autocomplete';
+export type { GridCellParams, GridColDef, GridValueFormatterParams, GridValueGetterParams, GridEventListener, } from '@mui/x-data-grid';

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

@@ -4,6 +4,7 @@ import { EmptyContentSelectOptions } from './EmptyContent';
 export declare type GridAction = {
     label: string;
     onClick: () => void;
+    isHidden?: boolean;
 };
 export declare type BuilderGridProps<T extends GridValidRowModel> = MuiDataGridProps<T> & {
     action?: GridAction;
@@ -15,6 +16,7 @@ export declare type BuilderGridProps<T extends GridValidRowModel> = MuiDataGridP
     hideEmptyContent?: boolean;
     hideToolbar?: boolean;
     noRowsOverlay?: React.ReactElement;
+    filterComponent?: React.ReactElement;
 };
 declare const BuilderGrid: <T extends GridValidRowModel>(props: BuilderGridProps<T>) => JSX.Element;
 export default BuilderGrid;

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

@@ -17,9 +17,9 @@ import BuilderGridToolbar from './BuilderGridToolbar';
 import { EmptyContent } from './EmptyContent';
 const BuilderGrid = (props) => {
     var _a, _b;
-    const { loading, action, item, rows, initialSort, emptyContentSelectOptions, title, disablePagination, hideEmptyContent, hideToolbar, noRowsOverlay } = props, rest = __rest(props, ["loading", "action", "item", "rows", "initialSort", "emptyContentSelectOptions", "title", "disablePagination", "hideEmptyContent", "hideToolbar", "noRowsOverlay"]);
+    const { loading, action, item, rows, initialSort, emptyContentSelectOptions, title, disablePagination, hideEmptyContent, hideToolbar, noRowsOverlay, filterComponent } = props, rest = __rest(props, ["loading", "action", "item", "rows", "initialSort", "emptyContentSelectOptions", "title", "disablePagination", "hideEmptyContent", "hideToolbar", "noRowsOverlay", "filterComponent"]);
     const [anchorEl, setAnchorEl] = useState();
-    const toolbar = useMemo(() => () => React.createElement(BuilderGridToolbar, { loading: loading, action: action, title: title }), [loading, action]);
+    const toolbar = useMemo(() => () => React.createElement(BuilderGridToolbar, { loading: loading, action: action, title: title, filter: filterComponent }), [loading, action]);
     return (React.createElement(UIThemeProvider, null, loading || rows.length || hideEmptyContent ? (React.createElement(Box, { sx: {
             backgroundColor: '#fff',
             borderRadius: '6px',
@@ -59,7 +59,7 @@ const BuilderGrid = (props) => {
                     fontWeight: 700,
                 }, '& .MuiDataGrid-iconButtonContainer': {
                     marginLeft: '4px',
-                }, height: !disablePagination ? 'calc(100vh - 240px)' : 'auto' }, rest.sx), getRowId: (row) => row.id, disableColumnMenu: true, initialState: {
+                }, height: disablePagination && !loading ? 'auto' : 'calc(100vh - 240px)' }, rest.sx), getRowId: (row) => row.id, disableColumnMenu: true, initialState: {
                 sorting: {
                     sortModel: initialSort ? [initialSort] : [],
                 },

package/dist/published/components/custom/BuilderGrid/BuilderGridToolbar.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
 import { GridToolbarProps as MuiGridToolbarProps } from '@mui/x-data-grid';
+import React from 'react';
 import { GridAction } from './BuilderGrid';
 export declare type BuilderGridToolbar = MuiGridToolbarProps & {
     action?: GridAction;
     title?: string;
+    filter?: React.ReactElement;
 };
 declare function BuilderGridToolbar(props: BuilderGridToolbar): JSX.Element;
 export default BuilderGridToolbar;

package/dist/published/components/custom/BuilderGrid/BuilderGridToolbar.js

@@ -6,9 +6,12 @@ import { Button } from '../../core';
 import { Grid } from '../../layout';
 function BuilderGridToolbar(props) {
     var _a, _b, _c;
-    const { theme, action, title } = props;
+    const { theme, action, title, filter } = props;
     const styles = {
-        container: { display: 'flex', justifyContent: 'space-between', margin: '0 0 15px 0' },
+        container: {
+            display: 'flex',
+            margin: '0 0 15px 0',
+        },
         iconButton: {
             minWidth: '36px',
             height: '36px',
@@ -25,6 +28,7 @@ function BuilderGridToolbar(props) {
         },
         quickFilter: {
             '& .MuiOutlinedInput-root': {
+                minWidth: '300px',
                 '&.Mui-focused fieldset': {
                     borderColor: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : 'primary',
                 },
@@ -40,16 +44,20 @@ function BuilderGridToolbar(props) {
         React.createElement(GridToolbarContainer, { sx: { padding: '0' } },
             title && (React.createElement(Typography, { sx: { fontSize: '18px', fontWeight: 700, marginBottom: '6px', marginTop: '6px' } }, title)),
             React.createElement(Grid, { container: true, sx: styles.container },
-                React.createElement(Grid, { item: true, xs: 6, sx: { display: 'flex', alignItems: 'center' } },
-                    React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: styles.quickFilter })),
-                React.createElement(Grid, { item: true, xs: 6, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' },
+                React.createElement(Grid, { item: true, xs: filter ? 3 : 6, sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                    } },
+                    React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: Object.assign(Object.assign({}, styles.quickFilter), { flex: filter ? 1 : 0 }) })),
+                filter && (React.createElement(Grid, { xs: 6, item: true, sx: { display: 'flex' } }, filter)),
+                action && !action.isHidden && (React.createElement(Grid, { item: true, xs: filter ? 3 : 6, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' },
                     React.createElement(Button, { sx: {
                             fontWeight: 700,
-                            height: '40px',
+                            height: '36px',
                             padding: '0px 14px',
                             '&:hover': {
                                 boxShadow: 'none',
                             },
-                        }, onClick: action === null || action === void 0 ? void 0 : action.onClick, variant: 'contained' }, action === null || action === void 0 ? void 0 : action.label))))));
+                        }, onClick: action.onClick, variant: 'contained' }, action.label)))))));
 }
 export default BuilderGridToolbar;

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

@@ -169,22 +169,27 @@ const CriteriaBuilder = (props) => {
         if (criteria || originalCriteria) {
             const criteriaToParse = criteria || originalCriteria || {};
             const updatedQuery = parseMongoDB(criteriaToParse);
-            setQuery(Object.assign(Object.assign({}, updatedQuery), { 
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                rules: updatedQuery.rules.map((rule) => {
-                    var _a, _b;
-                    const propertyType = (_a = properties.find((property) => property.id === rule.field)) === null || _a === void 0 ? void 0 : _a.type;
-                    return Object.assign(Object.assign({}, rule), { value: propertyType === 'array' ||
-                            (propertyType === 'string' && rule.operator === 'in') ||
-                            rule.operator === 'notIn'
-                            ? (_b = rule.value) === null || _b === void 0 ? void 0 : _b.split(',')
-                            : rule.value });
-                }) }));
+            setQuery(Object.assign(Object.assign({}, updatedQuery), { rules: processRules(updatedQuery.rules) }));
         }
         else {
             setQuery({ combinator: 'and', rules: [] });
         }
     }, [originalCriteria]);
+    function processRules(rules) {
+        return rules.map((rule) => {
+            var _a, _b;
+            if ('rules' in rule) {
+                return Object.assign(Object.assign({}, rule), { rules: processRules(rule.rules) });
+            }
+            else {
+                const propertyType = (_a = properties.find((property) => property.id === rule.field)) === null || _a === void 0 ? void 0 : _a.type;
+                return Object.assign(Object.assign({}, rule), { value: propertyType === 'array' ||
+                        (propertyType === 'string' && (rule.operator === 'in' || rule.operator === 'notIn'))
+                        ? (_b = rule.value) === null || _b === void 0 ? void 0 : _b.split(',')
+                        : rule.value });
+            }
+        });
+    }
     const handleQueryChange = (q) => {
         setQuery(q);
         const newCriteria = JSON.parse(formatQuery(q, 'mongodb'));

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

@@ -5,6 +5,7 @@ export declare type DropdownOption = {
     value: boolean;
     disabled?: boolean;
     tooltip?: string;
+    deleted?: boolean;
 };
 export declare type MultiSelectProps = {
     options: DropdownOption[];

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

@@ -7,7 +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';
+import { Link, Tooltip } from '../../core';
 const styles = {
     textField: {
         borderRadius: '8px',
@@ -51,6 +51,7 @@ export default function MultiSelect(props) {
     const [optionsArray, setOptions] = useState(options);
     const [selectAll, setSelectAll] = useState(false);
     const [searchText, setSearchText] = useState('');
+    const [deletedOptions] = useState(options.filter((opt) => opt.deleted).map((opt) => { var _a; return (_a = opt.id) !== null && _a !== void 0 ? _a : ''; }));
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
         coordinateGetter: sortableKeyboardCoordinates,
     }), useSensor(PointerSensor, {
@@ -96,6 +97,16 @@ export default function MultiSelect(props) {
         updateOptions(false);
         setSelectAll(false);
     };
+    const handleDeletedOptions = (event) => {
+        const newOptions = optionsArray.map((option) => {
+            if (option.id && deletedOptions.includes(option.id)) {
+                option.value = false;
+            }
+            return option;
+        });
+        onChange(newOptions);
+        setOptions(newOptions);
+    };
     const filterItems = (event) => {
         setSearchText(event.target.value);
         const keyword = event.target.value.toLowerCase();
@@ -137,11 +148,18 @@ 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, { 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 === null || optionsArray === void 0 ? void 0 : optionsArray.length) && (React.createElement(Grid, { container: true },
+                deletedOptions.length && (React.createElement(Grid, { item: true, xs: 6, sx: { display: 'flex', justifyContent: 'start', textAlign: 'center' } },
+                    React.createElement(Link, { sx: {
+                            color: 'red',
+                            '&:hover': { backgroundColor: 'transparent', cursor: 'pointer' },
+                            textDecoration: 'none',
+                            margin: '8px',
+                        }, onClick: (e) => handleDeletedOptions(e) }, `Clear ${deletedOptions.length} deleted fields`))),
+                React.createElement(Grid, { item: true, xs: 3 },
+                    React.createElement(Button, { sx: Object.assign(Object.assign({}, styles.button), { fontWeight: 'bold' }), variant: "text", onClick: (e) => handleSelectAllChange(e), disabled: optionsArray.every((option) => option.disabled === true || selectAll) }, "Select All")),
+                React.createElement(Grid, { item: true, xs: 3 },
+                    React.createElement(Button, { sx: Object.assign(Object.assign({}, styles.button), { color: 'gray', fontWeight: 'bold' }), 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) => {

package/package.json

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