@reltio/components 1.4.1371 → 1.4.1373

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

@@ -38,21 +38,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
 var prop_types_1 = __importDefault(require("prop-types"));
 var classnames_1 = __importDefault(require("classnames"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var SmallIconButton_1 = __importDefault(require("../../../SmallIconButton/SmallIconButton"));
 var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var styles_1 = require("./styles");
+var SmallIconButton_1 = __importDefault(require("../../../SmallIconButton/SmallIconButton"));
+var ArrowExpandButton_1 = __importDefault(require("../../../ArrowExpandButton/ArrowExpandButton"));
 var ErrorWrapper_1 = __importDefault(require("../../../ErrorWrapper/ErrorWrapper"));
 var AttributesList_1 = __importDefault(require("../AttributesList/AttributesList"));
-var ArrowExpandButton_1 = __importDefault(require("../../../ArrowExpandButton/ArrowExpandButton"));
+var HOCs_1 = require("../../../../HOCs");
+var contexts_1 = require("../../../../contexts");
+var hooks_1 = require("../../../../hooks");
+var styles_1 = require("./styles");
 var ComplexAttribute = function (_a) {
     var _b;
-    var label = _a.label, attributeTypesList = _a.attributeTypesList, attributeType = _a.attributeType, attributeValue = _a.attributeValue, children = _a.children, errors = _a.errors, ownError = _a.ownError, mode = _a.mode, metadata = _a.metadata, crosswalks = _a.crosswalks, lazy = _a.lazy, showEmptyEditors = _a.showEmptyEditors, onAddOneMore = _a.onAddOneMore, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, hideDeleteButton = _a.hideDeleteButton, state = _a.state, showNonOv = _a.showNonOv, _c = _a.expanded, expandedProp = _c === void 0 ? false : _c;
+    var label = _a.label, attributeTypesList = _a.attributeTypesList, attributeType = _a.attributeType, attributeValue = _a.attributeValue, children = _a.children, errors = _a.errors, ownError = _a.ownError, mode = _a.mode, metadata = _a.metadata, crosswalks = _a.crosswalks, lazy = _a.lazy, showEmptyEditors = _a.showEmptyEditors, onAddOneMore = _a.onAddOneMore, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, hideDeleteButton = _a.hideDeleteButton, state = _a.state, showNonOv = _a.showNonOv, isHighlightedPath = _a.isHighlightedPath, highlightedError = _a.highlightedError, _c = _a.expanded, expandedProp = _c === void 0 ? false : _c;
     var styles = (0, styles_1.useStyles)();
     var deleted = state === 'deleted';
     var edited = state === 'edited';
@@ -60,6 +64,12 @@ var ComplexAttribute = function (_a) {
     var isNew = (0, mdm_sdk_1.isTempUri)(uri);
     var defaultExpand = isNew || expandedProp;
     var _d = (0, react_1.useState)(defaultExpand), expanded = _d[0], setExpanded = _d[1];
+    var _e = (0, hooks_1.useScrollToAttributeError)({ highlightedError: highlightedError }), ref = _e.ref, errorClassName = _e.errorClassName;
+    (0, react_1.useEffect)(function () {
+        if (isHighlightedPath) {
+            setExpanded(true);
+        }
+    }, [isHighlightedPath]);
     (0, react_1.useEffect)(function () {
         setExpanded(defaultExpand);
     }, [defaultExpand]);
@@ -74,10 +84,7 @@ var ComplexAttribute = function (_a) {
     }, [attributeType, attributeValue, mode, metadata, crosswalks]);
     var showDeleteButton = !deleted && !hideDeleteButton && !!onDeleteAttribute && canDelete;
     var onDeleteThis = function () { return onDeleteAttribute({ uri: uri, attributeType: attributeType, attributeValue: attributeValue }); };
-    var hasDescendantsWithErrors = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.hasAttributeDescendantsWithErrors)(attributeValue, errors); }, [
-        errors,
-        attributeValue
-    ]);
+    var hasDescendantsWithErrors = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.hasAttributeDescendantsWithErrors)(attributeValue, errors); }, [errors, attributeValue]);
     (0, react_1.useEffect)(function () {
         if (hasDescendantsWithErrors) {
             setExpanded(true);
@@ -94,7 +101,7 @@ var ComplexAttribute = function (_a) {
         analyticsAttributes: hasAnalyticValue ? attributeValue.value : null
     }); }, [attributeValue, hasAnalyticValue]);
     var errorMessage = (0, mdm_sdk_1.getErrorMessage)(ownError) || (hasDescendantsWithErrors && ui_i18n_1.default.text('Has an incorrect value')) || '';
-    return lazy ? (react_1.default.createElement(Button_1.default, { variant: "text", color: "primary", onClick: onAddOneMore }, "Create attribute")) : (react_1.default.createElement(react_1.default.Fragment, null,
+    return lazy ? (react_1.default.createElement(Button_1.default, { variant: "text", color: "primary", onClick: onAddOneMore }, "Create attribute")) : (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)(styles.complexWrapper, errorClassName) },
         react_1.default.createElement("div", { className: styles.editor },
             react_1.default.createElement("div", { className: styles.titleContainer },
                 react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded, className: styles.expandButton, disabled: deleted }),
@@ -109,5 +116,14 @@ var ComplexAttribute = function (_a) {
                 showDeleteButton && react_1.default.createElement(SmallIconButton_1.default, { icon: Delete_1.default, onClick: onDeleteThis, size: "L" }))),
         expanded && (react_1.default.createElement(AttributesList_1.default, { 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: prop_types_1.default.string, children: prop_types_1.default.node, attributeTypesList: prop_types_1.default.arrayOf(mdm_sdk_1.AttributeTypeType), attributeValue: prop_types_1.default.oneOfType([mdm_sdk_1.NestedAttributeValueType, mdm_sdk_1.ReferenceAttributeValueType]) }, mdm_sdk_1.ComplexAttributeType);
-exports.default = ComplexAttribute;
+ComplexAttribute.propTypes = __assign({ label: prop_types_1.default.string, children: prop_types_1.default.node, attributeTypesList: prop_types_1.default.arrayOf(mdm_sdk_1.AttributeTypeType), attributeValue: prop_types_1.default.oneOfType([mdm_sdk_1.NestedAttributeValueType, mdm_sdk_1.ReferenceAttributeValueType]), highlightedError: prop_types_1.default.object, isHighlightedPath: prop_types_1.default.bool }, mdm_sdk_1.ComplexAttributeType);
+exports.default = (0, HOCs_1.withContext)(contexts_1.ScrollToErrorContext, 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 = (0, ramda_1.pipe)((0, ramda_1.propOr)([], 'path'), (0, ramda_1.any)((0, ramda_1.pathEq)(['value', 'uri'], attributeValue.uri)))(error);
+    return {
+        highlightedError: isHighlighted ? contextValue : null,
+        isHighlightedPath: isHighlightedPath
+    };
+}, ComplexAttribute);

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

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"actions" | "label" | "deleted" | "editor" | "expandButton" | "editedLabel" | "titleContainer" | "errorWrapperHelperText">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"actions" | "label" | "deleted" | "editor" | "expandButton" | "editedLabel" | "complexWrapper" | "titleContainer" | "errorWrapperHelperText">;

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

@@ -3,6 +3,9 @@ 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 (theme) { return ({
+    complexWrapper: {
+        position: 'relative'
+    },
     editor: {
         display: 'flex',
         flex: 1,

package/cjs/components/attributes/editMode/ReferenceAttribute/ReferenceAttribute.d.ts

@@ -1,132 +1,3 @@
-declare const _default: React.MemoExoticComponent<{
-    (props: any): JSX.Element;
-    propTypes: {
-        modifiedEntity: PropTypes.Requireable<PropTypes.InferProps<{
-            uri: PropTypes.Requireable<string>;
-            type: PropTypes.Requireable<string>;
-        }>>;
-        metadata: PropTypes.Requireable<PropTypes.InferProps<{
-            uri: PropTypes.Requireable<string>;
-            description: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<string>;
-            schemaVersion: PropTypes.Requireable<string>;
-            entityTypes: PropTypes.Requireable<PropTypes.InferProps<{
-                typeColor: PropTypes.Requireable<string>;
-                typeIcon: PropTypes.Requireable<string>;
-                typeImage: PropTypes.Requireable<string>;
-                label: PropTypes.Requireable<string>;
-                uri: PropTypes.Requireable<string>;
-                attributes: PropTypes.Requireable<PropTypes.InferProps<{
-                    label: PropTypes.Requireable<string>;
-                    name: PropTypes.Requireable<string>;
-                    description: PropTypes.Requireable<string>;
-                    type: PropTypes.Requireable<string>;
-                    hidden: PropTypes.Requireable<boolean>;
-                    faceted: PropTypes.Requireable<boolean>;
-                    searchable: PropTypes.Requireable<boolean>;
-                    uri: PropTypes.Requireable<string>;
-                    access: PropTypes.Requireable<string[]>;
-                    cardinality: PropTypes.Requireable<PropTypes.InferProps<{
-                        minValue: PropTypes.Requireable<number>;
-                        maxValue: PropTypes.Requireable<number>;
-                    }>>;
-                }>[]>;
-            }>[]>;
-            roles: PropTypes.Requireable<object[]>;
-            groupTypes: PropTypes.Requireable<object[]>;
-            relationTypes: PropTypes.Requireable<PropTypes.InferProps<{
-                label: PropTypes.Requireable<string>;
-                uri: PropTypes.Requireable<string>;
-                typeColor: PropTypes.Requireable<string>;
-                direction: PropTypes.Requireable<string>;
-                startObject: PropTypes.Requireable<object>;
-                endObject: PropTypes.Requireable<object>;
-            }>[]>;
-            graphTypes: PropTypes.Requireable<PropTypes.InferProps<{
-                uri: PropTypes.Requireable<string>;
-                label: PropTypes.Requireable<string>;
-                extendsTypeUri: PropTypes.Requireable<string>;
-                relationshipTypeURIs: PropTypes.Requireable<string[]>;
-            }>[]>;
-            interactionTypes: PropTypes.Requireable<PropTypes.InferProps<{
-                uri: PropTypes.Requireable<string>;
-                label: PropTypes.Requireable<string>;
-                memberTypes: PropTypes.Requireable<any[]>;
-                extendsTypeUri: PropTypes.Requireable<string>;
-                attributes: PropTypes.Requireable<PropTypes.InferProps<{
-                    label: PropTypes.Requireable<string>;
-                    name: PropTypes.Requireable<string>;
-                    description: PropTypes.Requireable<string>;
-                    type: PropTypes.Requireable<string>;
-                    hidden: PropTypes.Requireable<boolean>;
-                    faceted: PropTypes.Requireable<boolean>;
-                    searchable: PropTypes.Requireable<boolean>;
-                    uri: PropTypes.Requireable<string>;
-                    access: PropTypes.Requireable<string[]>;
-                    cardinality: PropTypes.Requireable<PropTypes.InferProps<{
-                        minValue: PropTypes.Requireable<number>;
-                        maxValue: PropTypes.Requireable<number>;
-                    }>>;
-                }>[]>;
-            }>[]>;
-            sources: PropTypes.Requireable<object[]>;
-        }>>;
-        globalSearchRequestOptions: PropTypes.Requireable<object>;
-        onDeleteModifiedEntity: PropTypes.Requireable<(...args: any[]) => any>;
-        onUpdateModifiedEntity: PropTypes.Requireable<(...args: any[]) => any>;
-        onDeactivateError: PropTypes.Requireable<(...args: any[]) => any>;
-        attributeType: PropTypes.Requireable<PropTypes.InferProps<{
-            label: PropTypes.Requireable<string>;
-            name: PropTypes.Requireable<string>;
-            description: PropTypes.Requireable<string>;
-            type: PropTypes.Requireable<string>;
-            hidden: PropTypes.Requireable<boolean>;
-            faceted: PropTypes.Requireable<boolean>;
-            searchable: PropTypes.Requireable<boolean>;
-            uri: PropTypes.Requireable<string>;
-            access: PropTypes.Requireable<string[]>;
-            cardinality: PropTypes.Requireable<PropTypes.InferProps<{
-                minValue: PropTypes.Requireable<number>;
-                maxValue: PropTypes.Requireable<number>;
-            }>>;
-        }>>;
-        showEmptyEditors: PropTypes.Requireable<boolean>;
-        lazy: PropTypes.Requireable<boolean>;
-        mode: PropTypes.Requireable<any>;
-        ownError: PropTypes.Requireable<PropTypes.InferProps<{
-            type: PropTypes.Validator<NonNullable<import("@reltio/mdm-sdk").ErrorType>>;
-            attributeTypeUri: PropTypes.Validator<string>;
-            parentUri: PropTypes.Validator<string>;
-            uri: PropTypes.Requireable<string>;
-            message: PropTypes.Requireable<string>;
-        }>>;
-        errors: PropTypes.Requireable<PropTypes.InferProps<{
-            type: PropTypes.Validator<NonNullable<import("@reltio/mdm-sdk").ErrorType>>;
-            attributeTypeUri: PropTypes.Validator<string>;
-            parentUri: PropTypes.Validator<string>;
-            uri: PropTypes.Requireable<string>;
-            message: PropTypes.Requireable<string>;
-        }>[]>;
-        crosswalks: PropTypes.Requireable<any[]>;
-        onAddAttributes: PropTypes.Requireable<(...args: any[]) => any>;
-        onAddOneMore: PropTypes.Requireable<(...args: any[]) => any>;
-        onDeleteAttribute: PropTypes.Requireable<(...args: any[]) => any>;
-        onChangeAttribute: PropTypes.Requireable<(...args: any[]) => any>;
-        additionalControlsRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-        hideDeleteButton: PropTypes.Requireable<boolean>;
-        showNonOv: PropTypes.Requireable<boolean>;
-        state: PropTypes.Requireable<string>;
-        expanded: PropTypes.Requireable<boolean>;
-        attributeValue: PropTypes.Requireable<PropTypes.InferProps<{
-            refEntity: PropTypes.Requireable<object>;
-            refRelation: PropTypes.Requireable<object>;
-            value: PropTypes.Requireable<object>;
-            ov: PropTypes.Requireable<boolean>;
-            type: PropTypes.Requireable<string>;
-            uri: PropTypes.Requireable<string>;
-        }>>;
-    };
-}>;
+declare const _default: React.ComponentType<any> | ((props: any) => JSX.Element);
 export default _default;
-import PropTypes from "prop-types";
 import React from "react";

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

@@ -56,13 +56,17 @@ var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var ComplexAttribute_1 = __importDefault(require("../ComplexAttribute/ComplexAttribute"));
 var EntitySelector_1 = __importDefault(require("../EntitySelector/EntitySelector"));
 var index_1 = require("../../../index");
+var HOCs_1 = require("../../../../HOCs");
+var contexts_1 = require("../../../../contexts");
+var hooks_1 = require("../../../../hooks");
 var styles_1 = require("./styles");
 var ReferenceAttribute = function (props) {
     var _a;
     var styles = (0, styles_1.useStyles)();
-    var modifiedEntity = props.modifiedEntity, metadata = props.metadata, globalSearchRequestOptions = props.globalSearchRequestOptions, onDeleteModifiedEntity = props.onDeleteModifiedEntity, onUpdateModifiedEntity = props.onUpdateModifiedEntity, onDeactivateError = props.onDeactivateError, ownProps = __rest(props, ["modifiedEntity", "metadata", "globalSearchRequestOptions", "onDeleteModifiedEntity", "onUpdateModifiedEntity", "onDeactivateError"]);
+    var modifiedEntity = props.modifiedEntity, metadata = props.metadata, globalSearchRequestOptions = props.globalSearchRequestOptions, onDeleteModifiedEntity = props.onDeleteModifiedEntity, onUpdateModifiedEntity = props.onUpdateModifiedEntity, onDeactivateError = props.onDeactivateError, highlightedError = props.highlightedError, ownProps = __rest(props, ["modifiedEntity", "metadata", "globalSearchRequestOptions", "onDeleteModifiedEntity", "onUpdateModifiedEntity", "onDeactivateError", "highlightedError"]);
     var attributeValue = ownProps.attributeValue, attributeType = ownProps.attributeType, mode = ownProps.mode, crosswalks = ownProps.crosswalks, errors = ownProps.errors, onChangeAttribute = ownProps.onChangeAttribute;
     var initialAttributeValue = (0, react_1.useRef)(attributeValue);
+    var _b = (0, hooks_1.useScrollToAttributeError)({ highlightedError: highlightedError, isSimple: true }), ref = _b.ref, errorClassName = _b.errorClassName;
     var referencedEntity = (0, mdm_sdk_1.getReferencedEntityFromAttrValue)(attributeValue);
     var referencedRelation = (0, mdm_sdk_1.getReferencedRelationFromAttrValue)(attributeValue);
     var referencedEntityTypeUri = (0, mdm_sdk_1.getReferencedEntityTypeUriFromAttrType)(attributeType);
@@ -71,14 +75,8 @@ var ReferenceAttribute = function (props) {
         ? (0, mdm_sdk_1.evaluateDeepEntityLabel)(modifiedEntity, referencedEntityType.dataLabelPattern)
         : attributeValue.label;
     var entityTypesUris = (0, react_1.useMemo)(function () { return [referencedEntityTypeUri]; }, [referencedEntityTypeUri]);
-    var allCrosswalks = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.addReferencedRelationCrosswalks)(crosswalks, referencedRelation); }, [
-        crosswalks,
-        referencedRelation
-    ]);
-    var referencedEntityMissedError = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.getReferencedEntityActiveError)(attributeValue, errors); }, [
-        attributeValue,
-        errors
-    ]);
+    var allCrosswalks = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.addReferencedRelationCrosswalks)(crosswalks, referencedRelation); }, [crosswalks, referencedRelation]);
+    var referencedEntityMissedError = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.getReferencedEntityActiveError)(attributeValue, errors); }, [attributeValue, errors]);
     var selectedEntity = (0, react_1.useMemo)(function () {
         return referencedEntity && {
             entityUri: (0, mdm_sdk_1.getReferencedEntityUri)(referencedEntity),
@@ -141,16 +139,23 @@ var ReferenceAttribute = function (props) {
             isReltioCrosswalk: (0, mdm_sdk_1.isReltioCrosswalk)(crosswalks, attributeValue)
         });
     }, [attributeType, attributeValue, mode, crosswalks]);
-    var canCreateReferencedEntity = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.checkMetadataForCreate)(mode, referencedEntityType); }, [
-        mode,
-        referencedEntityType
-    ]);
+    var canCreateReferencedEntity = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.checkMetadataForCreate)(mode, referencedEntityType); }, [mode, referencedEntityType]);
     var errorMessage = (0, mdm_sdk_1.getErrorMessage)(referencedEntityMissedError);
     return (react_1.default.createElement(ComplexAttribute_1.default, __assign({}, ownProps, { label: (0, mdm_sdk_1.getLabel)(label), attributeTypesList: editableAttrTypes, crosswalks: allCrosswalks, metadata: metadata }),
-        react_1.default.createElement(index_1.ErrorWrapper, { errorMessage: errorMessage },
-            react_1.default.createElement(EntitySelector_1.default, { className: (0, classnames_1.default)(styles.item, (_a = {},
-                    _a[styles.dense] = errorMessage || (selectedEntity && (0, mdm_sdk_1.isTempUri)(selectedEntity.entityUri)),
-                    _a)), entity: selectedEntity || {}, entityTypesUris: entityTypesUris, max: 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: canChangeReferencedEntity ? onChangeEntity : undefined, onCreate: canCreateReferencedEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: newEntityAttrTypesSelectionStrategy }))));
+        react_1.default.createElement("div", { ref: ref, className: errorClassName },
+            react_1.default.createElement(index_1.ErrorWrapper, { errorMessage: errorMessage },
+                react_1.default.createElement(EntitySelector_1.default, { className: (0, classnames_1.default)(styles.item, (_a = {},
+                        _a[styles.dense] = errorMessage || (selectedEntity && (0, mdm_sdk_1.isTempUri)(selectedEntity.entityUri)),
+                        _a)), entity: selectedEntity || {}, entityTypesUris: entityTypesUris, max: 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: canChangeReferencedEntity ? onChangeEntity : undefined, onCreate: canCreateReferencedEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: newEntityAttrTypesSelectionStrategy })))));
 };
-ReferenceAttribute.propTypes = __assign(__assign({}, mdm_sdk_1.ReferenceAttributeType), { modifiedEntity: mdm_sdk_1.EntityType, metadata: mdm_sdk_1.MetadataType, globalSearchRequestOptions: prop_types_1.default.object, onDeleteModifiedEntity: prop_types_1.default.func, onUpdateModifiedEntity: prop_types_1.default.func, onDeactivateError: prop_types_1.default.func });
-exports.default = (0, react_1.memo)(ReferenceAttribute);
+ReferenceAttribute.propTypes = __assign(__assign({}, mdm_sdk_1.ReferenceAttributeType), { modifiedEntity: mdm_sdk_1.EntityType, metadata: mdm_sdk_1.MetadataType, globalSearchRequestOptions: prop_types_1.default.object, onDeleteModifiedEntity: prop_types_1.default.func, onUpdateModifiedEntity: prop_types_1.default.func, onDeactivateError: prop_types_1.default.func, highlightedError: prop_types_1.default.object });
+exports.default = (0, HOCs_1.withContext)(contexts_1.ScrollToErrorContext, function (contextValue, _a) {
+    var attributeValue = _a.attributeValue, attributeType = _a.attributeType;
+    var error = (contextValue || {}).error;
+    var isHighlighted = (0, ramda_1.allPass)([
+        (0, ramda_1.pipe)((0, ramda_1.prop)('uri'), mdm_sdk_1.isEmptyValue),
+        (0, ramda_1.propEq)('parentUri', attributeValue.uri),
+        (0, ramda_1.propEq)('attributeTypeUri', attributeType.uri)
+    ])(error);
+    return { highlightedError: isHighlighted ? contextValue : null };
+}, ReferenceAttribute);

package/cjs/components/attributes/editMode/ReferenceAttribute/index.d.ts

@@ -1,132 +1,4 @@
 export { ReferenceAttribute };
-declare const _default: import("react-redux").ConnectedComponent<import("react").MemoExoticComponent<{
-    (props: any): JSX.Element;
-    propTypes: {
-        modifiedEntity: import("prop-types").Requireable<import("prop-types").InferProps<{
-            uri: import("prop-types").Requireable<string>;
-            type: import("prop-types").Requireable<string>;
-        }>>;
-        metadata: import("prop-types").Requireable<import("prop-types").InferProps<{
-            uri: import("prop-types").Requireable<string>;
-            description: import("prop-types").Requireable<string>;
-            label: import("prop-types").Requireable<string>;
-            schemaVersion: import("prop-types").Requireable<string>;
-            entityTypes: import("prop-types").Requireable<import("prop-types").InferProps<{
-                typeColor: import("prop-types").Requireable<string>;
-                typeIcon: import("prop-types").Requireable<string>;
-                typeImage: import("prop-types").Requireable<string>;
-                label: import("prop-types").Requireable<string>;
-                uri: import("prop-types").Requireable<string>;
-                attributes: import("prop-types").Requireable<import("prop-types").InferProps<{
-                    label: import("prop-types").Requireable<string>;
-                    name: import("prop-types").Requireable<string>;
-                    description: import("prop-types").Requireable<string>;
-                    type: import("prop-types").Requireable<string>;
-                    hidden: import("prop-types").Requireable<boolean>;
-                    faceted: import("prop-types").Requireable<boolean>;
-                    searchable: import("prop-types").Requireable<boolean>;
-                    uri: import("prop-types").Requireable<string>;
-                    access: import("prop-types").Requireable<string[]>;
-                    cardinality: import("prop-types").Requireable<import("prop-types").InferProps<{
-                        minValue: import("prop-types").Requireable<number>;
-                        maxValue: import("prop-types").Requireable<number>;
-                    }>>;
-                }>[]>;
-            }>[]>;
-            roles: import("prop-types").Requireable<object[]>;
-            groupTypes: import("prop-types").Requireable<object[]>;
-            relationTypes: import("prop-types").Requireable<import("prop-types").InferProps<{
-                label: import("prop-types").Requireable<string>;
-                uri: import("prop-types").Requireable<string>;
-                typeColor: import("prop-types").Requireable<string>;
-                direction: import("prop-types").Requireable<string>;
-                startObject: import("prop-types").Requireable<object>;
-                endObject: import("prop-types").Requireable<object>;
-            }>[]>;
-            graphTypes: import("prop-types").Requireable<import("prop-types").InferProps<{
-                uri: import("prop-types").Requireable<string>;
-                label: import("prop-types").Requireable<string>;
-                extendsTypeUri: import("prop-types").Requireable<string>;
-                relationshipTypeURIs: import("prop-types").Requireable<string[]>;
-            }>[]>;
-            interactionTypes: import("prop-types").Requireable<import("prop-types").InferProps<{
-                uri: import("prop-types").Requireable<string>;
-                label: import("prop-types").Requireable<string>;
-                memberTypes: import("prop-types").Requireable<any[]>;
-                extendsTypeUri: import("prop-types").Requireable<string>;
-                attributes: import("prop-types").Requireable<import("prop-types").InferProps<{
-                    label: import("prop-types").Requireable<string>;
-                    name: import("prop-types").Requireable<string>;
-                    description: import("prop-types").Requireable<string>;
-                    type: import("prop-types").Requireable<string>;
-                    hidden: import("prop-types").Requireable<boolean>;
-                    faceted: import("prop-types").Requireable<boolean>;
-                    searchable: import("prop-types").Requireable<boolean>;
-                    uri: import("prop-types").Requireable<string>;
-                    access: import("prop-types").Requireable<string[]>;
-                    cardinality: import("prop-types").Requireable<import("prop-types").InferProps<{
-                        minValue: import("prop-types").Requireable<number>;
-                        maxValue: import("prop-types").Requireable<number>;
-                    }>>;
-                }>[]>;
-            }>[]>;
-            sources: import("prop-types").Requireable<object[]>;
-        }>>;
-        globalSearchRequestOptions: import("prop-types").Requireable<object>;
-        onDeleteModifiedEntity: import("prop-types").Requireable<(...args: any[]) => any>;
-        onUpdateModifiedEntity: import("prop-types").Requireable<(...args: any[]) => any>;
-        onDeactivateError: import("prop-types").Requireable<(...args: any[]) => any>;
-        attributeType: import("prop-types").Requireable<import("prop-types").InferProps<{
-            label: import("prop-types").Requireable<string>;
-            name: import("prop-types").Requireable<string>;
-            description: import("prop-types").Requireable<string>;
-            type: import("prop-types").Requireable<string>;
-            hidden: import("prop-types").Requireable<boolean>;
-            faceted: import("prop-types").Requireable<boolean>;
-            searchable: import("prop-types").Requireable<boolean>;
-            uri: import("prop-types").Requireable<string>;
-            access: import("prop-types").Requireable<string[]>;
-            cardinality: import("prop-types").Requireable<import("prop-types").InferProps<{
-                minValue: import("prop-types").Requireable<number>;
-                maxValue: import("prop-types").Requireable<number>;
-            }>>;
-        }>>;
-        showEmptyEditors: import("prop-types").Requireable<boolean>;
-        lazy: import("prop-types").Requireable<boolean>;
-        mode: import("prop-types").Requireable<any>;
-        ownError: import("prop-types").Requireable<import("prop-types").InferProps<{
-            type: import("prop-types").Validator<NonNullable<import("@reltio/mdm-sdk").ErrorType>>;
-            attributeTypeUri: import("prop-types").Validator<string>;
-            parentUri: import("prop-types").Validator<string>;
-            uri: import("prop-types").Requireable<string>;
-            message: import("prop-types").Requireable<string>;
-        }>>;
-        errors: import("prop-types").Requireable<import("prop-types").InferProps<{
-            type: import("prop-types").Validator<NonNullable<import("@reltio/mdm-sdk").ErrorType>>;
-            attributeTypeUri: import("prop-types").Validator<string>;
-            parentUri: import("prop-types").Validator<string>;
-            uri: import("prop-types").Requireable<string>;
-            message: import("prop-types").Requireable<string>;
-        }>[]>;
-        crosswalks: import("prop-types").Requireable<any[]>;
-        onAddAttributes: import("prop-types").Requireable<(...args: any[]) => any>;
-        onAddOneMore: import("prop-types").Requireable<(...args: any[]) => any>;
-        onDeleteAttribute: import("prop-types").Requireable<(...args: any[]) => any>;
-        onChangeAttribute: import("prop-types").Requireable<(...args: any[]) => any>;
-        additionalControlsRenderer: import("prop-types").Requireable<(...args: any[]) => any>;
-        hideDeleteButton: import("prop-types").Requireable<boolean>;
-        showNonOv: import("prop-types").Requireable<boolean>;
-        state: import("prop-types").Requireable<string>;
-        expanded: import("prop-types").Requireable<boolean>;
-        attributeValue: import("prop-types").Requireable<import("prop-types").InferProps<{
-            refEntity: import("prop-types").Requireable<object>;
-            refRelation: import("prop-types").Requireable<object>;
-            value: import("prop-types").Requireable<object>;
-            ov: import("prop-types").Requireable<boolean>;
-            type: import("prop-types").Requireable<string>;
-            uri: import("prop-types").Requireable<string>;
-        }>>;
-    };
-}>, any>;
+declare const _default: import("react-redux").ConnectedComponent<import("react").ComponentType<any> | ((props: any) => JSX.Element), any>;
 export default _default;
 import ReferenceAttribute from "./ReferenceAttribute";

package/cjs/components/attributes/editMode/SimpleAttributeEditor/SimpleAttributeEditor.d.ts

@@ -1,3 +1,3 @@
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<any>>>;
+declare const _default: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 export default _default;
 import React from "react";

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

@@ -65,6 +65,9 @@ var SmallIconButton_1 = __importDefault(require("../../../SmallIconButton/SmallI
 var utils_1 = require("./utils");
 var withAsyncMount_1 = __importDefault(require("../../../../HOCs/withAsyncMount/withAsyncMount"));
 var getDependentLookupEditorContext_1 = require("./selectors/getDependentLookupEditorContext");
+var HOCs_1 = require("../../../../HOCs");
+var contexts_1 = require("../../../../contexts");
+var hooks_1 = require("../../../../hooks");
 var styles_1 = require("./styles");
 var AsyncMountPlaceholder = function () {
     var styles = (0, styles_1.useStyles)();
@@ -72,13 +75,11 @@ var AsyncMountPlaceholder = function () {
 };
 var SimpleAttributeEditor = function (_a) {
     var _b, _c;
-    var className = _a.className, attributeValue = _a.attributeValue, attributeType = _a.attributeType, isReltioCrosswalk = _a.isReltioCrosswalk, ownError = _a.ownError, mode = _a.mode, onAddOneMore = _a.onAddOneMore, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, state = _a.state, otherProps = __rest(_a, ["className", "attributeValue", "attributeType", "isReltioCrosswalk", "ownError", "mode", "onAddOneMore", "onDeleteAttribute", "onChangeAttribute", "onDeactivateError", "additionalControlsRenderer", "state"]);
+    var className = _a.className, attributeValue = _a.attributeValue, attributeType = _a.attributeType, isReltioCrosswalk = _a.isReltioCrosswalk, ownError = _a.ownError, mode = _a.mode, onAddOneMore = _a.onAddOneMore, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, state = _a.state, highlightedError = _a.highlightedError, otherProps = __rest(_a, ["className", "attributeValue", "attributeType", "isReltioCrosswalk", "ownError", "mode", "onAddOneMore", "onDeleteAttribute", "onChangeAttribute", "onDeactivateError", "additionalControlsRenderer", "state", "highlightedError"]);
     var styles = (0, styles_1.useStyles)();
     var deleted = state === 'deleted';
     var edited = state === 'edited';
     var isEditableMode = (0, mdm_sdk_1.isEditableMode)(mode);
-    var dataTypeDefinition = (0, mdm_sdk_1.getAttrDataTypeDefinition)(attributeType);
-    var value = (0, utils_1.attributeValueToEditorValue)(attributeValue, dataTypeDefinition);
     var canCreate = (0, mdm_sdk_1.checkCanCreateAttribute)({ attributeType: attributeType, mode: mode });
     var canEdit = (0, mdm_sdk_1.checkCanEditAttribute)({ attributeType: attributeType, attributeValue: attributeValue, mode: mode, isReltioCrosswalk: isReltioCrosswalk });
     var canDelete = (0, mdm_sdk_1.checkCanDeleteAttribute)({ attributeType: attributeType, attributeValue: attributeValue, mode: mode, isReltioCrosswalk: isReltioCrosswalk });
@@ -89,24 +90,28 @@ var SimpleAttributeEditor = function (_a) {
             ? (0, getDependentLookupEditorContext_1.getDependentLookupEditorContext)(state, attributeValue, attributeType === null || attributeType === void 0 ? void 0 : attributeType.uri)
             : null;
     });
+    var _d = (0, hooks_1.useScrollToAttributeError)({ highlightedError: highlightedError, isSimple: true }), ref = _d.ref, errorClassName = _d.errorClassName;
+    var dataTypeDefinition = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.getAttrDataTypeDefinition)(attributeType); }, [attributeType]);
+    var value = (0, react_1.useMemo)(function () { return (0, utils_1.attributeValueToEditorValue)(attributeValue, dataTypeDefinition); }, [attributeValue, dataTypeDefinition]);
+    var deactivateError = (0, react_1.useCallback)(function () {
+        if (ownError) {
+            onDeactivateError((0, mdm_sdk_1.getErrorId)(ownError));
+        }
+    }, [ownError, onDeactivateError]);
+    var onValueEditorChange = (0, react_1.useCallback)((0, ramda_1.pipe)((0, utils_1.prepareChangeData)(attributeValue, attributeType), onChangeAttribute, deactivateError), [attributeValue, attributeType, onChangeAttribute, deactivateError]);
     var onDelete = function () {
         onDeleteAttribute({ uri: attributeValue.uri, attributeType: attributeType });
         if ((0, mdm_sdk_1.getErrorType)(ownError) !== mdm_sdk_1.ErrorType.missed) {
             deactivateError();
         }
     };
-    var deactivateError = function () {
-        if (ownError) {
-            onDeactivateError((0, mdm_sdk_1.getErrorId)(ownError));
-        }
-    };
     var showAddButton = !!onAddOneMore && canCreate && !attributeType.singleValue;
     var showDeleteButton = !deleted && !!onDeleteAttribute && canDelete;
     var hasError = !!errorMessage;
     var deletedProps = deleted ? { disabled: true } : {};
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.editor, className) },
+    return (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)(styles.editor, className, errorClassName) },
         react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: errorMessage, className: styles.errorWrapper },
-            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles['editor-value'], (_b = {}, _b[styles.deleted] = deleted, _b), (_c = {}, _c[styles['editor-read-only-value']] = !showToEdit, _c)), "data-reltio-id": "reltio-attribute-value" }, showToEdit ? (react_1.default.createElement(DataTypeValueEditor_1.default, __assign({ fieldName: (0, mdm_sdk_1.attributeUriToSearchUri)(attributeType.uri), value: value, dataTypeDefinition: dataTypeDefinition, error: hasError, onChange: (0, ramda_1.pipe)((0, utils_1.prepareChangeData)(attributeValue, attributeType), onChangeAttribute, deactivateError), fullWidth: true }, dependentLookupEditorContext, otherProps, deletedProps))) : (react_1.default.createElement(DataTypeValue_1.default, { value: (0, mdm_sdk_1.getAttributeValue)(attributeValue), dataTypeDefinition: dataTypeDefinition })))),
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles['editor-value'], (_b = {}, _b[styles.deleted] = deleted, _b), (_c = {}, _c[styles['editor-read-only-value']] = !showToEdit, _c)), "data-reltio-id": "reltio-attribute-value" }, showToEdit ? (react_1.default.createElement(DataTypeValueEditor_1.default, __assign({ fieldName: (0, mdm_sdk_1.attributeUriToSearchUri)(attributeType.uri), value: value, dataTypeDefinition: dataTypeDefinition, error: hasError, onChange: onValueEditorChange, fullWidth: true }, dependentLookupEditorContext, otherProps, deletedProps))) : (react_1.default.createElement(DataTypeValue_1.default, { value: (0, mdm_sdk_1.getAttributeValue)(attributeValue), dataTypeDefinition: dataTypeDefinition })))),
         react_1.default.createElement("div", { className: styles['editor-actions'] },
             edited && (react_1.default.createElement(Typography_1.default, { variant: "caption", className: styles.editedLabel },
                 "(",
@@ -128,6 +133,12 @@ SimpleAttributeEditor.propTypes = {
     onDeleteAttribute: prop_types_1.default.func,
     onChangeAttribute: prop_types_1.default.func,
     onDeactivateError: prop_types_1.default.func,
-    additionalControlsRenderer: prop_types_1.default.func
+    additionalControlsRenderer: prop_types_1.default.func,
+    highlightedError: prop_types_1.default.object
 };
-exports.default = (0, react_1.memo)((0, withAsyncMount_1.default)(SimpleAttributeEditor, AsyncMountPlaceholder));
+exports.default = (0, withAsyncMount_1.default)((0, HOCs_1.withContext)(contexts_1.ScrollToErrorContext, function (contextValue, _a) {
+    var attributeValue = _a.attributeValue;
+    var error = (contextValue || {}).error;
+    var isHighlighted = (error === null || error === void 0 ? void 0 : error.uri) === attributeValue.uri;
+    return { highlightedError: isHighlighted ? contextValue : null };
+}, SimpleAttributeEditor), AsyncMountPlaceholder);

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

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "placeholder" | "deleted" | "editor" | "wrapper" | "addButton" | "errorWrapper" | "editor-value" | "editor-read-only-value" | "editor-actions" | "editedLabel">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "placeholder" | "deleted" | "editor" | "wrapper" | "addButton" | "errorWrapper" | "editor-value" | "editor-read-only-value" | "editor-actions" | "editedLabel">;

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

@@ -14,7 +14,8 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         display: 'flex',
         flex: 1,
         alignItems: 'flex-start',
-        marginBottom: "".concat(marginBottom, "px")
+        marginBottom: "".concat(marginBottom, "px"),
+        position: 'relative'
     },
     'editor-value': {
         flex: '1 1 auto'

package/cjs/components/editors/DataTypeValueEditor/DataTypeValueEditor.d.ts

@@ -1,18 +1,19 @@
-export default DataTypeValueEditor;
-declare function DataTypeValueEditor({ fieldName, value, onChange, dataTypeDefinition, TextFieldProps, ...otherProps }: {
-    [x: string]: any;
-    fieldName: any;
-    value: any;
-    onChange: any;
-    dataTypeDefinition: any;
-    TextFieldProps?: {};
-}): JSX.Element;
-declare namespace DataTypeValueEditor {
-    namespace propTypes {
-        const fieldName: PropTypes.Requireable<string>;
-        const value: PropTypes.Requireable<any>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const dataTypeDefinition: PropTypes.Requireable<object>;
-    }
-}
+declare const _default: import("react").MemoExoticComponent<{
+    ({ fieldName, value, onChange, dataTypeDefinition, TextFieldProps, ...otherProps }: {
+        [x: string]: any;
+        fieldName: any;
+        value: any;
+        onChange: any;
+        dataTypeDefinition: any;
+        TextFieldProps?: {};
+    }): JSX.Element;
+    propTypes: {
+        fieldName: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        dataTypeDefinition: PropTypes.Requireable<object>;
+    };
+    displayName: string;
+}>;
+export default _default;
 import PropTypes from "prop-types";

package/cjs/components/editors/DataTypeValueEditor/DataTypeValueEditor.js

@@ -25,6 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
 var ramda_1 = require("ramda");
 var EditorsFactory_1 = __importDefault(require("../EditorsFactory"));
 var prop_types_1 = __importDefault(require("prop-types"));
@@ -49,4 +50,5 @@ DataTypeValueEditor.propTypes = {
     onChange: prop_types_1.default.func,
     dataTypeDefinition: prop_types_1.default.object
 };
-exports.default = DataTypeValueEditor;
+DataTypeValueEditor.displayName = 'DataTypeValueEditor';
+exports.default = (0, react_1.memo)(DataTypeValueEditor);

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AttributeError } from '@reltio/mdm-sdk';
+declare type ScrollToErrorContextProps = {
+    error: AttributeError | null;
+    highlightError: (error: AttributeError) => void;
+    scrollIntoRef: (ref: React.MutableRefObject<HTMLDivElement>) => void;
+};
+export declare const ScrollToErrorContext: React.Context<ScrollToErrorContextProps>;
+declare type Props = {
+    children: React.ReactNode;
+};
+export declare const ScrollToErrorProvider: ({ children }: Props) => JSX.Element;
+export {};