@reltio/components 1.4.1836-hf → 1.4.1836

package/cjs/features/crosswalks/AttributesTable/index.d.ts

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

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

package/cjs/features/crosswalks/AttributesTable/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"tableContainer" | "tableHeader" | "tableTitle" | "tableContent">;
+export declare const useCommonStyles: (props?: any) => import("@mui/styles").ClassNameMap<"coloredCell" | "basicCell">;

package/cjs/features/crosswalks/AttributesTable/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCommonStyles = exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)({
+    tableContainer: {
+        height: '100%',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    tableHeader: {
+        display: 'flex',
+        flexDirection: 'row'
+    },
+    tableTitle: {
+        marginRight: 'auto'
+    },
+    tableContent: {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1,
+        overflow: 'hidden',
+        position: 'relative'
+    }
+});
+exports.useCommonStyles = (0, styles_1.makeStyles)({
+    coloredCell: {
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            background: 'rgba(0,0,0,0.06)',
+            pointerEvents: 'none'
+        }
+    },
+    basicCell: {
+        padding: '15px',
+        '& + &': {
+            borderTop: '1px solid rgba(0,0,0,.1)'
+        }
+    }
+});

package/cjs/features/crosswalks/AttributesTable/types.d.ts

@@ -0,0 +1,64 @@
+import { AttributeType, AttributeValue, Crosswalk, SurvivorStrategy } from '@reltio/mdm-sdk';
+import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../../../types/inlineAttributes';
+import { ColumnData, RenderRowCellProps } from '../../../types/basicTable';
+import { CrosswalksMap } from '../../../types';
+export type RuleTypeValues = {
+    ruleType: SurvivorStrategy;
+    primaryAttributeUri?: string;
+    comparisonAttributeUri?: string;
+    sourcesUriOrder?: string[];
+};
+export type OvValues = {
+    attributeType: AttributeType;
+    values: AttributeValue[];
+};
+export type AttributeValues = {
+    attributeType: AttributeType;
+    attributeValues: AttributeValue[];
+    crosswalksMap: CrosswalksMap;
+};
+export type WinnerSources = {
+    crosswalks: Crosswalk[];
+};
+export type AttributesTableRowValue = {
+    count: number;
+    ovValues: OvValues;
+    rawValue: AttributeValue[];
+    ruleType?: RuleTypeValues;
+    values?: AttributeValues;
+    winnerSources?: WinnerSources;
+};
+export type AttributesTableColumnData = ColumnData & {
+    id: keyof AttributesTableRowValue;
+};
+export type GetRowCellKeyProps = {
+    rowValue: AttributesTableRowValue;
+    columnData: AttributesTableColumnData;
+    cellIndex: number;
+    rowIndex: number;
+};
+type CellValueRendererProps = {
+    value: unknown;
+    rowValue: AttributesTableRowValue;
+    [key: string]: unknown;
+};
+export type RowCellRendererProps = RenderRowCellProps & {
+    CellValueRenderer: (props: CellValueRendererProps) => JSX.Element;
+    columnData: AttributesTableColumnData;
+    rowValue: AttributesTableRowValue;
+};
+export type AttributesRendererProps = {
+    attributeValues?: AttributeValue[];
+    attributeType: AttributeType;
+    crosswalksMap: CrosswalksMap;
+    parentUri: string;
+    disableDelete?: boolean;
+    disableEdit?: boolean;
+    onDelete: (event: DeleteInlineAttributeEvent) => void;
+    onEdit: (event: EditInlineAttributeEvent) => void;
+    onPin: (event: PinInlineAttributeEvent) => void;
+    onIgnore: (event: IgnoreInlineAttributeEvent) => void;
+    onAdd: (event: AddInlineAttributeEvent) => void;
+    emptyTempAttributeUris: string[];
+};
+export {};

package/cjs/features/crosswalks/ColoredBlock/ColoredBlock.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const ColoredBlock: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    color: string;
+    opacity?: number;
+    variant?: 'standart' | 'disabled';
+} & React.RefAttributes<HTMLDivElement>>;

package/cjs/features/crosswalks/ColoredBlock/ColoredBlock.js

@@ -0,0 +1,66 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColoredBlock = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var EventBusy_1 = __importDefault(require("@mui/icons-material/EventBusy"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
+var styles_1 = require("./styles");
+exports.ColoredBlock = (0, react_1.forwardRef)(function (_a, ref) {
+    var color = _a.color, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? 'standart' : _b, children = _a.children, className = _a.className, props = __rest(_a, ["color", "opacity", "variant", "children", "className"]);
+    var styles = (0, styles_1.useColoredItemStyles)({ color: color, opacity: opacity, variant: variant });
+    return (react_1.default.createElement("div", __assign({ ref: ref, "data-reltio-id": "cw-colored-block", className: (0, classnames_1.default)(styles.item, className) }, props),
+        children,
+        variant === 'disabled' && (react_1.default.createElement(Tooltip_1.default, { title: ui_i18n_1.default.text('End-dated crosswalk') },
+            react_1.default.createElement(EventBusy_1.default, { className: styles.endDatedCrosswalkIcon })))));
+});
+exports.ColoredBlock.displayName = 'ColoredBlock';

package/cjs/features/crosswalks/ColoredBlock/ColoredBlock.test.d.ts

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

package/cjs/features/crosswalks/ColoredBlock/ColoredBlock.test.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 enzyme_1 = require("enzyme");
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
+var EventBusy_1 = __importDefault(require("@mui/icons-material/EventBusy"));
+var ColoredBlock_1 = require("./ColoredBlock");
+describe('ColoredBlock tests', function () {
+    it('should render correctly', function () {
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(ColoredBlock_1.ColoredBlock, { className: 'testClass', color: "#000" }, "test"));
+        var div = wrapper.find('div');
+        expect(div.prop('className')).toBe('item testClass');
+        expect(div.text()).toBe('test');
+    });
+    it('should render end dated crosswalk icon if variant prop is "disabled"', function () {
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(ColoredBlock_1.ColoredBlock, { className: 'testClass', color: "#000", variant: "disabled" }, "test"));
+        var tooltip = wrapper.find(Tooltip_1.default);
+        expect(tooltip.prop('title')).toBe('End-dated crosswalk');
+        expect(tooltip.find(EventBusy_1.default).prop('className')).toBe('endDatedCrosswalkIcon');
+    });
+    it('should not render end dated crosswalk icon if variant prop is "standart"', function () {
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(ColoredBlock_1.ColoredBlock, { className: 'testClass', color: "#000", variant: "standart" }, "test"));
+        expect(wrapper.find(Tooltip_1.default)).toHaveLength(0);
+    });
+});

package/cjs/features/crosswalks/ColoredBlock/index.d.ts

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

package/cjs/features/crosswalks/ColoredBlock/index.js

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

package/cjs/features/crosswalks/CopyableValueField/CopyableValueField.d.ts

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

package/cjs/features/crosswalks/CopyableValueField/CopyableValueField.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyableValueField = void 0;
+var react_1 = __importDefault(require("react"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var SmallIconButton_1 = require("../../../SmallIconButton");
+var Copy_1 = __importDefault(require("../../../icons/Copy"));
+var styles_1 = require("./styles");
+var CopyableValueField = function (_a) {
+    var value = _a.value;
+    var styles = (0, styles_1.useStyles)();
+    return (react_1.default.createElement("div", { className: styles.root },
+        react_1.default.createElement(Typography_1.default, { className: styles.text, variant: 'body2' }, value),
+        react_1.default.createElement(SmallIconButton_1.SmallIconButton, { size: "XXS", icon: Copy_1.default, color: "primary", className: styles.button, onClick: function () { return navigator.clipboard.writeText(value); } })));
+};
+exports.CopyableValueField = CopyableValueField;

package/cjs/features/crosswalks/CopyableValueField/CopyableValueField.test.d.ts

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

package/cjs/features/crosswalks/CopyableValueField/CopyableValueField.test.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 enzyme_1 = require("enzyme");
+var CopyableValueField_1 = require("./CopyableValueField");
+describe('CopyableValueField tests', function () {
+    Object.assign(navigator, {
+        clipboard: {
+            writeText: function () { }
+        }
+    });
+    it('should render field correctly', function () {
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(CopyableValueField_1.CopyableValueField, { value: 'Test text' }));
+        expect(wrapper.find('.text')).toBeDefined();
+        expect(wrapper.find('.button')).toBeDefined();
+        expect(wrapper.find('.text').text()).toBe('Test text');
+    });
+    it('should copy text on click button', function () {
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(CopyableValueField_1.CopyableValueField, { value: 'Test text' }));
+        jest.spyOn(navigator.clipboard, 'writeText');
+        expect(wrapper.find('.button')).toBeDefined();
+        wrapper.find('.button').simulate('click');
+        expect(navigator.clipboard.writeText).toHaveBeenCalledWith('Test text');
+    });
+});

package/cjs/features/crosswalks/CopyableValueField/index.d.ts

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

package/cjs/features/crosswalks/CopyableValueField/index.js

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

package/cjs/features/crosswalks/CrosswalkAttributes/CrosswalkAttributes.d.ts

@@ -0,0 +1,9 @@
+import { CrosswalkBase } from '@reltio/mdm-sdk';
+type Props = {
+    crosswalk: CrosswalkBase | Omit<CrosswalkBase, 'uri'>;
+    canEditAttribute?: boolean;
+    onEditAttribute: (attributeName: string, value: any) => void;
+    onDeleteAttribute: (attributeName: string) => void;
+};
+export declare const CrosswalkAttributes: ({ crosswalk, canEditAttribute, onEditAttribute, onDeleteAttribute }: Props) => JSX.Element;
+export {};

package/cjs/features/crosswalks/CrosswalkAttributes/CrosswalkAttributes.js

@@ -0,0 +1,163 @@
+"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.CrosswalkAttributes = void 0;
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var moment_1 = __importDefault(require("moment"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+var SimpleDropDownSelector_1 = __importDefault(require("../../../components/SimpleDropDownSelector/SimpleDropDownSelector"));
+var TextEditor_1 = require("../../../TextEditor");
+var ConfirmDeleteDialog_1 = require("../../../ConfirmDeleteDialog");
+var MoreAttributesButton_1 = require("../../../MoreAttributesButton");
+var SmallIconButton_1 = require("../../../SmallIconButton");
+var SourceIcon_1 = require("../../../SourceIcon");
+var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var CopyableValueField_1 = require("../CopyableValueField");
+var CrosswalkDateEditor_1 = require("../CrosswalkDateEditor");
+var styles_1 = require("./styles");
+var CrosswalkAttributes = function (_a) {
+    var crosswalk = _a.crosswalk, _b = _a.canEditAttribute, canEditAttribute = _b === void 0 ? true : _b, onEditAttribute = _a.onEditAttribute, onDeleteAttribute = _a.onDeleteAttribute;
+    var styles = (0, styles_1.useStyles)();
+    var _c = (0, react_1.useState)([]), addedAttributes = _c[0], setAddedAttributes = _c[1];
+    var _d = (0, react_1.useState)(null), pendingDeletionAttrUri = _d[0], setPendingDeletionAttrUri = _d[1];
+    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
+    var isTempCrosswalk = !('uri' in crosswalk);
+    var addSelectedAttributes = function (selectedAttributes) {
+        if (selectedAttributes.length > 0) {
+            setAddedAttributes(function (addedAttributes) { return addedAttributes.concat((0, ramda_1.map)((0, ramda_1.prop)('uri'), selectedAttributes)); });
+        }
+    };
+    var handleDeleteAttribute = function (attributeName) {
+        setAddedAttributes(function (addedAttributes) { return (0, ramda_1.without)([attributeName], addedAttributes); });
+        if (!(0, ramda_1.isNil)(crosswalk[attributeName])) {
+            onDeleteAttribute(attributeName);
+        }
+    };
+    var attributes = (0, react_1.useMemo)(function () { return [
+        {
+            label: mdm_sdk_1.CrosswalksAttrTypes.sourceSystems.label,
+            uri: 'type'
+        },
+        {
+            label: mdm_sdk_1.CrosswalksAttrTypes.value.label,
+            uri: 'value'
+        },
+        {
+            label: mdm_sdk_1.CrosswalksAttrTypes.sourceTable.label,
+            uri: 'sourceTable',
+            canBeAdded: isTempCrosswalk,
+            canBeDeleted: isTempCrosswalk
+        },
+        {
+            label: mdm_sdk_1.CrosswalksAttrTypes.createDate.label,
+            uri: 'createDate'
+        },
+        {
+            label: mdm_sdk_1.CrosswalksAttrTypes.updateDate.label,
+            uri: 'updateDate'
+        },
+        {
+            label: mdm_sdk_1.CrosswalksAttrTypes.deleteDate.label,
+            uri: 'deleteDate',
+            canBeAdded: true,
+            canBeDeleted: true
+        },
+        {
+            label: mdm_sdk_1.CrosswalksAttrTypes.reltioLoadDate.label,
+            uri: 'reltioLoadDate'
+        },
+        {
+            label: mdm_sdk_1.CrosswalksAttrTypes.publishDate.label,
+            uri: 'sourcePublishDate'
+        }
+    ]; }, []);
+    var extraAttributes = (0, ramda_1.pipe)((0, ramda_1.filter)((0, ramda_1.propEq)('canBeAdded', true)), (0, ramda_1.filter)(function (item) { return !(0, ramda_1.has)(item.uri, crosswalk); }), (0, ramda_1.filter)(function (item) { return !addedAttributes.includes(item.uri); }))(attributes);
+    var renderAttributeValue = function (attributeName, attributeValue) {
+        switch (attributeName) {
+            case 'type': {
+                var sourceSystemLabel = (0, mdm_sdk_1.getSourceSystemLabel)(metadata, attributeValue);
+                return isTempCrosswalk ? (react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', placeholder: attributeValue, className: styles.editor, value: { value: attributeValue, label: sourceSystemLabel }, options: (0, mdm_sdk_1.getCrosswalksTypes)(metadata)
+                        .sort((0, ramda_1.ascend)((0, ramda_1.prop)('label')))
+                        .map(function (_a) {
+                        var uri = _a.uri, label = _a.label;
+                        return ({
+                            value: uri,
+                            label: label
+                        });
+                    }), onChange: function (_a) {
+                        var value = _a.value;
+                        return onEditAttribute(attributeName, value);
+                    }, TextFieldProps: {
+                        InputProps: {
+                            disableUnderline: true
+                        }
+                    } })) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(SourceIcon_1.SourceIcon, { className: styles.sourceIcon, sourceType: attributeValue }),
+                    react_1.default.createElement(Typography_1.default, { className: styles.text, variant: 'body2' }, sourceSystemLabel)));
+            }
+            case 'sourceTable':
+                return isTempCrosswalk ? (react_1.default.createElement(TextEditor_1.TextEditor, { multiple: false, multiline: false, getValueLabel: undefined, classes: { root: styles.editor }, required: true, variant: "filled", value: attributeValue, onInput: function (e) {
+                        return onEditAttribute(attributeName, e.target.value);
+                    }, size: "small", InputProps: {
+                        disableUnderline: true,
+                        classes: { input: styles.input }
+                    } })) : (react_1.default.createElement(Typography_1.default, { className: styles.text, variant: 'body2' }, attributeValue));
+            case 'value':
+                return isTempCrosswalk ? (react_1.default.createElement(TextEditor_1.TextEditor, { multiple: false, multiline: false, getValueLabel: undefined, classes: { root: styles.editor }, required: true, variant: "filled", value: attributeValue, onInput: function (e) {
+                        return onEditAttribute(attributeName, e.target.value);
+                    }, size: "small", InputProps: {
+                        disableUnderline: true,
+                        classes: { input: styles.input }
+                    } })) : (react_1.default.createElement(CopyableValueField_1.CopyableValueField, { value: attributeValue }));
+            case 'deleteDate':
+                return (react_1.default.createElement(CrosswalkDateEditor_1.CrosswalkDateEditor, { value: attributeValue && moment_1.default.utc((0, mdm_sdk_1.parseTimestamp)(attributeValue)).valueOf(), onChange: function (value) { return onEditAttribute(attributeName, value === null || value === void 0 ? void 0 : value.toString()); }, classes: { root: styles.editor }, disabled: !canEditAttribute }));
+            case 'sourcePublishDate':
+            case 'createDate':
+            case 'updateDate':
+            case 'reltioLoadDate':
+                return (react_1.default.createElement(Typography_1.default, { className: styles.text, variant: 'body2' }, (0, mdm_sdk_1.formatDateTime)(attributeValue)));
+            default:
+                return null;
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        extraAttributes.length > 0 && canEditAttribute && (react_1.default.createElement(MoreAttributesButton_1.MoreAttributesButton, { label: ui_i18n_1.default.text('Add attributes'), onApply: addSelectedAttributes, data: extraAttributes })),
+        attributes.map(function (attribute) {
+            return attribute.uri in crosswalk || addedAttributes.includes(attribute.uri) ? (react_1.default.createElement("div", { key: attribute.uri, className: styles.attributeWrapper },
+                react_1.default.createElement(Typography_1.default, { variant: 'body2', className: styles.attributeTitle }, "".concat(attribute.label, ":")),
+                react_1.default.createElement("div", { className: styles.attributeValue },
+                    renderAttributeValue(attribute.uri, crosswalk[attribute.uri]),
+                    attribute.canBeDeleted && (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: Delete_1.default, disabled: !canEditAttribute, onClick: function () { return setPendingDeletionAttrUri(attribute.uri); }, size: "XS", tooltipTitle: ui_i18n_1.default.text('Delete attribute'), showForDisabled: true }))))) : null;
+        }),
+        react_1.default.createElement(ConfirmDeleteDialog_1.ConfirmDeleteDialog, { open: !!pendingDeletionAttrUri, onClose: function () { return setPendingDeletionAttrUri(null); }, onConfirm: function () { return handleDeleteAttribute(pendingDeletionAttrUri); } })));
+};
+exports.CrosswalkAttributes = CrosswalkAttributes;

package/cjs/features/crosswalks/CrosswalkAttributes/CrosswalkAttributes.test.d.ts

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