@reltio/components 1.4.874 → 1.4.878

package/components/attributes/inline/SimpleAttribute/SimpleAttribute.js

@@ -1,59 +1,35 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 });
-var react_1 = __importStar(require("react"));
-var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
-var Edit_1 = __importDefault(require("@material-ui/icons/Edit"));
-var MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var classnames_1 = __importDefault(require("classnames"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var DataTypeValue_1 = __importDefault(require("../../../DataTypeValue/DataTypeValue"));
-var DropDownMenuButton_1 = __importDefault(require("../../../DropDownMenuButton/DropDownMenuButton"));
-var SimpleAttributeEditor_1 = require("../SimpleAttributeEditor/SimpleAttributeEditor");
-var SmallIconButton_1 = require("../../../SmallIconButton");
-var IgnoreButton_1 = __importDefault(require("../common/IgnoreButton"));
-var PinButton_1 = __importDefault(require("../common/PinButton"));
-var CrosswalkMenuItem_1 = __importDefault(require("./CrosswalkMenuItem/CrosswalkMenuItem"));
-var useAttributeState_1 = require("../hooks/useAttributeState");
-var contexts_1 = require("../../../../contexts");
-var styles_1 = require("./styles");
+import React, { useRef } from 'react';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/Edit';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { checkMetadataForDelete, checkMetadataForUpdate, getAttrDataTypeDefinition, getAttributeValue, getLastUriPart, isCrosswalkDisabled, isTempUri, ModeTypes } from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import DataTypeValue from '../../../DataTypeValue/DataTypeValue';
+import DropDownMenuButton from '../../../DropDownMenuButton/DropDownMenuButton';
+import { SimpleAttributeEditor } from '../SimpleAttributeEditor/SimpleAttributeEditor';
+import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
+import IgnoreButton from '../common/IgnoreButton';
+import PinButton from '../common/PinButton';
+import CrosswalkMenuItem from './CrosswalkMenuItem/CrosswalkMenuItem';
+import { useAttributeState } from '../hooks/useAttributeState';
+import { useCrosswalkColor, useCrosswalkHighlight } from '../../../../contexts';
+import { useStyles } from './styles';
 var SimpleAttribute = function (_a) {
     var className = _a.className, dataReltioId = _a.dataReltioId, _b = _a.attributeType, attributeType = _b === void 0 ? null : _b, attributeValue = _a.attributeValue, crosswalk = _a.crosswalk, disableEdit = _a.disableEdit, disableDelete = _a.disableDelete, onIgnore = _a.onIgnore, onEdit = _a.onEdit, onPin = _a.onPin, onDelete = _a.onDelete;
-    var _c = useAttributeState_1.useAttributeState(), isReadingMode = _c.isReadingMode, isEditingMode = _c.isEditingMode, isHovered = _c.isHovered, onMouseEnter = _c.onMouseEnter, onMouseLeave = _c.onMouseLeave, setReadingMode = _c.setReadingMode, setEditingMode = _c.setEditingMode;
-    var containerRef = react_1.useRef();
-    var id = mdm_sdk_1.getLastUriPart(attributeValue.uri);
-    var crosswalkDisabled = mdm_sdk_1.isCrosswalkDisabled(crosswalk);
+    var _c = useAttributeState(), isReadingMode = _c.isReadingMode, isEditingMode = _c.isEditingMode, isHovered = _c.isHovered, onMouseEnter = _c.onMouseEnter, onMouseLeave = _c.onMouseLeave, setReadingMode = _c.setReadingMode, setEditingMode = _c.setEditingMode;
+    var containerRef = useRef();
+    var id = getLastUriPart(attributeValue.uri);
+    var crosswalkDisabled = isCrosswalkDisabled(crosswalk);
     var canModifyAttribute = !attributeType.system && !crosswalkDisabled;
-    var canEdit = canModifyAttribute && !disableEdit && mdm_sdk_1.checkMetadataForUpdate(mdm_sdk_1.ModeTypes.EDITING, attributeType);
-    var canDelete = canModifyAttribute && !disableDelete && mdm_sdk_1.checkMetadataForDelete(mdm_sdk_1.ModeTypes.EDITING, attributeType);
-    var isTemporary = mdm_sdk_1.isTempUri(attributeValue.uri);
+    var canEdit = canModifyAttribute && !disableEdit && checkMetadataForUpdate(ModeTypes.EDITING, attributeType);
+    var canDelete = canModifyAttribute && !disableDelete && checkMetadataForDelete(ModeTypes.EDITING, attributeType);
+    var isTemporary = isTempUri(attributeValue.uri);
     var showPin = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.pin);
     var showIgnore = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.ignored);
-    var color = contexts_1.useCrosswalkColor(crosswalk);
-    var _d = contexts_1.useCrosswalkHighlight(crosswalk), isHighlighted = _d.isHighlighted, isDimmed = _d.isDimmed, highlightCrosswalk = _d.highlightCrosswalk, removeHighlight = _d.removeHighlight;
-    var styles = styles_1.useStyles({
+    var color = useCrosswalkColor(crosswalk);
+    var _d = useCrosswalkHighlight(crosswalk), isHighlighted = _d.isHighlighted, isDimmed = _d.isDimmed, highlightCrosswalk = _d.highlightCrosswalk, removeHighlight = _d.removeHighlight;
+    var styles = useStyles({
         variant: crosswalkDisabled ? 'outlined' : 'filled',
         opaque: !isDimmed,
         fullyColored: isHighlighted,
@@ -66,17 +42,17 @@ var SimpleAttribute = function (_a) {
         },
         {
             disabled: !canEdit,
-            text: ui_i18n_1.default.text('Edit'),
-            icon: react_1.default.createElement(Edit_1.default, null),
-            tooltip: canEdit ? null : ui_i18n_1.default.text("You don't have permissions to edit"),
+            text: i18n.text('Edit'),
+            icon: React.createElement(EditIcon, null),
+            tooltip: canEdit ? null : i18n.text("You don't have permissions to edit"),
             onClick: function () { return setEditingMode(); },
             id: 'edit'
         },
         {
             disabled: !canDelete,
-            text: ui_i18n_1.default.text('Delete'),
-            icon: react_1.default.createElement(Delete_1.default, null),
-            tooltip: canDelete ? null : ui_i18n_1.default.text("You don't have permissions to delete"),
+            text: i18n.text('Delete'),
+            icon: React.createElement(DeleteIcon, null),
+            tooltip: canDelete ? null : i18n.text("You don't have permissions to delete"),
             onClick: function () {
                 return onDelete({
                     attributeType: attributeType,
@@ -91,23 +67,23 @@ var SimpleAttribute = function (_a) {
         removeHighlight();
         setReadingMode();
     };
-    return (react_1.default.createElement("div", { ref: containerRef, className: classnames_1.default(className, styles.root), onMouseEnter: function () {
+    return (React.createElement("div", { ref: containerRef, className: classnames(className, styles.root), onMouseEnter: function () {
             highlightCrosswalk();
             onMouseEnter();
         }, onMouseLeave: function () {
             removeHighlight();
             onMouseLeave();
         }, "data-reltio-id": dataReltioId },
-        react_1.default.createElement("div", { className: styles.attributeValue },
-            react_1.default.createElement(DataTypeValue_1.default, { value: mdm_sdk_1.getAttributeValue(attributeValue), dataTypeDefinition: mdm_sdk_1.getAttrDataTypeDefinition(attributeType) })),
-        react_1.default.createElement("div", { className: styles.actions },
-            showPin && (react_1.default.createElement(PinButton_1.default, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); }, disabled: !canEdit })),
-            showIgnore && (react_1.default.createElement(IgnoreButton_1.default, { isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); }, disabled: !canEdit })),
-            isHovered && (react_1.default.createElement(DropDownMenuButton_1.default, { MenuItemRenderer: CrosswalkMenuItem_1.default, menuId: "simple-attribute-additional-actions-" + id, buttonComponent: SmallIconButton_1.SmallIconButtonWithTooltip, buttonProps: {
-                    icon: MoreVert_1.default,
+        React.createElement("div", { className: styles.attributeValue },
+            React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: getAttrDataTypeDefinition(attributeType) })),
+        React.createElement("div", { className: styles.actions },
+            showPin && (React.createElement(PinButton, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); }, disabled: !canEdit })),
+            showIgnore && (React.createElement(IgnoreButton, { isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); }, disabled: !canEdit })),
+            isHovered && (React.createElement(DropDownMenuButton, { MenuItemRenderer: CrosswalkMenuItem, menuId: "simple-attribute-additional-actions-" + id, buttonComponent: SmallIconButtonWithTooltip, buttonProps: {
+                    icon: MoreVertIcon,
                     size: 'XS',
-                    tooltipTitle: ui_i18n_1.default.text('More actions')
+                    tooltipTitle: i18n.text('More actions')
                 }, onMenuClose: onClose, menuItems: actions }))),
-        isEditingMode && (react_1.default.createElement(SimpleAttributeEditor_1.SimpleAttributeEditor, { attributeType: attributeType, attributeValue: attributeValue, color: color, onClose: onClose, onEdit: function (value) { return onEdit({ attributeType: attributeType, attributeValue: value, crosswalk: crosswalk }); }, containerRef: containerRef }))));
+        isEditingMode && (React.createElement(SimpleAttributeEditor, { attributeType: attributeType, attributeValue: attributeValue, color: color, onClose: onClose, onEdit: function (value) { return onEdit({ attributeType: attributeType, attributeValue: value, crosswalk: crosswalk }); }, containerRef: containerRef }))));
 };
-exports.default = SimpleAttribute;
+export default SimpleAttribute;

package/components/attributes/inline/SimpleAttribute/index.js

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

package/components/attributes/inline/SimpleAttribute/styles.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,10 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles(function () { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
     root: function (_a) {
         var fullyColored = _a.fullyColored, opaque = _a.opaque, color = _a.color, variant = _a.variant;
         return (__assign(__assign(__assign({ height: '28px' }, (variant === 'filled' && {

package/components/attributes/inline/SimpleAttributeEditor/SimpleAttributeEditor.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,49 +9,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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.SimpleAttributeEditor = void 0;
-var react_1 = __importStar(require("react"));
-var Popover_1 = __importDefault(require("@material-ui/core/Popover"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var classnames_1 = __importDefault(require("classnames"));
-var ramda_1 = require("ramda");
-var editors_1 = require("../../../editors");
-var utils_1 = require("../../editMode/SimpleAttributeEditor/utils");
-var styles_1 = require("./styles");
-var DATA_TYPES_WITH_MULTILINE_EDITOR = [mdm_sdk_1.DataTypes.TYPE_TEXT, mdm_sdk_1.DataTypes.TYPE_BLOB];
-var SimpleAttributeEditor = function (_a) {
+import React, { useState } from 'react';
+import Popover from '@material-ui/core/Popover';
+import { attributeUriToSearchUri, DataTypes, getAttrDataTypeDefinition, isBooleanType, isLookupAttrType, isNumericType, isTimestampBasedType } from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import { equals, isNil } from 'ramda';
+import { DataTypeValueEditor } from '../../../editors';
+import { attributeValueToEditorValue, editorValueToAttributeValue } from '../../editMode/SimpleAttributeEditor/utils';
+import { useStyles } from './styles';
+var DATA_TYPES_WITH_MULTILINE_EDITOR = [DataTypes.TYPE_TEXT, DataTypes.TYPE_BLOB];
+export var SimpleAttributeEditor = function (_a) {
     var _b;
     var attributeType = _a.attributeType, attributeValue = _a.attributeValue, color = _a.color, containerRef = _a.containerRef, onClose = _a.onClose, onEdit = _a.onEdit;
-    var styles = styles_1.useStyles({
+    var styles = useStyles({
         color: color,
         containerWidth: containerRef.current ? containerRef.current.getBoundingClientRect().width : 0
     });
-    var dataTypeDefinition = mdm_sdk_1.getAttrDataTypeDefinition(attributeType);
-    var initEditorValue = utils_1.attributeValueToEditorValue(attributeValue, dataTypeDefinition);
-    var _c = react_1.useState(initEditorValue), editorValue = _c[0], changeEditorValue = _c[1];
+    var dataTypeDefinition = getAttrDataTypeDefinition(attributeType);
+    var initEditorValue = attributeValueToEditorValue(attributeValue, dataTypeDefinition);
+    var _c = useState(initEditorValue), editorValue = _c[0], changeEditorValue = _c[1];
     var TextFieldProps = {
         className: styles.textField,
         InputProps: {
@@ -64,15 +39,15 @@ var SimpleAttributeEditor = function (_a) {
         }
     };
     var applyChangesAndClose = function () {
-        var editedValue = utils_1.editorValueToAttributeValue(attributeType, editorValue);
-        if (!ramda_1.isNil(editorValue) && !ramda_1.equals(editorValue, initEditorValue)) {
-            var editedAttributeValue = mdm_sdk_1.isLookupAttrType(attributeType)
+        var editedValue = editorValueToAttributeValue(attributeType, editorValue);
+        if (!isNil(editorValue) && !equals(editorValue, initEditorValue)) {
+            var editedAttributeValue = isLookupAttrType(attributeType)
                 ? {
                     value: editedValue.value,
                     lookupCode: editedValue.lookupCode
                 }
                 : {
-                    value: editorValue === '' && mdm_sdk_1.isNumericType(dataTypeDefinition.type) ? null : editedValue
+                    value: editorValue === '' && isNumericType(dataTypeDefinition.type) ? null : editedValue
                 };
             onEdit(__assign(__assign({}, attributeValue), editedAttributeValue));
         }
@@ -85,13 +60,12 @@ var SimpleAttributeEditor = function (_a) {
         else if (event.key === 'Escape')
             onClose();
     };
-    return (react_1.default.createElement(Popover_1.default, { open: !!containerRef, anchorEl: containerRef.current, anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, classes: {
-            paper: classnames_1.default(styles.paper, (_b = {},
-                _b[styles.booleanEditor] = mdm_sdk_1.isBooleanType(dataTypeDefinition.type),
-                _b[styles.timestampEditor] = mdm_sdk_1.isTimestampBasedType(dataTypeDefinition.type),
+    return (React.createElement(Popover, { open: !!containerRef, anchorEl: containerRef.current, anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, classes: {
+            paper: classnames(styles.paper, (_b = {},
+                _b[styles.booleanEditor] = isBooleanType(dataTypeDefinition.type),
+                _b[styles.timestampEditor] = isTimestampBasedType(dataTypeDefinition.type),
                 _b)),
             root: styles.popoverRoot
         }, onKeyUp: onKeyUp, onBackdropClick: applyChangesAndClose },
-        react_1.default.createElement(editors_1.DataTypeValueEditor, { autoFocus: true, dataTypeDefinition: dataTypeDefinition, fieldName: mdm_sdk_1.attributeUriToSearchUri(attributeType.uri), onChange: changeEditorValue, TextFieldProps: TextFieldProps, value: editorValue, fullWidth: true })));
+        React.createElement(DataTypeValueEditor, { autoFocus: true, dataTypeDefinition: dataTypeDefinition, fieldName: attributeUriToSearchUri(attributeType.uri), onChange: changeEditorValue, TextFieldProps: TextFieldProps, value: editorValue, fullWidth: true })));
 };
-exports.SimpleAttributeEditor = SimpleAttributeEditor;

package/components/attributes/inline/SimpleAttributeEditor/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles(function () { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
     textField: {
         margin: 0
     },

package/components/attributes/inline/SimpleAttributesBlock/SimpleAttributesBlock.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,29 +20,25 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 SimpleAttribute_1 = __importDefault(require("../SimpleAttribute"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var react_dnd_1 = require("react-dnd");
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var styles_1 = require("./styles");
+import React from 'react';
+import SimpleAttribute from '../SimpleAttribute';
+import { checkMetadataForCreate, isEntityTypeUri, isEntityUri, isRelationTypeUri, isRelationUri, ModeTypes } from '@reltio/mdm-sdk';
+import { useDrop } from 'react-dnd';
+import i18n from 'ui-i18n';
+import { useStyles } from './styles';
 var SimpleAttributesBlock = function (_a) {
     var attributeValues = _a.attributeValues, attributeType = _a.attributeType, parentUri = _a.parentUri, disableEdit = _a.disableEdit, crosswalksMap = _a.crosswalksMap, onAdd = _a.onAdd, props = __rest(_a, ["attributeValues", "attributeType", "parentUri", "disableEdit", "crosswalksMap", "onAdd"]);
-    var styles = styles_1.useStyles();
-    var _b = react_dnd_1.useDrop({
+    var styles = useStyles();
+    var _b = useDrop({
         accept: 'Crosswalk',
         canDrop: function (_a) {
             var crosswalk = _a.crosswalk;
-            var isRelationCrosswalk = mdm_sdk_1.isRelationUri(crosswalk.uri) || crosswalk.ownerType === 'relation';
-            var isEntityCrosswalk = mdm_sdk_1.isEntityUri(crosswalk.uri) && crosswalk.ownerType === 'entity';
-            return (mdm_sdk_1.checkMetadataForCreate(mdm_sdk_1.ModeTypes.EDITING, attributeType) &&
+            var isRelationCrosswalk = isRelationUri(crosswalk.uri) || crosswalk.ownerType === 'relation';
+            var isEntityCrosswalk = isEntityUri(crosswalk.uri) && crosswalk.ownerType === 'entity';
+            return (checkMetadataForCreate(ModeTypes.EDITING, attributeType) &&
                 !disableEdit &&
-                ((isRelationCrosswalk && mdm_sdk_1.isRelationTypeUri(attributeType.uri)) ||
-                    (isEntityCrosswalk && mdm_sdk_1.isEntityTypeUri(attributeType.uri))));
+                ((isRelationCrosswalk && isRelationTypeUri(attributeType.uri)) ||
+                    (isEntityCrosswalk && isEntityTypeUri(attributeType.uri))));
         },
         collect: function (monitor) { return ({
             isDragItemOver: monitor.isOver() && monitor.canDrop()
@@ -55,11 +50,11 @@ var SimpleAttributesBlock = function (_a) {
         }
     }), isDragItemOver = _b[0].isDragItemOver, drop = _b[1];
     var attributeIndex = 0;
-    return (react_1.default.createElement("div", { ref: drop, className: styles.simpleAttributesWrapper },
+    return (React.createElement("div", { ref: drop, className: styles.simpleAttributesWrapper },
         attributeValues.map(function (value) {
             var _a;
-            return (_a = crosswalksMap[value.uri]) === null || _a === void 0 ? void 0 : _a.map(function (crosswalk) { return (react_1.default.createElement(SimpleAttribute_1.default, __assign({ key: value.uri + crosswalk.uri, attributeType: attributeType, attributeValue: value, crosswalk: crosswalk, disableEdit: disableEdit, dataReltioId: "value-index-" + attributeIndex++ }, props))); });
+            return (_a = crosswalksMap[value.uri]) === null || _a === void 0 ? void 0 : _a.map(function (crosswalk) { return (React.createElement(SimpleAttribute, __assign({ key: value.uri + crosswalk.uri, attributeType: attributeType, attributeValue: value, crosswalk: crosswalk, disableEdit: disableEdit, dataReltioId: "value-index-" + attributeIndex++ }, props))); });
         }),
-        isDragItemOver && react_1.default.createElement("div", { className: styles.dropIndicator }, ui_i18n_1.default.text('Drop here'))));
+        isDragItemOver && React.createElement("div", { className: styles.dropIndicator }, i18n.text('Drop here'))));
 };
-exports.default = SimpleAttributesBlock;
+export default SimpleAttributesBlock;

package/components/attributes/inline/SimpleAttributesBlock/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles(function () { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
     simpleAttributesWrapper: {
         display: 'flex',
         flexWrap: 'wrap',

package/components/attributes/inline/common/ComplexAttributeLabel.js

@@ -1,15 +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.ComplexAttributeLabel = void 0;
-var react_1 = __importDefault(require("react"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var styles_1 = require("./styles");
-var ComplexAttributeLabel = function (_a) {
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { useComplexAttributeLabelStyles } from './styles';
+export var ComplexAttributeLabel = function (_a) {
     var children = _a.children;
-    var styles = styles_1.useComplexAttributeLabelStyles();
-    return (react_1.default.createElement(Typography_1.default, { component: "span", variant: "body2", classes: { body2: styles.label } }, children));
+    var styles = useComplexAttributeLabelStyles();
+    return (React.createElement(Typography, { component: "span", variant: "body2", classes: { body2: styles.label } }, children));
 };
-exports.ComplexAttributeLabel = ComplexAttributeLabel;

package/components/attributes/inline/common/CrosswalkIcon.js

@@ -1,20 +1,15 @@
-"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 contexts_1 = require("../../../../contexts");
-var SourceItem_1 = __importDefault(require("./SourceItem"));
-var LightArrowTooltip_1 = __importDefault(require("../../../LightArrowTooltip/LightArrowTooltip"));
-var classnames_1 = __importDefault(require("classnames"));
-var styles_1 = require("./styles");
+import React from 'react';
+import { useCrosswalkColor, useCrosswalkHighlight } from '../../../../contexts';
+import SourceItem from './SourceItem';
+import LightArrowTooltip from '../../../LightArrowTooltip/LightArrowTooltip';
+import classnames from 'classnames';
+import { useStyles } from './styles';
 var CrosswalkIcon = function (_a) {
     var crosswalk = _a.crosswalk, className = _a.className;
-    var color = contexts_1.useCrosswalkColor(crosswalk);
-    var _b = contexts_1.useCrosswalkHighlight(crosswalk), isDimmed = _b.isDimmed, highlightCrosswalk = _b.highlightCrosswalk, removeHighlight = _b.removeHighlight;
-    var styles = styles_1.useStyles({ isOpaque: !isDimmed, color: color });
-    return (react_1.default.createElement(LightArrowTooltip_1.default, { title: react_1.default.createElement(SourceItem_1.default, { crosswalk: crosswalk, color: color }), placement: 'top' },
-        react_1.default.createElement("div", { className: classnames_1.default(styles.crosswalkIcon, className), onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } })));
+    var color = useCrosswalkColor(crosswalk);
+    var _b = useCrosswalkHighlight(crosswalk), isDimmed = _b.isDimmed, highlightCrosswalk = _b.highlightCrosswalk, removeHighlight = _b.removeHighlight;
+    var styles = useStyles({ isOpaque: !isDimmed, color: color });
+    return (React.createElement(LightArrowTooltip, { title: React.createElement(SourceItem, { crosswalk: crosswalk, color: color }), placement: 'top' },
+        React.createElement("div", { className: classnames(styles.crosswalkIcon, className), onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } })));
 };
-exports.default = CrosswalkIcon;
+export default CrosswalkIcon;

package/components/attributes/inline/common/DeleteButton.js

@@ -1,14 +1,9 @@
-"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 SmallIconButton_1 = require("../../../SmallIconButton");
-var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
+import React from 'react';
+import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
+import DeleteIcon from '@material-ui/icons/Delete';
+import i18n from 'ui-i18n';
 var DeleteButton = function (_a) {
     var onClick = _a.onClick;
-    return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: Delete_1.default, tooltipTitle: ui_i18n_1.default.text('Delete'), onClick: onClick, size: "XS", disableRipple: true }));
+    return (React.createElement(SmallIconButtonWithTooltip, { icon: DeleteIcon, tooltipTitle: i18n.text('Delete'), onClick: onClick, size: "XS", disableRipple: true }));
 };
-exports.default = DeleteButton;
+export default DeleteButton;

package/components/attributes/inline/common/IgnoreButton.js

@@ -1,15 +1,10 @@
-"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 SmallIconButton_1 = require("../../../SmallIconButton");
-var Ignored_1 = __importDefault(require("../../../../icons/Ignored"));
-var IgnoredOutlined_1 = __importDefault(require("../../../../icons/IgnoredOutlined"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
+import React from 'react';
+import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
+import IgnoredIcon from '../../../../icons/Ignored';
+import IgnoredOutlinedIcon from '../../../../icons/IgnoredOutlined';
+import i18n from 'ui-i18n';
 var IgnoreButton = function (_a) {
     var isIgnored = _a.isIgnored, onClick = _a.onClick, disabled = _a.disabled;
-    return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { disabled: disabled, showForDisabled: true, icon: isIgnored ? Ignored_1.default : IgnoredOutlined_1.default, tooltipTitle: disabled ? ui_i18n_1.default.text("You don't have permissions to ignore") : ui_i18n_1.default.text('Ignore'), onClick: onClick, size: "XS", disableRipple: true }));
+    return (React.createElement(SmallIconButtonWithTooltip, { disabled: disabled, showForDisabled: true, icon: isIgnored ? IgnoredIcon : IgnoredOutlinedIcon, tooltipTitle: disabled ? i18n.text("You don't have permissions to ignore") : i18n.text('Ignore'), onClick: onClick, size: "XS", disableRipple: true }));
 };
-exports.default = IgnoreButton;
+export default IgnoreButton;

package/components/attributes/inline/common/PinButton.js

@@ -1,15 +1,10 @@
-"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 SmallIconButton_1 = require("../../../SmallIconButton");
-var Pin_1 = __importDefault(require("../../../../icons/Pin"));
-var PinOutlined_1 = __importDefault(require("../../../../icons/PinOutlined"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
+import React from 'react';
+import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
+import PinIcon from '../../../../icons/Pin';
+import PinOutlinedIcon from '../../../../icons/PinOutlined';
+import i18n from 'ui-i18n';
 var PinButton = function (_a) {
     var isPinned = _a.isPinned, onClick = _a.onClick, disabled = _a.disabled;
-    return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { disabled: disabled, showForDisabled: true, onClick: onClick, icon: isPinned ? Pin_1.default : PinOutlined_1.default, tooltipTitle: disabled ? "You don't have permissions to pin" : ui_i18n_1.default.text('Pin'), size: "XS", disableRipple: true }));
+    return (React.createElement(SmallIconButtonWithTooltip, { disabled: disabled, showForDisabled: true, onClick: onClick, icon: isPinned ? PinIcon : PinOutlinedIcon, tooltipTitle: disabled ? "You don't have permissions to pin" : i18n.text('Pin'), size: "XS", disableRipple: true }));
 };
-exports.default = PinButton;
+export default PinButton;

package/components/attributes/inline/common/SourceItem.js

@@ -1,31 +1,26 @@
-"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 ui_i18n_1 = __importDefault(require("ui-i18n"));
-var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var react_redux_1 = require("react-redux");
-var Visibility_1 = __importDefault(require("@material-ui/icons/Visibility"));
-var SourceIcon_1 = __importDefault(require("../../../SourceIcon/SourceIcon"));
-var classnames_1 = __importDefault(require("classnames"));
-var contexts_1 = require("../../../../contexts");
-var SmallIconButton_1 = require("../../../SmallIconButton");
-var styles_1 = require("./styles");
+import React from 'react';
+import i18n from 'ui-i18n';
+import mdmModule from '@reltio/mdm-module';
+import { findSourceSystemByUri } from '@reltio/mdm-sdk';
+import { useSelector } from 'react-redux';
+import VisibilityIcon from '@material-ui/icons/Visibility';
+import SourceIcon from '../../../SourceIcon/SourceIcon';
+import classnames from 'classnames';
+import { useCrosswalkFocus } from '../../../../contexts';
+import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
+import { useStyles } from './styles';
 var SourceItem = function (_a) {
     var crosswalk = _a.crosswalk, color = _a.color, className = _a.className, _b = _a.focusable, focusable = _b === void 0 ? false : _b;
-    var _c = contexts_1.useCrosswalkFocus(crosswalk), toggleCrosswalkFocus = _c.toggleCrosswalkFocus, isFocused = _c.isFocused;
-    var styles = styles_1.useStyles({ color: color, isFocused: isFocused });
-    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
-    var label = mdm_sdk_1.findSourceSystemByUri(metadata, crosswalk.type).label;
-    return (react_1.default.createElement("div", { className: classnames_1.default(styles.sourceItem, className) },
-        react_1.default.createElement(SourceIcon_1.default, { className: styles.sourceIcon, sourceType: crosswalk.type }),
-        react_1.default.createElement("div", { className: styles.sourceInfo },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("span", { className: styles.label }, label),
-                focusable && (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: Visibility_1.default, className: styles.eyeIcon, size: 'XXS', tooltipTitle: ui_i18n_1.default.text('Focus'), onClick: function () { return toggleCrosswalkFocus(); } }))),
-            react_1.default.createElement("div", { className: styles.crosswalkValue }, crosswalk.value))));
+    var _c = useCrosswalkFocus(crosswalk), toggleCrosswalkFocus = _c.toggleCrosswalkFocus, isFocused = _c.isFocused;
+    var styles = useStyles({ color: color, isFocused: isFocused });
+    var metadata = useSelector(mdmModule.selectors.getMetadata);
+    var label = findSourceSystemByUri(metadata, crosswalk.type).label;
+    return (React.createElement("div", { className: classnames(styles.sourceItem, className) },
+        React.createElement(SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),
+        React.createElement("div", { className: styles.sourceInfo },
+            React.createElement("div", null,
+                React.createElement("span", { className: styles.label }, label),
+                focusable && (React.createElement(SmallIconButtonWithTooltip, { icon: VisibilityIcon, className: styles.eyeIcon, size: 'XXS', tooltipTitle: i18n.text('Focus'), onClick: function () { return toggleCrosswalkFocus(); } }))),
+            React.createElement("div", { className: styles.crosswalkValue }, crosswalk.value))));
 };
-exports.default = SourceItem;
+export default SourceItem;