@reltio/components 1.4.1359 → 1.4.1361

package/cjs/components/ProfileCard/ProfileCard.d.ts

@@ -7,6 +7,7 @@ declare type Props = {
         secondaryLabel?: string;
         container?: string;
     };
+    variant?: 'loading' | 'normal';
 } & React.HTMLAttributes<HTMLDivElement>;
-declare const _default: React.MemoExoticComponent<({ entity, classes, ...otherProps }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ entity, classes, variant, ...otherProps }: Props) => JSX.Element>;
 export default _default;

package/cjs/components/ProfileCard/ProfileCard.js

@@ -49,36 +49,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var classnames_1 = __importDefault(require("classnames"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ProfileCardContent_1 = require("./ProfileCardContent/ProfileCardContent");
+var ProfileCardPlaceholder_1 = require("./ProfileCardPlaceholder/ProfileCardPlaceholder");
 var styles_1 = __importDefault(require("./styles"));
-var EntityAvatar_1 = __importDefault(require("../EntityAvatar/EntityAvatar"));
-var EntityUriLink_1 = __importDefault(require("../EntityUriLink/EntityUriLink"));
-var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));
-var EntityTypeBadge_1 = __importDefault(require("../EntityTypeBadge/EntityTypeBadge"));
 var ProfileCard = function (_a) {
-    var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b, otherProps = __rest(_a, ["entity", "classes"]);
+    var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.variant, variant = _c === void 0 ? 'normal' : _c, otherProps = __rest(_a, ["entity", "classes", "variant"]);
     var styles = (0, styles_1.default)();
-    var secondaryLabelClass = classes.secondaryLabel, labelClass = classes.label, containerClass = classes.container;
-    var label = (0, mdm_sdk_1.getLabel)(entity.label);
-    var secondaryLabel = entity.secondaryLabel;
-    var handleCopyEntityIdToClipboard = (0, react_1.useCallback)(function () {
-        navigator.clipboard.writeText((0, mdm_sdk_1.getEntityId)(entity));
-    }, [entity]);
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)(styles.container, containerClass) }, otherProps),
-        react_1.default.createElement(EntityAvatar_1.default, { entity: entity, imageClassName: styles.image }),
-        react_1.default.createElement("div", { className: styles.info },
-            react_1.default.createElement(EntityUriLink_1.default, { value: (0, mdm_sdk_1.getEntityUriForLink)(entity), className: styles.link },
-                react_1.default.createElement(ExpandedValueTooltip_1.default, { value: label, placement: "top", showOnExceededHeight: true },
-                    react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.label, labelClass) }, label))),
-            secondaryLabel && (react_1.default.createElement(ExpandedValueTooltip_1.default, { value: secondaryLabel, placement: "top", showOnExceededHeight: true },
-                react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.secondaryLabel, secondaryLabelClass) }, secondaryLabel))),
-            react_1.default.createElement("div", { className: styles.thirdRow },
-                react_1.default.createElement(EntityTypeBadge_1.default, { entity: entity, size: "medium" }),
-                react_1.default.createElement("div", { className: styles.entityId, onClick: handleCopyEntityIdToClipboard },
-                    react_1.default.createElement("div", { className: styles.entityIdLabel }, ui_i18n_1.default.text('ID:')),
-                    react_1.default.createElement(ExpandedValueTooltip_1.default, { value: "Copy to clipboard ".concat((0, mdm_sdk_1.getEntityId)(entity)), placement: "top" },
-                        react_1.default.createElement("div", { className: styles.entityIdValue }, (0, mdm_sdk_1.getEntityId)(entity))))))));
+    var containerClass = classes.container;
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)(styles.container, containerClass) }, otherProps), variant === 'normal' ? (react_1.default.createElement(ProfileCardContent_1.ProfileCardContent, { entity: entity, classes: classes })) : (react_1.default.createElement(ProfileCardPlaceholder_1.ProfileCardPlaceholder, null))));
 };
 exports.default = (0, react_1.memo)(ProfileCard);

package/cjs/components/ProfileCard/ProfileCardContent/ProfileCardContent.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Entity } from '@reltio/mdm-sdk';
+declare type Props = {
+    entity: Entity;
+    classes?: {
+        label?: string;
+        secondaryLabel?: string;
+    };
+};
+export declare const ProfileCardContent: ({ entity, classes }: Props) => JSX.Element;
+export {};

package/cjs/components/ProfileCard/ProfileCardContent/ProfileCardContent.js

@@ -0,0 +1,63 @@
+"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.ProfileCardContent = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var EntityAvatar_1 = __importDefault(require("../../EntityAvatar/EntityAvatar"));
+var EntityUriLink_1 = __importDefault(require("../../EntityUriLink/EntityUriLink"));
+var ExpandedValueTooltip_1 = __importDefault(require("../../ExpandedValueTooltip/ExpandedValueTooltip"));
+var EntityTypeBadge_1 = __importDefault(require("../../EntityTypeBadge/EntityTypeBadge"));
+var styles_1 = __importDefault(require("./styles"));
+var ProfileCardContent = function (_a) {
+    var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b;
+    var styles = (0, styles_1.default)();
+    var secondaryLabelClass = classes.secondaryLabel, labelClass = classes.label;
+    var label = (0, mdm_sdk_1.getLabel)(entity.label);
+    var secondaryLabel = entity.secondaryLabel;
+    var handleCopyEntityIdToClipboard = (0, react_1.useCallback)(function () {
+        navigator.clipboard.writeText((0, mdm_sdk_1.getEntityId)(entity));
+    }, [entity]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(EntityAvatar_1.default, { entity: entity, imageClassName: styles.image }),
+        react_1.default.createElement("div", { className: styles.info },
+            react_1.default.createElement(EntityUriLink_1.default, { value: (0, mdm_sdk_1.getEntityUriForLink)(entity), className: styles.link },
+                react_1.default.createElement(ExpandedValueTooltip_1.default, { value: label, placement: "top", showOnExceededHeight: true },
+                    react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.label, labelClass) }, label))),
+            secondaryLabel && (react_1.default.createElement(ExpandedValueTooltip_1.default, { value: secondaryLabel, placement: "top", showOnExceededHeight: true },
+                react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.secondaryLabel, secondaryLabelClass) }, secondaryLabel))),
+            react_1.default.createElement("div", { className: styles.thirdRow },
+                react_1.default.createElement(EntityTypeBadge_1.default, { entity: entity, size: "medium" }),
+                react_1.default.createElement("div", { className: styles.entityId, onClick: handleCopyEntityIdToClipboard },
+                    react_1.default.createElement("div", { className: styles.entityIdLabel }, ui_i18n_1.default.text('ID:')),
+                    react_1.default.createElement(ExpandedValueTooltip_1.default, { value: "Copy to clipboard ".concat((0, mdm_sdk_1.getEntityId)(entity)), placement: "top" },
+                        react_1.default.createElement("div", { className: styles.entityIdValue }, (0, mdm_sdk_1.getEntityId)(entity))))))));
+};
+exports.ProfileCardContent = ProfileCardContent;

package/cjs/components/ProfileCard/ProfileCardContent/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "link" | "image" | "secondaryLabel" | "info" | "thirdRow" | "entityId" | "entityIdLabel" | "entityIdValue">;
+export default useStyles;

package/cjs/components/ProfileCard/ProfileCardContent/styles.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@material-ui/core/styles");
+var useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+    image: {
+        width: '40px',
+        height: '40px'
+    },
+    info: {
+        marginLeft: '12px',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    label: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        fontWeight: 400,
+        fontSize: '13px',
+        lineHeight: '15px',
+        color: theme.palette.primary.main
+    },
+    secondaryLabel: {
+        marginTop: '4px',
+        fontWeight: 400,
+        fontSize: '10px',
+        lineHeight: '12px',
+        color: theme.palette.text.secondary,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    link: {
+        textDecoration: 'none'
+    },
+    thirdRow: {
+        display: 'flex',
+        overflow: 'hidden',
+        alignItems: 'center',
+        marginTop: 'auto',
+        paddingTop: '4px'
+    },
+    entityId: {
+        display: 'flex',
+        overflow: 'hidden',
+        alignItems: 'baseline',
+        whiteSpace: 'nowrap',
+        fontWeight: 400,
+        fontSize: '12px',
+        lineHeight: '16px'
+    },
+    entityIdLabel: {
+        color: theme.palette.text.secondary
+    },
+    entityIdValue: {
+        marginLeft: '8px',
+        color: theme.palette.text.primary,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        '&[aria-describedby]': {
+            cursor: 'pointer',
+            '&:hover': {
+                textDecoration: 'underline'
+            }
+        }
+    }
+}); });
+exports.default = useStyles;

package/cjs/components/ProfileCard/ProfileCardPlaceholder/ProfileCardPlaceholder.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ProfileCardPlaceholder: () => JSX.Element;

package/cjs/components/ProfileCard/ProfileCardPlaceholder/ProfileCardPlaceholder.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileCardPlaceholder = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var styles_1 = require("./styles");
+var ProfileCardPlaceholder = function () {
+    var styles = (0, styles_1.useStyles)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.avatar, styles.wave) }),
+        react_1.default.createElement("div", { className: styles.info },
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.label, styles.wave) }),
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.secondaryLabel, styles.wave) }),
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.thirdRow, styles.wave) }))));
+};
+exports.ProfileCardPlaceholder = ProfileCardPlaceholder;

package/cjs/components/ProfileCard/ProfileCardPlaceholder/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "secondaryLabel" | "avatar" | "info" | "thirdRow" | "@keyframes keyframes-wave" | "wave">;

package/cjs/components/ProfileCard/ProfileCardPlaceholder/styles.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = (0, styles_1.makeStyles)({
+    '@keyframes keyframes-wave': {
+        '0%': {
+            transform: 'translateX(-100%)'
+        },
+        '60%': {
+            transform: 'translateX(100%)'
+        },
+        '100%': {
+            transform: 'translateX(100%)'
+        }
+    },
+    wave: {
+        overflow: 'hidden',
+        position: 'relative',
+        '&:after': {
+            top: '0',
+            left: '0',
+            right: '0',
+            bottom: '0',
+            content: '""',
+            position: 'absolute',
+            animation: '$keyframes-wave 1.6s linear 0.5s infinite',
+            transform: 'translateX(-100%)',
+            background: 'linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);'
+        }
+    },
+    avatar: {
+        flex: 'none',
+        width: '40px',
+        height: '40px',
+        borderRadius: '50%',
+        backgroundColor: 'rgba(0, 0, 0, 0.11)'
+    },
+    info: {
+        marginLeft: '12px',
+        flex: 'auto'
+    },
+    label: {
+        width: '40%',
+        height: '15px',
+        borderRadius: '2px',
+        backgroundColor: 'rgba(0, 0, 0, 0.11)'
+    },
+    secondaryLabel: {
+        marginTop: '4px',
+        width: '100%',
+        height: '12px',
+        borderRadius: '2px',
+        backgroundColor: 'rgba(0, 0, 0, 0.11)'
+    },
+    thirdRow: {
+        marginTop: '4px',
+        width: '60%',
+        height: '24px',
+        borderRadius: '2px',
+        backgroundColor: 'rgba(0, 0, 0, 0.11)'
+    }
+});

package/cjs/components/ProfileCard/styles.d.ts

@@ -1,2 +1,2 @@
-declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "link" | "image" | "secondaryLabel" | "info" | "container" | "thirdRow" | "entityId" | "entityIdLabel" | "entityIdValue">;
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container">;
 export default useStyles;

package/cjs/components/ProfileCard/styles.js

@@ -1,74 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var styles_1 = require("@material-ui/core/styles");
-var useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+var useStyles = (0, styles_1.makeStyles)({
     container: {
         display: 'flex',
         padding: '16px',
         overflow: 'hidden'
-    },
-    image: {
-        width: '40px',
-        height: '40px'
-    },
-    info: {
-        marginLeft: '12px',
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column'
-    },
-    label: {
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        fontWeight: 400,
-        fontSize: '13px',
-        lineHeight: '15px',
-        color: theme.palette.primary.main
-    },
-    secondaryLabel: {
-        marginTop: '4px',
-        fontWeight: 400,
-        fontSize: '10px',
-        lineHeight: '12px',
-        color: theme.palette.text.secondary,
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-    },
-    link: {
-        textDecoration: 'none'
-    },
-    thirdRow: {
-        display: 'flex',
-        overflow: 'hidden',
-        alignItems: 'center',
-        marginTop: 'auto',
-        paddingTop: '4px'
-    },
-    entityId: {
-        display: 'flex',
-        overflow: 'hidden',
-        alignItems: 'baseline',
-        whiteSpace: 'nowrap',
-        fontWeight: 400,
-        fontSize: '12px',
-        lineHeight: '16px'
-    },
-    entityIdLabel: {
-        color: theme.palette.text.secondary
-    },
-    entityIdValue: {
-        marginLeft: '8px',
-        color: theme.palette.text.primary,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        '&[aria-describedby]': {
-            cursor: 'pointer',
-            '&:hover': {
-                textDecoration: 'underline'
-            }
-        }
     }
-}); });
+});
 exports.default = useStyles;

package/cjs/components/ScrollableTabs/ScrollableTabs.js

@@ -42,10 +42,11 @@ var ScrollableTabs = function (_a) {
             root: styles.tabsRoot,
             scrollButtons: styles.tabsScrollButton
         }, indicatorColor: "primary", textColor: "primary", variant: "scrollable", scrollButtons: "on" }, otherProps), tabs.map(function (_a) {
-        var label = _a.label, value = _a.value, additionalLabel = _a.additionalLabel, dataReltioId = _a.dataReltioId;
-        return (react_1.default.createElement(Tab_1.default, { classes: tabClasses || {
-                root: styles.tabRoot
-            }, key: value, value: value, label: renderLabel(label, additionalLabel), "data-reltio-id": dataReltioId }));
+        var label = _a.label, value = _a.value, additionalLabel = _a.additionalLabel, dataReltioId = _a.dataReltioId, rest = __rest(_a, ["label", "value", "additionalLabel", "dataReltioId"]);
+        return (react_1.default.createElement(Tab_1.default, __assign({ classes: tabClasses || {
+                root: styles.tabRoot,
+                disabled: styles.disabled
+            }, key: value, value: value, label: renderLabel(label, additionalLabel), "data-reltio-id": dataReltioId }, rest)));
     })));
 };
 exports.default = ScrollableTabs;

package/cjs/components/ScrollableTabs/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "tabsRoot" | "tabsScrollButton" | "tabRoot" | "labelWrapper">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"disabled" | "label" | "tabsRoot" | "tabsScrollButton" | "tabRoot" | "labelWrapper">;

package/cjs/components/ScrollableTabs/styles.js

@@ -14,6 +14,9 @@ exports.useStyles = (0, styles_1.makeStyles)({
         padding: '7px 18px 5px',
         '@media (min-width: 960px)': {
             minWidth: 'inherit'
+        },
+        '&$disabled': {
+            pointerEvents: 'auto'
         }
     },
     labelWrapper: {
@@ -28,5 +31,6 @@ exports.useStyles = (0, styles_1.makeStyles)({
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
         fontWeight: 500
-    }
+    },
+    disabled: {}
 });

package/esm/components/ProfileCard/ProfileCard.d.ts

@@ -7,6 +7,7 @@ declare type Props = {
         secondaryLabel?: string;
         container?: string;
     };
+    variant?: 'loading' | 'normal';
 } & React.HTMLAttributes<HTMLDivElement>;
-declare const _default: React.MemoExoticComponent<({ entity, classes, ...otherProps }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ entity, classes, variant, ...otherProps }: Props) => JSX.Element>;
 export default _default;

package/esm/components/ProfileCard/ProfileCard.js

@@ -20,37 +20,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { memo, useCallback } from 'react';
-import i18n from 'ui-i18n';
+import React, { memo } from 'react';
 import classnames from 'classnames';
-import { getEntityId, getEntityUriForLink, getLabel } from '@reltio/mdm-sdk';
+import { ProfileCardContent } from './ProfileCardContent/ProfileCardContent';
+import { ProfileCardPlaceholder } from './ProfileCardPlaceholder/ProfileCardPlaceholder';
 import useStyles from './styles';
-import EntityAvatar from '../EntityAvatar/EntityAvatar';
-import EntityUriLink from '../EntityUriLink/EntityUriLink';
-import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';
-import EntityTypeBadge from '../EntityTypeBadge/EntityTypeBadge';
 var ProfileCard = function (_a) {
-    var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b, otherProps = __rest(_a, ["entity", "classes"]);
+    var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.variant, variant = _c === void 0 ? 'normal' : _c, otherProps = __rest(_a, ["entity", "classes", "variant"]);
     var styles = useStyles();
-    var secondaryLabelClass = classes.secondaryLabel, labelClass = classes.label, containerClass = classes.container;
-    var label = getLabel(entity.label);
-    var secondaryLabel = entity.secondaryLabel;
-    var handleCopyEntityIdToClipboard = useCallback(function () {
-        navigator.clipboard.writeText(getEntityId(entity));
-    }, [entity]);
-    return (React.createElement("div", __assign({ className: classnames(styles.container, containerClass) }, otherProps),
-        React.createElement(EntityAvatar, { entity: entity, imageClassName: styles.image }),
-        React.createElement("div", { className: styles.info },
-            React.createElement(EntityUriLink, { value: getEntityUriForLink(entity), className: styles.link },
-                React.createElement(ExpandedValueTooltip, { value: label, placement: "top", showOnExceededHeight: true },
-                    React.createElement("div", { className: classnames(styles.label, labelClass) }, label))),
-            secondaryLabel && (React.createElement(ExpandedValueTooltip, { value: secondaryLabel, placement: "top", showOnExceededHeight: true },
-                React.createElement("div", { className: classnames(styles.secondaryLabel, secondaryLabelClass) }, secondaryLabel))),
-            React.createElement("div", { className: styles.thirdRow },
-                React.createElement(EntityTypeBadge, { entity: entity, size: "medium" }),
-                React.createElement("div", { className: styles.entityId, onClick: handleCopyEntityIdToClipboard },
-                    React.createElement("div", { className: styles.entityIdLabel }, i18n.text('ID:')),
-                    React.createElement(ExpandedValueTooltip, { value: "Copy to clipboard ".concat(getEntityId(entity)), placement: "top" },
-                        React.createElement("div", { className: styles.entityIdValue }, getEntityId(entity))))))));
+    var containerClass = classes.container;
+    return (React.createElement("div", __assign({ className: classnames(styles.container, containerClass) }, otherProps), variant === 'normal' ? (React.createElement(ProfileCardContent, { entity: entity, classes: classes })) : (React.createElement(ProfileCardPlaceholder, null))));
 };
 export default memo(ProfileCard);

package/esm/components/ProfileCard/ProfileCardContent/ProfileCardContent.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Entity } from '@reltio/mdm-sdk';
+declare type Props = {
+    entity: Entity;
+    classes?: {
+        label?: string;
+        secondaryLabel?: string;
+    };
+};
+export declare const ProfileCardContent: ({ entity, classes }: Props) => JSX.Element;
+export {};

package/esm/components/ProfileCard/ProfileCardContent/ProfileCardContent.js

@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import { getEntityId, getEntityUriForLink, getLabel } from '@reltio/mdm-sdk';
+import EntityAvatar from '../../EntityAvatar/EntityAvatar';
+import EntityUriLink from '../../EntityUriLink/EntityUriLink';
+import ExpandedValueTooltip from '../../ExpandedValueTooltip/ExpandedValueTooltip';
+import EntityTypeBadge from '../../EntityTypeBadge/EntityTypeBadge';
+import useStyles from './styles';
+export var ProfileCardContent = function (_a) {
+    var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b;
+    var styles = useStyles();
+    var secondaryLabelClass = classes.secondaryLabel, labelClass = classes.label;
+    var label = getLabel(entity.label);
+    var secondaryLabel = entity.secondaryLabel;
+    var handleCopyEntityIdToClipboard = useCallback(function () {
+        navigator.clipboard.writeText(getEntityId(entity));
+    }, [entity]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(EntityAvatar, { entity: entity, imageClassName: styles.image }),
+        React.createElement("div", { className: styles.info },
+            React.createElement(EntityUriLink, { value: getEntityUriForLink(entity), className: styles.link },
+                React.createElement(ExpandedValueTooltip, { value: label, placement: "top", showOnExceededHeight: true },
+                    React.createElement("div", { className: classnames(styles.label, labelClass) }, label))),
+            secondaryLabel && (React.createElement(ExpandedValueTooltip, { value: secondaryLabel, placement: "top", showOnExceededHeight: true },
+                React.createElement("div", { className: classnames(styles.secondaryLabel, secondaryLabelClass) }, secondaryLabel))),
+            React.createElement("div", { className: styles.thirdRow },
+                React.createElement(EntityTypeBadge, { entity: entity, size: "medium" }),
+                React.createElement("div", { className: styles.entityId, onClick: handleCopyEntityIdToClipboard },
+                    React.createElement("div", { className: styles.entityIdLabel }, i18n.text('ID:')),
+                    React.createElement(ExpandedValueTooltip, { value: "Copy to clipboard ".concat(getEntityId(entity)), placement: "top" },
+                        React.createElement("div", { className: styles.entityIdValue }, getEntityId(entity))))))));
+};

package/esm/components/ProfileCard/ProfileCardContent/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "link" | "image" | "secondaryLabel" | "info" | "thirdRow" | "entityId" | "entityIdLabel" | "entityIdValue">;
+export default useStyles;

package/esm/components/ProfileCard/ProfileCardContent/styles.js

@@ -0,0 +1,67 @@
+import { makeStyles } from '@material-ui/core/styles';
+var useStyles = makeStyles(function (theme) { return ({
+    image: {
+        width: '40px',
+        height: '40px'
+    },
+    info: {
+        marginLeft: '12px',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    label: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        fontWeight: 400,
+        fontSize: '13px',
+        lineHeight: '15px',
+        color: theme.palette.primary.main
+    },
+    secondaryLabel: {
+        marginTop: '4px',
+        fontWeight: 400,
+        fontSize: '10px',
+        lineHeight: '12px',
+        color: theme.palette.text.secondary,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    link: {
+        textDecoration: 'none'
+    },
+    thirdRow: {
+        display: 'flex',
+        overflow: 'hidden',
+        alignItems: 'center',
+        marginTop: 'auto',
+        paddingTop: '4px'
+    },
+    entityId: {
+        display: 'flex',
+        overflow: 'hidden',
+        alignItems: 'baseline',
+        whiteSpace: 'nowrap',
+        fontWeight: 400,
+        fontSize: '12px',
+        lineHeight: '16px'
+    },
+    entityIdLabel: {
+        color: theme.palette.text.secondary
+    },
+    entityIdValue: {
+        marginLeft: '8px',
+        color: theme.palette.text.primary,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        '&[aria-describedby]': {
+            cursor: 'pointer',
+            '&:hover': {
+                textDecoration: 'underline'
+            }
+        }
+    }
+}); });
+export default useStyles;

package/esm/components/ProfileCard/ProfileCardPlaceholder/ProfileCardPlaceholder.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ProfileCardPlaceholder: () => JSX.Element;

package/esm/components/ProfileCard/ProfileCardPlaceholder/ProfileCardPlaceholder.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useStyles } from './styles';
+export var ProfileCardPlaceholder = function () {
+    var styles = useStyles();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: classnames(styles.avatar, styles.wave) }),
+        React.createElement("div", { className: styles.info },
+            React.createElement("div", { className: classnames(styles.label, styles.wave) }),
+            React.createElement("div", { className: classnames(styles.secondaryLabel, styles.wave) }),
+            React.createElement("div", { className: classnames(styles.thirdRow, styles.wave) }))));
+};

package/esm/components/ProfileCard/ProfileCardPlaceholder/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "secondaryLabel" | "avatar" | "info" | "thirdRow" | "@keyframes keyframes-wave" | "wave">;

package/esm/components/ProfileCard/ProfileCardPlaceholder/styles.js

@@ -0,0 +1,60 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
+    '@keyframes keyframes-wave': {
+        '0%': {
+            transform: 'translateX(-100%)'
+        },
+        '60%': {
+            transform: 'translateX(100%)'
+        },
+        '100%': {
+            transform: 'translateX(100%)'
+        }
+    },
+    wave: {
+        overflow: 'hidden',
+        position: 'relative',
+        '&:after': {
+            top: '0',
+            left: '0',
+            right: '0',
+            bottom: '0',
+            content: '""',
+            position: 'absolute',
+            animation: '$keyframes-wave 1.6s linear 0.5s infinite',
+            transform: 'translateX(-100%)',
+            background: 'linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);'
+        }
+    },
+    avatar: {
+        flex: 'none',
+        width: '40px',
+        height: '40px',
+        borderRadius: '50%',
+        backgroundColor: 'rgba(0, 0, 0, 0.11)'
+    },
+    info: {
+        marginLeft: '12px',
+        flex: 'auto'
+    },
+    label: {
+        width: '40%',
+        height: '15px',
+        borderRadius: '2px',
+        backgroundColor: 'rgba(0, 0, 0, 0.11)'
+    },
+    secondaryLabel: {
+        marginTop: '4px',
+        width: '100%',
+        height: '12px',
+        borderRadius: '2px',
+        backgroundColor: 'rgba(0, 0, 0, 0.11)'
+    },
+    thirdRow: {
+        marginTop: '4px',
+        width: '60%',
+        height: '24px',
+        borderRadius: '2px',
+        backgroundColor: 'rgba(0, 0, 0, 0.11)'
+    }
+});

package/esm/components/ProfileCard/styles.d.ts

@@ -1,2 +1,2 @@
-declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "link" | "image" | "secondaryLabel" | "info" | "container" | "thirdRow" | "entityId" | "entityIdLabel" | "entityIdValue">;
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container">;
 export default useStyles;

package/esm/components/ProfileCard/styles.js

@@ -1,72 +1,9 @@
 import { makeStyles } from '@material-ui/core/styles';
-var useStyles = makeStyles(function (theme) { return ({
+var useStyles = makeStyles({
     container: {
         display: 'flex',
         padding: '16px',
         overflow: 'hidden'
-    },
-    image: {
-        width: '40px',
-        height: '40px'
-    },
-    info: {
-        marginLeft: '12px',
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column'
-    },
-    label: {
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        fontWeight: 400,
-        fontSize: '13px',
-        lineHeight: '15px',
-        color: theme.palette.primary.main
-    },
-    secondaryLabel: {
-        marginTop: '4px',
-        fontWeight: 400,
-        fontSize: '10px',
-        lineHeight: '12px',
-        color: theme.palette.text.secondary,
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-    },
-    link: {
-        textDecoration: 'none'
-    },
-    thirdRow: {
-        display: 'flex',
-        overflow: 'hidden',
-        alignItems: 'center',
-        marginTop: 'auto',
-        paddingTop: '4px'
-    },
-    entityId: {
-        display: 'flex',
-        overflow: 'hidden',
-        alignItems: 'baseline',
-        whiteSpace: 'nowrap',
-        fontWeight: 400,
-        fontSize: '12px',
-        lineHeight: '16px'
-    },
-    entityIdLabel: {
-        color: theme.palette.text.secondary
-    },
-    entityIdValue: {
-        marginLeft: '8px',
-        color: theme.palette.text.primary,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        '&[aria-describedby]': {
-            cursor: 'pointer',
-            '&:hover': {
-                textDecoration: 'underline'
-            }
-        }
     }
-}); });
+});
 export default useStyles;

package/esm/components/ScrollableTabs/ScrollableTabs.js

@@ -37,10 +37,11 @@ var ScrollableTabs = function (_a) {
             root: styles.tabsRoot,
             scrollButtons: styles.tabsScrollButton
         }, indicatorColor: "primary", textColor: "primary", variant: "scrollable", scrollButtons: "on" }, otherProps), tabs.map(function (_a) {
-        var label = _a.label, value = _a.value, additionalLabel = _a.additionalLabel, dataReltioId = _a.dataReltioId;
-        return (React.createElement(Tab, { classes: tabClasses || {
-                root: styles.tabRoot
-            }, key: value, value: value, label: renderLabel(label, additionalLabel), "data-reltio-id": dataReltioId }));
+        var label = _a.label, value = _a.value, additionalLabel = _a.additionalLabel, dataReltioId = _a.dataReltioId, rest = __rest(_a, ["label", "value", "additionalLabel", "dataReltioId"]);
+        return (React.createElement(Tab, __assign({ classes: tabClasses || {
+                root: styles.tabRoot,
+                disabled: styles.disabled
+            }, key: value, value: value, label: renderLabel(label, additionalLabel), "data-reltio-id": dataReltioId }, rest)));
     })));
 };
 export default ScrollableTabs;

package/esm/components/ScrollableTabs/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "tabsRoot" | "tabsScrollButton" | "tabRoot" | "labelWrapper">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"disabled" | "label" | "tabsRoot" | "tabsScrollButton" | "tabRoot" | "labelWrapper">;

package/esm/components/ScrollableTabs/styles.js

@@ -11,6 +11,9 @@ export var useStyles = makeStyles({
         padding: '7px 18px 5px',
         '@media (min-width: 960px)': {
             minWidth: 'inherit'
+        },
+        '&$disabled': {
+            pointerEvents: 'auto'
         }
     },
     labelWrapper: {
@@ -25,5 +28,6 @@ export var useStyles = makeStyles({
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
         fontWeight: 500
-    }
+    },
+    disabled: {}
 });

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1359",
+  "version": "1.4.1361",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1359",
-    "@reltio/mdm-sdk": "^1.4.1359",
+    "@reltio/mdm-module": "^1.4.1361",
+    "@reltio/mdm-sdk": "^1.4.1361",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",