@reltio/components 1.4.2190 → 1.4.2192

package/cjs/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/cjs/AttributeCellRenderers/EntityIdRenderer.js

@@ -0,0 +1,26 @@
+"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 });
+exports.EntityIdRenderer = void 0;
+var react_1 = __importDefault(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var SimpleAttributeRenderer_1 = __importDefault(require("./SimpleAttributeRenderer"));
+var dataTypeDefinition = { type: mdm_sdk_1.DataTypes.TYPE_STRING };
+var EntityIdRenderer = function (_a) {
+    var value = _a.value, columnData = _a.columnData;
+    return (react_1.default.createElement(SimpleAttributeRenderer_1.default, { value: { value: value, uri: '' }, columnData: __assign(__assign({}, columnData), { dataTypeDefinition: dataTypeDefinition }), rowValue: { label: { uri: '', type: '' } } }));
+};
+exports.EntityIdRenderer = EntityIdRenderer;

package/cjs/AttributeCellRenderers/EntityProfileRenderer.d.ts

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

package/cjs/AttributeCellRenderers/EntityProfileRenderer.js

@@ -0,0 +1,22 @@
+"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 mdm_sdk_1 = require("@reltio/mdm-sdk");
+var withTableContext_1 = require("../HOCs/withTableContext");
+var EntityAvatar_1 = require("../EntityAvatar");
+var EntityUriLink_1 = require("../EntityUriLink");
+var basicTable_1 = require("../types/basicTable");
+var styles_module_css_1 = __importDefault(require("./styles.module.css"));
+var EntityProfileRenderer = function (_a) {
+    var _b = _a.value, entity = _b === void 0 ? {} : _b, _c = _a.variant, variant = _c === void 0 ? basicTable_1.TableVariant.Wide : _c, className = _a.columnData.className;
+    var label = (0, mdm_sdk_1.getLabel)(entity.label);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_1.default.defaultWrapper, styles_module_css_1.default.profileWrapper, styles_module_css_1.default[variant], className) },
+        react_1.default.createElement(EntityAvatar_1.EntityAvatar, { avatarClassName: styles_module_css_1.default.entityAvatar, imageClassName: styles_module_css_1.default.entityAvatarImage, entity: entity }),
+        react_1.default.createElement(EntityUriLink_1.EntityUriLink, { value: (0, mdm_sdk_1.getEntityUriForLink)(entity), className: styles_module_css_1.default.entityLink }, label)));
+};
+exports.default = (0, withTableContext_1.withTableContext)((0, ramda_1.pick)(['variant']))(EntityProfileRenderer);

package/cjs/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/cjs/AttributeCellRenderers/ImageRenderer.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageRenderer = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var styles_module_css_1 = __importDefault(require("./styles.module.css"));
+var ImageRenderer = function (_a) {
+    var value = _a.value, className = _a.columnData.className;
+    var src = (0, mdm_sdk_1.getImageAttributeOvThumbnailUrl)({ value: value });
+    return src ? (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_1.default.imageWrapper, className) },
+        react_1.default.createElement("img", { src: src }))) : null;
+};
+exports.ImageRenderer = ImageRenderer;

package/cjs/AttributeCellRenderers/ReferenceRenderer.d.ts

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

package/cjs/AttributeCellRenderers/ReferenceRenderer.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var withTableContext_1 = require("../HOCs/withTableContext");
+var basicTable_1 = require("../types/basicTable");
+var AvatarWithFallback_1 = require("../AvatarWithFallback");
+var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
+var EntityUriLink_1 = require("../EntityUriLink");
+var ExpandedValueTooltip_1 = require("../ExpandedValueTooltip");
+var styles_module_css_1 = __importDefault(require("./styles.module.css"));
+var ReferenceRenderer = function (_a) {
+    var value = _a.value, className = _a.columnData.className, _b = _a.variant, variant = _b === void 0 ? basicTable_1.TableVariant.Wide : _b;
+    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
+    var apiPath = (0, MdmModuleContext_1.useMdmApiPath)();
+    var imagePath = (0, MdmModuleContext_1.useMdmImagePath)();
+    var entityTypeGraphIcon = (0, mdm_sdk_1.getEntityTypeGraphIcon)(metadata, (value === null || value === void 0 ? void 0 : value.refEntity) || {});
+    var label = value && (0, mdm_sdk_1.getLabel)(value.label);
+    return (value && (react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: label },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_1.default.defaultWrapper, styles_module_css_1.default.referenceWrapper, styles_module_css_1.default[variant], className) },
+            react_1.default.createElement(AvatarWithFallback_1.AvatarWithFallback, { className: styles_module_css_1.default.referenceIcon, icon: (0, mdm_sdk_1.getAbsoluteImageUrl)(imagePath || apiPath, entityTypeGraphIcon) }),
+            react_1.default.createElement(EntityUriLink_1.EntityUriLink, { value: value.refEntity.objectURI, className: (0, classnames_1.default)(styles_module_css_1.default.referenceContent, styles_module_css_1.default.entityLink) }, label)))));
+};
+exports.default = (0, withTableContext_1.withTableContext)((0, ramda_1.pick)(['variant']))(ReferenceRenderer);

package/cjs/AttributeCellRenderers/SimpleAttributeRenderer.d.ts

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

package/cjs/AttributeCellRenderers/SimpleAttributeRenderer.js

@@ -0,0 +1,27 @@
+"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 mdm_sdk_1 = require("@reltio/mdm-sdk");
+var basicTable_1 = require("../types/basicTable");
+var withTableContext_1 = require("../HOCs/withTableContext");
+var useMaskedAttribute_1 = require("../hooks/useMaskedAttribute");
+var DataTypeValue_1 = require("../DataTypeValue");
+var MaskingSwitcher_1 = require("../MaskingSwitcher");
+var styles_module_css_1 = __importDefault(require("./styles.module.css"));
+var SimpleAttributeRenderer = function (_a) {
+    var value = _a.value, _b = _a.variant, variant = _b === void 0 ? basicTable_1.TableVariant.Wide : _b, _c = _a.columnData, dataTypeDefinition = _c.dataTypeDefinition, className = _c.className, entity = _a.rowValue.label;
+    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.defaultWrapper, styles_module_css_1.default[variant], className) },
+        react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: (0, mdm_sdk_1.getAttributeValue)(attributeValue), dataTypeDefinition: dataTypeDefinition }),
+        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']))(SimpleAttributeRenderer);

package/cjs/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/cjs/AttributeCellRenderers/getAttributeValueRenderer.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAttributeValueRenderer = void 0;
+var ramda_1 = require("ramda");
+var EntityProfileRenderer_1 = __importDefault(require("./EntityProfileRenderer"));
+var ReferenceRenderer_1 = __importDefault(require("./ReferenceRenderer"));
+var BlobRenderer_1 = __importDefault(require("./BlobRenderer"));
+var ImageRenderer_1 = require("./ImageRenderer");
+var EntityIdRenderer_1 = require("./EntityIdRenderer");
+var SimpleAttributeRenderer_1 = __importDefault(require("./SimpleAttributeRenderer"));
+var getAttributeValueRenderer = function (columnInfo) {
+    if (columnInfo.id === 'label') {
+        return EntityProfileRenderer_1.default;
+    }
+    if (columnInfo.id === 'entityId') {
+        return EntityIdRenderer_1.EntityIdRenderer;
+    }
+    switch ((0, ramda_1.path)(['dataTypeDefinition', 'type'], columnInfo)) {
+        case 'Blob':
+            return BlobRenderer_1.default;
+        case 'Reference':
+            return ReferenceRenderer_1.default;
+        case 'Image':
+            return ImageRenderer_1.ImageRenderer;
+    }
+    return SimpleAttributeRenderer_1.default;
+};
+exports.getAttributeValueRenderer = getAttributeValueRenderer;

package/cjs/AttributeCellRenderers/index.d.ts

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

package/cjs/AttributeCellRenderers/index.js

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

package/cjs/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);
+}
+module.exports = styles;

package/cjs/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/cjs/AttributeRowCellRenderer/AttributeRowCellRenderer.js

@@ -0,0 +1,47 @@
+"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 __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 });
+var react_1 = __importDefault(require("react"));
+var ramda_1 = require("ramda");
+var withCollapseButton_1 = require("../HOCs/withCollapseButton");
+var withTableContext_1 = require("../HOCs/withTableContext");
+var RowCellChips_1 = require("../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_1.default.createElement(react_1.default.Fragment, null,
+        cell.values.map(function (value, index) { return (react_1.default.createElement(CellValueRenderer, __assign({ key: index, value: value, columnData: columnData }, otherProps))); }),
+        showRowCellChips && react_1.default.createElement(RowCellChips_1.RowCellChips, { cell: cell, dataTypeDefinition: columnData.dataTypeDefinition })));
+};
+exports.default = (0, ramda_1.pipe)(withCollapseButton_1.withCollapseButton, (0, withTableContext_1.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/cjs/AttributeRowCellRenderer/index.d.ts

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

package/cjs/AttributeRowCellRenderer/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeRowCellRenderer = void 0;
+var AttributeRowCellRenderer_1 = require("./AttributeRowCellRenderer");
+Object.defineProperty(exports, "AttributeRowCellRenderer", { enumerable: true, get: function () { return __importDefault(AttributeRowCellRenderer_1).default; } });

package/cjs/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/cjs/DefaultHeadCellRendererWithTooltip/DefaultHeadCellRendererWithTooltip.js

@@ -33,15 +33,18 @@ var DefaultHeadCellRenderer_1 = __importDefault(require("react-components/dist/T
 var withTableContext_1 = require("../HOCs/withTableContext");
 var ExpandedValueTooltip_1 = require("../ExpandedValueTooltip");
 var SmallIconButton_1 = require("../SmallIconButton");
+var basicTable_1 = require("../types/basicTable");
 var DefaultHeadCellRendererWithTooltip_module_css_1 = __importDefault(require("./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 ? basicTable_1.HeadColorVariant.White : _d, headCellData = _a.headCellData, className = _a.className, openConfigColumnPopup = _a.openConfigColumnPopup, headIndex = _a.headIndex, _e = _a.variant, variant = _e === void 0 ? basicTable_1.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) || DefaultHeadCellRendererWithTooltip_module_css_1.default.headCell;
     var headLabel = (classes === null || classes === void 0 ? void 0 : classes.headLabel) || DefaultHeadCellRendererWithTooltip_module_css_1.default.headLabel;
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)(headCell, className) }, (dataReltioId ? { 'data-reltio-id': dataReltioId } : {})),
+    var hasConfigButton = Boolean(openConfigColumnPopup);
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)(headCell, className, (_b = {}, _b[DefaultHeadCellRendererWithTooltip_module_css_1.default.withConfigButton] = hasConfigButton, _b), DefaultHeadCellRendererWithTooltip_module_css_1.default[headColorVariant], DefaultHeadCellRendererWithTooltip_module_css_1.default[variant]) }, (dataReltioIdPrefix ? { 'data-reltio-id': "".concat(dataReltioIdPrefix, "-table-head-cell") } : {})),
         react_1.default.createElement(DefaultHeadCellRenderer_1.default, __assign({}, props, { headIndex: headIndex, headCellData: __assign(__assign({}, headCellData), { label: (react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: headCellData.label },
                     react_1.default.createElement("div", { className: headLabel }, headCellData.label))) }) })),
-        openConfigColumnPopup && (react_1.default.createElement("div", { className: DefaultHeadCellRendererWithTooltip_module_css_1.default.menuButtonWrapper },
+        hasConfigButton && (react_1.default.createElement("div", { className: DefaultHeadCellRendererWithTooltip_module_css_1.default.menuButtonWrapper },
             react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: MoreVert_1.default, onClick: function (e) { return openConfigColumnPopup && openConfigColumnPopup(headIndex, e); }, size: "S" })))));
 };
-exports.default = (0, withTableContext_1.withTableContext)((0, ramda_1.pipe)((0, ramda_1.defaultTo)({}), (0, ramda_1.pick)(['openConfigColumnPopup'])))(DefaultHeadCellRendererWithTooltip);
+exports.default = (0, withTableContext_1.withTableContext)((0, ramda_1.pipe)((0, ramda_1.defaultTo)({}), (0, ramda_1.pick)(['openConfigColumnPopup', 'dataReltioIdPrefix', 'headColorVariant', 'variant'])))(DefaultHeadCellRendererWithTooltip);

package/cjs/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);
 }
 module.exports = styles;

package/cjs/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/cjs/ProfileBand/ProfileBand.js

@@ -37,11 +37,10 @@ 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_module_css_1 = __importDefault(require("./ProfileBand.module.css"));
 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 entity = _a.entity, children = _a.children, className = _a.className, classes = _a.classes, _c = _a.renderLabel, renderLabel = _c === void 0 ? ramda_1.identity : _c;
     var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     var showEntityId = (0, MdmModuleContext_1.useMdmShowEntityId)();
     var handleCopyEntityIdToClipboard = (0, react_1.useCallback)(function () {
@@ -56,21 +55,21 @@ var ProfileBand = function (_a) {
     var isActive = (0, mdm_sdk_1.isActiveObject)(entity);
     var entityUri = entity.uri;
     var entityId = (0, mdm_sdk_1.getEntityId)(entity);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.profileBandWrapper, className), "data-reltio-id": "reltio-profile-band" },
-        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.profileBand, (_b = {},
-                _b[styles.inactive] = !isActive,
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(ProfileBand_module_css_1.default.profileBandWrapper, className), "data-reltio-id": "reltio-profile-band" },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(ProfileBand_module_css_1.default.profileBand, classes === null || classes === void 0 ? void 0 : classes.profileBand, (_b = {},
+                _b[ProfileBand_module_css_1.default.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(EntityAvatar_1.EntityAvatar, { key: entity.uri, entity: entity, avatarClassName: ProfileBand_module_css_1.default.profileIcon, imageClassName: ProfileBand_module_css_1.default.imageProfileIcon }),
+            react_1.default.createElement("div", { className: ProfileBand_module_css_1.default.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 }),
+                    react_1.default.createElement(Typography_1.default, { variant: "h6", className: ProfileBand_module_css_1.default.label }, renderLabel(label)),
+                    secondaryLabel && (react_1.default.createElement(Typography_1.default, { variant: "subtitle2", className: ProfileBand_module_css_1.default.secondaryLabel }, secondaryLabel)),
+                    businessCardText && (react_1.default.createElement(Typography_1.default, { variant: "subtitle1", className: ProfileBand_module_css_1.default.businessCard }, businessCardText))),
+                react_1.default.createElement("div", { className: ProfileBand_module_css_1.default.specialInfo },
+                    react_1.default.createElement("div", { className: ProfileBand_module_css_1.default.entityType },
+                        react_1.default.createElement(EntityTypeBadge_1.EntityTypeBadge, { entity: entity, size: "medium" }),
                         !(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 },
+                            react_1.default.createElement(Typography_1.default, { display: "inline", variant: "body2", className: ProfileBand_module_css_1.default.entityId, onClick: handleCopyEntityIdToClipboard },
                                 ui_i18n_1.default.text('Entity ID'),
                                 ": ",
                                 entityId)))))),

package/cjs/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);
+}
+module.exports = styles;

package/cjs/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/cjs/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/cjs/RowCellChipWithTooltip/RowCellChipWithTooltip.js

@@ -0,0 +1,48 @@
+"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.RowCellChipWithTooltip = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Chip_1 = __importDefault(require("@mui/material/Chip"));
+var DataTypeValue_1 = require("../DataTypeValue");
+var withTooltip_1 = require("../HOCs/withTooltip");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var RowCellChipWithTooltip_module_css_1 = __importDefault(require("./RowCellChipWithTooltip.module.css"));
+var ChipWithTooltip = (0, withTooltip_1.withTooltip)(Chip_1.default);
+var RowCellChipWithTooltip = function (_a) {
+    var className = _a.className, values = _a.values, dataTypeDefinition = _a.dataTypeDefinition;
+    var tooltipTitle = (0, react_1.useMemo)(function () { return (react_1.default.createElement("div", null, values.map(function (value, i) { return (react_1.default.createElement("div", { key: i }, (0, mdm_sdk_1.isComplexAttribute)(dataTypeDefinition)
+        ? (0, mdm_sdk_1.getLabel)(value.label)
+        : (0, mdm_sdk_1.wrapInArrayIfNeeded)(value).map(function (value, index) { return (react_1.default.createElement(DataTypeValue_1.DataTypeValue, { key: index, value: (0, mdm_sdk_1.getAttributeValue)(value), dataTypeDefinition: dataTypeDefinition, rich: false })); }))); }))); }, [values, dataTypeDefinition]);
+    return (react_1.default.createElement(ChipWithTooltip, { tooltipTitle: tooltipTitle, label: '+ ' + values.length, variant: "outlined", classes: {
+            root: (0, classnames_1.default)(RowCellChipWithTooltip_module_css_1.default.rowCellChip, className),
+            label: RowCellChipWithTooltip_module_css_1.default.rowCellChipLabel
+        } }));
+};
+exports.RowCellChipWithTooltip = RowCellChipWithTooltip;

package/cjs/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);
+}
+module.exports = styles;

package/cjs/RowCellChipWithTooltip/index.d.ts

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

package/cjs/RowCellChipWithTooltip/index.js

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

package/cjs/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/cjs/RowCellChips/RowCellChips.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowCellChips = void 0;
+var react_1 = __importDefault(require("react"));
+var RowCellChipWithTooltip_1 = require("../RowCellChipWithTooltip");
+var RowCellChips_module_css_1 = __importDefault(require("./RowCellChips.module.css"));
+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_1.default.createElement("div", { className: RowCellChips_module_css_1.default.rowCellChipsContainer }, hiddenValues.length > 0 && (react_1.default.createElement(RowCellChipWithTooltip_1.RowCellChipWithTooltip, { values: hiddenValues, dataTypeDefinition: dataTypeDefinition })))) : null;
+};
+exports.RowCellChips = RowCellChips;

package/cjs/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);
+}
+module.exports = styles;