@reltio/components 1.4.2190 → 1.4.2192

package/AttributeCellRenderers/BlobRenderer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.ComponentType<{
+    [x: string]: unknown;
+}>;
+export default _default;

package/AttributeCellRenderers/BlobRenderer.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import classnames from 'classnames';
+import { pick } from 'ramda';
+import { withTableContext } from '../HOCs/withTableContext';
+import { TableVariant } from '../types/basicTable';
+import { useMaskedAttribute } from '../hooks/useMaskedAttribute';
+import { MaskingSwitcher } from '../MaskingSwitcher';
+import styles from './styles.module.css';
+var stopPropagation = function (event) {
+    event.stopPropagation();
+};
+var BlobRenderer = function (_a) {
+    var value = _a.value, _b = _a.columnData, dataTypeDefinition = _b.dataTypeDefinition, className = _b.className, entity = _a.rowValue.label, _c = _a.variant, variant = _c === void 0 ? TableVariant.Wide : _c;
+    var _d = useMaskedAttribute({
+        attributeType: dataTypeDefinition,
+        attributeValue: value,
+        entity: entity
+    }), isUnmaskingNeeded = _d.isUnmaskingNeeded, isMasked = _d.isMasked, toggleMasking = _d.toggleMasking, attributeValue = _d.attributeValue, isUnmasking = _d.isUnmasking;
+    return (React.createElement("div", { className: classnames(styles.blobWrapper, styles[variant], className), onScroll: stopPropagation },
+        attributeValue.value,
+        isUnmaskingNeeded && (React.createElement(MaskingSwitcher, { isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking }))));
+};
+export default withTableContext(pick(['variant']))(BlobRenderer);

package/AttributeCellRenderers/EntityIdRenderer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DataTypeDefinition } from '@reltio/mdm-sdk';
+type Props = {
+    value: string;
+    columnData: {
+        dataTypeDefinition: DataTypeDefinition;
+        className?: string;
+    };
+};
+export declare const EntityIdRenderer: ({ value, columnData }: Props) => React.JSX.Element;
+export {};

package/AttributeCellRenderers/EntityIdRenderer.js

@@ -0,0 +1,19 @@
+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 { DataTypes } from '@reltio/mdm-sdk';
+import SimpleAttributeRenderer from './SimpleAttributeRenderer';
+var dataTypeDefinition = { type: DataTypes.TYPE_STRING };
+export var EntityIdRenderer = function (_a) {
+    var value = _a.value, columnData = _a.columnData;
+    return (React.createElement(SimpleAttributeRenderer, { value: { value: value, uri: '' }, columnData: __assign(__assign({}, columnData), { dataTypeDefinition: dataTypeDefinition }), rowValue: { label: { uri: '', type: '' } } }));
+};

package/AttributeCellRenderers/EntityProfileRenderer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.ComponentType<{
+    [x: string]: unknown;
+}>;
+export default _default;

package/AttributeCellRenderers/EntityProfileRenderer.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+import { pick } from 'ramda';
+import { getEntityUriForLink, getLabel } from '@reltio/mdm-sdk';
+import { withTableContext } from '../HOCs/withTableContext';
+import { EntityAvatar } from '../EntityAvatar';
+import { EntityUriLink } from '../EntityUriLink';
+import { TableVariant } from '../types/basicTable';
+import styles from './styles.module.css';
+var EntityProfileRenderer = function (_a) {
+    var _b = _a.value, entity = _b === void 0 ? {} : _b, _c = _a.variant, variant = _c === void 0 ? TableVariant.Wide : _c, className = _a.columnData.className;
+    var label = getLabel(entity.label);
+    return (React.createElement("div", { className: classNames(styles.defaultWrapper, styles.profileWrapper, styles[variant], className) },
+        React.createElement(EntityAvatar, { avatarClassName: styles.entityAvatar, imageClassName: styles.entityAvatarImage, entity: entity }),
+        React.createElement(EntityUriLink, { value: getEntityUriForLink(entity), className: styles.entityLink }, label)));
+};
+export default withTableContext(pick(['variant']))(EntityProfileRenderer);

package/AttributeCellRenderers/ImageRenderer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RecordImageAttributeValue, BasicImageAttributesValue } from '@reltio/mdm-sdk';
+type Props = {
+    value: BasicImageAttributesValue & RecordImageAttributeValue;
+    columnData: {
+        className?: string;
+    };
+};
+export declare const ImageRenderer: ({ value, columnData: { className } }: Props) => React.JSX.Element;
+export {};

package/AttributeCellRenderers/ImageRenderer.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import classnames from 'classnames';
+import { getImageAttributeOvThumbnailUrl } from '@reltio/mdm-sdk';
+import styles from './styles.module.css';
+export var ImageRenderer = function (_a) {
+    var value = _a.value, className = _a.columnData.className;
+    var src = getImageAttributeOvThumbnailUrl({ value: value });
+    return src ? (React.createElement("div", { className: classnames(styles.imageWrapper, className) },
+        React.createElement("img", { src: src }))) : null;
+};

package/AttributeCellRenderers/ReferenceRenderer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.ComponentType<{
+    [x: string]: unknown;
+}>;
+export default _default;

package/AttributeCellRenderers/ReferenceRenderer.js

@@ -0,0 +1,24 @@
+import classnames from 'classnames';
+import React from 'react';
+import { pick } from 'ramda';
+import { getAbsoluteImageUrl, getEntityTypeGraphIcon, getLabel } from '@reltio/mdm-sdk';
+import { withTableContext } from '../HOCs/withTableContext';
+import { TableVariant } from '../types/basicTable';
+import { AvatarWithFallback } from '../AvatarWithFallback';
+import { useMdmApiPath, useMdmImagePath, useMdmMetadata } from '../contexts/MdmModuleContext';
+import { EntityUriLink } from '../EntityUriLink';
+import { ExpandedValueTooltip } from '../ExpandedValueTooltip';
+import styles from './styles.module.css';
+var ReferenceRenderer = function (_a) {
+    var value = _a.value, className = _a.columnData.className, _b = _a.variant, variant = _b === void 0 ? TableVariant.Wide : _b;
+    var metadata = useMdmMetadata();
+    var apiPath = useMdmApiPath();
+    var imagePath = useMdmImagePath();
+    var entityTypeGraphIcon = getEntityTypeGraphIcon(metadata, (value === null || value === void 0 ? void 0 : value.refEntity) || {});
+    var label = value && getLabel(value.label);
+    return (value && (React.createElement(ExpandedValueTooltip, { value: label },
+        React.createElement("div", { className: classnames(styles.defaultWrapper, styles.referenceWrapper, styles[variant], className) },
+            React.createElement(AvatarWithFallback, { className: styles.referenceIcon, icon: getAbsoluteImageUrl(imagePath || apiPath, entityTypeGraphIcon) }),
+            React.createElement(EntityUriLink, { value: value.refEntity.objectURI, className: classnames(styles.referenceContent, styles.entityLink) }, label)))));
+};
+export default withTableContext(pick(['variant']))(ReferenceRenderer);

package/AttributeCellRenderers/SimpleAttributeRenderer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.ComponentType<{
+    [x: string]: unknown;
+}>;
+export default _default;

package/AttributeCellRenderers/SimpleAttributeRenderer.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import classnames from 'classnames';
+import { pick } from 'ramda';
+import { getAttributeValue } from '@reltio/mdm-sdk';
+import { TableVariant } from '../types/basicTable';
+import { withTableContext } from '../HOCs/withTableContext';
+import { useMaskedAttribute } from '../hooks/useMaskedAttribute';
+import { DataTypeValue } from '../DataTypeValue';
+import { MaskingSwitcher } from '../MaskingSwitcher';
+import styles from './styles.module.css';
+var SimpleAttributeRenderer = function (_a) {
+    var value = _a.value, _b = _a.variant, variant = _b === void 0 ? TableVariant.Wide : _b, _c = _a.columnData, dataTypeDefinition = _c.dataTypeDefinition, className = _c.className, entity = _a.rowValue.label;
+    var _d = useMaskedAttribute({
+        attributeType: dataTypeDefinition,
+        attributeValue: value,
+        entity: entity
+    }), isUnmaskingNeeded = _d.isUnmaskingNeeded, isMasked = _d.isMasked, toggleMasking = _d.toggleMasking, attributeValue = _d.attributeValue, isUnmasking = _d.isUnmasking;
+    return (React.createElement("div", { className: classnames(styles.defaultWrapper, styles[variant], className) },
+        React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: dataTypeDefinition }),
+        isUnmaskingNeeded && (React.createElement(MaskingSwitcher, { isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking }))));
+};
+export default withTableContext(pick(['variant']))(SimpleAttributeRenderer);

package/AttributeCellRenderers/getAttributeValueRenderer.d.ts

@@ -0,0 +1,15 @@
+import { ColumnData } from '../types/basicTable';
+export declare const getAttributeValueRenderer: (columnInfo: ColumnData) => import("react").ComponentType<{
+    [x: string]: unknown;
+}> | (({ value, columnData }: {
+    value: string;
+    columnData: {
+        dataTypeDefinition: import("packages/mdm-sdk/src").DataTypeDefinition;
+        className?: string;
+    };
+}) => import("react").JSX.Element) | (({ value, columnData: { className } }: {
+    value: import("packages/mdm-sdk/src").BasicImageAttributesValue & import("packages/mdm-sdk/src").RecordImageAttributeValue;
+    columnData: {
+        className?: string;
+    };
+}) => import("react").JSX.Element);

package/AttributeCellRenderers/getAttributeValueRenderer.js

@@ -0,0 +1,24 @@
+import { path } from 'ramda';
+import EntityProfileRenderer from './EntityProfileRenderer';
+import ReferenceRenderer from './ReferenceRenderer';
+import BlobRenderer from './BlobRenderer';
+import { ImageRenderer } from './ImageRenderer';
+import { EntityIdRenderer } from './EntityIdRenderer';
+import SimpleAttributeRenderer from './SimpleAttributeRenderer';
+export var getAttributeValueRenderer = function (columnInfo) {
+    if (columnInfo.id === 'label') {
+        return EntityProfileRenderer;
+    }
+    if (columnInfo.id === 'entityId') {
+        return EntityIdRenderer;
+    }
+    switch (path(['dataTypeDefinition', 'type'], columnInfo)) {
+        case 'Blob':
+            return BlobRenderer;
+        case 'Reference':
+            return ReferenceRenderer;
+        case 'Image':
+            return ImageRenderer;
+    }
+    return SimpleAttributeRenderer;
+};

package/AttributeCellRenderers/index.d.ts

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

package/AttributeCellRenderers/index.js

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

package/AttributeCellRenderers/styles.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"wide":"AttributeCellRenderers-wide--5Wa87","narrow":"AttributeCellRenderers-narrow--wl973","defaultWrapper":"AttributeCellRenderers-defaultWrapper---aWkK","entityLink":"AttributeCellRenderers-entityLink--I9IWT","profileWrapper":"AttributeCellRenderers-profileWrapper--96mAm","entityAvatar":"AttributeCellRenderers-entityAvatar--F4dil","entityAvatarImage":"AttributeCellRenderers-entityAvatarImage--yPvs8","imageWrapper":"AttributeCellRenderers-imageWrapper--zdd8U","blobWrapper":"AttributeCellRenderers-blobWrapper--ITnmu","referenceWrapper":"AttributeCellRenderers-referenceWrapper--DXIa1","referenceContent":"AttributeCellRenderers-referenceContent--8oJmv","referenceIcon":"AttributeCellRenderers-referenceIcon--x3gMm"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.AttributeCellRenderers-wide--5Wa87{--cell-font-size:13px;--cell-vertical-padding:17px;--cell-bottom-padding:12px;--cell-horizontal-padding:22px;--cell-line-height:15px;--entity-avatar-size:32px;--entity-avatar-margin:0 16px 0 0}.AttributeCellRenderers-narrow--wl973{--cell-font-size:13px;--cell-vertical-padding:0;--cell-bottom-padding:0;--cell-horizontal-padding:16px;--cell-line-height:28px;--entity-avatar-size:20px;--entity-avatar-margin:0 16px 0 0}.AttributeCellRenderers-defaultWrapper---aWkK{--backgroundGradient:linear-gradient(90deg,hsla(0,0%,100%,.2),#fff);align-items:flex-start;display:flex;flex-basis:100%;font-size:var(--cell-font-size);line-height:var(--cell-line-height);overflow:hidden;padding:var(--cell-vertical-padding) var(--cell-horizontal-padding) var(--cell-bottom-padding);position:relative;white-space:pre}.AttributeCellRenderers-defaultWrapper---aWkK:after{background:var(--backgroundGradient);content:"";height:100%;pointer-events:none;position:absolute;right:0;top:0;width:40px}.AttributeCellRenderers-defaultWrapper---aWkK+.AttributeCellRenderers-defaultWrapper---aWkK{padding-top:0}.AttributeCellRenderers-entityLink--I9IWT{color:var(--mui-palette-primary-main);cursor:pointer;font-weight:500;text-decoration:none}.AttributeCellRenderers-profileWrapper--96mAm{--profile-cell-vertical-padding:8px;align-items:center;display:flex;padding:var(--profile-cell-vertical-padding) var(--cell-horizontal-padding)}.AttributeCellRenderers-profileWrapper--96mAm .AttributeCellRenderers-entityAvatar--F4dil{margin:var(--entity-avatar-margin)}.AttributeCellRenderers-profileWrapper--96mAm .AttributeCellRenderers-entityAvatarImage--yPvs8{height:var(--entity-avatar-size);width:var(--entity-avatar-size)}.cellWithCollapser .AttributeCellRenderers-profileWrapper--96mAm{padding:var(--profile-cell-vertical-padding) 0}.AttributeCellRenderers-imageWrapper--zdd8U{display:flex;padding:var(--cell-vertical-padding) var(--cell-horizontal-padding) var(--cell-bottom-padding)}.AttributeCellRenderers-imageWrapper--zdd8U>img{height:64px;width:64px}.AttributeCellRenderers-imageWrapper--zdd8U+.AttributeCellRenderers-imageWrapper--zdd8U{padding-top:0}.AttributeCellRenderers-blobWrapper--ITnmu{box-sizing:border-box;font-size:var(--cell-font-size);height:100px;line-height:var(--cell-line-height);overflow-wrap:break-word;overflow-x:hidden;overflow-y:auto;padding:var(--cell-vertical-padding) var(--cell-horizontal-padding);position:relative;white-space:pre-wrap}.AttributeCellRenderers-referenceWrapper--DXIa1{align-items:center;display:flex}.AttributeCellRenderers-referenceWrapper--DXIa1 .AttributeCellRenderers-referenceContent--8oJmv{font-size:var(--cell-font-size);font-weight:400}.AttributeCellRenderers-referenceWrapper--DXIa1 .AttributeCellRenderers-referenceIcon--x3gMm{height:15px;margin-right:11px;width:15px}`;
+    head.appendChild(style);
+}
+export default styles;

package/AttributeRowCellRenderer/AttributeRowCellRenderer.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ColumnData, RowValue, CellValue } from '../types/basicTable';
+type CellValueRendererProps = {
+    value: unknown;
+    rowValue: RowValue;
+    [key: string]: unknown;
+};
+export type Props = {
+    CellValueRenderer: (props: CellValueRendererProps) => React.ReactElement;
+    cell: {
+        values: CellValue[];
+        hiddenValues?: CellValue[];
+    };
+    columnData: ColumnData;
+    columnIndex: number;
+    rowIndex: number;
+    rowValue: RowValue;
+    showRowCellChips: boolean;
+};
+declare const _default: any;
+export default _default;

package/AttributeRowCellRenderer/AttributeRowCellRenderer.js

@@ -0,0 +1,42 @@
+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 __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;
+};
+import React from 'react';
+import { pipe } from 'ramda';
+import { withCollapseButton } from '../HOCs/withCollapseButton';
+import { withTableContext } from '../HOCs/withTableContext';
+import { RowCellChips } from '../RowCellChips';
+var AttributeRowCellRenderer = function (_a) {
+    var cell = _a.cell, CellValueRenderer = _a.CellValueRenderer, columnData = _a.columnData, showRowCellChips = _a.showRowCellChips, otherProps = __rest(_a, ["cell", "CellValueRenderer", "columnData", "showRowCellChips"]);
+    return (React.createElement(React.Fragment, null,
+        cell.values.map(function (value, index) { return (React.createElement(CellValueRenderer, __assign({ key: index, value: value, columnData: columnData }, otherProps))); }),
+        showRowCellChips && React.createElement(RowCellChips, { cell: cell, dataTypeDefinition: columnData.dataTypeDefinition })));
+};
+export default pipe(withCollapseButton, withTableContext(function (_a, _b) {
+    var _c = _a.showRowCellChips, showRowCellChips = _c === void 0 ? true : _c;
+    var columnIndex = _b.columnIndex;
+    var isFirstColumn = columnIndex === 0;
+    return {
+        hasCollapseButton: isFirstColumn,
+        showRowCellChips: showRowCellChips
+    };
+}))(AttributeRowCellRenderer);

package/AttributeRowCellRenderer/index.d.ts

@@ -0,0 +1 @@
+export { default as AttributeRowCellRenderer } from './AttributeRowCellRenderer';

package/AttributeRowCellRenderer/index.js

@@ -0,0 +1 @@
+export { default as AttributeRowCellRenderer } from './AttributeRowCellRenderer';

package/DefaultHeadCellRendererWithTooltip/DefaultHeadCellRendererWithTooltip.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { HeadColorVariant, TableVariant } from '../types/basicTable';
 export type DefaultHeadCellRendererWithTooltipProps = {
     headIndex?: number;
     className?: string;
@@ -10,7 +11,9 @@ export type DefaultHeadCellRendererWithTooltipProps = {
         headCell?: string;
         headLabel?: string;
     };
-    dataReltioId?: string;
+    headColorVariant?: HeadColorVariant;
+    variant?: TableVariant;
+    dataReltioIdPrefix?: string;
     openConfigColumnPopup?: (index: number, event: React.MouseEvent<HTMLElement>) => void;
 };
 declare const _default: React.ComponentType<{

package/DefaultHeadCellRendererWithTooltip/DefaultHeadCellRendererWithTooltip.js

@@ -28,15 +28,18 @@ import DefaultHeadCellRenderer from 'react-components/dist/Table/DefaultHeadCell
 import { withTableContext } from '../HOCs/withTableContext';
 import { ExpandedValueTooltip } from '../ExpandedValueTooltip';
 import { SmallIconButton } from '../SmallIconButton';
+import { HeadColorVariant, TableVariant } from '../types/basicTable';
 import styles from './DefaultHeadCellRendererWithTooltip.module.css';
 var DefaultHeadCellRendererWithTooltip = function (_a) {
-    var _b = _a.classes, classes = _b === void 0 ? {} : _b, dataReltioId = _a.dataReltioId, headCellData = _a.headCellData, className = _a.className, openConfigColumnPopup = _a.openConfigColumnPopup, headIndex = _a.headIndex, props = __rest(_a, ["classes", "dataReltioId", "headCellData", "className", "openConfigColumnPopup", "headIndex"]);
+    var _b;
+    var _c = _a.classes, classes = _c === void 0 ? {} : _c, dataReltioIdPrefix = _a.dataReltioIdPrefix, _d = _a.headColorVariant, headColorVariant = _d === void 0 ? HeadColorVariant.White : _d, headCellData = _a.headCellData, className = _a.className, openConfigColumnPopup = _a.openConfigColumnPopup, headIndex = _a.headIndex, _e = _a.variant, variant = _e === void 0 ? TableVariant.Wide : _e, props = __rest(_a, ["classes", "dataReltioIdPrefix", "headColorVariant", "headCellData", "className", "openConfigColumnPopup", "headIndex", "variant"]);
     var headCell = (classes === null || classes === void 0 ? void 0 : classes.headCell) || styles.headCell;
     var headLabel = (classes === null || classes === void 0 ? void 0 : classes.headLabel) || styles.headLabel;
-    return (React.createElement("div", __assign({ className: classnames(headCell, className) }, (dataReltioId ? { 'data-reltio-id': dataReltioId } : {})),
+    var hasConfigButton = Boolean(openConfigColumnPopup);
+    return (React.createElement("div", __assign({ className: classnames(headCell, className, (_b = {}, _b[styles.withConfigButton] = hasConfigButton, _b), styles[headColorVariant], styles[variant]) }, (dataReltioIdPrefix ? { 'data-reltio-id': "".concat(dataReltioIdPrefix, "-table-head-cell") } : {})),
         React.createElement(DefaultHeadCellRenderer, __assign({}, props, { headIndex: headIndex, headCellData: __assign(__assign({}, headCellData), { label: (React.createElement(ExpandedValueTooltip, { value: headCellData.label },
                     React.createElement("div", { className: headLabel }, headCellData.label))) }) })),
-        openConfigColumnPopup && (React.createElement("div", { className: styles.menuButtonWrapper },
+        hasConfigButton && (React.createElement("div", { className: styles.menuButtonWrapper },
             React.createElement(SmallIconButton, { icon: MoreVertIcon, onClick: function (e) { return openConfigColumnPopup && openConfigColumnPopup(headIndex, e); }, size: "S" })))));
 };
-export default withTableContext(pipe(defaultTo({}), pick(['openConfigColumnPopup'])))(DefaultHeadCellRendererWithTooltip);
+export default withTableContext(pipe(defaultTo({}), pick(['openConfigColumnPopup', 'dataReltioIdPrefix', 'headColorVariant', 'variant'])))(DefaultHeadCellRendererWithTooltip);

package/DefaultHeadCellRendererWithTooltip/DefaultHeadCellRendererWithTooltip.module.css.js

@@ -1,9 +1,9 @@
-const styles = {"headCell":"DefaultHeadCellRendererWithTooltip-headCell--JlLvL","menuButtonWrapper":"DefaultHeadCellRendererWithTooltip-menuButtonWrapper--tMePw","headLabel":"DefaultHeadCellRendererWithTooltip-headLabel--fzLXE"};
+const styles = {"grey":"DefaultHeadCellRendererWithTooltip-grey--99Mqa","white":"DefaultHeadCellRendererWithTooltip-white--fdT-k","narrow":"DefaultHeadCellRendererWithTooltip-narrow--RPJyT","wide":"DefaultHeadCellRendererWithTooltip-wide---PQla","headCell":"DefaultHeadCellRendererWithTooltip-headCell--JlLvL","menuButtonWrapper":"DefaultHeadCellRendererWithTooltip-menuButtonWrapper--tMePw","withConfigButton":"DefaultHeadCellRendererWithTooltip-withConfigButton--hdbrm","headLabel":"DefaultHeadCellRendererWithTooltip-headLabel--fzLXE"};
 if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.DefaultHeadCellRendererWithTooltip-headCell--JlLvL{align-items:center;box-sizing:border-box;display:flex;height:100%;width:100%}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL .DefaultHeadCellRendererWithTooltip-menuButtonWrapper--tMePw{align-items:center;display:flex;justify-content:flex-end;padding-right:0;position:absolute;right:0;top:50%;transform:translateY(-50%);visibility:hidden;width:fit-content;z-index:2}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL:hover .DefaultHeadCellRendererWithTooltip-menuButtonWrapper--tMePw{visibility:visible}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL>div{padding:0 16px 0 22px;width:100%}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL>div>span{justify-content:flex-end;width:100%}.DefaultHeadCellRendererWithTooltip-headLabel--fzLXE{color:var(--mui-palette-text-primary);font-size:12px;font-weight:500;line-height:16px;overflow:hidden;white-space:nowrap}.DefaultHeadCellRendererWithTooltip-headLabel--fzLXE:after{background:linear-gradient(90deg,hsla(0,0%,100%,.2),#fff);content:"";height:100%;pointer-events:none;position:absolute;right:0;top:0;width:40px}`;
+    style.innerHTML = `.DefaultHeadCellRendererWithTooltip-grey--99Mqa{--background-color:#f0f0f0;--fadeBackground:linear-gradient(90deg,hsla(0,0%,94%,0),#f0f0f0)}.DefaultHeadCellRendererWithTooltip-white--fdT-k{--background-color:#fff;--fadeBackground:linear-gradient(90deg,hsla(0,0%,100%,0),#fff)}.DefaultHeadCellRendererWithTooltip-narrow--RPJyT{--head-cell-padding:0 16px 0 16px}.DefaultHeadCellRendererWithTooltip-wide---PQla{--head-cell-padding:0 16px 0 22px}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL{align-items:center;background-color:var(--background-color);box-sizing:border-box;display:flex;height:100%;width:100%}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL .DefaultHeadCellRendererWithTooltip-menuButtonWrapper--tMePw{align-items:center;display:flex;justify-content:flex-end;padding-right:0;position:absolute;right:0;top:50%;transform:translateY(-50%);visibility:hidden;width:fit-content;z-index:2}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL:hover .DefaultHeadCellRendererWithTooltip-menuButtonWrapper--tMePw{visibility:visible}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL.DefaultHeadCellRendererWithTooltip-withConfigButton--hdbrm:hover>div>span{width:calc(100% + 24px)}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL>div{padding:var(--head-cell-padding);width:100%}.DefaultHeadCellRendererWithTooltip-headCell--JlLvL>div>span{justify-content:flex-end;width:calc(100% + 36px)}.DefaultHeadCellRendererWithTooltip-headLabel--fzLXE{color:var(--mui-palette-text-primary);font-size:12px;font-weight:500;line-height:16px;overflow:hidden;white-space:nowrap}.DefaultHeadCellRendererWithTooltip-headLabel--fzLXE:after{background:var(--fadeBackground);content:"";height:100%;pointer-events:none;position:absolute;right:0;top:0;width:24px}`;
     head.appendChild(style);
 }
 export default styles;

package/ProfileBand/ProfileBand.d.ts

@@ -1,12 +1,13 @@
 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>>;
+    className?: string;
+    classes?: {
+        profileBand?: string;
+    };
     renderLabel?: (label: string) => React.ReactNode;
 };
-export declare const ProfileBand: ({ className, entity, children, classes, renderLabel }: Props) => React.JSX.Element;
+export declare const ProfileBand: ({ entity, children, className, classes, renderLabel }: Props) => React.JSX.Element;
 export {};

package/ProfileBand/ProfileBand.js

@@ -8,11 +8,10 @@ import { getLabel, isActiveObject, getBusinessCardAttributesText, getEntityId, i
 import { EntityAvatar } from '../EntityAvatar';
 import { EntityTypeBadge } from '../EntityTypeBadge';
 import { useMdmMetadata, useMdmShowEntityId } from '../contexts/MdmModuleContext';
-import { useStyles } from './styles';
+import styles from './ProfileBand.module.css';
 export 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 ? identity : _c;
-    var styles = useStyles({ classes: classes });
+    var entity = _a.entity, children = _a.children, className = _a.className, classes = _a.classes, _c = _a.renderLabel, renderLabel = _c === void 0 ? identity : _c;
     var metadata = useMdmMetadata();
     var showEntityId = useMdmShowEntityId();
     var handleCopyEntityIdToClipboard = useCallback(function () {
@@ -28,7 +27,7 @@ export var ProfileBand = function (_a) {
     var entityUri = entity.uri;
     var entityId = getEntityId(entity);
     return (React.createElement("div", { className: classnames(styles.profileBandWrapper, className), "data-reltio-id": "reltio-profile-band" },
-        React.createElement("div", { className: classnames(styles.profileBand, (_b = {},
+        React.createElement("div", { className: classnames(styles.profileBand, classes === null || classes === void 0 ? void 0 : classes.profileBand, (_b = {},
                 _b[styles.inactive] = !isActive,
                 _b)), "data-entity-uri": entityUri },
             React.createElement(EntityAvatar, { key: entity.uri, entity: entity, avatarClassName: styles.profileIcon, imageClassName: styles.imageProfileIcon }),
@@ -39,7 +38,7 @@ export var ProfileBand = function (_a) {
                     businessCardText && (React.createElement(Typography, { variant: "subtitle1", className: styles.businessCard }, businessCardText))),
                 React.createElement("div", { className: styles.specialInfo },
                     React.createElement("div", { className: styles.entityType },
-                        React.createElement(EntityTypeBadge, { entity: entity, size: "medium", className: styles.badge }),
+                        React.createElement(EntityTypeBadge, { entity: entity, size: "medium" }),
                         !isTempUri(entityUri) && showEntityId && (React.createElement(Tooltip, { title: i18n.text('Copy to clipboard') },
                             React.createElement(Typography, { display: "inline", variant: "body2", className: styles.entityId, onClick: handleCopyEntityIdToClipboard },
                                 i18n.text('Entity ID'),

package/ProfileBand/ProfileBand.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"profileBandWrapper":"ProfileBand-profileBandWrapper--2qT6n","profileBand":"ProfileBand-profileBand--1t6Tw","inactive":"ProfileBand-inactive--5cmGK","profileIcon":"ProfileBand-profileIcon--Qw2fJ","imageProfileIcon":"ProfileBand-imageProfileIcon--btkGT","profileInfo":"ProfileBand-profileInfo--6KvVU","label":"ProfileBand-label--6rq8C","specialInfo":"ProfileBand-specialInfo--SJoYt","secondaryLabel":"ProfileBand-secondaryLabel--8hq1t","businessCard":"ProfileBand-businessCard--vk3x5","entityType":"ProfileBand-entityType--OitFz","entityId":"ProfileBand-entityId--ALqzc"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ProfileBand-profileBandWrapper--2qT6n{box-shadow:0 1px 0 rgba(0,0,0,.12);flex-shrink:0;margin-bottom:1px}.ProfileBand-profileBand--1t6Tw{align-items:flex-start;background-color:#fff;display:flex;padding:16px 12px 16px 16px}.ProfileBand-profileBand--1t6Tw:after{content:"";font-size:0;min-height:inherit}.ProfileBand-inactive--5cmGK{background:var(--mui-inactiveBackground)}.ProfileBand-profileIcon--Qw2fJ{margin-right:12px}.ProfileBand-imageProfileIcon--btkGT{height:48px;width:48px}.ProfileBand-profileInfo--6KvVU{display:flex;flex:1 1 50%;flex-direction:column}.ProfileBand-label--6rq8C{color:var(--mui-palette-text-primary);letter-spacing:.25px;line-height:1.2;white-space:break-spaces;word-break:break-word}.ProfileBand-label--6rq8C+.ProfileBand-specialInfo--SJoYt{margin-top:4px}.ProfileBand-secondaryLabel--8hq1t{color:var(--mui-palette-text-primary);display:inline-flex;font-size:14px;font-weight:400;line-height:16px;margin-top:2px;white-space:break-spaces}.ProfileBand-secondaryLabel--8hq1t+.ProfileBand-businessCard--vk3x5{margin-left:12px}.ProfileBand-businessCard--vk3x5{color:var(--mui-palette-text-secondary);display:inline-flex;font-size:14px;line-height:1.2;margin-top:4px;white-space:break-spaces}.ProfileBand-specialInfo--SJoYt{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:8px;width:100%}.ProfileBand-entityType--OitFz{display:flex;flex-wrap:wrap}.ProfileBand-entityId--ALqzc{color:var(--mui-palette-text-secondary);cursor:pointer;font-size:13px;white-space:nowrap}.ProfileBand-entityId--ALqzc:hover{text-decoration:underline}`;
+    head.appendChild(style);
+}
+export default styles;

package/RCTree/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"expandButton" | "titleWrapper" | "collapseButton" | "dropIndicator" | "switcherButtonWrapper" | "switcherButton" | "treeContainer" | "treeWrapper" | "dropNotAllowed" | "draggedChildrenNode" | "dragHandle" | "dragHandleDragging" | "@global">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"expandButton" | "collapseButton" | "titleWrapper" | "dropIndicator" | "switcherButtonWrapper" | "switcherButton" | "treeContainer" | "treeWrapper" | "dropNotAllowed" | "draggedChildrenNode" | "dragHandle" | "dragHandleDragging" | "@global">;

package/RowCellChipWithTooltip/RowCellChipWithTooltip.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { CellValue, RenderRowCellProps } from '../types/basicTable';
+type Props = {
+    className?: string;
+    values: CellValue[];
+    dataTypeDefinition: RenderRowCellProps['columnData']['dataTypeDefinition'];
+};
+export declare const RowCellChipWithTooltip: ({ className, values, dataTypeDefinition }: Props) => React.JSX.Element;
+export {};

package/RowCellChipWithTooltip/RowCellChipWithTooltip.js

@@ -0,0 +1,18 @@
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
+import Chip from '@mui/material/Chip';
+import { DataTypeValue } from '../DataTypeValue';
+import { withTooltip } from '../HOCs/withTooltip';
+import { getAttributeValue, getLabel, isComplexAttribute, wrapInArrayIfNeeded } from '@reltio/mdm-sdk';
+import styles from './RowCellChipWithTooltip.module.css';
+var ChipWithTooltip = withTooltip(Chip);
+export var RowCellChipWithTooltip = function (_a) {
+    var className = _a.className, values = _a.values, dataTypeDefinition = _a.dataTypeDefinition;
+    var tooltipTitle = useMemo(function () { return (React.createElement("div", null, values.map(function (value, i) { return (React.createElement("div", { key: i }, isComplexAttribute(dataTypeDefinition)
+        ? getLabel(value.label)
+        : wrapInArrayIfNeeded(value).map(function (value, index) { return (React.createElement(DataTypeValue, { key: index, value: getAttributeValue(value), dataTypeDefinition: dataTypeDefinition, rich: false })); }))); }))); }, [values, dataTypeDefinition]);
+    return (React.createElement(ChipWithTooltip, { tooltipTitle: tooltipTitle, label: '+ ' + values.length, variant: "outlined", classes: {
+            root: classnames(styles.rowCellChip, className),
+            label: styles.rowCellChipLabel
+        } }));
+};

package/RowCellChipWithTooltip/RowCellChipWithTooltip.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"rowCellChip":"RowCellChipWithTooltip-rowCellChip--VERMm","rowCellChipLabel":"RowCellChipWithTooltip-rowCellChipLabel--K6DDF"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.RowCellChipWithTooltip-rowCellChip--VERMm{background-color:#fff;border-color:rgba(0,0,0,.38);height:16px;padding:1px 4px}.RowCellChipWithTooltip-rowCellChipLabel--K6DDF{font-size:10px;padding:0}`;
+    head.appendChild(style);
+}
+export default styles;

package/RowCellChipWithTooltip/index.d.ts

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

package/RowCellChipWithTooltip/index.js

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

package/RowCellChips/RowCellChips.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CellValue, RenderRowCellProps } from '../types/basicTable';
+type Props = {
+    cell: {
+        values: CellValue[];
+        hiddenValues?: CellValue[];
+    };
+    dataTypeDefinition: RenderRowCellProps['columnData']['dataTypeDefinition'];
+};
+export declare const RowCellChips: ({ cell, dataTypeDefinition }: Props) => React.JSX.Element;
+export {};

package/RowCellChips/RowCellChips.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RowCellChipWithTooltip } from '../RowCellChipWithTooltip';
+import styles from './RowCellChips.module.css';
+export var RowCellChips = function (_a) {
+    var cell = _a.cell, dataTypeDefinition = _a.dataTypeDefinition;
+    var _b = (cell || {}).hiddenValues, hiddenValues = _b === void 0 ? [] : _b;
+    var isRowCollapsed = hiddenValues.length > 0;
+    return isRowCollapsed ? (React.createElement("div", { className: styles.rowCellChipsContainer }, hiddenValues.length > 0 && (React.createElement(RowCellChipWithTooltip, { values: hiddenValues, dataTypeDefinition: dataTypeDefinition })))) : null;
+};

package/RowCellChips/RowCellChips.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"rowCellChipsContainer":"RowCellChips-rowCellChipsContainer--haB-z"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.RowCellChips-rowCellChipsContainer--haB-z{display:flex;position:absolute;right:4px;top:4px;z-index:1}`;
+    head.appendChild(style);
+}
+export default styles;

package/RowCellChips/index.d.ts

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

package/RowCellChips/index.js

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

package/TableWithBars/TableWithBars.test.js

@@ -64,7 +64,7 @@ describe('TableWithBars', function () {
     it('should render BasicTable', function () {
         var unmockTableSizing = mockBasicTableSizing();
         setUp();
-        var headCells = screen.getAllByTestId('table-with-bar-head-cell');
+        var headCells = screen.getAllByTestId('table-with-bar-table-head-cell');
         expect(headCells).toHaveLength(2);
         expect(headCells[0]).toHaveTextContent('Attributes');
         expect(headCells[1]).toHaveTextContent('No of Profiles');
@@ -82,14 +82,14 @@ describe('TableWithBars', function () {
     });
     it('should render TableWithBars with headers from options', function () {
         setUp({ options: { headers: ['Test header 1', 'Test header 2'] } });
-        var headCells = screen.getAllByTestId('table-with-bar-head-cell');
+        var headCells = screen.getAllByTestId('table-with-bar-table-head-cell');
         expect(headCells).toHaveLength(2);
         expect(headCells[0]).toHaveTextContent('Test header 1');
         expect(headCells[1]).toHaveTextContent('Test header 2');
     });
     it('should not render second column when showValues = false', function () {
         setUp({ options: { showValues: false } });
-        var headCells = screen.getAllByTestId('table-with-bar-head-cell');
+        var headCells = screen.getAllByTestId('table-with-bar-table-head-cell');
         expect(headCells).toHaveLength(1);
         expect(headCells[0]).toHaveTextContent('Attributes');
     });

package/TableWithBars/components/HeadCellRenderer/HeadCellRenderer.js

@@ -17,5 +17,5 @@ export var HeadCellRenderer = function (props) {
     return (React.createElement(DefaultHeadCellRendererWithTooltip, __assign({}, props, { classes: {
             headCell: styles.headCell,
             headLabel: styles.headLabel
-        }, dataReltioId: "table-with-bar-head-cell" })));
+        }, dataReltioIdPrefix: "table-with-bar" })));
 };

package/cjs/AttributeCellRenderers/BlobRenderer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.ComponentType<{
+    [x: string]: unknown;
+}>;
+export default _default;

package/cjs/AttributeCellRenderers/BlobRenderer.js

@@ -0,0 +1,28 @@
+"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 classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var withTableContext_1 = require("../HOCs/withTableContext");
+var basicTable_1 = require("../types/basicTable");
+var useMaskedAttribute_1 = require("../hooks/useMaskedAttribute");
+var MaskingSwitcher_1 = require("../MaskingSwitcher");
+var styles_module_css_1 = __importDefault(require("./styles.module.css"));
+var stopPropagation = function (event) {
+    event.stopPropagation();
+};
+var BlobRenderer = function (_a) {
+    var value = _a.value, _b = _a.columnData, dataTypeDefinition = _b.dataTypeDefinition, className = _b.className, entity = _a.rowValue.label, _c = _a.variant, variant = _c === void 0 ? basicTable_1.TableVariant.Wide : _c;
+    var _d = (0, useMaskedAttribute_1.useMaskedAttribute)({
+        attributeType: dataTypeDefinition,
+        attributeValue: value,
+        entity: entity
+    }), isUnmaskingNeeded = _d.isUnmaskingNeeded, isMasked = _d.isMasked, toggleMasking = _d.toggleMasking, attributeValue = _d.attributeValue, isUnmasking = _d.isUnmasking;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_1.default.blobWrapper, styles_module_css_1.default[variant], className), onScroll: stopPropagation },
+        attributeValue.value,
+        isUnmaskingNeeded && (react_1.default.createElement(MaskingSwitcher_1.MaskingSwitcher, { isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking }))));
+};
+exports.default = (0, withTableContext_1.withTableContext)((0, ramda_1.pick)(['variant']))(BlobRenderer);