@reltio/components 1.4.1654 → 1.4.1656

package/cjs/components/AttributesErrorsPanel/AttributesErrorsPanel.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { AttributeError } from '@reltio/mdm-sdk';
+type Props = {
+    attributesWithErrors?: AttributeError[];
+};
+export declare const AttributesErrorsPanel: ({ attributesWithErrors }: Props) => JSX.Element;
+export {};

package/cjs/components/AttributesErrorsPanel/AttributesErrorsPanel.js

@@ -0,0 +1,84 @@
+"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.AttributesErrorsPanel = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var Warning_1 = __importDefault(require("@mui/icons-material/Warning"));
+var Error_1 = __importDefault(require("@mui/icons-material/Error"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var useCachedErrors_1 = require("./useCachedErrors");
+var ErrorsPanel_1 = require("./ErrorsPanel/ErrorsPanel");
+var Error_2 = require("./ErrorsPanel/Error");
+var styles_1 = __importDefault(require("./styles"));
+var AttributesErrorsPanel = function (_a) {
+    var _b = _a.attributesWithErrors, attributesWithErrors = _b === void 0 ? [] : _b;
+    var styles = (0, styles_1.default)();
+    var cachedErrors = (0, useCachedErrors_1.useCachedErrors)(attributesWithErrors);
+    var _c = (0, react_1.useMemo)(function () { return (0, ramda_1.partition)(mdm_sdk_1.isCriticalError, cachedErrors); }, [cachedErrors]), errors = _c[0], warnings = _c[1];
+    var _d = (0, react_1.useState)(null), expandedPanelId = _d[0], setExpandedPanelId = _d[1];
+    var panels = (0, react_1.useMemo)(function () {
+        return [
+            {
+                id: 'errors',
+                title: ui_i18n_1.default.text('${number} ${errors}', {
+                    number: errors.length,
+                    errors: errors.length === 1 ? ui_i18n_1.default.text('error') : ui_i18n_1.default.text('errors')
+                }),
+                icon: react_1.default.createElement(Warning_1.default, { className: (0, classnames_1.default)(styles.icon, styles.errorIcon) }),
+                items: errors,
+                accordionClassName: styles.errorsAccordion,
+                accordionDetailsClassName: styles.errorsAccordionDetails
+            },
+            {
+                id: 'warnings',
+                title: ui_i18n_1.default.text('${number} ${warnings}', {
+                    number: warnings.length,
+                    warnings: warnings.length === 1 ? ui_i18n_1.default.text('warning') : ui_i18n_1.default.text('warnings')
+                }),
+                icon: react_1.default.createElement(Error_1.default, { className: (0, classnames_1.default)(styles.icon, styles.warningIcon) }),
+                items: warnings,
+                accordionClassName: styles.warningsAccordion,
+                accordionDetailsClassName: styles.warningsAccordionDetails
+            }
+        ].filter(function (_a) {
+            var items = _a.items;
+            return items.length > 0;
+        });
+    }, [errors, warnings, styles]);
+    (0, react_1.useEffect)(function () {
+        setExpandedPanelId('errors');
+    }, [errors]);
+    var handleChange = (0, react_1.useCallback)(function (panelId) { return function (event, isExpanded) {
+        setExpandedPanelId(isExpanded ? panelId : null);
+    }; }, []);
+    return panels.length > 0 ? (react_1.default.createElement(ErrorsPanel_1.ErrorsPanel, { panels: panels, expandedPanelId: expandedPanelId, onToggle: handleChange, ErrorComponent: Error_2.Error })) : null;
+};
+exports.AttributesErrorsPanel = AttributesErrorsPanel;

package/cjs/components/AttributesErrorsPanel/ErrorsPanel/Error.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { AttributeError } from '@reltio/mdm-sdk';
+type Props = {
+    error: AttributeError;
+};
+export declare const Error: React.MemoExoticComponent<({ error }: Props) => JSX.Element>;
+export {};

package/cjs/components/AttributesErrorsPanel/ErrorsPanel/Error.js

@@ -0,0 +1,55 @@
+"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.Error = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Hyperlink_1 = __importDefault(require("../../../icons/Hyperlink"));
+var SmallIconButton_1 = require("../../SmallIconButton");
+var contexts_1 = require("../../../contexts");
+var helpers_1 = require("./helpers");
+var styles_1 = __importDefault(require("../styles"));
+exports.Error = (0, react_1.memo)(function (_a) {
+    var error = _a.error;
+    var styles = (0, styles_1.default)();
+    var metadata = (0, contexts_1.useMdmMetadata)();
+    var isEditableMode = (0, contexts_1.useMdmIsEditableMode)();
+    var displayedMessage = (0, helpers_1.getDisplayedErrorMessage)(metadata, error);
+    var displayedErrorPath = (0, helpers_1.getDisplayedErrorPath)(error);
+    var displayedAttributeTypesPath = (0, helpers_1.getDisplayedAttributeTypesPath)(error);
+    var highlightError = (0, react_1.useContext)(contexts_1.ScrollToElementContext).highlightError;
+    var showLink = error.uri || (error.parentUri && error.attributeTypeUri);
+    return (react_1.default.createElement("li", null,
+        react_1.default.createElement("div", { className: styles.errorWrapper },
+            displayedAttributeTypesPath && (react_1.default.createElement("span", { className: styles.attributeTypesPath }, displayedAttributeTypesPath)),
+            react_1.default.createElement("span", { className: styles.errorTitle },
+                displayedMessage,
+                showLink && isEditableMode && (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: Hyperlink_1.default, size: "XXS", onClick: function () { return highlightError(error); }, tooltipTitle: ui_i18n_1.default.text('Go to error'), className: styles.goToIcon }))),
+            displayedErrorPath && react_1.default.createElement("span", { className: styles.parents }, displayedErrorPath))));
+});
+exports.Error.displayName = 'Error';

package/cjs/components/AttributesErrorsPanel/ErrorsPanel/ErrorsPanel.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode, ElementType } from 'react';
+import { AttributeError } from '@reltio/mdm-sdk';
+type Props = {
+    panels: {
+        id: string;
+        title: string;
+        icon: ReactNode;
+        items: AttributeError[];
+        accordionClassName: string;
+        accordionDetailsClassName: string;
+    }[];
+    expandedPanelId: string;
+    onToggle: (id: string) => (e: any, isExpanded: boolean) => void;
+    ErrorComponent: ElementType;
+};
+export declare const ErrorsPanel: React.MemoExoticComponent<({ panels, expandedPanelId, onToggle, ErrorComponent }: Props) => JSX.Element>;
+export {};

package/cjs/components/AttributesErrorsPanel/ErrorsPanel/ErrorsPanel.js

@@ -0,0 +1,55 @@
+"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.ErrorsPanel = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Accordion_1 = __importDefault(require("@mui/material/Accordion"));
+var AccordionSummary_1 = __importDefault(require("@mui/material/AccordionSummary"));
+var AccordionDetails_1 = __importDefault(require("@mui/material/AccordionDetails"));
+var ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var styles_1 = __importDefault(require("../styles"));
+exports.ErrorsPanel = (0, react_1.memo)(function (_a) {
+    var panels = _a.panels, expandedPanelId = _a.expandedPanelId, onToggle = _a.onToggle, ErrorComponent = _a.ErrorComponent;
+    var styles = (0, styles_1.default)();
+    return panels.length > 0 ? (react_1.default.createElement("div", null, panels.map(function (_a) {
+        var id = _a.id, icon = _a.icon, title = _a.title, items = _a.items, accordionClassName = _a.accordionClassName, accordionDetailsClassName = _a.accordionDetailsClassName;
+        return (react_1.default.createElement(Accordion_1.default, { key: id, square: true, expanded: expandedPanelId === id, onChange: onToggle(id), className: accordionClassName, classes: { root: styles.accordion, expanded: styles.accordionExpanded } },
+            react_1.default.createElement(AccordionSummary_1.default, { classes: {
+                    root: styles.accordionSummary,
+                    expanded: styles.accordionSummaryExpanded,
+                    content: styles.accordionSummaryContent
+                }, expandIcon: react_1.default.createElement(ExpandMore_1.default, null) },
+                icon,
+                react_1.default.createElement(Typography_1.default, { className: styles.accordionSummaryHeading }, title)),
+            react_1.default.createElement(AccordionDetails_1.default, { className: (0, classnames_1.default)(styles.accordionDetails, accordionDetailsClassName) },
+                react_1.default.createElement("ul", null, items.map(function (error, i) { return (react_1.default.createElement(ErrorComponent, { key: i, error: error })); })))));
+    }))) : null;
+});
+exports.ErrorsPanel.displayName = 'ErrorsPanel';

package/cjs/components/AttributesErrorsPanel/ErrorsPanel/helpers.d.ts

@@ -0,0 +1,5 @@
+import { AttributeError, Metadata } from '@reltio/mdm-sdk';
+export declare const areErrorsEqual: (errors1?: AttributeError[], errors2?: AttributeError[]) => any;
+export declare const getDisplayedErrorMessage: (metadata: Metadata, { type, source, message, attributeTypeUri, attributeType }: AttributeError) => string;
+export declare const getDisplayedErrorPath: ({ path: errorPath, uri }: AttributeError) => string;
+export declare const getDisplayedAttributeTypesPath: ({ path: errorPath }: AttributeError) => string;

package/cjs/components/AttributesErrorsPanel/ErrorsPanel/helpers.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDisplayedAttributeTypesPath = exports.getDisplayedErrorPath = exports.getDisplayedErrorMessage = exports.areErrorsEqual = void 0;
+var ramda_1 = require("ramda");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var clearError = (0, ramda_1.omit)(['deactivated', 'path']);
+var areErrorsEqual = function (errors1, errors2) {
+    if (errors1 === void 0) { errors1 = []; }
+    if (errors2 === void 0) { errors2 = []; }
+    return errors1.length === errors2.length && (0, ramda_1.equals)(errors1.map(clearError), errors2.map(clearError));
+};
+exports.areErrorsEqual = areErrorsEqual;
+var getDisplayedErrorMessage = function (metadata, _a) {
+    var type = _a.type, source = _a.source, message = _a.message, _b = _a.attributeTypeUri, attributeTypeUri = _b === void 0 ? '' : _b, attributeType = _a.attributeType;
+    if (type === mdm_sdk_1.ErrorType.missed && source === mdm_sdk_1.ErrorSource.local) {
+        var attrType = attributeType || (0, mdm_sdk_1.findAttributeTypeByUri)(metadata, attributeTypeUri);
+        return attrType ? ui_i18n_1.default.text('${attribute} is required', { attribute: attrType.label }) : message;
+    }
+    return message;
+};
+exports.getDisplayedErrorMessage = getDisplayedErrorMessage;
+var getDisplayedErrorPath = function (_a) {
+    var errorPath = _a.path, uri = _a.uri;
+    return errorPath === null || errorPath === void 0 ? void 0 : errorPath.slice(0, uri ? errorPath.length - 1 : errorPath.length).filter(function (_a) {
+        var type = _a.type;
+        return [mdm_sdk_1.AttributeValuePathItemType.attributeValue, mdm_sdk_1.AttributeValuePathItemType.relationConnection].includes(type);
+    }).map(function (_a) {
+        var label = _a.label;
+        return label;
+    }).filter(ramda_1.identity).join(' / ');
+};
+exports.getDisplayedErrorPath = getDisplayedErrorPath;
+var getDisplayedAttributeTypesPath = function (_a) {
+    var errorPath = _a.path;
+    return errorPath === null || errorPath === void 0 ? void 0 : errorPath.filter(function (_a) {
+        var type = _a.type;
+        return type === mdm_sdk_1.AttributeValuePathItemType.attributeValue;
+    }).map((0, ramda_1.either)((0, ramda_1.path)(['valueType', 'label']), (0, ramda_1.path)(['valueType', 'name']))).filter(ramda_1.identity).join(' > ');
+};
+exports.getDisplayedAttributeTypesPath = getDisplayedAttributeTypesPath;

package/cjs/components/AttributesErrorsPanel/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "parents" | "errorWrapper" | "accordion" | "accordionExpanded" | "accordionSummary" | "accordionSummaryHeading" | "accordionSummaryExpanded" | "accordionSummaryContent" | "accordionDetails" | "errorTitle" | "attributeTypesPath" | "goToIcon" | "errorsAccordion" | "errorsAccordionDetails" | "warningsAccordion" | "warningsAccordionDetails" | "errorIcon" | "warningIcon">;
+export default useStyles;

package/cjs/components/AttributesErrorsPanel/styles.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@mui/styles");
+var accordionSummaryHeight = '48px';
+var defaultBorderStyle = '1px solid rgba(0, 0, 0, .125)';
+var useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+    accordion: {
+        borderTop: defaultBorderStyle,
+        borderBottom: defaultBorderStyle,
+        fontSize: '13px',
+        boxShadow: 'none',
+        '&:not(:first-child)': {
+            borderTop: 0
+        },
+        '&:before': {
+            display: 'none'
+        },
+        '&$accordionExpanded': {
+            margin: 'auto'
+        }
+    },
+    accordionExpanded: {},
+    accordionSummary: {
+        display: 'flex',
+        alignItems: 'center',
+        height: accordionSummaryHeight,
+        minHeight: accordionSummaryHeight,
+        '&$accordionSummaryExpanded': {
+            height: accordionSummaryHeight,
+            minHeight: accordionSummaryHeight
+        }
+    },
+    accordionSummaryHeading: {
+        flex: 1,
+        fontSize: theme.typography.pxToRem(13),
+        fontWeight: theme.typography.fontWeightRegular
+    },
+    accordionSummaryExpanded: {},
+    accordionSummaryContent: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    accordionDetails: {
+        maxHeight: '21vh',
+        overflow: 'auto',
+        paddingTop: 0,
+        paddingBottom: 0,
+        '& ul': {
+            paddingLeft: '23px',
+            marginTop: '3px'
+        },
+        '& li': {
+            paddingLeft: '9px',
+            paddingBottom: '8px'
+        }
+    },
+    parents: {
+        color: theme.palette.text.primary
+    },
+    errorWrapper: {
+        lineHeight: '18px',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    errorTitle: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    attributeTypesPath: {
+        color: theme.palette.text.secondary
+    },
+    goToIcon: {
+        marginLeft: '4px'
+    },
+    errorsAccordion: {
+        backgroundColor: '#FFF4F6',
+        borderColor: '#FFB8B3'
+    },
+    errorsAccordionDetails: {
+        color: '#DD2C00'
+    },
+    warningsAccordion: {
+        backgroundColor: '#FFF9ED',
+        borderColor: '#FFDD91'
+    },
+    warningsAccordionDetails: {
+        color: '#CC7500'
+    },
+    icon: {
+        marginRight: '8px'
+    },
+    errorIcon: {
+        fill: '#FF1744'
+    },
+    warningIcon: {
+        fill: '#F9A825'
+    }
+}); });
+exports.default = useStyles;

package/cjs/components/AttributesErrorsPanel/useCachedErrors.d.ts

@@ -0,0 +1 @@
+export declare const useCachedErrors: (allErrors: any) => any;

package/cjs/components/AttributesErrorsPanel/useCachedErrors.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCachedErrors = void 0;
+var react_1 = require("react");
+var helpers_1 = require("./ErrorsPanel/helpers");
+var useCachedErrors = function (allErrors) {
+    var cacheForAllErrors = (0, react_1.useRef)(allErrors);
+    var areEqualErrors = (0, helpers_1.areErrorsEqual)(allErrors, cacheForAllErrors.current);
+    if (!areEqualErrors) {
+        cacheForAllErrors.current = allErrors;
+    }
+    return cacheForAllErrors.current;
+};
+exports.useCachedErrors = useCachedErrors;

package/cjs/components/index.d.ts

@@ -57,6 +57,7 @@ export { EntityTypesSelector } from './EntityTypesSelector/EntityTypesSelector';
 export { RelationTypesSelector } from './RelationTypesSelector/RelationTypesSelector';
 export { default as EntityUriLink } from './EntityUriLink/EntityUriLink';
 export { default as ErrorBoundary } from './ErrorBoundary/ErrorBoundary';
+export { AttributesErrorsPanel } from './AttributesErrorsPanel/AttributesErrorsPanel';
 export { default as ErrorPopup } from './ErrorPopup/ErrorPopup';
 export { default as ErrorWrapper } from './ErrorWrapper/ErrorWrapper';
 export { default as ExpandedValueTooltip } from './ExpandedValueTooltip/ExpandedValueTooltip';

package/cjs/components/index.js

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

package/cjs/components/workflow/components/WorkflowComments/WorkflowComments.js

@@ -66,6 +66,18 @@ var WorkflowComments = function (_a) {
         setComment('');
     }, [comment, writeComment]);
     var onChange = (0, ramda_1.pipe)(getValue, setComment);
+    var onKeyPressHandler = function (e) {
+        if (e.key === 'Enter') {
+            if (comment.length > 0 && !e.shiftKey) {
+                e.preventDefault();
+                sendComment();
+            }
+            if (comment.length > 0 && e.shiftKey) {
+                return;
+            }
+            e.preventDefault();
+        }
+    };
     var BUTTONS_GROUP = (0, react_1.useMemo)(function () { return __spreadArray([], actions.map(function (_a) {
         var text = _a.text, onClick = _a.onClick;
         return ({
@@ -83,8 +95,8 @@ var WorkflowComments = function (_a) {
             ui_i18n_1.default.text('Comments'),
             " "),
         react_1.default.createElement("div", { className: styles.commentsContainer }, expanded || comments.length < 3 ? (react_1.default.createElement(ExpandedComments_1.ExpandedComments, { comments: comments })) : (react_1.default.createElement(CollapsedComments_1.CollapsedComments, { onClick: function () { return setExpanded(true); }, comments: comments }))),
-        !readOnly && (react_1.default.createElement(Input_1.default, { endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" },
-                react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Send_1.default, disabled: comment.length === 0, onClick: sendComment, "data-reltio-id": "send-button" })), classes: { root: styles.filledInputRoot }, placeholder: ui_i18n_1.default.text('Write a comment'), value: comment, onKeyPress: (0, ramda_1.when)((0, ramda_1.allPass)([(0, ramda_1.propEq)('key', 'Enter'), (0, ramda_1.always)(comment.length > 0), (0, ramda_1.propEq)('shiftKey', false)]), sendComment), onChange: onChange, disableUnderline: true, multiline: true })),
+        !readOnly && (react_1.default.createElement(Input_1.default, { endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end", className: styles.sendButton },
+                react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Send_1.default, disabled: comment.length === 0, onClick: sendComment, "data-reltio-id": "send-button" })), classes: { root: styles.filledInputRoot }, placeholder: ui_i18n_1.default.text('Write a comment'), value: comment, onKeyPress: onKeyPressHandler, onChange: onChange, disableUnderline: true, multiline: true })),
         react_1.default.createElement("div", { className: styles.modeSwitcherWrapper },
             BUTTONS_GROUP.length === 1 && (react_1.default.createElement(Button_1.default, { variant: "outlined", onClick: BUTTONS_GROUP[0].onClick, disabled: actionRequestIsInProgress }, BUTTONS_GROUP[0].label)),
             BUTTONS_GROUP.length > 1 && (react_1.default.createElement(ModeSwitcherSelect_1.ModeSwitcherSelect, { buttonsGroup: BUTTONS_GROUP, value: currentAction, disabled: actionRequestIsInProgress })))));

package/cjs/components/workflow/components/WorkflowComments/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const useCommentStyles: (props?: any) => import("@mui/styles").ClassNameMap<"date" | "icon" | "comment" | "text" | "info" | "avatar" | "firstLine" | "author">;
 export declare const useCollapsedCommentsStyles: (props?: any) => import("@mui/styles").ClassNameMap<"delimiter" | "circleButton">;
-export declare const useWorkflowStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "container" | "commentsContainer" | "filledInputRoot" | "modeSwitcherWrapper">;
+export declare const useWorkflowStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "container" | "commentsContainer" | "filledInputRoot" | "modeSwitcherWrapper" | "sendButton">;
 export declare const useExpandedComments: (props?: any) => import("@mui/styles").ClassNameMap<"messageContainer">;

package/cjs/components/workflow/components/WorkflowComments/styles.js

@@ -90,7 +90,7 @@ exports.useWorkflowStyles = (0, styles_1.makeStyles)(function (_theme) { return
     },
     filledInputRoot: {
         backgroundColor: 'rgba(0, 0, 0, 0.03)',
-        padding: '0 6px',
+        padding: '10px 6px',
         minHeight: '40px',
         margin: '10px 17px 0 6px',
         fontSize: '14px',
@@ -105,6 +105,10 @@ exports.useWorkflowStyles = (0, styles_1.makeStyles)(function (_theme) { return
         marginLeft: 'auto',
         marginRight: '16px',
         marginTop: '8px'
+    },
+    sendButton: {
+        alignSelf: 'end',
+        marginBottom: '10px'
     }
 }); });
 exports.useExpandedComments = (0, styles_1.makeStyles)(function (_theme) { return ({

package/cjs/icons/Hyperlink.d.ts

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

package/cjs/icons/Hyperlink.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var SvgHyperlink = function (props) {
+    return (react_1.default.createElement("svg", __assign({ width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.245 12.75c0 .825-.467 1.5-1.045 1.5H4.8c-.583 0-1.05-.675-1.05-1.5v-7.5c0-.832.467-1.5 1.05-1.5h8.4c.578 0 1.05.668 1.05 1.5l-.005 7.5zM9.75 9.96v1.642l3-2.805L9.75 6v1.598c-2.918.404-4.08 2.4-4.5 4.402 1.043-1.402 2.415-2.04 4.5-2.04z", fill: "#000", fillOpacity: 0.54 })));
+};
+exports.default = SvgHyperlink;

package/esm/components/AttributesErrorsPanel/AttributesErrorsPanel.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { AttributeError } from '@reltio/mdm-sdk';
+type Props = {
+    attributesWithErrors?: AttributeError[];
+};
+export declare const AttributesErrorsPanel: ({ attributesWithErrors }: Props) => JSX.Element;
+export {};

package/esm/components/AttributesErrorsPanel/AttributesErrorsPanel.js

@@ -0,0 +1,54 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import { partition } from 'ramda';
+import ErrorIcon from '@mui/icons-material/Warning';
+import WarningIcon from '@mui/icons-material/Error';
+import { isCriticalError } from '@reltio/mdm-sdk';
+import { useCachedErrors } from './useCachedErrors';
+import { ErrorsPanel } from './ErrorsPanel/ErrorsPanel';
+import { Error } from './ErrorsPanel/Error';
+import useStyles from './styles';
+export var AttributesErrorsPanel = function (_a) {
+    var _b = _a.attributesWithErrors, attributesWithErrors = _b === void 0 ? [] : _b;
+    var styles = useStyles();
+    var cachedErrors = useCachedErrors(attributesWithErrors);
+    var _c = useMemo(function () { return partition(isCriticalError, cachedErrors); }, [cachedErrors]), errors = _c[0], warnings = _c[1];
+    var _d = useState(null), expandedPanelId = _d[0], setExpandedPanelId = _d[1];
+    var panels = useMemo(function () {
+        return [
+            {
+                id: 'errors',
+                title: i18n.text('${number} ${errors}', {
+                    number: errors.length,
+                    errors: errors.length === 1 ? i18n.text('error') : i18n.text('errors')
+                }),
+                icon: React.createElement(ErrorIcon, { className: classnames(styles.icon, styles.errorIcon) }),
+                items: errors,
+                accordionClassName: styles.errorsAccordion,
+                accordionDetailsClassName: styles.errorsAccordionDetails
+            },
+            {
+                id: 'warnings',
+                title: i18n.text('${number} ${warnings}', {
+                    number: warnings.length,
+                    warnings: warnings.length === 1 ? i18n.text('warning') : i18n.text('warnings')
+                }),
+                icon: React.createElement(WarningIcon, { className: classnames(styles.icon, styles.warningIcon) }),
+                items: warnings,
+                accordionClassName: styles.warningsAccordion,
+                accordionDetailsClassName: styles.warningsAccordionDetails
+            }
+        ].filter(function (_a) {
+            var items = _a.items;
+            return items.length > 0;
+        });
+    }, [errors, warnings, styles]);
+    useEffect(function () {
+        setExpandedPanelId('errors');
+    }, [errors]);
+    var handleChange = useCallback(function (panelId) { return function (event, isExpanded) {
+        setExpandedPanelId(isExpanded ? panelId : null);
+    }; }, []);
+    return panels.length > 0 ? (React.createElement(ErrorsPanel, { panels: panels, expandedPanelId: expandedPanelId, onToggle: handleChange, ErrorComponent: Error })) : null;
+};

package/esm/components/AttributesErrorsPanel/ErrorsPanel/Error.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { AttributeError } from '@reltio/mdm-sdk';
+type Props = {
+    error: AttributeError;
+};
+export declare const Error: React.MemoExoticComponent<({ error }: Props) => JSX.Element>;
+export {};

package/esm/components/AttributesErrorsPanel/ErrorsPanel/Error.js

@@ -0,0 +1,26 @@
+import React, { memo, useContext } from 'react';
+import i18n from 'ui-i18n';
+import HyperlinkIcon from '../../../icons/Hyperlink';
+import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
+import { ScrollToElementContext, useMdmIsEditableMode, useMdmMetadata } from '../../../contexts';
+import { getDisplayedAttributeTypesPath, getDisplayedErrorMessage, getDisplayedErrorPath } from './helpers';
+import useStyles from '../styles';
+export var Error = memo(function (_a) {
+    var error = _a.error;
+    var styles = useStyles();
+    var metadata = useMdmMetadata();
+    var isEditableMode = useMdmIsEditableMode();
+    var displayedMessage = getDisplayedErrorMessage(metadata, error);
+    var displayedErrorPath = getDisplayedErrorPath(error);
+    var displayedAttributeTypesPath = getDisplayedAttributeTypesPath(error);
+    var highlightError = useContext(ScrollToElementContext).highlightError;
+    var showLink = error.uri || (error.parentUri && error.attributeTypeUri);
+    return (React.createElement("li", null,
+        React.createElement("div", { className: styles.errorWrapper },
+            displayedAttributeTypesPath && (React.createElement("span", { className: styles.attributeTypesPath }, displayedAttributeTypesPath)),
+            React.createElement("span", { className: styles.errorTitle },
+                displayedMessage,
+                showLink && isEditableMode && (React.createElement(SmallIconButtonWithTooltip, { icon: HyperlinkIcon, size: "XXS", onClick: function () { return highlightError(error); }, tooltipTitle: i18n.text('Go to error'), className: styles.goToIcon }))),
+            displayedErrorPath && React.createElement("span", { className: styles.parents }, displayedErrorPath))));
+});
+Error.displayName = 'Error';

package/esm/components/AttributesErrorsPanel/ErrorsPanel/ErrorsPanel.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode, ElementType } from 'react';
+import { AttributeError } from '@reltio/mdm-sdk';
+type Props = {
+    panels: {
+        id: string;
+        title: string;
+        icon: ReactNode;
+        items: AttributeError[];
+        accordionClassName: string;
+        accordionDetailsClassName: string;
+    }[];
+    expandedPanelId: string;
+    onToggle: (id: string) => (e: any, isExpanded: boolean) => void;
+    ErrorComponent: ElementType;
+};
+export declare const ErrorsPanel: React.MemoExoticComponent<({ panels, expandedPanelId, onToggle, ErrorComponent }: Props) => JSX.Element>;
+export {};

package/esm/components/AttributesErrorsPanel/ErrorsPanel/ErrorsPanel.js

@@ -0,0 +1,26 @@
+import React, { memo } from 'react';
+import classnames from 'classnames';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Typography from '@mui/material/Typography';
+import useStyles from '../styles';
+export var ErrorsPanel = memo(function (_a) {
+    var panels = _a.panels, expandedPanelId = _a.expandedPanelId, onToggle = _a.onToggle, ErrorComponent = _a.ErrorComponent;
+    var styles = useStyles();
+    return panels.length > 0 ? (React.createElement("div", null, panels.map(function (_a) {
+        var id = _a.id, icon = _a.icon, title = _a.title, items = _a.items, accordionClassName = _a.accordionClassName, accordionDetailsClassName = _a.accordionDetailsClassName;
+        return (React.createElement(Accordion, { key: id, square: true, expanded: expandedPanelId === id, onChange: onToggle(id), className: accordionClassName, classes: { root: styles.accordion, expanded: styles.accordionExpanded } },
+            React.createElement(AccordionSummary, { classes: {
+                    root: styles.accordionSummary,
+                    expanded: styles.accordionSummaryExpanded,
+                    content: styles.accordionSummaryContent
+                }, expandIcon: React.createElement(ExpandMoreIcon, null) },
+                icon,
+                React.createElement(Typography, { className: styles.accordionSummaryHeading }, title)),
+            React.createElement(AccordionDetails, { className: classnames(styles.accordionDetails, accordionDetailsClassName) },
+                React.createElement("ul", null, items.map(function (error, i) { return (React.createElement(ErrorComponent, { key: i, error: error })); })))));
+    }))) : null;
+});
+ErrorsPanel.displayName = 'ErrorsPanel';

package/esm/components/AttributesErrorsPanel/ErrorsPanel/helpers.d.ts

@@ -0,0 +1,5 @@
+import { AttributeError, Metadata } from '@reltio/mdm-sdk';
+export declare const areErrorsEqual: (errors1?: AttributeError[], errors2?: AttributeError[]) => any;
+export declare const getDisplayedErrorMessage: (metadata: Metadata, { type, source, message, attributeTypeUri, attributeType }: AttributeError) => string;
+export declare const getDisplayedErrorPath: ({ path: errorPath, uri }: AttributeError) => string;
+export declare const getDisplayedAttributeTypesPath: ({ path: errorPath }: AttributeError) => string;

package/esm/components/AttributesErrorsPanel/ErrorsPanel/helpers.js

@@ -0,0 +1,34 @@
+import { either, equals, identity, omit, path } from 'ramda';
+import i18n from 'ui-i18n';
+import { AttributeValuePathItemType, ErrorSource, ErrorType, findAttributeTypeByUri } from '@reltio/mdm-sdk';
+var clearError = omit(['deactivated', 'path']);
+export var areErrorsEqual = function (errors1, errors2) {
+    if (errors1 === void 0) { errors1 = []; }
+    if (errors2 === void 0) { errors2 = []; }
+    return errors1.length === errors2.length && equals(errors1.map(clearError), errors2.map(clearError));
+};
+export var getDisplayedErrorMessage = function (metadata, _a) {
+    var type = _a.type, source = _a.source, message = _a.message, _b = _a.attributeTypeUri, attributeTypeUri = _b === void 0 ? '' : _b, attributeType = _a.attributeType;
+    if (type === ErrorType.missed && source === ErrorSource.local) {
+        var attrType = attributeType || findAttributeTypeByUri(metadata, attributeTypeUri);
+        return attrType ? i18n.text('${attribute} is required', { attribute: attrType.label }) : message;
+    }
+    return message;
+};
+export var getDisplayedErrorPath = function (_a) {
+    var errorPath = _a.path, uri = _a.uri;
+    return errorPath === null || errorPath === void 0 ? void 0 : errorPath.slice(0, uri ? errorPath.length - 1 : errorPath.length).filter(function (_a) {
+        var type = _a.type;
+        return [AttributeValuePathItemType.attributeValue, AttributeValuePathItemType.relationConnection].includes(type);
+    }).map(function (_a) {
+        var label = _a.label;
+        return label;
+    }).filter(identity).join(' / ');
+};
+export var getDisplayedAttributeTypesPath = function (_a) {
+    var errorPath = _a.path;
+    return errorPath === null || errorPath === void 0 ? void 0 : errorPath.filter(function (_a) {
+        var type = _a.type;
+        return type === AttributeValuePathItemType.attributeValue;
+    }).map(either(path(['valueType', 'label']), path(['valueType', 'name']))).filter(identity).join(' > ');
+};

package/esm/components/AttributesErrorsPanel/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "parents" | "errorWrapper" | "accordion" | "accordionExpanded" | "accordionSummary" | "accordionSummaryHeading" | "accordionSummaryExpanded" | "accordionSummaryContent" | "accordionDetails" | "errorTitle" | "attributeTypesPath" | "goToIcon" | "errorsAccordion" | "errorsAccordionDetails" | "warningsAccordion" | "warningsAccordionDetails" | "errorIcon" | "warningIcon">;
+export default useStyles;

package/esm/components/AttributesErrorsPanel/styles.js

@@ -0,0 +1,97 @@
+import { makeStyles } from '@mui/styles';
+var accordionSummaryHeight = '48px';
+var defaultBorderStyle = '1px solid rgba(0, 0, 0, .125)';
+var useStyles = makeStyles(function (theme) { return ({
+    accordion: {
+        borderTop: defaultBorderStyle,
+        borderBottom: defaultBorderStyle,
+        fontSize: '13px',
+        boxShadow: 'none',
+        '&:not(:first-child)': {
+            borderTop: 0
+        },
+        '&:before': {
+            display: 'none'
+        },
+        '&$accordionExpanded': {
+            margin: 'auto'
+        }
+    },
+    accordionExpanded: {},
+    accordionSummary: {
+        display: 'flex',
+        alignItems: 'center',
+        height: accordionSummaryHeight,
+        minHeight: accordionSummaryHeight,
+        '&$accordionSummaryExpanded': {
+            height: accordionSummaryHeight,
+            minHeight: accordionSummaryHeight
+        }
+    },
+    accordionSummaryHeading: {
+        flex: 1,
+        fontSize: theme.typography.pxToRem(13),
+        fontWeight: theme.typography.fontWeightRegular
+    },
+    accordionSummaryExpanded: {},
+    accordionSummaryContent: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    accordionDetails: {
+        maxHeight: '21vh',
+        overflow: 'auto',
+        paddingTop: 0,
+        paddingBottom: 0,
+        '& ul': {
+            paddingLeft: '23px',
+            marginTop: '3px'
+        },
+        '& li': {
+            paddingLeft: '9px',
+            paddingBottom: '8px'
+        }
+    },
+    parents: {
+        color: theme.palette.text.primary
+    },
+    errorWrapper: {
+        lineHeight: '18px',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    errorTitle: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    attributeTypesPath: {
+        color: theme.palette.text.secondary
+    },
+    goToIcon: {
+        marginLeft: '4px'
+    },
+    errorsAccordion: {
+        backgroundColor: '#FFF4F6',
+        borderColor: '#FFB8B3'
+    },
+    errorsAccordionDetails: {
+        color: '#DD2C00'
+    },
+    warningsAccordion: {
+        backgroundColor: '#FFF9ED',
+        borderColor: '#FFDD91'
+    },
+    warningsAccordionDetails: {
+        color: '#CC7500'
+    },
+    icon: {
+        marginRight: '8px'
+    },
+    errorIcon: {
+        fill: '#FF1744'
+    },
+    warningIcon: {
+        fill: '#F9A825'
+    }
+}); });
+export default useStyles;

package/esm/components/AttributesErrorsPanel/useCachedErrors.d.ts

@@ -0,0 +1 @@
+export declare const useCachedErrors: (allErrors: any) => any;

package/esm/components/AttributesErrorsPanel/useCachedErrors.js

@@ -0,0 +1,10 @@
+import { useRef } from 'react';
+import { areErrorsEqual } from './ErrorsPanel/helpers';
+export var useCachedErrors = function (allErrors) {
+    var cacheForAllErrors = useRef(allErrors);
+    var areEqualErrors = areErrorsEqual(allErrors, cacheForAllErrors.current);
+    if (!areEqualErrors) {
+        cacheForAllErrors.current = allErrors;
+    }
+    return cacheForAllErrors.current;
+};

package/esm/components/index.d.ts

@@ -57,6 +57,7 @@ export { EntityTypesSelector } from './EntityTypesSelector/EntityTypesSelector';
 export { RelationTypesSelector } from './RelationTypesSelector/RelationTypesSelector';
 export { default as EntityUriLink } from './EntityUriLink/EntityUriLink';
 export { default as ErrorBoundary } from './ErrorBoundary/ErrorBoundary';
+export { AttributesErrorsPanel } from './AttributesErrorsPanel/AttributesErrorsPanel';
 export { default as ErrorPopup } from './ErrorPopup/ErrorPopup';
 export { default as ErrorWrapper } from './ErrorWrapper/ErrorWrapper';
 export { default as ExpandedValueTooltip } from './ExpandedValueTooltip/ExpandedValueTooltip';

package/esm/components/index.js

@@ -57,6 +57,7 @@ export { EntityTypesSelector } from './EntityTypesSelector/EntityTypesSelector';
 export { RelationTypesSelector } from './RelationTypesSelector/RelationTypesSelector';
 export { default as EntityUriLink } from './EntityUriLink/EntityUriLink';
 export { default as ErrorBoundary } from './ErrorBoundary/ErrorBoundary';
+export { AttributesErrorsPanel } from './AttributesErrorsPanel/AttributesErrorsPanel';
 export { default as ErrorPopup } from './ErrorPopup/ErrorPopup';
 export { default as ErrorWrapper } from './ErrorWrapper/ErrorWrapper';
 export { default as ExpandedValueTooltip } from './ExpandedValueTooltip/ExpandedValueTooltip';

package/esm/components/workflow/components/WorkflowComments/WorkflowComments.js

@@ -8,7 +8,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React, { useCallback, useState, useMemo } from 'react';
-import { allPass, pipe, propEq, when, always } from 'ramda';
+import { pipe } from 'ramda';
 import Input from '@mui/material/Input';
 import InputAdornment from '@mui/material/InputAdornment';
 import SendIcon from '@mui/icons-material/Send';
@@ -37,6 +37,18 @@ export var WorkflowComments = function (_a) {
         setComment('');
     }, [comment, writeComment]);
     var onChange = pipe(getValue, setComment);
+    var onKeyPressHandler = function (e) {
+        if (e.key === 'Enter') {
+            if (comment.length > 0 && !e.shiftKey) {
+                e.preventDefault();
+                sendComment();
+            }
+            if (comment.length > 0 && e.shiftKey) {
+                return;
+            }
+            e.preventDefault();
+        }
+    };
     var BUTTONS_GROUP = useMemo(function () { return __spreadArray([], actions.map(function (_a) {
         var text = _a.text, onClick = _a.onClick;
         return ({
@@ -54,8 +66,8 @@ export var WorkflowComments = function (_a) {
             i18n.text('Comments'),
             " "),
         React.createElement("div", { className: styles.commentsContainer }, expanded || comments.length < 3 ? (React.createElement(ExpandedComments, { comments: comments })) : (React.createElement(CollapsedComments, { onClick: function () { return setExpanded(true); }, comments: comments }))),
-        !readOnly && (React.createElement(Input, { endAdornment: React.createElement(InputAdornment, { position: "end" },
-                React.createElement(SmallIconButton, { icon: SendIcon, disabled: comment.length === 0, onClick: sendComment, "data-reltio-id": "send-button" })), classes: { root: styles.filledInputRoot }, placeholder: i18n.text('Write a comment'), value: comment, onKeyPress: when(allPass([propEq('key', 'Enter'), always(comment.length > 0), propEq('shiftKey', false)]), sendComment), onChange: onChange, disableUnderline: true, multiline: true })),
+        !readOnly && (React.createElement(Input, { endAdornment: React.createElement(InputAdornment, { position: "end", className: styles.sendButton },
+                React.createElement(SmallIconButton, { icon: SendIcon, disabled: comment.length === 0, onClick: sendComment, "data-reltio-id": "send-button" })), classes: { root: styles.filledInputRoot }, placeholder: i18n.text('Write a comment'), value: comment, onKeyPress: onKeyPressHandler, onChange: onChange, disableUnderline: true, multiline: true })),
         React.createElement("div", { className: styles.modeSwitcherWrapper },
             BUTTONS_GROUP.length === 1 && (React.createElement(Button, { variant: "outlined", onClick: BUTTONS_GROUP[0].onClick, disabled: actionRequestIsInProgress }, BUTTONS_GROUP[0].label)),
             BUTTONS_GROUP.length > 1 && (React.createElement(ModeSwitcherSelect, { buttonsGroup: BUTTONS_GROUP, value: currentAction, disabled: actionRequestIsInProgress })))));

package/esm/components/workflow/components/WorkflowComments/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const useCommentStyles: (props?: any) => import("@mui/styles").ClassNameMap<"date" | "icon" | "comment" | "text" | "info" | "avatar" | "firstLine" | "author">;
 export declare const useCollapsedCommentsStyles: (props?: any) => import("@mui/styles").ClassNameMap<"delimiter" | "circleButton">;
-export declare const useWorkflowStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "container" | "commentsContainer" | "filledInputRoot" | "modeSwitcherWrapper">;
+export declare const useWorkflowStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "container" | "commentsContainer" | "filledInputRoot" | "modeSwitcherWrapper" | "sendButton">;
 export declare const useExpandedComments: (props?: any) => import("@mui/styles").ClassNameMap<"messageContainer">;

package/esm/components/workflow/components/WorkflowComments/styles.js

@@ -87,7 +87,7 @@ export var useWorkflowStyles = makeStyles(function (_theme) { return ({
     },
     filledInputRoot: {
         backgroundColor: 'rgba(0, 0, 0, 0.03)',
-        padding: '0 6px',
+        padding: '10px 6px',
         minHeight: '40px',
         margin: '10px 17px 0 6px',
         fontSize: '14px',
@@ -102,6 +102,10 @@ export var useWorkflowStyles = makeStyles(function (_theme) { return ({
         marginLeft: 'auto',
         marginRight: '16px',
         marginTop: '8px'
+    },
+    sendButton: {
+        alignSelf: 'end',
+        marginBottom: '10px'
     }
 }); });
 export var useExpandedComments = makeStyles(function (_theme) { return ({

package/esm/icons/Hyperlink.d.ts

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

package/esm/icons/Hyperlink.js

@@ -0,0 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+var SvgHyperlink = function (props) {
+    return (React.createElement("svg", __assign({ width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.245 12.75c0 .825-.467 1.5-1.045 1.5H4.8c-.583 0-1.05-.675-1.05-1.5v-7.5c0-.832.467-1.5 1.05-1.5h8.4c.578 0 1.05.668 1.05 1.5l-.005 7.5zM9.75 9.96v1.642l3-2.805L9.75 6v1.598c-2.918.404-4.08 2.4-4.5 4.402 1.043-1.402 2.415-2.04 4.5-2.04z", fill: "#000", fillOpacity: 0.54 })));
+};
+export default SvgHyperlink;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1654",
+  "version": "1.4.1656",
   "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.1654",
+    "@reltio/mdm-sdk": "^1.4.1656",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",