@reltio/components 1.4.1731 → 1.4.1733

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/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;

package/cjs/components/ReltioGridLayout/ReltioGridLayout.js

@@ -54,6 +54,7 @@ var ReltioGridLayout = function (_a) {
     var _b;
     var views = _a.views, layout = _a.layout, _c = _a.layoutOptions, layoutOptions = _c === void 0 ? DEFAULT_LAYOUT_OPTIONS : _c, _d = _a.onLayoutChanged, onLayoutChanged = _d === void 0 ? core_1.noop : _d, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, onDropDragOver = _a.onDropDragOver, isStatic = _a.isStatic, classes = _a.classes, _e = _a.onResize, onResize = _e === void 0 ? core_1.noop : _e;
     var ref = (0, react_1.useRef)();
+    var shouldCompareLayout = (0, react_1.useRef)(false);
     var heightsMap = (0, react_1.useRef)({});
     var styles = (0, styles_1.useStyles)();
     var _f = (0, react_1.useState)(null), resizingItemId = _f[0], setResizingItemId = _f[1];
@@ -61,7 +62,8 @@ var ReltioGridLayout = function (_a) {
     var _h = (0, react_1.useState)(0), width = _h[0], setWidth = _h[1];
     var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
     var processedLayout = (0, react_1.useMemo)(function () { return (0, helpers_1.reltioLayoutToReactGridLayout)(layout); }, [layout]);
-    var onReltioLayoutChanged = (0, ramda_1.pipe)(helpers_1.reactGridLayoutToReltioLayout, (0, helpers_1.copyPropsFromPreviousLayout)(['autosizing'], layout), (0, ramda_1.ifElse)((0, ramda_1.always)(isStatic), (0, helpers_1.alignGroupedItemsHeights)(heightsMap.current), (0, helpers_1.calcLayoutItemsHeight)(heightsMap.current)), onLayoutChanged);
+    var convertReactLayoutToReltioLayout = (0, ramda_1.pipe)(helpers_1.reactGridLayoutToReltioLayout, (0, helpers_1.copyPropsFromPreviousLayout)(['autosizing'], layout), (0, ramda_1.ifElse)((0, ramda_1.always)(isStatic), (0, helpers_1.alignGroupedItemsHeights)(heightsMap.current), (0, helpers_1.calcLayoutItemsHeight)(heightsMap.current)));
+    var onReltioLayoutChanged = (0, ramda_1.pipe)(convertReactLayoutToReltioLayout, onLayoutChanged);
     var handleDrop = function (layout, layoutItem, e) {
         if (onDrop && layoutItem) {
             onDrop((0, helpers_1.reactGridLayoutToReltioLayout)(layout), (0, helpers_1.reactGridLayoutItemToReltioLayoutItem)(layoutItem), e);
@@ -74,10 +76,26 @@ var ReltioGridLayout = function (_a) {
                 var newHeight = (0, helpers_1.calcHeight)(height, layoutOptions);
                 if (newHeight !== heightsMap.current[layoutItemId]) {
                     heightsMap.current[layoutItemId] = newHeight;
+                    shouldCompareLayout.current = false;
                     onReltioLayoutChanged(processedLayout);
                 }
             }
         } })); };
+    (0, react_1.useEffect)(function () {
+        if (isStatic) {
+            if (shouldCompareLayout.current) {
+                var expectedLayout = convertReactLayoutToReltioLayout(processedLayout);
+                var isSameLayout = (0, ramda_1.equals)((0, helpers_1.reltioLayoutToReactGridLayout)(expectedLayout), processedLayout);
+                if (!isSameLayout) {
+                    shouldCompareLayout.current = false;
+                    onLayoutChanged(expectedLayout);
+                }
+            }
+            else {
+                shouldCompareLayout.current = true;
+            }
+        }
+    }, [processedLayout, isStatic]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
         !!width && (react_1.default.createElement(react_grid_layout_1.default, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: isStatic ? undefined : onReltioLayoutChanged, isResizable: !isStatic && !isFullscreenEnabled, isDraggable: !isStatic && !isFullscreenEnabled, className: (0, classnames_1.default)(classes === null || classes === void 0 ? void 0 : classes.root, styles.gridLayout, (_b = {},

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; } });