@reltio/components 1.4.1511 → 1.4.1515

package/esm/components/attributes/editMode/AttributesFactory/Attribute.js

@@ -1,6 +1,19 @@
-import EditModeAttributesFactory from './AttributesFactory';
-var Attribute = function (props) {
-    var attributeType = props.attributeType;
-    return EditModeAttributesFactory.build(attributeType, props);
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
+import React, { forwardRef } from 'react';
+import EditModeAttributesFactory from './AttributesFactory';
+var Attribute = forwardRef(function (props, ref) {
+    var className = props.className, otherProps = __rest(props, ["className"]);
+    return (React.createElement("div", { ref: ref, className: className }, EditModeAttributesFactory.build(props.attributeType, otherProps)));
+});
+Attribute.displayName = 'Attribute';
 export default Attribute;

package/esm/components/attributes/editMode/AttributesList/AttributesList.d.ts

@@ -1,41 +1,5 @@
-declare const _default: React.MemoExoticComponent<{
-    ({ parentAttributeType, attrTypes, entity, parentUri, showEmptyEditors, mode, crosswalks, drawLines, children, className, alwaysVisibleTypeUris, onAddAttributes, onChangeAttribute, onDeleteAttribute, additionalControlsRenderer, showNonOv }: {
-        parentAttributeType: any;
-        attrTypes: any;
-        entity: any;
-        parentUri: any;
-        showEmptyEditors: any;
-        mode: any;
-        crosswalks: any;
-        drawLines: any;
-        children: any;
-        className: any;
-        alwaysVisibleTypeUris?: string[];
-        onAddAttributes: any;
-        onChangeAttribute: any;
-        onDeleteAttribute: any;
-        additionalControlsRenderer: any;
-        showNonOv: any;
-    }): JSX.Element;
-    propTypes: {
-        parentAttributeType: PropTypes.Requireable<object>;
-        attrTypes: PropTypes.Requireable<any[]>;
-        entity: PropTypes.Requireable<object>;
-        parentUri: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        showEmptyEditors: PropTypes.Requireable<boolean>;
-        mode: PropTypes.Requireable<any>;
-        crosswalks: PropTypes.Requireable<any[]>;
-        drawLines: PropTypes.Requireable<boolean>;
-        showNonOv: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        alwaysVisibleTypeUris: PropTypes.Requireable<any[]>;
-        onAddAttributes: PropTypes.Requireable<(...args: any[]) => any>;
-        onChangeAttribute: PropTypes.Requireable<(...args: any[]) => any>;
-        onDeleteAttribute: PropTypes.Requireable<(...args: any[]) => any>;
-        additionalControlsRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-}>;
+declare const _default: React.ComponentType<{
+    [x: string]: unknown;
+}> | ((props: any) => JSX.Element);
 export default _default;
-import PropTypes from "prop-types";
 import React from "react";

package/esm/components/attributes/editMode/AttributesList/AttributesList.js

@@ -9,11 +9,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { memo, useCallback, useContext, useMemo, useState, useEffect } from 'react';
+import React, { useCallback, useContext, useMemo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'ui-i18n';
 import { getCreatableAttributeTypes, getAttributesListForEditMode, ModeType, getParentUri, checkCanCreateAttribute } from '@reltio/mdm-sdk';
-import { path } from 'ramda';
+import { last, path } from 'ramda';
 import AttributesPager from '../AttributesPager';
 import BranchDecorator from '../../BranchDecorator/BranchDecorator';
 import MoreAttributesButton from '../MoreAttributesButton';
@@ -22,8 +22,10 @@ import { splitPagersData } from '../../helpers/attributesView';
 import { getMoreAttrTypes } from './helpers';
 import { PinnedAttributesContext } from '../contexts/PinnedAttributesContext';
 import { HasDeletionsContext } from '../contexts/HasDeletionsContext';
+import { withContext } from '../../../../HOCs';
+import { ScrollType, ScrollToElementContext } from '../../../../contexts';
 var AttributesList = function (_a) {
-    var parentAttributeType = _a.parentAttributeType, attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.alwaysVisibleTypeUris, alwaysVisibleTypeUris = _b === void 0 ? ALWAYS_VISIBLE_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv;
+    var parentAttributeType = _a.parentAttributeType, attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.alwaysVisibleTypeUris, alwaysVisibleTypeUris = _b === void 0 ? ALWAYS_VISIBLE_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv, highlightAttribute = _a.highlightAttribute;
     var _c = entity.attributes, attributes = _c === void 0 ? {} : _c;
     var _d = useState({}), hasDeletionsMap = _d[0], setHasDeletionsMap = _d[1];
     var setHasDeletions = useCallback(function (attrTypeUri, value) {
@@ -46,6 +48,7 @@ var AttributesList = function (_a) {
             attributeType: attributeType,
             parentUri: attributeType === parentAttributeType ? getParentUri(parentUri) : parentUri
         }); }));
+        highlightAttribute(last(attributeTypes), ScrollType.NewAttribute);
     }, [onAddAttributes, parentUri, parentAttributeType]);
     var decoratorProps = {
         enabled: drawLines
@@ -78,6 +81,10 @@ AttributesList.propTypes = {
     onAddAttributes: PropTypes.func,
     onChangeAttribute: PropTypes.func,
     onDeleteAttribute: PropTypes.func,
-    additionalControlsRenderer: PropTypes.func
+    additionalControlsRenderer: PropTypes.func,
+    highlightAttribute: PropTypes.func
 };
-export default memo(AttributesList);
+export default withContext(ScrollToElementContext, function (contextValue) {
+    var highlightAttribute = (contextValue || {}).highlightAttribute;
+    return { highlightAttribute: highlightAttribute };
+}, AttributesList);

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

@@ -1,13 +1,15 @@
 import React from 'react';
 import { AttributeValue, NestedAttributeValue, ReferenceAttributeValue, SimpleAttributeValue } from '@reltio/mdm-sdk';
 import { AttributePagerProps } from './index';
-declare const _default: React.ComponentType<Required<Omit<AttributePagerProps, "values">> & {
+import { ScrollToElementContext } from '../../../../contexts';
+declare type Props = Required<Omit<AttributePagerProps, 'values'>> & {
     values?: (SimpleAttributeValue | NestedAttributeValue | ReferenceAttributeValue)[];
     nonVisibleValues: AttributeValue[];
-    highlightedError?: {
-        error: import("@reltio/mdm-sdk").AttributeError;
-        highlightError: (error: import("@reltio/mdm-sdk").AttributeError) => void;
-        scrollIntoRef: (ref: React.MutableRefObject<HTMLDivElement>) => void;
-    };
-}> | ((props: any) => JSX.Element);
+    highlightedError?: React.ContextType<typeof ScrollToElementContext>;
+    highlightedAttribute?: React.ContextType<typeof ScrollToElementContext>;
+};
+declare const _default: React.MemoExoticComponent<{
+    ({ max, values, attributeType, parentUri, mode, drawLines, showEmptyEditors, errorMessage, errors, paging, crosswalks, showNonOv, nonVisibleValues, highlightedError, highlightedAttribute, onAddAttributes, onDeleteAttribute, onChangeAttribute, onDeactivateError, additionalControlsRenderer, requestNextPageOfAttributeValues }: Props): JSX.Element;
+    displayName: string;
+}>;
 export default _default;

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

@@ -1,6 +1,6 @@
-import React, { useCallback, useRef, useState, useContext, useMemo } from 'react';
+import React, { useCallback, useRef, useState, useContext, useMemo, memo } from 'react';
 import classNames from 'classnames';
-import { createNewAttribute, getAttributeOwnError, isComplexAttribute, isEditableMode as checkIsEditableMode, isEmptyValue, isAttributeTypeError } from '@reltio/mdm-sdk';
+import { createNewAttribute, getAttributeOwnError, isComplexAttribute, isEditableMode as checkIsEditableMode, isEmptyValue } from '@reltio/mdm-sdk';
 import { add, always, has, ifElse, min, pipe, prop, T } from 'ramda';
 import BranchDecorator from '../../BranchDecorator/BranchDecorator';
 import ErrorMessage from '../../../ErrorWrapper/ErrorMessage';
@@ -11,20 +11,20 @@ import ShowMore from '../../pagersCommon/ShowMore';
 import Attribute from '../AttributesFactory/Attribute';
 import Cardinality from './CardinalityMessage';
 import { filterNewValues } from './utils';
-import { withContext } from '../../../../HOCs';
 import { PinnedAttributesContext } from '../contexts/PinnedAttributesContext';
 import { useScrollToAttributeError } from '../../../../hooks';
-import { ScrollToErrorContext } from '../../../../contexts';
 import DescriptionIcon from '../../DescriptionIcon/DescriptionIcon';
+import { useScrollToAttribute } from '../hooks/useScrollToAttribute/useScrollToAttribute';
 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 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, highlightedAttribute = _a.highlightedAttribute, 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, description = attributeType.description;
     var isEditableMode = checkIsEditableMode(mode);
-    var _d = useScrollToAttributeError({ highlightedError: highlightedError }), ref = _d.ref, errorClassName = _d.errorClassName;
+    var _d = useScrollToAttributeError({ highlightedError: highlightedError }), errorRef = _d.ref, errorClassName = _d.errorClassName;
+    var _e = useScrollToAttribute(highlightedAttribute), attributeRef = _e.ref, highlightedClassName = _e.highlightedClassName;
     var pinnedAttributes = useContext(PinnedAttributesContext);
     var isPinned = useMemo(function () { return pinnedAttributes === null || pinnedAttributes === void 0 ? void 0 : pinnedAttributes.includes(attributeTypeUri); }, [attributeTypeUri, pinnedAttributes]);
     var isEmptyValues = isEmptyValue(values);
@@ -80,7 +80,7 @@ var AttributeRenderer = function (_a) {
     var lastIndex = shownValues ? shownValues.length - 1 : 0;
     var hiddenValuesCount = totalVisibleValues - visibleValuesCount;
     return (React.createElement(BranchDecorator, { enabled: drawLines },
-        React.createElement("div", { ref: ref, className: classNames(styles.wrapper, errorClassName) },
+        React.createElement("div", { ref: errorRef, 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 }),
@@ -88,13 +88,9 @@ var AttributeRenderer = function (_a) {
             isEditableMode && React.createElement(Cardinality, { cardinality: cardinality }),
             isEditableMode && React.createElement(ErrorMessage, { message: errorMessage, className: styles.typeError }),
             React.createElement("div", { className: styles.attributesWrapper },
-                shownValues.map(function (value, idx) { return (React.createElement(Attribute, { key: value.uri, attributeValue: value, attributeType: attributeType, lazy: showEmpty && !isRequired, showEmptyEditors: showEmptyEditors, errors: errors, ownError: getAttributeOwnError(value, idx, attributeType.uri, errors), mode: mode, crosswalks: crosswalks, onAddOneMore: lastIndex === idx ? onAddOneMore : null, onAddAttributes: onAddAttributes, onDeleteAttribute: onDelete, onChangeAttribute: onChangeAttribute, onDeactivateError: onDeactivateError, additionalControlsRenderer: additionalControlsRenderer })); }),
+                shownValues.map(function (value, idx) { return (React.createElement(Attribute, { key: value.uri, attributeValue: value, attributeType: attributeType, lazy: showEmpty && !isRequired, showEmptyEditors: showEmptyEditors, errors: errors, ownError: getAttributeOwnError(value, idx, attributeType.uri, errors), mode: mode, crosswalks: crosswalks, onAddOneMore: lastIndex === idx ? onAddOneMore : null, onAddAttributes: onAddAttributes, onDeleteAttribute: onDelete, onChangeAttribute: onChangeAttribute, onDeactivateError: onDeactivateError, additionalControlsRenderer: additionalControlsRenderer, className: idx === 0 ? highlightedClassName : null, ref: idx === 0 ? attributeRef : null })); }),
                 showMore && (React.createElement(ShowMore, { moreNumber: min(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),
                 showLess && React.createElement(ShowLess, { onClick: onShowLess })))));
 };
-export default withContext(ScrollToErrorContext, function (contextValue, _a) {
-    var parentUri = _a.parentUri, attributeType = _a.attributeType;
-    var error = (contextValue || {}).error;
-    var isHighlighted = isAttributeTypeError(error, parentUri, attributeType.uri);
-    return { highlightedError: isHighlighted ? contextValue : null };
-}, AttributeRenderer);
+AttributeRenderer.displayName = 'AttributeRenderer';
+export default memo(AttributeRenderer);

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

@@ -1,4 +1,40 @@
 import React from 'react';
-import { AttributePagerProps } from './index';
-declare const _default: React.MemoExoticComponent<({ values, attributeType, mode, crosswalks, drawLines, paging, parentUri, errors, errorMessage, max, showEmptyEditors, showNonOv, onAddAttributes, onDeleteAttribute, onChangeAttribute, onDeactivateError, additionalControlsRenderer, requestNextPageOfAttributeValues }: AttributePagerProps) => JSX.Element>;
+import { AttributeError, AttributeType, Mode, NestedAttributeValue, ReferenceAttributeValue, SimpleAttributeValue } from '@reltio/mdm-sdk';
+declare const _default: React.ComponentType<{
+    errorMessage: string;
+    errors: AttributeError[];
+    max: number;
+} & {
+    onDeactivateError: (id: string) => void;
+    requestNextPageOfAttributeValues: (payload: import("@reltio/mdm-module").RequestNextPageOfAttributeValuesPayload) => void;
+} & {
+    values: (string | number | SimpleAttributeValue | NestedAttributeValue | ReferenceAttributeValue | import("@reltio/mdm-sdk").ImageAttributeValue)[];
+    attributeType: AttributeType;
+    paging?: import("@reltio/mdm-sdk").Paging;
+    mode?: Mode;
+    crosswalks?: import("@reltio/mdm-sdk").Crosswalk[];
+    parentUri: string;
+    drawLines: boolean;
+    max?: number;
+    showEmptyEditors: boolean;
+    showNonOv?: boolean;
+    onAddAttributes: (params: import("@reltio/mdm-sdk").AttributeItem[]) => void;
+    onDeleteAttribute: (param: import("@reltio/mdm-sdk").AttributeItem) => void;
+    onChangeAttribute: (param: import("@reltio/mdm-sdk").AttributeItem) => void;
+    additionalControlsRenderer?: (props: any) => JSX.Element;
+    highlightedError?: {
+        element: unknown;
+        type: import("../../../../contexts").ScrollType;
+        highlightError?: (element: unknown) => void;
+        highlightAttribute?: (element: unknown) => void;
+        scrollIntoRef: (ref: React.MutableRefObject<HTMLDivElement>) => void;
+    };
+    highlightedAttribute?: {
+        element: unknown;
+        type: import("../../../../contexts").ScrollType;
+        highlightError?: (element: unknown) => void;
+        highlightAttribute?: (element: unknown) => void;
+        scrollIntoRef: (ref: React.MutableRefObject<HTMLDivElement>) => void;
+    };
+}> | ((props: any) => JSX.Element);
 export default _default;

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

@@ -9,13 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { memo } from 'react';
-import { isImage, isOv, isSpecialAttribute, Mode } from '@reltio/mdm-sdk';
+import React from 'react';
+import { isAttributeTypeError, isImage, isOv, isSpecialAttribute, Mode } from '@reltio/mdm-sdk';
 import { always, cond, T, partition } from 'ramda';
 import BranchDecorator from '../../BranchDecorator/BranchDecorator';
 import AttributeRenderer from './AttributeRenderer';
 import SpecialRenderer from './SpecialRenderer';
 import { ImageLineRenderer } from './ImageLineRenderer';
+import { withContext } from '../../../../HOCs';
+import { isHighlightedAttributeType, isHighlightedErrorType, ScrollToElementContext } from '../../../../contexts';
 var RENDERER_TYPES;
 (function (RENDERER_TYPES) {
     RENDERER_TYPES["imageLine"] = "imageLine";
@@ -23,7 +25,7 @@ var RENDERER_TYPES;
     RENDERER_TYPES["default"] = "default";
 })(RENDERER_TYPES || (RENDERER_TYPES = {}));
 var AttributesPager = function (_a) {
-    var values = _a.values, attributeType = _a.attributeType, _b = _a.mode, mode = _b === void 0 ? Mode.Viewing : _b, crosswalks = _a.crosswalks, drawLines = _a.drawLines, _c = _a.paging, paging = _c === void 0 ? {} : _c, parentUri = _a.parentUri, errors = _a.errors, errorMessage = _a.errorMessage, _d = _a.max, max = _d === void 0 ? Infinity : _d, showEmptyEditors = _a.showEmptyEditors, showNonOv = _a.showNonOv, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues;
+    var values = _a.values, attributeType = _a.attributeType, _b = _a.mode, mode = _b === void 0 ? Mode.Viewing : _b, crosswalks = _a.crosswalks, drawLines = _a.drawLines, _c = _a.paging, paging = _c === void 0 ? {} : _c, parentUri = _a.parentUri, errors = _a.errors, errorMessage = _a.errorMessage, _d = _a.max, max = _d === void 0 ? Infinity : _d, showEmptyEditors = _a.showEmptyEditors, showNonOv = _a.showNonOv, highlightedError = _a.highlightedError, highlightedAttribute = _a.highlightedAttribute, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues;
     var partitionByOv = partition(isOv);
     var _e = partitionByOv(values), ovValues = _e[0], nonOvValues = _e[1];
     var visibleValues = showNonOv ? values : ovValues;
@@ -38,7 +40,9 @@ var AttributesPager = function (_a) {
         onChangeAttribute: onChangeAttribute,
         onDeactivateError: onDeactivateError,
         additionalControlsRenderer: additionalControlsRenderer,
-        showEmptyEditors: showEmptyEditors
+        showEmptyEditors: showEmptyEditors,
+        highlightedError: highlightedError,
+        highlightedAttribute: highlightedAttribute
     };
     var renderAttribute = function () {
         var type = cond([
@@ -53,11 +57,21 @@ var AttributesPager = function (_a) {
             }
             case RENDERER_TYPES.imageLine:
                 return (React.createElement(BranchDecorator, { enabled: drawLines },
-                    React.createElement(ImageLineRenderer, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv })));
+                    React.createElement(ImageLineRenderer, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv, highlightedAttribute: highlightedAttribute })));
             default:
                 return (React.createElement(AttributeRenderer, __assign({ values: visibleValues, attributeType: attributeType, max: max, paging: paging, crosswalks: crosswalks, drawLines: drawLines, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv, nonVisibleValues: nonVisibleValues }, commonProps)));
         }
     };
     return renderAttribute();
 };
-export default memo(AttributesPager);
+export default withContext(ScrollToElementContext, function (contextValue, _a) {
+    var attributeType = _a.attributeType, parentUri = _a.parentUri;
+    var _b = contextValue || {}, element = _b.element, type = _b.type;
+    var isHighlightedAttribute = isHighlightedAttributeType(type) && element.uri === attributeType.uri;
+    var isHighlightedError = isHighlightedErrorType(type) &&
+        isAttributeTypeError(element, parentUri, attributeType.uri);
+    return {
+        highlightedAttribute: isHighlightedAttribute ? contextValue : null,
+        highlightedError: isHighlightedError ? contextValue : null
+    };
+}, AttributesPager);

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

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { AttributeItem, AttributeType, ImageAttributeValue, Paging } from '@reltio/mdm-sdk';
 import { RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-module';
+import { ScrollToElementContext } from '../../../../contexts';
 declare type Props = {
     attributeType: AttributeType;
     attributeValues: ImageAttributeValue[];
@@ -10,6 +11,7 @@ declare type Props = {
     onDeleteAttribute: (param: AttributeItem) => void;
     onChangeAttribute: (param: AttributeItem) => void;
     requestNextPageOfAttributeValues?: (payload: RequestNextPageOfAttributeValuesPayload) => void;
+    highlightedAttribute?: React.ContextType<typeof ScrollToElementContext>;
 };
-export declare const ImageLineRenderer: ({ attributeType, attributeValues, paging, parentUri, showNonOv, onDeleteAttribute, onChangeAttribute, requestNextPageOfAttributeValues }: Props) => JSX.Element;
+export declare const ImageLineRenderer: ({ attributeType, attributeValues, paging, parentUri, showNonOv, onDeleteAttribute, onChangeAttribute, requestNextPageOfAttributeValues, highlightedAttribute }: Props) => JSX.Element;
 export {};

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

@@ -1,13 +1,16 @@
 import React from 'react';
+import classnames from 'classnames';
 import Title from '../../../Title/Title';
 import DescriptionIcon from '../../DescriptionIcon';
 import ImageAttributesLine from '../ImageAttributesLine';
+import { useScrollToAttribute } from '../hooks/useScrollToAttribute/useScrollToAttribute';
 import { useStyles } from './styles';
 export var ImageLineRenderer = function (_a) {
-    var attributeType = _a.attributeType, attributeValues = _a.attributeValues, paging = _a.paging, parentUri = _a.parentUri, showNonOv = _a.showNonOv, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues;
+    var attributeType = _a.attributeType, attributeValues = _a.attributeValues, paging = _a.paging, parentUri = _a.parentUri, showNonOv = _a.showNonOv, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, highlightedAttribute = _a.highlightedAttribute;
     var styles = useStyles();
     var label = attributeType.label, description = attributeType.description;
-    return (React.createElement("div", { className: styles.wrapper },
+    var _b = useScrollToAttribute(highlightedAttribute), ref = _b.ref, highlightedClassName = _b.highlightedClassName;
+    return (React.createElement("div", { ref: ref, className: classnames(styles.wrapper, highlightedClassName) },
         React.createElement("div", { className: styles.titleWrapper },
             React.createElement(Title, { className: styles.title, label: label, "data-reltio-id": "reltio-attribute-label" }),
             React.createElement(DescriptionIcon, { className: styles.description, description: description })),

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { AttributeType, Mode, AttributeItem } from '@reltio/mdm-sdk';
+import { ScrollToElementContext } from '../../../../contexts';
 declare type Props = {
     values: string[] | number[];
     attributeType: AttributeType;
@@ -11,7 +12,8 @@ declare type Props = {
     showEmptyEditors?: boolean;
     hasDeletions?: boolean;
     setHasDeletions?: (attrTypeUri: string, value: boolean) => void;
+    highlightedAttribute?: React.ContextType<typeof ScrollToElementContext>;
 };
-export declare const SpecialRenderer: ({ values, attributeType, parentUri, mode, errorMessage, onDeleteAttribute, onChangeAttribute, showEmptyEditors, hasDeletions: hasDeletionsProp, setHasDeletions, ...otherProps }: Props) => JSX.Element;
+export declare const SpecialRenderer: ({ values, attributeType, parentUri, mode, errorMessage, onDeleteAttribute, onChangeAttribute, showEmptyEditors, hasDeletions: hasDeletionsProp, setHasDeletions, highlightedAttribute, ...otherProps }: Props) => JSX.Element;
 declare const _default: React.ComponentType<Props> | ((props: any) => JSX.Element);
 export default _default;

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

@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useCallback, useRef, useState } from 'react';
 import { createNewAttribute, EntityAttrTypes, isEditableMode as checkIsEditableMode, isEmptyValue, isActivenessAttrType } from '@reltio/mdm-sdk';
+import classnames from 'classnames';
 import { pipe, T } from 'ramda';
 import Box from '@material-ui/core/Box';
 import Title from '../../../Title/Title';
@@ -33,8 +34,9 @@ import Tags from '../Tags';
 import { useStyles } from './styles';
 import { HasDeletionsContext } from '../contexts/HasDeletionsContext';
 import { withContext } from '../../../../HOCs';
+import { useScrollToAttribute } from '../hooks/useScrollToAttribute/useScrollToAttribute';
 export 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, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage", "onDeleteAttribute", "onChangeAttribute", "showEmptyEditors", "hasDeletions", "setHasDeletions"]);
+    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 styles = useStyles();
     var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality;
     var isEditableMode = checkIsEditableMode(mode);
@@ -55,6 +57,7 @@ export var SpecialRenderer = function (_a) {
         parentUri: parentUri,
         attributeType: attributeType
     }));
+    var _c = useScrollToAttribute(highlightedAttribute), ref = _c.ref, highlightedClassName = _c.highlightedClassName;
     var renderValue = function () {
         switch (attributeType.uri) {
             case EntityAttrTypes.tags.uri:
@@ -71,8 +74,8 @@ export var SpecialRenderer = function (_a) {
     if (isActivenessAttrType(attributeType) && isEmptyValues && !showEmpty) {
         return null;
     }
-    return (React.createElement(Box, { className: styles.wrapper },
-        React.createElement(Title, { label: label, isRequired: isRequired, className: styles.title, "data-reltio-id": "reltio-attribute-label" }),
+    return (React.createElement("div", { ref: ref, className: classnames(highlightedClassName, styles.wrapper) },
+        React.createElement(Title, { label: label, isRequired: isRequired, className: classnames(styles.title, styles.titleWrapper), "data-reltio-id": "reltio-attribute-label" }),
         isEditableMode && React.createElement(Cardinality, { cardinality: cardinality }),
         isEditableMode && React.createElement(ErrorMessage, { message: errorMessage }),
         React.createElement(Box, { className: styles.attributesWrapper }, renderValue())));

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

@@ -3,6 +3,7 @@ import { RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-module';
 import { AttributeError, AttributeType, Crosswalk, ImageAttributeValue, Mode, NestedAttributeValue, Paging, ReferenceAttributeValue, SimpleAttributeValue, AttributeItem } from '@reltio/mdm-sdk';
 import AttributesPager from './AttributesPager';
 import CardinalityMessage from './CardinalityMessage';
+import { ScrollToElementContext } from '../../../../contexts';
 declare type StateProps = {
     errorMessage: string;
     errors: AttributeError[];
@@ -27,8 +28,10 @@ declare type OwnProps = {
     onDeleteAttribute: (param: AttributeItem) => void;
     onChangeAttribute: (param: AttributeItem) => void;
     additionalControlsRenderer?: (props: any) => JSX.Element;
+    highlightedError?: React.ContextType<typeof ScrollToElementContext>;
+    highlightedAttribute?: React.ContextType<typeof ScrollToElementContext>;
 };
 export declare type AttributePagerProps = StateProps & DispatchProps & OwnProps;
 export { AttributesPager, CardinalityMessage };
-declare const _default: import("react-redux").ConnectedComponent<import("react").MemoExoticComponent<({ values, attributeType, mode, crosswalks, drawLines, paging, parentUri, errors, errorMessage, max, showEmptyEditors, showNonOv, onAddAttributes, onDeleteAttribute, onChangeAttribute, onDeactivateError, additionalControlsRenderer, requestNextPageOfAttributeValues }: AttributePagerProps) => JSX.Element>, import("react-redux").Omit<StateProps & DispatchProps & OwnProps, "max" | "errorMessage" | "errors" | "requestNextPageOfAttributeValues" | "onDeactivateError"> & OwnProps>;
+declare const _default: import("react-redux").ConnectedComponent<import("react").ComponentType<StateProps & DispatchProps & OwnProps> | ((props: any) => JSX.Element), import("react-redux").Omit<any, "max" | "errorMessage" | "errors" | "requestNextPageOfAttributeValues" | "onDeactivateError"> & OwnProps>;
 export default _default;

package/esm/components/attributes/editMode/ComplexAttribute/ComplexAttribute.js

@@ -23,7 +23,7 @@ import ArrowExpandButton from '../../../ArrowExpandButton/ArrowExpandButton';
 import ErrorWrapper from '../../../ErrorWrapper/ErrorWrapper';
 import AttributesList from '../AttributesList/AttributesList';
 import { withContext } from '../../../../HOCs';
-import { ScrollToErrorContext } from '../../../../contexts';
+import { isHighlightedErrorType, ScrollToElementContext } from '../../../../contexts';
 import { useScrollToAttributeError } from '../../../../hooks';
 import { useStyles } from './styles';
 var ComplexAttribute = function (_a) {
@@ -89,11 +89,12 @@ var ComplexAttribute = function (_a) {
         expanded && (React.createElement(AttributesList, { parentAttributeType: attributeType, attrTypes: attributeTypesList, entity: attributeListEntity, showEmptyEditors: showEmptyEditors || isNew, drawLines: true, parentUri: uri, mode: mode, crosswalks: crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute, additionalControlsRenderer: additionalControlsRenderer, showNonOv: showNonOv }, children))));
 };
 ComplexAttribute.propTypes = __assign({ label: PropTypes.string, children: PropTypes.node, attributeTypesList: PropTypes.arrayOf(AttributeTypeType), attributeValue: PropTypes.oneOfType([NestedAttributeValueType, ReferenceAttributeValueType]), highlightedError: PropTypes.object, isHighlightedPath: PropTypes.bool }, ComplexAttributeType);
-export default withContext(ScrollToErrorContext, function (contextValue, _a) {
+export default withContext(ScrollToElementContext, function (contextValue, _a) {
     var attributeValue = _a.attributeValue;
-    var error = (contextValue || {}).error;
-    var isHighlighted = (error === null || error === void 0 ? void 0 : error.uri) === attributeValue.uri;
-    var isHighlightedPath = pipe(propOr([], 'path'), any(pathEq(['value', 'uri'], attributeValue.uri)))(error);
+    var _b = contextValue || {}, element = _b.element, type = _b.type;
+    var isError = isHighlightedErrorType(type);
+    var isHighlighted = isError && (element === null || element === void 0 ? void 0 : element.uri) === attributeValue.uri;
+    var isHighlightedPath = isError && pipe(propOr([], 'path'), any(pathEq(['value', 'uri'], attributeValue.uri)))(element);
     return {
         highlightedError: isHighlighted ? contextValue : null,
         isHighlightedPath: isHighlightedPath

package/esm/components/attributes/editMode/ReferenceAttribute/ReferenceAttribute.js

@@ -29,7 +29,7 @@ import ComplexAttribute from '../ComplexAttribute/ComplexAttribute';
 import EntitySelector from '../EntitySelector/EntitySelector';
 import { ErrorWrapper } from '../../../index';
 import { withContext } from '../../../../HOCs';
-import { ScrollToErrorContext } from '../../../../contexts';
+import { isHighlightedErrorType, ScrollToElementContext } from '../../../../contexts';
 import { useScrollToAttributeError } from '../../../../hooks';
 import { useStyles } from './styles';
 var ReferenceAttribute = function (props) {
@@ -121,9 +121,9 @@ var ReferenceAttribute = function (props) {
                         _a)), entity: selectedEntity || {}, entityTypesUris: entityTypesUris, max: 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, isDisabled: !canChangeReferencedEntity, onChange: onChangeEntity, onCreate: canCreateReferencedEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: newEntityAttrTypesSelectionStrategy })))));
 };
 ReferenceAttribute.propTypes = __assign(__assign({}, ReferenceAttributeType), { modifiedEntity: EntityType, metadata: MetadataType, globalSearchRequestOptions: PropTypes.object, onDeleteModifiedEntity: PropTypes.func, onUpdateModifiedEntity: PropTypes.func, onDeactivateError: PropTypes.func, highlightedError: PropTypes.object });
-export default withContext(ScrollToErrorContext, function (contextValue, _a) {
+export default withContext(ScrollToElementContext, function (contextValue, _a) {
     var attributeValue = _a.attributeValue, attributeType = _a.attributeType;
-    var error = (contextValue || {}).error;
-    var isHighlighted = isAttributeTypeError(error, attributeValue.uri, attributeType.uri);
+    var _b = contextValue || {}, element = _b.element, type = _b.type;
+    var isHighlighted = isHighlightedErrorType(type) && isAttributeTypeError(element, attributeValue.uri, attributeType.uri);
     return { highlightedError: isHighlighted ? contextValue : null };
 }, ReferenceAttribute);

package/esm/components/attributes/editMode/SimpleAttributeEditor/SimpleAttributeEditor.js

@@ -38,7 +38,7 @@ import { attributeValueToEditorValue, prepareChangeData } from './utils';
 import withAsyncMount from '../../../../HOCs/withAsyncMount/withAsyncMount';
 import { getDependentLookupEditorContext } from './selectors/getDependentLookupEditorContext';
 import { withContext } from '../../../../HOCs';
-import { ScrollToErrorContext, DependentLookupAutopopulationContext, ProfilePerspectiveViewContext } from '../../../../contexts';
+import { isHighlightedErrorType, ScrollToElementContext, DependentLookupAutopopulationContext, ProfilePerspectiveViewContext } from '../../../../contexts';
 import { useScrollToAttributeError } from '../../../../hooks';
 import { useAutopopulationContextValue } from './useAutopopulationContextValue';
 import { useStyles } from './styles';
@@ -116,9 +116,9 @@ SimpleAttributeEditor.propTypes = {
     additionalControlsRenderer: PropTypes.func,
     highlightedError: PropTypes.object
 };
-export default withAsyncMount(withContext(ScrollToErrorContext, function (contextValue, _a) {
+export default withAsyncMount(withContext(ScrollToElementContext, function (contextValue, _a) {
     var attributeValue = _a.attributeValue;
-    var error = (contextValue || {}).error;
-    var isHighlighted = (error === null || error === void 0 ? void 0 : error.uri) === attributeValue.uri;
+    var _b = contextValue || {}, element = _b.element, type = _b.type;
+    var isHighlighted = isHighlightedErrorType(type) && (element === null || element === void 0 ? void 0 : element.uri) === attributeValue.uri;
     return { highlightedError: isHighlighted ? contextValue : null };
 }, SimpleAttributeEditor), AsyncMountPlaceholder);

package/esm/components/attributes/editMode/hooks/useScrollToAttribute/styles.d.ts

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

package/esm/components/attributes/editMode/hooks/useScrollToAttribute/styles.js

@@ -0,0 +1,35 @@
+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 { makeStyles } from '@material-ui/core/styles';
+var highlightBeforeStyles = {
+    content: '""',
+    position: 'absolute',
+    left: '-1000px',
+    top: '-4px',
+    width: '5000px',
+    height: 'calc(100% + 8px)',
+    animationName: '$highlightAnimation',
+    animationDuration: '2s',
+    animationIterationCount: 1,
+    opacity: 0
+};
+export var useStyles = makeStyles(function () { return ({
+    '@keyframes highlightAnimation': {
+        '0%': { opacity: 0 },
+        '50%': { opacity: 1 },
+        '100%': { opacity: 0 }
+    },
+    highlighted: {
+        '&::before': __assign(__assign({}, highlightBeforeStyles), { background: 'rgba(228, 151, 0, 0.08)' }),
+        position: 'relative'
+    }
+}); });

package/esm/components/attributes/editMode/hooks/useScrollToAttribute/useScrollToAttribute.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const useScrollToAttribute: (context: any) => {
+    ref: import("react").MutableRefObject<HTMLDivElement>;
+    highlightedClassName: string;
+} | {
+    ref: import("react").MutableRefObject<HTMLDivElement>;
+    highlightedClassName?: undefined;
+};

package/esm/components/attributes/editMode/hooks/useScrollToAttribute/useScrollToAttribute.js

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react';
+import { useStyles } from './styles';
+export var useScrollToAttribute = function (context) {
+    var styles = useStyles();
+    var ref = useRef(null);
+    var scrollIntoRef = (context || {}).scrollIntoRef;
+    useEffect(function () {
+        if (context) {
+            scrollIntoRef(ref);
+        }
+    }, [context, scrollIntoRef]);
+    return context ? { ref: ref, highlightedClassName: styles.highlighted } : { ref: ref };
+};

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isCrosswalkDisabled } from '@reltio/mdm-sdk';
 import { useCrosswalkColor, useCrosswalkHighlight } from '../../../../contexts';
 import SourceItem from './SourceItem';
 import LightArrowTooltip from '../../../LightArrowTooltip/LightArrowTooltip';
@@ -7,9 +8,10 @@ import { useStyles } from './styles';
 var CrosswalkIcon = function (_a) {
     var crosswalk = _a.crosswalk, className = _a.className;
     var color = useCrosswalkColor(crosswalk);
+    var isDisabled = isCrosswalkDisabled(crosswalk);
     var _b = useCrosswalkHighlight(crosswalk), isDimmed = _b.isDimmed, highlightCrosswalk = _b.highlightCrosswalk, removeHighlight = _b.removeHighlight;
-    var styles = useStyles({ isOpaque: !isDimmed, color: color });
+    var styles = useStyles({ isOpaque: !isDimmed, color: color, isDisabled: isDisabled });
     return (React.createElement(LightArrowTooltip, { title: React.createElement(SourceItem, { crosswalk: crosswalk, color: color }), placement: 'top' },
-        React.createElement("div", { className: classnames(styles.crosswalkIcon, className), onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } })));
+        React.createElement("div", { "data-reltio-id": "crosswalk-icon", className: classnames(styles.crosswalkIcon, className), onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } })));
 };
 export default CrosswalkIcon;