@reltio/components 1.4.1372 → 1.4.1374

package/cjs/components/RelationEditor/RelationEditor.d.ts

@@ -1,32 +1,5 @@
-export default RelationEditor;
-declare function RelationEditor({ connection, modifiedEntity, allModifiedEntities, dispatch, config, mode, metadata, globalSearchRequestOptions, error }: {
-    connection: any;
-    modifiedEntity: any;
-    allModifiedEntities: any;
-    dispatch: any;
-    config: any;
-    mode: any;
-    metadata: any;
-    globalSearchRequestOptions: any;
-    error: any;
-}): JSX.Element;
-declare namespace RelationEditor {
-    namespace propTypes {
-        export { ConnectionType as connection };
-        export { EntityType as modifiedEntity };
-        export const allModifiedEntities: PropTypes.Requireable<object>;
-        export const dispatch: PropTypes.Requireable<(...args: any[]) => any>;
-        export { RelationsConfigType as config };
-        export const mode: PropTypes.Requireable<string>;
-        export { MetadataType as metadata };
-        export const globalSearchRequestOptions: PropTypes.Requireable<object>;
-        export { AttributeErrorType as error };
-        export const parentEntityUri: PropTypes.Requireable<string>;
-    }
-}
-import { ConnectionType } from "@reltio/mdm-sdk/src/constants";
-import { EntityType } from "@reltio/mdm-sdk/src/constants";
-import PropTypes from "prop-types";
-import { RelationsConfigType } from "@reltio/mdm-sdk/src/constants";
-import { MetadataType } from "@reltio/mdm-sdk/src/constants";
-import { AttributeErrorType } from "@reltio/mdm-sdk/src/constants";
+declare const _default: React.ComponentType<{
+    [x: string]: unknown;
+}> | ((props: any) => JSX.Element);
+export default _default;
+import React from "react";

package/cjs/components/RelationEditor/RelationEditor.js

@@ -38,30 +38,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var prop_types_1 = __importDefault(require("prop-types"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
-var styles_1 = require("./styles");
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var mdm_module_1 = require("@reltio/mdm-module");
-var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
 var ConnectionRelationTypeSelector_1 = __importDefault(require("../ConnectionRelationTypeSelector/ConnectionRelationTypeSelector"));
 var ErrorWrapper_1 = __importDefault(require("../ErrorWrapper/ErrorWrapper"));
 var EntitySelector_1 = __importDefault(require("../attributes/editMode/EntitySelector/EntitySelector"));
 var AttributesList_1 = __importDefault(require("../attributes/editMode/AttributesList"));
+var HOCs_1 = require("../../HOCs");
+var contexts_1 = require("../../contexts");
+var hooks_1 = require("../../hooks");
+var styles_1 = require("./styles");
 var areRelatedEntitiesChanged = function (initial, actual) {
     return initial.length !== actual.length || initial.some(function (_, i) { return initial[i] !== actual[i]; });
 };
 var RelationEditor = function (_a) {
     var _b;
-    var connection = _a.connection, modifiedEntity = _a.modifiedEntity, allModifiedEntities = _a.allModifiedEntities, dispatch = _a.dispatch, config = _a.config, mode = _a.mode, metadata = _a.metadata, globalSearchRequestOptions = _a.globalSearchRequestOptions, error = _a.error;
+    var connection = _a.connection, modifiedEntity = _a.modifiedEntity, allModifiedEntities = _a.allModifiedEntities, dispatch = _a.dispatch, config = _a.config, mode = _a.mode, metadata = _a.metadata, globalSearchRequestOptions = _a.globalSearchRequestOptions, error = _a.error, highlightedError = _a.highlightedError;
     var _c = connection.relation, relationUri = _c.relationUri, relationType = _c.relationType, direction = _c.direction;
     var isNew = connection.isNew;
     var styles = (0, styles_1.useStyles)();
-    var _d = (0, react_1.useMemo)(function () {
+    var _d = (0, hooks_1.useScrollToAttributeError)({ highlightedError: highlightedError, isSimple: true }), ref = _d.ref, errorClassName = _d.errorClassName;
+    var _e = (0, react_1.useMemo)(function () {
         return (0, mdm_sdk_1.getInOutRelations)({
             content: connection.parentEntityUri ? config.contentSecondLevel : config.content,
             direction: direction,
@@ -69,18 +73,12 @@ var RelationEditor = function (_a) {
             mode: mode,
             metadata: metadata
         });
-    }, [config, direction, relationType, mode, metadata, connection.parentEntityUri]), _e = _d.inRelations, inRelationTypes = _e === void 0 ? [] : _e, _f = _d.outRelations, outRelationTypes = _f === void 0 ? [] : _f;
-    var firstLevelRelationAttrTypes = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.getRelationAttributesList)(metadata, relationType); }, [
-        relationType,
-        metadata
-    ]);
+    }, [config, direction, relationType, mode, metadata, connection.parentEntityUri]), _f = _e.inRelations, inRelationTypes = _f === void 0 ? [] : _f, _g = _e.outRelations, outRelationTypes = _g === void 0 ? [] : _g;
+    var firstLevelRelationAttrTypes = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.getRelationAttributesList)(metadata, relationType); }, [relationType, metadata]);
     var attributeListEntity = (0, react_1.useMemo)(function () { return (__assign({ attributes: __assign({}, mdm_module_1.profile.relations.selectors.getRelationAttributesFromConnection(connection)) }, (0, mdm_sdk_1.getActivenessAttributes)(connection.relation))); }, [connection]);
     var initialConnection = (0, react_1.useRef)(connection);
     var initialModifiedEntity = (0, react_1.useRef)(modifiedEntity);
-    var relatedTempEntities = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.findRelatedTemporaryEntities)(allModifiedEntities, modifiedEntity); }, [
-        allModifiedEntities,
-        modifiedEntity
-    ]);
+    var relatedTempEntities = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.findRelatedTemporaryEntities)(allModifiedEntities, modifiedEntity); }, [allModifiedEntities, modifiedEntity]);
     var relatedTempEntitiesUrisHistory = (0, react_1.useRef)([]);
     (0, react_1.useEffect)(function () {
         relatedTempEntitiesUrisHistory.current = (0, ramda_1.pipe)((0, ramda_1.concat)(relatedTempEntities.map((0, ramda_1.prop)('uri'))), ramda_1.uniq)(relatedTempEntitiesUrisHistory.current);
@@ -170,10 +168,12 @@ var RelationEditor = function (_a) {
             react_1.default.createElement(Typography_1.default, { className: styles.title }, isNew ? ui_i18n_1.default.text('Add new item') : ui_i18n_1.default.text('Edit item')),
             defaultRelationType === null && (react_1.default.createElement(ConnectionRelationTypeSelector_1.default, { className: styles.item, relation: connection.relation, inRelationTypes: inRelationTypes, outRelationTypes: outRelationTypes, onChange: onRelationTypeChange })),
             Boolean(relationType) && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: errorMessage },
-                    react_1.default.createElement(EntitySelector_1.default, { className: (0, classnames_1.default)(styles.item, (_b = {},
-                            _b[styles.dense] = errorMessage || (connection.entity && (0, mdm_sdk_1.isTempUri)(connection.entity.entityUri)),
-                            _b)), entity: connection.entity || {}, entityTypesUris: getEntityTypesUris() || [], max: config.max || 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: onCreateEntity, metadata: metadata, attributeTypesSelectionStrategy: mdm_sdk_1.relationEditorAttributeTypesSelectionStrategy })),
+                react_1.default.createElement("div", { ref: ref, className: errorClassName },
+                    react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: errorMessage },
+                        react_1.default.createElement(EntitySelector_1.default, { className: (0, classnames_1.default)(styles.item, (_b = {},
+                                _b[styles.dense] = errorMessage ||
+                                    (connection.entity && (0, mdm_sdk_1.isTempUri)(connection.entity.entityUri)),
+                                _b)), entity: connection.entity || {}, entityTypesUris: getEntityTypesUris() || [], max: config.max || 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: onCreateEntity, metadata: metadata, attributeTypesSelectionStrategy: mdm_sdk_1.relationEditorAttributeTypesSelectionStrategy }))),
                 react_1.default.createElement(AttributesList_1.default, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, crosswalks: connection.crosswalks, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })))),
         react_1.default.createElement("div", { className: styles.actionButtons },
             react_1.default.createElement(Button_1.default, { onClick: onCancel }, ui_i18n_1.default.text('Cancel')),
@@ -190,6 +190,17 @@ RelationEditor.propTypes = {
     metadata: mdm_sdk_1.MetadataType,
     globalSearchRequestOptions: prop_types_1.default.object,
     error: mdm_sdk_1.AttributeErrorType,
-    parentEntityUri: prop_types_1.default.string
+    parentEntityUri: prop_types_1.default.string,
+    highlightedError: prop_types_1.default.object
 };
-exports.default = RelationEditor;
+exports.default = (0, HOCs_1.withContext)(contexts_1.ScrollToErrorContext, function (contextValue, _a) {
+    var connection = _a.connection;
+    var _b = (contextValue || {}).error, error = _b === void 0 ? {} : _b;
+    var _c = connection.relation, relationUri = _c.relationUri, relationType = _c.relationType;
+    var isHighlighted = (0, ramda_1.allPass)([
+        (0, ramda_1.pipe)((0, ramda_1.prop)('uri'), mdm_sdk_1.isEmptyValue),
+        (0, ramda_1.propEq)('parentUri', relationUri),
+        (0, ramda_1.propEq)('attributeTypeUri', relationType)
+    ])(error);
+    return { highlightedError: isHighlighted ? contextValue : null };
+}, RelationEditor);

package/cjs/components/RelationEditor/index.d.ts

@@ -1,155 +1,6 @@
 export { RelationEditor };
-declare const _default: import("react-redux").ConnectedComponent<{
-    ({ connection, modifiedEntity, allModifiedEntities, dispatch, config, mode, metadata, globalSearchRequestOptions, error }: {
-        connection: any;
-        modifiedEntity: any;
-        allModifiedEntities: any;
-        dispatch: any;
-        config: any;
-        mode: any;
-        metadata: any;
-        globalSearchRequestOptions: any;
-        error: any;
-    }): JSX.Element;
-    propTypes: {
-        connection: import("prop-types").Requireable<import("prop-types").InferProps<{
-            entity: import("prop-types").Requireable<import("prop-types").InferProps<{
-                entityUri: import("prop-types").Requireable<string>;
-                entityType: import("prop-types").Requireable<string>;
-                entityLabel: import("prop-types").Requireable<string>;
-                object: import("prop-types").Requireable<import("prop-types").InferProps<{
-                    uri: import("prop-types").Requireable<string>;
-                    type: import("prop-types").Requireable<string>;
-                }>>;
-            }>>;
-            relation: import("prop-types").Requireable<import("prop-types").InferProps<{
-                relationUri: import("prop-types").Requireable<string>;
-                relationType: import("prop-types").Requireable<string>;
-                relationLabel: import("prop-types").Requireable<string>;
-                direction: import("prop-types").Requireable<string>;
-                object: import("prop-types").Requireable<import("prop-types").InferProps<{
-                    uri: import("prop-types").Requireable<string>;
-                    type: import("prop-types").Requireable<string>;
-                }>>;
-            }>>;
-        }>>;
-        modifiedEntity: import("prop-types").Requireable<import("prop-types").InferProps<{
-            uri: import("prop-types").Requireable<string>;
-            type: import("prop-types").Requireable<string>;
-        }>>;
-        allModifiedEntities: import("prop-types").Requireable<object>;
-        dispatch: import("prop-types").Requireable<(...args: any[]) => any>;
-        config: import("prop-types").Requireable<import("prop-types").InferProps<{
-            id: import("prop-types").Requireable<string>;
-            content: import("prop-types").Requireable<import("prop-types").InferProps<{
-                inRelations: import("prop-types").Requireable<NonNullable<string | object>[]>;
-                outRelations: import("prop-types").Requireable<NonNullable<string | object>[]>;
-                groups: import("prop-types").Requireable<string[]>;
-                entityTypes: import("prop-types").Requireable<string[]>;
-                nextEntry: import("prop-types").Requireable<object>;
-            }>>;
-            allowOnlyCreateNew: import("prop-types").Requireable<boolean>;
-            sortColumn: import("prop-types").Requireable<string>;
-            sortOrder: import("prop-types").Requireable<string>;
-            'text-empty': import("prop-types").Requireable<string>;
-            max: import("prop-types").Requireable<number>;
-            icon: import("prop-types").Requireable<string>;
-            caption: import("prop-types").Requireable<string>;
-            canCreate: import("prop-types").Requireable<import("prop-types").InferProps<{
-                deviceTypes: import("prop-types").Requireable<NonNullable<string | string[]>>;
-                roles: import("prop-types").Requireable<string[]>;
-            }>>;
-            canRead: import("prop-types").Requireable<import("prop-types").InferProps<{
-                deviceTypes: import("prop-types").Requireable<NonNullable<string | string[]>>;
-                roles: import("prop-types").Requireable<string[]>;
-            }>>;
-            canUpdate: import("prop-types").Requireable<import("prop-types").InferProps<{
-                deviceTypes: import("prop-types").Requireable<NonNullable<string | string[]>>;
-                roles: import("prop-types").Requireable<string[]>;
-            }>>;
-            canDelete: import("prop-types").Requireable<import("prop-types").InferProps<{
-                deviceTypes: import("prop-types").Requireable<NonNullable<string | string[]>>;
-                roles: import("prop-types").Requireable<string[]>;
-            }>>;
-            editingEnabled: import("prop-types").Requireable<boolean>;
-        }>>;
-        mode: 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>;
-        error: 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>;
-        }>>;
-        parentEntityUri: import("prop-types").Requireable<string>;
-    };
-}, any>;
+declare const _default: import("react-redux").ConnectedComponent<import("react").ComponentType<{
+    [x: string]: unknown;
+}> | ((props: any) => JSX.Element), any>;
 export default _default;
 import RelationEditor from "./RelationEditor";

package/cjs/components/RelationEditor/styles.js

@@ -6,7 +6,8 @@ exports.useStyles = (0, styles_1.makeStyles)({
     editor: {
         display: 'flex',
         flexDirection: 'column',
-        padding: '0 24px 5px'
+        padding: '0 24px 5px',
+        overflowX: 'hidden'
     },
     title: {
         color: 'rgba(0, 0, 0, 0.6)',

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

@@ -1,9 +1,13 @@
-/// <reference types="react" />
+import React from 'react';
 import { AttributeValue, NestedAttributeValue, ReferenceAttributeValue, SimpleAttributeValue } from '@reltio/mdm-sdk';
 import { AttributePagerProps } from './index';
-declare type Props = Required<Omit<AttributePagerProps, 'values'>> & {
-    values: (SimpleAttributeValue | NestedAttributeValue | ReferenceAttributeValue)[];
+declare const _default: React.ComponentType<Required<Omit<AttributePagerProps, "values">> & {
+    values?: (SimpleAttributeValue | NestedAttributeValue | ReferenceAttributeValue)[];
     nonVisibleValues: AttributeValue[];
-};
-declare const AttributeRenderer: ({ max, values, attributeType, parentUri, mode, drawLines, showEmptyEditors, errorMessage, errors, paging, crosswalks, showNonOv, nonVisibleValues, onAddAttributes, onDeleteAttribute, onChangeAttribute, onDeactivateError, additionalControlsRenderer, requestNextPageOfAttributeValues }: Props) => JSX.Element;
-export default AttributeRenderer;
+    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);
+export default _default;

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

@@ -27,26 +27,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var ramda_1 = require("ramda");
 var BranchDecorator_1 = __importDefault(require("../../BranchDecorator/BranchDecorator"));
 var ErrorMessage_1 = __importDefault(require("../../../ErrorWrapper/ErrorMessage"));
 var Title_1 = __importDefault(require("../../../Title/Title"));
+var OvIcon_1 = __importDefault(require("../../OvIcon"));
 var ShowLess_1 = __importDefault(require("../../pagersCommon/ShowLess"));
 var ShowMore_1 = __importDefault(require("../../pagersCommon/ShowMore"));
 var Attribute_1 = __importDefault(require("../AttributesFactory/Attribute"));
 var CardinalityMessage_1 = __importDefault(require("./CardinalityMessage"));
-var styles_1 = require("./styles");
 var utils_1 = require("./utils");
+var HOCs_1 = require("../../../../HOCs");
 var PinnedAttributesContext_1 = require("../contexts/PinnedAttributesContext");
-var OvIcon_1 = __importDefault(require("../../OvIcon"));
+var hooks_1 = require("../../../../hooks");
+var contexts_1 = require("../../../../contexts");
+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, 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, 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 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);
     var isPinned = (0, react_1.useMemo)(function () { return pinnedAttributes === null || pinnedAttributes === void 0 ? void 0 : pinnedAttributes.includes(attributeTypeUri); }, [attributeTypeUri, pinnedAttributes]);
     var isEmptyValues = (0, mdm_sdk_1.isEmptyValue)(values);
@@ -102,7 +107,7 @@ var AttributeRenderer = function (_a) {
     var lastIndex = shownValues ? shownValues.length - 1 : 0;
     var hiddenValuesCount = totalVisibleValues - visibleValuesCount;
     return (react_1.default.createElement(BranchDecorator_1.default, { enabled: drawLines },
-        react_1.default.createElement("div", { className: styles.wrapper },
+        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(OvIcon_1.default, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues })),
@@ -113,4 +118,13 @@ var AttributeRenderer = function (_a) {
                 showMore && (react_1.default.createElement(ShowMore_1.default, { moreNumber: (0, ramda_1.min)(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),
                 showLess && react_1.default.createElement(ShowLess_1.default, { onClick: onShowLess })))));
 };
-exports.default = AttributeRenderer;
+exports.default = (0, HOCs_1.withContext)(contexts_1.ScrollToErrorContext, function (contextValue, _a) {
+    var parentUri = _a.parentUri, 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', parentUri),
+        (0, ramda_1.propEq)('attributeTypeUri', attributeType.uri)
+    ])(error);
+    return { highlightedError: isHighlighted ? contextValue : null };
+}, AttributeRenderer);

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

@@ -1 +1 @@
-export 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" | "wrapper" | "ovIcon" | "svg-icon__root" | "attributesWrapper" | "typeError" | "titleWrapper">;

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

@@ -10,7 +10,8 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     wrapper: {
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'flex-start'
+        alignItems: 'flex-start',
+        position: 'relative'
     },
     attributesWrapper: {
         width: '100%',

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

@@ -1 +1,2 @@
-export const filterNewValues: any;
+declare const filterNewValues: any;
+export { filterNewValues };

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

@@ -4,6 +4,7 @@ exports.useStyles = void 0;
 var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     attributesContainer: {
+        overflow: 'hidden',
         padding: '0 16px 16px 16px'
     },
     header: {

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

@@ -1,160 +1,5 @@
-export default ComplexAttribute;
-declare function ComplexAttribute({ label, attributeTypesList, attributeType, attributeValue, children, errors, ownError, mode, metadata, crosswalks, lazy, showEmptyEditors, onAddOneMore, onAddAttributes, onDeleteAttribute, onChangeAttribute, additionalControlsRenderer, hideDeleteButton, state, showNonOv, expanded: expandedProp }: {
-    label: any;
-    attributeTypesList: any;
-    attributeType: any;
-    attributeValue: any;
-    children: any;
-    errors: any;
-    ownError: any;
-    mode: any;
-    metadata: any;
-    crosswalks: any;
-    lazy: any;
-    showEmptyEditors: any;
-    onAddOneMore: any;
-    onAddAttributes: any;
-    onDeleteAttribute: any;
-    onChangeAttribute: any;
-    additionalControlsRenderer: any;
-    hideDeleteButton: any;
-    state: any;
-    showNonOv: any;
-    expanded?: boolean;
-}): JSX.Element;
-declare namespace ComplexAttribute {
-    const propTypes: {
-        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>;
-        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[]>;
-        }>>;
-        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>;
-        label: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        attributeTypesList: 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>;
-            }>>;
-        }>[]>;
-        attributeValue: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
-            value: PropTypes.Requireable<object>;
-            ov: PropTypes.Requireable<boolean>;
-            type: PropTypes.Requireable<string>;
-            uri: PropTypes.Requireable<string>;
-        }>>>;
-    };
-}
-import PropTypes from "prop-types";
+declare const _default: React.ComponentType<{
+    [x: string]: unknown;
+}> | ((props: any) => JSX.Element);
+export default _default;
+import React from "react";