@reltio/components 1.4.1433 → 1.4.1435

package/cjs/components/BasicTableView/BasicTable/helpers/dataHelpers.js

@@ -90,10 +90,11 @@ var getTableRowsData = function (rowValues, columnsData, renderRowCell, getRowCe
 exports.getTableRowsData = getTableRowsData;
 var getTableHeadData = function (columnsData, filters, onFilter) {
     return columnsData.map(function (_a) {
-        var id = _a.id, label = _a.label, sortable = _a.sortable, _b = _a.filterable, filterable = _b === void 0 ? true : _b, resizable = _a.resizable, draggable = _a.draggable, _c = _a.autoResize, autoResize = _c === void 0 ? true : _c, initialWidth = _a.initialWidth, minWidth = _a.minWidth, dataTypeDefinition = _a.dataTypeDefinition, filterOptions = _a.filterOptions, _d = _a.headCellRenderer, headCellRenderer = _d === void 0 ? (0, withFilterAtBottom_1.default)(DefaultHeadCellRenderer_1.default) : _d;
+        var id = _a.id, label = _a.label, description = _a.description, sortable = _a.sortable, _b = _a.filterable, filterable = _b === void 0 ? true : _b, resizable = _a.resizable, draggable = _a.draggable, _c = _a.autoResize, autoResize = _c === void 0 ? true : _c, initialWidth = _a.initialWidth, minWidth = _a.minWidth, dataTypeDefinition = _a.dataTypeDefinition, filterOptions = _a.filterOptions, _d = _a.headCellRenderer, headCellRenderer = _d === void 0 ? (0, withFilterAtBottom_1.default)(DefaultHeadCellRenderer_1.default) : _d;
         return ({
             id: id,
             label: label,
+            description: description,
             sortable: sortable,
             resizable: resizable,
             draggable: draggable,

package/cjs/components/BasicViewHeader/BasicViewHeader.js

@@ -26,14 +26,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var Toolbar_1 = __importDefault(require("@material-ui/core/Toolbar"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var styles_1 = require("./styles");
 var BasicViewHeader = function (_a) {
-    var title = _a.title, _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.classes, classes = _c === void 0 ? {} : _c, otherProps = __rest(_a, ["title", "children", "classes"]);
+    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.classes, classes = _d === void 0 ? {} : _d, otherProps = __rest(_a, ["title", "children", "classes"]);
     var styles = (0, styles_1.useStyles)();
     return (react_1.default.createElement(Toolbar_1.default, __assign({ className: classes.root, classes: { root: styles.toolbar } }, otherProps),
-        react_1.default.createElement(Typography_1.default, { className: classes.title, classes: { root: styles.title }, variant: "h6" }, title),
+        react_1.default.createElement(Typography_1.default, { className: classes.title, classes: { root: styles.title }, variant: "h6" }, ui_i18n_1.default.text(title)),
         children));
 };
 exports.default = BasicViewHeader;

package/cjs/components/DateIntervalSelector/DateIntervalSelector.js

@@ -5,20 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ramda_1 = require("ramda");
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var capitalize_1 = __importDefault(require("@material-ui/core/utils/capitalize"));
 var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
 var SimpleDropDownSelector_1 = __importDefault(require("../SimpleDropDownSelector/SimpleDropDownSelector"));
 var utils_1 = require("../../core/utils");
 var styles_1 = require("./styles");
-var periods = [
-    ui_i18n_1.default.text('minutes'),
-    ui_i18n_1.default.text('hours'),
-    ui_i18n_1.default.text('days'),
-    ui_i18n_1.default.text('weeks'),
-    ui_i18n_1.default.text('months'),
-    ui_i18n_1.default.text('years')
-];
+var periods = ['minutes', 'hours', 'days', 'weeks', 'months', 'years'];
 var DateIntervalSelector = function (_a) {
     var _b = _a.interval, value = _b[0], unit = _b[1], onChange = _a.onChange, onFocus = _a.onFocus;
     var styles = (0, styles_1.useStyles)();
@@ -31,9 +24,9 @@ var DateIntervalSelector = function (_a) {
     var onUnitChange = (0, ramda_1.pipe)(getIntervalFromUnit, onChange);
     return (react_1.default.createElement("div", { className: styles.root },
         react_1.default.createElement(TextField_1.default, { type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: { classes: { root: styles.input } }, className: styles.inputNumber }),
-        react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', placeholder: (0, capitalize_1.default)(unit), className: styles.inputUnit, value: { value: unit, label: (0, capitalize_1.default)(unit) }, options: periods.map(function (value) { return ({
+        react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', placeholder: (0, capitalize_1.default)(unit), className: styles.inputUnit, value: { value: unit, label: (0, capitalize_1.default)((0, mdm_sdk_1.getIntervalUnitLabel)(unit)) }, options: periods.map(function (value) { return ({
                 value: value,
-                label: (0, capitalize_1.default)(value)
+                label: (0, capitalize_1.default)((0, mdm_sdk_1.getIntervalUnitLabel)(value))
             }); }), onChange: onUnitChange, TextFieldProps: {
                 inputProps: { onFocus: onFocus },
                 InputProps: { classes: { root: styles.input } }

package/cjs/components/activityLog/ActivityLogFilter/helpers.js

@@ -25,9 +25,15 @@ var getFilterLabel = function (filters) {
         };
         switch (date.type) {
             case mdm_sdk_1.DateRangeTypes.WITHIN:
-                return ui_i18n_1.default.text('Within ${amount} ${unit}', { amount: date.period[0], unit: date.period[1] });
+                return ui_i18n_1.default.text('Within ${amount} ${unit}', {
+                    amount: date.period[0],
+                    unit: (0, mdm_sdk_1.getIntervalUnitLabel)(date.period[1])
+                });
             case mdm_sdk_1.DateRangeTypes.AGO:
-                return ui_i18n_1.default.text('More than ${amount} ${unit} ago', { amount: date.period[0], unit: date.period[1] });
+                return ui_i18n_1.default.text('More than ${amount} ${unit} ago', {
+                    amount: date.period[0],
+                    unit: (0, mdm_sdk_1.getIntervalUnitLabel)(date.period[1])
+                });
             case mdm_sdk_1.DateRangeTypes.BETWEEN:
                 return ui_i18n_1.default.text('${startDate} to ${endDate}', {
                     startDate: formatDateValue(date.period[0]),

package/cjs/components/attributes/DescriptionIcon/DescriptionIcon.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export declare const ChipWithTooltip: React.ForwardRefExoticComponent<import("prop-types").InferPropsInner<Pick<{
+    tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+    tooltipPlacement: import("prop-types").Requireable<string>;
+    showForDisabled: import("prop-types").Requireable<boolean>;
+}, never>> & Partial<import("prop-types").InferPropsInner<Pick<{
+    tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+    tooltipPlacement: import("prop-types").Requireable<string>;
+    showForDisabled: import("prop-types").Requireable<boolean>;
+}, "tooltipTitle" | "tooltipPlacement" | "showForDisabled">>> & {
+    avatar?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    children?: null;
+    clickable?: boolean;
+    color?: "default" | "primary" | "secondary";
+    deleteIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    disabled?: boolean;
+    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    label?: React.ReactNode;
+    onDelete?: (event: any) => void;
+    size?: "medium" | "small";
+    variant?: "default" | "outlined";
+} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core/Chip").ChipTypeMap<{}, "div">> & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, "translate" | "hidden" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key">>;
+declare type Props = {
+    className?: string;
+    description?: string;
+    showDescription?: boolean;
+};
+declare const DescriptionIcon: ({ className, description }: Props) => JSX.Element;
+export default DescriptionIcon;

package/cjs/components/attributes/DescriptionIcon/DescriptionIcon.js

@@ -0,0 +1,51 @@
+"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.ChipWithTooltip = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Chip_1 = __importDefault(require("@material-ui/core/Chip"));
+var contexts_1 = require("../../../contexts");
+var HOCs_1 = require("../../../HOCs");
+var Description_1 = __importDefault(require("../../../icons/Description"));
+var styles_1 = require("./styles");
+exports.ChipWithTooltip = (0, HOCs_1.withTooltip)(Chip_1.default);
+var DescriptionIcon = function (_a) {
+    var className = _a.className, description = _a.description;
+    var showDescription = (0, react_1.useContext)(contexts_1.FeaturesContext).showDescription;
+    var styles = (0, styles_1.useStyles)();
+    if (!description || !showDescription) {
+        return null;
+    }
+    return (react_1.default.createElement(exports.ChipWithTooltip, { tooltipTitle: description, tooltipPlacement: "bottom", icon: react_1.default.createElement(Description_1.default, null), classes: {
+            root: (0, classnames_1.default)(styles.container, className),
+            label: styles.label,
+            icon: styles.icon
+        } }));
+};
+exports.default = DescriptionIcon;

package/cjs/components/attributes/DescriptionIcon/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./DescriptionIcon";

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

package/cjs/components/attributes/DescriptionIcon/styles.d.ts

@@ -0,0 +1 @@
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "label" | "container">;

package/cjs/components/attributes/DescriptionIcon/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
+    container: {
+        height: '15px',
+        backgroundColor: 'transparent',
+        '&:hover': {
+            backgroundColor: 'transparent'
+        }
+    },
+    label: {
+        paddingLeft: '4px',
+        paddingRight: '4px',
+        fontSize: '10px',
+        lineHeight: '11px'
+    },
+    icon: {
+        width: '12px',
+        height: '12px',
+        marginRight: 0
+    }
+}); });

package/cjs/components/attributes/OvIcon/OvIcon.js

@@ -53,7 +53,7 @@ var OvIcon = function (_a) {
     var tooltipTitle = nonOvValues.length
         ? nonOvValues.map(function (value, i) { return (react_1.default.createElement("div", { key: i }, (0, mdm_sdk_1.isComplexAttribute)(attributeType) ? ((0, mdm_sdk_1.getLabel)(value.label)) : (react_1.default.createElement(DataTypeValue_1.default, { value: (0, mdm_sdk_1.getAttributeValue)(value), dataTypeDefinition: (0, mdm_sdk_1.getAttrDataTypeDefinition)(attributeType), rich: false })))); })
         : null;
-    return (react_1.default.createElement(exports.ChipWithTooltip, { tooltipTitle: tooltipTitle, tooltipPlacement: "top", label: "+ ".concat(nonOvTotal), variant: "outlined", onClick: onClick, classes: {
+    return (react_1.default.createElement(exports.ChipWithTooltip, { tooltipTitle: tooltipTitle, tooltipPlacement: "bottom", label: "+ ".concat(nonOvTotal), variant: "outlined", onClick: onClick, classes: {
             root: (0, classnames_1.default)(styles.container, className),
             label: styles.label
         } }));

package/cjs/components/attributes/editMode/AttributesPager/AttributeRenderer.js

@@ -43,13 +43,14 @@ var HOCs_1 = require("../../../../HOCs");
 var PinnedAttributesContext_1 = require("../contexts/PinnedAttributesContext");
 var hooks_1 = require("../../../../hooks");
 var contexts_1 = require("../../../../contexts");
+var DescriptionIcon_1 = __importDefault(require("../../DescriptionIcon/DescriptionIcon"));
 var styles_1 = require("./styles");
 var AttributeRenderer = function (_a) {
     var max = _a.max, values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, drawLines = _a.drawLines, showEmptyEditors = _a.showEmptyEditors, errorMessage = _a.errorMessage, errors = _a.errors, paging = _a.paging, crosswalks = _a.crosswalks, showNonOv = _a.showNonOv, nonVisibleValues = _a.nonVisibleValues, highlightedError = _a.highlightedError, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues;
     var styles = (0, styles_1.useStyles)();
     var _b = (0, react_1.useState)(max), visibleValuesCount = _b[0], setVisibleValuesCount = _b[1];
     var _c = (0, react_1.useState)(false), hadDeletions = _c[0], setHadDeletions = _c[1];
-    var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality, name = attributeType.name, attributeTypeUri = attributeType.uri;
+    var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality, name = attributeType.name, attributeTypeUri = attributeType.uri, description = attributeType.description;
     var isEditableMode = (0, mdm_sdk_1.isEditableMode)(mode);
     var _d = (0, hooks_1.useScrollToAttributeError)({ highlightedError: highlightedError }), ref = _d.ref, errorClassName = _d.errorClassName;
     var pinnedAttributes = (0, react_1.useContext)(PinnedAttributesContext_1.PinnedAttributesContext);
@@ -110,6 +111,7 @@ var AttributeRenderer = function (_a) {
         react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)(styles.wrapper, errorClassName) },
             react_1.default.createElement("div", { className: styles.titleWrapper },
                 react_1.default.createElement(Title_1.default, { label: label, isRequired: isRequired, className: styles.title, "data-reltio-id": "reltio-attribute-label" }),
+                react_1.default.createElement(DescriptionIcon_1.default, { description: description, className: styles.description }),
                 react_1.default.createElement(OvIcon_1.default, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues })),
             isEditableMode && react_1.default.createElement(CardinalityMessage_1.default, { cardinality: cardinality }),
             isEditableMode && react_1.default.createElement(ErrorMessage_1.default, { message: errorMessage, className: styles.typeError }),

package/cjs/components/attributes/editMode/AttributesPager/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"caption" | "title" | "link" | "wrapper" | "ovIcon" | "svg-icon__root" | "attributesWrapper" | "typeError" | "titleWrapper">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"caption" | "title" | "link" | "description" | "wrapper" | "ovIcon" | "svg-icon__root" | "attributesWrapper" | "typeError" | "titleWrapper">;

package/cjs/components/attributes/editMode/AttributesPager/styles.js

@@ -13,6 +13,9 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         alignItems: 'flex-start',
         position: 'relative'
     },
+    description: {
+        marginRight: '-9px'
+    },
     attributesWrapper: {
         width: '100%',
         marginBottom: '10px'

package/cjs/components/attributes/readMode/AttributesPager/MultiLineRenderer.js

@@ -35,6 +35,7 @@ var Title_1 = __importDefault(require("../../../Title/Title"));
 var ShowMore_1 = __importDefault(require("../../pagersCommon/ShowMore"));
 var ShowLess_1 = __importDefault(require("../../pagersCommon/ShowLess"));
 var OvIcon_1 = __importDefault(require("../../OvIcon"));
+var DescriptionIcon_1 = __importDefault(require("../../DescriptionIcon"));
 var MultiLineRenderer = function (_a) {
     var max = _a.max, values = _a.values, nonVisibleValues = _a.nonVisibleValues, totalVisibleValues = _a.totalVisibleValues, attributeType = _a.attributeType, parentUri = _a.parentUri, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, showNonOv = _a.showNonOv, totalNonVisibleValues = _a.totalNonVisibleValues;
     var styles = (0, styles_1.useMultiLineStyles)();
@@ -42,7 +43,7 @@ var MultiLineRenderer = function (_a) {
     var hasPaging = max < totalVisibleValues;
     var showMore = hasPaging && visibleValuesCount < totalVisibleValues;
     var showLess = hasPaging && visibleValuesCount >= totalVisibleValues;
-    var label = attributeType.label;
+    var label = attributeType.label, description = attributeType.description;
     var onShowMore = function () {
         if (values.length < totalVisibleValues) {
             requestNextPageOfAttributeValues({
@@ -63,6 +64,7 @@ var MultiLineRenderer = function (_a) {
     return (react_1.default.createElement("div", { className: styles.wrapper },
         react_1.default.createElement("div", { className: styles.titleRow },
             react_1.default.createElement(Title_1.default, { label: label, className: (0, classnames_1.default)(styles.title, titleClassName), "data-reltio-id": "reltio-attribute-label" }),
+            react_1.default.createElement(DescriptionIcon_1.default, { description: description }),
             react_1.default.createElement(OvIcon_1.default, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues })),
         react_1.default.createElement("div", { className: styles.attributes }, shownValues.map(function (value) { return (react_1.default.createElement(Attribute_1.default, { key: value.uri, className: (0, classnames_1.default)(styles.attribute, contentClassName), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv })); })),
         showMore && (react_1.default.createElement(ShowMore_1.default, { moreNumber: (0, ramda_1.min)(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),

package/cjs/components/attributes/readMode/AttributesPager/OneLineRenderer.js

@@ -10,18 +10,20 @@ var constants_1 = require("../../../../constants");
 var CommentsContainer_1 = __importDefault(require("../../../CommentsContainer/CommentsContainer"));
 var Title_1 = __importDefault(require("../../../Title/Title"));
 var OvIcon_1 = __importDefault(require("../../OvIcon"));
+var DescriptionIcon_1 = __importDefault(require("../../DescriptionIcon/DescriptionIcon"));
 var Attribute_1 = __importDefault(require("../AttributesFactory/Attribute"));
 var styles_1 = require("./styles");
 var OneLineRenderer = function (_a) {
     var value = _a.value, nonVisibleValues = _a.nonVisibleValues, attributeType = _a.attributeType, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, showNonOv = _a.showNonOv, totalNonVisibleValues = _a.totalNonVisibleValues;
     var styles = (0, styles_1.useOneLineStyles)();
-    var label = attributeType.label;
+    var label = attributeType.label, description = attributeType.description;
     var objectType = (0, mdm_sdk_1.isRelationAttrType)(attributeType)
         ? mdm_sdk_1.CollaborationObjectTypes.RELATION_ATTRIBUTE
         : mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE;
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.collaborationWrapper, constants_1.COMMENTS_CONTAINER_VISIBILITY_AREA) },
         react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.titleRow, styles.wrapper) },
             react_1.default.createElement(Title_1.default, { label: label, className: (0, classnames_1.default)(styles.title, titleClassName), "data-reltio-id": "reltio-attribute-label" }),
+            react_1.default.createElement(DescriptionIcon_1.default, { description: description, className: styles.descriptionIcon }),
             react_1.default.createElement(OvIcon_1.default, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
             react_1.default.createElement(Attribute_1.default, { className: (0, classnames_1.default)(styles.attribute, contentClassName), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, inlined: true })),
         react_1.default.createElement(CommentsContainer_1.default, { uri: value.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {

package/cjs/components/attributes/readMode/AttributesPager/styles.d.ts

@@ -1,3 +1,3 @@
 export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"paddingWrapper" | "paddingWrapperWithLines">;
-export const useOneLineStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "attribute" | "wrapper" | "collaborationWrapper" | "titleIcon" | "titleRow" | "ovIcon">;
-export const useMultiLineStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "attributes" | "attribute" | "wrapper" | "titleRow" | "ovIcon">;
+export const useOneLineStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "attribute" | "wrapper" | "collaborationWrapper" | "titleIcon" | "titleRow" | "ovIcon" | "descriptionIcon">;
+export const useMultiLineStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "attributes" | "attribute" | "wrapper" | "titleRow" | "ovIcon" | "descriptionIcon">;

package/cjs/components/attributes/readMode/AttributesPager/styles.js

@@ -30,6 +30,11 @@ var commonStyles = {
         marginRight: '-3px',
         marginTop: '-1px',
         textIndent: 0
+    },
+    descriptionIcon: {
+        marginTop: '-1px',
+        textIndent: 0,
+        marginRight: '-10px'
     }
 };
 exports.useStyles = (0, styles_1.makeStyles)({

package/cjs/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './activityLog';
 export { default as AttributeListItem } from './AttributeListItem/AttributeListItem';
 export { default as AttributesView } from './attributes/AttributesView';
+export { default as DescriptionIcon } from './attributes/DescriptionIcon';
 export { default as BranchDecorator } from './attributes/BranchDecorator/BranchDecorator';
 export { default as AttributesList } from './attributes/editMode/AttributesList';
 export { default as EntityCreator } from './attributes/editMode/EntityCreator';

package/cjs/components/index.js

@@ -17,14 +17,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.MenuList = exports.LoadMoreButton = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ScreenProfileBand = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.EditableImageAttributesLine = exports.ImageAttributesLine = exports.ReadOnlyAttributesList = exports.ReadOnlyAttributeValuesBlock = exports.EditableAttribute = exports.ReadOnlyAttribute = exports.CardinalityMessage = exports.AttributesPager = exports.SimpleAttributeEditor = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.NestedAttributeEditor = exports.MoreAttributesButton = exports.EntitySelector = exports.EntityCreator = exports.AttributesList = exports.BranchDecorator = exports.AttributesView = exports.AttributeListItem = void 0;
-exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ResizablePanes = exports.ReltioGridLayout = exports.ReactSortableTreeUtils = exports.ReactSortableTreeHandlers = exports.ReactSortableTree = exports.ReactSelectOptionFilters = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBlock = exports.MatchRuleVariant = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportModes = exports.ImportButton = exports.ImageGalleryDialog = exports.Highlighter = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.FlipCard = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.RelationTypesSelector = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = void 0;
-exports.DataTenantBadge = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.DragAndDrop = exports.ConnectionEditor = exports.AttributesFiltersBuilder = exports.AttributesFiltersButton = exports.AttributeGroupIcon = exports.BasicAttributeSelector = exports.ProfilesList = exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = void 0;
+exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.MenuList = exports.LoadMoreButton = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ScreenProfileBand = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.EditableImageAttributesLine = exports.ImageAttributesLine = exports.ReadOnlyAttributesList = exports.ReadOnlyAttributeValuesBlock = exports.EditableAttribute = exports.ReadOnlyAttribute = exports.CardinalityMessage = exports.AttributesPager = exports.SimpleAttributeEditor = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.NestedAttributeEditor = exports.MoreAttributesButton = exports.EntitySelector = exports.EntityCreator = exports.AttributesList = exports.BranchDecorator = exports.DescriptionIcon = exports.AttributesView = exports.AttributeListItem = void 0;
+exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ResizablePanes = exports.ReltioGridLayout = exports.ReactSortableTreeUtils = exports.ReactSortableTreeHandlers = exports.ReactSortableTree = exports.ReactSelectOptionFilters = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBlock = exports.MatchRuleVariant = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportModes = exports.ImportButton = exports.ImageGalleryDialog = exports.Highlighter = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.FlipCard = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.RelationTypesSelector = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = void 0;
+exports.DataTenantBadge = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.DragAndDrop = exports.ConnectionEditor = exports.AttributesFiltersBuilder = exports.AttributesFiltersButton = exports.AttributeGroupIcon = exports.BasicAttributeSelector = exports.ProfilesList = exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = void 0;
 __exportStar(require("./activityLog"), exports);
 var AttributeListItem_1 = require("./AttributeListItem/AttributeListItem");
 Object.defineProperty(exports, "AttributeListItem", { enumerable: true, get: function () { return __importDefault(AttributeListItem_1).default; } });
 var AttributesView_1 = require("./attributes/AttributesView");
 Object.defineProperty(exports, "AttributesView", { enumerable: true, get: function () { return __importDefault(AttributesView_1).default; } });
+var DescriptionIcon_1 = require("./attributes/DescriptionIcon");
+Object.defineProperty(exports, "DescriptionIcon", { enumerable: true, get: function () { return __importDefault(DescriptionIcon_1).default; } });
 var BranchDecorator_1 = require("./attributes/BranchDecorator/BranchDecorator");
 Object.defineProperty(exports, "BranchDecorator", { enumerable: true, get: function () { return __importDefault(BranchDecorator_1).default; } });
 var AttributesList_1 = require("./attributes/editMode/AttributesList");

package/cjs/components/workflow/cards/GenericWorkflowTaskCard/GenericWorkflowTaskCard.js

@@ -61,7 +61,7 @@ var GenericWorkflowTaskCard = function (_a) {
                 react_1.default.createElement(LineDecorator_1.default, { plain: true, first: true, transparent: !isExpanded },
                     react_1.default.createElement("div", { className: styles.mainInfo },
                         react_1.default.createElement("div", { className: styles.title },
-                            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.caption, styles.flex) }, processDefinitionDisplayName),
+                            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.caption, styles.flex) }, ui_i18n_1.default.text(processDefinitionDisplayName)),
                             react_1.default.createElement(Flag_1.default, { className: styles.flag }),
                             react_1.default.createElement(Tooltip_1.default, { title: ui_i18n_1.default.text('Due date') },
                                 react_1.default.createElement("span", { className: styles.date }, ui_i18n_1.default.date(dueDate, 'L'))),

package/cjs/contexts/FeaturesContext/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type Features = {
+    showDescription?: boolean;
+};
+export declare const FeaturesContext: React.Context<Features>;
+export {};

package/cjs/contexts/FeaturesContext/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeaturesContext = void 0;
+var react_1 = __importDefault(require("react"));
+exports.FeaturesContext = react_1.default.createContext({});
+exports.FeaturesContext.displayName = 'FeaturesContext';

package/cjs/contexts/index.d.ts

@@ -25,3 +25,4 @@ export { SearchValueContext } from './SearchValueContext';
 export { ScrollToErrorContext, ScrollToErrorProvider } from './ScrollToErrorContext';
 export { UrlGeneratorsContext } from './UrlGeneratorsContext';
 export { LabelsContext } from './LabelsContext';
+export { FeaturesContext } from './FeaturesContext';

package/cjs/contexts/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LabelsContext = exports.UrlGeneratorsContext = exports.ScrollToErrorProvider = exports.ScrollToErrorContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.PivotingAttributeContext = exports.UsersContext = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.ViewIdContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = void 0;
+exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.ScrollToErrorProvider = exports.ScrollToErrorContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.PivotingAttributeContext = exports.UsersContext = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.ViewIdContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = void 0;
 var AsyncMountContext_1 = require("./AsyncMountContext");
 Object.defineProperty(exports, "AsyncMountContext", { enumerable: true, get: function () { return AsyncMountContext_1.AsyncMountContext; } });
 var HistoryAppearanceContext_1 = require("./HistoryAppearanceContext");
@@ -64,3 +64,5 @@ var UrlGeneratorsContext_1 = require("./UrlGeneratorsContext");
 Object.defineProperty(exports, "UrlGeneratorsContext", { enumerable: true, get: function () { return UrlGeneratorsContext_1.UrlGeneratorsContext; } });
 var LabelsContext_1 = require("./LabelsContext");
 Object.defineProperty(exports, "LabelsContext", { enumerable: true, get: function () { return LabelsContext_1.LabelsContext; } });
+var FeaturesContext_1 = require("./FeaturesContext");
+Object.defineProperty(exports, "FeaturesContext", { enumerable: true, get: function () { return FeaturesContext_1.FeaturesContext; } });

package/cjs/icons/Description.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgDescription: React.FC<React.SVGProps<SVGSVGElement>>;
+export default SvgDescription;

package/cjs/icons/Description.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var SvgDescription = function (props) {
+    return (react_1.default.createElement("svg", __assign({ width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        react_1.default.createElement("path", { d: "M5.417 9.5h1.166V8.333H5.417V9.5zM6 .167A5.835 5.835 0 00.167 6 5.835 5.835 0 006 11.833 5.835 5.835 0 0011.833 6 5.835 5.835 0 006 .167zm0 10.5A4.673 4.673 0 011.333 6 4.673 4.673 0 016 1.333 4.673 4.673 0 0110.667 6 4.673 4.673 0 016 10.667zM6 2.5a2.333 2.333 0 00-2.333 2.333h1.166A1.17 1.17 0 016 3.667a1.17 1.17 0 011.167 1.166c0 1.167-1.75 1.021-1.75 2.917h1.166c0-1.313 1.75-1.458 1.75-2.917A2.333 2.333 0 006 2.5z", fill: "#000", fillOpacity: 0.54 })));
+};
+exports.default = SvgDescription;

package/cjs/icons/index.d.ts

@@ -11,6 +11,7 @@ export { default as DcrTaskIcon } from './DcrTaskIcon';
 export { default as DefaultImage } from './DefaultImage';
 export { default as DefaultTaskIcon } from './DefaultTaskIcon';
 export { default as DeleteRequestTaskIcon } from './DeleteRequestTaskIcon';
+export { default as Description } from './Description';
 export { default as Details } from './Details';
 export { default as Download } from './Download';
 export { default as Draw } from './Draw';
@@ -22,20 +23,22 @@ export { default as Ignored } from './Ignored';
 export { default as IgnoredOutlined } from './IgnoredOutlined';
 export { default as LogIn } from './LogIn';
 export { default as LogOut } from './LogOut';
-export { default as MlMatch } from './MlMatch';
 export { default as Merge } from './Merge';
 export { default as MergeDark } from './MergeDark';
+export { default as MlMatch } from './MlMatch';
+export { default as NegativeRuleIcon } from './NegativeRuleIcon';
+export { default as NegativeRuleTooltipIcon } from './NegativeRuleTooltipIcon';
 export { default as NestedAttribute } from './NestedAttribute';
 export { default as NoData } from './NoData';
 export { default as NoDataSearch } from './NoDataSearch';
 export { default as NoMatches } from './NoMatches';
 export { default as NotMatchDark } from './NotMatchDark';
 export { default as NotMatchRule } from './NotMatchRule';
-export { default as PmIcon } from './PmIcon';
-export { default as PmTaskIcon } from './PmTaskIcon';
 export { default as Pin } from './Pin';
 export { default as PinOutlined } from './PinOutlined';
 export { default as PivotingIcon } from './PivotingIcon';
+export { default as PmIcon } from './PmIcon';
+export { default as PmTaskIcon } from './PmTaskIcon';
 export { default as Polygon } from './Polygon';
 export { default as PotentialMatch } from './PotentialMatch';
 export { default as Profile } from './Profile';

package/cjs/icons/index.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = exports.SimpleAttribute = exports.SelectAttributes = exports.Search = exports.ResizeIconInline = exports.Remove = exports.ReferenceAttribute = exports.Recommended = exports.Radius = exports.Profile = exports.PotentialMatch = exports.Polygon = exports.PivotingIcon = exports.PinOutlined = exports.Pin = exports.PmTaskIcon = exports.PmIcon = exports.NotMatchRule = exports.NotMatchDark = exports.NoMatches = exports.NoDataSearch = exports.NoData = exports.NestedAttribute = exports.MergeDark = exports.Merge = exports.MlMatch = exports.LogOut = exports.LogIn = exports.IgnoredOutlined = exports.Ignored = exports.Filter = exports.Error = exports.EmptySearchResults = exports.Duplicate = exports.Draw = exports.Download = exports.Details = exports.DeleteRequestTaskIcon = exports.DefaultTaskIcon = exports.DefaultImage = exports.DcrTaskIcon = exports.Create = exports.Copy = exports.CommentBubble = exports.Comment = exports.CollaborationIcon = exports.Calendar = exports.AttributesList = exports.AddComment = exports.Add = void 0;
-exports.UploadIcon = exports.UnMerge = void 0;
+exports.Search = exports.ResizeIconInline = exports.Remove = exports.ReferenceAttribute = exports.Recommended = exports.Radius = exports.Profile = exports.PotentialMatch = exports.Polygon = exports.PmTaskIcon = exports.PmIcon = exports.PivotingIcon = exports.PinOutlined = exports.Pin = exports.NotMatchRule = exports.NotMatchDark = exports.NoMatches = exports.NoDataSearch = exports.NoData = exports.NestedAttribute = exports.NegativeRuleTooltipIcon = exports.NegativeRuleIcon = exports.MlMatch = exports.MergeDark = exports.Merge = exports.LogOut = exports.LogIn = exports.IgnoredOutlined = exports.Ignored = exports.Filter = exports.Error = exports.EmptySearchResults = exports.Duplicate = exports.Draw = exports.Download = exports.Details = exports.Description = exports.DeleteRequestTaskIcon = exports.DefaultTaskIcon = exports.DefaultImage = exports.DcrTaskIcon = exports.Create = exports.Copy = exports.CommentBubble = exports.Comment = exports.CollaborationIcon = exports.Calendar = exports.AttributesList = exports.AddComment = exports.Add = void 0;
+exports.UploadIcon = exports.UnMerge = exports.Table = exports.SimpleAttribute = exports.SelectAttributes = void 0;
 var Add_1 = require("./Add");
 Object.defineProperty(exports, "Add", { enumerable: true, get: function () { return __importDefault(Add_1).default; } });
 var AddComment_1 = require("./AddComment");
@@ -31,6 +31,8 @@ var DefaultTaskIcon_1 = require("./DefaultTaskIcon");
 Object.defineProperty(exports, "DefaultTaskIcon", { enumerable: true, get: function () { return __importDefault(DefaultTaskIcon_1).default; } });
 var DeleteRequestTaskIcon_1 = require("./DeleteRequestTaskIcon");
 Object.defineProperty(exports, "DeleteRequestTaskIcon", { enumerable: true, get: function () { return __importDefault(DeleteRequestTaskIcon_1).default; } });
+var Description_1 = require("./Description");
+Object.defineProperty(exports, "Description", { enumerable: true, get: function () { return __importDefault(Description_1).default; } });
 var Details_1 = require("./Details");
 Object.defineProperty(exports, "Details", { enumerable: true, get: function () { return __importDefault(Details_1).default; } });
 var Download_1 = require("./Download");
@@ -53,12 +55,16 @@ var LogIn_1 = require("./LogIn");
 Object.defineProperty(exports, "LogIn", { enumerable: true, get: function () { return __importDefault(LogIn_1).default; } });
 var LogOut_1 = require("./LogOut");
 Object.defineProperty(exports, "LogOut", { enumerable: true, get: function () { return __importDefault(LogOut_1).default; } });
-var MlMatch_1 = require("./MlMatch");
-Object.defineProperty(exports, "MlMatch", { enumerable: true, get: function () { return __importDefault(MlMatch_1).default; } });
 var Merge_1 = require("./Merge");
 Object.defineProperty(exports, "Merge", { enumerable: true, get: function () { return __importDefault(Merge_1).default; } });
 var MergeDark_1 = require("./MergeDark");
 Object.defineProperty(exports, "MergeDark", { enumerable: true, get: function () { return __importDefault(MergeDark_1).default; } });
+var MlMatch_1 = require("./MlMatch");
+Object.defineProperty(exports, "MlMatch", { enumerable: true, get: function () { return __importDefault(MlMatch_1).default; } });
+var NegativeRuleIcon_1 = require("./NegativeRuleIcon");
+Object.defineProperty(exports, "NegativeRuleIcon", { enumerable: true, get: function () { return __importDefault(NegativeRuleIcon_1).default; } });
+var NegativeRuleTooltipIcon_1 = require("./NegativeRuleTooltipIcon");
+Object.defineProperty(exports, "NegativeRuleTooltipIcon", { enumerable: true, get: function () { return __importDefault(NegativeRuleTooltipIcon_1).default; } });
 var NestedAttribute_1 = require("./NestedAttribute");
 Object.defineProperty(exports, "NestedAttribute", { enumerable: true, get: function () { return __importDefault(NestedAttribute_1).default; } });
 var NoData_1 = require("./NoData");
@@ -71,16 +77,16 @@ var NotMatchDark_1 = require("./NotMatchDark");
 Object.defineProperty(exports, "NotMatchDark", { enumerable: true, get: function () { return __importDefault(NotMatchDark_1).default; } });
 var NotMatchRule_1 = require("./NotMatchRule");
 Object.defineProperty(exports, "NotMatchRule", { enumerable: true, get: function () { return __importDefault(NotMatchRule_1).default; } });
-var PmIcon_1 = require("./PmIcon");
-Object.defineProperty(exports, "PmIcon", { enumerable: true, get: function () { return __importDefault(PmIcon_1).default; } });
-var PmTaskIcon_1 = require("./PmTaskIcon");
-Object.defineProperty(exports, "PmTaskIcon", { enumerable: true, get: function () { return __importDefault(PmTaskIcon_1).default; } });
 var Pin_1 = require("./Pin");
 Object.defineProperty(exports, "Pin", { enumerable: true, get: function () { return __importDefault(Pin_1).default; } });
 var PinOutlined_1 = require("./PinOutlined");
 Object.defineProperty(exports, "PinOutlined", { enumerable: true, get: function () { return __importDefault(PinOutlined_1).default; } });
 var PivotingIcon_1 = require("./PivotingIcon");
 Object.defineProperty(exports, "PivotingIcon", { enumerable: true, get: function () { return __importDefault(PivotingIcon_1).default; } });
+var PmIcon_1 = require("./PmIcon");
+Object.defineProperty(exports, "PmIcon", { enumerable: true, get: function () { return __importDefault(PmIcon_1).default; } });
+var PmTaskIcon_1 = require("./PmTaskIcon");
+Object.defineProperty(exports, "PmTaskIcon", { enumerable: true, get: function () { return __importDefault(PmTaskIcon_1).default; } });
 var Polygon_1 = require("./Polygon");
 Object.defineProperty(exports, "Polygon", { enumerable: true, get: function () { return __importDefault(Polygon_1).default; } });
 var PotentialMatch_1 = require("./PotentialMatch");

package/esm/components/BasicTableView/BasicTable/helpers/dataHelpers.js

@@ -83,10 +83,11 @@ var getTableRowsData = function (rowValues, columnsData, renderRowCell, getRowCe
 };
 var getTableHeadData = function (columnsData, filters, onFilter) {
     return columnsData.map(function (_a) {
-        var id = _a.id, label = _a.label, sortable = _a.sortable, _b = _a.filterable, filterable = _b === void 0 ? true : _b, resizable = _a.resizable, draggable = _a.draggable, _c = _a.autoResize, autoResize = _c === void 0 ? true : _c, initialWidth = _a.initialWidth, minWidth = _a.minWidth, dataTypeDefinition = _a.dataTypeDefinition, filterOptions = _a.filterOptions, _d = _a.headCellRenderer, headCellRenderer = _d === void 0 ? withFilterAtBottom(DefaultHeadCellRenderer) : _d;
+        var id = _a.id, label = _a.label, description = _a.description, sortable = _a.sortable, _b = _a.filterable, filterable = _b === void 0 ? true : _b, resizable = _a.resizable, draggable = _a.draggable, _c = _a.autoResize, autoResize = _c === void 0 ? true : _c, initialWidth = _a.initialWidth, minWidth = _a.minWidth, dataTypeDefinition = _a.dataTypeDefinition, filterOptions = _a.filterOptions, _d = _a.headCellRenderer, headCellRenderer = _d === void 0 ? withFilterAtBottom(DefaultHeadCellRenderer) : _d;
         return ({
             id: id,
             label: label,
+            description: description,
             sortable: sortable,
             resizable: resizable,
             draggable: draggable,

package/esm/components/BasicViewHeader/BasicViewHeader.js

@@ -21,14 +21,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
+import i18n from 'ui-i18n';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import { useStyles } from './styles';
 var BasicViewHeader = function (_a) {
-    var title = _a.title, _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.classes, classes = _c === void 0 ? {} : _c, otherProps = __rest(_a, ["title", "children", "classes"]);
+    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.classes, classes = _d === void 0 ? {} : _d, otherProps = __rest(_a, ["title", "children", "classes"]);
     var styles = useStyles();
     return (React.createElement(Toolbar, __assign({ className: classes.root, classes: { root: styles.toolbar } }, otherProps),
-        React.createElement(Typography, { className: classes.title, classes: { root: styles.title }, variant: "h6" }, title),
+        React.createElement(Typography, { className: classes.title, classes: { root: styles.title }, variant: "h6" }, i18n.text(title)),
         children));
 };
 export default BasicViewHeader;

package/esm/components/DateIntervalSelector/DateIntervalSelector.js

@@ -1,19 +1,12 @@
 import React from 'react';
 import { pipe } from 'ramda';
-import i18n from 'ui-i18n';
+import { getIntervalUnitLabel } from '@reltio/mdm-sdk';
 import capitalize from '@material-ui/core/utils/capitalize';
 import TextField from '@material-ui/core/TextField';
 import SimpleDropDownSelector from '../SimpleDropDownSelector/SimpleDropDownSelector';
 import { getValue } from '../../core/utils';
 import { useStyles } from './styles';
-var periods = [
-    i18n.text('minutes'),
-    i18n.text('hours'),
-    i18n.text('days'),
-    i18n.text('weeks'),
-    i18n.text('months'),
-    i18n.text('years')
-];
+var periods = ['minutes', 'hours', 'days', 'weeks', 'months', 'years'];
 var DateIntervalSelector = function (_a) {
     var _b = _a.interval, value = _b[0], unit = _b[1], onChange = _a.onChange, onFocus = _a.onFocus;
     var styles = useStyles();
@@ -26,9 +19,9 @@ var DateIntervalSelector = function (_a) {
     var onUnitChange = pipe(getIntervalFromUnit, onChange);
     return (React.createElement("div", { className: styles.root },
         React.createElement(TextField, { type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: { classes: { root: styles.input } }, className: styles.inputNumber }),
-        React.createElement(SimpleDropDownSelector, { label: '', placeholder: capitalize(unit), className: styles.inputUnit, value: { value: unit, label: capitalize(unit) }, options: periods.map(function (value) { return ({
+        React.createElement(SimpleDropDownSelector, { label: '', placeholder: capitalize(unit), className: styles.inputUnit, value: { value: unit, label: capitalize(getIntervalUnitLabel(unit)) }, options: periods.map(function (value) { return ({
                 value: value,
-                label: capitalize(value)
+                label: capitalize(getIntervalUnitLabel(value))
             }); }), onChange: onUnitChange, TextFieldProps: {
                 inputProps: { onFocus: onFocus },
                 InputProps: { classes: { root: styles.input } }

package/esm/components/activityLog/ActivityLogFilter/helpers.js

@@ -1,6 +1,6 @@
 import i18n from 'ui-i18n';
 import { curry, join, identity, isNil, map, pipe, reject, sortBy, defaultTo, pluck } from 'ramda';
-import { DataTypes, formatDataTypeValue, DateRangeTypes } from '@reltio/mdm-sdk';
+import { DataTypes, formatDataTypeValue, DateRangeTypes, getIntervalUnitLabel } from '@reltio/mdm-sdk';
 import { getActivityLabel } from '../utils/activities';
 export var getFilterLabel = function (filters) {
     var getLabel = curry(function (unit, pluralUnit, values) {
@@ -19,9 +19,15 @@ export var getFilterLabel = function (filters) {
         };
         switch (date.type) {
             case DateRangeTypes.WITHIN:
-                return i18n.text('Within ${amount} ${unit}', { amount: date.period[0], unit: date.period[1] });
+                return i18n.text('Within ${amount} ${unit}', {
+                    amount: date.period[0],
+                    unit: getIntervalUnitLabel(date.period[1])
+                });
             case DateRangeTypes.AGO:
-                return i18n.text('More than ${amount} ${unit} ago', { amount: date.period[0], unit: date.period[1] });
+                return i18n.text('More than ${amount} ${unit} ago', {
+                    amount: date.period[0],
+                    unit: getIntervalUnitLabel(date.period[1])
+                });
             case DateRangeTypes.BETWEEN:
                 return i18n.text('${startDate} to ${endDate}', {
                     startDate: formatDateValue(date.period[0]),

package/esm/components/attributes/DescriptionIcon/DescriptionIcon.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export declare const ChipWithTooltip: React.ForwardRefExoticComponent<import("prop-types").InferPropsInner<Pick<{
+    tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+    tooltipPlacement: import("prop-types").Requireable<string>;
+    showForDisabled: import("prop-types").Requireable<boolean>;
+}, never>> & Partial<import("prop-types").InferPropsInner<Pick<{
+    tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+    tooltipPlacement: import("prop-types").Requireable<string>;
+    showForDisabled: import("prop-types").Requireable<boolean>;
+}, "tooltipTitle" | "tooltipPlacement" | "showForDisabled">>> & {
+    avatar?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    children?: null;
+    clickable?: boolean;
+    color?: "default" | "primary" | "secondary";
+    deleteIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    disabled?: boolean;
+    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    label?: React.ReactNode;
+    onDelete?: (event: any) => void;
+    size?: "medium" | "small";
+    variant?: "default" | "outlined";
+} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core/Chip").ChipTypeMap<{}, "div">> & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, "translate" | "hidden" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key">>;
+declare type Props = {
+    className?: string;
+    description?: string;
+    showDescription?: boolean;
+};
+declare const DescriptionIcon: ({ className, description }: Props) => JSX.Element;
+export default DescriptionIcon;

package/esm/components/attributes/DescriptionIcon/DescriptionIcon.js

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import Chip from '@material-ui/core/Chip';
+import { FeaturesContext } from '../../../contexts';
+import { withTooltip } from '../../../HOCs';
+import Description from '../../../icons/Description';
+import { useStyles } from './styles';
+export var ChipWithTooltip = withTooltip(Chip);
+var DescriptionIcon = function (_a) {
+    var className = _a.className, description = _a.description;
+    var showDescription = useContext(FeaturesContext).showDescription;
+    var styles = useStyles();
+    if (!description || !showDescription) {
+        return null;
+    }
+    return (React.createElement(ChipWithTooltip, { tooltipTitle: description, tooltipPlacement: "bottom", icon: React.createElement(Description, null), classes: {
+            root: classnames(styles.container, className),
+            label: styles.label,
+            icon: styles.icon
+        } }));
+};
+export default DescriptionIcon;

package/esm/components/attributes/DescriptionIcon/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./DescriptionIcon";

package/esm/components/attributes/DescriptionIcon/index.js

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

package/esm/components/attributes/DescriptionIcon/styles.d.ts

@@ -0,0 +1 @@
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "label" | "container">;

package/esm/components/attributes/DescriptionIcon/styles.js

@@ -0,0 +1,21 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
+    container: {
+        height: '15px',
+        backgroundColor: 'transparent',
+        '&:hover': {
+            backgroundColor: 'transparent'
+        }
+    },
+    label: {
+        paddingLeft: '4px',
+        paddingRight: '4px',
+        fontSize: '10px',
+        lineHeight: '11px'
+    },
+    icon: {
+        width: '12px',
+        height: '12px',
+        marginRight: 0
+    }
+}); });

package/esm/components/attributes/OvIcon/OvIcon.js

@@ -24,7 +24,7 @@ var OvIcon = function (_a) {
     var tooltipTitle = nonOvValues.length
         ? nonOvValues.map(function (value, i) { return (React.createElement("div", { key: i }, isComplexAttribute(attributeType) ? (getLabel(value.label)) : (React.createElement(DataTypeValue, { value: getAttributeValue(value), dataTypeDefinition: getAttrDataTypeDefinition(attributeType), rich: false })))); })
         : null;
-    return (React.createElement(ChipWithTooltip, { tooltipTitle: tooltipTitle, tooltipPlacement: "top", label: "+ ".concat(nonOvTotal), variant: "outlined", onClick: onClick, classes: {
+    return (React.createElement(ChipWithTooltip, { tooltipTitle: tooltipTitle, tooltipPlacement: "bottom", label: "+ ".concat(nonOvTotal), variant: "outlined", onClick: onClick, classes: {
             root: classnames(styles.container, className),
             label: styles.label
         } }));

package/esm/components/attributes/editMode/AttributesPager/AttributeRenderer.js

@@ -15,13 +15,14 @@ import { withContext } from '../../../../HOCs';
 import { PinnedAttributesContext } from '../contexts/PinnedAttributesContext';
 import { useScrollToAttributeError } from '../../../../hooks';
 import { ScrollToErrorContext } from '../../../../contexts';
+import DescriptionIcon from '../../DescriptionIcon/DescriptionIcon';
 import { useStyles } from './styles';
 var AttributeRenderer = function (_a) {
     var max = _a.max, values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, drawLines = _a.drawLines, showEmptyEditors = _a.showEmptyEditors, errorMessage = _a.errorMessage, errors = _a.errors, paging = _a.paging, crosswalks = _a.crosswalks, showNonOv = _a.showNonOv, nonVisibleValues = _a.nonVisibleValues, highlightedError = _a.highlightedError, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues;
     var styles = useStyles();
     var _b = useState(max), visibleValuesCount = _b[0], setVisibleValuesCount = _b[1];
     var _c = useState(false), hadDeletions = _c[0], setHadDeletions = _c[1];
-    var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality, name = attributeType.name, attributeTypeUri = attributeType.uri;
+    var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality, name = attributeType.name, attributeTypeUri = attributeType.uri, description = attributeType.description;
     var isEditableMode = checkIsEditableMode(mode);
     var _d = useScrollToAttributeError({ highlightedError: highlightedError }), ref = _d.ref, errorClassName = _d.errorClassName;
     var pinnedAttributes = useContext(PinnedAttributesContext);
@@ -82,6 +83,7 @@ var AttributeRenderer = function (_a) {
         React.createElement("div", { ref: ref, className: classNames(styles.wrapper, errorClassName) },
             React.createElement("div", { className: styles.titleWrapper },
                 React.createElement(Title, { label: label, isRequired: isRequired, className: styles.title, "data-reltio-id": "reltio-attribute-label" }),
+                React.createElement(DescriptionIcon, { description: description, className: styles.description }),
                 React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues })),
             isEditableMode && React.createElement(Cardinality, { cardinality: cardinality }),
             isEditableMode && React.createElement(ErrorMessage, { message: errorMessage, className: styles.typeError }),

package/esm/components/attributes/editMode/AttributesPager/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"caption" | "title" | "link" | "wrapper" | "ovIcon" | "svg-icon__root" | "attributesWrapper" | "typeError" | "titleWrapper">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"caption" | "title" | "link" | "description" | "wrapper" | "ovIcon" | "svg-icon__root" | "attributesWrapper" | "typeError" | "titleWrapper">;

package/esm/components/attributes/editMode/AttributesPager/styles.js

@@ -10,6 +10,9 @@ export var useStyles = makeStyles(function (theme) { return ({
         alignItems: 'flex-start',
         position: 'relative'
     },
+    description: {
+        marginRight: '-9px'
+    },
     attributesWrapper: {
         width: '100%',
         marginBottom: '10px'

package/esm/components/attributes/readMode/AttributesPager/MultiLineRenderer.js

@@ -7,6 +7,7 @@ import Title from '../../../Title/Title';
 import ShowMore from '../../pagersCommon/ShowMore';
 import ShowLess from '../../pagersCommon/ShowLess';
 import OvIcon from '../../OvIcon';
+import DescriptionIcon from '../../DescriptionIcon';
 var MultiLineRenderer = function (_a) {
     var max = _a.max, values = _a.values, nonVisibleValues = _a.nonVisibleValues, totalVisibleValues = _a.totalVisibleValues, attributeType = _a.attributeType, parentUri = _a.parentUri, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, showNonOv = _a.showNonOv, totalNonVisibleValues = _a.totalNonVisibleValues;
     var styles = useMultiLineStyles();
@@ -14,7 +15,7 @@ var MultiLineRenderer = function (_a) {
     var hasPaging = max < totalVisibleValues;
     var showMore = hasPaging && visibleValuesCount < totalVisibleValues;
     var showLess = hasPaging && visibleValuesCount >= totalVisibleValues;
-    var label = attributeType.label;
+    var label = attributeType.label, description = attributeType.description;
     var onShowMore = function () {
         if (values.length < totalVisibleValues) {
             requestNextPageOfAttributeValues({
@@ -35,6 +36,7 @@ var MultiLineRenderer = function (_a) {
     return (React.createElement("div", { className: styles.wrapper },
         React.createElement("div", { className: styles.titleRow },
             React.createElement(Title, { label: label, className: classnames(styles.title, titleClassName), "data-reltio-id": "reltio-attribute-label" }),
+            React.createElement(DescriptionIcon, { description: description }),
             React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues })),
         React.createElement("div", { className: styles.attributes }, shownValues.map(function (value) { return (React.createElement(Attribute, { key: value.uri, className: classnames(styles.attribute, contentClassName), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv })); })),
         showMore && (React.createElement(ShowMore, { moreNumber: min(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),

package/esm/components/attributes/readMode/AttributesPager/OneLineRenderer.js

@@ -5,18 +5,20 @@ import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../../../../constants';
 import CommentsContainer from '../../../CommentsContainer/CommentsContainer';
 import Title from '../../../Title/Title';
 import OvIcon from '../../OvIcon';
+import DescriptionIcon from '../../DescriptionIcon/DescriptionIcon';
 import Attribute from '../AttributesFactory/Attribute';
 import { useOneLineStyles } from './styles';
 var OneLineRenderer = function (_a) {
     var value = _a.value, nonVisibleValues = _a.nonVisibleValues, attributeType = _a.attributeType, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, showNonOv = _a.showNonOv, totalNonVisibleValues = _a.totalNonVisibleValues;
     var styles = useOneLineStyles();
-    var label = attributeType.label;
+    var label = attributeType.label, description = attributeType.description;
     var objectType = isRelationAttrType(attributeType)
         ? CollaborationObjectTypes.RELATION_ATTRIBUTE
         : CollaborationObjectTypes.ENTITY_ATTRIBUTE;
     return (React.createElement("div", { className: classnames(styles.collaborationWrapper, COMMENTS_CONTAINER_VISIBILITY_AREA) },
         React.createElement("div", { className: classnames(styles.titleRow, styles.wrapper) },
             React.createElement(Title, { label: label, className: classnames(styles.title, titleClassName), "data-reltio-id": "reltio-attribute-label" }),
+            React.createElement(DescriptionIcon, { description: description, className: styles.descriptionIcon }),
             React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
             React.createElement(Attribute, { className: classnames(styles.attribute, contentClassName), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, inlined: true })),
         React.createElement(CommentsContainer, { uri: value.uri, relatedObjectUris: createRelatedObjectUris(objectType, {

package/esm/components/attributes/readMode/AttributesPager/styles.d.ts

@@ -1,3 +1,3 @@
 export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"paddingWrapper" | "paddingWrapperWithLines">;
-export const useOneLineStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "attribute" | "wrapper" | "collaborationWrapper" | "titleIcon" | "titleRow" | "ovIcon">;
-export const useMultiLineStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "attributes" | "attribute" | "wrapper" | "titleRow" | "ovIcon">;
+export const useOneLineStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "attribute" | "wrapper" | "collaborationWrapper" | "titleIcon" | "titleRow" | "ovIcon" | "descriptionIcon">;
+export const useMultiLineStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "attributes" | "attribute" | "wrapper" | "titleRow" | "ovIcon" | "descriptionIcon">;

package/esm/components/attributes/readMode/AttributesPager/styles.js

@@ -27,6 +27,11 @@ var commonStyles = {
         marginRight: '-3px',
         marginTop: '-1px',
         textIndent: 0
+    },
+    descriptionIcon: {
+        marginTop: '-1px',
+        textIndent: 0,
+        marginRight: '-10px'
     }
 };
 export var useStyles = makeStyles({

package/esm/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './activityLog';
 export { default as AttributeListItem } from './AttributeListItem/AttributeListItem';
 export { default as AttributesView } from './attributes/AttributesView';
+export { default as DescriptionIcon } from './attributes/DescriptionIcon';
 export { default as BranchDecorator } from './attributes/BranchDecorator/BranchDecorator';
 export { default as AttributesList } from './attributes/editMode/AttributesList';
 export { default as EntityCreator } from './attributes/editMode/EntityCreator';

package/esm/components/index.js

@@ -1,6 +1,7 @@
 export * from './activityLog';
 export { default as AttributeListItem } from './AttributeListItem/AttributeListItem';
 export { default as AttributesView } from './attributes/AttributesView';
+export { default as DescriptionIcon } from './attributes/DescriptionIcon';
 export { default as BranchDecorator } from './attributes/BranchDecorator/BranchDecorator';
 export { default as AttributesList } from './attributes/editMode/AttributesList';
 export { default as EntityCreator } from './attributes/editMode/EntityCreator';

package/esm/components/workflow/cards/GenericWorkflowTaskCard/GenericWorkflowTaskCard.js

@@ -33,7 +33,7 @@ var GenericWorkflowTaskCard = function (_a) {
                 React.createElement(LineDecorator, { plain: true, first: true, transparent: !isExpanded },
                     React.createElement("div", { className: styles.mainInfo },
                         React.createElement("div", { className: styles.title },
-                            React.createElement("div", { className: classnames(styles.caption, styles.flex) }, processDefinitionDisplayName),
+                            React.createElement("div", { className: classnames(styles.caption, styles.flex) }, i18n.text(processDefinitionDisplayName)),
                             React.createElement(FlagIcon, { className: styles.flag }),
                             React.createElement(Tooltip, { title: i18n.text('Due date') },
                                 React.createElement("span", { className: styles.date }, i18n.date(dueDate, 'L'))),

package/esm/contexts/FeaturesContext/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type Features = {
+    showDescription?: boolean;
+};
+export declare const FeaturesContext: React.Context<Features>;
+export {};

package/esm/contexts/FeaturesContext/index.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export var FeaturesContext = React.createContext({});
+FeaturesContext.displayName = 'FeaturesContext';

package/esm/contexts/index.d.ts

@@ -25,3 +25,4 @@ export { SearchValueContext } from './SearchValueContext';
 export { ScrollToErrorContext, ScrollToErrorProvider } from './ScrollToErrorContext';
 export { UrlGeneratorsContext } from './UrlGeneratorsContext';
 export { LabelsContext } from './LabelsContext';
+export { FeaturesContext } from './FeaturesContext';

package/esm/contexts/index.js

@@ -25,3 +25,4 @@ export { SearchValueContext } from './SearchValueContext';
 export { ScrollToErrorContext, ScrollToErrorProvider } from './ScrollToErrorContext';
 export { UrlGeneratorsContext } from './UrlGeneratorsContext';
 export { LabelsContext } from './LabelsContext';
+export { FeaturesContext } from './FeaturesContext';

package/esm/icons/Description.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgDescription: React.FC<React.SVGProps<SVGSVGElement>>;
+export default SvgDescription;

package/esm/icons/Description.js

@@ -0,0 +1,17 @@
+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);
+};
+import React from 'react';
+var SvgDescription = function (props) {
+    return (React.createElement("svg", __assign({ width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { d: "M5.417 9.5h1.166V8.333H5.417V9.5zM6 .167A5.835 5.835 0 00.167 6 5.835 5.835 0 006 11.833 5.835 5.835 0 0011.833 6 5.835 5.835 0 006 .167zm0 10.5A4.673 4.673 0 011.333 6 4.673 4.673 0 016 1.333 4.673 4.673 0 0110.667 6 4.673 4.673 0 016 10.667zM6 2.5a2.333 2.333 0 00-2.333 2.333h1.166A1.17 1.17 0 016 3.667a1.17 1.17 0 011.167 1.166c0 1.167-1.75 1.021-1.75 2.917h1.166c0-1.313 1.75-1.458 1.75-2.917A2.333 2.333 0 006 2.5z", fill: "#000", fillOpacity: 0.54 })));
+};
+export default SvgDescription;

package/esm/icons/index.d.ts

@@ -11,6 +11,7 @@ export { default as DcrTaskIcon } from './DcrTaskIcon';
 export { default as DefaultImage } from './DefaultImage';
 export { default as DefaultTaskIcon } from './DefaultTaskIcon';
 export { default as DeleteRequestTaskIcon } from './DeleteRequestTaskIcon';
+export { default as Description } from './Description';
 export { default as Details } from './Details';
 export { default as Download } from './Download';
 export { default as Draw } from './Draw';
@@ -22,20 +23,22 @@ export { default as Ignored } from './Ignored';
 export { default as IgnoredOutlined } from './IgnoredOutlined';
 export { default as LogIn } from './LogIn';
 export { default as LogOut } from './LogOut';
-export { default as MlMatch } from './MlMatch';
 export { default as Merge } from './Merge';
 export { default as MergeDark } from './MergeDark';
+export { default as MlMatch } from './MlMatch';
+export { default as NegativeRuleIcon } from './NegativeRuleIcon';
+export { default as NegativeRuleTooltipIcon } from './NegativeRuleTooltipIcon';
 export { default as NestedAttribute } from './NestedAttribute';
 export { default as NoData } from './NoData';
 export { default as NoDataSearch } from './NoDataSearch';
 export { default as NoMatches } from './NoMatches';
 export { default as NotMatchDark } from './NotMatchDark';
 export { default as NotMatchRule } from './NotMatchRule';
-export { default as PmIcon } from './PmIcon';
-export { default as PmTaskIcon } from './PmTaskIcon';
 export { default as Pin } from './Pin';
 export { default as PinOutlined } from './PinOutlined';
 export { default as PivotingIcon } from './PivotingIcon';
+export { default as PmIcon } from './PmIcon';
+export { default as PmTaskIcon } from './PmTaskIcon';
 export { default as Polygon } from './Polygon';
 export { default as PotentialMatch } from './PotentialMatch';
 export { default as Profile } from './Profile';

package/esm/icons/index.js

@@ -11,6 +11,7 @@ export { default as DcrTaskIcon } from './DcrTaskIcon';
 export { default as DefaultImage } from './DefaultImage';
 export { default as DefaultTaskIcon } from './DefaultTaskIcon';
 export { default as DeleteRequestTaskIcon } from './DeleteRequestTaskIcon';
+export { default as Description } from './Description';
 export { default as Details } from './Details';
 export { default as Download } from './Download';
 export { default as Draw } from './Draw';
@@ -22,20 +23,22 @@ export { default as Ignored } from './Ignored';
 export { default as IgnoredOutlined } from './IgnoredOutlined';
 export { default as LogIn } from './LogIn';
 export { default as LogOut } from './LogOut';
-export { default as MlMatch } from './MlMatch';
 export { default as Merge } from './Merge';
 export { default as MergeDark } from './MergeDark';
+export { default as MlMatch } from './MlMatch';
+export { default as NegativeRuleIcon } from './NegativeRuleIcon';
+export { default as NegativeRuleTooltipIcon } from './NegativeRuleTooltipIcon';
 export { default as NestedAttribute } from './NestedAttribute';
 export { default as NoData } from './NoData';
 export { default as NoDataSearch } from './NoDataSearch';
 export { default as NoMatches } from './NoMatches';
 export { default as NotMatchDark } from './NotMatchDark';
 export { default as NotMatchRule } from './NotMatchRule';
-export { default as PmIcon } from './PmIcon';
-export { default as PmTaskIcon } from './PmTaskIcon';
 export { default as Pin } from './Pin';
 export { default as PinOutlined } from './PinOutlined';
 export { default as PivotingIcon } from './PivotingIcon';
+export { default as PmIcon } from './PmIcon';
+export { default as PmTaskIcon } from './PmTaskIcon';
 export { default as Polygon } from './Polygon';
 export { default as PotentialMatch } from './PotentialMatch';
 export { default as Profile } from './Profile';

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1433",
+  "version": "1.4.1435",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1433",
-    "@reltio/mdm-sdk": "^1.4.1433",
+    "@reltio/mdm-module": "^1.4.1435",
+    "@reltio/mdm-sdk": "^1.4.1435",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",