@reltio/components 1.4.1909 → 1.4.1911

package/cjs/ProfileBand/ProfileBand.js

@@ -56,7 +56,7 @@ var ProfileBand = function (_a) {
     var isActive = (0, mdm_sdk_1.isActiveObject)(entity);
     var entityUri = entity.uri;
     var entityId = (0, mdm_sdk_1.getEntityId)(entity);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.profileBandWrapper, className) },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.profileBandWrapper, className), "data-reltio-id": 'reltio-profile-band' },
         react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.profileBand, (_b = {},
                 _b[styles.inactive] = !isActive,
                 _b)), "data-entity-uri": entityUri },

package/cjs/ProfileResizablePanes/ProfileResizablePanes.spec.js

@@ -99,11 +99,28 @@ var setUp = function (props) {
         react_1.default.createElement(PaneStub, { key: 0, id: "content" }),
         react_1.default.createElement(PaneStub, { key: 1, id: "rightPanel" })), { wrapper: Providers })), { user: user });
 };
-var getSplitPane1 = function (container) { return container.getElementsByClassName('Pane1')[0]; };
-var getSplitPane2 = function (container) { return container.getElementsByClassName('Pane2')[0]; };
-var getSplitPanesResizer = function (container) { return container.getElementsByClassName('Resizer')[0]; };
-var isResizingDisabled = function (container) { return getSplitPanesResizer(container).classList.contains('disabled'); };
+var getSplitPane1 = function (container) { return container.querySelectorAll('[data-panel-id]')[0]; };
+var getSplitPane2 = function (container) { return container.querySelectorAll('[data-panel-id]')[1]; };
+var getSplitPanesResizer = function (container) { return container.querySelector('[data-resize-handle]'); };
+var isResizingDisabled = function (container) {
+    return getSplitPanesResizer(container).getAttribute('data-panel-resize-handle-enabled') === 'false';
+};
+var checkPanelSize = function (panel, size) { return expect(panel.getAttribute('data-panel-size')).toBe(size); };
 describe('ProfileResizablePanes 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 resizable panes with closed second pane (active is undefined)', function () {
         var container = setUp().container;
         expect(react_2.screen.getByTestId('content')).toBeInTheDocument();
@@ -111,10 +128,11 @@ describe('ProfileResizablePanes tests', function () {
         expect(getSplitPane1(container)).toBeInTheDocument();
         expect(getSplitPane2(container)).toBeInTheDocument();
         expect(isResizingDisabled(container)).toBe(true);
-        expect(getSplitPane2(container).style.width).toBe('0px');
+        checkPanelSize(getSplitPane1(container), '100.0');
+        checkPanelSize(getSplitPane2(container), '0.0');
         expect(react_2.screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
         expect(react_2.screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
-        expect(react_2.screen.getByRole('presentation')).toBeInTheDocument();
+        expect(react_2.screen.getByRole('separator')).toBeInTheDocument();
     });
     it('should render resizable panes with open second pane', function () { return __awaiter(void 0, void 0, void 0, function () {
         var _a, container, user, button2;
@@ -127,7 +145,8 @@ describe('ProfileResizablePanes tests', function () {
                     expect(getSplitPane1(container)).toBeInTheDocument();
                     expect(getSplitPane2(container)).toBeInTheDocument();
                     expect(isResizingDisabled(container)).toBe(true);
-                    expect(getSplitPane2(container).style.width).toBe('0px');
+                    checkPanelSize(getSplitPane1(container), '100.0');
+                    checkPanelSize(getSplitPane2(container), '0.0');
                     expect(react_2.screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
                     expect(react_2.screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
                     button2 = react_2.screen.getByRole('button', { name: 'Button 2' });
@@ -135,7 +154,8 @@ describe('ProfileResizablePanes tests', function () {
                 case 1:
                     _b.sent();
                     expect(isResizingDisabled(container)).toBe(false);
-                    expect(getSplitPane2(container).style.width).toBe('480px');
+                    checkPanelSize(getSplitPane1(container), '52.0');
+                    checkPanelSize(getSplitPane2(container), '48.0');
                     expect(react_2.screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
                     expect(react_2.screen.getByTestId('reltio-profile-right-side-button-2')).toBeInTheDocument();
                     return [2 /*return*/];
@@ -146,11 +166,11 @@ describe('ProfileResizablePanes tests', function () {
         var container;
         return __generator(this, function (_a) {
             container = setUp(__assign(__assign({}, defaultProps), { disabled: true })).container;
-            expect(getSplitPane2(container).style.width).toBe('0px');
+            checkPanelSize(getSplitPane2(container), '0.0');
             expect(react_2.screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
             expect(react_2.screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
             expect(isResizingDisabled(container)).toBe(true);
-            expect(getSplitPane2(container).style.width).toBe('0px');
+            checkPanelSize(getSplitPane2(container), '0.0');
             expect(react_2.screen.getByRole('button', { name: 'Button 1' }).hasAttribute('disabled')).toBe(true);
             expect(react_2.screen.getByRole('button', { name: 'Button 2' }).hasAttribute('disabled')).toBe(true);
             return [2 /*return*/];
@@ -163,80 +183,105 @@ describe('ProfileResizablePanes tests', function () {
                 case 0:
                     _a = setUp(__assign(__assign({}, defaultProps), { perspectiveId: 'graph' })), container = _a.container, user = _a.user;
                     expect(isResizingDisabled(container)).toBe(false);
-                    expect(getSplitPane2(container).style.width).toBe('320px');
+                    checkPanelSize(getSplitPane1(container), '68.0');
+                    checkPanelSize(getSplitPane2(container), '32.0');
                     expect(react_2.screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
                     expect(react_2.screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
-                    Divider = react_2.screen.getByRole('presentation');
+                    Divider = react_2.screen.getByRole('separator');
                     expect(Divider).toBeInTheDocument();
                     // move mouse to an x-coordinate between MIN_R_PANE_SIZE and MAX_R_PANE_SIZE
-                    return [4 /*yield*/, user.pointer({
-                            keys: '[MouseLeft>]',
-                            target: Divider,
-                            coords: {
-                                x: 0,
-                                y: 0
+                    return [4 /*yield*/, user.pointer([
+                            {
+                                keys: '[MouseLeft>]',
+                                target: Divider,
+                                coords: {
+                                    x: 680,
+                                    y: 0
+                                }
+                            },
+                            {
+                                target: Divider,
+                                coords: {
+                                    x: 500,
+                                    y: 20
+                                }
+                            },
+                            {
+                                keys: '[/MouseLeft]',
+                                target: Divider,
+                                coords: {
+                                    x: 500,
+                                    y: 20
+                                }
                             }
-                        })];
+                        ])];
                 case 1:
                     // move mouse to an x-coordinate between MIN_R_PANE_SIZE and MAX_R_PANE_SIZE
                     _b.sent();
-                    return [4 /*yield*/, user.pointer({
-                            keys: '[/MouseLeft]',
-                            target: Divider,
-                            coords: {
-                                x: -500,
-                                y: 20
-                            }
-                        })];
-                case 2:
-                    _b.sent();
-                    expect(getSplitPane2(container).style.width).toBe('500px');
+                    checkPanelSize(getSplitPane1(container), '50.0');
+                    checkPanelSize(getSplitPane2(container), '50.0');
                     // move mouse to a larger x-coordinate than MAX_R_PANE_SIZE
-                    return [4 /*yield*/, user.pointer({
-                            keys: '[MouseLeft>]',
-                            target: Divider,
-                            coords: {
-                                x: 0,
-                                y: 0
+                    return [4 /*yield*/, user.pointer([
+                            {
+                                keys: '[MouseLeft>]',
+                                target: Divider,
+                                coords: {
+                                    x: 500,
+                                    y: 0
+                                }
+                            },
+                            {
+                                target: Divider,
+                                coords: {
+                                    x: 300,
+                                    y: 20
+                                }
+                            },
+                            {
+                                keys: '[/MouseLeft]',
+                                target: Divider,
+                                coords: {
+                                    x: 300,
+                                    y: 20
+                                }
                             }
-                        })];
-                case 3:
+                        ])];
+                case 2:
                     // move mouse to a larger x-coordinate than MAX_R_PANE_SIZE
                     _b.sent();
-                    return [4 /*yield*/, user.pointer({
-                            keys: '[/MouseLeft]',
-                            target: Divider,
-                            coords: {
-                                x: -650,
-                                y: 0
-                            }
-                        })];
-                case 4:
-                    _b.sent();
-                    expect(getSplitPane2(container).style.width).toBe('640px');
+                    checkPanelSize(getSplitPane1(container), '36.0');
+                    checkPanelSize(getSplitPane2(container), '64.0');
                     // move mouse to a smaller x-coordinate than MIN_R_PANE_SIZE
-                    return [4 /*yield*/, user.pointer({
-                            keys: '[MouseLeft>]',
-                            target: Divider,
-                            coords: {
-                                x: 0,
-                                y: 0
+                    return [4 /*yield*/, user.pointer([
+                            {
+                                keys: '[MouseLeft>]',
+                                target: Divider,
+                                coords: {
+                                    x: 360,
+                                    y: 0
+                                }
+                            },
+                            {
+                                target: Divider,
+                                coords: {
+                                    x: 690,
+                                    y: 20
+                                }
+                            },
+                            {
+                                keys: '[/MouseLeft]',
+                                target: Divider,
+                                coords: {
+                                    x: 690,
+                                    y: 20
+                                }
                             }
-                        })];
-                case 5:
+                        ])];
+                case 3:
                     // move mouse to a smaller x-coordinate than MIN_R_PANE_SIZE
                     _b.sent();
-                    return [4 /*yield*/, user.pointer({
-                            keys: '[/MouseLeft]',
-                            target: Divider,
-                            coords: {
-                                x: -310,
-                                y: 0
-                            }
-                        })];
-                case 6:
-                    _b.sent();
-                    expect(getSplitPane2(container).style.width).toBe('320px');
+                    checkPanelSize(getSplitPane1(container), '68.0');
+                    checkPanelSize(getSplitPane2(container), '32.0');
                     return [2 /*return*/];
             }
         });

package/cjs/ResizablePanes/ResizablePanes.d.ts

@@ -12,15 +12,16 @@ type Props = {
     allowResize?: boolean;
     primary?: 'first' | 'second';
     minSize?: Size;
+    /** if you set the maxSize to negative value (e.g. -200), then the splitter stops 200px before the border (in other words it sets the minimal size of the 'resizable' pane in this case) */
     maxSize?: Size;
-    defaultSize?: Size;
     debounceInterval?: number;
+    /** Can be a positive or negative number (e.g., 250, -250), a percentage string (e.g., "50%"), or a string with pixels (e.g., "50px") */
     size?: Size;
     orientation?: 'vertical' | 'horizontal';
     onChange?: ({ size, percentageSize, isMaxSize, isMinSize }: OnChange) => void;
 };
 export declare const ResizablePanes: {
-    ({ className, children, orientation, primary, defaultSize, size, minSize, maxSize, allowResize, debounceInterval, onChange }: Props): JSX.Element;
+    ({ className, children, orientation, primary, size, minSize, maxSize, allowResize, debounceInterval, onChange }: Props): JSX.Element;
     displayName: string;
 };
 export {};

package/cjs/ResizablePanes/ResizablePanes.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -29,41 +40,97 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResizablePanes = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var react_split_pane_1 = __importDefault(require("react-split-pane"));
+var react_resizable_panels_1 = require("react-resizable-panels");
 var styles_1 = require("@mui/material/styles");
+var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var styles_2 = require("./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); };
 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 = (0, styles_2.useStyles)();
     var theme = (0, styles_1.useTheme)();
-    var _c = (0, react_1.useState)(null), containerEl = _c[0], setContainerEl = _c[1];
-    var _d = (0, react_1.useState)(true), isPaneAnimationEnabled = _d[0], setIsPaneAnimationEnabled = _d[1];
+    var panelRef = (0, react_1.useRef)();
+    var _f = (0, react_1.useState)(null), containerEl = _f[0], setContainerEl = _f[1];
+    var _g = (0, react_1.useState)(0), percentageMinSize = _g[0], setPercentageMinSize = _g[1];
+    var _h = (0, react_1.useState)(0), percentageMaxSize = _h[0], setPercentageMaxSize = _h[1];
+    var _j = (0, react_1.useState)(true), isPaneAnimationEnabled = _j[0], setIsPaneAnimationEnabled = _j[1];
     var enableAnimation = (0, react_1.useCallback)(function () { return setIsPaneAnimationEnabled(true); }, []);
     var disableAnimation = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(function (size, minMaxSize) {
+        if (size === 0 || size === 100)
+            return 0;
+        return convertSize(minMaxSize) || 0;
+    }, [convertSize]);
+    var actualizeSizes = (0, react_1.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]);
+    (0, react_1.useEffect)(function () {
+        actualizeSizes();
+    }, [actualizeSizes, percentageMaxSize, percentageMinSize]);
     var handleChange = (0, react_1.useCallback)((0, mdm_sdk_1.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 = (0, react_1.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 = (0, react_1.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_1.default.createElement("div", { ref: setContainerEl, className: (0, classnames_1.default)(styles.container, className) },
-        react_1.default.createElement(react_split_pane_1.default, { 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_1.default.createElement(react_resize_detector_1.default, { handleHeight: isHorizontal(orientation), handleWidth: !isHorizontal(orientation), onResize: actualizeSizes, refreshMode: "debounce", refreshRate: 50 }),
+        react_1.default.createElement(react_resizable_panels_1.PanelGroup, { direction: isHorizontal(orientation) ? 'vertical' : 'horizontal' },
+            react_1.default.createElement(react_resizable_panels_1.Panel, __assign({}, (primary === 'first' ? primaryPanelProps : secondaryPanelProps)), children[0]),
+            react_1.default.createElement(react_resizable_panels_1.PanelResizeHandle, { className: (0, classnames_1.default)(styles.resizer, styles[orientation], (_b = {}, _b[styles.disabled] = !allowResize, _b)), disabled: !allowResize, hitAreaMargins: { coarse: 0, fine: 0 }, onDragging: handleDragging }),
+            react_1.default.createElement(react_resizable_panels_1.Panel, __assign({}, (primary === 'second' ? primaryPanelProps : secondaryPanelProps)), children[1]))));
 };
 exports.ResizablePanes = ResizablePanes;
 exports.ResizablePanes.displayName = 'ResizablePanes';