@reltio/components 1.4.1824-hf → 1.4.1836-hf

package/cjs/TableWithBars/components/AttributeCellRenderer/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.AttributeCellRenderer = void 0;
+var AttributeCellRenderer_1 = require("./AttributeCellRenderer");
+Object.defineProperty(exports, "AttributeCellRenderer", { enumerable: true, get: function () { return __importDefault(AttributeCellRenderer_1).default; } });

package/cjs/TableWithBars/components/AttributeCellRenderer/styles.d.ts

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

package/cjs/TableWithBars/components/AttributeCellRenderer/styles.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+var textOverflow = {
+    content: '""',
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    width: '40px',
+    height: '100%',
+    background: 'linear-gradient(to right, rgba(255, 255, 255, 0.2), #fff 100%)',
+    pointerEvents: 'none'
+};
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+    attribute: {
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        fontWeight: 'normal',
+        lineHeight: '15px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        padding: '0 16px',
+        '&:after': textOverflow
+    }
+}); });

package/cjs/TableWithBars/components/HeadCellRenderer/HeadCellRenderer.d.ts

@@ -0,0 +1,8 @@
+type HeadCellRendererProps = {
+    className?: string;
+    headCellData: {
+        label: string;
+    };
+};
+export declare const HeadCellRenderer: ({ className, headCellData, ...otherProps }: HeadCellRendererProps) => JSX.Element;
+export {};

package/cjs/TableWithBars/components/HeadCellRenderer/HeadCellRenderer.js

@@ -0,0 +1,41 @@
+"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 });
+exports.HeadCellRenderer = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var DefaultHeadCellRenderer_1 = __importDefault(require("react-components/dist/Table/DefaultHeadCellRenderer/DefaultHeadCellRenderer"));
+var ExpandedValueTooltip_1 = require("../../../ExpandedValueTooltip");
+var styles_1 = require("./styles");
+var HeadCellRenderer = function (_a) {
+    var className = _a.className, headCellData = _a.headCellData, otherProps = __rest(_a, ["className", "headCellData"]);
+    var styles = (0, styles_1.useStyles)();
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.headCell, className) },
+        react_1.default.createElement(DefaultHeadCellRenderer_1.default, __assign({}, otherProps, { headCellData: __assign(__assign({}, headCellData), { label: (react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: headCellData.label },
+                    react_1.default.createElement("div", { className: styles.headLabel }, headCellData.label))) }) }))));
+};
+exports.HeadCellRenderer = HeadCellRenderer;

package/cjs/TableWithBars/components/HeadCellRenderer/HeadCellRenderer.test.d.ts

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

package/cjs/TableWithBars/components/HeadCellRenderer/HeadCellRenderer.test.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var DefaultHeadCellRenderer_1 = __importDefault(require("react-components/dist/Table/DefaultHeadCellRenderer/DefaultHeadCellRenderer"));
+var ExpandedValueTooltip_1 = require("../../../ExpandedValueTooltip");
+var HeadCellRenderer_1 = require("./HeadCellRenderer");
+describe('HeadCellRenderer', function () {
+    it('should render main parts', function () {
+        var header = 'Test header';
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(HeadCellRenderer_1.HeadCellRenderer, { headCellData: { label: header } }));
+        var cell = wrapper.find(DefaultHeadCellRenderer_1.default);
+        expect(cell).toHaveLength(1);
+        var headCellData = cell.prop('headCellData');
+        var cellData = new enzyme_1.ReactWrapper(headCellData.label);
+        expect(cellData).toHaveLength(1);
+        var labelWrapper = cellData.find(ExpandedValueTooltip_1.ExpandedValueTooltip);
+        expect(labelWrapper).toHaveLength(1);
+        expect(labelWrapper.prop('value')).toEqual(header);
+        expect(new enzyme_1.ReactWrapper(labelWrapper.prop('children')).text()).toBe(header);
+    });
+});

package/cjs/TableWithBars/components/HeadCellRenderer/index.d.ts

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

package/cjs/TableWithBars/components/HeadCellRenderer/index.js

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

package/cjs/TableWithBars/components/HeadCellRenderer/styles.d.ts

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

package/cjs/TableWithBars/components/HeadCellRenderer/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+var textOverflow = {
+    content: '""',
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    width: '40px',
+    height: '100%',
+    background: 'linear-gradient(to right, rgba(255, 255, 255, 0.2), #fff 100%)',
+    pointerEvents: 'none'
+};
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+    headCell: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        '&>div': {
+            padding: '0 16px'
+        }
+    },
+    headLabel: {
+        color: theme.palette.text.primary,
+        fontSize: '12px',
+        fontWeight: 500,
+        lineHeight: '16px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        '&:after': textOverflow
+    }
+}); });

package/cjs/TableWithBars/components/NumberCellValueRenderer/NumberCellValueRenderer.d.ts

@@ -0,0 +1,8 @@
+type NumberCellValueRendererProps = {
+    value: number;
+    columnData: {
+        maxValue?: number;
+    };
+};
+export declare const NumberCellValueRenderer: ({ value, columnData: { maxValue } }: NumberCellValueRendererProps) => JSX.Element;
+export {};

package/cjs/TableWithBars/components/NumberCellValueRenderer/NumberCellValueRenderer.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberCellValueRenderer = void 0;
+var react_1 = __importDefault(require("react"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var ColorBar_1 = require("../../../ColorBar");
+var styles_1 = require("./styles");
+var NumberCellValueRenderer = function (_a) {
+    var value = _a.value, maxValue = _a.columnData.maxValue;
+    var styles = (0, styles_1.useStyles)();
+    return (react_1.default.createElement("div", { className: styles.numberContainer },
+        react_1.default.createElement(Typography_1.default, { className: styles.number }, (0, mdm_sdk_1.formatNumberAsMetric)(value, 9999)),
+        !(0, ramda_1.isNil)(maxValue) && (react_1.default.createElement("div", { className: styles.colorBarContainer },
+            react_1.default.createElement(ColorBar_1.ColorBar, { width: value, maxWidth: maxValue })))));
+};
+exports.NumberCellValueRenderer = NumberCellValueRenderer;

package/cjs/TableWithBars/components/NumberCellValueRenderer/NumberCellValueRenderer.test.d.ts

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

package/cjs/TableWithBars/components/NumberCellValueRenderer/NumberCellValueRenderer.test.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var NumberCellValueRenderer_1 = require("./NumberCellValueRenderer");
+var ColorBar_1 = require("../../../ColorBar");
+describe('NumberCellValueRenderer', function () {
+    it('should render main parts', function () {
+        var value = 100;
+        var maxValue = 1000;
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(NumberCellValueRenderer_1.NumberCellValueRenderer, { value: value, columnData: { maxValue: maxValue } }));
+        var number = wrapper.find('.number');
+        expect(number).toHaveLength(1);
+        expect(number.text()).toBe(value.toString());
+        var colorBar = wrapper.find(ColorBar_1.ColorBar);
+        expect(colorBar).toHaveLength(1);
+        expect(colorBar.props()).toEqual({
+            width: value,
+            maxWidth: maxValue
+        });
+    });
+    it('should not render ColorBar if maxValue is undefined', function () {
+        var value = 100;
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(NumberCellValueRenderer_1.NumberCellValueRenderer, { value: value, columnData: {} }));
+        var number = wrapper.find('.number');
+        expect(number).toHaveLength(1);
+        expect(number.text()).toBe(value.toString());
+        var colorBar = wrapper.find(ColorBar_1.ColorBar);
+        expect(colorBar).toHaveLength(0);
+    });
+    it('should format big value', function () {
+        var value = 10000;
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(NumberCellValueRenderer_1.NumberCellValueRenderer, { value: value, columnData: {} }));
+        var number = wrapper.find('.number');
+        expect(number).toHaveLength(1);
+        expect(number.text()).toBe('10.0K');
+    });
+});

package/cjs/TableWithBars/components/NumberCellValueRenderer/index.d.ts

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

package/cjs/TableWithBars/components/NumberCellValueRenderer/index.js

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

package/cjs/TableWithBars/components/NumberCellValueRenderer/styles.d.ts

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

package/cjs/TableWithBars/components/NumberCellValueRenderer/styles.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+    numberContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: '0 16px',
+        height: '100%'
+    },
+    number: {
+        fontSize: '13px',
+        lineHeight: '15px',
+        fontWeight: 'normal',
+        color: theme.palette.text.primary,
+        width: '40px',
+        flexShrink: 0
+    },
+    colorBarContainer: {
+        position: 'relative',
+        width: '100%',
+        marginLeft: '16px',
+        height: '20px',
+        '&>div': {
+            opacity: 1,
+            backgroundColor: '#0072CE'
+        }
+    }
+}); });

package/cjs/TableWithBars/index.d.ts

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

package/cjs/TableWithBars/index.js

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

package/cjs/Tags/Tags.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    className?: string;
+    values: string[];
+    dataReltioId?: string;
+};
+export declare const Tags: ({ className, values }: Props) => JSX.Element;
+export {};

package/cjs/Tags/Tags.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tags = void 0;
+var react_1 = __importDefault(require("react"));
+var SpecialAttributesArray_1 = require("../SpecialAttributesArray");
+var Tag_1 = require("./components/Tag");
+var Tags = function (_a) {
+    var className = _a.className, values = _a.values;
+    return (react_1.default.createElement(SpecialAttributesArray_1.SpecialAttributesArray, { values: values, className: className, dataReltioId: "reltio-attribute-value", Component: Tag_1.Tag }));
+};
+exports.Tags = Tags;

package/cjs/Tags/Tags.test.d.ts

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

package/cjs/Tags/Tags.test.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var SpecialAttributesArray_1 = require("../SpecialAttributesArray");
+var Tag_1 = require("./components/Tag");
+var Tags_1 = require("./Tags");
+describe('Tags tests', function () {
+    var values = ['tag1'];
+    var className = 'class1';
+    it('should render SpecialAttributesArray with correct props', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(Tags_1.Tags, { values: values, className: className }));
+        expect(component.find(SpecialAttributesArray_1.SpecialAttributesArray).prop('className')).toBe(className);
+        expect(component.find(SpecialAttributesArray_1.SpecialAttributesArray).prop('values')).toBe(values);
+        expect(component.find(SpecialAttributesArray_1.SpecialAttributesArray).prop('Component')).toBe(Tag_1.Tag);
+    });
+});

package/cjs/Tags/components/Tag/Tag.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    value: string;
+};
+export declare const Tag: ({ value }: Props) => JSX.Element;
+export {};

package/cjs/Tags/components/Tag/Tag.js

@@ -0,0 +1,56 @@
+"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.Tag = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var InternalLink_1 = require("../../../InternalLink");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var EntityContext_1 = require("../../../contexts/EntityContext");
+var UrlGeneratorsContext_1 = require("../../../contexts/UrlGeneratorsContext");
+var HistoryAppearanceContext_1 = require("../../../contexts/HistoryAppearanceContext");
+var styles_1 = require("./styles");
+var Tag = function (_a) {
+    var value = _a.value;
+    var styles = (0, styles_1.useStyles)();
+    var ownEntity = (0, react_1.useContext)(EntityContext_1.EntityContext);
+    var appearance = (0, react_1.useContext)(HistoryAppearanceContext_1.HistoryDiffContext).appearance;
+    var generateTagUrl = (0, react_1.useContext)(UrlGeneratorsContext_1.UrlGeneratorsContext).generateTagUrl;
+    var currentEntity = (0, MdmModuleContext_1.useMdmEntity)();
+    var uiPath = (0, MdmModuleContext_1.useMdmUiPath)();
+    var attributeAppearance = (0, mdm_sdk_1.getHistoryAppearanceBySpecialAttributeValue)('tags', value, appearance);
+    var historyClassName = (0, mdm_sdk_1.getHistoryAttributeClassName)(attributeAppearance);
+    var entity = ownEntity || currentEntity;
+    return (react_1.default.createElement(InternalLink_1.InternalLink, { className: (0, classnames_1.default)(styles.attributeValue, styles[historyClassName]), href: generateTagUrl({
+            uiPath: uiPath,
+            tag: value,
+            entityUri: entity.dataTenant ? (0, mdm_sdk_1.getDataTenantEntityUri)(entity) : entity.uri
+        }) }, value));
+};
+exports.Tag = Tag;

package/cjs/Tags/components/Tag/Tag.test.d.ts

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

package/cjs/Tags/components/Tag/Tag.test.js

@@ -0,0 +1,75 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+var HistoryAppearanceContext_1 = require("../../../contexts/HistoryAppearanceContext");
+var EntityContext_1 = require("../../../contexts/EntityContext");
+var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var Tag_1 = require("./Tag");
+var entity = { uri: 'uri1' };
+var uiPath = 'https://uiPath';
+var defaultProps = { value: 'Tag1' };
+var setUp = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.CustomProviders, CustomProviders = _d === void 0 ? react_1.default.Fragment : _d;
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement(CustomProviders, null,
+            react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { entity: entity, uiPath: uiPath } }, children)));
+    };
+    return (0, react_2.render)(react_1.default.createElement(Tag_1.Tag, __assign({}, props)), { wrapper: Providers });
+};
+describe('Tag tests', function () {
+    it('should render internal link', function () {
+        setUp();
+        var link = react_2.screen.getByText('Tag1');
+        expect(link).not.toHaveClass('deleteAttribute');
+        expect(link).toHaveAttribute('href', 'https://uiPath#p~com.reltio.plugins.tags.TagPerspective_e~uri1_tag~Tag1');
+    });
+    it('should render internal link for DTSS', function () {
+        var entity = { uri: 'uri2', dataTenant: 'dtssTenant' };
+        var Providers = function (_a) {
+            var children = _a.children;
+            return react_1.default.createElement(EntityContext_1.EntityContext.Provider, { value: entity }, children);
+        };
+        setUp({ CustomProviders: Providers });
+        var link = react_2.screen.getByText('Tag1');
+        expect(link).not.toHaveClass('deleteAttribute');
+        expect(link).toHaveAttribute('href', 'https://uiPath#p~com.reltio.plugins.tags.TagPerspective_e~DTSS%2FdtssTenant%2Furi2_tag~Tag1');
+    });
+    it('should provide history className', function () {
+        var _a;
+        var value = defaultProps.value;
+        var historyDiff = {
+            appearance: {
+                tags: (_a = {
+                        otherValue: 'INSERT_ATTRIBUTE'
+                    },
+                    _a[value] = 'DELETE_ATTRIBUTE',
+                    _a)
+            },
+            attributes: {},
+            roles: [],
+            tags: []
+        };
+        var Providers = function (_a) {
+            var children = _a.children;
+            return react_1.default.createElement(HistoryAppearanceContext_1.HistoryDiffContext.Provider, { value: historyDiff }, children);
+        };
+        setUp({ CustomProviders: Providers });
+        expect(react_2.screen.getByText('Tag1')).toHaveClass('deleteAttribute');
+    });
+});

package/cjs/Tags/components/Tag/index.d.ts

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

package/cjs/Tags/components/Tag/index.js

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

package/cjs/Tags/components/Tag/styles.d.ts

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

package/cjs/Tags/components/Tag/styles.js

@@ -0,0 +1,23 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+exports.useStyles = (0, styles_1.makeStyles)({
+    attributeValue: {
+        verticalAlign: 'middle'
+    },
+    insertAttribute: __assign({ width: 'fit-content' }, mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.insertAttribute]),
+    deleteAttribute: __assign({ width: 'fit-content', textDecoration: 'line-through', padding: '0 4px' }, mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.deleteAttribute])
+});

package/cjs/Tags/index.d.ts

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

package/cjs/Tags/index.js

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

package/cjs/TagsEditor/TagsEditor.d.ts

@@ -0,0 +1,8 @@
+import { AttributeItem } from '@reltio/mdm-sdk';
+export type Props = {
+    className?: string;
+    values: string[];
+    onChange: (param: AttributeItem) => void;
+    onDelete?: (param: AttributeItem) => void;
+};
+export declare const TagsEditor: ({ className, values, onChange, onDelete }: Props) => JSX.Element;