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

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/package.json

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