@reltio/components 1.4.1836-hf → 1.4.1836

package/esm/features/crosswalks/CrosswalkRow/CrosswalkRow.test.js

@@ -0,0 +1,375 @@
+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 from 'react';
+import { mount } from 'enzyme';
+import { act } from '@testing-library/react-hooks';
+import * as reactDnd from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import * as mdmSdk from '@reltio/mdm-sdk';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import Typography from '@mui/material/Typography';
+import DeleteIcon from '@mui/icons-material/Delete';
+import * as CrosswalksDisplay from '../../../contexts/CrosswalksDisplayContext';
+import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
+import { ArrowExpandButton } from '../../../ArrowExpandButton';
+import { ConfirmDeleteDialog } from '../../../ConfirmDeleteDialog';
+import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
+import { SourceIcon } from '../../../SourceIcon';
+import DependentIcon from '../../../icons/NestedAttribute';
+import { ExpandedValueTooltip } from '../../../ExpandedValueTooltip';
+import { rerenderWrapper } from '../../../test-utils';
+import { ColoredBlock } from '../ColoredBlock/ColoredBlock';
+import { CrosswalkAttributes } from '../CrosswalkAttributes';
+import { CrosswalkRow } from './CrosswalkRow';
+jest.mock('react-dnd', function () { return (__assign(__assign({}, jest.requireActual('react-dnd')), { useDrag: jest.fn() })); });
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { isCrosswalkDisabled: jest.fn() })); });
+var metadata = {
+    sources: [
+        {
+            uri: 'configuration/sources/Reltio',
+            label: 'Reltio',
+            icon: 'images/source/reltio.png',
+            abbreviation: 'Reltio'
+        },
+        {
+            uri: 'configuration/sources/AHA',
+            label: 'AHA',
+            icon: 'images/source/source_s.png',
+            abbreviation: 'AHA'
+        }
+    ]
+};
+var attributesSortingStrategy = mdmSdk.SortingStrategy.ASC_BY_NAME;
+var crosswalk = {
+    uri: 'entities/j8K1vc9/crosswalks/1kQ5cap2n',
+    type: 'configuration/sources/Reltio',
+    value: 'some value',
+    attributes: [],
+    singleAttributeUpdateDates: {},
+    createDate: '2021-05-14T05:21:14.532Z'
+};
+var defaultProps = {
+    crosswalk: crosswalk,
+    focusable: true,
+    isDependent: false,
+    disableEdit: false,
+    disableDelete: false,
+    onToggleFocus: jest.fn(),
+    onDelete: jest.fn(),
+    onEdit: jest.fn()
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var Component = function (props) {
+        return (React.createElement(MdmModuleProvider, { values: { metadata: metadata, attributesSortingStrategy: attributesSortingStrategy } },
+            React.createElement(CrosswalkRow, __assign({}, props))));
+    };
+    return mount(React.createElement(Component, __assign({}, props)));
+};
+describe('CrosswalkRow tests', function () {
+    var highlightCrosswalk = jest.fn();
+    var removeHighlight = jest.fn();
+    var toggleCrosswalkFocus = jest.fn();
+    var preview = jest.fn();
+    var useDragMock = jest.spyOn(reactDnd, 'useDrag').mockReturnValue([undefined, function () { return null; }, preview]);
+    var isCrosswalkDisabledSpy = jest.spyOn(mdmSdk, 'isCrosswalkDisabled');
+    var useHighlightedCrosswalksMock = jest.spyOn(CrosswalksDisplay, 'useHighlightedCrosswalks').mockReturnValue([]);
+    beforeEach(function () {
+        isCrosswalkDisabledSpy.mockReturnValue(false);
+        jest.clearAllMocks();
+    });
+    beforeAll(function () {
+        jest.spyOn(CrosswalksDisplay, 'useCrosswalkHighlight').mockReturnValue({
+            isHighlighted: true,
+            isDimmed: false,
+            highlightCrosswalk: highlightCrosswalk,
+            removeHighlight: removeHighlight
+        });
+        jest.spyOn(CrosswalksDisplay, 'useCrosswalkFocus').mockReturnValue({
+            isFocused: false,
+            toggleCrosswalkFocus: toggleCrosswalkFocus
+        });
+        jest.spyOn(CrosswalksDisplay, 'useCrosswalkColor').mockImplementation(function (crosswalk) { return crosswalk === null || crosswalk === void 0 ? void 0 : crosswalk.value; });
+    });
+    it('should render crosswalk correctly', function () {
+        var wrapper = setUp();
+        var button = wrapper.find(SmallIconButtonWithTooltip);
+        expect(button).toBeDefined();
+        expect(button.props()).toMatchObject({
+            icon: VisibilityIcon,
+            tooltipTitle: 'Focus',
+            disabled: false
+        });
+        expect(wrapper.find(ColoredBlock).prop('color')).toBe('some value');
+        expect(wrapper.find(ColoredBlock).prop('variant')).toBe('standart');
+        expect(wrapper.find(ArrowExpandButton)).toBeDefined();
+        expect(wrapper.find(SourceIcon)).toBeDefined();
+        expect(wrapper.find(Typography).length).toBe(2);
+        expect(wrapper.find(Typography).at(0).text()).toBe(metadata.sources[0].label);
+        expect(wrapper.find(Typography).at(1).text()).toBe(crosswalk.value);
+        expect(wrapper.find(ExpandedValueTooltip).at(0).prop('value')).toBe(metadata.sources[0].label);
+        expect(wrapper.find(ExpandedValueTooltip).at(1).prop('value')).toBe(crosswalk.value);
+    });
+    it('should support highlighting', function () {
+        var wrapper = setUp();
+        var coloredBlock = wrapper.find(ColoredBlock);
+        coloredBlock.simulate('mouseenter');
+        expect(highlightCrosswalk).toBeCalledTimes(1);
+        coloredBlock.simulate('mouseleave');
+        expect(removeHighlight).toBeCalledTimes(1);
+    });
+    it('should render disabled button without icon if focusable === false', function () {
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { focusable: false }));
+        var button = wrapper.find(SmallIconButtonWithTooltip);
+        expect(button.prop('disabled')).toBe(true);
+        expect(button.prop('icon')).toBeFalsy();
+    });
+    it('should render white background if props.isEmpty=true', function () {
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { isEmpty: true }));
+        expect(wrapper.find(ColoredBlock).prop('color')).toBe('#FFF');
+    });
+    it('should render grey background if props.isColored=false', function () {
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { isColored: false }));
+        expect(wrapper.find(ColoredBlock).prop('color')).toBe('#CACCD1');
+    });
+    it('should pass disabled variant prop for disabled crosswalk', function () {
+        isCrosswalkDisabledSpy.mockReturnValue(true);
+        var wrapper = setUp();
+        expect(wrapper.find(ColoredBlock).prop('variant')).toBe('disabled');
+    });
+    it('should call onToggleFocus when click on eye icon', function () {
+        var wrapper = setUp();
+        wrapper.find(SmallIconButtonWithTooltip).find('button').simulate('click');
+        expect(toggleCrosswalkFocus).toBeCalledTimes(1);
+    });
+    it('should render dependent icon if isDependent prop is true ', function () {
+        var dependentProps = {
+            crosswalk: crosswalk,
+            isDependent: true,
+            disableEdit: false,
+            disableDelete: false,
+            onDelete: jest.fn(),
+            onEdit: jest.fn()
+        };
+        var wrapper = setUp(dependentProps);
+        expect(wrapper.find(DependentIcon)).toBeDefined();
+    });
+    it('should toggle crosswalk attributes when click on expand icon', function () {
+        var wrapper = setUp();
+        act(function () {
+            wrapper.find(ArrowExpandButton).find('button').simulate('click');
+        });
+        rerenderWrapper(wrapper);
+        var deleteButton = wrapper
+            .find(SmallIconButtonWithTooltip)
+            .findWhere(function (n) { return n.prop('icon') === DeleteIcon; })
+            .at(0);
+        expect(deleteButton.props()).toMatchObject({
+            disabled: false,
+            tooltipTitle: 'Delete crosswalk'
+        });
+        expect(wrapper.find(CrosswalkAttributes).props()).toMatchObject({
+            crosswalk: defaultProps.crosswalk,
+            canEditAttribute: true
+        });
+        act(function () {
+            wrapper.find(ArrowExpandButton).find('button').simulate('click');
+        });
+        rerenderWrapper(wrapper);
+        var newDeleteButton = wrapper
+            .find(SmallIconButtonWithTooltip)
+            .findWhere(function (n) { return n.prop('className') === 'deleteCrosswalkButton'; });
+        expect(newDeleteButton.length).toBe(0);
+        expect(wrapper.find(CrosswalkAttributes).length).toBe(0);
+    });
+    it('should disable delete icon if props.disableDelete = true', function () {
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { disableDelete: true }));
+        act(function () {
+            wrapper.find(ArrowExpandButton).find('button').simulate('click');
+        });
+        rerenderWrapper(wrapper);
+        var deleteButton = wrapper
+            .find(SmallIconButtonWithTooltip)
+            .findWhere(function (n) { return n.prop('icon') === DeleteIcon; })
+            .at(0);
+        expect(deleteButton.prop('disabled')).toBeTruthy();
+        expect(deleteButton.prop('tooltipTitle')).toBe("You don't have permissions to delete");
+    });
+    it('should disable editing in CrosswalkAttributes if props.disableEdit = true', function () {
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { disableEdit: true }));
+        act(function () {
+            wrapper.find(ArrowExpandButton).find('button').simulate('click');
+        });
+        rerenderWrapper(wrapper);
+        expect(wrapper.find(CrosswalkAttributes).prop('canEditAttribute')).toBeFalsy();
+    });
+    it('should not render delete button for reference crosswalk', function () {
+        var props = __assign(__assign({}, defaultProps), { crosswalk: __assign(__assign({}, crosswalk), { ownerType: 'relation' }) });
+        var wrapper = setUp(props);
+        act(function () {
+            wrapper.find(ArrowExpandButton).find('button').simulate('click');
+        });
+        rerenderWrapper(wrapper);
+        var deleteButton = wrapper
+            .find(SmallIconButtonWithTooltip)
+            .findWhere(function (n) { return n.prop('className') === 'deleteCrosswalkButton'; });
+        expect(deleteButton).toHaveLength(0);
+    });
+    it('should not render delete button for disabled crosswalk', function () {
+        isCrosswalkDisabledSpy.mockReturnValue(true);
+        var wrapper = setUp();
+        act(function () {
+            wrapper.find(ArrowExpandButton).find('button').simulate('click');
+        });
+        rerenderWrapper(wrapper);
+        var deleteButton = wrapper
+            .find(SmallIconButtonWithTooltip)
+            .findWhere(function (n) { return n.prop('className') === 'deleteCrosswalkButton'; });
+        expect(deleteButton).toHaveLength(0);
+    });
+    it('should call props.onDelete and not call toggleCrosswalkFocus if isFocused === false after confirmation on crosswalk delete', function () {
+        var wrapper = setUp();
+        act(function () {
+            wrapper.find(ArrowExpandButton).find('button').simulate('click');
+        });
+        rerenderWrapper(wrapper);
+        expect(wrapper.find(ConfirmDeleteDialog).at(0).at(0).prop('open')).toBe(false);
+        act(function () {
+            wrapper
+                .find(SmallIconButtonWithTooltip)
+                .findWhere(function (n) { return n.prop('icon') === DeleteIcon; })
+                .find('button')
+                .simulate('click');
+        });
+        rerenderWrapper(wrapper);
+        expect(wrapper.find(ConfirmDeleteDialog).at(0).prop('open')).toBe(true);
+        act(function () {
+            wrapper.find(ConfirmDeleteDialog).at(0).prop('onConfirm')();
+        });
+        wrapper.update();
+        expect(defaultProps.onDelete).toHaveBeenCalledWith('1kQ5cap2n');
+        expect(toggleCrosswalkFocus).toBeCalledTimes(0);
+    });
+    it('should call props.onDelete and call toggleCrosswalkFocus if isFocused === true after confirmation on crosswalk delete', function () {
+        jest.spyOn(CrosswalksDisplay, 'useCrosswalkFocus').mockReturnValue({
+            isFocused: true,
+            toggleCrosswalkFocus: toggleCrosswalkFocus
+        });
+        var wrapper = setUp();
+        act(function () {
+            wrapper.find(ArrowExpandButton).find('button').simulate('click');
+        });
+        rerenderWrapper(wrapper);
+        expect(wrapper.find(ConfirmDeleteDialog).at(0).prop('open')).toBe(false);
+        act(function () {
+            wrapper
+                .find(SmallIconButtonWithTooltip)
+                .findWhere(function (n) { return n.prop('icon') === DeleteIcon; })
+                .find('button')
+                .simulate('click');
+        });
+        rerenderWrapper(wrapper);
+        expect(wrapper.find(ConfirmDeleteDialog).at(0).prop('open')).toBe(true);
+        act(function () {
+            wrapper.find(ConfirmDeleteDialog).at(0).prop('onConfirm')();
+        });
+        rerenderWrapper(wrapper);
+        expect(defaultProps.onDelete).toHaveBeenCalledWith('1kQ5cap2n');
+        expect(toggleCrosswalkFocus).toBeCalledTimes(1);
+    });
+    it('should not call props.onDelete without confirmation on crosswalk delete', function () {
+        var wrapper = setUp();
+        act(function () {
+            wrapper.find(ArrowExpandButton).find('button').simulate('click');
+        });
+        rerenderWrapper(wrapper);
+        expect(wrapper.find(ConfirmDeleteDialog).at(0).prop('open')).toBe(false);
+        act(function () {
+            wrapper
+                .find(SmallIconButtonWithTooltip)
+                .findWhere(function (n) { return n.prop('icon') === DeleteIcon; })
+                .find('button')
+                .simulate('click');
+        });
+        rerenderWrapper(wrapper);
+        expect(wrapper.find(ConfirmDeleteDialog).at(0).prop('open')).toBe(true);
+        act(function () {
+            wrapper.find(ConfirmDeleteDialog).at(0).prop('onClose')();
+        });
+        rerenderWrapper(wrapper);
+        expect(wrapper.find(ConfirmDeleteDialog).at(0).prop('open')).toBe(false);
+        expect(defaultProps.onDelete).not.toBeCalled();
+    });
+    it('should call props.onEdit when calling CrosswalkAttributes onEditAttribute prop', function () {
+        var wrapper = setUp();
+        wrapper.find(ArrowExpandButton).find('button').simulate('click');
+        rerenderWrapper(wrapper);
+        var attributeName = 'deleteDate';
+        var value = new Date('01/01/2001').valueOf().toString();
+        wrapper.find(CrosswalkAttributes).prop('onEditAttribute')(attributeName, value);
+        expect(defaultProps.onEdit).toHaveBeenCalledWith({
+            crosswalkId: '1kQ5cap2n',
+            attributeName: attributeName,
+            value: value
+        });
+    });
+    it('should call props.onEdit when calling CrosswalkAttributes onDeleteAttribute prop', function () {
+        var wrapper = setUp();
+        wrapper.find(ArrowExpandButton).find('button').simulate('click');
+        rerenderWrapper(wrapper);
+        var attributeName = 'deleteDate';
+        wrapper.find(CrosswalkAttributes).prop('onDeleteAttribute')(attributeName);
+        expect(defaultProps.onEdit).toHaveBeenCalledWith({
+            crosswalkId: '1kQ5cap2n',
+            attributeName: attributeName
+        });
+    });
+    it('should scroll to row if focusable and current crosswalk is highlighted', function () {
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { focusable: true }));
+        var node = wrapper.find('.root').getDOMNode();
+        node.scrollIntoView = jest.fn();
+        expect(node.scrollIntoView).not.toBeCalled();
+        useHighlightedCrosswalksMock.mockReturnValueOnce([
+            {
+                uri: 'entities/j8K1vc9/crosswalks/1kQ5cap2n',
+                type: 'configuration/sources/Reltio',
+                value: 'some value'
+            }
+        ]);
+        wrapper.setProps({ crosswalk: __assign({}, crosswalk) });
+        expect(node.scrollIntoView).toBeCalled();
+    });
+    describe('dnd', function () {
+        afterEach(function () {
+            useDragMock.mockClear();
+        });
+        it('should use correct drag item', function () {
+            setUp();
+            var _a = useDragMock.mock.calls[0][0], item = _a.item, canDrag = _a.canDrag;
+            expect(item).toEqual({
+                type: 'Crosswalk',
+                crosswalk: defaultProps.crosswalk
+            });
+            expect(canDrag).toBe(true);
+        });
+        it('should use empty image preview', function () {
+            setUp();
+            expect(preview).toBeCalledWith(getEmptyImage(), { captureDraggingState: true });
+        });
+        it('should not allow drag if crosswalk is disabled', function () {
+            isCrosswalkDisabledSpy.mockReturnValue(true);
+            setUp();
+            var canDrag = useDragMock.mock.calls[0][0].canDrag;
+            expect(canDrag).toBe(false);
+        });
+    });
+});

package/esm/features/crosswalks/CrosswalkRow/index.d.ts

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

package/esm/features/crosswalks/CrosswalkRow/index.js

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

package/esm/features/crosswalks/CrosswalkRow/styles.d.ts

@@ -0,0 +1,7 @@
+type StylesProps = {
+    color?: string;
+    isOpaque?: boolean;
+    isFocused?: boolean;
+};
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"header" | "root" | "attributesWrapper" | "sourceIcon" | "focusedIcon" | "crosswalkWrapper" | "deleteCrosswalkButton" | "labelValue" | "dependentIcon">;
+export {};

package/esm/features/crosswalks/DummyCrosswalkRow/DummyCrosswalkRow.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    crosswalkType: string;
+    focusable?: boolean;
+};
+export declare const DummyCrosswalkRow: React.MemoExoticComponent<({ crosswalkType, focusable }: Props) => JSX.Element>;
+export {};

package/esm/features/crosswalks/DummyCrosswalkRow/DummyCrosswalkRow.js

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+import { getSourceSystemLabel } from '@reltio/mdm-sdk';
+import Typography from '@mui/material/Typography';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { useMdmMetadata } from '../../../contexts/MdmModuleContext';
+import { useCrosswalkHighlight } from '../../../contexts/CrosswalksDisplayContext';
+import { SourceIcon } from '../../../SourceIcon';
+import { SmallIconButton } from '../../../SmallIconButton';
+import { useStyles } from './styles';
+export var DummyCrosswalkRow = memo(function (_a) {
+    var crosswalkType = _a.crosswalkType, _b = _a.focusable, focusable = _b === void 0 ? true : _b;
+    var isDimmed = useCrosswalkHighlight().isDimmed;
+    var styles = useStyles({ isOpaque: !isDimmed });
+    var metadata = useMdmMetadata();
+    var sourceSystemLabel = getSourceSystemLabel(metadata, crosswalkType);
+    return (React.createElement("div", { className: styles.root },
+        React.createElement(SmallIconButton, { size: "XXS", className: styles.focusedIcon, icon: focusable && VisibilityIcon, disabled: true }),
+        React.createElement("div", { className: styles.wrapper },
+            React.createElement(SourceIcon, { className: styles.sourceIcon, sourceType: crosswalkType }),
+            React.createElement(Typography, { variant: 'body2' }, sourceSystemLabel))));
+});
+DummyCrosswalkRow.displayName = 'DummyCrosswalkRow';

package/esm/features/crosswalks/DummyCrosswalkRow/DummyCrosswalkRow.test.d.ts

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

package/esm/features/crosswalks/DummyCrosswalkRow/DummyCrosswalkRow.test.js

@@ -0,0 +1,41 @@
+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 from 'react';
+import { screen, render } from '@testing-library/react';
+import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
+import { DummyCrosswalkRow } from './DummyCrosswalkRow';
+var metadata = { sources: [{ uri: 'configuration/source/FB', label: 'Facebook' }] };
+var defaultProps = { crosswalkType: 'configuration/source/FB' };
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (React.createElement(MdmModuleProvider, { values: { metadata: metadata } }, children));
+    };
+    return render(React.createElement(DummyCrosswalkRow, __assign({}, props)), { wrapper: Providers });
+};
+describe('DummyCrosswalkRow tests', function () {
+    it('should render dummy crosswalk correctly', function () {
+        setUp();
+        var button = screen.getByRole('button');
+        expect(button).toBeDisabled();
+        expect(button).not.toBeEmptyDOMElement();
+        screen.getByText('Facebook');
+        screen.getByText('F');
+    });
+    it('should not show eye icon if focused === false', function () {
+        setUp(__assign(__assign({}, defaultProps), { focusable: false }));
+        var button = screen.getByRole('button');
+        expect(button).toBeDisabled();
+        expect(button).toBeEmptyDOMElement();
+    });
+});

package/esm/features/crosswalks/DummyCrosswalkRow/index.d.ts

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

package/esm/features/crosswalks/DummyCrosswalkRow/index.js

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

package/esm/features/crosswalks/ShowDependentLink/ShowDependentLink.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    showMore: boolean;
+    onClick: () => void;
+};
+export declare const ShowDependentLink: ({ showMore, onClick }: Props) => JSX.Element;
+export {};

package/esm/features/crosswalks/ShowDependentLink/ShowDependentLink.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Link from '@mui/material/Link';
+import i18n from 'ui-i18n';
+import { useStyles } from './styles';
+export var ShowDependentLink = function (_a) {
+    var showMore = _a.showMore, onClick = _a.onClick;
+    var styles = useStyles();
+    return (React.createElement(Link, { className: styles.root, component: "button", variant: "caption", underline: "none", onClick: onClick },
+        React.createElement("span", null, showMore ? i18n.text('View dependent crosswalks') : i18n.text('Hide dependent crosswalks'))));
+};

package/esm/features/crosswalks/ShowDependentLink/ShowDependentLink.test.d.ts

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

package/esm/features/crosswalks/ShowDependentLink/ShowDependentLink.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Link from '@mui/material/Link';
+import { ShowDependentLink } from './ShowDependentLink';
+describe('ShowDependentLink tests', function () {
+    it('should render "View dependent crosswalks" link for props.showMore=true', function () {
+        var wrapper = shallow(React.createElement(ShowDependentLink, { showMore: true, onClick: function () { } }));
+        expect(wrapper.find(Link).text()).toBe('View dependent crosswalks');
+    });
+    it('should render "Hide dependent crosswalks" link for props.showMore=false', function () {
+        var wrapper = shallow(React.createElement(ShowDependentLink, { showMore: false, onClick: function () { } }));
+        expect(wrapper.find(Link).text()).toBe('Hide dependent crosswalks');
+    });
+    it('should render call props.onClick on link click', function () {
+        var onClick = jest.fn();
+        var wrapper = shallow(React.createElement(ShowDependentLink, { showMore: true, onClick: onClick }));
+        wrapper.find(Link).simulate('click');
+        expect(onClick).toBeCalled();
+    });
+});

package/esm/features/crosswalks/ShowDependentLink/index.d.ts

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

package/esm/features/crosswalks/ShowDependentLink/index.js

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

package/esm/features/crosswalks/ShowDependentLink/styles.d.ts

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

package/esm/features/crosswalks/SourceCrosswalksRow/SourceCrosswalksRow.d.ts

@@ -0,0 +1,19 @@
+import { CrosswalksByTypes } from '../types';
+type Props = {
+    source: string;
+    crosswalksByTypes: CrosswalksByTypes;
+    showCrosswalkColors?: boolean;
+    crosswalksFocusEnabled?: boolean;
+    expanded?: boolean;
+    disableEditCrosswalk: boolean;
+    disableDeleteCrosswalk: boolean;
+    onEdit: (event: {
+        crosswalkId: string;
+        attributeName: string;
+        value?: string;
+    }) => void;
+    onDelete: (crosswalkId: string) => void;
+    onToggleExpanded: () => void;
+};
+export declare const SourceCrosswalksRow: ({ source, crosswalksByTypes, showCrosswalkColors, crosswalksFocusEnabled, expanded, disableEditCrosswalk, disableDeleteCrosswalk, onEdit, onDelete, onToggleExpanded }: Props) => JSX.Element;
+export {};

package/esm/features/crosswalks/SourceCrosswalksRow/SourceCrosswalksRow.js

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { eqCrosswalks } from '@reltio/mdm-sdk';
+import { useHighlightedCrosswalks } from '../../../contexts/CrosswalksDisplayContext';
+import { DummyCrosswalkRow } from '../DummyCrosswalkRow';
+import { CrosswalkRow } from '../CrosswalkRow';
+import { ShowDependentLink } from '../ShowDependentLink';
+import { CrosswalkType } from '../types';
+export var SourceCrosswalksRow = function (_a) {
+    var source = _a.source, crosswalksByTypes = _a.crosswalksByTypes, _b = _a.showCrosswalkColors, showCrosswalkColors = _b === void 0 ? true : _b, _c = _a.crosswalksFocusEnabled, crosswalksFocusEnabled = _c === void 0 ? true : _c, expanded = _a.expanded, disableEditCrosswalk = _a.disableEditCrosswalk, disableDeleteCrosswalk = _a.disableDeleteCrosswalk, onEdit = _a.onEdit, onDelete = _a.onDelete, onToggleExpanded = _a.onToggleExpanded;
+    var highlightedCrosswalks = useHighlightedCrosswalks();
+    useEffect(function () {
+        if (!expanded &&
+            crosswalksFocusEnabled &&
+            crosswalksByTypes[CrosswalkType.Dependent].some(function (dependentCrosswalk) {
+                return highlightedCrosswalks.some(eqCrosswalks(dependentCrosswalk));
+            })) {
+            onToggleExpanded();
+        }
+    }, [highlightedCrosswalks]);
+    return (React.createElement(React.Fragment, null,
+        crosswalksByTypes[CrosswalkType.Simple].length === 0 &&
+            crosswalksByTypes[CrosswalkType.Empty].length === 0 && (React.createElement(DummyCrosswalkRow, { crosswalkType: source, focusable: crosswalksFocusEnabled })),
+        crosswalksByTypes[CrosswalkType.Simple].map(function (crosswalk) { return (React.createElement(CrosswalkRow, { key: crosswalk.uri, crosswalk: crosswalk, focusable: crosswalksFocusEnabled, disableEdit: disableEditCrosswalk, disableDelete: disableDeleteCrosswalk, onDelete: onDelete, onEdit: onEdit, isColored: showCrosswalkColors })); }),
+        crosswalksByTypes[CrosswalkType.Empty].map(function (crosswalk) { return (React.createElement(CrosswalkRow, { key: crosswalk.uri, crosswalk: crosswalk, focusable: crosswalksFocusEnabled, isEmpty: true, disableEdit: disableEditCrosswalk, disableDelete: disableDeleteCrosswalk, onDelete: onDelete, onEdit: onEdit, isColored: showCrosswalkColors })); }),
+        expanded &&
+            crosswalksByTypes[CrosswalkType.Dependent].map(function (crosswalk) { return (React.createElement(CrosswalkRow, { key: crosswalk.uri, crosswalk: crosswalk, isDependent: true, disableEdit: disableEditCrosswalk, disableDelete: disableDeleteCrosswalk, onDelete: onDelete, onEdit: onEdit, focusable: crosswalksFocusEnabled, isColored: showCrosswalkColors })); }),
+        crosswalksByTypes[CrosswalkType.Dependent].length > 0 && (React.createElement(ShowDependentLink, { showMore: !expanded, onClick: function () { return onToggleExpanded(); } }))));
+};

package/esm/features/crosswalks/SourceCrosswalksRow/SourceCrosswalksRow.test.d.ts

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