@reltio/components 1.4.2058 → 1.4.2059

package/EditModeAttributesPager/components/SpecialRenderer/SpecialRenderer.d.ts

@@ -13,6 +13,8 @@ type Props = {
     hasDeletions?: boolean;
     setHasDeletions?: (attrTypeUri: string, value: boolean) => void;
     highlightedAttribute?: React.ContextType<typeof ScrollToElementContext>;
+    state?: string;
+    showTitle?: boolean;
 };
 declare const _default: React.ComponentType<Props>;
 export default _default;

package/EditModeAttributesPager/components/SpecialRenderer/SpecialRenderer.js

@@ -36,11 +36,11 @@ import { withContext } from '../../../HOCs/withContext';
 import { useScrollToAttribute } from '../../../hooks/useScrollToAttribute';
 import { useStyles } from '../../styles';
 var SpecialRenderer = function (_a) {
-    var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, showEmptyEditors = _a.showEmptyEditors, hasDeletionsProp = _a.hasDeletions, setHasDeletions = _a.setHasDeletions, highlightedAttribute = _a.highlightedAttribute, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage", "onDeleteAttribute", "onChangeAttribute", "showEmptyEditors", "hasDeletions", "setHasDeletions", "highlightedAttribute"]);
+    var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, showEmptyEditors = _a.showEmptyEditors, hasDeletionsProp = _a.hasDeletions, setHasDeletions = _a.setHasDeletions, highlightedAttribute = _a.highlightedAttribute, _b = _a.showTitle, showTitle = _b === void 0 ? true : _b, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage", "onDeleteAttribute", "onChangeAttribute", "showEmptyEditors", "hasDeletions", "setHasDeletions", "highlightedAttribute", "showTitle"]);
     var styles = useStyles();
     var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality;
     var isEditableMode = checkIsEditableMode(mode);
-    var _b = useState(false), hasDeletionsState = _b[0], setHasDeletionsState = _b[1];
+    var _c = useState(false), hasDeletionsState = _c[0], setHasDeletionsState = _c[1];
     var updateHasDeletions = useCallback(function (value) {
         setHasDeletionsState(value);
         setHasDeletions === null || setHasDeletions === void 0 ? void 0 : setHasDeletions(attributeType.uri, value);
@@ -57,17 +57,17 @@ var SpecialRenderer = function (_a) {
         parentUri: parentUri,
         attributeType: attributeType
     }));
-    var _c = useScrollToAttribute(highlightedAttribute), ref = _c.ref, highlightedClassName = _c.highlightedClassName;
+    var _d = useScrollToAttribute(highlightedAttribute), ref = _d.ref, highlightedClassName = _d.highlightedClassName;
     var renderValue = function () {
         switch (attributeType.uri) {
             case EntityAttrTypes.tags.uri:
-                return React.createElement(TagsEditor, { values: values, onDelete: onDelete, onChange: onChangeAttribute });
+                return (React.createElement(TagsEditor, __assign({}, otherProps, { values: values, onDelete: onDelete, onChange: onChangeAttribute })));
             case EntityAttrTypes.roles.uri:
-                return React.createElement(RolesEditor, { values: values, onDelete: onDelete, onChange: onChangeAttribute });
+                return (React.createElement(RolesEditor, __assign({}, otherProps, { values: values, onDelete: onDelete, onChange: onChangeAttribute })));
             default: {
                 //startDate, endDate
                 var value = __assign(__assign({}, emptyEditorValue.current), { value: values[0] || '' });
-                return (React.createElement(EditModeAttribute, __assign({ attributeValue: value, attributeType: attributeType, mode: mode, onDeleteAttribute: onDelete, onChangeAttribute: onChangeAttribute }, otherProps)));
+                return (React.createElement(EditModeAttribute, __assign({}, otherProps, { attributeValue: value, attributeType: attributeType, mode: mode, onDeleteAttribute: onDelete, onChangeAttribute: onChangeAttribute })));
             }
         }
     };
@@ -75,7 +75,7 @@ var SpecialRenderer = function (_a) {
         return null;
     }
     return (React.createElement("div", { ref: ref, className: classnames(highlightedClassName, styles.wrapper) },
-        React.createElement(AttributeTitle, { label: label, isRequired: isRequired, className: classnames(styles.title, styles.titleWrapper), "data-reltio-id": "reltio-attribute-label" }),
+        showTitle && (React.createElement(AttributeTitle, { label: label, isRequired: isRequired, className: classnames(styles.title, styles.titleWrapper), "data-reltio-id": "reltio-attribute-label" })),
         isEditableMode && React.createElement(CardinalityMessage, { cardinality: cardinality }),
         isEditableMode && React.createElement(ErrorMessage, { message: errorMessage }),
         React.createElement(Box, { className: styles.attributesWrapper }, renderValue())));

package/RolesEditor/RolesEditor.d.ts

@@ -4,6 +4,7 @@ type Props = {
     values: string[];
     onChange: (param: AttributeItem) => void;
     onDelete?: (param: AttributeItem) => void;
+    state?: string;
 };
-export declare const RolesEditor: ({ values, onChange, onDelete }: Props) => React.JSX.Element;
+export declare const RolesEditor: ({ values, onChange, onDelete, state }: Props) => React.JSX.Element;
 export {};

package/RolesEditor/RolesEditor.js

@@ -1,19 +1,21 @@
 import React, { useCallback } from 'react';
 import { prop, propEq } from 'ramda';
+import Typography from '@mui/material/Typography';
+import i18n from 'ui-i18n';
 import { EntityAttrTypes, getRolesForEntityType, getLastUriPart } from '@reltio/mdm-sdk';
 import { SimpleDropDownSelector } from '../SimpleDropDownSelector';
 import { MultiValueChip } from '../MultiValueChip';
 import { SmallIconButton } from '../SmallIconButton';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useMdmEntity, useMdmMetadata } from '../contexts/MdmModuleContext';
-import { useStyles } from './styles';
+import styles from './RolesEditor.module.css';
 var components = { MultiValue: MultiValueChip };
 export var RolesEditor = function (_a) {
-    var values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete;
-    var styles = useStyles();
+    var values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete, state = _a.state;
     var metadata = useMdmMetadata();
     var entity = useMdmEntity();
     var entityUri = entity.uri;
+    var edited = state === 'edited';
     var options = getRolesForEntityType(metadata, entity.type).map(function (role) { return ({
         value: role.uri,
         label: role.label
@@ -39,5 +41,9 @@ export var RolesEditor = function (_a) {
     }, [entityUri, onDelete]);
     return (React.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
         React.createElement(SimpleDropDownSelector, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: handleChange, components: components, classes: styles, className: styles.roleContainer }),
+        edited && (React.createElement(Typography, { variant: "caption", className: styles.editedLabel },
+            "(",
+            i18n.text('edited'),
+            ")")),
         !!onDelete && (React.createElement(SmallIconButton, { "data-reltio-id": "reltio-roles-delete-button", className: styles.deleteButton, icon: DeleteIcon, onClick: handleDelete, size: "L" }))));
 };

package/RolesEditor/RolesEditor.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"container":"RolesEditor-container--D0IS8","roleContainer":"RolesEditor-roleContainer--G5mqZ","valueContainer":"RolesEditor-valueContainer--YELLe","deleteButton":"RolesEditor-deleteButton--IKQBV","editedLabel":"RolesEditor-editedLabel--VYoNO"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.RolesEditor-container--D0IS8{align-items:center;display:flex;flex:1;margin-bottom:10px}.RolesEditor-roleContainer--G5mqZ{width:100%}.RolesEditor-valueContainer--YELLe{margin-left:8px;width:0}.RolesEditor-deleteButton--IKQBV{margin-left:8px}.RolesEditor-editedLabel--VYoNO{color:var(--mui-palette-text-secondary);font-style:italic;padding-left:8px}`;
+    head.appendChild(style);
+}
+export default styles;

package/TagsEditor/TagsEditor.d.ts

@@ -5,5 +5,6 @@ export type Props = {
     values: string[];
     onChange: (param: AttributeItem) => void;
     onDelete?: (param: AttributeItem) => void;
+    state?: string;
 };
-export declare const TagsEditor: ({ className, values, onChange, onDelete }: Props) => React.JSX.Element;
+export declare const TagsEditor: ({ className, values, onChange, onDelete, state }: Props) => React.JSX.Element;

package/TagsEditor/TagsEditor.js

@@ -48,15 +48,17 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React, { useCallback } from 'react';
 import { EntityAttrTypes, getFacetedAttributeData } from '@reltio/mdm-sdk';
 import DeleteIcon from '@mui/icons-material/Delete';
+import Typography from '@mui/material/Typography';
+import i18n from 'ui-i18n';
 import { TypeaheadEditor } from '../TypeaheadEditor';
 import { SmallIconButton } from '../SmallIconButton';
 import { useMdmEntityUri, useMdmGlobalSearchRequestOptions } from '../contexts/MdmModuleContext';
-import { useStyles } from './styles';
+import styles from './TagsEditor.module.css';
 export var TagsEditor = function (_a) {
-    var className = _a.className, values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete;
-    var styles = useStyles();
+    var className = _a.className, values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete, state = _a.state;
     var entityUri = useMdmEntityUri();
     var globalSearchRequestOptions = useMdmGlobalSearchRequestOptions();
+    var edited = state === 'edited';
     var getSuggestions = useCallback(function (searchValue, max, pageNo) { return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_a) {
@@ -84,5 +86,9 @@ export var TagsEditor = function (_a) {
     }, [entityUri, onDelete]);
     return (React.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
         React.createElement(TypeaheadEditor, { fullWidth: true, multiple: true, variant: "filled", className: className, value: values || [], onChange: handleChange, getSuggestions: getSuggestions }),
+        edited && (React.createElement(Typography, { variant: "caption", className: styles.editedLabel },
+            "(",
+            i18n.text('edited'),
+            ")")),
         !!onDelete && (React.createElement(SmallIconButton, { "data-reltio-id": "reltio-tags-delete-button", className: styles.deleteButton, icon: DeleteIcon, onClick: handleDelete, size: "L" }))));
 };

package/TagsEditor/TagsEditor.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"container":"TagsEditor-container--shWZG","deleteButton":"TagsEditor-deleteButton--3wvtV","editedLabel":"TagsEditor-editedLabel--AVFub"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.TagsEditor-container--shWZG{align-items:center;display:flex;flex:1;margin-bottom:10px}.TagsEditor-deleteButton--3wvtV{margin-left:8px}.TagsEditor-editedLabel--AVFub{color:var(--mui-palette-text-secondary);font-style:italic;padding-left:8px}`;
+    head.appendChild(style);
+}
+export default styles;

package/cjs/EditModeAttributesPager/components/SpecialRenderer/SpecialRenderer.d.ts

@@ -13,6 +13,8 @@ type Props = {
     hasDeletions?: boolean;
     setHasDeletions?: (attrTypeUri: string, value: boolean) => void;
     highlightedAttribute?: React.ContextType<typeof ScrollToElementContext>;
+    state?: string;
+    showTitle?: boolean;
 };
 declare const _default: React.ComponentType<Props>;
 export default _default;

package/cjs/EditModeAttributesPager/components/SpecialRenderer/SpecialRenderer.js

@@ -64,11 +64,11 @@ var withContext_1 = require("../../../HOCs/withContext");
 var useScrollToAttribute_1 = require("../../../hooks/useScrollToAttribute");
 var styles_1 = require("../../styles");
 var SpecialRenderer = function (_a) {
-    var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, showEmptyEditors = _a.showEmptyEditors, hasDeletionsProp = _a.hasDeletions, setHasDeletions = _a.setHasDeletions, highlightedAttribute = _a.highlightedAttribute, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage", "onDeleteAttribute", "onChangeAttribute", "showEmptyEditors", "hasDeletions", "setHasDeletions", "highlightedAttribute"]);
+    var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, showEmptyEditors = _a.showEmptyEditors, hasDeletionsProp = _a.hasDeletions, setHasDeletions = _a.setHasDeletions, highlightedAttribute = _a.highlightedAttribute, _b = _a.showTitle, showTitle = _b === void 0 ? true : _b, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage", "onDeleteAttribute", "onChangeAttribute", "showEmptyEditors", "hasDeletions", "setHasDeletions", "highlightedAttribute", "showTitle"]);
     var styles = (0, styles_1.useStyles)();
     var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality;
     var isEditableMode = (0, mdm_sdk_1.isEditableMode)(mode);
-    var _b = (0, react_1.useState)(false), hasDeletionsState = _b[0], setHasDeletionsState = _b[1];
+    var _c = (0, react_1.useState)(false), hasDeletionsState = _c[0], setHasDeletionsState = _c[1];
     var updateHasDeletions = (0, react_1.useCallback)(function (value) {
         setHasDeletionsState(value);
         setHasDeletions === null || setHasDeletions === void 0 ? void 0 : setHasDeletions(attributeType.uri, value);
@@ -85,17 +85,17 @@ var SpecialRenderer = function (_a) {
         parentUri: parentUri,
         attributeType: attributeType
     }));
-    var _c = (0, useScrollToAttribute_1.useScrollToAttribute)(highlightedAttribute), ref = _c.ref, highlightedClassName = _c.highlightedClassName;
+    var _d = (0, useScrollToAttribute_1.useScrollToAttribute)(highlightedAttribute), ref = _d.ref, highlightedClassName = _d.highlightedClassName;
     var renderValue = function () {
         switch (attributeType.uri) {
             case mdm_sdk_1.EntityAttrTypes.tags.uri:
-                return react_1.default.createElement(TagsEditor_1.TagsEditor, { values: values, onDelete: onDelete, onChange: onChangeAttribute });
+                return (react_1.default.createElement(TagsEditor_1.TagsEditor, __assign({}, otherProps, { values: values, onDelete: onDelete, onChange: onChangeAttribute })));
             case mdm_sdk_1.EntityAttrTypes.roles.uri:
-                return react_1.default.createElement(RolesEditor_1.RolesEditor, { values: values, onDelete: onDelete, onChange: onChangeAttribute });
+                return (react_1.default.createElement(RolesEditor_1.RolesEditor, __assign({}, otherProps, { values: values, onDelete: onDelete, onChange: onChangeAttribute })));
             default: {
                 //startDate, endDate
                 var value = __assign(__assign({}, emptyEditorValue.current), { value: values[0] || '' });
-                return (react_1.default.createElement(EditModeAttributesFactory_1.EditModeAttribute, __assign({ attributeValue: value, attributeType: attributeType, mode: mode, onDeleteAttribute: onDelete, onChangeAttribute: onChangeAttribute }, otherProps)));
+                return (react_1.default.createElement(EditModeAttributesFactory_1.EditModeAttribute, __assign({}, otherProps, { attributeValue: value, attributeType: attributeType, mode: mode, onDeleteAttribute: onDelete, onChangeAttribute: onChangeAttribute })));
             }
         }
     };
@@ -103,7 +103,7 @@ var SpecialRenderer = function (_a) {
         return null;
     }
     return (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)(highlightedClassName, styles.wrapper) },
-        react_1.default.createElement(AttributeTitle_1.AttributeTitle, { label: label, isRequired: isRequired, className: (0, classnames_1.default)(styles.title, styles.titleWrapper), "data-reltio-id": "reltio-attribute-label" }),
+        showTitle && (react_1.default.createElement(AttributeTitle_1.AttributeTitle, { label: label, isRequired: isRequired, className: (0, classnames_1.default)(styles.title, styles.titleWrapper), "data-reltio-id": "reltio-attribute-label" })),
         isEditableMode && react_1.default.createElement(CardinalityMessage_1.CardinalityMessage, { cardinality: cardinality }),
         isEditableMode && react_1.default.createElement(ErrorMessage_1.ErrorMessage, { message: errorMessage }),
         react_1.default.createElement(Box_1.default, { className: styles.attributesWrapper }, renderValue())));

package/cjs/RolesEditor/RolesEditor.d.ts

@@ -4,6 +4,7 @@ type Props = {
     values: string[];
     onChange: (param: AttributeItem) => void;
     onDelete?: (param: AttributeItem) => void;
+    state?: string;
 };
-export declare const RolesEditor: ({ values, onChange, onDelete }: Props) => React.JSX.Element;
+export declare const RolesEditor: ({ values, onChange, onDelete, state }: Props) => React.JSX.Element;
 export {};

package/cjs/RolesEditor/RolesEditor.js

@@ -29,20 +29,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RolesEditor = void 0;
 var react_1 = __importStar(require("react"));
 var ramda_1 = require("ramda");
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var SimpleDropDownSelector_1 = require("../SimpleDropDownSelector");
 var MultiValueChip_1 = require("../MultiValueChip");
 var SmallIconButton_1 = require("../SmallIconButton");
 var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
-var styles_1 = require("./styles");
+var RolesEditor_module_css_1 = __importDefault(require("./RolesEditor.module.css"));
 var components = { MultiValue: MultiValueChip_1.MultiValueChip };
 var RolesEditor = function (_a) {
-    var values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete;
-    var styles = (0, styles_1.useStyles)();
+    var values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete, state = _a.state;
     var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     var entity = (0, MdmModuleContext_1.useMdmEntity)();
     var entityUri = entity.uri;
+    var edited = state === 'edited';
     var options = (0, mdm_sdk_1.getRolesForEntityType)(metadata, entity.type).map(function (role) { return ({
         value: role.uri,
         label: role.label
@@ -66,8 +68,12 @@ var RolesEditor = function (_a) {
     var handleDelete = (0, react_1.useCallback)(function () {
         onDelete({ uri: entityUri, attributeType: mdm_sdk_1.EntityAttrTypes.roles });
     }, [entityUri, onDelete]);
-    return (react_1.default.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
-        react_1.default.createElement(SimpleDropDownSelector_1.SimpleDropDownSelector, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: handleChange, components: components, classes: styles, className: styles.roleContainer }),
-        !!onDelete && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { "data-reltio-id": "reltio-roles-delete-button", className: styles.deleteButton, icon: Delete_1.default, onClick: handleDelete, size: "L" }))));
+    return (react_1.default.createElement("div", { className: RolesEditor_module_css_1.default.container, "data-reltio-id": "reltio-attribute-value" },
+        react_1.default.createElement(SimpleDropDownSelector_1.SimpleDropDownSelector, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: handleChange, components: components, classes: RolesEditor_module_css_1.default, className: RolesEditor_module_css_1.default.roleContainer }),
+        edited && (react_1.default.createElement(Typography_1.default, { variant: "caption", className: RolesEditor_module_css_1.default.editedLabel },
+            "(",
+            ui_i18n_1.default.text('edited'),
+            ")")),
+        !!onDelete && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { "data-reltio-id": "reltio-roles-delete-button", className: RolesEditor_module_css_1.default.deleteButton, icon: Delete_1.default, onClick: handleDelete, size: "L" }))));
 };
 exports.RolesEditor = RolesEditor;

package/cjs/RolesEditor/RolesEditor.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"container":"RolesEditor-container--D0IS8","roleContainer":"RolesEditor-roleContainer--G5mqZ","valueContainer":"RolesEditor-valueContainer--YELLe","deleteButton":"RolesEditor-deleteButton--IKQBV","editedLabel":"RolesEditor-editedLabel--VYoNO"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.RolesEditor-container--D0IS8{align-items:center;display:flex;flex:1;margin-bottom:10px}.RolesEditor-roleContainer--G5mqZ{width:100%}.RolesEditor-valueContainer--YELLe{margin-left:8px;width:0}.RolesEditor-deleteButton--IKQBV{margin-left:8px}.RolesEditor-editedLabel--VYoNO{color:var(--mui-palette-text-secondary);font-style:italic;padding-left:8px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/TagsEditor/TagsEditor.d.ts

@@ -5,5 +5,6 @@ export type Props = {
     values: string[];
     onChange: (param: AttributeItem) => void;
     onDelete?: (param: AttributeItem) => void;
+    state?: string;
 };
-export declare const TagsEditor: ({ className, values, onChange, onDelete }: Props) => React.JSX.Element;
+export declare const TagsEditor: ({ className, values, onChange, onDelete, state }: Props) => React.JSX.Element;

package/cjs/TagsEditor/TagsEditor.js

@@ -77,15 +77,17 @@ exports.TagsEditor = void 0;
 var react_1 = __importStar(require("react"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var TypeaheadEditor_1 = require("../TypeaheadEditor");
 var SmallIconButton_1 = require("../SmallIconButton");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
-var styles_1 = require("./styles");
+var TagsEditor_module_css_1 = __importDefault(require("./TagsEditor.module.css"));
 var TagsEditor = function (_a) {
-    var className = _a.className, values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete;
-    var styles = (0, styles_1.useStyles)();
+    var className = _a.className, values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete, state = _a.state;
     var entityUri = (0, MdmModuleContext_1.useMdmEntityUri)();
     var globalSearchRequestOptions = (0, MdmModuleContext_1.useMdmGlobalSearchRequestOptions)();
+    var edited = state === 'edited';
     var getSuggestions = (0, react_1.useCallback)(function (searchValue, max, pageNo) { return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_a) {
@@ -111,8 +113,12 @@ var TagsEditor = function (_a) {
     var handleDelete = (0, react_1.useCallback)(function () {
         onDelete({ uri: entityUri, attributeType: mdm_sdk_1.EntityAttrTypes.tags });
     }, [entityUri, onDelete]);
-    return (react_1.default.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
+    return (react_1.default.createElement("div", { className: TagsEditor_module_css_1.default.container, "data-reltio-id": "reltio-attribute-value" },
         react_1.default.createElement(TypeaheadEditor_1.TypeaheadEditor, { fullWidth: true, multiple: true, variant: "filled", className: className, value: values || [], onChange: handleChange, getSuggestions: getSuggestions }),
-        !!onDelete && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { "data-reltio-id": "reltio-tags-delete-button", className: styles.deleteButton, icon: Delete_1.default, onClick: handleDelete, size: "L" }))));
+        edited && (react_1.default.createElement(Typography_1.default, { variant: "caption", className: TagsEditor_module_css_1.default.editedLabel },
+            "(",
+            ui_i18n_1.default.text('edited'),
+            ")")),
+        !!onDelete && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { "data-reltio-id": "reltio-tags-delete-button", className: TagsEditor_module_css_1.default.deleteButton, icon: Delete_1.default, onClick: handleDelete, size: "L" }))));
 };
 exports.TagsEditor = TagsEditor;

package/cjs/TagsEditor/TagsEditor.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"container":"TagsEditor-container--shWZG","deleteButton":"TagsEditor-deleteButton--3wvtV","editedLabel":"TagsEditor-editedLabel--AVFub"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.TagsEditor-container--shWZG{align-items:center;display:flex;flex:1;margin-bottom:10px}.TagsEditor-deleteButton--3wvtV{margin-left:8px}.TagsEditor-editedLabel--AVFub{color:var(--mui-palette-text-secondary);font-style:italic;padding-left:8px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2058",
+  "version": "1.4.2059",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/RolesEditor/styles.d.ts

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

package/RolesEditor/styles.js

@@ -1,19 +0,0 @@
-import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles({
-    container: {
-        display: 'flex',
-        flex: 1,
-        alignItems: 'flex-start',
-        marginBottom: '10px'
-    },
-    roleContainer: {
-        width: '100%'
-    },
-    valueContainer: {
-        marginLeft: '8px',
-        width: 0
-    },
-    deleteButton: {
-        marginLeft: '8px'
-    }
-});

package/TagsEditor/styles.d.ts

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

package/TagsEditor/styles.js

@@ -1,12 +0,0 @@
-import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles({
-    container: {
-        display: 'flex',
-        flex: 1,
-        alignItems: 'flex-start',
-        marginBottom: '10px'
-    },
-    deleteButton: {
-        marginLeft: '8px'
-    }
-});

package/cjs/RolesEditor/styles.d.ts

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

package/cjs/RolesEditor/styles.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)({
-    container: {
-        display: 'flex',
-        flex: 1,
-        alignItems: 'flex-start',
-        marginBottom: '10px'
-    },
-    roleContainer: {
-        width: '100%'
-    },
-    valueContainer: {
-        marginLeft: '8px',
-        width: 0
-    },
-    deleteButton: {
-        marginLeft: '8px'
-    }
-});

package/cjs/TagsEditor/styles.d.ts

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

package/cjs/TagsEditor/styles.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)({
-    container: {
-        display: 'flex',
-        flex: 1,
-        alignItems: 'flex-start',
-        marginBottom: '10px'
-    },
-    deleteButton: {
-        marginLeft: '8px'
-    }
-});