@reltio/components 1.4.2149 → 1.4.2151

package/AttributesFiltersBuilder/AttributesFiltersBuilder.js

@@ -31,22 +31,23 @@ import { useMdmMetadata } from '../contexts/MdmModuleContext';
 import { AttributeSelector } from './components/AttributeSelector';
 import { useFilterAutoFocus } from '../hooks/useFilterAutoFocus';
 import { AttributesValuesEditor } from '../AttributesValuesEditor';
-import { useStyles } from './styles';
+import styles from './AttributesFiltersBuilder.module.css';
 var EMPTY_FILTER = { fieldName: null, filter: null, operator: SearchOperator.and, values: [] };
 var AttributesFiltersBuilder = function (_a) {
     var _b = _a.classes, classes = _b === void 0 ? {} : _b, attributesTypesGroups = _a.attributesTypesGroups, attributesTypesGroupFilter = _a.attributesTypesGroupFilter, filters = _a.filters, onChange = _a.onChange, _c = _a.components, components = _c === void 0 ? {} : _c, onFilterAttributeChange = _a.onFilterAttributeChange;
     var _d = components, CustomValuesEditor = _d.ValuesEditor, CustomFilterSelector = _d.FilterSelector, _e = _d.LogicalOperator, LogicalOperator = _e === void 0 ? EmptyStub : _e;
-    var styles = useStyles();
     var actualFilters = useRef(filters);
     var attributesCountRef = useRef(null);
     var metadata = useMdmMetadata();
     actualFilters.current = filters;
     var rowClasses = useMemo(function () { return ({
+        root: styles.root,
         attributeSelectorContainer: classes.attributeSelectorContainer || styles.attrSelector,
         valuesEditorContainer: classes.valuesEditorContainer || '',
         filterSelectorContainer: styles.filterSelector,
-        actionsContainer: styles.actionContainer
-    }); }, [classes, styles]);
+        actionsContainer: styles.actionContainer,
+        rowActions: styles.rowActions
+    }); }, [classes]);
     var currentEntityType = useMemo(function () {
         var entityTypesUris = attributesTypesGroups.map(function (_a) {
             var attributeTypes = _a.attributeTypes;

package/AttributesFiltersBuilder/AttributesFiltersBuilder.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"AttributesFiltersBuilder-root--u1-JO","rowActions":"AttributesFiltersBuilder-rowActions---qhXB","attrSelector":"AttributesFiltersBuilder-attrSelector--QhzaV","filterSelector":"AttributesFiltersBuilder-filterSelector--vLHRP","actionContainer":"AttributesFiltersBuilder-actionContainer--mEAev"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.AttributesFiltersBuilder-root--u1-JO:hover .AttributesFiltersBuilder-rowActions---qhXB{opacity:1;visibility:visible}.AttributesFiltersBuilder-attrSelector--QhzaV{flex-shrink:0;height:40px;width:222px}.AttributesFiltersBuilder-filterSelector--vLHRP{flex-shrink:0;margin-bottom:0;margin-top:0;width:180px}.AttributesFiltersBuilder-actionContainer--mEAev{align-items:center;margin-right:15px}.AttributesFiltersBuilder-rowActions---qhXB{opacity:0;transition:opacity .3s,visibility .3s;visibility:hidden}`;
+    head.appendChild(style);
+}
+export default styles;

package/AttributesFiltersBuilder/AttributesFiltersBuilder.test.js

@@ -100,7 +100,7 @@ describe('Attributes filters builder tests', function () {
         return __assign({ user: user }, render(React.createElement(AttributesFiltersBuilder, __assign({}, defaultProps, props)), { wrapper: Providers }));
     };
     it('should render default state correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var user;
+        var user, actionButtons, attributeSelector;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -108,10 +108,13 @@ describe('Attributes filters builder tests', function () {
                     expect(screen.getByText('Select attribute')).toBeInTheDocument();
                     expect(screen.getByText('Equals')).toBeInTheDocument();
                     expect(screen.getByRole('combobox')).toBeDisabled();
-                    expect(screen.queryByRole('button', { name: 'Add' })).not.toBeInTheDocument();
-                    expect(screen.queryByRole('button', { name: 'Duplicate' })).not.toBeInTheDocument();
-                    expect(screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument();
-                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    actionButtons = screen.getAllByTestId('query-builder-row-actions');
+                    expect(actionButtons).toHaveLength(1);
+                    expect(within(actionButtons[0]).getByTestId('query-builder-row-actions-add')).toBeInTheDocument();
+                    expect(within(actionButtons[0]).queryByTestId('query-builder-row-actions-duplicate')).not.toBeInTheDocument();
+                    expect(within(actionButtons[0]).getByTestId('query-builder-row-actions-delete')).toBeInTheDocument();
+                    attributeSelector = screen.getByTestId('attribute-selector');
+                    return [4 /*yield*/, user.click(within(attributeSelector).getByRole('button'))];
                 case 1:
                     _a.sent();
                     expect(screen.getByRole('presentation')).toBeInTheDocument();
@@ -142,7 +145,7 @@ describe('Attributes filters builder tests', function () {
         });
     }); });
     it('should render attribute groups correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var expectedAttributes, user, items;
+        var expectedAttributes, user, attributeSelector, items;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -160,7 +163,8 @@ describe('Attributes filters builder tests', function () {
                         'Affiliated Type'
                     ];
                     user = setUp({ filters: [] }).user;
-                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    attributeSelector = screen.getByTestId('attribute-selector');
+                    return [4 /*yield*/, user.click(within(attributeSelector).getByRole('button'))];
                 case 1:
                     _a.sent();
                     items = screen.getAllByRole('menuitem');
@@ -215,12 +219,13 @@ describe('Attributes filters builder tests', function () {
         });
     }); });
     it('should call onChange with correct fieldName for simple attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var user;
+        var user, attributeSelector;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     user = setUp({ filters: [] }).user;
-                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    attributeSelector = screen.getByTestId('attribute-selector');
+                    return [4 /*yield*/, user.click(within(attributeSelector).getByRole('button'))];
                 case 1:
                     _a.sent();
                     return [4 /*yield*/, user.click(screen.getByRole('menuitem', { name: 'Int' }))];
@@ -256,12 +261,13 @@ describe('Attributes filters builder tests', function () {
         });
     }); });
     it('should call onChange with correct fieldName for nested attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var user;
+        var user, attributeSelector;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     user = setUp({ filters: [] }).user;
-                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    attributeSelector = screen.getByTestId('attribute-selector');
+                    return [4 /*yield*/, user.click(within(attributeSelector).getByRole('button'))];
                 case 1:
                     _a.sent();
                     return [4 /*yield*/, user.click(screen.getByRole('menuitem', { name: 'Date Level 2' }))];
@@ -275,12 +281,13 @@ describe('Attributes filters builder tests', function () {
         });
     }); });
     it('should call onChange with correct fieldName for reference attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var user;
+        var user, attributeSelector;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     user = setUp({ filters: [] }).user;
-                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                    attributeSelector = screen.getByTestId('attribute-selector');
+                    return [4 /*yield*/, user.click(within(attributeSelector).getByRole('button'))];
                 case 1:
                     _a.sent();
                     return [4 /*yield*/, user.click(screen.getByRole('menuitem', { name: 'Affiliated Type' }))];

package/AttributesFiltersBuilder/components/RowActions/RowActions.js

@@ -20,8 +20,8 @@ var RowActions = function (_a) {
         removeRow(index);
     }, [index, removeRow]);
     return (React.createElement("div", { className: styles.actions },
-        React.createElement(SmallIconButtonWithTooltip, { tooltipTitle: i18n.text('Add'), icon: AddCircleIcon, size: "M", onClick: onAddRowAfterId }),
-        attribute && (React.createElement(SmallIconButtonWithTooltip, { tooltipTitle: i18n.text('Duplicate'), icon: DuplicateIcon, size: "M", onClick: onRowDuplicate })),
-        React.createElement(SmallIconButtonWithTooltip, { tooltipTitle: i18n.text('Delete'), icon: CloseIcon, size: "M", onClick: onRowDelete })));
+        React.createElement(SmallIconButtonWithTooltip, { "data-reltio-id": "query-builder-row-actions-add", tooltipTitle: i18n.text('Add'), icon: AddCircleIcon, size: "M", onClick: onAddRowAfterId }),
+        attribute && (React.createElement(SmallIconButtonWithTooltip, { "data-reltio-id": "query-builder-row-actions-duplicate", tooltipTitle: i18n.text('Duplicate'), icon: DuplicateIcon, size: "M", onClick: onRowDuplicate })),
+        React.createElement(SmallIconButtonWithTooltip, { "data-reltio-id": "query-builder-row-actions-delete", tooltipTitle: i18n.text('Delete'), icon: CloseIcon, size: "M", onClick: onRowDelete })));
 };
 export default memo(RowActions);

package/QueryBuilderRow/QueryBuilderRow.d.ts

@@ -12,6 +12,7 @@ export type Props<T, U extends Record<string, unknown>> = {
         filterSelectorContainer?: string;
         valuesEditorContainer?: string;
         actionsContainer?: string;
+        rowActions?: string;
     };
     rowData: T;
     previousRowData: T;

package/QueryBuilderRow/QueryBuilderRow.js

@@ -13,11 +13,10 @@ import React, { memo } from 'react';
 import classnames from 'classnames';
 import { ReadOnlyLogicOperator } from './components/ReadOnlyLogicOperator';
 import { ReadOnlyFilter } from './components/ReadOnlyFilter';
-import { useStyles } from './styles';
+import styles from './QueryBuilderRow.module.css';
 var QueryBuilderRow = function (_a) {
     var _b;
     var _c = _a.classes, classes = _c === void 0 ? {} : _c, rowData = _a.rowData, previousRowData = _a.previousRowData, _d = _a.LogicOperatorComponent, LogicOperatorComponent = _d === void 0 ? ReadOnlyLogicOperator : _d, AttributeSelectorComponent = _a.AttributeSelectorComponent, _e = _a.FilterSelectorComponent, FilterSelectorComponent = _e === void 0 ? ReadOnlyFilter : _e, ValuesEditorComponent = _a.ValuesEditorComponent, ActionsComponent = _a.ActionsComponent, filterSelectorRef = _a.filterSelectorRef, _f = _a.attributeSelectorProps, attributeSelectorProps = _f === void 0 ? {} : _f, rowContext = __rest(_a, ["classes", "rowData", "previousRowData", "LogicOperatorComponent", "AttributeSelectorComponent", "FilterSelectorComponent", "ValuesEditorComponent", "ActionsComponent", "filterSelectorRef", "attributeSelectorProps"]);
-    var styles = useStyles();
     return (React.createElement("div", { className: classnames(styles.row, classes.root), "data-reltio-id": "query-builder-row" },
         React.createElement(LogicOperatorComponent, { className: classes.logicOperatorContainer, rowContext: rowContext, rowData: previousRowData }),
         React.createElement("div", { className: classnames(styles.rowItem, classes.attributeSelectorContainer), "data-reltio-id": "query-builder-row-attribute-selector" },
@@ -26,7 +25,9 @@ var QueryBuilderRow = function (_a) {
             React.createElement(FilterSelectorComponent, { textFieldInputRef: filterSelectorRef, rowContext: rowContext, rowData: rowData })),
         React.createElement("div", { className: classnames(styles.rowItem, styles.fullWidth, classes.valuesEditorContainer), "data-reltio-id": "query-builder-row-values-editor" },
             React.createElement(ValuesEditorComponent, { rowContext: rowContext, rowData: rowData })),
-        React.createElement("div", { className: classnames(styles.rowItem, classes.actionsContainer, (_b = {}, _b[styles.hidden] = !rowData, _b)), "data-reltio-id": "query-builder-row-actions" },
+        React.createElement("div", { className: classnames(styles.rowItem, classes.actionsContainer, classes.rowActions, (_b = {},
+                _b[styles.hidden] = !rowData,
+                _b)), "data-reltio-id": "query-builder-row-actions" },
             React.createElement(ActionsComponent, { rowContext: rowContext, rowData: rowData }))));
 };
 export default memo(QueryBuilderRow);

package/QueryBuilderRow/QueryBuilderRow.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"row":"QueryBuilderRow-row--lJJMo","rowItem":"QueryBuilderRow-rowItem--SVEaJ","fullWidth":"QueryBuilderRow-fullWidth--p9CT8","hidden":"QueryBuilderRow-hidden--MDfe-"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.QueryBuilderRow-row--lJJMo{display:flex;margin-bottom:12px}.QueryBuilderRow-rowItem--SVEaJ{display:flex;padding-right:10px}.QueryBuilderRow-fullWidth--p9CT8{flex-basis:0;flex-grow:1;overflow:hidden}.QueryBuilderRow-hidden--MDfe-{visibility:hidden!important}`;
+    head.appendChild(style);
+}
+export default styles;

package/cjs/AttributesFiltersBuilder/AttributesFiltersBuilder.js

@@ -42,6 +42,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ramda_1 = require("ramda");
@@ -56,22 +59,23 @@ var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
 var AttributeSelector_1 = require("./components/AttributeSelector");
 var useFilterAutoFocus_1 = require("../hooks/useFilterAutoFocus");
 var AttributesValuesEditor_1 = require("../AttributesValuesEditor");
-var styles_1 = require("./styles");
+var AttributesFiltersBuilder_module_css_1 = __importDefault(require("./AttributesFiltersBuilder.module.css"));
 var EMPTY_FILTER = { fieldName: null, filter: null, operator: mdm_sdk_1.SearchOperator.and, values: [] };
 var AttributesFiltersBuilder = function (_a) {
     var _b = _a.classes, classes = _b === void 0 ? {} : _b, attributesTypesGroups = _a.attributesTypesGroups, attributesTypesGroupFilter = _a.attributesTypesGroupFilter, filters = _a.filters, onChange = _a.onChange, _c = _a.components, components = _c === void 0 ? {} : _c, onFilterAttributeChange = _a.onFilterAttributeChange;
     var _d = components, CustomValuesEditor = _d.ValuesEditor, CustomFilterSelector = _d.FilterSelector, _e = _d.LogicalOperator, LogicalOperator = _e === void 0 ? EmptyStub_1.EmptyStub : _e;
-    var styles = (0, styles_1.useStyles)();
     var actualFilters = (0, react_1.useRef)(filters);
     var attributesCountRef = (0, react_1.useRef)(null);
     var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     actualFilters.current = filters;
     var rowClasses = (0, react_1.useMemo)(function () { return ({
-        attributeSelectorContainer: classes.attributeSelectorContainer || styles.attrSelector,
+        root: AttributesFiltersBuilder_module_css_1.default.root,
+        attributeSelectorContainer: classes.attributeSelectorContainer || AttributesFiltersBuilder_module_css_1.default.attrSelector,
         valuesEditorContainer: classes.valuesEditorContainer || '',
-        filterSelectorContainer: styles.filterSelector,
-        actionsContainer: styles.actionContainer
-    }); }, [classes, styles]);
+        filterSelectorContainer: AttributesFiltersBuilder_module_css_1.default.filterSelector,
+        actionsContainer: AttributesFiltersBuilder_module_css_1.default.actionContainer,
+        rowActions: AttributesFiltersBuilder_module_css_1.default.rowActions
+    }); }, [classes]);
     var currentEntityType = (0, react_1.useMemo)(function () {
         var entityTypesUris = attributesTypesGroups.map(function (_a) {
             var attributeTypes = _a.attributeTypes;

package/cjs/AttributesFiltersBuilder/AttributesFiltersBuilder.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"AttributesFiltersBuilder-root--u1-JO","rowActions":"AttributesFiltersBuilder-rowActions---qhXB","attrSelector":"AttributesFiltersBuilder-attrSelector--QhzaV","filterSelector":"AttributesFiltersBuilder-filterSelector--vLHRP","actionContainer":"AttributesFiltersBuilder-actionContainer--mEAev"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.AttributesFiltersBuilder-root--u1-JO:hover .AttributesFiltersBuilder-rowActions---qhXB{opacity:1;visibility:visible}.AttributesFiltersBuilder-attrSelector--QhzaV{flex-shrink:0;height:40px;width:222px}.AttributesFiltersBuilder-filterSelector--vLHRP{flex-shrink:0;margin-bottom:0;margin-top:0;width:180px}.AttributesFiltersBuilder-actionContainer--mEAev{align-items:center;margin-right:15px}.AttributesFiltersBuilder-rowActions---qhXB{opacity:0;transition:opacity .3s,visibility .3s;visibility:hidden}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/AttributesFiltersBuilder/AttributesFiltersBuilder.test.js

@@ -105,7 +105,7 @@ describe('Attributes filters builder tests', function () {
         return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(AttributesFiltersBuilder_1.AttributesFiltersBuilder, __assign({}, defaultProps, props)), { wrapper: Providers }));
     };
     it('should render default state correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var user;
+        var user, actionButtons, attributeSelector;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -113,10 +113,13 @@ describe('Attributes filters builder tests', function () {
                     expect(react_2.screen.getByText('Select attribute')).toBeInTheDocument();
                     expect(react_2.screen.getByText('Equals')).toBeInTheDocument();
                     expect(react_2.screen.getByRole('combobox')).toBeDisabled();
-                    expect(react_2.screen.queryByRole('button', { name: 'Add' })).not.toBeInTheDocument();
-                    expect(react_2.screen.queryByRole('button', { name: 'Duplicate' })).not.toBeInTheDocument();
-                    expect(react_2.screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument();
-                    return [4 /*yield*/, user.click(react_2.screen.getByRole('button'))];
+                    actionButtons = react_2.screen.getAllByTestId('query-builder-row-actions');
+                    expect(actionButtons).toHaveLength(1);
+                    expect((0, react_2.within)(actionButtons[0]).getByTestId('query-builder-row-actions-add')).toBeInTheDocument();
+                    expect((0, react_2.within)(actionButtons[0]).queryByTestId('query-builder-row-actions-duplicate')).not.toBeInTheDocument();
+                    expect((0, react_2.within)(actionButtons[0]).getByTestId('query-builder-row-actions-delete')).toBeInTheDocument();
+                    attributeSelector = react_2.screen.getByTestId('attribute-selector');
+                    return [4 /*yield*/, user.click((0, react_2.within)(attributeSelector).getByRole('button'))];
                 case 1:
                     _a.sent();
                     expect(react_2.screen.getByRole('presentation')).toBeInTheDocument();
@@ -147,7 +150,7 @@ describe('Attributes filters builder tests', function () {
         });
     }); });
     it('should render attribute groups correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var expectedAttributes, user, items;
+        var expectedAttributes, user, attributeSelector, items;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -165,7 +168,8 @@ describe('Attributes filters builder tests', function () {
                         'Affiliated Type'
                     ];
                     user = setUp({ filters: [] }).user;
-                    return [4 /*yield*/, user.click(react_2.screen.getByRole('button'))];
+                    attributeSelector = react_2.screen.getByTestId('attribute-selector');
+                    return [4 /*yield*/, user.click((0, react_2.within)(attributeSelector).getByRole('button'))];
                 case 1:
                     _a.sent();
                     items = react_2.screen.getAllByRole('menuitem');
@@ -220,12 +224,13 @@ describe('Attributes filters builder tests', function () {
         });
     }); });
     it('should call onChange with correct fieldName for simple attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var user;
+        var user, attributeSelector;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     user = setUp({ filters: [] }).user;
-                    return [4 /*yield*/, user.click(react_2.screen.getByRole('button'))];
+                    attributeSelector = react_2.screen.getByTestId('attribute-selector');
+                    return [4 /*yield*/, user.click((0, react_2.within)(attributeSelector).getByRole('button'))];
                 case 1:
                     _a.sent();
                     return [4 /*yield*/, user.click(react_2.screen.getByRole('menuitem', { name: 'Int' }))];
@@ -261,12 +266,13 @@ describe('Attributes filters builder tests', function () {
         });
     }); });
     it('should call onChange with correct fieldName for nested attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var user;
+        var user, attributeSelector;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     user = setUp({ filters: [] }).user;
-                    return [4 /*yield*/, user.click(react_2.screen.getByRole('button'))];
+                    attributeSelector = react_2.screen.getByTestId('attribute-selector');
+                    return [4 /*yield*/, user.click((0, react_2.within)(attributeSelector).getByRole('button'))];
                 case 1:
                     _a.sent();
                     return [4 /*yield*/, user.click(react_2.screen.getByRole('menuitem', { name: 'Date Level 2' }))];
@@ -280,12 +286,13 @@ describe('Attributes filters builder tests', function () {
         });
     }); });
     it('should call onChange with correct fieldName for reference attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var user;
+        var user, attributeSelector;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     user = setUp({ filters: [] }).user;
-                    return [4 /*yield*/, user.click(react_2.screen.getByRole('button'))];
+                    attributeSelector = react_2.screen.getByTestId('attribute-selector');
+                    return [4 /*yield*/, user.click((0, react_2.within)(attributeSelector).getByRole('button'))];
                 case 1:
                     _a.sent();
                     return [4 /*yield*/, user.click(react_2.screen.getByRole('menuitem', { name: 'Affiliated Type' }))];

package/cjs/AttributesFiltersBuilder/components/RowActions/RowActions.js

@@ -48,8 +48,8 @@ var RowActions = function (_a) {
         removeRow(index);
     }, [index, removeRow]);
     return (react_1.default.createElement("div", { className: styles.actions },
-        react_1.default.createElement(index_1.SmallIconButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Add'), icon: AddCircle_1.default, size: "M", onClick: onAddRowAfterId }),
-        attribute && (react_1.default.createElement(index_1.SmallIconButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Duplicate'), icon: Duplicate_1.default, size: "M", onClick: onRowDuplicate })),
-        react_1.default.createElement(index_1.SmallIconButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Delete'), icon: Close_1.default, size: "M", onClick: onRowDelete })));
+        react_1.default.createElement(index_1.SmallIconButtonWithTooltip, { "data-reltio-id": "query-builder-row-actions-add", tooltipTitle: ui_i18n_1.default.text('Add'), icon: AddCircle_1.default, size: "M", onClick: onAddRowAfterId }),
+        attribute && (react_1.default.createElement(index_1.SmallIconButtonWithTooltip, { "data-reltio-id": "query-builder-row-actions-duplicate", tooltipTitle: ui_i18n_1.default.text('Duplicate'), icon: Duplicate_1.default, size: "M", onClick: onRowDuplicate })),
+        react_1.default.createElement(index_1.SmallIconButtonWithTooltip, { "data-reltio-id": "query-builder-row-actions-delete", tooltipTitle: ui_i18n_1.default.text('Delete'), icon: Close_1.default, size: "M", onClick: onRowDelete })));
 };
 exports.default = (0, react_1.memo)(RowActions);

package/cjs/QueryBuilderRow/QueryBuilderRow.d.ts

@@ -12,6 +12,7 @@ export type Props<T, U extends Record<string, unknown>> = {
         filterSelectorContainer?: string;
         valuesEditorContainer?: string;
         actionsContainer?: string;
+        rowActions?: string;
     };
     rowData: T;
     previousRowData: T;

package/cjs/QueryBuilderRow/QueryBuilderRow.js

@@ -41,20 +41,21 @@ var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ReadOnlyLogicOperator_1 = require("./components/ReadOnlyLogicOperator");
 var ReadOnlyFilter_1 = require("./components/ReadOnlyFilter");
-var styles_1 = require("./styles");
+var QueryBuilderRow_module_css_1 = __importDefault(require("./QueryBuilderRow.module.css"));
 var QueryBuilderRow = function (_a) {
     var _b;
     var _c = _a.classes, classes = _c === void 0 ? {} : _c, rowData = _a.rowData, previousRowData = _a.previousRowData, _d = _a.LogicOperatorComponent, LogicOperatorComponent = _d === void 0 ? ReadOnlyLogicOperator_1.ReadOnlyLogicOperator : _d, AttributeSelectorComponent = _a.AttributeSelectorComponent, _e = _a.FilterSelectorComponent, FilterSelectorComponent = _e === void 0 ? ReadOnlyFilter_1.ReadOnlyFilter : _e, ValuesEditorComponent = _a.ValuesEditorComponent, ActionsComponent = _a.ActionsComponent, filterSelectorRef = _a.filterSelectorRef, _f = _a.attributeSelectorProps, attributeSelectorProps = _f === void 0 ? {} : _f, rowContext = __rest(_a, ["classes", "rowData", "previousRowData", "LogicOperatorComponent", "AttributeSelectorComponent", "FilterSelectorComponent", "ValuesEditorComponent", "ActionsComponent", "filterSelectorRef", "attributeSelectorProps"]);
-    var styles = (0, styles_1.useStyles)();
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.row, classes.root), "data-reltio-id": "query-builder-row" },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(QueryBuilderRow_module_css_1.default.row, classes.root), "data-reltio-id": "query-builder-row" },
         react_1.default.createElement(LogicOperatorComponent, { className: classes.logicOperatorContainer, rowContext: rowContext, rowData: previousRowData }),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.rowItem, classes.attributeSelectorContainer), "data-reltio-id": "query-builder-row-attribute-selector" },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(QueryBuilderRow_module_css_1.default.rowItem, classes.attributeSelectorContainer), "data-reltio-id": "query-builder-row-attribute-selector" },
             react_1.default.createElement(AttributeSelectorComponent, { attributeSelectorProps: attributeSelectorProps, rowContext: rowContext, rowData: rowData })),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.rowItem, classes.filterSelectorContainer), "data-reltio-id": "query-builder-row-filter-selector" },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(QueryBuilderRow_module_css_1.default.rowItem, classes.filterSelectorContainer), "data-reltio-id": "query-builder-row-filter-selector" },
             react_1.default.createElement(FilterSelectorComponent, { textFieldInputRef: filterSelectorRef, rowContext: rowContext, rowData: rowData })),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.rowItem, styles.fullWidth, classes.valuesEditorContainer), "data-reltio-id": "query-builder-row-values-editor" },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(QueryBuilderRow_module_css_1.default.rowItem, QueryBuilderRow_module_css_1.default.fullWidth, classes.valuesEditorContainer), "data-reltio-id": "query-builder-row-values-editor" },
             react_1.default.createElement(ValuesEditorComponent, { rowContext: rowContext, rowData: rowData })),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.rowItem, classes.actionsContainer, (_b = {}, _b[styles.hidden] = !rowData, _b)), "data-reltio-id": "query-builder-row-actions" },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(QueryBuilderRow_module_css_1.default.rowItem, classes.actionsContainer, classes.rowActions, (_b = {},
+                _b[QueryBuilderRow_module_css_1.default.hidden] = !rowData,
+                _b)), "data-reltio-id": "query-builder-row-actions" },
             react_1.default.createElement(ActionsComponent, { rowContext: rowContext, rowData: rowData }))));
 };
 exports.default = (0, react_1.memo)(QueryBuilderRow);

package/cjs/QueryBuilderRow/QueryBuilderRow.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"row":"QueryBuilderRow-row--lJJMo","rowItem":"QueryBuilderRow-rowItem--SVEaJ","fullWidth":"QueryBuilderRow-fullWidth--p9CT8","hidden":"QueryBuilderRow-hidden--MDfe-"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.QueryBuilderRow-row--lJJMo{display:flex;margin-bottom:12px}.QueryBuilderRow-rowItem--SVEaJ{display:flex;padding-right:10px}.QueryBuilderRow-fullWidth--p9CT8{flex-basis:0;flex-grow:1;overflow:hidden}.QueryBuilderRow-hidden--MDfe-{visibility:hidden!important}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/icons/Duplicate.js

@@ -16,13 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var SvgDuplicate = function (props) {
-    return (react_1.default.createElement("svg", __assign({ width: 20, height: 20, viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", focusable: "false", "data-reltio-id": "SvgDuplicate" }, props),
-        react_1.default.createElement("defs", null,
-            react_1.default.createElement("path", { d: "M20.222 6C21.21 6 22 6.8 22 7.778v12.444C22 21.2 21.209 22 20.222 22H7.778C6.79 22 6 21.2 6 20.222V7.778C6 6.8 6.791 6 7.778 6h12.444zM8 8v12h12V8H8zM4 18H2V4c0-1.1.9-2 2-2h14v2H4v14z", id: "Duplicate_svg__a" })),
-        react_1.default.createElement("g", { transform: "translate(-2 -2)", stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" },
-            react_1.default.createElement("mask", { id: "Duplicate_svg__b", fill: "#fff" },
-                react_1.default.createElement("use", { xlinkHref: "#Duplicate_svg__a" })),
-            react_1.default.createElement("g", { mask: "url(#Duplicate_svg__b)", fill: "#000", fillOpacity: 0.54 },
-                react_1.default.createElement("path", { d: "M0 0h24v24H0z" })))));
+    return (react_1.default.createElement("svg", __assign({ width: 20, height: 20, viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", focusable: "false", "data-reltio-id": "SvgDuplicate" }, props),
+        react_1.default.createElement("path", { d: "M18.222 4C19.21 4 20 4.8 20 5.778v12.444C20 19.2 19.209 20 18.222 20H5.778C4.79 20 4 19.2 4 18.222V5.778C4 4.8 4.791 4 5.778 4h12.444zM6 6v12h12V6H6zM2 16H0V2C0 .9.9 0 2 0h14v2H2v14z", fill: "#000", fillOpacity: 0.54, fillRule: "nonzero", stroke: "none", strokeWidth: 1 })));
 };
 exports.default = SvgDuplicate;

package/icons/Duplicate.js

@@ -11,13 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from 'react';
 var SvgDuplicate = function (props) {
-    return (React.createElement("svg", __assign({ width: 20, height: 20, viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", focusable: "false", "data-reltio-id": "SvgDuplicate" }, props),
-        React.createElement("defs", null,
-            React.createElement("path", { d: "M20.222 6C21.21 6 22 6.8 22 7.778v12.444C22 21.2 21.209 22 20.222 22H7.778C6.79 22 6 21.2 6 20.222V7.778C6 6.8 6.791 6 7.778 6h12.444zM8 8v12h12V8H8zM4 18H2V4c0-1.1.9-2 2-2h14v2H4v14z", id: "Duplicate_svg__a" })),
-        React.createElement("g", { transform: "translate(-2 -2)", stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" },
-            React.createElement("mask", { id: "Duplicate_svg__b", fill: "#fff" },
-                React.createElement("use", { xlinkHref: "#Duplicate_svg__a" })),
-            React.createElement("g", { mask: "url(#Duplicate_svg__b)", fill: "#000", fillOpacity: 0.54 },
-                React.createElement("path", { d: "M0 0h24v24H0z" })))));
+    return (React.createElement("svg", __assign({ width: 20, height: 20, viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", focusable: "false", "data-reltio-id": "SvgDuplicate" }, props),
+        React.createElement("path", { d: "M18.222 4C19.21 4 20 4.8 20 5.778v12.444C20 19.2 19.209 20 18.222 20H5.778C4.79 20 4 19.2 4 18.222V5.778C4 4.8 4.791 4 5.778 4h12.444zM6 6v12h12V6H6zM2 16H0V2C0 .9.9 0 2 0h14v2H2v14z", fill: "#000", fillOpacity: 0.54, fillRule: "nonzero", stroke: "none", strokeWidth: 1 })));
 };
 export default SvgDuplicate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2149",
+  "version": "1.4.2151",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -11,7 +11,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1971",
+    "@reltio/mdm-sdk": "^1.4.1973",
     "@vis.gl/react-google-maps": "^1.3.0",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",

package/AttributesFiltersBuilder/styles.d.ts

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

package/AttributesFiltersBuilder/styles.js

@@ -1,18 +0,0 @@
-import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles(function () { return ({
-    attrSelector: {
-        width: '222px',
-        height: '40px',
-        flexShrink: 0
-    },
-    filterSelector: {
-        width: '180px',
-        flexShrink: 0,
-        marginTop: 0,
-        marginBottom: 0
-    },
-    actionContainer: {
-        alignItems: 'center',
-        marginRight: '15px'
-    }
-}); });

package/QueryBuilderRow/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"hidden" | "row" | "fullWidth" | "rowItem">;

package/QueryBuilderRow/styles.js

@@ -1,19 +0,0 @@
-import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles(function () { return ({
-    row: {
-        display: 'flex',
-        marginBottom: '12px'
-    },
-    rowItem: {
-        paddingRight: '10px',
-        display: 'flex'
-    },
-    fullWidth: {
-        flexGrow: '1',
-        flexBasis: '0',
-        overflow: 'hidden'
-    },
-    hidden: {
-        visibility: 'hidden'
-    }
-}); });

package/cjs/AttributesFiltersBuilder/styles.d.ts

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

package/cjs/AttributesFiltersBuilder/styles.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
-    attrSelector: {
-        width: '222px',
-        height: '40px',
-        flexShrink: 0
-    },
-    filterSelector: {
-        width: '180px',
-        flexShrink: 0,
-        marginTop: 0,
-        marginBottom: 0
-    },
-    actionContainer: {
-        alignItems: 'center',
-        marginRight: '15px'
-    }
-}); });

package/cjs/QueryBuilderRow/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"hidden" | "row" | "fullWidth" | "rowItem">;

package/cjs/QueryBuilderRow/styles.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
-    row: {
-        display: 'flex',
-        marginBottom: '12px'
-    },
-    rowItem: {
-        paddingRight: '10px',
-        display: 'flex'
-    },
-    fullWidth: {
-        flexGrow: '1',
-        flexBasis: '0',
-        overflow: 'hidden'
-    },
-    hidden: {
-        visibility: 'hidden'
-    }
-}); });