@reltio/components 1.4.1731 → 1.4.1733

package/cjs/types/index.d.ts

@@ -1,17 +1,7 @@
 import React from 'react';
-import { AttributeType, SearchFilter } from '@reltio/mdm-sdk';
-export type ReactGridLayoutItem = {
-    i: string;
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-    minW?: number;
-    minH?: number;
-    maxW?: number;
-    maxH?: number;
-    static?: boolean;
-};
+import { AttributeType, SearchFilter, SearchOperator } from '@reltio/mdm-sdk';
+import { Layout as LayoutItem } from 'react-grid-layout';
+export type ReactGridLayoutItem = LayoutItem;
 export type ReltioGridLayoutOptions = {
     cols: number;
     rowHeight: number;
@@ -46,6 +36,7 @@ export type FiltersRowData = {
     filter: string;
     id: number;
     values: SearchFilter['values'];
+    operator?: SearchOperator;
 };
 export type AttributeSelectorItem = {
     attrType?: AttributeType;
@@ -62,6 +53,11 @@ export type AttributeSelectorItemsGroup = {
     title: string;
     attributes: AttributeSelectorItem[];
 };
+export type AttributesTypesGroup = {
+    id?: string;
+    title: string;
+    attributeTypes: AttributeType[];
+};
 export type AttributeSelectionInfo = {
     index: number;
     checked: boolean;
@@ -137,3 +133,10 @@ export type AnyAction = {
     type: string;
     [key: string]: any;
 };
+export type AttributesFilterComponentsClasses = {
+    attributeSelectorContainer?: string;
+    valuesEditorContainer?: string;
+    filterSelectorContainer?: string;
+    actionsContainer?: string;
+    filterPopup?: string;
+};

package/esm/components/AttributesFiltersBuilder/AttributesFiltersBuilder.d.ts

@@ -1,13 +1,17 @@
 import React from 'react';
-import { SearchFilter, AttributeType } from '@reltio/mdm-sdk';
+import { SearchFilter } from '@reltio/mdm-sdk';
+import { AttributeSelectionInfo, AttributesFilterComponentsClasses, AttributesTypesGroup } from '../../types';
 type Props = {
+    classes?: AttributesFilterComponentsClasses;
     filters: SearchFilter[];
     onChange: (filters: SearchFilter[]) => void;
-    attributeTypes: AttributeType[];
+    attributesTypesGroups: AttributesTypesGroup[];
     components?: {
         ValuesEditor?: React.ElementType;
         FilterSelector?: React.ElementType;
+        LogicalOperator?: React.ElementType;
     };
+    onFilterAttributeChange?: (attrSelectInfo: AttributeSelectionInfo) => void;
 };
-declare const _default: React.MemoExoticComponent<({ attributeTypes, filters, onChange, components }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ classes, attributesTypesGroups, filters, onChange, components, onFilterAttributeChange }: Props) => JSX.Element>;
 export default _default;

package/esm/components/AttributesFiltersBuilder/AttributesFiltersBuilder.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -9,35 +20,43 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import React, { useCallback, useRef, useMemo, useEffect, memo } from 'react';
 import { always, evolve } from 'ramda';
-import { getEntityType } from '@reltio/mdm-sdk';
-import { getAttributeSelectorItems, getRowsDataFromFilters, getEntityTypeFromAttrTypes } from './helpers';
+import { SearchOperator, findClosestCommonAncestor, getEntityType } from '@reltio/mdm-sdk';
+import { getAttributeSelectorItems, getEntityTypeFromAttrTypes, getRowsDataFromFilters } from './helpers';
 import FilterSelector from './components/FilterSelector/FilterSelector';
 import RowActions from './components/RowActions/RowActions';
 import QueryBuilderRowsGroup from '../QueryBuilderRowsGroup/QueryBuilderRowsGroup';
+import { useMdmMetadata } from '../../contexts';
+import { EmptyStub } from '../../core';
 import AttributeSelector from './components/AttributeSelector/AttributeSelector';
 import ValuesEditor from './components/ValuesEditor/ValuesEditor';
-import { useMdmMetadata } from '../../contexts';
 import { useStyles } from './styles';
-var EMPTY_FILTER = { fieldName: null, filter: null, values: [] };
-var Stub = function () { return null; };
+var EMPTY_FILTER = { fieldName: null, filter: null, operator: SearchOperator.and, values: [] };
 var AttributesFiltersBuilder = function (_a) {
-    var attributeTypes = _a.attributeTypes, filters = _a.filters, onChange = _a.onChange, _b = _a.components, components = _b === void 0 ? {} : _b;
-    var CustomValuesEditor = components.ValuesEditor, CustomFilterSelector = components.FilterSelector;
-    var _c = useStyles(), attrSelector = _c.attrSelector, filterSelector = _c.filterSelector, actionContainer = _c.actionContainer;
+    var _b = _a.classes, classes = _b === void 0 ? {} : _b, attributesTypesGroups = _a.attributesTypesGroups, filters = _a.filters, onChange = _a.onChange, _c = _a.components, components = _c === void 0 ? {} : _c, onFilterAttributeChange = _a.onFilterAttributeChange;
+    var CustomValuesEditor = components.ValuesEditor, CustomFilterSelector = components.FilterSelector, _d = components.LogicalOperator, LogicalOperator = _d === void 0 ? EmptyStub : _d;
+    var styles = useStyles();
     var actualFilters = useRef(filters);
     var attributeFilterRef = useRef(null);
     var lastAttributesCountRef = useRef(null);
     var attributesCountRef = useRef(null);
     var metadata = useMdmMetadata();
-    var entityType = getEntityType(metadata, getEntityTypeFromAttrTypes(attributeTypes));
     actualFilters.current = filters;
     var rowClasses = useMemo(function () { return ({
-        attributeSelectorContainer: attrSelector,
-        filterSelectorContainer: filterSelector,
-        actionsContainer: actionContainer
-    }); }, [attrSelector, filterSelector, actionContainer]);
-    var attributeSelectorItems = useMemo(function () { return getAttributeSelectorItems(attributeTypes, entityType, metadata); }, [attributeTypes, metadata, entityType]);
-    var rowsData = useMemo(function () { return (filters.length ? getRowsDataFromFilters(filters, attributeSelectorItems) : []); }, [attributeSelectorItems, filters]);
+        attributeSelectorContainer: classes.attributeSelectorContainer || styles.attrSelector,
+        valuesEditorContainer: classes.valuesEditorContainer || '',
+        filterSelectorContainer: styles.filterSelector,
+        actionsContainer: styles.actionContainer
+    }); }, [classes, styles]);
+    var currentEntityType = useMemo(function () {
+        var entityTypesUris = attributesTypesGroups.map(function (_a) {
+            var attributeTypes = _a.attributeTypes;
+            return getEntityTypeFromAttrTypes(attributeTypes);
+        });
+        var closestEntityTypeAncestorUri = findClosestCommonAncestor(metadata, entityTypesUris);
+        return getEntityType(metadata, closestEntityTypeAncestorUri);
+    }, [attributesTypesGroups, metadata]);
+    var attributeSelectorItemsGroups = useMemo(function () { return getAttributeSelectorItems(attributesTypesGroups, metadata); }, [attributesTypesGroups, metadata]);
+    var rowsData = useMemo(function () { return (filters.length ? getRowsDataFromFilters(filters, attributeSelectorItemsGroups) : []); }, [attributeSelectorItemsGroups, filters]);
     attributesCountRef.current = rowsData.length;
     useEffect(function () {
         if (attributeFilterRef.current && lastAttributesCountRef.current !== attributesCountRef.current) {
@@ -63,11 +82,7 @@ var AttributesFiltersBuilder = function (_a) {
     }, [onChange]);
     var duplicateRow = useCallback(function (index) {
         var newFilters = __spreadArray([], actualFilters.current, true);
-        newFilters.splice(index + 1, 0, {
-            fieldName: actualFilters.current[index].fieldName,
-            filter: actualFilters.current[index].filter,
-            values: actualFilters.current[index].values
-        });
+        newFilters.splice(index + 1, 0, __assign({}, actualFilters.current[index]));
         onChange(newFilters);
     }, [onChange]);
     var changeFilter = useCallback(function (newFilter, id) {
@@ -80,6 +95,6 @@ var AttributesFiltersBuilder = function (_a) {
     var addNewFilter = useCallback(function (newFilter) {
         onChange(__spreadArray(__spreadArray([], actualFilters.current, true), [newFilter], false));
     }, [onChange]);
-    return (React.createElement(QueryBuilderRowsGroup, { rowClasses: rowClasses, rowsData: rowsData, AttributeSelectorComponent: AttributeSelector, FilterSelectorComponent: CustomFilterSelector || FilterSelector, ValuesEditorComponent: CustomValuesEditor || ValuesEditor, ActionsComponent: RowActions, LogicOperatorComponent: Stub, filterSelectorRefIndex: lastAttributesCountRef.current, filterSelectorRef: attributeFilterRef, lastRowAttributeSelectorProps: lastRowAttributeSelectorProps, attributesGroup: attributeSelectorItems, changeFilter: changeFilter, addNewFilter: addNewFilter, addRowAfterIndex: addRowAfterIndex, removeRow: removeRow, duplicateRow: duplicateRow, entityType: entityType }));
+    return (React.createElement(QueryBuilderRowsGroup, { rowClasses: rowClasses, rowsData: rowsData, AttributeSelectorComponent: AttributeSelector, FilterSelectorComponent: CustomFilterSelector || FilterSelector, ValuesEditorComponent: CustomValuesEditor || ValuesEditor, ActionsComponent: RowActions, LogicOperatorComponent: LogicalOperator, filterSelectorRefIndex: lastAttributesCountRef.current, filterSelectorRef: attributeFilterRef, lastRowAttributeSelectorProps: lastRowAttributeSelectorProps, attributeSelectorItemsGroups: attributeSelectorItemsGroups, entityType: currentEntityType, changeFilter: changeFilter, addNewFilter: addNewFilter, addRowAfterIndex: addRowAfterIndex, removeRow: removeRow, duplicateRow: duplicateRow, onFilterAttributeChange: onFilterAttributeChange }));
 };
 export default memo(AttributesFiltersBuilder);

package/esm/components/AttributesFiltersBuilder/components/AttributeSelector/AttributeSelector.js

@@ -1,17 +1,17 @@
-import React, { useCallback, useMemo, memo } from 'react';
-import { getSearchGroupAttributeLabel } from '@reltio/mdm-sdk';
+import React, { useCallback, memo } from 'react';
+import { SearchOperator, getSearchGroupAttributeLabel } from '@reltio/mdm-sdk';
 import BasicAttributeSelector from '../../../BasicAttributeSelector/BasicAttributeSelector';
 var AttributeSelector = function (_a) {
     var rowData = _a.rowData, rowContext = _a.rowContext, attributeSelectorProps = _a.attributeSelectorProps;
-    var _b = rowData || {}, attribute = _b.attribute, id = _b.id, filter = _b.filter;
-    var changeFilter = rowContext.changeFilter, addNewFilter = rowContext.addNewFilter, attributesGroup = rowContext.attributesGroup;
+    var _b = rowData || {}, attribute = _b.attribute, id = _b.id, filter = _b.filter, operator = _b.operator;
+    var changeFilter = rowContext.changeFilter, addNewFilter = rowContext.addNewFilter, attributeSelectorItemsGroups = rowContext.attributeSelectorItemsGroups, onFilterAttributeChange = rowContext.onFilterAttributeChange;
     var getSelectedAttributeLabel = useCallback(function (data) { return getSearchGroupAttributeLabel({ data: data }); }, []);
-    var itemsGroup = useMemo(function () { return [{ id: '', title: '', attributes: attributesGroup }]; }, [attributesGroup]);
     var changeAttribute = useCallback(function (selectInfo) {
         if (rowData) {
             var newFilter = {
                 fieldName: selectInfo.attribute.fieldName,
                 filter: filter,
+                operator: operator,
                 values: []
             };
             changeFilter(newFilter, id);
@@ -20,10 +20,12 @@ var AttributeSelector = function (_a) {
             addNewFilter({
                 fieldName: selectInfo.attribute.fieldName,
                 filter: null,
+                operator: SearchOperator.and,
                 values: []
             });
         }
-    }, [addNewFilter, changeFilter, id, rowData, filter]);
-    return (React.createElement(BasicAttributeSelector, { itemsGroups: itemsGroup, ungroup: true, single: true, value: attribute, getLabel: getSelectedAttributeLabel, onSelect: changeAttribute, onOpenPopup: attributeSelectorProps.onOpen }));
+        onFilterAttributeChange && onFilterAttributeChange(selectInfo);
+    }, [rowData, onFilterAttributeChange, filter, operator, changeFilter, id, addNewFilter]);
+    return (React.createElement(BasicAttributeSelector, { itemsGroups: attributeSelectorItemsGroups, ungroup: attributeSelectorItemsGroups.length < 2, single: true, value: attribute, getLabel: getSelectedAttributeLabel, onSelect: changeAttribute, onOpenPopup: attributeSelectorProps.onOpen }));
 };
 export default memo(AttributeSelector);

package/esm/components/AttributesFiltersBuilder/components/FilterSelector/FilterSelector.js

@@ -10,7 +10,7 @@ var FilterSelector = function (_a) {
     var _b;
     var rowData = _a.rowData, rowContext = _a.rowContext, textFieldInputRef = _a.textFieldInputRef, optionsProp = _a.options;
     var styles = useStyles();
-    var _c = rowData || {}, _d = _c.attribute, _e = _d === void 0 ? {} : _d, _f = _e.attrType, attrType = _f === void 0 ? {} : _f, _g = _e.fieldName, fieldName = _g === void 0 ? null : _g, filter = _c.filter, id = _c.id;
+    var _c = rowData || {}, _d = _c.attribute, _e = _d === void 0 ? {} : _d, _f = _e.attrType, attrType = _f === void 0 ? {} : _f, _g = _e.fieldName, fieldName = _g === void 0 ? null : _g, filter = _c.filter, id = _c.id, operator = _c.operator;
     var changeFilter = rowContext.changeFilter;
     var options = optionsProp ||
         (attrType &&
@@ -20,10 +20,11 @@ var FilterSelector = function (_a) {
         var newFilter = {
             fieldName: fieldName,
             filter: filterOption.value,
+            operator: operator,
             values: []
         };
         changeFilter(newFilter, id);
-    }, [changeFilter, id, fieldName]);
+    }, [fieldName, operator, changeFilter, id]);
     useEffect(function () {
         if ((fieldName && !filter) || (fieldName && !findValue(options, filter))) {
             onChangeFilter(options[0]);

package/esm/components/AttributesFiltersBuilder/components/ValuesEditor/ValuesEditor.js

@@ -7,14 +7,15 @@ var ValuesEditor = function (_a) {
     var styles = useStyles();
     var canFilterAcceptValues = (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && checkIfOptionHasValues(rowData.filter);
     var changeFilter = rowContext.changeFilter;
-    var _b = (rowData || {}), _c = _b.values, values = _c === void 0 ? [] : _c, _d = _b.attribute, _e = _d === void 0 ? {} : _d, attrType = _e.attrType, _f = _e.fieldName, fieldName = _f === void 0 ? null : _f, filter = _b.filter, id = _b.id;
+    var _b = (rowData || {}), _c = _b.values, values = _c === void 0 ? [] : _c, _d = _b.attribute, _e = _d === void 0 ? {} : _d, attrType = _e.attrType, _f = _e.fieldName, fieldName = _f === void 0 ? null : _f, filter = _b.filter, id = _b.id, operator = _b.operator;
     var valueDataTypeDefinition = attrType && getAttrDataTypeDefinition(attrType);
     var filterValueDataTypeDefinition = valueDataTypeDefinition && getDataTypeDefinitionForFilterValue(valueDataTypeDefinition, filter);
     var editorFilter = useMemo(function () { return ({
         filter: filter,
         fieldName: fieldName,
+        operator: operator,
         values: values || []
-    }); }, [filter, fieldName, values]);
+    }); }, [filter, fieldName, operator, values]);
     var TextFieldProps = useMemo(function () { return ({
         InputProps: {
             classes: {
@@ -27,10 +28,11 @@ var ValuesEditor = function (_a) {
         var newFilter = {
             fieldName: fieldName,
             filter: filter,
+            operator: operator,
             values: newValues
         };
         changeFilter(newFilter, id);
-    }, [changeFilter, id, fieldName, filter]);
+    }, [fieldName, filter, operator, changeFilter, id]);
     return (React.createElement("div", { className: styles.valuesEditor }, (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && canFilterAcceptValues && (React.createElement(FilterValueEditor, { "data-reltio-id": "filter-value-editor", filter: editorFilter, onChange: changeValue, dataTypeDefinition: filterValueDataTypeDefinition, fullWidth: true, TextFieldProps: TextFieldProps, color: "primary", classes: editorClasses, orientation: "horizontal" }))));
 };
 export default memo(ValuesEditor);

package/esm/components/AttributesFiltersBuilder/components/ValuesEditor/styles.js

@@ -17,7 +17,7 @@ export var useStyles = makeStyles({
     valuesEditor: {
         display: 'flex',
         alignItems: 'center',
-        width: '222px!important',
+        width: '100%',
         minHeight: '40px',
         flexShrink: 0
     }

package/esm/components/AttributesFiltersBuilder/helpers.d.ts

@@ -1,11 +1,12 @@
-import { AttributeType, TEntityType, Metadata, SearchFilter } from '@reltio/mdm-sdk';
-import { AttributeSelectorItem } from '../../types';
+import { AttributeType, Metadata, SearchFilter } from '@reltio/mdm-sdk';
+import { AttributeSelectorItem, AttributeSelectorItemsGroup, AttributesTypesGroup } from '../../types';
 import { FilterOption } from './types';
-export declare const getAttributeSelectorItems: (attributeTypes: AttributeType[], entityType: TEntityType, metadata: Metadata) => AttributeSelectorItem[];
+export declare const getAttributeSelectorItems: (attributesTypesGroups: AttributesTypesGroup[], metadata: Metadata) => AttributeSelectorItemsGroup[];
 export declare const findValue: (options: FilterOption[], filter: string) => FilterOption;
-export declare const getRowsDataFromFilters: (filters: SearchFilter[], attributesGroup: AttributeSelectorItem[]) => {
+export declare const getRowsDataFromFilters: (filters: SearchFilter[], attributesGroupArr: AttributeSelectorItemsGroup[]) => {
     attribute: AttributeSelectorItem;
     filter: string;
+    operator: import("@reltio/mdm-sdk").SearchOperator;
     id: number;
     values: (import("@reltio/mdm-sdk").PrimitiveValue | Pick<import("@reltio/mdm-sdk").SimpleAttributeValue, "value" | "lookupCode">)[] | [(import("@reltio/mdm-sdk").PrimitiveValue | Pick<import("@reltio/mdm-sdk").SimpleAttributeValue, "value" | "lookupCode">)[]];
 }[];

package/esm/components/AttributesFiltersBuilder/helpers.js

@@ -18,7 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { getAttributesTreeFromAttributes, attributeUriToSearchUri, isSpecialAttribute, getBaseUri, getEntityTypeLabel } from '@reltio/mdm-sdk';
+import { getAttributesTreeFromAttributes, attributeUriToSearchUri, isSpecialAttribute, getBaseUri, getEntityTypeLabel, getEntityType, findRegularAttribute } from '@reltio/mdm-sdk';
 import { chain, prop } from 'ramda';
 var createAttributeItem = function (metadata, attrType, entityTypeUri, parents) {
     var entityTypeLabel = getEntityTypeLabel(metadata, { type: entityTypeUri });
@@ -48,44 +48,58 @@ var createAttributesConfig = function (metadata, attrNode, entityTypeUri, parent
     }
     return resConfig;
 };
-export var getAttributeSelectorItems = function (attributeTypes, entityType, metadata) {
-    if (entityType === void 0) { entityType = {}; }
-    return getAttributesTreeFromAttributes(attributeTypes, metadata).map(function (attrNode) {
-        var entityTypeUri = isSpecialAttribute(attrNode) ? null : entityType.uri;
-        return createAttributesConfig(metadata, attrNode, entityTypeUri);
+export var getAttributeSelectorItems = function (attributesTypesGroups, metadata) {
+    return attributesTypesGroups.map(function (_a) {
+        var id = _a.id, title = _a.title, attributeTypes = _a.attributeTypes;
+        var entityType = getEntityType(metadata, getEntityTypeFromAttrTypes(attributeTypes));
+        return {
+            id: id,
+            title: title,
+            attributes: getAttributesTreeFromAttributes(attributeTypes, metadata).map(function (attrNode) {
+                var entityTypeUri = isSpecialAttribute(attrNode) ? null : entityType.uri;
+                return createAttributesConfig(metadata, attrNode, entityTypeUri);
+            })
+        };
     });
 };
 var findAttributeSelectorItem = function (fieldName, attributesGroup) {
     var attrGroup;
-    var findAttribute = function (fieldName, attributesGroup) {
-        for (var _i = 0, attributesGroup_1 = attributesGroup; _i < attributesGroup_1.length; _i++) {
-            var attributeGroup = attributesGroup_1[_i];
-            if (fieldName === attributeGroup.fieldName) {
-                attrGroup = attributeGroup;
-                return;
-            }
-            if ('children' in attributeGroup) {
-                findAttribute(fieldName, attributeGroup.children);
+    var _loop_1 = function (attributesGroupItem) {
+        var findAttribute = function (fieldName, attributesSelectorItems) {
+            for (var _i = 0, attributesSelectorItems_1 = attributesSelectorItems; _i < attributesSelectorItems_1.length; _i++) {
+                var attributeGroup = attributesSelectorItems_1[_i];
+                if (fieldName === attributeGroup.fieldName) {
+                    attrGroup = attributeGroup;
+                    return;
+                }
+                if ('children' in attributeGroup) {
+                    findAttribute(fieldName, attributeGroup.children);
+                }
             }
-        }
+        };
+        findAttribute(fieldName, attributesGroupItem.attributes);
     };
-    findAttribute(fieldName, attributesGroup);
+    for (var _i = 0, attributesGroup_1 = attributesGroup; _i < attributesGroup_1.length; _i++) {
+        var attributesGroupItem = attributesGroup_1[_i];
+        _loop_1(attributesGroupItem);
+    }
     return attrGroup;
 };
 export var findValue = function (options, filter) {
     return options ? options.find(function (option) { return option.value === filter; }) : null;
 };
-export var getRowsDataFromFilters = function (filters, attributesGroup) {
+export var getRowsDataFromFilters = function (filters, attributesGroupArr) {
     return filters.map(function (filter, index) {
         return {
-            attribute: filter.fieldName ? findAttributeSelectorItem(filter.fieldName, attributesGroup) : undefined,
+            attribute: filter.fieldName ? findAttributeSelectorItem(filter.fieldName, attributesGroupArr) : undefined,
             filter: filter.filter,
+            operator: filter.operator,
             id: index,
             values: filter.values
         };
     });
 };
 export var getEntityTypeFromAttrTypes = function (attributeTypes) {
-    var regularAttribute = attributeTypes.find(function (attribute) { return !isSpecialAttribute(attribute); });
+    var regularAttribute = findRegularAttribute(attributeTypes);
     return regularAttribute ? getBaseUri(regularAttribute.uri) : null;
 };

package/esm/components/AttributesFiltersBuilder/types.d.ts

@@ -1,17 +1,18 @@
 import { SearchFilter, TEntityType } from '@reltio/mdm-sdk';
-import { AttributeSelectorItem, FiltersRowData } from '../../types';
+import { AttributeSelectionInfo, AttributeSelectorItemsGroup, FiltersRowData } from '../../types';
 export type FilterOption = {
     value: string;
     label: string;
 };
 export type RowContext = {
-    attributesGroup: AttributeSelectorItem[];
+    attributeSelectorItemsGroups: AttributeSelectorItemsGroup[];
     entityType: TEntityType;
     addNewFilter: (newFilter: SearchFilter) => void;
     addRowAfterIndex: (index: number) => void;
     changeFilter: (newFilter: SearchFilter, id: number) => void;
     duplicateRow: (index: number) => void;
     removeRow: (index: number) => void;
+    onFilterAttributeChange?: (attrSelectInfo: AttributeSelectionInfo) => void;
 };
 export type AttributeFiltersComponentProps = {
     rowData: FiltersRowData;

package/esm/components/AttributesFiltersButton/AttributesFiltersButton.d.ts

@@ -1,17 +1,24 @@
 import React from 'react';
-import { SearchFilter, AttributeType } from '@reltio/mdm-sdk';
+import { SearchFilter } from '@reltio/mdm-sdk';
+import { AttributeSelectionInfo, AttributesFilterComponentsClasses, AttributesTypesGroup } from '../../types';
 type Props = {
+    classes?: AttributesFilterComponentsClasses;
     filters: SearchFilter[];
     onChange: (filters: SearchFilter[]) => void;
-    attributeTypes: AttributeType[];
+    attributesTypesGroups: AttributesTypesGroup[];
     components?: {
         ValuesEditor?: React.ElementType;
         FilterSelector?: React.ElementType;
+        LogicalOperator?: React.ElementType;
     };
     children?: React.ReactNode;
     onTogglePopup?: (open: boolean) => void;
     isFiltersApplied?: boolean;
     dataReltioId?: string;
+    onFilterAttributeChange?: (attrSelectInfo: AttributeSelectionInfo) => void;
+    onClear?: () => void;
+    onCancel?: () => void;
+    onApply?: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ filters: filtersProp, attributeTypes, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ filters: filtersProp, classes, attributesTypesGroups, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId, onFilterAttributeChange, onCancel, onClear, onApply }: Props) => JSX.Element>;
 export default _default;

package/esm/components/AttributesFiltersButton/AttributesFiltersButton.js

@@ -5,12 +5,13 @@ import Button from '@mui/material/Button';
 import FilterIcon from '@mui/icons-material/FilterList';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
+import classNames from 'classnames';
 import { buildFilterQueryString } from '@reltio/mdm-sdk';
 import AttributesFiltersBuilder from '../AttributesFiltersBuilder/AttributesFiltersBuilder';
 import ActionButtons from './ActionButtons/ActionButtons';
 import { useStyles } from './styles';
 var AttributesFiltersButton = function (_a) {
-    var filtersProp = _a.filters, attributeTypes = _a.attributeTypes, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId;
+    var filtersProp = _a.filters, classes = _a.classes, attributesTypesGroups = _a.attributesTypesGroups, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId, onFilterAttributeChange = _a.onFilterAttributeChange, onCancel = _a.onCancel, onClear = _a.onClear, onApply = _a.onApply;
     var styles = useStyles();
     var buttonRef = useRef();
     var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
@@ -30,21 +31,24 @@ var AttributesFiltersButton = function (_a) {
     }, [filtersProp, isOpen]);
     var applyButtonHandler = useCallback(function () {
         onChange(filters);
+        onApply && onApply();
         togglePopup();
-    }, [filters, onChange]);
+    }, [filters, onChange, onApply]);
     var cancelButtonHandler = useCallback(function () {
+        onCancel && onCancel();
         togglePopup();
-    }, []);
+    }, [onCancel]);
     var clearAllButtonHandler = useCallback(function () {
+        onClear && onClear();
         setFilters([]);
-    }, []);
+    }, [onClear]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Button, { "data-reltio-id": dataReltioId, ref: buttonRef, color: buttonColor, classes: {
                 root: styles.triggerButton,
                 textPrimary: styles.changedFiltersIndicator
             }, onClick: togglePopup },
             React.createElement(FilterIcon, { color: buttonColor })),
-        React.createElement(Popover, { open: isOpen, classes: { paper: styles.popupContent }, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
+        React.createElement(Popover, { open: isOpen, classes: { paper: classNames(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'right'
             }, transformOrigin: {
@@ -55,7 +59,7 @@ var AttributesFiltersButton = function (_a) {
                 React.createElement(Typography, { variant: "h6" }, i18n.text('Filter')),
                 React.createElement("div", { className: styles.filtersBuilderWrapper },
                     children,
-                    React.createElement(AttributesFiltersBuilder, { attributeTypes: attributeTypes, filters: filters, onChange: setFilters, components: components })),
+                    React.createElement(AttributesFiltersBuilder, { attributesTypesGroups: attributesTypesGroups, filters: filters, onChange: setFilters, components: components, onFilterAttributeChange: onFilterAttributeChange, classes: classes })),
                 React.createElement(Divider, { className: styles.divider }),
                 React.createElement(ActionButtons, { onApply: applyButtonHandler, onCancel: cancelButtonHandler, onClear: clearAllButtonHandler })))));
 };

package/esm/components/BasicAttributeSelector/styles.js

@@ -2,6 +2,7 @@ import { makeStyles } from '@mui/styles';
 var useStyles = makeStyles({
     selector: {
         minWidth: '200px',
+        width: '100%',
         alignItems: 'stretch',
         background: 'rgba(0,0,0, 0.0267)',
         boxSizing: 'border-box',

package/esm/components/LogicOperator/LogicOperator.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SearchOperator } from '@reltio/mdm-sdk';
+type Props = {
+    className?: string;
+    value: string;
+    onChange: (value: SearchOperator) => void;
+};
+declare const LogicOperator: ({ className, value, onChange }: Props) => JSX.Element;
+export default LogicOperator;

package/esm/components/LogicOperator/LogicOperator.js

@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import classnames from 'classnames';
+import { DropDownEditor } from '@reltio/components';
+import { operatorOptions } from '@reltio/mdm-sdk';
+import i18n from 'ui-i18n';
+import useStyles from './styles';
+var LogicOperator = function (_a) {
+    var className = _a.className, value = _a.value, onChange = _a.onChange;
+    var classes = useStyles();
+    var entries = operatorOptions.map(function (operator) { return (__assign(__assign({}, operator), { label: i18n.text(operator.label) })); });
+    return (React.createElement(DropDownEditor, { className: classnames(classes.dropDown, className), classes: classes, value: value, entries: entries, onChange: onChange }));
+};
+export default LogicOperator;

package/esm/components/LogicOperator/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"select" | "dropDown">;
+export default useStyles;

package/esm/components/LogicOperator/styles.js

@@ -0,0 +1,13 @@
+import { makeStyles } from '@mui/styles';
+var useStyles = makeStyles(function () { return ({
+    select: {
+        padding: '6px 16px 7px'
+    },
+    dropDown: {
+        width: '100px',
+        '&:before': {
+            content: 'none !important'
+        }
+    }
+}); });
+export default useStyles;

package/esm/components/ReltioGridLayout/ReltioGridLayout.d.ts

@@ -1,5 +1,5 @@
 import React, { ElementType } from 'react';
-import { DragOverEvent } from 'react-grid-layout';
+import { ReactGridLayoutProps } from 'react-grid-layout';
 import { ReltioGridLayoutItem } from '@reltio/mdm-sdk';
 import { ReactGridLayoutItem, ReltioGridLayoutOptions } from '../../types';
 type Props<ViewConfig = Record<string, unknown>> = {
@@ -8,10 +8,7 @@ type Props<ViewConfig = Record<string, unknown>> = {
     layoutOptions?: ReltioGridLayoutOptions;
     onLayoutChanged?: (layout: ReltioGridLayoutItem[]) => void;
     onDrop?: (layout: ReltioGridLayoutItem[], layoutItem: ReltioGridLayoutItem, e: Event) => void;
-    onDropDragOver?: (e: DragOverEvent) => {
-        w?: number;
-        h?: number;
-    } | false | undefined;
+    onDropDragOver?: ReactGridLayoutProps['onDropDragOver'];
     onRemove?: (id: string) => void;
     LayoutItem: ElementType;
     draggableHandle?: string;
@@ -22,7 +19,7 @@ type Props<ViewConfig = Record<string, unknown>> = {
         root?: string;
         item?: string;
     };
-    onResize?: (layout: ReactGridLayoutItem[], oldLayoutItem: ReactGridLayoutItem, layoutItem: ReactGridLayoutItem, placeholder: ReactGridLayoutItem) => void;
+    onResize?: ReactGridLayoutProps['onResize'];
 };
 declare const _default: React.MemoExoticComponent<{
     ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, onDropDragOver, isStatic, classes, onResize }: Props<Record<string, unknown>>): JSX.Element;