@reltio/components 1.4.1969 → 1.4.1971

package/cjs/ReadableSearchQuery/ReadableSearchQuery.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ReadableQueryPrimitive } from '@reltio/mdm-sdk';
 export declare const ReadableSearchQuery: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    classes?: Record<string, string>;
     readableQuery?: ReadableQueryPrimitive[];
 } & React.RefAttributes<HTMLElement>>;

package/cjs/ReadableSearchQuery/ReadableSearchQuery.js

@@ -53,11 +53,11 @@ var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var styles_1 = require("./styles");
 exports.ReadableSearchQuery = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.readableQuery, readableQuery = _b === void 0 ? [] : _b, className = _a.className, otherProps = __rest(_a, ["readableQuery", "className"]);
+    var _b = _a.readableQuery, readableQuery = _b === void 0 ? [] : _b, className = _a.className, _c = _a.classes, classes = _c === void 0 ? {} : _c, otherProps = __rest(_a, ["readableQuery", "className", "classes"]);
     var styles = (0, styles_1.useStyles)();
     return (react_1.default.createElement("span", __assign({ ref: ref, className: (0, classnames_1.default)(styles.query, className), "data-reltio-id": "search-readable-query" }, otherProps), readableQuery.map(function (_a, i) {
         var type = _a.type, text = _a.text;
-        return (react_1.default.createElement("span", { key: i, className: styles[type] }, text));
+        return (react_1.default.createElement("span", { key: i, className: (0, classnames_1.default)(styles[type], classes[type]) }, text));
     })));
 });
 exports.ReadableSearchQuery.displayName = 'ReadableSearchQuery';

package/cjs/ReadableSearchQueryBuilder/ReadableSearchQueryBuilder.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ReadableQueryPrimitive } from '@reltio/mdm-sdk';
+type Classes = {
+    root?: string;
+    queryWrapper?: string;
+    title?: string;
+    [key: string]: string;
+};
+type Props = {
+    readableQuery: ReadableQueryPrimitive[];
+    classes?: Classes;
+    title?: string;
+};
+export declare const ReadableSearchQueryBuilder: ({ readableQuery, classes, title }: Props) => React.JSX.Element;
+export {};

package/cjs/ReadableSearchQueryBuilder/ReadableSearchQueryBuilder.js

@@ -0,0 +1,128 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReadableSearchQueryBuilder = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
+var ReadableSearchQuery_1 = require("../ReadableSearchQuery");
+var styles_1 = require("./styles");
+var ReadableSearchQueryBuilder = function (_a) {
+    var readableQuery = _a.readableQuery, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.title, title = _c === void 0 ? ui_i18n_1.default.text('Search query') : _c;
+    var styles = (0, styles_1.useStyles)();
+    var initialTooltipTitle = ui_i18n_1.default.text('Copy to clipboard');
+    var _d = (0, react_1.useState)(initialTooltipTitle), tooltipTitle = _d[0], setTooltipTitle = _d[1];
+    var _e = (0, react_1.useState)(0), queryMouseEnterX = _e[0], setQueryMouseEnterX = _e[1];
+    var _f = (0, react_1.useState)(0), queryMouseEnterY = _f[0], setQueryMouseEnterY = _f[1];
+    var onQueryMouseEnter = (0, react_1.useCallback)(function (e) {
+        setQueryMouseEnterX(e.clientX);
+        setQueryMouseEnterY(e.clientY);
+    }, []);
+    var onTooltipClose = (0, react_1.useCallback)(function () {
+        setTooltipTitle(initialTooltipTitle);
+    }, [initialTooltipTitle]);
+    var copyQueryToClipboard = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, navigator.clipboard.writeText((0, mdm_sdk_1.readableQueryToString)(readableQuery))];
+                case 1:
+                    _b.sent();
+                    setTooltipTitle(ui_i18n_1.default.text('Query was copied'));
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = _b.sent();
+                    setTooltipTitle(ui_i18n_1.default.text('Error'));
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [readableQuery]);
+    // When query is too long and div.queryContainer has scroll, we have wrong tooltip position.
+    // Possible solution is wrap in Tooltip div.queryContainer component, but it's too wide for short queries.
+    // So, we decided to place tooltip near position where cursor was entered on div.query
+    var popperProps = (0, react_1.useMemo)(function () { return ({
+        anchorEl: {
+            clientWidth: 1,
+            clientHeight: 1,
+            getBoundingClientRect: function () { return ({
+                left: queryMouseEnterX,
+                bottom: queryMouseEnterY,
+                height: 1,
+                right: queryMouseEnterX,
+                width: 1,
+                top: queryMouseEnterY
+            }); }
+        }
+    }); }, [queryMouseEnterX, queryMouseEnterY]);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, classes.root) },
+        react_1.default.createElement("span", { className: classes.title }, title),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.queryWrapper, classes.queryWrapper) }, readableQuery.length > 0 ? (react_1.default.createElement(Tooltip_1.default, { key: tooltipTitle, title: tooltipTitle, onClose: onTooltipClose, PopperProps: popperProps },
+            react_1.default.createElement(ReadableSearchQuery_1.ReadableSearchQuery, { readableQuery: readableQuery, onMouseEnter: onQueryMouseEnter, onClick: copyQueryToClipboard, classes: classes, className: styles.query }))) : (react_1.default.createElement("span", { className: styles.noQuery }, ui_i18n_1.default.text('Build your search and view your search query here'))))));
+};
+exports.ReadableSearchQueryBuilder = ReadableSearchQueryBuilder;

package/cjs/ReadableSearchQueryBuilder/ReadableSearchQueryBuilder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/ReadableSearchQueryBuilder/ReadableSearchQueryBuilder.test.js

@@ -0,0 +1,137 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 react_2 = require("@testing-library/react");
+var ReadableSearchQueryBuilder_1 = require("./ReadableSearchQueryBuilder");
+var defaultReadableQuery = [
+    { text: 'REGISTRY: ', type: 'entityTypeLabel' },
+    { text: 'Name', type: 'attributeLabel' },
+    { text: ' ', type: 'space' },
+    { text: '≠', type: 'attributeFilter' },
+    { text: ' ', type: 'space' },
+    { text: '"John"', type: 'attributeValue' }
+];
+var defaultProps = {
+    readableQuery: defaultReadableQuery
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    return __assign({}, (0, react_2.render)(react_1.default.createElement(ReadableSearchQueryBuilder_1.ReadableSearchQueryBuilder, __assign({}, props))));
+};
+describe('Readable search query builder behaviour', function () {
+    beforeEach(function () {
+        Object.assign(navigator, { clipboard: { writeText: jest.fn() } });
+    });
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should render correctly', function () {
+        setUp();
+        react_2.screen.getByText('Search query');
+        expect(react_2.screen.getByTestId('search-readable-query')).toHaveTextContent('REGISTRY: Name ≠ "John"');
+        expect(react_2.screen.queryByText('Build your search and view your search query here')).not.toBeInTheDocument();
+    });
+    it('should render custom title correctly', function () {
+        var props = __assign(__assign({}, defaultProps), { title: 'Custom title' });
+        setUp(props);
+        react_2.screen.getByText('Custom title');
+    });
+    it('should render special message when readable query is empty', function () {
+        var props = __assign(__assign({}, defaultProps), { readableQuery: [] });
+        setUp(props);
+        expect(react_2.screen.queryByTestId('search-readable-query')).not.toBeInTheDocument();
+        react_2.screen.getByText('Build your search and view your search query here');
+    });
+    it('should copy text of readable query in clipboard on query click', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var query;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    navigator.clipboard.writeText.mockResolvedValue(null);
+                    setUp();
+                    query = react_2.screen.getByTestId('search-readable-query');
+                    // eslint-disable-next-line testing-library/prefer-user-event
+                    react_2.fireEvent.mouseOver(query);
+                    react_2.screen.getByLabelText('Copy to clipboard');
+                    // eslint-disable-next-line testing-library/prefer-user-event
+                    react_2.fireEvent.click(query);
+                    return [4 /*yield*/, react_2.screen.findByLabelText('Query was copied')];
+                case 1:
+                    _a.sent();
+                    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('REGISTRY: Name ≠ "John"');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should show error text in tooltip if attempt to copy text to clipboard was failed', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var query;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    navigator.clipboard.writeText.mockRejectedValue(null);
+                    setUp();
+                    query = react_2.screen.getByTestId('search-readable-query');
+                    // eslint-disable-next-line testing-library/prefer-user-event
+                    react_2.fireEvent.mouseOver(query);
+                    react_2.screen.getByLabelText('Copy to clipboard');
+                    // eslint-disable-next-line testing-library/prefer-user-event
+                    react_2.fireEvent.click(query);
+                    return [4 /*yield*/, react_2.screen.findByLabelText('Error')];
+                case 1:
+                    _a.sent();
+                    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('REGISTRY: Name ≠ "John"');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/cjs/ReadableSearchQueryBuilder/index.d.ts

@@ -0,0 +1 @@
+export { ReadableSearchQueryBuilder } from './ReadableSearchQueryBuilder';

package/cjs/ReadableSearchQueryBuilder/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReadableSearchQueryBuilder = void 0;
+var ReadableSearchQueryBuilder_1 = require("./ReadableSearchQueryBuilder");
+Object.defineProperty(exports, "ReadableSearchQueryBuilder", { enumerable: true, get: function () { return ReadableSearchQueryBuilder_1.ReadableSearchQueryBuilder; } });

package/cjs/ReadableSearchQueryBuilder/styles.d.ts

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

package/cjs/ReadableSearchQueryBuilder/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)({
+    root: {
+        fontSize: '12px',
+        lineHeight: '16px',
+        color: 'rgba(0,0,0,0.38)'
+    },
+    queryWrapper: {
+        height: 'auto',
+        maxHeight: '48px',
+        paddingTop: '4px',
+        overflow: 'auto'
+    },
+    query: {
+        cursor: 'pointer'
+    },
+    noQuery: {
+        color: '#000000'
+    }
+});

package/cjs/index.d.ts

@@ -129,6 +129,7 @@ export { StepNavigation } from './StepNavigation';
 export { TableSkeleton } from './TableSkeleton';
 export { LogicOperator } from './LogicOperator';
 export { ReadableSearchQuery } from './ReadableSearchQuery';
+export { ReadableSearchQueryBuilder } from './ReadableSearchQueryBuilder';
 export { ImportButton } from './ImportButton';
 export { LinearLoadIndicator } from './LinearLoadIndicator';
 export { Link } from './Link';

package/cjs/index.js

@@ -16,11 +16,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NestedAttributeEditor = exports.NestedAttribute = exports.MoreAttributesButton = exports.InlineReferenceAttribute = exports.InlineNestedAttribute = exports.InlineImageAttribute = exports.InlineAttributesPager = exports.InfoIcon = exports.EditableImageAttributesLine = exports.FilterButton = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.EntitySelector = exports.EntityCreator = exports.AttributesPager = exports.AttributesList = exports.EditableAttribute = exports.DropDownMenuButton = exports.DescriptionIcon = exports.DefaultCellValueRenderer = exports.ControlAttributeIcon = exports.ColumnsSettingsPopup = exports.ColumnsSettings = exports.ColorBar = exports.CollapseRowButton = exports.BasicChartsFactory = exports.ChartsFactory = exports.CardinalityMessage = exports.BranchDecorator = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.BasicTablePagination = exports.basicTableViewState = exports.BasicTable = exports.BasicAttributeSelector = exports.BarChart = exports.AvatarWithFallback = exports.AutoSizeList = exports.AttributesView = exports.AttributesValuesEditor = exports.AttributesFiltersButton = exports.AttributesFiltersBuilder = exports.AttributesFilterSelector = exports.AttributesErrorsPanel = exports.AttributeListItem = exports.AttributeGroupIcon = exports.ArrowExpandButton = exports.ActionsPanel = exports.ActionButton = void 0;
 exports.ConnectionEditor = exports.DropDownSelector = exports.ReactSelectOptionWithCheckIcon = exports.ReactSelectMenuWithPopper = exports.ReactSelectMenuList = exports.ReactSelectLoadMoreButton = exports.ReactSelectDropdownIndicatorWithIconButton = exports.ReactSelectDropdownIndicator = exports.Highlighter = exports.HierarchyNodeTitle = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.ExpandableSearchInput = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.Drawer = exports.DataTypeValue = exports.DataTenantBadge = exports.ConnectionRelationTypeSelector = exports.CollaborationItem = exports.ConfirmationDialog = exports.CommentsContainer = exports.ColoredSourceIcon = exports.CollapseButton = exports.TreeChart = exports.TableWithBars = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleAttributeEditor = exports.SimpleAttribute = exports.RowCellAutoSizer = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.ReferenceAttribute = exports.ImageAttributesLine = exports.ReadOnlyAttributesPager = exports.ReadOnlyAttributesList = exports.ReadOnlyAttribute = exports.ReadOnlyAttributeValuesBlock = exports.PieChart = exports.OvIcon = void 0;
-exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.SimpleMatchRules = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportButton = exports.ReadableSearchQuery = exports.LogicOperator = exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.RelevanceScoreBadge = exports.RequiredMark = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.ProfilesList = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.ImageGalleryDialog = exports.RelationTypesSelector = exports.ScreenProfileBand = exports.ProfileBandNavigation = exports.EmptyStub = exports.SaveSegmentDialog = exports.MaskingSwitcher = exports.FileTypeEditor = exports.EmptySearchResult = exports.DropDownEditor = exports.FilterValueEditor = exports.MultiValueChip = exports.TextEditor = exports.DateRangeEditor = exports.NumberEditor = exports.DataTypeValueEditor = exports.DateEditor = exports.ErrorWrapper = exports.ErrorMessage = exports.ConfigureColumnsPopup = void 0;
-exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = exports.MdmModuleProvider = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.withContext = exports.withDateRangeSelector = exports.withDragHandle = exports.withAsyncMount = exports.withTooltip = exports.DateRangeSelector = exports.UpSetChart = exports.GaugeChart = exports.RelationEditor = exports.ReltioMap = exports.Marginator = exports.LightArrowTooltip = exports.ScrollableTabs = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopup = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.RCTree = exports.reactSortableTreeHelpers = exports.ReactSortableTree = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = void 0;
-exports.MaskedAttributesProvider = exports.SegmentationContext = exports.useReloadData = exports.ReloadDataProvider = exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.InitialCollaborationContextValue = exports.CollaborationContextProvider = void 0;
-exports.useSegmentationRequest = exports.resolveMarkers = exports.useMarkers = exports.useMaskedAttribute = exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = exports.ProfileTablesContext = exports.HiddenAttributesContext = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useDeleteUnmaskedAttributeForRelation = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = void 0;
-exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.delayPromise = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = void 0;
+exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.SimpleMatchRules = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportButton = exports.ReadableSearchQueryBuilder = exports.ReadableSearchQuery = exports.LogicOperator = exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.RelevanceScoreBadge = exports.RequiredMark = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.ProfilesList = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.ImageGalleryDialog = exports.RelationTypesSelector = exports.ScreenProfileBand = exports.ProfileBandNavigation = exports.EmptyStub = exports.SaveSegmentDialog = exports.MaskingSwitcher = exports.FileTypeEditor = exports.EmptySearchResult = exports.DropDownEditor = exports.FilterValueEditor = exports.MultiValueChip = exports.TextEditor = exports.DateRangeEditor = exports.NumberEditor = exports.DataTypeValueEditor = exports.DateEditor = exports.ErrorWrapper = exports.ErrorMessage = exports.ConfigureColumnsPopup = void 0;
+exports.BlockImageGalleryDialogContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = exports.MdmModuleProvider = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.withContext = exports.withDateRangeSelector = exports.withDragHandle = exports.withAsyncMount = exports.withTooltip = exports.DateRangeSelector = exports.UpSetChart = exports.GaugeChart = exports.RelationEditor = exports.ReltioMap = exports.Marginator = exports.LightArrowTooltip = exports.ScrollableTabs = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopup = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.RCTree = exports.reactSortableTreeHelpers = exports.ReactSortableTree = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = void 0;
+exports.SegmentationContext = exports.useReloadData = exports.ReloadDataProvider = exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.InitialCollaborationContextValue = exports.CollaborationContextProvider = exports.CollaborationContext = void 0;
+exports.resolveMarkers = exports.useMarkers = exports.useMaskedAttribute = exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = exports.ProfileTablesContext = exports.HiddenAttributesContext = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useDeleteUnmaskedAttributeForRelation = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = exports.MaskedAttributesProvider = void 0;
+exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.delayPromise = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useSegmentationRequest = void 0;
 // components
 var ActionButton_1 = require("./ActionButton");
 Object.defineProperty(exports, "ActionButton", { enumerable: true, get: function () { return ActionButton_1.ActionButton; } });
@@ -290,6 +290,8 @@ var LogicOperator_1 = require("./LogicOperator");
 Object.defineProperty(exports, "LogicOperator", { enumerable: true, get: function () { return LogicOperator_1.LogicOperator; } });
 var ReadableSearchQuery_1 = require("./ReadableSearchQuery");
 Object.defineProperty(exports, "ReadableSearchQuery", { enumerable: true, get: function () { return ReadableSearchQuery_1.ReadableSearchQuery; } });
+var ReadableSearchQueryBuilder_1 = require("./ReadableSearchQueryBuilder");
+Object.defineProperty(exports, "ReadableSearchQueryBuilder", { enumerable: true, get: function () { return ReadableSearchQueryBuilder_1.ReadableSearchQueryBuilder; } });
 var ImportButton_1 = require("./ImportButton");
 Object.defineProperty(exports, "ImportButton", { enumerable: true, get: function () { return ImportButton_1.ImportButton; } });
 var LinearLoadIndicator_1 = require("./LinearLoadIndicator");

package/esm/ReadableSearchQuery/ReadableSearchQuery.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ReadableQueryPrimitive } from '@reltio/mdm-sdk';
 export declare const ReadableSearchQuery: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    classes?: Record<string, string>;
     readableQuery?: ReadableQueryPrimitive[];
 } & React.RefAttributes<HTMLElement>>;

package/esm/ReadableSearchQuery/ReadableSearchQuery.js

@@ -24,11 +24,11 @@ import React, { forwardRef } from 'react';
 import classnames from 'classnames';
 import { useStyles } from './styles';
 export var ReadableSearchQuery = forwardRef(function (_a, ref) {
-    var _b = _a.readableQuery, readableQuery = _b === void 0 ? [] : _b, className = _a.className, otherProps = __rest(_a, ["readableQuery", "className"]);
+    var _b = _a.readableQuery, readableQuery = _b === void 0 ? [] : _b, className = _a.className, _c = _a.classes, classes = _c === void 0 ? {} : _c, otherProps = __rest(_a, ["readableQuery", "className", "classes"]);
     var styles = useStyles();
     return (React.createElement("span", __assign({ ref: ref, className: classnames(styles.query, className), "data-reltio-id": "search-readable-query" }, otherProps), readableQuery.map(function (_a, i) {
         var type = _a.type, text = _a.text;
-        return (React.createElement("span", { key: i, className: styles[type] }, text));
+        return (React.createElement("span", { key: i, className: classnames(styles[type], classes[type]) }, text));
     })));
 });
 ReadableSearchQuery.displayName = 'ReadableSearchQuery';

package/esm/ReadableSearchQueryBuilder/ReadableSearchQueryBuilder.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ReadableQueryPrimitive } from '@reltio/mdm-sdk';
+type Classes = {
+    root?: string;
+    queryWrapper?: string;
+    title?: string;
+    [key: string]: string;
+};
+type Props = {
+    readableQuery: ReadableQueryPrimitive[];
+    classes?: Classes;
+    title?: string;
+};
+export declare const ReadableSearchQueryBuilder: ({ readableQuery, classes, title }: Props) => React.JSX.Element;
+export {};

package/esm/ReadableSearchQueryBuilder/ReadableSearchQueryBuilder.js

@@ -0,0 +1,98 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useState, useMemo, useCallback } from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import { readableQueryToString } from '@reltio/mdm-sdk';
+import Tooltip from '@mui/material/Tooltip';
+import { ReadableSearchQuery } from '../ReadableSearchQuery';
+import { useStyles } from './styles';
+export var ReadableSearchQueryBuilder = function (_a) {
+    var readableQuery = _a.readableQuery, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.title, title = _c === void 0 ? i18n.text('Search query') : _c;
+    var styles = useStyles();
+    var initialTooltipTitle = i18n.text('Copy to clipboard');
+    var _d = useState(initialTooltipTitle), tooltipTitle = _d[0], setTooltipTitle = _d[1];
+    var _e = useState(0), queryMouseEnterX = _e[0], setQueryMouseEnterX = _e[1];
+    var _f = useState(0), queryMouseEnterY = _f[0], setQueryMouseEnterY = _f[1];
+    var onQueryMouseEnter = useCallback(function (e) {
+        setQueryMouseEnterX(e.clientX);
+        setQueryMouseEnterY(e.clientY);
+    }, []);
+    var onTooltipClose = useCallback(function () {
+        setTooltipTitle(initialTooltipTitle);
+    }, [initialTooltipTitle]);
+    var copyQueryToClipboard = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, navigator.clipboard.writeText(readableQueryToString(readableQuery))];
+                case 1:
+                    _b.sent();
+                    setTooltipTitle(i18n.text('Query was copied'));
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = _b.sent();
+                    setTooltipTitle(i18n.text('Error'));
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [readableQuery]);
+    // When query is too long and div.queryContainer has scroll, we have wrong tooltip position.
+    // Possible solution is wrap in Tooltip div.queryContainer component, but it's too wide for short queries.
+    // So, we decided to place tooltip near position where cursor was entered on div.query
+    var popperProps = useMemo(function () { return ({
+        anchorEl: {
+            clientWidth: 1,
+            clientHeight: 1,
+            getBoundingClientRect: function () { return ({
+                left: queryMouseEnterX,
+                bottom: queryMouseEnterY,
+                height: 1,
+                right: queryMouseEnterX,
+                width: 1,
+                top: queryMouseEnterY
+            }); }
+        }
+    }); }, [queryMouseEnterX, queryMouseEnterY]);
+    return (React.createElement("div", { className: classnames(styles.root, classes.root) },
+        React.createElement("span", { className: classes.title }, title),
+        React.createElement("div", { className: classnames(styles.queryWrapper, classes.queryWrapper) }, readableQuery.length > 0 ? (React.createElement(Tooltip, { key: tooltipTitle, title: tooltipTitle, onClose: onTooltipClose, PopperProps: popperProps },
+            React.createElement(ReadableSearchQuery, { readableQuery: readableQuery, onMouseEnter: onQueryMouseEnter, onClick: copyQueryToClipboard, classes: classes, className: styles.query }))) : (React.createElement("span", { className: styles.noQuery }, i18n.text('Build your search and view your search query here'))))));
+};

package/esm/ReadableSearchQueryBuilder/ReadableSearchQueryBuilder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/ReadableSearchQueryBuilder/ReadableSearchQueryBuilder.test.js

@@ -0,0 +1,132 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ReadableSearchQueryBuilder } from './ReadableSearchQueryBuilder';
+var defaultReadableQuery = [
+    { text: 'REGISTRY: ', type: 'entityTypeLabel' },
+    { text: 'Name', type: 'attributeLabel' },
+    { text: ' ', type: 'space' },
+    { text: '≠', type: 'attributeFilter' },
+    { text: ' ', type: 'space' },
+    { text: '"John"', type: 'attributeValue' }
+];
+var defaultProps = {
+    readableQuery: defaultReadableQuery
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    return __assign({}, render(React.createElement(ReadableSearchQueryBuilder, __assign({}, props))));
+};
+describe('Readable search query builder behaviour', function () {
+    beforeEach(function () {
+        Object.assign(navigator, { clipboard: { writeText: jest.fn() } });
+    });
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should render correctly', function () {
+        setUp();
+        screen.getByText('Search query');
+        expect(screen.getByTestId('search-readable-query')).toHaveTextContent('REGISTRY: Name ≠ "John"');
+        expect(screen.queryByText('Build your search and view your search query here')).not.toBeInTheDocument();
+    });
+    it('should render custom title correctly', function () {
+        var props = __assign(__assign({}, defaultProps), { title: 'Custom title' });
+        setUp(props);
+        screen.getByText('Custom title');
+    });
+    it('should render special message when readable query is empty', function () {
+        var props = __assign(__assign({}, defaultProps), { readableQuery: [] });
+        setUp(props);
+        expect(screen.queryByTestId('search-readable-query')).not.toBeInTheDocument();
+        screen.getByText('Build your search and view your search query here');
+    });
+    it('should copy text of readable query in clipboard on query click', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var query;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    navigator.clipboard.writeText.mockResolvedValue(null);
+                    setUp();
+                    query = screen.getByTestId('search-readable-query');
+                    // eslint-disable-next-line testing-library/prefer-user-event
+                    fireEvent.mouseOver(query);
+                    screen.getByLabelText('Copy to clipboard');
+                    // eslint-disable-next-line testing-library/prefer-user-event
+                    fireEvent.click(query);
+                    return [4 /*yield*/, screen.findByLabelText('Query was copied')];
+                case 1:
+                    _a.sent();
+                    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('REGISTRY: Name ≠ "John"');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should show error text in tooltip if attempt to copy text to clipboard was failed', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var query;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    navigator.clipboard.writeText.mockRejectedValue(null);
+                    setUp();
+                    query = screen.getByTestId('search-readable-query');
+                    // eslint-disable-next-line testing-library/prefer-user-event
+                    fireEvent.mouseOver(query);
+                    screen.getByLabelText('Copy to clipboard');
+                    // eslint-disable-next-line testing-library/prefer-user-event
+                    fireEvent.click(query);
+                    return [4 /*yield*/, screen.findByLabelText('Error')];
+                case 1:
+                    _a.sent();
+                    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('REGISTRY: Name ≠ "John"');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/esm/ReadableSearchQueryBuilder/index.d.ts

@@ -0,0 +1 @@
+export { ReadableSearchQueryBuilder } from './ReadableSearchQueryBuilder';

package/esm/ReadableSearchQueryBuilder/index.js

@@ -0,0 +1 @@
+export { ReadableSearchQueryBuilder } from './ReadableSearchQueryBuilder';

package/esm/ReadableSearchQueryBuilder/styles.d.ts

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

package/esm/ReadableSearchQueryBuilder/styles.js

@@ -0,0 +1,20 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles({
+    root: {
+        fontSize: '12px',
+        lineHeight: '16px',
+        color: 'rgba(0,0,0,0.38)'
+    },
+    queryWrapper: {
+        height: 'auto',
+        maxHeight: '48px',
+        paddingTop: '4px',
+        overflow: 'auto'
+    },
+    query: {
+        cursor: 'pointer'
+    },
+    noQuery: {
+        color: '#000000'
+    }
+});

package/esm/index.d.ts

@@ -129,6 +129,7 @@ export { StepNavigation } from './StepNavigation';
 export { TableSkeleton } from './TableSkeleton';
 export { LogicOperator } from './LogicOperator';
 export { ReadableSearchQuery } from './ReadableSearchQuery';
+export { ReadableSearchQueryBuilder } from './ReadableSearchQueryBuilder';
 export { ImportButton } from './ImportButton';
 export { LinearLoadIndicator } from './LinearLoadIndicator';
 export { Link } from './Link';

package/esm/index.js

@@ -130,6 +130,7 @@ export { StepNavigation } from './StepNavigation';
 export { TableSkeleton } from './TableSkeleton';
 export { LogicOperator } from './LogicOperator';
 export { ReadableSearchQuery } from './ReadableSearchQuery';
+export { ReadableSearchQueryBuilder } from './ReadableSearchQueryBuilder';
 export { ImportButton } from './ImportButton';
 export { LinearLoadIndicator } from './LinearLoadIndicator';
 export { Link } from './Link';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1969",
+  "version": "1.4.1971",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -8,7 +8,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1872",
+    "@reltio/mdm-sdk": "^1.4.1874",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
     "d3-hierarchy": "^2.0.0",