@reltio/components 1.4.1876 → 1.4.1877

package/cjs/Popper/helpers.test.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var helpers_1 = require("./helpers");
+describe('Popper helpers tests', function () {
+    afterEach(function () {
+        jest.restoreAllMocks();
+    });
+    describe('resizeBackdrops behavior', function () {
+        var rafIdValue = 1;
+        it('should calculate backdrop divs size and position and schedule requestAnimationFrame', function () {
+            jest.spyOn(global, 'requestAnimationFrame').mockReturnValue(rafIdValue);
+            var anchorEl = {
+                getBoundingClientRect: function () { return ({ top: 100, left: 101, right: 200, bottom: 202 }); }
+            }, leftBackdropRef = { current: { style: {} } }, rightBackdropRef = { current: { style: {} } }, topBackdropRef = { current: { style: {} } }, bottomBackdropRef = { current: { style: {} } }, rafIdRef = { current: null };
+            (0, helpers_1.resizeBackdrops)({
+                anchorEl: anchorEl,
+                leftBackdropRef: leftBackdropRef,
+                rightBackdropRef: rightBackdropRef,
+                topBackdropRef: topBackdropRef,
+                bottomBackdropRef: bottomBackdropRef,
+                rafIdRef: rafIdRef
+            });
+            expect(topBackdropRef.current.style.top).toBe('0');
+            expect(topBackdropRef.current.style.left).toBe('0');
+            expect(topBackdropRef.current.style.right).toBe('0');
+            expect(topBackdropRef.current.style.height).toBe('100px');
+            expect(leftBackdropRef.current.style.top).toBe('0');
+            expect(leftBackdropRef.current.style.left).toBe('0');
+            expect(leftBackdropRef.current.style.width).toBe('101px');
+            expect(leftBackdropRef.current.style.bottom).toBe('0');
+            expect(rightBackdropRef.current.style.top).toBe('0');
+            expect(rightBackdropRef.current.style.left).toBe('200px');
+            expect(rightBackdropRef.current.style.right).toBe('0');
+            expect(rightBackdropRef.current.style.bottom).toBe('0');
+            expect(bottomBackdropRef.current.style.top).toBe('202px');
+            expect(bottomBackdropRef.current.style.left).toBe('0');
+            expect(bottomBackdropRef.current.style.right).toBe('0');
+            expect(bottomBackdropRef.current.style.bottom).toBe('0');
+            expect(rafIdRef.current).toBe(rafIdValue);
+        });
+        it('should just schedule requestAnimationFrame if throttling interval is not reached', function () {
+            jest.spyOn(Date, 'now').mockReturnValue(12345);
+            jest.spyOn(global, 'requestAnimationFrame').mockReturnValue(rafIdValue);
+            var anchorEl = {
+                getBoundingClientRect: function () { return ({ top: 100, left: 101, right: 200, bottom: 202 }); }
+            }, leftBackdropRef = { current: { style: {} } }, rightBackdropRef = { current: { style: {} } }, topBackdropRef = { current: { style: {} } }, bottomBackdropRef = { current: { style: {} } }, rafIdRef = { current: null };
+            (0, helpers_1.resizeBackdrops)({
+                anchorEl: anchorEl,
+                leftBackdropRef: leftBackdropRef,
+                rightBackdropRef: rightBackdropRef,
+                topBackdropRef: topBackdropRef,
+                bottomBackdropRef: bottomBackdropRef,
+                rafIdRef: rafIdRef,
+                lastResizeTimestamp: 12346
+            });
+            expect(topBackdropRef.current.style.top).toBe(undefined);
+            expect(topBackdropRef.current.style.left).toBe(undefined);
+            expect(topBackdropRef.current.style.right).toBe(undefined);
+            expect(topBackdropRef.current.style.height).toBe(undefined);
+            expect(leftBackdropRef.current.style.top).toBe(undefined);
+            expect(leftBackdropRef.current.style.left).toBe(undefined);
+            expect(leftBackdropRef.current.style.width).toBe(undefined);
+            expect(leftBackdropRef.current.style.bottom).toBe(undefined);
+            expect(rightBackdropRef.current.style.top).toBe(undefined);
+            expect(rightBackdropRef.current.style.left).toBe(undefined);
+            expect(rightBackdropRef.current.style.right).toBe(undefined);
+            expect(rightBackdropRef.current.style.bottom).toBe(undefined);
+            expect(bottomBackdropRef.current.style.top).toBe(undefined);
+            expect(bottomBackdropRef.current.style.left).toBe(undefined);
+            expect(bottomBackdropRef.current.style.right).toBe(undefined);
+            expect(bottomBackdropRef.current.style.bottom).toBe(undefined);
+            expect(rafIdRef.current).toBe(rafIdValue);
+        });
+    });
+});

package/cjs/Popper/index.d.ts

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

package/cjs/Popper/index.js

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

package/cjs/Popper/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+var constants_1 = require("../constants");
+exports.useStyles = (0, styles_1.makeStyles)({
+    backdrop: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 10
+    },
+    popper: {
+        zIndex: constants_1.POPUP_Z_INDEX
+    }
+});

package/cjs/PopupWithArrow/PopupWithArrow.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Popper } from '../Popper';
+type Props = React.ComponentPropsWithoutRef<typeof Popper> & {
+    classes?: {
+        root?: string;
+        arrow?: string;
+    };
+};
+export declare const PopupWithArrow: ({ children, className, classes, transition, ...otherProps }: Props) => JSX.Element;
+export {};

package/cjs/PopupWithArrow/PopupWithArrow.js

@@ -0,0 +1,89 @@
+"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);
+    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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupWithArrow = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Paper_1 = __importDefault(require("@mui/material/Paper"));
+var Fade_1 = __importDefault(require("@mui/material/Fade"));
+var Popper_1 = require("../Popper");
+var styles_1 = require("./styles");
+var PopupWithArrow = function (_a) {
+    var children = _a.children, className = _a.className, classes = _a.classes, transition = _a.transition, otherProps = __rest(_a, ["children", "className", "classes", "transition"]);
+    var styles = (0, styles_1.useStyles)();
+    var AnimationWrapper = transition ? Fade_1.default : react_1.default.Fragment;
+    var _b = (0, react_1.useState)(null), arrowRef = _b[0], setArrowRef = _b[1];
+    return (react_1.default.createElement(Popper_1.Popper, __assign({ className: (0, classnames_1.default)(styles.popper, className), modifiers: [
+            {
+                name: 'preventOverflow',
+                enabled: true,
+                options: {
+                    rootBoundary: 'viewport',
+                    padding: 14,
+                    altAxis: true
+                }
+            },
+            {
+                name: 'arrow',
+                enabled: true,
+                options: {
+                    element: arrowRef,
+                    padding: 4
+                }
+            }
+        ], transition: transition, excludeAnchorFromBackdrop: false }, otherProps), function (_a) {
+        var TransitionProps = _a.TransitionProps;
+        return (react_1.default.createElement(AnimationWrapper, __assign({}, TransitionProps),
+            react_1.default.createElement(Paper_1.default, { className: (0, classnames_1.default)(styles.paper, classes === null || classes === void 0 ? void 0 : classes.root) },
+                react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.arrow, classes === null || classes === void 0 ? void 0 : classes.arrow), ref: setArrowRef }),
+                children)));
+    }));
+};
+exports.PopupWithArrow = PopupWithArrow;

package/cjs/PopupWithArrow/PopupWithArrow.test.d.ts

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

package/cjs/PopupWithArrow/PopupWithArrow.test.js

@@ -0,0 +1,25 @@
+"use strict";
+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 PopupWithArrow_1 = require("./PopupWithArrow");
+describe('Popup with arrow tests', function () {
+    it('should render correct default state', function () {
+        (0, react_2.render)(react_1.default.createElement(PopupWithArrow_1.PopupWithArrow, { open: true, anchorEl: document.body },
+            react_1.default.createElement("div", { "data-reltio-id": "popupContent" })));
+        expect(document.querySelectorAll('.backdrop')).toHaveLength(1);
+        expect(document.querySelector('.arrow')).toBeInTheDocument();
+        expect(react_2.screen.getByRole('tooltip')).toBeInTheDocument();
+        expect(react_2.screen.getByTestId('popupContent')).toBeInTheDocument();
+        expect(react_2.screen.getByRole('tooltip').firstChild).not.toHaveAttribute('style');
+    });
+    it('should add transition if transition prop is true', function () {
+        (0, react_2.render)(react_1.default.createElement(PopupWithArrow_1.PopupWithArrow, { open: true, transition: true, anchorEl: document.body },
+            react_1.default.createElement("div", { "data-reltio-id": "popupContent" })));
+        expect(react_2.screen.getByRole('tooltip').firstChild).toHaveAttribute('style');
+        expect(react_2.screen.getByTestId('popupContent')).toBeInTheDocument();
+    });
+});

package/cjs/PopupWithArrow/index.d.ts

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

package/cjs/PopupWithArrow/index.js

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

package/cjs/PotentialMatchReviewCard/PotentialMatchReviewCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    date: number;
+    createdBy: string;
+    type: string;
+    step: string;
+    children: React.ReactNode;
+    Actions: React.ReactNode;
+};
+export declare const PotentialMatchReviewCard: ({ date, type, createdBy, step, children, Actions }: Props) => JSX.Element;
+export {};

package/cjs/PotentialMatchReviewCard/PotentialMatchReviewCard.js

@@ -0,0 +1,61 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PotentialMatchReviewCard = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var Flag_1 = __importDefault(require("@mui/icons-material/Flag"));
+var PmIcon_1 = __importDefault(require("../icons/PmIcon"));
+var CollapseButton_1 = require("../CollapseButton");
+var styles_1 = require("./styles");
+var PotentialMatchReviewCard = function (_a) {
+    var _b;
+    var date = _a.date, type = _a.type, createdBy = _a.createdBy, step = _a.step, children = _a.children, Actions = _a.Actions;
+    var styles = (0, styles_1.useStyles)();
+    var _c = (0, react_1.useState)(false), isExpanded = _c[0], setExpanded = _c[1];
+    return (react_1.default.createElement("div", { className: styles.pmReviewCard },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.header, (_b = {}, _b[styles.expanded] = isExpanded, _b)) },
+            react_1.default.createElement(PmIcon_1.default, { className: styles.icon }),
+            react_1.default.createElement("div", { className: styles.mainInfo },
+                react_1.default.createElement("div", { className: styles.title },
+                    react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.caption, styles.flex) }, ui_i18n_1.default.text('Match review')),
+                    react_1.default.createElement(Flag_1.default, { className: styles.flag }),
+                    react_1.default.createElement("span", { className: styles.date }, ui_i18n_1.default.date(date, 'L')),
+                    react_1.default.createElement(CollapseButton_1.CollapseButton, { isOpen: isExpanded, onClick: function () {
+                            setExpanded(!isExpanded);
+                        } })),
+                react_1.default.createElement("div", { className: styles.infoBlock },
+                    react_1.default.createElement("div", { className: styles.flex },
+                        react_1.default.createElement("div", { className: styles.info }, type),
+                        react_1.default.createElement("div", { className: styles.info }, ui_i18n_1.default.text('Created by ${createdBy}', { createdBy: createdBy })),
+                        react_1.default.createElement("div", { className: styles.info }, ui_i18n_1.default.text('Step: ${step}', { step: step }))),
+                    Actions))),
+        isExpanded ? children : null));
+};
+exports.PotentialMatchReviewCard = PotentialMatchReviewCard;

package/cjs/PotentialMatchReviewCard/PotentialMatchReviewCard.spec.d.ts

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

package/cjs/PotentialMatchReviewCard/PotentialMatchReviewCard.spec.js

@@ -0,0 +1,40 @@
+"use strict";
+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 enzyme_1 = require("enzyme");
+var test_utils_1 = require("react-dom/test-utils");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var PotentialMatchReviewCard_1 = require("./PotentialMatchReviewCard");
+describe('Potential match review card tests', function () {
+    var date = 1612265837382;
+    var createdBy = 'testUser';
+    var type = 'pmReviewCardType';
+    var step = 'Review';
+    var children = react_1.default.createElement("div", { className: "children" }, "Children");
+    var Actions = react_1.default.createElement("div", { className: "actions" }, "Actions");
+    it('should render elements correctly', function () {
+        jest.spyOn(ui_i18n_1.default, 'date').mockImplementation(ramda_1.identity);
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(PotentialMatchReviewCard_1.PotentialMatchReviewCard, { date: date, createdBy: createdBy, type: type, step: step, Actions: Actions }, children));
+        expect(component.find('CollapseButton').prop('isOpen')).toBeFalsy();
+        expect(component.find('.date').text()).toBe(String(date));
+        expect(component.find('.info').at(0).text()).toBe(type);
+        expect(component.find('.info').at(1).text()).toBe('Created by testUser');
+        expect(component.find('.info').at(2).text()).toBe('Step: Review');
+        expect(component.find('.actions').text()).toBe('Actions');
+        expect(component.find('.children').length).toBe(0);
+    });
+    it('should show children in expanded mode', function () {
+        jest.spyOn(ui_i18n_1.default, 'date').mockImplementation(ramda_1.identity);
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(PotentialMatchReviewCard_1.PotentialMatchReviewCard, { date: date, createdBy: createdBy, type: type, step: step, Actions: Actions }, children));
+        expect(component.find('CollapseButton').prop('isOpen')).toBeFalsy();
+        (0, test_utils_1.act)(function () {
+            component.find('CollapseButton').simulate('click');
+            component.update();
+        });
+        expect(component.find('.children').length).toBe(1);
+    });
+});

package/cjs/PotentialMatchReviewCard/index.d.ts

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

package/cjs/PotentialMatchReviewCard/index.js

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

package/cjs/PotentialMatchReviewCard/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"flex" | "expanded" | "caption" | "icon" | "title" | "header" | "date" | "info" | "infoBlock" | "flag" | "pmReviewCard" | "mainInfo">;

package/cjs/ProfileBand/ProfileBand.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { Entity } from '@reltio/mdm-sdk';
+import { useStyles } from './styles';
+type Props = {
+    className?: string;
+    entity?: Entity;
+    children?: ReactNode;
+    classes?: Partial<ReturnType<typeof useStyles>>;
+    renderLabel?: (label: string) => React.ReactNode;
+};
+export declare const ProfileBand: ({ className, entity, children, classes, renderLabel }: Props) => JSX.Element;
+export {};

package/cjs/ProfileBand/ProfileBand.js

@@ -0,0 +1,79 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileBand = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var EntityAvatar_1 = require("../EntityAvatar");
+var EntityTypeBadge_1 = require("../EntityTypeBadge");
+var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
+var styles_1 = require("./styles");
+var ProfileBand = function (_a) {
+    var _b;
+    var className = _a.className, entity = _a.entity, children = _a.children, classes = _a.classes, _c = _a.renderLabel, renderLabel = _c === void 0 ? ramda_1.identity : _c;
+    var styles = (0, styles_1.useStyles)({ classes: classes });
+    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
+    var showEntityId = (0, MdmModuleContext_1.useMdmShowEntityId)();
+    var handleCopyEntityIdToClipboard = (0, react_1.useCallback)(function () {
+        navigator.clipboard.writeText((0, mdm_sdk_1.getEntityId)(entity));
+    }, [entity]);
+    if ((0, ramda_1.isNil)(entity)) {
+        return null;
+    }
+    var label = (0, mdm_sdk_1.getLabel)(entity.label);
+    var secondaryLabel = entity.secondaryLabel;
+    var businessCardText = (0, mdm_sdk_1.getBusinessCardAttributesText)(metadata, entity);
+    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) },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.profileBand, (_b = {},
+                _b[styles.inactive] = !isActive,
+                _b)), "data-entity-uri": entityUri },
+            react_1.default.createElement(EntityAvatar_1.EntityAvatar, { key: entity.uri, entity: entity, avatarClassName: styles.profileIcon, imageClassName: styles.imageProfileIcon }),
+            react_1.default.createElement("div", { className: styles.profileInfo },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(Typography_1.default, { variant: "h6", className: styles.label }, renderLabel(label)),
+                    secondaryLabel && (react_1.default.createElement(Typography_1.default, { variant: "subtitle2", className: styles.secondaryLabel }, secondaryLabel)),
+                    businessCardText && (react_1.default.createElement(Typography_1.default, { variant: "subtitle1", className: styles.businessCard }, businessCardText))),
+                react_1.default.createElement("div", { className: styles.specialInfo },
+                    react_1.default.createElement("div", { className: styles.entityType },
+                        react_1.default.createElement(EntityTypeBadge_1.EntityTypeBadge, { entity: entity, size: "medium", className: styles.badge }),
+                        !(0, mdm_sdk_1.isTempUri)(entityUri) && showEntityId && (react_1.default.createElement(Tooltip_1.default, { title: ui_i18n_1.default.text('Copy to clipboard') },
+                            react_1.default.createElement(Typography_1.default, { display: "inline", variant: "body2", className: styles.entityId, onClick: handleCopyEntityIdToClipboard },
+                                ui_i18n_1.default.text('Entity ID'),
+                                ": ",
+                                entityId)))))),
+            children && react_1.default.createElement("div", null, children))));
+};
+exports.ProfileBand = ProfileBand;

package/cjs/ProfileBand/ProfileBand.spec.d.ts

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

package/cjs/ProfileBand/ProfileBand.spec.js

@@ -0,0 +1,92 @@
+"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 __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 enzyme_1 = require("enzyme");
+var ProfileBand_1 = require("./ProfileBand");
+var EntityAvatar_1 = require("../EntityAvatar");
+var EntityTypeBadge_1 = require("../EntityTypeBadge");
+var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
+jest.mock('@reltio/mdm-sdk', function () { return (__assign({}, jest.requireActual('@reltio/mdm-sdk'))); });
+jest.mock('../contexts/MdmModuleContext', function () { return (__assign(__assign({}, jest.requireActual('../contexts/MdmModuleContext')), { useMdmMetadata: jest.fn(), useMdmShowEntityId: jest.fn() })); });
+var metadata = {
+    entityTypes: [
+        {
+            uri: 'configuration/entityTypes/HCP',
+            attributes: [
+                {
+                    name: 'FirstName',
+                    uri: 'configuration/entityTypes/HCP/attributes/FirstName'
+                }
+            ],
+            businessCardAttributeURIs: ['configuration/entityTypes/HCP/attributes/FirstName']
+        }
+    ]
+};
+describe('Profile band tests', function () {
+    beforeEach(function () {
+        MdmModuleContext_1.useMdmShowEntityId.mockReturnValue(true);
+        MdmModuleContext_1.useMdmMetadata.mockReturnValue(metadata);
+    });
+    var entity = {
+        attributes: {
+            FirstName: [
+                {
+                    ov: true,
+                    value: 'First name',
+                    uri: 'entities/1MheIGmc/attributes/FirstName/2l2ktkUn0',
+                    type: 'configuration/entityTypes/HCP/attributes/FirstName'
+                }
+            ]
+        },
+        label: 'Entity one',
+        secondaryLabel: 'Entity expanded label',
+        type: 'configuration/entityTypes/HCP',
+        uri: 'entities/uioU78'
+    };
+    it('should render main parts', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ProfileBand_1.ProfileBand, { entity: entity },
+            react_1.default.createElement("div", { className: "content" }, "Content")));
+        expect(component.find(EntityAvatar_1.EntityAvatar)).toHaveLength(1);
+        expect(component.find(EntityTypeBadge_1.EntityTypeBadge)).toHaveLength(1);
+        expect(component.find('.label').text()).toBe(entity.label);
+        expect(component.find('.secondaryLabel').text()).toBe(entity.secondaryLabel);
+        expect(component.find('.businessCard').text()).toBe('First name');
+        expect(component.find('.entityId').text()).toBe('Entity ID: uioU78');
+        expect(component.find('.content').text()).toBe('Content');
+    });
+    it('should render inactive profile band', function () {
+        var inactiveEntity = __assign(__assign({}, entity), { endDate: Date.now() - 10 });
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ProfileBand_1.ProfileBand, { entity: inactiveEntity }));
+        expect(component.find('.inactive').length).toBe(1);
+    });
+    it('should hide entityId for create mode', function () {
+        var tmpEntity = __assign(__assign({}, entity), { uri: 'entities/uri$$1646115317921' });
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ProfileBand_1.ProfileBand, { entity: tmpEntity },
+            react_1.default.createElement("div", { className: "content" }, "Content")));
+        expect(component.find('.entityId').length).toBe(0);
+    });
+    it('should hide entityId if "showEntityId" selector returns false', function () {
+        MdmModuleContext_1.useMdmShowEntityId.mockReturnValue(false);
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ProfileBand_1.ProfileBand, { entity: entity },
+            react_1.default.createElement("div", { className: "content" }, "Content")));
+        expect(component.find('.entityId').length).toBe(0);
+    });
+    it('should render custom label correctly using renderLabel prop', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ProfileBand_1.ProfileBand, { entity: entity, renderLabel: function (label) { return "custom ".concat(label); } }));
+        expect(component.find('.label').text()).toBe("custom ".concat(entity.label));
+    });
+});

package/cjs/ProfileBand/index.d.ts

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

package/cjs/ProfileBand/index.js

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

package/cjs/ProfileBand/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inactive" | "label" | "secondaryLabel" | "entityType" | "profileBand" | "entityId" | "profileIcon" | "profileBandWrapper" | "imageProfileIcon" | "profileInfo" | "badge" | "businessCard" | "specialInfo">;