@reltio/components 1.4.1908 → 1.4.1910

package/esm/ResizablePanes/ResizablePanes.js

@@ -1,39 +1,106 @@
-import React, { useCallback, useMemo, useState } from 'react';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
-import SplitPane from 'react-split-pane';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { useTheme } from '@mui/material/styles';
+import ReactResizeDetector from 'react-resize-detector';
 import { debounce } from '@reltio/mdm-sdk';
 import { useStyles } from './styles';
 var HANDLE_CHANGE_DEBOUNCE_INTERVAL = 250;
 var isHorizontal = function (orientation) { return orientation === 'horizontal'; };
+var isEqualSize = function (a, b) { return a.toFixed(2) === b.toFixed(2); };
 export var ResizablePanes = function (_a) {
-    var className = _a.className, children = _a.children, orientation = _a.orientation, primary = _a.primary, defaultSize = _a.defaultSize, size = _a.size, minSize = _a.minSize, maxSize = _a.maxSize, allowResize = _a.allowResize, _b = _a.debounceInterval, debounceInterval = _b === void 0 ? HANDLE_CHANGE_DEBOUNCE_INTERVAL : _b, onChange = _a.onChange;
+    var _b;
+    var className = _a.className, children = _a.children, _c = _a.orientation, orientation = _c === void 0 ? 'vertical' : _c, _d = _a.primary, primary = _d === void 0 ? 'first' : _d, size = _a.size, minSize = _a.minSize, maxSize = _a.maxSize, allowResize = _a.allowResize, _e = _a.debounceInterval, debounceInterval = _e === void 0 ? HANDLE_CHANGE_DEBOUNCE_INTERVAL : _e, onChange = _a.onChange;
     var styles = useStyles();
     var theme = useTheme();
-    var _c = useState(null), containerEl = _c[0], setContainerEl = _c[1];
-    var _d = useState(true), isPaneAnimationEnabled = _d[0], setIsPaneAnimationEnabled = _d[1];
+    var panelRef = useRef();
+    var _f = useState(null), containerEl = _f[0], setContainerEl = _f[1];
+    var _g = useState(0), percentageMinSize = _g[0], setPercentageMinSize = _g[1];
+    var _h = useState(0), percentageMaxSize = _h[0], setPercentageMaxSize = _h[1];
+    var _j = useState(true), isPaneAnimationEnabled = _j[0], setIsPaneAnimationEnabled = _j[1];
     var enableAnimation = useCallback(function () { return setIsPaneAnimationEnabled(true); }, []);
     var disableAnimation = useCallback(function () { return setIsPaneAnimationEnabled(false); }, []);
-    var getContainerSize = function () { return (isHorizontal(orientation) ? containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientHeight : containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientWidth); };
+    var getContainerSize = useCallback(function () { return (isHorizontal(orientation) ? containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientHeight : containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientWidth); }, [containerEl, orientation]);
+    if (typeof size === 'number' && size < 0) {
+        size = (getContainerSize() || 0) + size;
+    }
+    var convertSize = useCallback(function (size) {
+        if (typeof size === 'string' && size.endsWith('%')) {
+            return +size.replace('%', '');
+        }
+        if (typeof size === 'string' && size.endsWith('px')) {
+            size = size.replace('px', '');
+        }
+        return isNaN(+size) ? null : (+size / getContainerSize()) * 100;
+    }, [getContainerSize]);
+    var convertMinMaxSize = useCallback(function (size, minMaxSize) {
+        if (size === 0 || size === 100)
+            return 0;
+        return convertSize(minMaxSize) || 0;
+    }, [convertSize]);
+    var actualizeSizes = useCallback(function () {
+        if (containerEl && panelRef.current) {
+            var convertedSize = convertSize(size);
+            if (convertedSize != null && !isNaN(convertedSize)) {
+                setPercentageMaxSize(convertMinMaxSize(convertedSize, maxSize));
+                setPercentageMinSize(convertMinMaxSize(convertedSize, minSize));
+                panelRef.current.resize(convertedSize);
+            }
+        }
+    }, [convertSize, convertMinMaxSize, minSize, maxSize, size, containerEl]);
+    useEffect(function () {
+        actualizeSizes();
+    }, [actualizeSizes, percentageMaxSize, percentageMinSize]);
     var handleChange = useCallback(debounce(function (size) {
+        if (size === undefined)
+            return;
         var containerSize = getContainerSize();
         onChange({
-            percentageSize: "".concat((size / containerSize) * 100, "%"),
-            isMaxSize: +maxSize > 0 ? size === maxSize : size === containerSize + maxSize,
-            isMinSize: size === minSize,
-            size: size
+            percentageSize: size + '%',
+            isMaxSize: +percentageMaxSize > 0
+                ? isEqualSize(size, percentageMaxSize)
+                : isEqualSize(size, 100 + percentageMaxSize),
+            isMinSize: isEqualSize(size, percentageMinSize),
+            size: Math.round((size * containerSize) / 100)
         });
-    }, debounceInterval), [onChange, orientation, maxSize, containerEl]);
+    }, debounceInterval), [onChange, percentageMaxSize, percentageMinSize, getContainerSize]);
+    var handleDragging = useCallback(function (isDragging) {
+        if (isDragging) {
+            // Why do we need handleChange() here?
+            // Case - user resized panels, and then immediately started resizing again.
+            // We need to prevent onChange calling with "previous" data (handleChange is debounced calling of onChange)
+            handleChange();
+            disableAnimation();
+        }
+        else {
+            handleChange(panelRef.current.getSize());
+            enableAnimation();
+        }
+    }, [disableAnimation, enableAnimation, handleChange]);
     var paneAnimationStyle = useMemo(function () { return ({
-        transition: theme.transitions.create(isHorizontal(orientation) ? 'height' : 'width', {
+        transition: theme.transitions.create('flex', {
             easing: theme.transitions.easing.sharp,
             duration: theme.transitions.duration.leavingScreen
         })
-    }); }, [orientation, theme]);
-    if (typeof size === 'number' && size < 0) {
-        size = (getContainerSize() || 0) + size;
-    }
+    }); }, [theme]);
+    var primaryPanelProps = __assign(__assign({ className: styles.panel, minSize: percentageMinSize }, (percentageMaxSize > 0 ? { maxSize: percentageMaxSize } : {})), { ref: panelRef, style: isPaneAnimationEnabled ? paneAnimationStyle : undefined });
+    var secondaryPanelProps = __assign({ className: styles.panel, style: isPaneAnimationEnabled ? paneAnimationStyle : undefined }, (percentageMaxSize < 0 ? { minSize: -percentageMaxSize } : {}));
     return (React.createElement("div", { ref: setContainerEl, className: classnames(styles.container, className) },
-        React.createElement(SplitPane, { split: orientation, size: size, primary: primary, allowResize: allowResize, onChange: handleChange, defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, onDragStarted: disableAnimation, onDragFinished: enableAnimation, pane1Style: isPaneAnimationEnabled ? paneAnimationStyle : undefined }, children)));
+        React.createElement(ReactResizeDetector, { handleHeight: isHorizontal(orientation), handleWidth: !isHorizontal(orientation), onResize: actualizeSizes, refreshMode: "debounce", refreshRate: 50 }),
+        React.createElement(PanelGroup, { direction: isHorizontal(orientation) ? 'vertical' : 'horizontal' },
+            React.createElement(Panel, __assign({}, (primary === 'first' ? primaryPanelProps : secondaryPanelProps)), children[0]),
+            React.createElement(PanelResizeHandle, { className: classnames(styles.resizer, styles[orientation], (_b = {}, _b[styles.disabled] = !allowResize, _b)), disabled: !allowResize, hitAreaMargins: { coarse: 0, fine: 0 }, onDragging: handleDragging }),
+            React.createElement(Panel, __assign({}, (primary === 'second' ? primaryPanelProps : secondaryPanelProps)), children[1]))));
 };
 ResizablePanes.displayName = 'ResizablePanes';

package/esm/ResizablePanes/ResizablePanes.test.js

@@ -0,0 +1,284 @@
+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 { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ResizablePanes } from './ResizablePanes';
+import { delayPromise } from '../test-utils';
+var defaultProps = {
+    allowResize: true,
+    children: []
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var user = userEvent.setup();
+    return __assign(__assign({}, render(React.createElement(ResizablePanes, __assign({}, props),
+        React.createElement("div", null, "Panel 1 content"),
+        React.createElement("div", null, "Panel 2 content")))), { user: user });
+};
+var getPanel1 = function (container) { return container.querySelectorAll('[data-panel-id]')[0]; };
+var getPanel2 = function (container) { return container.querySelectorAll('[data-panel-id]')[1]; };
+var getResizeHandle = function (container) { return container.querySelector('[data-resize-handle]'); };
+var isResizingDisabled = function (container) {
+    return getResizeHandle(container).getAttribute('data-panel-resize-handle-enabled') === 'false';
+};
+var checkPanelSize = function (panel, size) { return expect(panel.getAttribute('data-panel-size')).toBe(size); };
+var moveResizeHandle = function (container, user, from, to) { return __awaiter(void 0, void 0, void 0, function () {
+    var resizeHandle;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                resizeHandle = getResizeHandle(container);
+                return [4 /*yield*/, user.pointer([
+                        {
+                            keys: '[MouseLeft>]',
+                            target: resizeHandle,
+                            coords: {
+                                x: from.x,
+                                y: from.y
+                            }
+                        },
+                        {
+                            target: resizeHandle,
+                            coords: {
+                                x: to.x,
+                                y: to.y
+                            }
+                        },
+                        {
+                            keys: '[/MouseLeft]',
+                            target: resizeHandle,
+                            coords: {
+                                x: to.x,
+                                y: to.y
+                            }
+                        }
+                    ])];
+            case 1:
+                _a.sent();
+                return [2 /*return*/];
+        }
+    });
+}); };
+describe('ResizablePanes tests', function () {
+    beforeAll(function () {
+        jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(1000);
+        jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+            width: 1000,
+            height: 1000,
+            top: 0,
+            left: 0,
+            right: 1000,
+            bottom: 1000,
+            x: 0,
+            y: 0,
+            toJSON: function () { return ''; }
+        });
+    });
+    it('should render main parts', function () {
+        var container = setUp().container;
+        expect(getPanel1(container)).toBeInTheDocument();
+        expect(screen.getByText('Panel 1 content')).toBeInTheDocument();
+        expect(getPanel2(container)).toBeInTheDocument();
+        expect(screen.getByText('Panel 2 content')).toBeInTheDocument();
+        expect(getResizeHandle(container)).toBeInTheDocument();
+    });
+    it('should allow to resize the panels', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, container, user;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setUp(__assign(__assign({}, defaultProps), { size: '320px', minSize: '320px', maxSize: '640px', onChange: function () { }, debounceInterval: 0 })), container = _a.container, user = _a.user;
+                    expect(isResizingDisabled(container)).toBe(false);
+                    checkPanelSize(getPanel1(container), '32.0');
+                    checkPanelSize(getPanel2(container), '68.0');
+                    // move mouse to an x-coordinate between minSize and maxSize
+                    return [4 /*yield*/, moveResizeHandle(container, user, { x: 320, y: 0 }, { x: 500, y: 20 })];
+                case 1:
+                    // move mouse to an x-coordinate between minSize and maxSize
+                    _b.sent();
+                    checkPanelSize(getPanel1(container), '50.0');
+                    checkPanelSize(getPanel2(container), '50.0');
+                    // move mouse to a larger x-coordinate than max size
+                    return [4 /*yield*/, moveResizeHandle(container, user, { x: 500, y: 0 }, { x: 650, y: 20 })];
+                case 2:
+                    // move mouse to a larger x-coordinate than max size
+                    _b.sent();
+                    checkPanelSize(getPanel1(container), '64.0');
+                    checkPanelSize(getPanel2(container), '36.0');
+                    // move mouse to a smaller x-coordinate than min size
+                    return [4 /*yield*/, moveResizeHandle(container, user, { x: 640, y: 0 }, { x: 310, y: 20 })];
+                case 3:
+                    // move mouse to a smaller x-coordinate than min size
+                    _b.sent();
+                    checkPanelSize(getPanel1(container), '32.0');
+                    checkPanelSize(getPanel2(container), '68.0');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call onChange prop with debounce on panels resizing', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var debounceInterval, props, _a, user, container;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    debounceInterval = 200;
+                    props = __assign(__assign({}, defaultProps), { size: 320, debounceInterval: debounceInterval, onChange: jest.fn() });
+                    _a = setUp(props), user = _a.user, container = _a.container;
+                    return [4 /*yield*/, moveResizeHandle(container, user, { x: 320, y: 0 }, { x: 510, y: 20 })];
+                case 1:
+                    _b.sent();
+                    expect(props.onChange).not.toHaveBeenCalled();
+                    return [4 /*yield*/, delayPromise(debounceInterval + 1)];
+                case 2:
+                    _b.sent();
+                    expect(props.onChange).toHaveBeenCalledWith({
+                        isMaxSize: false,
+                        isMinSize: false,
+                        percentageSize: '51%',
+                        size: 510
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should set correct isMaxSize in props.onChange argument for positive props.maxSize', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var debounceInterval, props, _a, user, container;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    debounceInterval = 0;
+                    props = __assign(__assign({}, defaultProps), { size: 320, maxSize: 500, debounceInterval: debounceInterval, onChange: jest.fn() });
+                    _a = setUp(props), user = _a.user, container = _a.container;
+                    return [4 /*yield*/, moveResizeHandle(container, user, { x: 320, y: 0 }, { x: 510, y: 20 })];
+                case 1:
+                    _b.sent();
+                    expect(props.onChange).toHaveBeenCalledWith({
+                        isMaxSize: true,
+                        isMinSize: false,
+                        percentageSize: '50%',
+                        size: 500
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should set correct isMaxSize in props.onChange argument for negative props.maxSize', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var debounceInterval, props, _a, user, container;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    debounceInterval = 0;
+                    props = __assign(__assign({}, defaultProps), { size: 320, maxSize: -200, debounceInterval: debounceInterval, onChange: jest.fn() });
+                    _a = setUp(props), user = _a.user, container = _a.container;
+                    return [4 /*yield*/, moveResizeHandle(container, user, { x: 320, y: 0 }, { x: 800, y: 20 })];
+                case 1:
+                    _b.sent();
+                    expect(props.onChange).toHaveBeenCalledWith({
+                        isMaxSize: true,
+                        isMinSize: false,
+                        percentageSize: '80%',
+                        size: 800
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should set correct isMaxSize in props.onChange argument if props.maxSize omitted', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var debounceInterval, props, _a, user, container;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    debounceInterval = 0;
+                    props = __assign(__assign({}, defaultProps), { size: 320, debounceInterval: debounceInterval, onChange: jest.fn() });
+                    _a = setUp(props), user = _a.user, container = _a.container;
+                    return [4 /*yield*/, moveResizeHandle(container, user, { x: 320, y: 0 }, { x: 1000, y: 20 })];
+                case 1:
+                    _b.sent();
+                    expect(props.onChange).toHaveBeenCalledWith({
+                        isMaxSize: true,
+                        isMinSize: false,
+                        percentageSize: '100%',
+                        size: 1000
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should set correct isMinSize in props.onChange argument for positive props.minSize', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var debounceInterval, props, _a, user, container;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    debounceInterval = 0;
+                    props = __assign(__assign({}, defaultProps), { size: 320, minSize: 200, debounceInterval: debounceInterval, onChange: jest.fn() });
+                    _a = setUp(props), user = _a.user, container = _a.container;
+                    return [4 /*yield*/, moveResizeHandle(container, user, { x: 320, y: 0 }, { x: 200, y: 20 })];
+                case 1:
+                    _b.sent();
+                    expect(props.onChange).toHaveBeenCalledWith({
+                        isMaxSize: false,
+                        isMinSize: true,
+                        percentageSize: '20%',
+                        size: 200
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should apply negative size correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, container;
+        return __generator(this, function (_a) {
+            props = __assign(__assign({}, defaultProps), { size: -40 });
+            container = setUp(props).container;
+            checkPanelSize(getPanel1(container), '96.0');
+            checkPanelSize(getPanel2(container), '4.0');
+            return [2 /*return*/];
+        });
+    }); });
+});

package/esm/ResizablePanes/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "horizontal" | "vertical" | "resizer" | "disabled" | "panel">;

package/esm/ResizablePanes/styles.js

@@ -1,46 +1,55 @@
 import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function () { return ({
     container: {
-        position: 'relative',
-        '& .Resizer': {
-            zIndex: 1,
-            boxSizing: 'border-box',
-            backgroundClip: 'padding-box',
-            '&.disabled': {
-                cursor: 'initial',
-                height: 0,
-                margin: 0
+        position: 'relative'
+    },
+    panel: {
+        position: 'relative'
+    },
+    horizontal: {},
+    vertical: {},
+    disabled: {},
+    resizer: {
+        zIndex: 1,
+        boxSizing: 'border-box',
+        backgroundClip: 'padding-box',
+        '&$disabled': {
+            cursor: 'initial',
+            height: 0,
+            margin: 0
+        },
+        '&$horizontal': {
+            height: '11px',
+            backgroundImage: 'linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0.33))',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '100% 1px',
+            backgroundPosition: 'top',
+            width: '100%',
+            marginBottom: '-10px',
+            '&$disabled': {
+                background: 'transparent'
             },
-            '&.horizontal': {
-                height: '11px',
-                backgroundImage: 'linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0.33))',
-                backgroundRepeat: 'no-repeat',
-                backgroundSize: '100% 1px',
-                backgroundPosition: 'top',
-                width: '100%',
-                marginBottom: '-10px',
-                '&.disabled': {
-                    background: 'transparent'
-                },
-                '&:not(.disabled):hover': {
-                    cursor: 'row-resize',
-                    backgroundImage: 'linear-gradient(rgba(0, 114, 206, 0), rgba(0, 114, 206, 0.35), rgba(0, 114, 206, 1))',
-                    backgroundSize: '100% 3px'
-                }
+            '&:not($disabled):hover': {
+                cursor: 'ns-resize',
+                backgroundImage: 'linear-gradient(rgba(0, 114, 206, 0), rgba(0, 114, 206, 0.35), rgba(0, 114, 206, 1))',
+                backgroundSize: '100% 3px'
+            }
+        },
+        '&$vertical': {
+            width: '11px',
+            backgroundImage: 'linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0.33))',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '1px 100%',
+            backgroundPosition: 'left',
+            height: '100%',
+            marginRight: '-10px',
+            '&$disabled': {
+                background: 'transparent'
             },
-            '&.vertical': {
-                width: '11px',
-                backgroundImage: 'linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0.33))',
-                backgroundRepeat: 'no-repeat',
-                backgroundSize: '1px 100%',
-                backgroundPosition: 'left',
-                height: '100%',
-                marginRight: '-10px',
-                '&:not(.disabled):hover': {
-                    cursor: 'col-resize',
-                    backgroundImage: 'linear-gradient(to left, rgba(0, 114, 206, 0.35), rgba(0, 114, 206, 1), rgba(0, 114, 206, 0.35))',
-                    backgroundSize: '3px 100%'
-                }
+            '&:not($disabled):hover': {
+                cursor: 'ew-resize',
+                backgroundImage: 'linear-gradient(to left, rgba(0, 114, 206, 0.35), rgba(0, 114, 206, 1), rgba(0, 114, 206, 0.35))',
+                backgroundSize: '3px 100%'
             }
         }
     }

package/esm/SimpleMatchRules/SimpleMatchRules.js

@@ -4,22 +4,25 @@ import classnames from 'classnames';
 import { getMatchRuleSummary, formatRelevanceScore } from '@reltio/mdm-sdk';
 import Tooltip from '@mui/material/Tooltip';
 import NegativeRuleIcon from '../icons/NegativeRuleIcon';
-import { MatchRulesTitle } from '../MatchRulesTitle';
 import { useStyles } from './styles';
 export var SimpleMatchRules = function (_a) {
     var isMlMatch = _a.isMlMatch, matchRules = _a.matchRules, className = _a.className, matchRuleSummaries = _a.matchRuleSummaries;
     var styles = useStyles();
+    var hasMatchRules = matchRules.length > 0;
+    var showTitle = !isMlMatch && hasMatchRules;
     return (React.createElement("div", { "data-reltio-id": "simple-match-rules", className: classnames(styles.container, className) },
-        React.createElement("div", { className: styles.title },
-            React.createElement(MatchRulesTitle, { isMlMatch: isMlMatch })),
-        React.createElement("div", { className: styles.labelsContainer }, matchRules.map(function (matchRule) {
-            var matchRuleSummary = getMatchRuleSummary(matchRuleSummaries, matchRule.uri);
-            var relevancePercentage = formatRelevanceScore(matchRuleSummary);
-            return (React.createElement("div", { className: styles.matchRuleInfo, key: matchRule.uri, "data-reltio-id": "match-rule-info" },
-                React.createElement("div", { className: styles.matchRuleLabel },
-                    '- ',
-                    matchRule.negativeRule && React.createElement(NegativeRuleIcon, { className: styles.negativeRuleIcon }), "".concat(matchRule.label)),
-                relevancePercentage && (React.createElement(Tooltip, { title: i18n.text('Relevance score') },
-                    React.createElement("div", { className: styles.relevanceScore }, relevancePercentage)))));
-        }))));
+        React.createElement("div", { className: showTitle ? styles.bodyWithMargin : styles.bodyWithoutMargin },
+            showTitle && React.createElement("div", { className: styles.title }, i18n.text('Match rules')),
+            React.createElement("div", { className: styles.labelsContainer }, hasMatchRules
+                ? matchRules.map(function (matchRule) {
+                    var matchRuleSummary = getMatchRuleSummary(matchRuleSummaries, matchRule.uri);
+                    var relevancePercentage = formatRelevanceScore(matchRuleSummary);
+                    return (React.createElement("div", { className: styles.matchRuleInfo, key: matchRule.uri, "data-reltio-id": "match-rule-info" },
+                        React.createElement("div", { className: styles.matchRuleLabel },
+                            '- ',
+                            matchRule.negativeRule && (React.createElement(NegativeRuleIcon, { className: styles.negativeRuleIcon })), "".concat(matchRule.label)),
+                        relevancePercentage && (React.createElement(Tooltip, { title: i18n.text('Relevance score') },
+                            React.createElement("div", { className: styles.relevanceScore }, relevancePercentage)))));
+                })
+                : null))));
 };

package/esm/SimpleMatchRules/SimpleMatchRules.test.js

@@ -1,45 +1,18 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { MatchRulesTitle } from '../MatchRulesTitle';
-import NegativeRuleIcon from '../icons/NegativeRuleIcon';
+import { render, screen } from '@testing-library/react';
 import { SimpleMatchRules } from './SimpleMatchRules';
 describe('SimpleMatchRules tests', function () {
-    var getMatchRulesTitle = function (component) { return component.find(MatchRulesTitle); };
-    var getLabelContainer = function (component) { return component.find('.labelsContainer'); };
-    var getContainer = function (component) { return component.find('.container'); };
-    it('should provide isMlMatch prop to MatchRulesTitle', function () {
-        var component = shallow(React.createElement(SimpleMatchRules, { isMlMatch: true, matchRules: [] }));
-        expect(getMatchRulesTitle(component).prop('isMlMatch')).toBe(true);
-        component.setProps({ isMlMatch: false });
-        expect(getMatchRulesTitle(component).prop('isMlMatch')).toBe(false);
-    });
-    it('should render match rule correctly', function () {
-        var matchRules = [
-            { uri: 'uri1', label: 'label1' },
-            { uri: 'uri2', label: 'label2' }
-        ];
-        var component = shallow(React.createElement(SimpleMatchRules, { matchRules: matchRules }));
-        var labelContainer = getLabelContainer(component);
-        expect(labelContainer.children()).toHaveLength(2);
-        expect(labelContainer.childAt(0).text()).toContain(matchRules[0].label);
-        expect(labelContainer.childAt(1).text()).toContain(matchRules[1].label);
-    });
-    it('should provide className prop to container', function () {
-        var className = 'myClassName';
-        var component = shallow(React.createElement(SimpleMatchRules, { className: className, matchRules: [] }));
-        expect(getContainer(component).prop('className')).toContain(className);
-    });
     it('should render negative rule correctly', function () {
         var matchRules = [
             { uri: 'uri1', label: 'label1' },
             { uri: 'uri2', label: 'label2', negativeRule: {} }
         ];
-        var component = shallow(React.createElement(SimpleMatchRules, { matchRules: matchRules }));
-        var labelContainer = getLabelContainer(component);
-        expect(labelContainer.children()).toHaveLength(2);
-        expect(labelContainer.childAt(0).text()).toContain(matchRules[0].label);
-        expect(labelContainer.childAt(0).find(NegativeRuleIcon)).toHaveLength(0);
-        expect(labelContainer.childAt(1).text()).toContain(matchRules[1].label);
-        expect(labelContainer.childAt(1).find(NegativeRuleIcon)).toHaveLength(1);
+        render(React.createElement(SimpleMatchRules, { matchRules: matchRules }));
+        var ruleItems = screen.getAllByText(/^-\s+/);
+        expect(ruleItems).toHaveLength(2);
+        expect(ruleItems[0]).toHaveTextContent(matchRules[0].label);
+        expect(ruleItems[0].querySelector('svg')).not.toBeInTheDocument();
+        expect(ruleItems[1]).toHaveTextContent(matchRules[1].label);
+        expect(ruleItems[1].querySelector('svg')).toBeInTheDocument();
     });
 });

package/esm/SimpleMatchRules/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "title" | "relevanceScore" | "negativeRuleIcon" | "labelsContainer" | "matchRuleInfo" | "matchRuleLabel">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "title" | "relevanceScore" | "bodyWithMargin" | "bodyWithoutMargin" | "negativeRuleIcon" | "labelsContainer" | "matchRuleInfo" | "matchRuleLabel">;

package/esm/SimpleMatchRules/styles.js

@@ -8,6 +8,14 @@ export var useStyles = makeStyles(function (theme) { return ({
         color: theme.palette.text.secondary,
         marginBottom: '7px'
     },
+    bodyWithMargin: {
+        fontWeight: 'normal',
+        marginLeft: '16px'
+    },
+    bodyWithoutMargin: {
+        fontWeight: 'normal',
+        marginLeft: '0px'
+    },
     labelsContainer: {
         color: theme.palette.text.primary,
         marginBottom: '8px'

package/esm/SimpleMatchRulesBlock/SimpleMatchRulesBlock.js

@@ -4,7 +4,7 @@ import { MatchRulesTooltip } from '../MatchRulesTooltip';
 import { SimpleMatchRules } from '../SimpleMatchRules';
 import { MatchRulesBadge } from '../MatchRulesBadge';
 import { withTooltip } from '../HOCs/withTooltip';
-import MLMatchIcon from '../icons/MlMatch';
+import AIPowered from '../icons/AIPowered';
 import { useStyles } from './styles';
 export var MatchRuleBadgeWithTooltip = withTooltip(MatchRulesBadge);
 export var SimpleMatchRulesBlock = function (_a) {
@@ -14,7 +14,7 @@ export var SimpleMatchRulesBlock = function (_a) {
     var handleOnExpand = useCallback(function () { return setExpanded(function (expand) { return !expand; }); }, []);
     return (React.createElement("div", { className: styles.container, "data-reltio-id": "simple-match-rules-block" },
         React.createElement(MatchRuleBadgeWithTooltip, { tooltipTitle: React.createElement(MatchRulesTooltip, { matchRules: matchRules, isMlMatch: isMlMatch }), tooltipPlacement: "bottom-start", onExpand: handleOnExpand, expanded: expanded }, isMlMatch ? (React.createElement(React.Fragment, null,
-            React.createElement(MLMatchIcon, { className: styles.icon }),
-            i18n.text('Match IQ'))) : (i18n.text('Rules'))),
+            React.createElement(AIPowered, { className: styles.icon }),
+            i18n.text('AI-powered'))) : (i18n.text('Rules'))),
         expanded ? (React.createElement(SimpleMatchRules, { className: styles.rulesContainer, matchRules: matchRules, isMlMatch: isMlMatch, matchRuleSummaries: matchRuleSummaries })) : null));
 };