@reltio/components 1.4.1666 → 1.4.1667

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

@@ -70,7 +70,7 @@ var AttributesPager = function (_a) {
             }
             case RENDERER_TYPES.imageLine:
                 return (react_1.default.createElement(BranchDecorator_1.default, { enabled: drawLines },
-                    react_1.default.createElement(ImageLineRenderer_1.ImageLineRenderer, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv, highlightedAttribute: highlightedAttribute })));
+                    react_1.default.createElement(ImageLineRenderer_1.ImageLineRenderer, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv, highlightedAttribute: highlightedAttribute, error: (0, mdm_sdk_1.getAttributeErrorByTypeUri)(attributeType.uri, activeErrors), highlightedError: highlightedError, onDeactivateError: onDeactivateError })));
             default:
                 return (react_1.default.createElement(AttributeRenderer_1.default, __assign({ values: visibleValues, attributeType: attributeType, max: max, paging: paging, crosswalks: crosswalks, drawLines: drawLines, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv, nonVisibleValues: nonVisibleValues }, commonProps)));
         }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AttributeItem, AttributeType, ImageAttributeValue, Paging, RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-sdk';
+import { AttributeError, AttributeItem, AttributeType, ImageAttributeValue, Paging, RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-sdk';
 import { ScrollToElementContext } from '../../../../contexts';
 type Props = {
     attributeType: AttributeType;
@@ -11,6 +11,9 @@ type Props = {
     onChangeAttribute: (param: AttributeItem) => void;
     requestNextPageOfAttributeValues?: (payload: RequestNextPageOfAttributeValuesPayload) => void;
     highlightedAttribute?: React.ContextType<typeof ScrollToElementContext>;
+    error?: AttributeError;
+    highlightedError?: React.ContextType<typeof ScrollToElementContext>;
+    onDeactivateError?: (id: string) => void;
 };
-export declare const ImageLineRenderer: ({ attributeType, attributeValues, paging, parentUri, showNonOv, onDeleteAttribute, onChangeAttribute, requestNextPageOfAttributeValues, highlightedAttribute }: Props) => JSX.Element;
+export declare const ImageLineRenderer: ({ attributeType, attributeValues, paging, parentUri, showNonOv, onDeleteAttribute, onChangeAttribute, requestNextPageOfAttributeValues, highlightedAttribute, error, highlightedError, onDeactivateError }: Props) => JSX.Element;
 export {};

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

@@ -1,25 +1,60 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageLineRenderer = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var Title_1 = __importDefault(require("../../../Title/Title"));
 var DescriptionIcon_1 = __importDefault(require("../../DescriptionIcon"));
 var ImageAttributesLine_1 = __importDefault(require("../ImageAttributesLine"));
 var useScrollToAttribute_1 = require("../hooks/useScrollToAttribute/useScrollToAttribute");
+var hooks_1 = require("../../../../hooks");
+var ErrorWrapper_1 = __importDefault(require("../../../ErrorWrapper/ErrorWrapper"));
 var styles_1 = require("./styles");
 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, highlightedAttribute = _a.highlightedAttribute;
+    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, error = _a.error, highlightedError = _a.highlightedError, onDeactivateError = _a.onDeactivateError;
     var styles = (0, styles_1.useStyles)();
-    var label = attributeType.label, description = attributeType.description;
-    var _b = (0, useScrollToAttribute_1.useScrollToAttribute)(highlightedAttribute), ref = _b.ref, highlightedClassName = _b.highlightedClassName;
-    return (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)(styles.wrapper, highlightedClassName) },
-        react_1.default.createElement("div", { className: styles.titleWrapper },
-            react_1.default.createElement(Title_1.default, { className: styles.title, label: label, "data-reltio-id": "reltio-attribute-label" }),
-            react_1.default.createElement(DescriptionIcon_1.default, { className: styles.description, description: description })),
-        react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: attributeValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv })));
+    var label = attributeType.label, description = attributeType.description, isRequired = attributeType.required;
+    var _b = (0, useScrollToAttribute_1.useScrollToAttribute)(highlightedAttribute), highlightedRef = _b.ref, highlightedClassName = _b.highlightedClassName;
+    var _c = (0, hooks_1.useScrollToAttributeError)({ highlightedError: highlightedError }), errorRef = _c.ref, errorClassName = _c.errorClassName;
+    var deactivateError = (0, react_1.useCallback)(function () {
+        if (error && !!onDeactivateError) {
+            onDeactivateError((0, mdm_sdk_1.getErrorId)(error));
+        }
+    }, [error, onDeactivateError]);
+    return (react_1.default.createElement("div", { ref: highlightedRef, className: (0, classnames_1.default)(styles.wrapper, highlightedClassName) },
+        react_1.default.createElement("div", { ref: errorRef, className: (0, classnames_1.default)(styles.imagesWrapper, errorClassName) },
+            react_1.default.createElement("div", { className: styles.titleWrapper },
+                react_1.default.createElement(Title_1.default, { className: styles.title, label: label, "data-reltio-id": "reltio-attribute-label", isRequired: isRequired }),
+                react_1.default.createElement(DescriptionIcon_1.default, { className: styles.description, description: description })),
+            react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: error === null || error === void 0 ? void 0 : error.message, className: styles.errorWrapper },
+                react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: attributeValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: (0, ramda_1.pipe)(onChangeAttribute, deactivateError), requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv })))));
 };
 exports.ImageLineRenderer = ImageLineRenderer;

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

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

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

@@ -20,6 +20,10 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         width: '100%',
         marginBottom: '10px'
     },
+    imagesWrapper: {
+        paddingBottom: '10px',
+        width: '100%'
+    },
     link: {
         display: 'flex',
         marginTop: 4
@@ -44,5 +48,8 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     titleWrapper: {
         flex: 1,
         paddingBottom: '3px'
+    },
+    errorWrapper: {
+        paddingBottom: '10px'
     }
 }); });

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

@@ -103,7 +103,7 @@ var ImageAttributesLine = function (_a) {
     return (react_1.default.createElement("div", { className: styles.root },
         react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, overlay: true, countFixedItems: 1, onUpload: toggleVisibilityUploadDialog, onDeleteAttribute: handleDeleteAttribute, imageSize: imageSize, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, paging: paging, parentUri: parentUri, showNonOv: showNonOv },
             react_1.default.createElement("div", { className: styles.uploadContainer, onClick: toggleVisibilityUploadDialog },
-                react_1.default.createElement(SmallIconButton_1.SmallIconButton, { className: styles.uploadButton, iconClassName: styles.uploadIcon, icon: CloudUpload_1.default }))),
+                react_1.default.createElement(SmallIconButton_1.SmallIconButton, { className: styles.uploadButton, iconClassName: styles.uploadIcon, icon: CloudUpload_1.default, "data-reltio-id": "reltio-upload-image-button" }))),
         react_1.default.createElement(UploadImageDialog_1.UploadImageDialog, { open: isVisibleUploadDialog, onUpload: handleAddAttributes, onClose: toggleVisibilityUploadDialog })));
 };
 exports.default = ImageAttributesLine;

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

@@ -4,8 +4,7 @@ exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
     root: {
-        width: '100%',
-        marginBottom: '10px'
+        width: '100%'
     },
     image: function (_a) {
         var imageMargin = _a.imageMargin;

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { getAttributePagerActiveTypeErrorMessage, isAttributeTypeError, isImage, isOv, isSpecialAttribute, Mode } from '@reltio/mdm-sdk';
+import { getAttributeErrorByTypeUri, getAttributePagerActiveTypeErrorMessage, 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';
@@ -65,7 +65,7 @@ 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, highlightedAttribute: highlightedAttribute })));
+                    React.createElement(ImageLineRenderer, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv, highlightedAttribute: highlightedAttribute, error: getAttributeErrorByTypeUri(attributeType.uri, activeErrors), highlightedError: highlightedError, onDeactivateError: onDeactivateError })));
             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)));
         }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AttributeItem, AttributeType, ImageAttributeValue, Paging, RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-sdk';
+import { AttributeError, AttributeItem, AttributeType, ImageAttributeValue, Paging, RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-sdk';
 import { ScrollToElementContext } from '../../../../contexts';
 type Props = {
     attributeType: AttributeType;
@@ -11,6 +11,9 @@ type Props = {
     onChangeAttribute: (param: AttributeItem) => void;
     requestNextPageOfAttributeValues?: (payload: RequestNextPageOfAttributeValuesPayload) => void;
     highlightedAttribute?: React.ContextType<typeof ScrollToElementContext>;
+    error?: AttributeError;
+    highlightedError?: React.ContextType<typeof ScrollToElementContext>;
+    onDeactivateError?: (id: string) => void;
 };
-export declare const ImageLineRenderer: ({ attributeType, attributeValues, paging, parentUri, showNonOv, onDeleteAttribute, onChangeAttribute, requestNextPageOfAttributeValues, highlightedAttribute }: Props) => JSX.Element;
+export declare const ImageLineRenderer: ({ attributeType, attributeValues, paging, parentUri, showNonOv, onDeleteAttribute, onChangeAttribute, requestNextPageOfAttributeValues, highlightedAttribute, error, highlightedError, onDeactivateError }: Props) => JSX.Element;
 export {};

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

@@ -1,18 +1,30 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import classnames from 'classnames';
+import { pipe } from 'ramda';
+import { getErrorId } from '@reltio/mdm-sdk';
 import Title from '../../../Title/Title';
 import DescriptionIcon from '../../DescriptionIcon';
 import ImageAttributesLine from '../ImageAttributesLine';
 import { useScrollToAttribute } from '../hooks/useScrollToAttribute/useScrollToAttribute';
+import { useScrollToAttributeError } from '../../../../hooks';
+import ErrorWrapper from '../../../ErrorWrapper/ErrorWrapper';
 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, highlightedAttribute = _a.highlightedAttribute;
+    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, error = _a.error, highlightedError = _a.highlightedError, onDeactivateError = _a.onDeactivateError;
     var styles = useStyles();
-    var label = attributeType.label, description = attributeType.description;
-    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 })),
-        React.createElement(ImageAttributesLine, { attributeValues: attributeValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv })));
+    var label = attributeType.label, description = attributeType.description, isRequired = attributeType.required;
+    var _b = useScrollToAttribute(highlightedAttribute), highlightedRef = _b.ref, highlightedClassName = _b.highlightedClassName;
+    var _c = useScrollToAttributeError({ highlightedError: highlightedError }), errorRef = _c.ref, errorClassName = _c.errorClassName;
+    var deactivateError = useCallback(function () {
+        if (error && !!onDeactivateError) {
+            onDeactivateError(getErrorId(error));
+        }
+    }, [error, onDeactivateError]);
+    return (React.createElement("div", { ref: highlightedRef, className: classnames(styles.wrapper, highlightedClassName) },
+        React.createElement("div", { ref: errorRef, className: classnames(styles.imagesWrapper, errorClassName) },
+            React.createElement("div", { className: styles.titleWrapper },
+                React.createElement(Title, { className: styles.title, label: label, "data-reltio-id": "reltio-attribute-label", isRequired: isRequired }),
+                React.createElement(DescriptionIcon, { className: styles.description, description: description })),
+            React.createElement(ErrorWrapper, { errorMessage: error === null || error === void 0 ? void 0 : error.message, className: styles.errorWrapper },
+                React.createElement(ImageAttributesLine, { attributeValues: attributeValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: pipe(onChangeAttribute, deactivateError), requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv })))));
 };

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

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

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

@@ -17,6 +17,10 @@ export var useStyles = makeStyles(function (theme) { return ({
         width: '100%',
         marginBottom: '10px'
     },
+    imagesWrapper: {
+        paddingBottom: '10px',
+        width: '100%'
+    },
     link: {
         display: 'flex',
         marginTop: 4
@@ -41,5 +45,8 @@ export var useStyles = makeStyles(function (theme) { return ({
     titleWrapper: {
         flex: 1,
         paddingBottom: '3px'
+    },
+    errorWrapper: {
+        paddingBottom: '10px'
     }
 }); });

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

@@ -75,7 +75,7 @@ var ImageAttributesLine = function (_a) {
     return (React.createElement("div", { className: styles.root },
         React.createElement(ImageAttributesLineCommon, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, overlay: true, countFixedItems: 1, onUpload: toggleVisibilityUploadDialog, onDeleteAttribute: handleDeleteAttribute, imageSize: imageSize, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, paging: paging, parentUri: parentUri, showNonOv: showNonOv },
             React.createElement("div", { className: styles.uploadContainer, onClick: toggleVisibilityUploadDialog },
-                React.createElement(SmallIconButton, { className: styles.uploadButton, iconClassName: styles.uploadIcon, icon: CloudUploadIcon }))),
+                React.createElement(SmallIconButton, { className: styles.uploadButton, iconClassName: styles.uploadIcon, icon: CloudUploadIcon, "data-reltio-id": "reltio-upload-image-button" }))),
         React.createElement(UploadImageDialog, { open: isVisibleUploadDialog, onUpload: handleAddAttributes, onClose: toggleVisibilityUploadDialog })));
 };
 export default ImageAttributesLine;

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

@@ -1,8 +1,7 @@
 import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function () { return ({
     root: {
-        width: '100%',
-        marginBottom: '10px'
+        width: '100%'
     },
     image: function (_a) {
         var imageMargin = _a.imageMargin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1666",
+  "version": "1.4.1667",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -8,7 +8,7 @@
     "@date-io/moment": "^1.3.5",
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-sdk": "^1.4.1666",
+    "@reltio/mdm-sdk": "^1.4.1667",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",