@reltio/components 1.4.1731 → 1.4.1732

package/cjs/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/cjs/components/AttributesFiltersBuilder/AttributesFiltersBuilder.js

@@ -1,4 +1,15 @@
 "use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -42,30 +53,38 @@ var helpers_1 = require("./helpers");
 var FilterSelector_1 = __importDefault(require("./components/FilterSelector/FilterSelector"));
 var RowActions_1 = __importDefault(require("./components/RowActions/RowActions"));
 var QueryBuilderRowsGroup_1 = __importDefault(require("../QueryBuilderRowsGroup/QueryBuilderRowsGroup"));
+var contexts_1 = require("../../contexts");
+var core_1 = require("../../core");
 var AttributeSelector_1 = __importDefault(require("./components/AttributeSelector/AttributeSelector"));
 var ValuesEditor_1 = __importDefault(require("./components/ValuesEditor/ValuesEditor"));
-var contexts_1 = require("../../contexts");
 var styles_1 = require("./styles");
-var EMPTY_FILTER = { fieldName: null, filter: null, values: [] };
-var Stub = function () { return null; };
+var EMPTY_FILTER = { fieldName: null, filter: null, operator: mdm_sdk_1.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 = (0, styles_1.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 ? core_1.EmptyStub : _d;
+    var styles = (0, styles_1.useStyles)();
     var actualFilters = (0, react_1.useRef)(filters);
     var attributeFilterRef = (0, react_1.useRef)(null);
     var lastAttributesCountRef = (0, react_1.useRef)(null);
     var attributesCountRef = (0, react_1.useRef)(null);
     var metadata = (0, contexts_1.useMdmMetadata)();
-    var entityType = (0, mdm_sdk_1.getEntityType)(metadata, (0, helpers_1.getEntityTypeFromAttrTypes)(attributeTypes));
     actualFilters.current = filters;
     var rowClasses = (0, react_1.useMemo)(function () { return ({
-        attributeSelectorContainer: attrSelector,
-        filterSelectorContainer: filterSelector,
-        actionsContainer: actionContainer
-    }); }, [attrSelector, filterSelector, actionContainer]);
-    var attributeSelectorItems = (0, react_1.useMemo)(function () { return (0, helpers_1.getAttributeSelectorItems)(attributeTypes, entityType, metadata); }, [attributeTypes, metadata, entityType]);
-    var rowsData = (0, react_1.useMemo)(function () { return (filters.length ? (0, helpers_1.getRowsDataFromFilters)(filters, attributeSelectorItems) : []); }, [attributeSelectorItems, filters]);
+        attributeSelectorContainer: classes.attributeSelectorContainer || styles.attrSelector,
+        valuesEditorContainer: classes.valuesEditorContainer || '',
+        filterSelectorContainer: styles.filterSelector,
+        actionsContainer: styles.actionContainer
+    }); }, [classes, styles]);
+    var currentEntityType = (0, react_1.useMemo)(function () {
+        var entityTypesUris = attributesTypesGroups.map(function (_a) {
+            var attributeTypes = _a.attributeTypes;
+            return (0, helpers_1.getEntityTypeFromAttrTypes)(attributeTypes);
+        });
+        var closestEntityTypeAncestorUri = (0, mdm_sdk_1.findClosestCommonAncestor)(metadata, entityTypesUris);
+        return (0, mdm_sdk_1.getEntityType)(metadata, closestEntityTypeAncestorUri);
+    }, [attributesTypesGroups, metadata]);
+    var attributeSelectorItemsGroups = (0, react_1.useMemo)(function () { return (0, helpers_1.getAttributeSelectorItems)(attributesTypesGroups, metadata); }, [attributesTypesGroups, metadata]);
+    var rowsData = (0, react_1.useMemo)(function () { return (filters.length ? (0, helpers_1.getRowsDataFromFilters)(filters, attributeSelectorItemsGroups) : []); }, [attributeSelectorItemsGroups, filters]);
     attributesCountRef.current = rowsData.length;
     (0, react_1.useEffect)(function () {
         if (attributeFilterRef.current && lastAttributesCountRef.current !== attributesCountRef.current) {
@@ -91,11 +110,7 @@ var AttributesFiltersBuilder = function (_a) {
     }, [onChange]);
     var duplicateRow = (0, react_1.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 = (0, react_1.useCallback)(function (newFilter, id) {
@@ -108,6 +123,6 @@ var AttributesFiltersBuilder = function (_a) {
     var addNewFilter = (0, react_1.useCallback)(function (newFilter) {
         onChange(__spreadArray(__spreadArray([], actualFilters.current, true), [newFilter], false));
     }, [onChange]);
-    return (react_1.default.createElement(QueryBuilderRowsGroup_1.default, { rowClasses: rowClasses, rowsData: rowsData, AttributeSelectorComponent: AttributeSelector_1.default, FilterSelectorComponent: CustomFilterSelector || FilterSelector_1.default, ValuesEditorComponent: CustomValuesEditor || ValuesEditor_1.default, ActionsComponent: RowActions_1.default, 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_1.default.createElement(QueryBuilderRowsGroup_1.default, { rowClasses: rowClasses, rowsData: rowsData, AttributeSelectorComponent: AttributeSelector_1.default, FilterSelectorComponent: CustomFilterSelector || FilterSelector_1.default, ValuesEditorComponent: CustomValuesEditor || ValuesEditor_1.default, ActionsComponent: RowActions_1.default, 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 }));
 };
 exports.default = (0, react_1.memo)(AttributesFiltersBuilder);

package/cjs/components/AttributesFiltersBuilder/components/AttributeSelector/AttributeSelector.js

@@ -31,15 +31,15 @@ var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var BasicAttributeSelector_1 = __importDefault(require("../../../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 = (0, react_1.useCallback)(function (data) { return (0, mdm_sdk_1.getSearchGroupAttributeLabel)({ data: data }); }, []);
-    var itemsGroup = (0, react_1.useMemo)(function () { return [{ id: '', title: '', attributes: attributesGroup }]; }, [attributesGroup]);
     var changeAttribute = (0, react_1.useCallback)(function (selectInfo) {
         if (rowData) {
             var newFilter = {
                 fieldName: selectInfo.attribute.fieldName,
                 filter: filter,
+                operator: operator,
                 values: []
             };
             changeFilter(newFilter, id);
@@ -48,10 +48,12 @@ var AttributeSelector = function (_a) {
             addNewFilter({
                 fieldName: selectInfo.attribute.fieldName,
                 filter: null,
+                operator: mdm_sdk_1.SearchOperator.and,
                 values: []
             });
         }
-    }, [addNewFilter, changeFilter, id, rowData, filter]);
-    return (react_1.default.createElement(BasicAttributeSelector_1.default, { 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_1.default.createElement(BasicAttributeSelector_1.default, { itemsGroups: attributeSelectorItemsGroups, ungroup: attributeSelectorItemsGroups.length < 2, single: true, value: attribute, getLabel: getSelectedAttributeLabel, onSelect: changeAttribute, onOpenPopup: attributeSelectorProps.onOpen }));
 };
 exports.default = (0, react_1.memo)(AttributeSelector);

package/cjs/components/AttributesFiltersBuilder/components/FilterSelector/FilterSelector.js

@@ -38,7 +38,7 @@ var FilterSelector = function (_a) {
     var _b;
     var rowData = _a.rowData, rowContext = _a.rowContext, textFieldInputRef = _a.textFieldInputRef, optionsProp = _a.options;
     var styles = (0, styles_1.default)();
-    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 &&
@@ -48,10 +48,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]);
     (0, react_1.useEffect)(function () {
         if ((fieldName && !filter) || (fieldName && !(0, helpers_1.findValue)(options, filter))) {
             onChangeFilter(options[0]);

package/cjs/components/AttributesFiltersBuilder/components/ValuesEditor/ValuesEditor.js

@@ -35,14 +35,15 @@ var ValuesEditor = function (_a) {
     var styles = (0, styles_1.useStyles)();
     var canFilterAcceptValues = (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && (0, mdm_sdk_1.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 && (0, mdm_sdk_1.getAttrDataTypeDefinition)(attrType);
     var filterValueDataTypeDefinition = valueDataTypeDefinition && (0, mdm_sdk_1.getDataTypeDefinitionForFilterValue)(valueDataTypeDefinition, filter);
     var editorFilter = (0, react_1.useMemo)(function () { return ({
         filter: filter,
         fieldName: fieldName,
+        operator: operator,
         values: values || []
-    }); }, [filter, fieldName, values]);
+    }); }, [filter, fieldName, operator, values]);
     var TextFieldProps = (0, react_1.useMemo)(function () { return ({
         InputProps: {
             classes: {
@@ -55,10 +56,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_1.default.createElement("div", { className: styles.valuesEditor }, (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && canFilterAcceptValues && (react_1.default.createElement(FilterValueEditor_1.default, { "data-reltio-id": "filter-value-editor", filter: editorFilter, onChange: changeValue, dataTypeDefinition: filterValueDataTypeDefinition, fullWidth: true, TextFieldProps: TextFieldProps, color: "primary", classes: editorClasses, orientation: "horizontal" }))));
 };
 exports.default = (0, react_1.memo)(ValuesEditor);

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

@@ -20,7 +20,7 @@ exports.useStyles = (0, styles_1.makeStyles)({
     valuesEditor: {
         display: 'flex',
         alignItems: 'center',
-        width: '222px!important',
+        width: '100%',
         minHeight: '40px',
         flexShrink: 0
     }

package/cjs/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/cjs/components/AttributesFiltersBuilder/helpers.js

@@ -51,40 +51,54 @@ var createAttributesConfig = function (metadata, attrNode, entityTypeUri, parent
     }
     return resConfig;
 };
-var getAttributeSelectorItems = function (attributeTypes, entityType, metadata) {
-    if (entityType === void 0) { entityType = {}; }
-    return (0, mdm_sdk_1.getAttributesTreeFromAttributes)(attributeTypes, metadata).map(function (attrNode) {
-        var entityTypeUri = (0, mdm_sdk_1.isSpecialAttribute)(attrNode) ? null : entityType.uri;
-        return createAttributesConfig(metadata, attrNode, entityTypeUri);
+var getAttributeSelectorItems = function (attributesTypesGroups, metadata) {
+    return attributesTypesGroups.map(function (_a) {
+        var id = _a.id, title = _a.title, attributeTypes = _a.attributeTypes;
+        var entityType = (0, mdm_sdk_1.getEntityType)(metadata, (0, exports.getEntityTypeFromAttrTypes)(attributeTypes));
+        return {
+            id: id,
+            title: title,
+            attributes: (0, mdm_sdk_1.getAttributesTreeFromAttributes)(attributeTypes, metadata).map(function (attrNode) {
+                var entityTypeUri = (0, mdm_sdk_1.isSpecialAttribute)(attrNode) ? null : entityType.uri;
+                return createAttributesConfig(metadata, attrNode, entityTypeUri);
+            })
+        };
     });
 };
 exports.getAttributeSelectorItems = getAttributeSelectorItems;
 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;
 };
 var findValue = function (options, filter) {
     return options ? options.find(function (option) { return option.value === filter; }) : null;
 };
 exports.findValue = findValue;
-var getRowsDataFromFilters = function (filters, attributesGroup) {
+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
         };
@@ -92,7 +106,7 @@ var getRowsDataFromFilters = function (filters, attributesGroup) {
 };
 exports.getRowsDataFromFilters = getRowsDataFromFilters;
 var getEntityTypeFromAttrTypes = function (attributeTypes) {
-    var regularAttribute = attributeTypes.find(function (attribute) { return !(0, mdm_sdk_1.isSpecialAttribute)(attribute); });
+    var regularAttribute = (0, mdm_sdk_1.findRegularAttribute)(attributeTypes);
     return regularAttribute ? (0, mdm_sdk_1.getBaseUri)(regularAttribute.uri) : null;
 };
 exports.getEntityTypeFromAttrTypes = getEntityTypeFromAttrTypes;

package/cjs/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/cjs/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/cjs/components/AttributesFiltersButton/AttributesFiltersButton.js

@@ -33,12 +33,13 @@ var Button_1 = __importDefault(require("@mui/material/Button"));
 var FilterList_1 = __importDefault(require("@mui/icons-material/FilterList"));
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var Divider_1 = __importDefault(require("@mui/material/Divider"));
+var classnames_1 = __importDefault(require("classnames"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var AttributesFiltersBuilder_1 = __importDefault(require("../AttributesFiltersBuilder/AttributesFiltersBuilder"));
 var ActionButtons_1 = __importDefault(require("./ActionButtons/ActionButtons"));
 var styles_1 = require("./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 = (0, styles_1.useStyles)();
     var buttonRef = (0, react_1.useRef)();
     var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
@@ -58,21 +59,24 @@ var AttributesFiltersButton = function (_a) {
     }, [filtersProp, isOpen]);
     var applyButtonHandler = (0, react_1.useCallback)(function () {
         onChange(filters);
+        onApply && onApply();
         togglePopup();
-    }, [filters, onChange]);
+    }, [filters, onChange, onApply]);
     var cancelButtonHandler = (0, react_1.useCallback)(function () {
+        onCancel && onCancel();
         togglePopup();
-    }, []);
+    }, [onCancel]);
     var clearAllButtonHandler = (0, react_1.useCallback)(function () {
+        onClear && onClear();
         setFilters([]);
-    }, []);
+    }, [onClear]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Button_1.default, { "data-reltio-id": dataReltioId, ref: buttonRef, color: buttonColor, classes: {
                 root: styles.triggerButton,
                 textPrimary: styles.changedFiltersIndicator
             }, onClick: togglePopup },
             react_1.default.createElement(FilterList_1.default, { color: buttonColor })),
-        react_1.default.createElement(Popover_1.default, { open: isOpen, classes: { paper: styles.popupContent }, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
+        react_1.default.createElement(Popover_1.default, { open: isOpen, classes: { paper: (0, classnames_1.default)(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'right'
             }, transformOrigin: {
@@ -83,7 +87,7 @@ var AttributesFiltersButton = function (_a) {
                 react_1.default.createElement(Typography_1.default, { variant: "h6" }, ui_i18n_1.default.text('Filter')),
                 react_1.default.createElement("div", { className: styles.filtersBuilderWrapper },
                     children,
-                    react_1.default.createElement(AttributesFiltersBuilder_1.default, { attributeTypes: attributeTypes, filters: filters, onChange: setFilters, components: components })),
+                    react_1.default.createElement(AttributesFiltersBuilder_1.default, { attributesTypesGroups: attributesTypesGroups, filters: filters, onChange: setFilters, components: components, onFilterAttributeChange: onFilterAttributeChange, classes: classes })),
                 react_1.default.createElement(Divider_1.default, { className: styles.divider }),
                 react_1.default.createElement(ActionButtons_1.default, { onApply: applyButtonHandler, onCancel: cancelButtonHandler, onClear: clearAllButtonHandler })))));
 };

package/cjs/components/BasicAttributeSelector/styles.js

@@ -4,6 +4,7 @@ var styles_1 = require("@mui/styles");
 var useStyles = (0, styles_1.makeStyles)({
     selector: {
         minWidth: '200px',
+        width: '100%',
         alignItems: 'stretch',
         background: 'rgba(0,0,0, 0.0267)',
         boxSizing: 'border-box',

package/cjs/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/cjs/components/LogicOperator/LogicOperator.js

@@ -0,0 +1,29 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var components_1 = require("@reltio/components");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var styles_1 = __importDefault(require("./styles"));
+var LogicOperator = function (_a) {
+    var className = _a.className, value = _a.value, onChange = _a.onChange;
+    var classes = (0, styles_1.default)();
+    var entries = mdm_sdk_1.operatorOptions.map(function (operator) { return (__assign(__assign({}, operator), { label: ui_i18n_1.default.text(operator.label) })); });
+    return (react_1.default.createElement(components_1.DropDownEditor, { className: (0, classnames_1.default)(classes.dropDown, className), classes: classes, value: value, entries: entries, onChange: onChange }));
+};
+exports.default = LogicOperator;

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

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

package/cjs/components/LogicOperator/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@mui/styles");
+var useStyles = (0, styles_1.makeStyles)(function () { return ({
+    select: {
+        padding: '6px 16px 7px'
+    },
+    dropDown: {
+        width: '100px',
+        '&:before': {
+            content: 'none !important'
+        }
+    }
+}); });
+exports.default = useStyles;

package/cjs/components/index.d.ts

@@ -155,3 +155,4 @@ export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuI
 export { default as TenantLabel } from './TenantLabel/TenantLabel';
 export { default as StepNavigation } from './StepNavigation/StepNavigation';
 export { TableSkeleton } from './TableSkeleton/TableSkeleton';
+export { default as LogicOperator } from './LogicOperator/LogicOperator';

package/cjs/components/index.js

@@ -20,7 +20,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.MenuList = exports.LoadMoreButton = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ScreenProfileBand = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.EditableImageAttributesLine = exports.ImageAttributesLine = exports.ReadOnlyAttributesList = exports.ReadOnlyAttributeValuesBlock = exports.EditableAttribute = exports.ReadOnlyAttribute = exports.CardinalityMessage = exports.AttributesPager = exports.SimpleAttributeEditor = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.NestedAttributeEditor = exports.MoreAttributesButton = exports.EntitySelector = exports.EntityCreator = exports.AttributesList = exports.BranchDecorator = exports.DescriptionIcon = exports.AttributesView = exports.AttributeListItem = void 0;
 exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.ReactSortableTreeUtils = exports.ReactSortableTreeHandlers = exports.ReactSortableTree = exports.ReactSelectOptionFilters = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBlock = exports.MatchRuleVariant = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportModes = exports.ImportButton = exports.ImageGalleryDialog = exports.Highlighter = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.FlipCard = exports.FacetViewHeader = exports.ExternalInvalidRelations = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.AttributesErrorsPanel = exports.ErrorBoundary = exports.EntityUriLink = exports.RelationTypesSelector = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = void 0;
 exports.RequiredMark = exports.HierarchyNodeTitle = exports.DataTenantBadge = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.DragAndDrop = exports.ConnectionEditor = exports.AttributesFiltersBuilder = exports.AttributesFiltersButton = exports.AttributeGroupIcon = exports.BasicAttributeSelector = exports.ProfilesList = exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.ColoredSourceIcon = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = void 0;
-exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.MultilineMenuItem = exports.RelevanceScoreBadge = void 0;
+exports.LogicOperator = exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.MultilineMenuItem = exports.RelevanceScoreBadge = void 0;
 __exportStar(require("./activityLog"), exports);
 var AttributeListItem_1 = require("./AttributeListItem/AttributeListItem");
 Object.defineProperty(exports, "AttributeListItem", { enumerable: true, get: function () { return __importDefault(AttributeListItem_1).default; } });
@@ -333,3 +333,5 @@ var StepNavigation_1 = require("./StepNavigation/StepNavigation");
 Object.defineProperty(exports, "StepNavigation", { enumerable: true, get: function () { return __importDefault(StepNavigation_1).default; } });
 var TableSkeleton_1 = require("./TableSkeleton/TableSkeleton");
 Object.defineProperty(exports, "TableSkeleton", { enumerable: true, get: function () { return TableSkeleton_1.TableSkeleton; } });
+var LogicOperator_1 = require("./LogicOperator/LogicOperator");
+Object.defineProperty(exports, "LogicOperator", { enumerable: true, get: function () { return __importDefault(LogicOperator_1).default; } });

package/cjs/types/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AttributeType, SearchFilter } from '@reltio/mdm-sdk';
+import { AttributeType, SearchFilter, SearchOperator } from '@reltio/mdm-sdk';
 export type ReactGridLayoutItem = {
     i: string;
     x: number;
@@ -46,6 +46,7 @@ export type FiltersRowData = {
     filter: string;
     id: number;
     values: SearchFilter['values'];
+    operator?: SearchOperator;
 };
 export type AttributeSelectorItem = {
     attrType?: AttributeType;
@@ -62,6 +63,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 +143,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/index.d.ts

@@ -155,3 +155,4 @@ export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuI
 export { default as TenantLabel } from './TenantLabel/TenantLabel';
 export { default as StepNavigation } from './StepNavigation/StepNavigation';
 export { TableSkeleton } from './TableSkeleton/TableSkeleton';
+export { default as LogicOperator } from './LogicOperator/LogicOperator';

package/esm/components/index.js

@@ -155,3 +155,4 @@ export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuI
 export { default as TenantLabel } from './TenantLabel/TenantLabel';
 export { default as StepNavigation } from './StepNavigation/StepNavigation';
 export { TableSkeleton } from './TableSkeleton/TableSkeleton';
+export { default as LogicOperator } from './LogicOperator/LogicOperator';

package/esm/types/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AttributeType, SearchFilter } from '@reltio/mdm-sdk';
+import { AttributeType, SearchFilter, SearchOperator } from '@reltio/mdm-sdk';
 export type ReactGridLayoutItem = {
     i: string;
     x: number;
@@ -46,6 +46,7 @@ export type FiltersRowData = {
     filter: string;
     id: number;
     values: SearchFilter['values'];
+    operator?: SearchOperator;
 };
 export type AttributeSelectorItem = {
     attrType?: AttributeType;
@@ -62,6 +63,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 +143,10 @@ export type AnyAction = {
     type: string;
     [key: string]: any;
 };
+export type AttributesFilterComponentsClasses = {
+    attributeSelectorContainer?: string;
+    valuesEditorContainer?: string;
+    filterSelectorContainer?: string;
+    actionsContainer?: string;
+    filterPopup?: string;
+};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1731",
+  "version": "1.4.1732",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-sdk": "^1.4.1716",
+    "@reltio/mdm-sdk": "^1.4.1717",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",