@evoke-platform/ui-components 1.0.0-dev.155 → 1.0.0-dev.157

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { GridValidRowModel, DataGridProps as MuiDataGridProps } from '@mui/x-data-grid';
+import { GridSortItem, GridValidRowModel, DataGridProps as MuiDataGridProps } from '@mui/x-data-grid';
 import { EmptyContentSelectOptions } from './EmptyContent';
 export declare type GridAction = {
     label: string;
@@ -8,7 +8,7 @@ export declare type GridAction = {
 export declare type BuilderGridProps<T extends GridValidRowModel> = MuiDataGridProps<T> & {
     action?: GridAction;
     item?: string;
-    initialSort?: string;
+    initialSort?: GridSortItem;
     emptyContentSelectOptions?: EmptyContentSelectOptions;
 };
 declare const BuilderGrid: <T extends GridValidRowModel>(props: BuilderGridProps<T>) => JSX.Element;

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Box } from '@mui/material';
-import { DataGrid as MuiDataGrid } from '@mui/x-data-grid';
+import { DataGrid as MuiDataGrid, } from '@mui/x-data-grid';
 import React, { useMemo, useState } from 'react';
 import UIThemeProvider from '../../../theme';
 import BuilderGridToolbar from './BuilderGridToolbar';
@@ -60,7 +60,7 @@ const BuilderGrid = (props) => {
                     marginLeft: '4px',
                 }, height: 'calc(100vh - 240px)' }, rest.sx), getRowId: (row) => row.id, disableColumnMenu: true, initialState: {
                 sorting: {
-                    sortModel: initialSort ? [{ field: initialSort, sort: 'asc' }] : [],
+                    sortModel: initialSort ? [initialSort] : [],
                 },
             }, componentsProps: {
                 panel: {

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

@@ -1,7 +1,7 @@
 import { RemoveCircleOutline } from '@mui/icons-material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import React, { useEffect, useMemo, useState } from 'react';
-import { QueryBuilder, formatQuery, parseMongoDB, } from 'react-querybuilder';
+import { QueryBuilder, formatQuery, parseMongoDB, useRuleGroup, TestID, RuleGroupBodyComponents, RuleGroupHeaderComponents, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 import { Autocomplete, Button, DatePicker, IconButton, LocalizationProvider, MenuItem, TextField, Typography, } from '../../core';
 import { Box } from '../../layout';
@@ -26,6 +26,43 @@ const ALL_OPERATORS = [
     { name: 'between', label: 'between' },
     { name: 'notBetween', label: 'not between' },
 ];
+const CustomRuleGroup = (props) => {
+    const rg = Object.assign(Object.assign({}, props), useRuleGroup(props));
+    const [addRule, addGroup, cloneGroup, toggleLockGroup, removeGroup] = [
+        rg.addRule,
+        rg.addGroup,
+        rg.cloneGroup,
+        rg.toggleLockGroup,
+        rg.removeGroup,
+    ].map(f => (event, context) => {
+        event.preventDefault();
+        event.stopPropagation();
+        f(event, context);
+    });
+    const subComponentProps = Object.assign(Object.assign({}, rg), { addRule,
+        addGroup,
+        cloneGroup,
+        toggleLockGroup,
+        removeGroup });
+    return (React.createElement("div", { ref: rg.previewRef, className: rg.outerClassName, "data-testid": TestID.ruleGroup, "data-dragmonitorid": rg.dragMonitorId, "data-dropmonitorid": rg.dropMonitorId, "data-rule-group-id": rg.id, "data-level": rg.path.length, "data-path": JSON.stringify(rg.path) },
+        React.createElement("div", { className: rg.classNames.body },
+            React.createElement(RuleGroupBodyComponents, Object.assign({}, subComponentProps))),
+        React.createElement("div", { ref: rg.dropRef, className: rg.classNames.header },
+            React.createElement(RuleGroupHeaderComponents, Object.assign({}, subComponentProps, { schema: Object.assign(Object.assign({}, subComponentProps.schema), { controls: Object.assign({}, subComponentProps.schema.controls) }) })))));
+};
+const customButton = (props) => {
+    const { title, handleOnClick, label } = props;
+    let buttonLabel = label;
+    switch (title) {
+        case 'Add group':
+            buttonLabel = '+ Condition Group';
+            break;
+        case 'Add rule':
+            buttonLabel = '+ Condition';
+            break;
+    }
+    return (React.createElement(Button, { variant: "contained", onClick: handleOnClick, size: "small", sx: { backgroundColor: '#ebf4f8', color: '#0678a9', boxShadow: 'none' } }, buttonLabel));
+};
 const customSelector = (props) => {
     var _a, _b;
     const { options, value, handleOnChange, title } = props;
@@ -75,19 +112,6 @@ const customCombinator = (props) => {
             },
         }, disableClearable: true }));
 };
-const customButton = (props) => {
-    const { title, handleOnClick, label } = props;
-    let buttonLabel = label;
-    switch (title) {
-        case 'Add group':
-            buttonLabel = '+ Condition Group';
-            break;
-        case 'Add rule':
-            buttonLabel = '+ Condition';
-            break;
-    }
-    return (React.createElement(Button, { variant: "contained", onClick: handleOnClick, size: "small", sx: { backgroundColor: '#ebf4f8', color: '#0678a9', boxShadow: 'none' } }, buttonLabel));
-};
 const customDelete = (props) => {
     const { handleOnClick } = props;
     return (React.createElement(IconButton, { onClick: handleOnClick, size: "small" },
@@ -320,6 +344,7 @@ const CriteriaBuilder = (props) => {
                         operatorSelector: customSelector,
                         addGroupAction: customButton,
                         addRuleAction: customButton,
+                        ruleGroup: CustomRuleGroup,
                         removeGroupAction: customDelete,
                         removeRuleAction: customDelete,
                         valueEditor: enablePresetValues

package/package.json

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